arman_mohtadji/Ceras
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
armansansd
2023-07-12 16:31:19 +01:00
commit 3424b1927b
23306 changed files with 2217776 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/ceras/node_modules/foundation-sites/scss/util/_breakpoint.scss
Generated Vendored Executable
+360
View File
@@ -0,0 +1,360 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group breakpoints
////
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
) !default;
/// The largest named breakpoint in which to include print as a media type
/// @type Keyword
$print-breakpoint: large !default;
$-zf-zero-breakpoint: small !default;
$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
@if nth(map-values($breakpoints), 1) != 0 {
@error 'The first key in the $breakpoints map must have a value of "0".';
}
@else {
$-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
}
/// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
/// @type List
$breakpoint-classes: (small medium large) !default;
/// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
///
/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
@function breakpoint($val: $-zf-zero-breakpoint) {
// Size or keyword
$bp: nth($val, 1);
// Value for max-width media queries
$bp-max: 0;
// Direction of media query (up, down, or only)
$dir: if(length($val) > 1, nth($val, 2), up);
// Eventual output
$str: '';
// Is it a named media query?
$named: false;
// Orientation media queries have a unique syntax
@if $bp == 'landscape' or $bp == 'portrait' {
@return '(orientation: #{$bp})';
}
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
}
// Try to pull a named breakpoint out of the $breakpoints map
@if type-of($bp) == 'string' {
@if map-has-key($breakpoints, $bp) {
@if $dir == 'only' or $dir == 'down' {
$bp-max: -zf-map-next($breakpoints, $bp);
}
$bp: map-get($breakpoints, $bp);
$named: true;
}
@else {
$bp: 0;
@warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
}
}
// Convert any pixel, rem, or unitless value to em
$bp: -zf-bp-to-em($bp);
// Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
// Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
// See https://github.com/zurb/foundation-sites/issues/11313
@if $bp-max {
$bp-max: -zf-bp-to-em($bp-max) - .00125;
}
// Conditions to skip media query creation
// - It's a named breakpoint that resolved to "0 down" or "0 up"
// - It's a numeric breakpoint that resolved to "0 " + anything
@if $bp > 0em or $dir == 'only' or $dir == 'down' {
// `only` ranges use the format `(min-width: n) and (max-width: n)`
@if $dir == 'only' {
// Only named media queries can have an "only" range
@if $named == true {
// Only use "min-width" if the floor is greater than 0
@if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
// Only add "and" to the media query if there's a ceiling
@if $bp-max != null {
$str: $str + ' and ';
}
}
// Only use "max-width" if there's a ceiling
@if $bp-max != null {
$str: $str + '(max-width: #{$bp-max})';
}
}
@else {
@warn 'breakpoint(): Only named media queries can have an `only` range.';
}
}
// `down` ranges use the format `(max-width: n)`
@else if $dir == 'down' {
$max: if($named, $bp-max, $bp);
// Skip media query creation if input value is exactly "0 down",
// unless the function was called as "small down", in which case it's just "small only"
@if $named or $bp > 0em {
@if $max != null {
$str: $str + '(max-width: #{$max})';
}
}
}
// `up` ranges use the format `(min-width: n)`
@else if $bp > 0em {
$str: $str + '(min-width: #{$bp})';
}
}
@return $str;
}
/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
/// - If a rem value is passed, the unit will be changed to em.
/// - If an em value is passed, the value will be used as-is.
///
/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
@mixin breakpoint($value) {
$str: breakpoint($value);
$bp: index($-zf-breakpoints-keys, $value);
$pbp: index($-zf-breakpoints-keys, $print-breakpoint);
$old-zf-size: null;
// Make breakpoint size available as a variable
@if global-variable-exists(-zf-size) {
$old-zf-size: $-zf-size;
}
$-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
// If $str is still an empty string, no media query is needed
@if $str == '' {
@content;
}
// Otherwise, wrap the content in a media query
@else {
// For named breakpoints less than or equal to $print-breakpoint, add print to the media types
@if $bp != null and $bp <= $pbp {
@media print, screen and #{$str} {
@content;
}
}
@else {
@media screen and #{$str} {
@content;
}
}
}
$-zf-size: $old-zf-size !global;
}
/// Converts the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
/// @access private
///
/// @param {Map} $map - Map to convert.
///
/// @returns {String} A string containing the map's contents.
@function -zf-bp-serialize($map) {
$str: '';
@each $key, $value in $map {
$str: $str + $key + '=' + -zf-bp-to-em($value) + '&';
}
$str: str-slice($str, 1, -2);
@return $str;
}
/// Find the next key in a map.
/// @access private
///
/// @param {Map} $map - Map to traverse.
/// @param {Mixed} $key - Key to use as a starting point.
///
/// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
@function -zf-map-next($map, $key) {
// Store the keys of the map as a list
$values: map-keys($map);
$i: 0;
// If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map
@if (map-has-key($map, $key)) {
$i: index($values, $key) + 1;
}
// If the key doesn't exist, or it's the last key in the map, return null
@if ($i > length($map) or $i == 0) {
@return null;
}
// Otherwise, return the value
@else {
@return map-get($map, nth($values, $i));
}
}
/// Return a list of our named breakpoints less than $key. Useful for dealing with
/// responsive gutters for the grid.
/// @access private
///
/// @param {String} $key - Key to use as last breakpoint.
///
/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
@function -zf-breakpoints-less-than($key) {
$list: ();
$found_key: false;
@each $name in $-zf-breakpoints-keys {
@if ($name == $key) {
$found_key: true;
}
@if not $found_key {
$list: append($list, $name);
}
}
@return $list;
}
/// Return a list of our named breakpoints less than $key. Useful for dealing with
/// responsive gutters for the grid.
/// @access private
///
/// @param {String} $breakpoint - a named or non-named breakpoint.
///
/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
@function -zf-closest-named-breakpoint($breakpoint) {
$last: $-zf-zero-breakpoint;
$found: false;
$value: unitless-calc($breakpoint, 1px);
@each $key, $val in $breakpoints {
@if not $found {
@if unitless-calc($val) > $value {
$found: true;
} @else {
$last: $key;
}
}
}
@return $last;
}
/// Get a value for a breakpoint from a responsive config map or single value.
/// - If the config is a single value, return it regardless of `$value`.
/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.
/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
/// @access private
///
/// @param {Number|Map} $map - Responsive config map or single value.
/// @param {Keyword} $value - Breakpoint name to use.
///
/// @return {Mixed} The corresponding breakpoint value.
@function -zf-get-bp-val($map, $value) {
// If the given map is a single value, return it
@if type-of($map) == 'number' {
@return $map;
}
// Check if the breakpoint name exists globally
@if not map-has-key($breakpoints, $value) {
@if type-of($value) == 'number' {
$value: -zf-closest-named-breakpoint($value);
} @else {
@return null;
}
}
// Check if the breakpoint name exists in the local config map
@else if map-has-key($map, $value) {
// If it does, just return the value
@return map-get($map, $value);
}
// Otherwise, find the next lowest breakpoint and return that value
@else {
$anchor: null;
$found: false;
@each $key, $val in $breakpoints {
@if not $found {
@if map-has-key($map, $key) {
$anchor: $key;
}
@if $key == $value {
$found: true;
}
}
}
@return map-get($map, $anchor);
}
}
$small-up: '';
$small-only: '';
@if map-has-key($breakpoints, small) {
$small-up: screen;
$small-only: unquote('screen and #{breakpoint(small only)}');
}
$medium-up: '';
$medium-only: '';
@if map-has-key($breakpoints, medium) {
$medium-up: unquote('screen and #{breakpoint(medium)}');
$medium-only: unquote('screen and #{breakpoint(medium only)}');
}
$large-up: '';
$large-only: '';
@if map-has-key($breakpoints, large) {
$large-up: unquote('screen and #{breakpoint(large)}');
$large-only: unquote('screen and #{breakpoint(large only)}');
}
$xlarge-up: '';
$xlarge-only: '';
@if map-has-key($breakpoints, xlarge) {
$xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
$xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
}
$xxlarge-up: '';
@if map-has-key($breakpoints, xxlarge) {
$xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
}
themes/ceras/node_modules/foundation-sites/scss/util/_color.scss
Generated Vendored Executable
+139
View File
@@ -0,0 +1,139 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import 'math';
$contrast-warnings: true !default;
////
/// @group functions
////
/// Checks the luminance of `$color`.
///
/// @param {Color} $color - Color to check the luminance of.
///
/// @returns {Number} The luminance of `$color`.
@function color-luminance($color) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
$rgba: red($color), green($color), blue($color);
$rgba2: ();
@for $i from 1 through 3 {
$rgb: nth($rgba, $i);
$rgb: $rgb / 255;
$rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
$rgba2: append($rgba2, $rgb);
}
@return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
}
/// Checks the contrast ratio of two colors.
///
/// @param {Color} $color1 - First color to compare.
/// @param {Color} $color2 - Second color to compare.
///
/// @returns {Number} The contrast ratio of the compared colors.
@function color-contrast($color1, $color2) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
$luminance1: color-luminance($color1) + 0.05;
$luminance2: color-luminance($color2) + 0.05;
$ratio: $luminance1 / $luminance2;
@if $luminance2 > $luminance1 {
$ratio: 1 / $ratio;
}
$ratio: round($ratio * 10) / 10;
@return $ratio;
}
/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
///
/// @param {Color} $base - Color to check luminance.
/// @param {List} $colors [($white, $black)] - Colors to compare.
/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
///
/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
$contrast: color-contrast($base, nth($colors, 1));
$best: nth($colors, 1);
@for $i from 2 through length($colors) {
$current-contrast: color-contrast($base, nth($colors, $i));
@if ($current-contrast - $contrast > $tolerance) {
$contrast: color-contrast($base, nth($colors, $i));
$best: nth($colors, $i);
}
}
@if ($contrast-warnings and $contrast < 3) {
@warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
}
@return $best;
}
/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
///
/// @param {Color} $color - Color to scale.
/// @param {Percentage} $scale [5%] - Amount to scale up or down.
/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
///
/// @returns {Color} A scaled color.
@function smart-scale($color, $scale: 5%, $threshold: 40%) {
@if lightness($color) > $threshold {
$scale: -$scale;
}
@return scale-color($color, $lightness: $scale);
}
/// Get color from foundation-palette
///
/// @param {key} color key from foundation-palette
///
/// @returns {Color} color from foundation-palette
@function get-color($key) {
@if map-has-key($foundation-palette, $key) {
@return map-get($foundation-palette, $key);
}
@else {
@error 'given $key is not available in $foundation-palette';
}
}
/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
@mixin add-foundation-colors() {
@if map-has-key($foundation-palette, primary) {
$primary-color: map-get($foundation-palette, primary) !global;
} @else {
$primary-color: #1779ba !global;
}
@if map-has-key($foundation-palette, secondary) {
$secondary-color: map-get($foundation-palette, secondary) !global;
} @else {
$secondary-color: #767676 !global;
}
@if map-has-key($foundation-palette, success) {
$success-color: map-get($foundation-palette, success) !global;
} @else {
$success-color: #3adb76 !global;
}
@if map-has-key($foundation-palette, warning) {
$warning-color: map-get($foundation-palette, warning) !global;
} @else {
$warning-color: #ffae00 !global;
}
@if map-has-key($foundation-palette, alert) {
$alert-color: map-get($foundation-palette, alert) !global;
} @else {
$alert-color: #cc4b37 !global;
}
}
themes/ceras/node_modules/foundation-sites/scss/util/_direction.scss
Generated Vendored Executable
+31
View File
@@ -0,0 +1,31 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Returns the opposite direction of $dir
///
/// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left".
/// @return {Keyword} Opposite direction of $dir
@function direction-opposite(
$dir
) {
$dirs: (top, right, bottom, left);
$place: index($dirs, $dir);
@if $place == null {
@error 'direction-opposite: Invalid $dir parameter, expected a value from "#{$dirs}", found "#{$dir}".';
@return null;
}
// Calculate the opposite place in a circle, with a starting index of 1
$length: length($dirs);
$demi: $length / 2;
$opposite-place: (($place + $demi - 1) % $length) + 1;
@return nth($dirs, $opposite-place);
}
themes/ceras/node_modules/foundation-sites/scss/util/_flex.scss
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
@function -zf-flex-justify($text-direction){
$-zf-flex-justify: (
'left': if($text-direction == rtl, flex-end, flex-start),
'right': if($text-direction == rtl, flex-start, flex-end),
'center': center,
'justify': space-between,
'spaced': space-around,
);
@return $-zf-flex-justify;
}
$-zf-flex-align: (
'top': flex-start,
'bottom': flex-end,
'middle': center,
'stretch': stretch,
);
$-zf-flex-direction: (
'row': row,
'row-reverse': row-reverse,
'column': column,
'column-reverse': column-reverse,
);
/// Enables flexbox by adding `display: flex` to the element.
@mixin flex {
display: flex;
}
/// Horizontally or vertically aligns the items within a flex container.
///
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-align($x: null, $y: null) {
@if $x {
@if map-has-key($-zf-flex-justify, $x) {
$x: map-get($-zf-flex-justify, $x);
}
@else {
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
}
}
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
}
}
justify-content: $x;
align-items: $y;
}
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
///
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
@mixin flex-align-self($y: null) {
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
}
}
align-self: $y;
}
/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
/// @param {Number} $order [0] - Order number to apply.
@mixin flex-order($order: 0) {
order: $order;
}
/// Change flex-direction
/// @param {Keyword} $direction [row] - Flex direction to use. Can be
/// - row (default): same as text direction
/// - row-reverse: opposite to text direction
/// - column: same as row but top to bottom
/// - column-reverse: same as row-reverse top to bottom
@mixin flex-direction($direction: row) {
flex-direction: $direction;
}
themes/ceras/node_modules/foundation-sites/scss/util/_math.scss
Generated Vendored Executable
+72
View File
@@ -0,0 +1,72 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Finds the greatest common divisor of two integers.
///
/// @param {Number} $a - First number to compare.
/// @param {Number} $b - Second number to compare.
///
/// @returns {Number} The greatest common divisor.
@function gcd($a, $b) {
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
@if ($b != 0) {
@return gcd($b, $a % $b);
}
@else {
@return abs($a);
}
}
/// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation
///
/// @param {Number} $base - The base number.
/// @param {Number} $exponent - The exponent.
///
/// @returns {Number} The product of the exponentiation.
@function pow($base, $exponent, $prec: 16) {
@if (floor($exponent) != $exponent) {
$prec2 : pow(10, $prec);
$exponent: round($exponent * $prec2);
$denominator: gcd($exponent, $prec2);
@return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
}
$value: $base;
@if $exponent > 1 {
@for $i from 2 through $exponent {
$value: $value * $base;
}
}
@else if $exponent < 1 {
@for $i from 0 through -$exponent {
$value: $value / $base;
}
}
@return $value;
}
@function nth-root($num, $n: 2, $prec: 12) {
// From: http://rosettacode.org/wiki/Nth_root#JavaScript
$x: 1;
@for $i from 0 through $prec {
$x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
}
@return $x;
}
/// Calculates the height as a percentage of the width for a given ratio.
/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
/// @return {Number} A percentage value for the height relative to the width of a responsive container.
@function ratio-to-percentage($ratio) {
$w: nth($ratio, 1);
$h: nth($ratio, 3);
@return $h / $w * 100%;
}
themes/ceras/node_modules/foundation-sites/scss/util/_mixins.scss
Generated Vendored Executable
+317
View File
@@ -0,0 +1,317 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Creates an inner box-shadow for only one side
///
/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
/// @param {Number} $size - Width for the target side.
/// @param {Color} $color - Color of the shadow.
@mixin inner-side-shadow(
$side: bottom,
$size: 20px,
$color: rgba($black, 0.25)
) {
$helper: round($size * 0.65);
@if ($side == top) {
box-shadow: inset 0 $helper $size (-1)*$helper $color;
} @else if ($side == left) {
box-shadow: inset $helper 0 $size (-1)*$helper $color;
} @else if ($side == right) {
box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
} @else if ($side == bottom) {
box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
}
}
/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
///
/// @param {Number} $triangle-size - Width of the triangle.
/// @param {Color} $triangle-color - Color of the triangle.
/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
@mixin css-triangle(
$triangle-size,
$triangle-color,
$triangle-direction
) {
display: block;
width: 0;
height: 0;
border: inset $triangle-size;
content: '';
@if ($triangle-direction == down) {
border-bottom-width: 0;
border-top-style: solid;
border-color: $triangle-color transparent transparent;
}
@if ($triangle-direction == up) {
border-top-width: 0;
border-bottom-style: solid;
border-color: transparent transparent $triangle-color;
}
@if ($triangle-direction == right) {
border-right-width: 0;
border-left-style: solid;
border-color: transparent transparent transparent $triangle-color;
}
@if ($triangle-direction == left) {
border-left-width: 0;
border-right-style: solid;
border-color: transparent $triangle-color transparent transparent;
}
}
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
///
/// @param {Color} $color [$black] - Color to use for the icon.
/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
/// @param {Number} $width [20px] - Width of the icon.
/// @param {Number} $height [16px] - Height of the icon.
/// @param {Number} $weight [2px] - Height of individual bars in the icon.
/// @param {Number} $bars [3] - Number of bars in the icon.
@mixin hamburger(
$color: $black,
$color-hover: $dark-gray,
$width: 20px,
$height: 16px,
$weight: 2px,
$bars: 3
) {
// box-shadow CSS output
$shadow: ();
$hover-shadow: ();
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
$spacing: ($height - ($weight * $bars)) / ($bars - 1);
@if unit($spacing) == 'px' {
$spacing: floor($spacing);
}
@for $i from 2 through $bars {
$offset: ($weight + $spacing) * ($i - 1);
$shadow: append($shadow, 0 $offset 0 $color, comma);
}
// Icon container
position: relative;
display: inline-block;
vertical-align: middle;
width: $width;
height: $height;
cursor: pointer;
// Icon bars
&::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: $weight;
background: $color;
box-shadow: $shadow;
content: '';
}
// Hover state
@if $color-hover {
// Generate CSS
@for $i from 2 through $bars {
$offset: ($weight + $spacing) * ($i - 1);
$hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
}
&:hover::after {
background: $color-hover;
box-shadow: $hover-shadow;
}
}
}
/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
///
/// @param {Color} $color [$black] - Color to use for the triangle.
@mixin background-triangle($color: $black) {
$rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
@media screen and (min-width:0\0) {
@if lightness($color) < 60% {
// White triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
}
@else {
// Black triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
}
}
}
/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
@mixin clearfix {
&::before,
&::after {
display: table;
content: ' ';
@if $global-flexbox {
flex-basis: 0;
order: 1;
}
}
&::after {
clear: both;
}
}
/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
///
/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
@mixin auto-width($max, $elem: li) {
@for $i from 2 through $max {
&:nth-last-child(#{$i}):first-child,
&:nth-last-child(#{$i}):first-child ~ #{$elem} {
width: percentage(1 / $i);
}
}
}
/// Removes the focus ring around an element when a mouse input is detected.
@mixin disable-mouse-outline {
[data-whatinput='mouse'] & {
outline: 0;
}
}
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin element-invisible {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/// Reverses the CSS output created by the `element-invisible()` mixin.
@mixin element-invisible-off {
position: static !important;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
/// Vertically centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/// Horizontally centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin horizontal-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/// Absolutely centers the element inside of its first non-static parent,
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
///
/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
$list: $breakpoint-classes;
@if not $small {
$list: sl-remove($list, $-zf-zero-breakpoint);
}
@each $name in $list {
$old-zf-size: null;
@if global-variable-exists(-zf-size) {
$old-zf-size: $-zf-size;
}
$-zf-size: $name !global;
@if $auto-insert-breakpoints {
@include breakpoint($name) {
@content;
}
}
@else {
@content;
}
$-zf-size: $old-zf-size !global;
}
}
/// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:
/// - For a single value, `$-zf-bp-value` is this value.
/// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
/// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
/// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
/// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
@mixin -zf-breakpoint-value(
$name: auto,
$map: null
) {
@if $name == auto and type-of($map) == 'map' {
// "auto"
@each $k, $v in $map {
@include breakpoint($k) {
@include -zf-breakpoint-value($v, $map) {
@content;
}
}
}
}
@else {
// breakpoint name
@if type-of($name) == 'string' {
$name: -zf-get-bp-val($map, $name);
}
// breakpoint value
$-zf-bp-value: $name !global;
@content;
}
}
themes/ceras/node_modules/foundation-sites/scss/util/_selector.scss
Generated Vendored Executable
+41
View File
@@ -0,0 +1,41 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
///
/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.
/// @param {Keyword} $modifier [''] - A modifier to be applied to each text input type (e.g. a class or a pseudo-class). Leave blank to ignore.
@function text-inputs($types: (), $modifier: '') {
$return: ();
$all-types:
text
password
date
datetime
datetime-local
month
week
email
number
search
tel
time
url
color;
@if not has-value($types) {
$types: $all-types;
}
@each $type in $types {
$return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma);
}
@return $return;
}
themes/ceras/node_modules/foundation-sites/scss/util/_typography.scss
Generated Vendored Executable
+26
View File
@@ -0,0 +1,26 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
$-zf-font-stack: (
'georgia': (Georgia, "URW Bookman L", serif),
'helvetica': (Helvetica, Arial, "Nimbus Sans L", sans-serif),
'lucida-grande': ("Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", sans-serif),
'monospace': ("Courier New", Courier, "Nimbus Sans L", monospace),
'system': (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif),
'verdana': (Verdana, Geneva, "DejaVu Sans", sans-serif),
);
/// Return a font stack list from a map. Equivalent to `map-safe-get($name, $-zf-font-stack)`.
///
/// @param {String} $stack - Name of the font stack.
/// @param {Map} $map [$-zf-font-stack] - Map of font stacks to retrieve a list from.
///
/// @returns {List} Found font stack.
@function font-stack($stack, $map: $-zf-font-stack) {
@return map-safe-get($map, $stack);
}
themes/ceras/node_modules/foundation-sites/scss/util/_unit.scss
Generated Vendored Executable
+152
View File
@@ -0,0 +1,152 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
$global-font-size: 100% !default;
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
///
/// @param {Number} $num - Number to strip unit from.
///
/// @returns {Number} The same number, sans unit.
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
/// Converts one or more pixel values into matching rem values.
///
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$global-font-size` variable as the base.
///
/// @returns {List} A list of converted values.
@function rem-calc($values, $base: null) {
$rem-values: ();
$count: length($values);
// If no base is defined, defer to the global font size
@if $base == null {
$base: $global-font-size;
}
// If the base font size is a %, then multiply it by 16px
// This is because 100% font size = 16px in most all browsers
@if unit($base) == '%' {
$base: ($base / 100%) * 16px;
}
// Using rem as base allows correct scaling
@if unit($base) == 'rem' {
$base: strip-unit($base) * 16px;
}
@if $count == 1 {
@return -zf-to-rem($values, $base);
}
@for $i from 1 through $count {
$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
}
@return $rem-values;
}
// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
@function -zf-bp-to-em($value) {
// Pixel and unitless values are converted to rems
@if unit($value) == 'px' or unitless($value) {
$value: rem-calc($value, $base: 16px);
}
// Then the value is converted to ems
@return strip-unit($value) * 1em;
}
/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
/// @access private
///
/// @param {Number} $value - Pixel value to convert.
/// @param {Number} $base [null] - Base for pixel conversion.
///
/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
@function -zf-to-rem($value, $base: null) {
// Check if the value is a number
@if type-of($value) != 'number' {
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
@return $value;
}
// Transform em into rem if someone hands over 'em's
@if unit($value) == 'em' {
$value: strip-unit($value) * 1rem;
}
// Calculate rem if units for $value is not rem or em
@if unit($value) != 'rem' {
$value: strip-unit($value) / strip-unit($base) * 1rem;
}
// Turn 0rem into 0
@if $value == 0rem {
$value: 0;
}
@return $value;
}
/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
///
/// @param {Number} $value - Value to convert to a unitless line height
/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size
///
/// @return {Number} - Unitless number
@function unitless-calc($value, $base: null) {
// If no base is defined, defer to the global font size
@if $base == null {
$base: $global-font-size;
}
// First, lets convert our $base to pixels
// If the base font size is a %, then multiply it by 16px
@if unit($base) == '%' {
$base: ($base / 100%) * 16px;
}
@if unit($base) == 'rem' {
$base: strip-unit($base) * 16px;
}
@if unit($base) == 'em' {
$base: strip-unit($base) * 16px;
}
// Now let's convert our value to pixels too
@if unit($value) == '%' {
$value: ($value / 100%) * $base;
}
@if unit($value) == 'rem' {
$value: strip-unit($value) * $base;
}
@if unit($value) == 'em' {
$value: strip-unit($value) * $base;
}
// 'px'
@if unit($value) == 'px' {
@return strip-unit($value) / strip-unit($base);
}
// assume that line-heights greater than 10 are meant to be absolute in 'px'
@if unitless($value) and ($value > 10) {
@return $value / strip-unit($base);
}
@return $value;
}
themes/ceras/node_modules/foundation-sites/scss/util/_util.scss
Generated Vendored Executable
+14
View File
@@ -0,0 +1,14 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import 'math';
@import 'unit';
@import 'value';
@import 'direction';
@import 'color';
@import 'selector';
@import 'flex';
@import 'breakpoint';
@import 'mixins';
@import 'typography';
themes/ceras/node_modules/foundation-sites/scss/util/_value.scss
Generated Vendored Executable
+160
View File
@@ -0,0 +1,160 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group functions
////
/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
///
/// @param {Mixed} $val - Value to check.
///
/// @returns {Boolean} `true` if `$val` is not falsey.
@function has-value($val) {
@if $val == null or $val == none {
@return false;
}
@if type-of($val) == 'number' and strip-unit($val) == 0 {
@return false;
}
@if type-of($val) == 'list' and length($val) == 0 {
@return false;
}
@return true;
}
/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
///
/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.
///
/// @returns {Number} A single value based on `$val` and `$side`.
@function get-side($val, $side) {
$length: length($val);
@if $length == 1 {
@return $val;
}
@if $length == 2 {
@return map-get((
top: nth($val, 1),
bottom: nth($val, 1),
left: nth($val, 2),
right: nth($val, 2),
), $side);
}
@if $length == 3 {
@return map-get((
top: nth($val, 1),
left: nth($val, 2),
right: nth($val, 2),
bottom: nth($val, 3),
), $side);
}
@if $length == 4 {
@return map-get((
top: nth($val, 1),
right: nth($val, 2),
bottom: nth($val, 3),
left: nth($val, 4),
), $side);
}
}
/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
///
/// @param {List} $val - Border value to find a value in.
/// @param {Keyword} $elem - Border component to extract.
///
/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
@function get-border-value($val, $elem) {
// Find the width, style, or color and return it
@each $v in $val {
$type: type-of($v);
@if $elem == width and $type == 'number' {
@return $v;
}
@if $elem == style and $type == 'string' {
@return $v;
}
@if $elem == color and $type == 'color' {
@return $v;
}
}
// Defaults
$defaults: (
width: 0,
style: solid,
color: #000,
);
@return map-get($defaults, $elem);
}
/// Finds a value in a nested map.
/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
///
/// @param {Map} $map - Map to pull a value from.
/// @param {String} $keys... - Keys to use when looking for a value.
/// @returns {Mixed} The value found in the map.
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/// Casts a map into a list.
/// @link http://hugogiraudel.com/2014/04/28/casting-map-into-list/
///
/// @param {Map} $map - Map to pull a value from.
///
/// @returns {List} Depending on the flag, returns either $keys or $values or both.
@function map-to-list($map, $keep: 'both') {
$keep: if(index('keys' 'values', $keep), $keep, 'both');
@if type-of($map) == 'map' {
$keys: ();
$values: ();
@each $key, $val in $map {
$keys: append($keys, $key);
$values: append($values, $val);
}
@if $keep == 'keys' {
@return $keys;
}
@else if $keep == 'values' {
@return $values;
}
@else {
@return zip($keys, $values);
}
}
@return if(type-of($map) != 'list', ($value,), $map);
}
/// Safely return a value from a map.
///
/// @param {Map} $map - Map to retrieve a value from.
/// @param {String} $key - Name of the map key.
///
/// @returns {List} Found value.
@function map-safe-get($map, $key) {
@if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) {
@if (map-has-key($map, $key)) {
@return map-get($map, $key);
}
@else {
@error 'Key: `#{$key}` is not available in `#{$map}`';
}
}
@else {
@error '`#{$map}` is not a valid map';
}
}