// Link icon
&::before {
- font-family: "foundation-icons";
- content: "\f165";
+ font-family: 'foundation-icons';
+ content: '\f165';
color: #999;
}
top: 0.25rem;
margin-right: -0.3rem;
}
-}
\ No newline at end of file
+}
a {
transition: all .25s ease-in-out;
- font-family: "zurb-logo";
+ font-family: 'zurb-logo';
font-weight: normal;
font-size: em-calc(18px);
padding: 0;
.connect-links {
padding: 50px 0 0 0;
border-left: 1px solid rgba(255, 255, 255, 0.2);
- background: url("../img/icons/footer-top-icons.png") no-repeat center 0;
+ background: url('../img/icons/footer-top-icons.png') no-repeat center 0;
height: 220px;
margin-bottom: 30px;
margin: 30px 0 0 0;
&.services {
- background: url("../img/icons/footer-studios.png") left top no-repeat;
+ background: url('../img/icons/footer-studios.png') left top no-repeat;
}
&.foundation {
- background: url("../img/icons/footer-foundation.png") left top no-repeat;
+ background: url('../img/icons/footer-foundation.png') left top no-repeat;
}
&.apps {
- background: url("../img/icons/footer-products.png") left top no-repeat;
+ background: url('../img/icons/footer-products.png') left top no-repeat;
}
&.expo {
- background: url("../img/icons/footer-expo.png") left top no-repeat;
+ background: url('../img/icons/footer-expo.png') left top no-repeat;
}
span {
.zurb-logo {
color: #858585;
font-weight: normal;
- background: url("../img/icons/footer-icons.png") no-repeat 0 3px;
+ background: url('../img/icons/footer-icons.png') no-repeat 0 3px;
padding: 23px 0 0 0 !important;
font-size: em-calc(16px);
display: inline-block;
display: block;
height: 50px;
width: 50px;
- background: url("../img/icons/social.png") no-repeat center 0;
+ background: url('../img/icons/social.png') no-repeat center 0;
&:hover {
opacity: 0.8;
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.zurb-footer-top .info-padding {
- background-image: url("../img/icons/footer-large-icon-retina.png");
+ background-image: url('../img/icons/footer-large-icon-retina.png');
background-size: 100px 400px;
}
.zurb-footer-bottom ul.home-social li a {
- background-image: url("../img/icons/social-retina.png");
+ background-image: url('../img/icons/social-retina.png');
background-size: 50px 600px;
}
.zurb-footer-top .global .footer-link-block {
margin: 30px 0 0 0;
&.services {
- background: url("../img/icons/footer-studios-retina.png") left top no-repeat;
+ background: url('../img/icons/footer-studios-retina.png') left top no-repeat;
}
&.foundation {
- background-image: url("../img/icons/footer-foundation-retina.png") left top no-repeat;
+ background-image: url('../img/icons/footer-foundation-retina.png') left top no-repeat;
}
&.apps {
- background-image: url("../img/icons/footer-products-retina.png") left top no-repeat;
+ background-image: url('../img/icons/footer-products-retina.png') left top no-repeat;
}
&.expo {
- background-image: url("../img/icons/footer-expo-retina.png") left top no-repeat;
+ background-image: url('../img/icons/footer-expo-retina.png') left top no-repeat;
}
}
.zurb-footer-bottom a.zurb-logo {
- background-image: url("../img/icons/footer-icons-retina.png");
+ background-image: url('../img/icons/footer-icons-retina.png');
background-size: 100px 1400px;
}
.zurb-footer-top .property .learn-links,
.zurb-footer-top .property .support-links,
.zurb-footer-top .property .connect-links {
- background-image: url("../img/icons/footer-top-icons-retina.png");
+ background-image: url('../img/icons/footer-top-icons-retina.png');
background-size: 100px 1400px;
}
}
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.zurb-footer-top .info-padding {
- background-image: url("../img/icons/footer-large-icon-retina.png");
+ background-image: url('../img/icons/footer-large-icon-retina.png');
background-size: 100px 400px;
}
.zurb-footer-bottom ul.home-social li a {
- background-image: url("../img/icons/social-retina.png");
+ background-image: url('../img/icons/social-retina.png');
background-size: 50px 600px;
}
margin: 30px 0 0 0;
&.services {
- background: url("../img/icons/footer-studios-retina.png") left top no-repeat;
+ background: url('../img/icons/footer-studios-retina.png') left top no-repeat;
background-size: 30px;
}
&.foundation {
- background: url("../img/icons/footer-foundation-retina.png") left top no-repeat;
+ background: url('../img/icons/footer-foundation-retina.png') left top no-repeat;
background-size: 30px;
}
&.apps {
- background: url("../img/icons/footer-products-retina.png") left top no-repeat;
+ background: url('../img/icons/footer-products-retina.png') left top no-repeat;
background-size: 30px;
}
&.expo {
- background: url("../img/icons/footer-expo-retina.png") left top no-repeat;
+ background: url('../img/icons/footer-expo-retina.png') left top no-repeat;
background-size: 30px;
}
}
.zurb-footer-bottom .zurb-logo {
- background-image: url("../img/icons/footer-icons-retina.png");
+ background-image: url('../img/icons/footer-icons-retina.png');
background-size: 100px 1400px;
}
.zurb-footer-top .property .support-links,
.zurb-footer-top .property .connect-links {
- background-image: url("../img/icons/footer-top-icons-retina.png");
+ background-image: url('../img/icons/footer-top-icons-retina.png');
background-size: 100px 1400px;
}
}
h5 {
font-size: 20px;
- font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
+ font-family: 'Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif;
font-weight: 400;
margin-bottom: 0px;
margin-top: 10px;
}
.row.collapse form {
- input[type="text"] {
+ input[type='text'] {
font-size: 17px;
font-weight: 200;
color: #999;
margin-bottom: 0;
}
- // For when a cell has the text "None" and no actual value
+ // For when a cell has the text “None” and no actual value
code > span {
font-family: $body-font-family;
}
position: relative;
&::before {
- content: "\f16c";
+ content: '\f16c';
display: block;
position: absolute;
top: 0.4rem;
.docs-big-index strong,
.docs-small-index h4,
.twitter-typeahead {
- font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a > code {
/// Font stack of the body.
/// @type List
-$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
/// @type Boolean
}
}
- .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
+ .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
transform-origin: 50% 50%;
transform: scaleY(-1);
}
// Symbols
@if $pagination-arrows {
- [aria-label="previous"] {
+ [aria-label='previous'] {
&::before {
content: '«';
display: inline-block;
}
}
- [aria-label="next"] {
+ [aria-label='next'] {
&::after {
content: '»';
display: inline-block;
&:hover,
&:focus,
- &[aria-selected="true"] {
+ &[aria-selected='true'] {
background: $tab-background-active;
}
}
}
// Screen reader visibility classes
- // Need a "hide-for-sr" class? Add aria-hidden="true" to the element
+ // Need a “hide-for-sr” class? Add aria-hidden='true' to the element
.show-for-sr,
.show-on-focus {
@include element-invisible;
////
@mixin foundation-form-checkbox {
- [type="file"],
- [type="checkbox"],
- [type="radio"] {
+ [type='file'],
+ [type='checkbox'],
+ [type='radio'] {
margin: 0 0 $form-spacing;
}
// Styles for input/label siblings
- [type="checkbox"] + label,
- [type="radio"] + label {
+ [type='checkbox'] + label,
+ [type='radio'] + label {
display: inline-block;
margin-#{$global-left}: $form-spacing * 0.5;
margin-#{$global-right}: $form-spacing;
}
// Styles for inputs inside labels
- label > [type="checkbox"],
- label > [type="label"] {
+ label > [type='checkbox'],
+ label > [type='label'] {
margin-#{$global-right}: $form-spacing * 0.5;
}
// Normalize file input width
- [type="file"] {
+ [type='file'] {
width: 100%;
}
}
/// @type Transition
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
-/// Enables the up/down buttons that Chrome and Firefox add to `<input type="number">` elements.
+/// Enables the up/down buttons that Chrome and Firefox add to `<input type='number'>` elements.
/// @type Boolean
$input-number-spinners: true !default;
}
// Reset styles on button-like inputs
- [type="submit"],
- [type="button"] {
+ [type='submit'],
+ [type='button'] {
border-radius: $global-radius;
-webkit-appearance: none;
-moz-appearance: none;
}
// Reset Normalize setting content-box to search elements
- input[type="search"] {
+ input[type='search'] {
box-sizing: border-box;
}
// These styles are applied to <meta> tags, which are read by the Foundation JavaScript
.foundation-mq {
- font-family: "#{-zf-bp-serialize($breakpoints)}";
+ font-family: '#{-zf-bp-serialize($breakpoints)}';
}
@mixin foundation-everything {
/// Width of the column. Accepts multiple values:
/// - A percentage value will make the column that exact size.
/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
-/// - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
+/// - A string of the format “x of y” will make a column that is *x* columns wide, assuming *y* total columns for the parent.
///
/// @return {Number} A calculated percentage value.
@function grid-column($columns) {
}
}
- // Parsing "n of n" expressions
+ // Parsing “n of n” expressions
@else if type-of($columns) == 'list' {
@if length($columns) != 3 {
- @error 'Wrong syntax for grid-column(). Use the format "n of n".';
+ @error 'Wrong syntax for grid-column(). Use the format “n of n”.';
}
@else {
$width: percentage(nth($columns, 1) / nth($columns, 3));
// Anything else is incorrect
@else {
- @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
+ @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or “n of n”.';
}
@return $width;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
-$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$text-direction: ltr;
$global-margin: 1rem;
$header-font-family: $body-font-family;
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
-$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-sizes: (
small: (
'h1': 24,
/// Font stack used for elements that use monospaced type, such as code samples
/// @type String | List
-$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;
/// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.
/// @type Map
// Display the URL of a link after the text
a,
a:visited { text-decoration: underline;}
- a[href]:after { content: " (" attr(href) ")"; }
+ a[href]:after { content: ' (' attr(href) ')'; }
// Don't display the URL for images or JavaScript/internal links
.ir a:after,
a[href^='#']:after { content: ''; }
// Display what an abbreviation stands for after the text
- abbr[title]:after { content: " (" attr(title) ")"; }
+ abbr[title]:after { content: ' (' attr(title) ')'; }
// Prevent page breaks in the middle of a blockquote or preformatted text block
pre,
$bp-max: -zf-bp-to-em($bp-max) - (1/16);
}
- // Skip media query creation if the input is "0 up" or "0 down"
+ // Skip media query creation if the input is “0 up” or “0 down”
@if $bp > 0 or $dir == 'only' {
- // "Only" ranges use the format "(min-width: n) and (max-width: n)"
+ // `only` ranges use the format `(min-width: n) and (max-width: n)`
@if $dir == 'only' {
@if $named == true {
$str: $str + '(min-width: #{$bp})';
}
}
@else {
- @warn 'Only named media queries can have an "only" range.';
+ @warn 'Only named media queries can have an `only` range.';
}
}
- // "Down" ranges use the format "(max-width: n)"
+ // `down` ranges use the format `(max-width: n)`
@else if $dir == 'down' {
$max: 0;
- // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
+ // For named breakpoints, subtract the breakpoint value by one “pixel”, or 1/16em.
@if $named {
$max: $bp-max;
}
$str: $str + '(max-width: #{$max})';
}
- // "Up" ranges use the format "(min-width: n)"
+ // `up` ranges use the format `(min-width: n)`
@else if strip-unit($bp) > 0 {
$str: $str + '(min-width: #{$bp})';
}
/// - If an em value is passed, the value will be used as-is.
/// @content
/// @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.
+/// @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);
}
}
-/// 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>
+/// 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 - Color to use for the icon.
/// @param {Color} $color-hover - Color to use when the icon is hovered over.
/// @param {Number} $width - Width of the icon.
@mixin background-triangle($color: $black) {
$rgb: 'rgb(#{red($color)}, #{green($color)}, #{blue($color)})';
- 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>');
+ 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) < 50% {
}
}
-/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
+/// Adds CSS for a “quantity query” selector that automatically sizes elements based on how many there are inside a container.
/// @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.
/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
/// Removes the focus ring around an element when a mouse input is detected.
@mixin disable-mouse-outline {
- [data-whatinput="mouse"] & {
+ [data-whatinput='mouse'] & {
outline: 0;
}
}
}
@each $type in $types {
- $return: append($return, unquote('[type="#{$type}"]'), comma);
+ $return: append($return, unquote('[type=\'#{$type}\']'), comma);
}
@return $return;
}
/// 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 {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) {
-@import "util/unit";
-@import "util/breakpoint";
+@import 'util/unit';
+@import 'util/breakpoint';
-@include describe("Breakpoint") {
- @include it("converts a named breakpoint to an em value") {
+@include describe('Breakpoint') {
+ @include it('converts a named breakpoint to an em value') {
$actual: breakpoint(medium);
$expected: '(min-width: 32em)';
@include should(expect($actual), to(be($expected)));
}
- @include it("converts a pixel or rem breakpoint to em") {
+ @include it('converts a pixel or rem breakpoint to em') {
$expected: '(min-width: 1em)';
@include should(expect(breakpoint(16px)), to(be($expected)));
@include should(expect(breakpoint(1rem)), to(be($expected)));
}
- @include it("creates an only range out of a named breakpoint") {
+ @include it('creates an only range out of a named breakpoint') {
$actual: breakpoint(medium only);
$expected: '(min-width: 32em) and (max-width: 63.9375em)';
@include should(expect($actual), to(be($expected)));
}
- @include it("creates a down range out of a named breakpoint") {
+ @include it('creates a down range out of a named breakpoint') {
$actual: breakpoint(medium down);
$expected: '(max-width: 63.9375em)';
@include should(expect($actual), to(be($expected)));
}
- @include it("creates a down range out of a pixel, rem or em value") {
+ @include it('creates a down range out of a pixel, rem or em value') {
$expected: '(max-width: 1em)';
@include should(expect(breakpoint(16px down)), to(be($expected)));
@include should(expect(breakpoint(1em down)), to(be($expected)));
}
- @include it("returns an empty string for the values zero down or zero up") {
+ @include it('returns an empty string for the values zero down or zero up') {
$expected: '';
@include should(expect(breakpoint(small down)), to(be($expected)));
@include should(expect(breakpoint(0 up)), to(be($expected)));
}
- @include it("creates special media queries for landscape, portrait, and retina") {
+ @include it('creates special media queries for landscape, portrait, and retina') {
@include should(expect(breakpoint(landscape)), to(be('(orientation: landscape)')));
@include should(expect(breakpoint(portrait)), to(be('(orientation: portrait)')));
@include should(expect(breakpoint(retina)), to(be('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)')));
}
}
-@include describe("Map Serialize") {
- @include it("converts a Sass map into a string") {
+@include describe('Map Serialize') {
+ @include it('converts a Sass map into a string') {
$input: (
small: 1em,
medium: 2em,
}
}
-@include describe("Map Next") {
- @include it("returns the next value in a map") {
+@include describe('Map Next') {
+ @include it('returns the next value in a map') {
$input: (
one: 'One',
two: 'Two',
@include should(expect($actual), to(be($expected)));
}
- @include it("returns null if the key is last in the map") {
+ @include it('returns null if the key is last in the map') {
$input: (
one: 'One',
two: 'Two',
@include should(expect($actual), to(be($expected)));
}
- @include it("returns null if the key is not in the map") {
+ @include it('returns null if the key is not in the map') {
$input: (
one: 'One',
two: 'Two',
-@import "util/color";
+@import 'util/color';
-@include describe("Foreground") {
- @include it("returns black if the input color is light") {
+@include describe('Foreground') {
+ @include it('returns black if the input color is light') {
$actual: foreground($white);
$expected: $black;
@include should(expect($actual), to(be($expected)));
}
- @include it("returns white if the input color is dark") {
+ @include it('returns white if the input color is dark') {
$actual: foreground($black);
$expected: $white;
}
}
-@include describe("Smart Scale") {
- @include it("darkens a light color") {
+@include describe('Smart Scale') {
+ @include it('darkens a light color') {
$color: $white;
$scale: 5%;
$threshold: 60%;
@include should(expect($actual), to(be($expected)));
}
- @include it("lightens a dark color") {
+ @include it('lightens a dark color') {
$color: $black;
$scale: 5%;
$threshold: 60%;
-@import "util/selector";
+@import 'util/selector';
-@include describe("Text inputs") {
- @include it("creates a selector out of a list of text input types") {
+@include describe('Text inputs') {
+ @include it('creates a selector out of a list of text input types') {
$actual: #{text-inputs(text password)};
- $expected: '[type="text"], [type="password"]';
+ $expected: '[type='text'], [type='password']';
@debug $actual;
-@import "util/unit";
+@import 'util/unit';
-@include describe("Strip Unit") {
- @include it("strips the unit from a number") {
+@include describe('Strip Unit') {
+ @include it('strips the unit from a number') {
$actual: strip-unit(20px);
$expected: 20;
@include should(expect($actual), to(be($expected)));
}
- @include it("returns the same number when given a unitless value") {
+ @include it('returns the same number when given a unitless value') {
$actual: strip-unit(20);
$expected: 20;
}
}
-@include describe("Convert to Rem") {
- @include it("converts a unit to the equivalent in rems") {
+@include describe('Convert to Rem') {
+ @include it('converts a unit to the equivalent in rems') {
$actual: -zf-to-rem(32, 16);
$expected: 2rem;
}
}
-@include describe("Convert Rem to Rem") {
- @include it("keeps rem values the same") {
+@include describe('Convert Rem to Rem') {
+ @include it('keeps rem values the same') {
$actual: -zf-to-rem(3rem, 16);
$expected: 3rem;
}
}
-@include describe("Rem Calculator") {
- @include it("converts an arbitrary number of values into rem equivalents") {
+@include describe('Rem Calculator') {
+ @include it('converts an arbitrary number of values into rem equivalents') {
$actual: rem-calc((8 16 32 64), 16);
$expected: 0.5rem 1rem 2rem 4rem;
}
}
-@include describe("Breakpoint to Em") {
- @include it("converts a unitless, pixel, or rem value to em") {
+@include describe('Breakpoint to Em') {
+ @include it('converts a unitless, pixel, or rem value to em') {
@include should(expect(-zf-bp-to-em(16)), to(be(1em)));
@include should(expect(-zf-bp-to-em(16px)), to(be(1em)));
@include should(expect(-zf-bp-to-em(1rem)), to(be(1em)));
-@import "util/value";
+@import 'util/value';
-@include describe("Has Value") {
- @include it("returns false if the value is not falsey") {
+@include describe('Has Value') {
+ @include it('returns false if the value is not falsey') {
$boolean: hasvalue(true);
$number: hasvalue(1px);
$color: hasvalue(#000);
@include should(expect($color), to(be(true)));
@include should(expect($list), to(be(true)));
}
- @include it("returns false if the value is falsey") {
+ @include it('returns false if the value is falsey') {
$zero: hasvalue(0px);
$null: hasvalue(null);
$none: hasvalue(none);
}
}
-@include describe("Get Side") {
- @include it("returns correct sides when given one side value") {
+@include describe('Get Side') {
+ @include it('returns correct sides when given one side value') {
$value: 1rem;
$actual: (
get-side($value, top),
@include should(expect($actual), to(be($expected)));
}
- @include it("returns correct sides when given two side values") {
+ @include it('returns correct sides when given two side values') {
$value: 1rem 2rem;
$actual: (
get-side($value, top),
@include should(expect($actual), to(be($expected)));
}
- @include it("returns correct sides when given three side values") {
+ @include it('returns correct sides when given three side values') {
$value: 1rem 2rem 3rem;
$actual: (
get-side($value, top),
@include should(expect($actual), to(be($expected)));
}
- @include it("returns correct sides when given four side values") {
+ @include it('returns correct sides when given four side values') {
$value: 1rem 2rem 3rem 4rem;
$actual: (
get-side($value, top),
}
}
-@include describe("Get Border Value") {
- @include it("returns the right value of a border property") {
+@include describe('Get Border Value') {
+ @include it('returns the right value of a border property') {
$value: 10px dashed green;
$width: get-border-value($value, width);
$style: get-border-value($value, style);
@include should(expect($style), to(be(dashed)));
@include should(expect($color), to(be(green)));
}
- @include it("returns a default value if a property is missing") {
+ @include it('returns a default value if a property is missing') {
$defaultWidth: get-border-value(solid black, width);
$defaultStyle: get-border-value(10px black, style);
$defaultColor: get-border-value(10px solid, color);