diff --git a/.env.sample b/.env.sample index eb82ef9..382cb99 100644 --- a/.env.sample +++ b/.env.sample @@ -7,6 +7,7 @@ ALGOLIA_API_KEY= ALGOLIA_SEARCH_KEY= ALGOLIA_PREFIX=devsite-dev- GOOGLE_ANALYTICS= +GOOGLE_API= ROLLBAR_CLIENT_TOKEN= JEKYLL_ENV=development SKIP_DOCS=false diff --git a/.ruby-version b/.ruby-version index 7cb75ca..37d02a6 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -3.3.8 \ No newline at end of file +3.3.8 diff --git a/source/_data/env.yaml b/source/_data/env.yaml index 1d8c774..89fcfd0 100644 --- a/source/_data/env.yaml +++ b/source/_data/env.yaml @@ -34,6 +34,8 @@ env: DOCS_URL - config: google_analytics env: GOOGLE_ANALYTICS +- config: google_maps + env: GOOGLE_MAPS - config: debug env: DEBUG - config: sdk_bucket diff --git a/source/_sass/app.scss b/source/_sass/app.scss index 490711d..107a689 100644 --- a/source/_sass/app.scss +++ b/source/_sass/app.scss @@ -15,20 +15,24 @@ */ @use "sass:color"; +@use "sass:meta"; +@use 'bourbon/bourbon'; -@import 'bourbon/bourbon'; +@use 'colors'; -@import 'colors'; +@forward 'base/base'; +@forward 'responsive/responsive'; +@forward 'font-awesome/font-awesome'; -@import 'base/base'; -@import 'responsive/responsive'; -@import 'font-awesome/font-awesome'; - -@import 'header'; -@import 'footer'; +@use "base/variables"; +@use "bourbon/addons/font-family"; +@use "bourbon/css3/box-sizing"; +@use "responsive/utilities/variables" as utilities-variables; +@use 'footer'; +@use 'header'; * { - @include box-sizing(border-box); + @include box-sizing.box-sizing(border-box); } body, @@ -39,8 +43,8 @@ html { } body { - padding-top: $header-height; - background-color: $gray-01; + padding-top: header.$header-height; + background-color: colors.$gray-01; } .anchor[id], @@ -48,8 +52,8 @@ body { &::before { content: ' '; display: block; - height: $header-height; - margin-top: -0.7 * $header-height; + height: header.$header-height; + margin-top: -0.7 * header.$header-height; visibility: hidden; } } @@ -59,17 +63,17 @@ body { } code { - background-color: $white; + background-color: colors.$white; border-radius: 2px; - color: color.adjust($base-font-color, $lightness: -20%, $space: hsl); - font-family: $monospace; - font-size: $base-font-size; + color: color.adjust(variables.$base-font-color, $lightness: -20%, $space: hsl); + font-family: font-family.$monospace; + font-size: variables.$base-font-size; padding: 2px 4px; box-shadow: inset 0 0 2px #bbb; } a code { - color: color.adjust($base-link-color, $lightness: -10%, $space: hsl); + color: color.adjust(variables.$base-link-color, $lightness: -10%, $space: hsl); } .container { @@ -79,8 +83,8 @@ a code { } .vcenter { - display: table-cell; - vertical-align: middle; + display: table-cell; + vertical-align: middle; } .vcenter--wrapper { @@ -107,7 +111,7 @@ a code { line-height: 1.1; a { - color: $base-text-color; + color: utilities-variables.$base-text-color; &:hover { text-decoration: underline; @@ -127,8 +131,7 @@ a code { margin-bottom: 1em; } -.noscript--hide { -} +.noscript--hide {} .noscript--show { display: none; @@ -157,54 +160,54 @@ a code { overflow: hidden; } -@import 'elements/alert'; -@import 'elements/buttons'; -@import 'elements/form'; -@import 'elements/mobile-nav'; -@import 'elements/highlight'; -@import 'elements/inline-list'; -@import 'elements/markdown'; -@import 'elements/screenshot'; -@import 'elements/sidebar'; -@import 'elements/spinner'; -@import 'elements/table'; +@include meta.load-css('elements/alert'); +@include meta.load-css('elements/buttons'); +@include meta.load-css('elements/form'); +@include meta.load-css('elements/mobile-nav'); +@include meta.load-css('elements/highlight'); +@include meta.load-css('elements/inline-list'); +@include meta.load-css('elements/markdown'); +@include meta.load-css('elements/screenshot'); +@include meta.load-css('elements/sidebar'); +@include meta.load-css('elements/spinner'); +@include meta.load-css('elements/table'); // @import 'elements/terminal'; -@import 'elements/toc'; +@include meta.load-css('elements/toc'); // @import 'elements/typeahead'; // @import 'elements/video'; -@import 'elements/bigbox'; -@import 'elements/full-height'; -@import 'elements/sectionmenu'; -@import 'elements/search'; -@import 'elements/gray-box'; -@import 'elements/ribbon'; -@import 'elements/pagination'; -@import 'elements/landing-slider'; -@import 'elements/platform-choice'; -@import 'elements/dual-image'; - -@import 'sections/getting-started'; - -@import 'libs/slick'; -@import 'mmenu/jquery.mmenu.all.scss'; - -@import 'sections/events'; -@import 'sections/blog'; -@import 'sections/documentation'; -@import 'sections/examples'; -@import 'sections/guides'; -@import 'sections/retreat'; -@import 'sections/inspiration'; -@import 'sections/round'; -@import 'sections/sdk'; - -@import 'debug'; +@include meta.load-css('elements/bigbox'); +@include meta.load-css('elements/full-height'); +@include meta.load-css('elements/sectionmenu'); +@include meta.load-css('elements/search'); +@include meta.load-css('elements/gray-box'); +@include meta.load-css('elements/ribbon'); +@include meta.load-css('elements/pagination'); +@include meta.load-css('elements/landing-slider'); +@include meta.load-css('elements/platform-choice'); +@include meta.load-css('elements/dual-image'); + +@include meta.load-css('sections/getting-started'); + +@include meta.load-css('libs/slick'); +@include meta.load-css('mmenu/jquery.mmenu.all.scss'); + +@include meta.load-css('sections/events'); +@include meta.load-css('sections/blog'); +@include meta.load-css('sections/documentation'); +@include meta.load-css('sections/examples'); +@include meta.load-css('sections/guides'); +@include meta.load-css('sections/retreat'); +@include meta.load-css('sections/inspiration'); +@include meta.load-css('sections/round'); +@include meta.load-css('sections/sdk'); + +@include meta.load-css('debug'); .mm-page { height: 100%; position: inherit; - > div { + >div { height: 100%; } } @@ -216,11 +219,11 @@ a code { .mm-opened, .mm-opening { .mm-page { - margin-top: -1 * $header-height; + margin-top: -1 * header.$header-height; } .content { - padding-top: $header-height; + padding-top: header.$header-height; } } @@ -238,7 +241,7 @@ a code { } .modal-content { - background-color: $gray-01; + background-color: colors.$gray-01; } .header--skinny { diff --git a/source/_sass/base/_base.scss b/source/_sass/base/_base.scss index 2bf129d..9530d2c 100644 --- a/source/_sass/base/_base.scss +++ b/source/_sass/base/_base.scss @@ -18,23 +18,23 @@ // http://bitters.bourbon.io // Variables -@import 'variables'; +@use 'variables'; // Neat Settings -- uncomment if using Neat -- must be imported before Neat // @import 'grid-settings'; // Mixins -@import 'mixins/flash'; +@use 'mixins/flash'; // Extends -@import 'extends/button'; -@import 'extends/clearfix'; -@import 'extends/hide-text'; +@use 'extends/button'; +@use 'extends/clearfix'; +@use 'extends/hide-text'; // Typography and Elements -@import 'typography'; +@use 'typography'; // @import 'forms'; -@import 'tables'; -@import 'lists'; -@import 'flashes'; +@use 'tables'; +@use 'lists'; +@use 'flashes'; // @import 'buttons'; diff --git a/source/_sass/base/_flashes.scss b/source/_sass/base/_flashes.scss index 4bb1a50..c753caf 100644 --- a/source/_sass/base/_flashes.scss +++ b/source/_sass/base/_flashes.scss @@ -14,18 +14,21 @@ * limitations under the License. */ +@use "mixins/flash"; +@use "variables"; + %flash-alert { - @include flash($alert-color); + @include flash.flash(variables.$alert-color); } %flash-error { - @include flash($error-color); + @include flash.flash(variables.$error-color); } %flash-notice { - @include flash($notice-color); + @include flash.flash(variables.$notice-color); } %flash-success { - @include flash($success-color); + @include flash.flash(variables.$success-color); } diff --git a/source/_sass/base/_forms.scss b/source/_sass/base/_forms.scss index 6b792e9..7d06e88 100644 --- a/source/_sass/base/_forms.scss +++ b/source/_sass/base/_forms.scss @@ -79,7 +79,8 @@ input[type="search"] { @include appearance(none); } -input[type="checkbox"], input[type="radio"] { +input[type="checkbox"], +input[type="radio"] { display: inline; margin-right: $base-line-height * 0.25; } diff --git a/source/_sass/base/_lists.scss b/source/_sass/base/_lists.scss index 2398ea6..fba4af1 100644 --- a/source/_sass/base/_lists.scss +++ b/source/_sass/base/_lists.scss @@ -14,30 +14,33 @@ * limitations under the License. */ -ul, ol { +@use "variables"; + +ul, +ol { margin: 0; padding: 0; list-style-type: none; &%default-ul { list-style-type: disc; - margin-bottom: $base-line-height * 0.5; - padding-left: $base-line-height; + margin-bottom: variables.$base-line-height * 0.5; + padding-left: variables.$base-line-height; } &%default-ol { list-style-type: decimal; - margin-bottom: $base-line-height * 0.5; - padding-left: $base-line-height; + margin-bottom: variables.$base-line-height * 0.5; + padding-left: variables.$base-line-height; } } dl { - margin-bottom: $base-line-height * 0.5; + margin-bottom: variables.$base-line-height * 0.5; dt { font-weight: bold; - margin-top: $base-line-height * 0.5; + margin-top: variables.$base-line-height * 0.5; } dd { diff --git a/source/_sass/base/_tables.scss b/source/_sass/base/_tables.scss index 2bb1bf3..c2855b3 100644 --- a/source/_sass/base/_tables.scss +++ b/source/_sass/base/_tables.scss @@ -14,20 +14,24 @@ * limitations under the License. */ +@use "variables"; + table { width: 100%; } th { font-weight: bold; - padding: ($base-line-height * 0.5) 0; + padding: (variables.$base-line-height * 0.5) 0; text-align: left; } td { - padding: ($base-line-height * 0.5) 0; + padding: (variables.$base-line-height * 0.5) 0; } -tr, td, th { +tr, +td, +th { vertical-align: middle; } diff --git a/source/_sass/base/_typography.scss b/source/_sass/base/_typography.scss index f4b4bf1..4b4359f 100644 --- a/source/_sass/base/_typography.scss +++ b/source/_sass/base/_typography.scss @@ -14,73 +14,81 @@ * limitations under the License. */ +@use "../bourbon/css3/transition"; @use "sass:color"; +@use "variables"; body { -webkit-font-smoothing: antialiased; - background-color: $base-background-color; - color: $base-font-color; - font-family: $base-font-family; - font-size: $base-font-size; - line-height: $unitless-line-height; + background-color: variables.$base-background-color; + color: variables.$base-font-color; + font-family: variables.$base-font-family; + font-size: variables.$base-font-size; + line-height: variables.$unitless-line-height; } -h1, h2, h3, h4, h5, h6 { - font-family: $header-font-family; - line-height: $header-line-height; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: variables.$header-font-family; + line-height: variables.$header-line-height; margin: 0 0 0.5em 0; text-rendering: optimizeLegibility; // Fix the character spacing for headings } h1 { - font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px + font-size: variables.$base-font-size * 2.25; // 16 * 2.25 = 36px } h2 { - font-size: $base-font-size * 2; // 16 * 2 = 32px + font-size: variables.$base-font-size * 2; // 16 * 2 = 32px } h3 { - font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px + font-size: variables.$base-font-size * 1.75; // 16 * 1.75 = 28px } h4 { - font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px + font-size: variables.$base-font-size * 1.5; // 16 * 1.5 = 24px } h5 { - font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px + font-size: variables.$base-font-size * 1.25; // 16 * 1.25 = 20px } h6 { - font-size: $base-font-size; + font-size: variables.$base-font-size; } p { - margin: 0 0 ($base-line-height * .5); + margin: 0 0 (variables.$base-line-height * .5); } a { - @include transition(color 0.1s linear); - color: $base-link-color; + @include transition.transition(color 0.1s linear); + color: variables.$base-link-color; text-decoration: none; &:hover { - color: $hover-link-color; + color: variables.$hover-link-color; } - &:active, &:focus { - color: $hover-link-color; + &:active, + &:focus { + color: variables.$hover-link-color; outline: none; } } hr { - border-bottom: 1px solid $base-border-color; + border-bottom: 1px solid variables.$base-border-color; border-left: none; border-right: none; border-top: none; - margin: $base-line-height 0; + margin: variables.$base-line-height 0; } img { @@ -89,14 +97,14 @@ img { } blockquote { - border-left: 2px solid $base-border-color; - color: color.adjust($base-font-color, $lightness: 15%, $space: hsl); - margin: $base-line-height 0; - padding-left: $base-line-height * 0.5; + border-left: 2px solid variables.$base-border-color; + color: color.adjust(variables.$base-font-color, $lightness: 15%, $space: hsl); + margin: variables.$base-line-height 0; + padding-left: variables.$base-line-height * 0.5; } cite { - color: color.adjust($base-font-color, $lightness: 25%, $space: hsl); + color: color.adjust(variables.$base-font-color, $lightness: 25%, $space: hsl); font-style: italic; &:before { diff --git a/source/_sass/base/_variables.scss b/source/_sass/base/_variables.scss index dc59ab4..d6737fa 100644 --- a/source/_sass/base/_variables.scss +++ b/source/_sass/base/_variables.scss @@ -14,12 +14,15 @@ * limitations under the License. */ +@use "../bourbon/addons/font-family"; +@use "../bourbon/functions/px-to-em"; +@use "../colors"; @use "sass:color"; // Typography $sans-serif: 'Open Sans'; -$serif: $georgia; -$monospace: 'Inconsolata'; +$serif: font-family.$georgia; +font-family.$monospace: 'Inconsolata'; $base-font-family: $sans-serif; $header-font-family: $base-font-family; @@ -28,14 +31,14 @@ $base-font-size: 15px; $base-line-height: 1.4 * $base-font-size; $unitless-line-height: 1.4; // Strip units from line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values $header-line-height: 1.3; -$base-border-radius: em(3); +$base-border-radius: px-to-em.em(3); // Background Color $base-background-color: #fff; // Font Colors -$base-font-color: $gray-03; -$base-accent-color: $lightblue; +$base-font-color: colors.$gray-03; +$base-accent-color: colors.$lightblue; // Link Colors $base-link-color: $base-accent-color; @@ -44,20 +47,20 @@ $base-button-color: $base-link-color; $hover-button-color: $hover-link-color; // Border color -$base-border-color: $gray-03; +$base-border-color: colors.$gray-03; // Flash Colors -$alert-color: $yellow; -$error-color: $red; -$notice-color: $yellow; -$success-color: $green; +$alert-color: colors.$yellow; +$error-color: colors.$red; +$notice-color: colors.$yellow; +$success-color: colors.$green; // Forms $form-border-color: $base-border-color; $form-border-color-hover: color.adjust($base-border-color, $lightness: -10%, $space: hsl); $form-border-color-focus: $base-accent-color; $form-border-radius: $base-border-radius; -$form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); +$form-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); $form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(color.adjust($form-border-color-focus, $lightness: -5%, $space: hsl), 0.7); $form-font-size: $base-font-size; $form-font-family: $base-font-family; diff --git a/source/_sass/base/extends/_button.scss b/source/_sass/base/extends/_button.scss index 99a8e8e..77ca1ae 100644 --- a/source/_sass/base/extends/_button.scss +++ b/source/_sass/base/extends/_button.scss @@ -14,20 +14,22 @@ * limitations under the License. */ +@use "../variables"; + %button { -webkit-font-smoothing: antialiased; - background-color: $base-button-color; - border-radius: $base-border-radius; + background-color: variables.$base-button-color; + border-radius: variables.$base-border-radius; color: white; display: inline-block; - font-size: $base-font-size; + font-size: variables.$base-font-size; font-weight: bold; line-height: 1; padding: .75em 1em; text-decoration: none; &:hover { - background-color: $hover-button-color; + background-color: variables.$hover-button-color; color: white; } } diff --git a/source/_sass/base/extends/_clearfix.scss b/source/_sass/base/extends/_clearfix.scss index a0c9a92..31544fb 100644 --- a/source/_sass/base/extends/_clearfix.scss +++ b/source/_sass/base/extends/_clearfix.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../../bourbon/addons/clearfix"; + %clearfix { - @include clearfix; + @include clearfix.clearfix; } diff --git a/source/_sass/base/extends/_hide-text.scss b/source/_sass/base/extends/_hide-text.scss index ef26a0a..2375fc2 100644 --- a/source/_sass/base/extends/_hide-text.scss +++ b/source/_sass/base/extends/_hide-text.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../../bourbon/addons/hide-text"; + %hide-text { - @include hide-text; + @include hide-text.hide-text; } diff --git a/source/_sass/base/mixins/_flash.scss b/source/_sass/base/mixins/_flash.scss index 3f5f104..cb66853 100644 --- a/source/_sass/base/mixins/_flash.scss +++ b/source/_sass/base/mixins/_flash.scss @@ -14,14 +14,15 @@ * limitations under the License. */ +@use "../variables"; @use "sass:color"; @mixin flash($color) { background: $color; color: color.adjust($color, $lightness: -60%, $space: hsl); font-weight: bold; - margin-bottom: $base-line-height * 0.5; - padding: $base-line-height * 0.5; + margin-bottom: variables.$base-line-height * 0.5; + padding: variables.$base-line-height * 0.5; a { color: color.adjust($color, $lightness: -70%, $space: hsl); diff --git a/source/_sass/bourbon/_bourbon.scss b/source/_sass/bourbon/_bourbon.scss index eea6e21..f3f7df0 100644 --- a/source/_sass/bourbon/_bourbon.scss +++ b/source/_sass/bourbon/_bourbon.scss @@ -1,79 +1,79 @@ // Settings -@import "settings/prefixer"; -@import "settings/px-to-em"; -@import "settings/asset-pipeline"; +@use "settings/prefixer"; +@use "settings/px-to-em"; +@use "settings/asset-pipeline"; // Custom Helpers -@import "helpers/convert-units"; -@import "helpers/gradient-positions-parser"; -@import "helpers/is-num"; -@import "helpers/linear-angle-parser"; -@import "helpers/linear-gradient-parser"; -@import "helpers/linear-positions-parser"; -@import "helpers/linear-side-corner-parser"; -@import "helpers/radial-arg-parser"; -@import "helpers/radial-positions-parser"; -@import "helpers/radial-gradient-parser"; -@import "helpers/render-gradients"; -@import "helpers/shape-size-stripper"; -@import "helpers/str-to-num"; +@use "helpers/convert-units"; +@use "helpers/gradient-positions-parser"; +@use "helpers/is-num"; +@use "helpers/linear-angle-parser"; +@use "helpers/linear-gradient-parser"; +@use "helpers/linear-positions-parser"; +@use "helpers/linear-side-corner-parser"; +@use "helpers/radial-arg-parser"; +@use "helpers/radial-positions-parser"; +@use "helpers/radial-gradient-parser"; +@use "helpers/render-gradients"; +@use "helpers/shape-size-stripper"; +@use "helpers/str-to-num"; // Custom Functions -@import "functions/assign"; -@import "functions/color-lightness"; -@import "functions/flex-grid"; -@import "functions/golden-ratio"; -@import "functions/grid-width"; -@import "functions/modular-scale"; -@import "functions/px-to-em"; -@import "functions/px-to-rem"; -@import "functions/strip-units"; -@import "functions/tint-shade"; -@import "functions/transition-property-name"; -@import "functions/unpack"; +@use "functions/assign"; +@use "functions/color-lightness"; +@use "functions/flex-grid"; +@use "functions/golden-ratio"; +@use "functions/grid-width"; +@use "functions/modular-scale"; +@use "functions/px-to-em" as px-to-em2; +@use "functions/px-to-rem"; +@use "functions/strip-units"; +@use "functions/tint-shade"; +@use "functions/transition-property-name"; +@use "functions/unpack"; // CSS3 Mixins -@import "css3/animation"; -@import "css3/appearance"; -@import "css3/backface-visibility"; -@import "css3/background"; -@import "css3/background-image"; -@import "css3/border-image"; -@import "css3/border-radius"; -@import "css3/box-sizing"; -@import "css3/calc"; -@import "css3/columns"; -@import "css3/filter"; -@import "css3/flex-box"; -@import "css3/font-face"; -@import "css3/font-feature-settings"; -@import "css3/hyphens"; -@import "css3/hidpi-media-query"; -@import "css3/image-rendering"; -@import "css3/keyframes"; -@import "css3/linear-gradient"; -@import "css3/perspective"; -@import "css3/radial-gradient"; -@import "css3/transform"; -@import "css3/transition"; -@import "css3/user-select"; -@import "css3/placeholder"; +@use "css3/animation"; +@use "css3/appearance"; +@use "css3/backface-visibility"; +@use "css3/background"; +@use "css3/background-image"; +@use "css3/border-image"; +@use "css3/border-radius"; +@use "css3/box-sizing"; +@use "css3/calc"; +@use "css3/columns"; +@use "css3/filter"; +@use "css3/flex-box"; +@use "css3/font-face"; +@use "css3/font-feature-settings"; +@use "css3/hyphens"; +@use "css3/hidpi-media-query"; +@use "css3/image-rendering"; +@use "css3/keyframes"; +@use "css3/linear-gradient"; +@use "css3/perspective"; +@use "css3/radial-gradient"; +@use "css3/transform"; +@use "css3/transition"; +@use "css3/user-select"; +@use "css3/placeholder"; // Addons & other mixins -@import "addons/button"; -@import "addons/clearfix"; -@import "addons/directional-values"; -@import "addons/ellipsis"; -@import "addons/font-family"; -@import "addons/hide-text"; -@import "addons/html5-input-types"; -@import "addons/position"; -@import "addons/prefixer"; -@import "addons/retina-image"; -@import "addons/size"; -@import "addons/timing-functions"; -@import "addons/triangle"; -@import "addons/word-wrap"; +@use "addons/button"; +@use "addons/clearfix"; +@use "addons/directional-values"; +@use "addons/ellipsis"; +@use "addons/font-family"; +@use "addons/hide-text"; +@use "addons/html5-input-types"; +@use "addons/position"; +@use "addons/prefixer" as prefixer2; +@use "addons/retina-image"; +@use "addons/size"; +@use "addons/timing-functions"; +@use "addons/triangle"; +@use "addons/word-wrap"; // Soon to be deprecated Mixins -@import "bourbon-deprecated-upcoming"; +@use "bourbon-deprecated-upcoming"; diff --git a/source/_sass/bourbon/addons/_button.scss b/source/_sass/bourbon/addons/_button.scss index 14a89e4..d99aa47 100644 --- a/source/_sass/bourbon/addons/_button.scss +++ b/source/_sass/bourbon/addons/_button.scss @@ -1,10 +1,15 @@ +@use "../css3/linear-gradient"; +@use "../functions/color-lightness"; +@use "sass:color"; +@use "sass:meta"; + @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { - @if type-of($style) == string and type-of($base-color) == color { + @if meta.type-of($style) == string and meta.type-of($base-color) == color { @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == string and type-of($base-color) == number { + @if meta.type-of($style) == string and meta.type-of($base-color) == number { $padding: $text-size; $text-size: $base-color; $base-color: #4294f0; @@ -16,13 +21,13 @@ @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == color and type-of($base-color) == color { + @if meta.type-of($style) == color and meta.type-of($base-color) == color { $base-color: $style; $style: simple; @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == color and type-of($base-color) == number { + @if meta.type-of($style) == color and meta.type-of($base-color) == number { $padding: $text-size; $text-size: $base-color; $base-color: $style; @@ -35,7 +40,7 @@ @include buttonstyle($style, $base-color, $text-size, $padding); } - @if type-of($style) == number { + @if meta.type-of($style) == number { $padding: $base-color; $text-size: $style; $base-color: #4294f0; @@ -59,19 +64,19 @@ //************************************************************************// @mixin buttonstyle($type, $b-color, $t-size, $pad) { // Grayscale button - @if $type == simple and $b-color == grayscale($b-color) { + @if $type == simple and $b-color == color.grayscale($b-color) { @include simple($b-color, true, $t-size, $pad); } - @if $type == shiny and $b-color == grayscale($b-color) { + @if $type == shiny and $b-color == color.grayscale($b-color) { @include shiny($b-color, true, $t-size, $pad); } - @if $type == pill and $b-color == grayscale($b-color) { + @if $type == pill and $b-color == color.grayscale($b-color) { @include pill($b-color, true, $t-size, $pad); } - @if $type == flat and $b-color == grayscale($b-color) { + @if $type == flat and $b-color == color.grayscale($b-color) { @include flat($b-color, true, $t-size, $pad); } @@ -98,21 +103,21 @@ //************************************************************************// @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + $border: color.adjust($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: color.adjust($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: color.adjust($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: color.adjust($base-color, $saturation: 15%, $lightness: -18%); - @if is-light($base-color) { + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $border: color.grayscale($border); + $inset-shadow: color.grayscale($inset-shadow); + $stop-gradient: color.grayscale($stop-gradient); + $text-shadow: color.grayscale($text-shadow); } border: 1px solid $border; @@ -122,36 +127,36 @@ display: inline-block; font-size: $textsize; font-weight: bold; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient.linear-gradient ($base-color, $stop-gradient); padding: $padding; text-decoration: none; text-shadow: 0 1px 0 $text-shadow; background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + $base-color-hover: color.adjust($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: color.adjust($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: color.adjust($base-color, $saturation: 8%, $lightness: -14%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); + $base-color-hover: color.grayscale($base-color-hover); + $inset-shadow-hover: color.grayscale($inset-shadow-hover); + $stop-gradient-hover: color.grayscale($stop-gradient-hover); } box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient.linear-gradient ($base-color-hover, $stop-gradient-hover); } &:active:not(:disabled), &:focus:not(:disabled) { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + $border-active: color.adjust($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: color.adjust($base-color, $saturation: 7%, $lightness: -17%); @if $grayscale == true { - $border-active: grayscale($border-active); - $inset-shadow-active: grayscale($inset-shadow-active); + $border-active: color.grayscale($border-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); } border: 1px solid $border-active; @@ -164,27 +169,27 @@ //************************************************************************// @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); - $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - - @if is-light($base-color) { + $border: color.adjust($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: color.adjust($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: color.adjust($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: color.adjust($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: color.adjust($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: color.adjust($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: color.adjust($base-color, $red: -86, $green: -75, $blue: -48); + + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border: grayscale($border); - $border-bottom: grayscale($border-bottom); - $fourth-stop: grayscale($fourth-stop); - $inset-shadow: grayscale($inset-shadow); - $second-stop: grayscale($second-stop); - $text-shadow: grayscale($text-shadow); - $third-stop: grayscale($third-stop); + $border: color.grayscale($border); + $border-bottom: color.grayscale($border-bottom); + $fourth-stop: color.grayscale($fourth-stop); + $inset-shadow: color.grayscale($inset-shadow); + $second-stop: color.grayscale($second-stop); + $text-shadow: color.grayscale($text-shadow); + $third-stop: color.grayscale($third-stop); } border: 1px solid $border; @@ -195,27 +200,27 @@ display: inline-block; font-size: $textsize; font-weight: bold; - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + @include linear-gradient.linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); padding: $padding; text-align: center; text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; &:hover:not(:disabled) { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); - $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); - $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + $first-stop-hover: color.adjust($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: color.adjust($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: color.adjust($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: color.adjust($base-color, $red: -86, $green: -80, $blue: -63); @if $grayscale == true { - $first-stop-hover: grayscale($first-stop-hover); - $second-stop-hover: grayscale($second-stop-hover); - $third-stop-hover: grayscale($third-stop-hover); - $fourth-stop-hover: grayscale($fourth-stop-hover); + $first-stop-hover: color.grayscale($first-stop-hover); + $second-stop-hover: color.grayscale($second-stop-hover); + $third-stop-hover: color.grayscale($third-stop-hover); + $fourth-stop-hover: color.grayscale($fourth-stop-hover); } cursor: pointer; - @include linear-gradient(top, $first-stop-hover 0%, + @include linear-gradient.linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%); @@ -223,10 +228,10 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + $inset-shadow-active: color.adjust($base-color, $red: -111, $green: -116, $blue: -122); @if $grayscale == true { - $inset-shadow-active: grayscale($inset-shadow-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); } box-shadow: inset 0 0 20px 0 $inset-shadow-active; @@ -238,25 +243,25 @@ //************************************************************************// @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); - - @if is-light($base-color) { + $border-bottom: color.adjust($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: color.adjust($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: color.adjust($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: color.adjust($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: color.adjust($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: color.adjust($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + $text-shadow: color.adjust($base-color, $saturation: 10%, $lightness: 4%); } @if $grayscale == true { - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); + $border-bottom: color.grayscale($border-bottom); + $border-sides: color.grayscale($border-sides); + $border-top: color.grayscale($border-top); + $inset-shadow: color.grayscale($inset-shadow); + $stop-gradient: color.grayscale($stop-gradient); + $text-shadow: color.grayscale($text-shadow); } border: 1px solid $border-top; @@ -268,7 +273,7 @@ font-size: $textsize; font-weight: normal; line-height: 1; - @include linear-gradient ($base-color, $stop-gradient); + @include linear-gradient.linear-gradient ($base-color, $stop-gradient); padding: $padding; text-align: center; text-decoration: none; @@ -276,47 +281,47 @@ background-clip: padding-box; &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + $base-color-hover: color.adjust($base-color, $lightness: -4.5%); + $border-bottom: color.adjust($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: color.adjust($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: color.adjust($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: color.adjust($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: color.adjust($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: color.adjust($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - $text-shadow-hover: grayscale($text-shadow-hover); + $base-color-hover: color.grayscale($base-color-hover); + $border-bottom: color.grayscale($border-bottom); + $border-sides: color.grayscale($border-sides); + $border-top: color.grayscale($border-top); + $inset-shadow-hover: color.grayscale($inset-shadow-hover); + $stop-gradient-hover: color.grayscale($stop-gradient-hover); + $text-shadow-hover: color.grayscale($text-shadow-hover); } border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); + @include linear-gradient.linear-gradient ($base-color-hover, $stop-gradient-hover); text-shadow: 0 -1px 1px $text-shadow-hover; background-clip: padding-box; } &:active:not(:disabled), &:focus:not(:disabled) { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + $active-color: color.adjust($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: color.adjust($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: color.adjust($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: color.adjust($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: color.adjust($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); @if $grayscale == true { - $active-color: grayscale($active-color); - $border-active: grayscale($border-active); - $border-bottom-active: grayscale($border-bottom-active); - $inset-shadow-active: grayscale($inset-shadow-active); - $text-shadow-active: grayscale($text-shadow-active); + $active-color: color.grayscale($active-color); + $border-active: color.grayscale($border-active); + $border-bottom-active: color.grayscale($border-bottom-active); + $inset-shadow-active: color.grayscale($inset-shadow-active); + $text-shadow-active: color.grayscale($text-shadow-active); } background: $active-color; @@ -334,7 +339,7 @@ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { $color: hsl(0, 0, 100%); - @if is-light($base-color) { + @if color-lightness.is-light($base-color) { $color: hsl(0, 0, 20%); } @@ -350,10 +355,10 @@ background-clip: padding-box; &:hover:not(:disabled){ - $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + $base-color-hover: color.adjust($base-color, $saturation: 4%, $lightness: 5%); @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); + $base-color-hover: color.grayscale($base-color-hover); } background-color: $base-color-hover; @@ -362,10 +367,10 @@ &:active:not(:disabled), &:focus:not(:disabled) { - $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $base-color-active: color.adjust($base-color, $saturation: -4%, $lightness: -5%); @if $grayscale == true { - $base-color-active: grayscale($base-color-active); + $base-color-active: color.grayscale($base-color-active); } background-color: $base-color-active; diff --git a/source/_sass/bourbon/addons/_directional-values.scss b/source/_sass/bourbon/addons/_directional-values.scss index 742f103..811af85 100644 --- a/source/_sass/bourbon/addons/_directional-values.scss +++ b/source/_sass/bourbon/addons/_directional-values.scss @@ -18,13 +18,15 @@ // // Note: You can also use false instead of null +@use "sass:list"; + @function collapse-directionals($vals) { $output: null; - $A: nth( $vals, 1 ); - $B: if( length($vals) < 2, $A, nth($vals, 2)); - $C: if( length($vals) < 3, $A, nth($vals, 3)); - $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); + $A: list.nth( $vals, 1 ); + $B: if( list.length($vals) < 2, $A, list.nth($vals, 2)); + $C: if( list.length($vals) < 3, $A, list.nth($vals, 3)); + $D: if( list.length($vals) < 2, $A, list.nth($vals, if( list.length($vals) < 4, 2, 4) )); @if $A == 0 { $A: 0 } @if $B == 0 { $B: 0 } @@ -60,28 +62,28 @@ $vals: collapse-directionals($vals); @if contains-falsy($vals) { - @if nth($vals, 1) { #{$top}: nth($vals, 1); } + @if list.nth($vals, 1) { #{$top}: list.nth($vals, 1); } - @if length($vals) == 1 { - @if nth($vals, 1) { #{$right}: nth($vals, 1); } + @if list.length($vals) == 1 { + @if list.nth($vals, 1) { #{$right}: list.nth($vals, 1); } } @else { - @if nth($vals, 2) { #{$right}: nth($vals, 2); } + @if list.nth($vals, 2) { #{$right}: list.nth($vals, 2); } } // prop: top/bottom right/left - @if length($vals) == 2 { - @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + @if list.length($vals) == 2 { + @if list.nth($vals, 1) { #{$bottom}: list.nth($vals, 1); } + @if list.nth($vals, 2) { #{$left}: list.nth($vals, 2); } // prop: top right/left bottom - } @else if length($vals) == 3 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 2) { #{$left}: nth($vals, 2); } + } @else if list.length($vals) == 3 { + @if list.nth($vals, 3) { #{$bottom}: list.nth($vals, 3); } + @if list.nth($vals, 2) { #{$left}: list.nth($vals, 2); } // prop: top right bottom left - } @else if length($vals) == 4 { - @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } - @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } @else if list.length($vals) == 4 { + @if list.nth($vals, 3) { #{$bottom}: list.nth($vals, 3); } + @if list.nth($vals, 4) { #{$left}: list.nth($vals, 4); } } // prop: top/right/bottom/left diff --git a/source/_sass/bourbon/addons/_html5-input-types.scss b/source/_sass/bourbon/addons/_html5-input-types.scss index 9e9324a..ff870c0 100644 --- a/source/_sass/bourbon/addons/_html5-input-types.scss +++ b/source/_sass/bourbon/addons/_html5-input-types.scss @@ -3,6 +3,9 @@ // input types that have a text-based input, excluding textarea. // http://diveintohtml5.org/forms.html //************************************************************************// + +@use "../functions/assign"; + $inputs-list: 'input[type="email"]', 'input[type="number"]', 'input[type="password"]', @@ -22,15 +25,15 @@ $inputs-list: 'input[type="email"]', // Bare inputs //************************************************************************// -$all-text-inputs: assign-inputs($inputs-list); +$all-text-inputs: assign.assign-inputs($inputs-list); // Hover Pseudo-class //************************************************************************// -$all-text-inputs-hover: assign-inputs($inputs-list, hover); +$all-text-inputs-hover: assign.assign-inputs($inputs-list, hover); // Focus Pseudo-class //************************************************************************// -$all-text-inputs-focus: assign-inputs($inputs-list, focus); +$all-text-inputs-focus: assign.assign-inputs($inputs-list, focus); @@ -57,19 +60,19 @@ $inputs-button-list: 'input[type="button"]', // Bare inputs //************************************************************************// -$all-button-inputs: assign-inputs($inputs-button-list); +$all-button-inputs: assign.assign-inputs($inputs-button-list); // Hover Pseudo-class //************************************************************************// -$all-button-inputs-hover: assign-inputs($inputs-button-list, hover); +$all-button-inputs-hover: assign.assign-inputs($inputs-button-list, hover); // Focus Pseudo-class //************************************************************************// -$all-button-inputs-focus: assign-inputs($inputs-button-list, focus); +$all-button-inputs-focus: assign.assign-inputs($inputs-button-list, focus); // Active Pseudo-class //************************************************************************// -$all-button-inputs-active: assign-inputs($inputs-button-list, active); +$all-button-inputs-active: assign.assign-inputs($inputs-button-list, active); diff --git a/source/_sass/bourbon/addons/_position.scss b/source/_sass/bourbon/addons/_position.scss index 7de7518..de6c3af 100644 --- a/source/_sass/bourbon/addons/_position.scss +++ b/source/_sass/bourbon/addons/_position.scss @@ -1,32 +1,36 @@ +@use "../functions/unpack"; +@use "sass:list"; +@use "sass:meta"; + @mixin position ($position: relative, $coordinates: null null null null) { - @if type-of($position) == list { + @if meta.type-of($position) == list { $coordinates: $position; $position: relative; } - $coordinates: unpack($coordinates); + $coordinates: unpack.unpack($coordinates); - $top: nth($coordinates, 1); - $right: nth($coordinates, 2); - $bottom: nth($coordinates, 3); - $left: nth($coordinates, 4); + $top: list.nth($coordinates, 1); + $right: list.nth($coordinates, 2); + $bottom: list.nth($coordinates, 3); + $left: list.nth($coordinates, 4); position: $position; - @if ($top and $top == auto) or (type-of($top) == number) { + @if ($top and $top == auto) or (meta.type-of($top) == number) { top: $top; } - @if ($right and $right == auto) or (type-of($right) == number) { + @if ($right and $right == auto) or (meta.type-of($right) == number) { right: $right; } - @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { + @if ($bottom and $bottom == auto) or (meta.type-of($bottom) == number) { bottom: $bottom; } - @if ($left and $left == auto) or (type-of($left) == number) { + @if ($left and $left == auto) or (meta.type-of($left) == number) { left: $left; } } diff --git a/source/_sass/bourbon/addons/_prefixer.scss b/source/_sass/bourbon/addons/_prefixer.scss index c32f502..9f86ce1 100644 --- a/source/_sass/bourbon/addons/_prefixer.scss +++ b/source/_sass/bourbon/addons/_prefixer.scss @@ -3,30 +3,32 @@ //************************************************************************// // Variables located in /settings/_prefixer.scss +@use "../settings/prefixer"; + @mixin prefixer ($property, $value, $prefixes) { @each $prefix in $prefixes { @if $prefix == webkit { - @if $prefix-for-webkit { + @if prefixer.$prefix-for-webkit { -webkit-#{$property}: $value; } } @else if $prefix == moz { - @if $prefix-for-mozilla { + @if prefixer.$prefix-for-mozilla { -moz-#{$property}: $value; } } @else if $prefix == ms { - @if $prefix-for-microsoft { + @if prefixer.$prefix-for-microsoft { -ms-#{$property}: $value; } } @else if $prefix == o { - @if $prefix-for-opera { + @if prefixer.$prefix-for-opera { -o-#{$property}: $value; } } @else if $prefix == spec { - @if $prefix-for-spec { + @if prefixer.$prefix-for-spec { #{$property}: $value; } } @@ -37,9 +39,9 @@ } @mixin disable-prefix-for-all() { - $prefix-for-webkit: false !global; - $prefix-for-mozilla: false !global; - $prefix-for-microsoft: false !global; - $prefix-for-opera: false !global; - $prefix-for-spec: false !global; + prefixer.$prefix-for-webkit: false; + prefixer.$prefix-for-mozilla: false; + prefixer.$prefix-for-microsoft: false; + prefixer.$prefix-for-opera: false; + prefixer.$prefix-for-spec: false; } diff --git a/source/_sass/bourbon/addons/_retina-image.scss b/source/_sass/bourbon/addons/_retina-image.scss index 3995c19..c2a1365 100644 --- a/source/_sass/bourbon/addons/_retina-image.scss +++ b/source/_sass/bourbon/addons/_retina-image.scss @@ -1,3 +1,5 @@ +@use "../css3/hidpi-media-query"; + @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { @if $asset-pipeline { background-image: image-url("#{$filename}.#{$extension}"); @@ -6,7 +8,7 @@ background-image: url("#{$filename}.#{$extension}"); } - @include hidpi { + @include hidpi-media-query.hidpi { @if $asset-pipeline { @if $retina-filename { background-image: image-url("#{$retina-filename}.#{$extension}"); diff --git a/source/_sass/bourbon/addons/_size.scss b/source/_sass/bourbon/addons/_size.scss index a865379..e86e6d8 100644 --- a/source/_sass/bourbon/addons/_size.scss +++ b/source/_sass/bourbon/addons/_size.scss @@ -1,16 +1,20 @@ +@use "sass:list"; +@use "sass:math"; +@use "sass:meta"; + @mixin size($size) { - $height: nth($size, 1); + $height: list.nth($size, 1); $width: $height; - @if length($size) > 1 { - $height: nth($size, 2); + @if list.length($size) > 1 { + $height: list.nth($size, 2); } - @if $height == auto or (type-of($height) == number and not unitless($height)) { + @if $height == auto or (meta.type-of($height) == number and not math.is-unitless($height)) { height: $height; } - @if $width == auto or (type-of($width) == number and not unitless($width)) { + @if $width == auto or (meta.type-of($width) == number and not math.is-unitless($width)) { width: $width; } } diff --git a/source/_sass/bourbon/addons/_triangle.scss b/source/_sass/bourbon/addons/_triangle.scss index 9331d8d..a4ff6bb 100644 --- a/source/_sass/bourbon/addons/_triangle.scss +++ b/source/_sass/bourbon/addons/_triangle.scss @@ -1,81 +1,93 @@ +@use "sass:list"; + @mixin triangle ($size, $color, $direction) { height: 0; width: 0; - $width: nth($size, 1); - $height: nth($size, length($size)); + $width: list.nth($size, 1); + $height: list.nth($size, list.length($size)); - $foreground-color: nth($color, 1); - $background-color: if(length($color) == 2, nth($color, 2), transparent); + $foreground-color: list.nth($color, 1); + $background-color: if(list.length($color)==2, list.nth($color, 2), transparent); - @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + @if ($direction ==up) or ($direction ==down) or ($direction ==right) or ($direction ==left) { $width: $width * 0.5; $height: if(length($size) > 1, $height, $height*0.5); - @if $direction == up { + @if $direction ==up { border-left: $width solid $background-color; border-right: $width solid $background-color; border-bottom: $height solid $foreground-color; - } @else if $direction == right { + } + + @else if $direction ==right { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-left: $height solid $foreground-color; - } @else if $direction == down { + } + + @else if $direction ==down { border-left: $width solid $background-color; border-right: $width solid $background-color; border-top: $height solid $foreground-color; - } @else if $direction == left { + } + + @else if $direction ==left { border-top: $width solid $background-color; border-bottom: $width solid $background-color; border-right: $height solid $foreground-color; } } - @else if ($direction == up-right) or ($direction == up-left) { + @else if ($direction ==up-right) or ($direction ==up-left) { border-top: $height solid $foreground-color; - @if $direction == up-right { - border-left: $width solid $background-color; + @if $direction ==up-right { + border-left: $width solid $background-color; + + } - } @else if $direction == up-left { + @else if $direction ==up-left { border-right: $width solid $background-color; } } - @else if ($direction == down-right) or ($direction == down-left) { + @else if ($direction ==down-right) or ($direction ==down-left) { border-bottom: $height solid $foreground-color; - @if $direction == down-right { - border-left: $width solid $background-color; + @if $direction ==down-right { + border-left: $width solid $background-color; + + } - } @else if $direction == down-left { + @else if $direction ==down-left { border-right: $width solid $background-color; } } - @else if ($direction == inset-up) { + @else if ($direction ==inset-up) { border-width: $height $width; border-style: solid; border-color: $background-color $background-color $foreground-color; } - @else if ($direction == inset-down) { + @else if ($direction ==inset-down) { border-width: $height $width; border-style: solid; border-color: $foreground-color $background-color $background-color; } - @else if ($direction == inset-right) { + @else if ($direction ==inset-right) { border-width: $width $height; border-style: solid; border-color: $background-color $background-color $background-color $foreground-color; } - @else if ($direction == inset-left) { + @else if ($direction ==inset-left) { border-width: $width $height; border-style: solid; border-color: $background-color $foreground-color $background-color $background-color; diff --git a/source/_sass/bourbon/css3/_animation.scss b/source/_sass/bourbon/css3/_animation.scss index 08c3dbf..310637e 100644 --- a/source/_sass/bourbon/css3/_animation.scss +++ b/source/_sass/bourbon/css3/_animation.scss @@ -1,52 +1,54 @@ +@use "../addons/prefixer"; + // http://www.w3.org/TR/css3-animations/#the-animation-name-property- // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. // Official animation shorthand property. @mixin animation ($animations...) { - @include prefixer(animation, $animations, webkit moz spec); + @include prefixer.prefixer(animation, $animations, webkit moz spec); } // Individual Animation Properties @mixin animation-name ($names...) { - @include prefixer(animation-name, $names, webkit moz spec); + @include prefixer.prefixer(animation-name, $names, webkit moz spec); } @mixin animation-duration ($times...) { - @include prefixer(animation-duration, $times, webkit moz spec); + @include prefixer.prefixer(animation-duration, $times, webkit moz spec); } @mixin animation-timing-function ($motions...) { // ease | linear | ease-in | ease-out | ease-in-out - @include prefixer(animation-timing-function, $motions, webkit moz spec); + @include prefixer.prefixer(animation-timing-function, $motions, webkit moz spec); } @mixin animation-iteration-count ($values...) { // infinite | - @include prefixer(animation-iteration-count, $values, webkit moz spec); + @include prefixer.prefixer(animation-iteration-count, $values, webkit moz spec); } @mixin animation-direction ($directions...) { // normal | alternate - @include prefixer(animation-direction, $directions, webkit moz spec); + @include prefixer.prefixer(animation-direction, $directions, webkit moz spec); } @mixin animation-play-state ($states...) { // running | paused - @include prefixer(animation-play-state, $states, webkit moz spec); + @include prefixer.prefixer(animation-play-state, $states, webkit moz spec); } @mixin animation-delay ($times...) { - @include prefixer(animation-delay, $times, webkit moz spec); + @include prefixer.prefixer(animation-delay, $times, webkit moz spec); } @mixin animation-fill-mode ($modes...) { // none | forwards | backwards | both - @include prefixer(animation-fill-mode, $modes, webkit moz spec); + @include prefixer.prefixer(animation-fill-mode, $modes, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_appearance.scss b/source/_sass/bourbon/css3/_appearance.scss index 3eb16e4..828e8bc 100644 --- a/source/_sass/bourbon/css3/_appearance.scss +++ b/source/_sass/bourbon/css3/_appearance.scss @@ -1,3 +1,5 @@ +@use "../addons/prefixer"; + @mixin appearance ($value) { - @include prefixer(appearance, $value, webkit moz ms o spec); + @include prefixer.prefixer(appearance, $value, webkit moz ms o spec); } diff --git a/source/_sass/bourbon/css3/_backface-visibility.scss b/source/_sass/bourbon/css3/_backface-visibility.scss index 1161fe6..7a39b64 100644 --- a/source/_sass/bourbon/css3/_backface-visibility.scss +++ b/source/_sass/bourbon/css3/_backface-visibility.scss @@ -1,6 +1,9 @@ //************************************************************************// // Backface-visibility mixin //************************************************************************// + +@use "../addons/prefixer"; + @mixin backface-visibility($visibility) { - @include prefixer(backface-visibility, $visibility, webkit spec); + @include prefixer.prefixer(backface-visibility, $visibility, webkit spec); } diff --git a/source/_sass/bourbon/css3/_background-image.scss b/source/_sass/bourbon/css3/_background-image.scss index 6abe88b..7b28c97 100644 --- a/source/_sass/bourbon/css3/_background-image.scss +++ b/source/_sass/bourbon/css3/_background-image.scss @@ -3,6 +3,13 @@ // gradients, or for stringing multiple gradients together. //************************************************************************// +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; + @mixin background-image($images...) { $webkit-images: (); $spec-images: (); @@ -11,9 +18,9 @@ $webkit-image: (); $spec-image: (); - @if (type-of($image) == string) { - $url-str: str-slice($image, 0, 3); - $gradient-type: str-slice($image, 0, 6); + @if (meta.type-of($image) == string) { + $url-str: string.slice($image, 0, 3); + $gradient-type: string.slice($image, 0, 6); @if $url-str == "url" { $webkit-image: $image; @@ -21,20 +28,20 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser($image); - $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser($image); + $webkit-image: map.get($gradients, webkit-image); + $spec-image: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser($image); - $webkit-image: map-get($gradients, webkit-image); - $spec-image: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser($image); + $webkit-image: map.get($gradients, webkit-image); + $spec-image: map.get($gradients, spec-image); } } - $webkit-images: append($webkit-images, $webkit-image, comma); - $spec-images: append($spec-images, $spec-image, comma); + $webkit-images: list.append($webkit-images, $webkit-image, comma); + $spec-images: list.append($spec-images, $spec-image, comma); } background-image: $webkit-images; diff --git a/source/_sass/bourbon/css3/_background.scss b/source/_sass/bourbon/css3/_background.scss index 9bce930..14ca5ab 100644 --- a/source/_sass/bourbon/css3/_background.scss +++ b/source/_sass/bourbon/css3/_background.scss @@ -1,3 +1,10 @@ +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; + //************************************************************************// // Background property for adding multiple backgrounds using shorthand // notation. @@ -10,13 +17,13 @@ @each $background in $backgrounds { $webkit-background: (); $spec-background: (); - $background-type: type-of($background); + $background-type: meta.type-of($background); @if $background-type == string or list { - $background-str: if($background-type == list, nth($background, 1), $background); + $background-str: if($background-type == list, list.nth($background, 1), $background); - $url-str: str-slice($background-str, 0, 3); - $gradient-type: str-slice($background-str, 0, 6); + $url-str: string.slice($background-str, 0, 3); + $gradient-type: string.slice($background-str, 0, 6); @if $url-str == "url" { $webkit-background: $background; @@ -24,15 +31,15 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$background}"); - $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser("#{$background}"); + $webkit-background: map.get($gradients, webkit-image); + $spec-background: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$background}"); - $webkit-background: map-get($gradients, webkit-image); - $spec-background: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser("#{$background}"); + $webkit-background: map.get($gradients, webkit-image); + $spec-background: map.get($gradients, spec-image); } @else { @@ -46,8 +53,8 @@ $spec-background: $background; } - $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); - $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + $webkit-backgrounds: list.append($webkit-backgrounds, $webkit-background, comma); + $spec-backgrounds: list.append($spec-backgrounds, $spec-background, comma); } background: $webkit-backgrounds; diff --git a/source/_sass/bourbon/css3/_border-image.scss b/source/_sass/bourbon/css3/_border-image.scss index e338c2d..91b563d 100644 --- a/source/_sass/bourbon/css3/_border-image.scss +++ b/source/_sass/bourbon/css3/_border-image.scss @@ -1,3 +1,10 @@ +@use "../helpers/linear-gradient-parser"; +@use "../helpers/radial-gradient-parser"; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; + @mixin border-image($borders...) { $webkit-borders: (); $spec-borders: (); @@ -5,13 +12,13 @@ @each $border in $borders { $webkit-border: (); $spec-border: (); - $border-type: type-of($border); + $border-type: meta.type-of($border); @if $border-type == string or list { - $border-str: if($border-type == list, nth($border, 1), $border); + $border-str: if($border-type == list, list.nth($border, 1), $border); - $url-str: str-slice($border-str, 0, 3); - $gradient-type: str-slice($border-str, 0, 6); + $url-str: string.slice($border-str, 0, 3); + $gradient-type: string.slice($border-str, 0, 6); @if $url-str == "url" { $webkit-border: $border; @@ -19,15 +26,15 @@ } @else if $gradient-type == "linear" { - $gradients: _linear-gradient-parser("#{$border}"); - $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); + $gradients: linear-gradient-parser.linear-gradient-parser("#{$border}"); + $webkit-border: map.get($gradients, webkit-image); + $spec-border: map.get($gradients, spec-image); } @else if $gradient-type == "radial" { - $gradients: _radial-gradient-parser("#{$border}"); - $webkit-border: map-get($gradients, webkit-image); - $spec-border: map-get($gradients, spec-image); + $gradients: radial-gradient-parser.radial-gradient-parser("#{$border}"); + $webkit-border: map.get($gradients, webkit-image); + $spec-border: map.get($gradients, spec-image); } @else { @@ -41,8 +48,8 @@ $spec-border: $border; } - $webkit-borders: append($webkit-borders, $webkit-border, comma); - $spec-borders: append($spec-borders, $spec-border, comma); + $webkit-borders: list.append($webkit-borders, $webkit-border, comma); + $spec-borders: list.append($spec-borders, $spec-border, comma); } -webkit-border-image: $webkit-borders; diff --git a/source/_sass/bourbon/css3/_border-radius.scss b/source/_sass/bourbon/css3/_border-radius.scss index 7c17190..9801d66 100644 --- a/source/_sass/bourbon/css3/_border-radius.scss +++ b/source/_sass/bourbon/css3/_border-radius.scss @@ -1,22 +1,25 @@ //************************************************************************// // Shorthand Border-radius mixins //************************************************************************// + +@use "../addons/prefixer"; + @mixin border-top-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer.prefixer(border-top-left-radius, $radii, spec); + @include prefixer.prefixer(border-top-right-radius, $radii, spec); } @mixin border-bottom-radius($radii) { - @include prefixer(border-bottom-left-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-right-radius, $radii, spec); } @mixin border-left-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer.prefixer(border-top-left-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-left-radius, $radii, spec); } @mixin border-right-radius($radii) { - @include prefixer(border-top-right-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); + @include prefixer.prefixer(border-top-right-radius, $radii, spec); + @include prefixer.prefixer(border-bottom-right-radius, $radii, spec); } diff --git a/source/_sass/bourbon/css3/_box-sizing.scss b/source/_sass/bourbon/css3/_box-sizing.scss index f07e1d4..fd070b6 100644 --- a/source/_sass/bourbon/css3/_box-sizing.scss +++ b/source/_sass/bourbon/css3/_box-sizing.scss @@ -1,4 +1,6 @@ +@use "../addons/prefixer"; + @mixin box-sizing ($box) { // content-box | border-box | inherit - @include prefixer(box-sizing, $box, webkit moz spec); + @include prefixer.prefixer(box-sizing, $box, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_columns.scss b/source/_sass/bourbon/css3/_columns.scss index 96f601c..cb647b6 100644 --- a/source/_sass/bourbon/css3/_columns.scss +++ b/source/_sass/bourbon/css3/_columns.scss @@ -1,47 +1,49 @@ +@use "../addons/prefixer"; + @mixin columns($arg: auto) { // || - @include prefixer(columns, $arg, webkit moz spec); + @include prefixer.prefixer(columns, $arg, webkit moz spec); } @mixin column-count($int: auto) { // auto || integer - @include prefixer(column-count, $int, webkit moz spec); + @include prefixer.prefixer(column-count, $int, webkit moz spec); } @mixin column-gap($length: normal) { // normal || length - @include prefixer(column-gap, $length, webkit moz spec); + @include prefixer.prefixer(column-gap, $length, webkit moz spec); } @mixin column-fill($arg: auto) { // auto || length - @include prefixer(column-fill, $arg, webkit moz spec); + @include prefixer.prefixer(column-fill, $arg, webkit moz spec); } @mixin column-rule($arg) { // || || - @include prefixer(column-rule, $arg, webkit moz spec); + @include prefixer.prefixer(column-rule, $arg, webkit moz spec); } @mixin column-rule-color($color) { - @include prefixer(column-rule-color, $color, webkit moz spec); + @include prefixer.prefixer(column-rule-color, $color, webkit moz spec); } @mixin column-rule-style($style: none) { // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid - @include prefixer(column-rule-style, $style, webkit moz spec); + @include prefixer.prefixer(column-rule-style, $style, webkit moz spec); } @mixin column-rule-width ($width: none) { - @include prefixer(column-rule-width, $width, webkit moz spec); + @include prefixer.prefixer(column-rule-width, $width, webkit moz spec); } @mixin column-span($arg: none) { // none || all - @include prefixer(column-span, $arg, webkit moz spec); + @include prefixer.prefixer(column-span, $arg, webkit moz spec); } @mixin column-width($length: auto) { // auto || length - @include prefixer(column-width, $length, webkit moz spec); + @include prefixer.prefixer(column-width, $length, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_filter.scss b/source/_sass/bourbon/css3/_filter.scss index 8560d77..3aade26 100644 --- a/source/_sass/bourbon/css3/_filter.scss +++ b/source/_sass/bourbon/css3/_filter.scss @@ -1,5 +1,7 @@ +@use "../addons/prefixer"; + @mixin filter($function: none) { // [ - @include prefixer(perspective, $depth, webkit moz spec); + @include prefixer.prefixer(perspective, $depth, webkit moz spec); } @mixin perspective-origin($value: 50% 50%) { - @include prefixer(perspective-origin, $value, webkit moz spec); + @include prefixer.prefixer(perspective-origin, $value, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_radial-gradient.scss b/source/_sass/bourbon/css3/_radial-gradient.scss index 7a8c376..dd54d43 100644 --- a/source/_sass/bourbon/css3/_radial-gradient.scss +++ b/source/_sass/bourbon/css3/_radial-gradient.scss @@ -1,3 +1,9 @@ +@use "../helpers/radial-arg-parser"; +@use "../helpers/shape-size-stripper"; +@use "sass:list"; +@use "sass:meta"; +@use "sass:string"; + // Requires Sass 3.1+ @mixin radial-gradient($G1, $G2, $G3: null, $G4: null, @@ -8,22 +14,22 @@ $shape-size: null, $fallback: null) { - $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); - $G1: nth($data, 1); - $G2: nth($data, 2); - $pos: nth($data, 3); - $shape-size: nth($data, 4); + $data: radial-arg-parser.radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: list.nth($data, 1); + $G2: list.nth($data, 2); + $pos: list.nth($data, 3); + $shape-size: list.nth($data, 4); $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; // Strip deprecated cover/contain for spec - $shape-size-spec: _shape-size-stripper($shape-size); + $shape-size-spec: shape-size-stripper.shape-size-stripper($shape-size); // Set $G1 as the default fallback color - $first-color: nth($full, 1); - $fallback-color: nth($first-color, 1); + $first-color: list.nth($full, 1); + $fallback-color: list.nth($first-color, 1); - @if (type-of($fallback) == color) or ($fallback == "transparent") { + @if (meta.type-of($fallback) == color) or ($fallback == "transparent") { $fallback-color: $fallback; } @@ -34,6 +40,6 @@ $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); background-color: $fallback-color; - background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); - background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); + background-image: -webkit-radial-gradient(string.unquote(#{$pos}#{$shape-size}#{$full})); + background-image: string.unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); } diff --git a/source/_sass/bourbon/css3/_transform.scss b/source/_sass/bourbon/css3/_transform.scss index 8cc3596..fa70c9c 100644 --- a/source/_sass/bourbon/css3/_transform.scss +++ b/source/_sass/bourbon/css3/_transform.scss @@ -1,15 +1,17 @@ +@use "../addons/prefixer"; + @mixin transform($property: none) { // none | - @include prefixer(transform, $property, webkit moz ms o spec); + @include prefixer.prefixer(transform, $property, webkit moz ms o spec); } @mixin transform-origin($axes: 50%) { // x-axis - left | center | right | length | % // y-axis - top | center | bottom | length | % // z-axis - length - @include prefixer(transform-origin, $axes, webkit moz ms o spec); + @include prefixer.prefixer(transform-origin, $axes, webkit moz ms o spec); } @mixin transform-style ($style: flat) { - @include prefixer(transform-style, $style, webkit moz ms o spec); + @include prefixer.prefixer(transform-style, $style, webkit moz ms o spec); } diff --git a/source/_sass/bourbon/css3/_transition.scss b/source/_sass/bourbon/css3/_transition.scss index 8830080..bcdcb17 100644 --- a/source/_sass/bourbon/css3/_transition.scss +++ b/source/_sass/bourbon/css3/_transition.scss @@ -3,77 +3,84 @@ // @include transition (opacity 1s ease-in 2s, width 2s ease-out); // @include transition-property (transform, opacity); -@use 'sass:list'; +@use "../addons/prefixer"; +@use "../functions/transition-property-name"; +@use "sass:list"; @mixin transition ($properties...) { // Fix for vendor-prefix transform property $needs-prefixes: false; - $webkit: (); - $moz: (); - $spec: (); + $webkit: ( + ); +$moz: ( +); +$spec: ( +); - // Create lists for vendor-prefixed transform - @each $list in $properties { - @if list.nth($list, 1) == "transform" { - $needs-prefixes: true; - $list1: -webkit-transform; - $list2: -moz-transform; - $list3: (); +// Create lists for vendor-prefixed transform +@each $list in $properties { + @if list.nth($list, 1)=="transform" { + $needs-prefixes: true; + $list1: -webkit-transform; + $list2: -moz-transform; + $list3: ( + ); - @each $var in $list { - $list3: join($list3, $var); + @each $var in $list { + $list3: list.join($list3, $var); - @if $var != "transform" { - $list1: join($list1, $var); - $list2: join($list2, $var); - } - } - - $webkit: list.append($webkit, $list1); - $moz: list.append($moz, $list2); - $spec: list.append($spec, $list3); - } - - // Create lists for non-prefixed transition properties - @else { - $webkit: list.append($webkit, $list, comma); - $moz: list.append($moz, $list, comma); - $spec: list.append($spec, $list, comma); + @if $var !="transform" { + $list1: list.join($list1, $var); + $list2: list.join($list2, $var); } } - @if $needs-prefixes { - -webkit-transition: $webkit; - -moz-transition: $moz; - transition: $spec; + $webkit: list.append($webkit, $list1); + $moz: list.append($moz, $list2); + $spec: list.append($spec, $list3); +} + +// Create lists for non-prefixed transition properties +@else { + $webkit: list.append($webkit, $list, comma); + $moz: list.append($moz, $list, comma); + $spec: list.append($spec, $list, comma); +} +} + +@if $needs-prefixes { + -webkit-transition: $webkit; + -moz-transition: $moz; + transition: $spec; +} + +@else { + @if list.length($properties)>=1 { + @include prefixer.prefixer(transition, $properties, webkit moz spec); } - @else { - @if list.length($properties) >= 1 { - @include prefixer(transition, $properties, webkit moz spec); - } - @else { - $properties: all 0.15s ease-out 0s; - @include prefixer(transition, $properties, webkit moz spec); - } + @else { + $properties: all 0.15s ease-out 0s; + @include prefixer.prefixer(transition, $properties, webkit moz spec); } } +} @mixin transition-property ($properties...) { - -webkit-transition-property: transition-property-names($properties, 'webkit'); - -moz-transition-property: transition-property-names($properties, 'moz'); - transition-property: transition-property-names($properties, false); + -webkit-transition-property: transition-property-name.transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-name.transition-property-names($properties, 'moz'); + transition-property: transition-property-name.transition-property-names($properties, false); } @mixin transition-duration ($times...) { - @include prefixer(transition-duration, $times, webkit moz spec); + @include prefixer.prefixer(transition-duration, $times, webkit moz spec); } @mixin transition-timing-function ($motions...) { -// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() - @include prefixer(transition-timing-function, $motions, webkit moz spec); + // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer.prefixer(transition-timing-function, $motions, webkit moz spec); } @mixin transition-delay ($times...) { - @include prefixer(transition-delay, $times, webkit moz spec); + @include prefixer.prefixer(transition-delay, $times, webkit moz spec); } diff --git a/source/_sass/bourbon/css3/_user-select.scss b/source/_sass/bourbon/css3/_user-select.scss index 1380aa8..d2683e1 100644 --- a/source/_sass/bourbon/css3/_user-select.scss +++ b/source/_sass/bourbon/css3/_user-select.scss @@ -1,3 +1,5 @@ +@use "../addons/prefixer"; + @mixin user-select($arg: none) { - @include prefixer(user-select, $arg, webkit moz ms spec); + @include prefixer.prefixer(user-select, $arg, webkit moz ms spec); } diff --git a/source/_sass/bourbon/functions/_color-lightness.scss b/source/_sass/bourbon/functions/_color-lightness.scss index bd14579..bc774f5 100644 --- a/source/_sass/bourbon/functions/_color-lightness.scss +++ b/source/_sass/bourbon/functions/_color-lightness.scss @@ -1,10 +1,14 @@ -@use "sass:color"; - // Programatically determines whether a color is light or dark // Returns a boolean // More details here http://robots.thoughtbot.com/closer-look-color-lightness -@use "sass:math"; +@use "sass:color"; + +@function is-light($hex-color) { + $-local-red: color.red(rgba($hex-color, 1.0)); + $-local-green: color.green(rgba($hex-color, 1.0)); + $-local-blue: color.blue(rgba($hex-color, 1.0)); +} @function is-light($hex-color) { $-local-red: color.channel(rgba($hex-color, 1.0), 'red', $space: rgb); @@ -13,5 +17,5 @@ $-local-lightness: math.div($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722, 255); - @return $-local-lightness > .6; + @return $-local-lightness >.6; } diff --git a/source/_sass/bourbon/functions/_flex-grid.scss b/source/_sass/bourbon/functions/_flex-grid.scss index 3fed426..48da98b 100644 --- a/source/_sass/bourbon/functions/_flex-grid.scss +++ b/source/_sass/bourbon/functions/_flex-grid.scss @@ -38,4 +38,4 @@ // float: left; // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // } -// } \ No newline at end of file +// } diff --git a/source/_sass/bourbon/functions/_golden-ratio.scss b/source/_sass/bourbon/functions/_golden-ratio.scss index 463d14a..eaa779e 100644 --- a/source/_sass/bourbon/functions/_golden-ratio.scss +++ b/source/_sass/bourbon/functions/_golden-ratio.scss @@ -1,3 +1,5 @@ +@use "modular-scale"; + @function golden-ratio($value, $increment) { - @return modular-scale($value, $increment, $golden) + @return modular-scale.modular-scale($value, $increment, modular-scale.$golden) } diff --git a/source/_sass/bourbon/functions/_modular-scale.scss b/source/_sass/bourbon/functions/_modular-scale.scss index 08edbce..48f5fbe 100644 --- a/source/_sass/bourbon/functions/_modular-scale.scss +++ b/source/_sass/bourbon/functions/_modular-scale.scss @@ -1,3 +1,4 @@ +@use "sass:list"; // Scaling Variables @use "sass:math"; @@ -20,8 +21,8 @@ $major-twelfth: 3; $double-octave: 4; @function modular-scale($value, $increment, $ratio) { - $v1: nth($value, 1); - $v2: nth($value, length($value)); + $v1: list.nth($value, 1); + $v2: list.nth($value, list.length($value)); $value: $v1; // scale $v2 to just above $v1 diff --git a/source/_sass/bourbon/functions/_px-to-em.scss b/source/_sass/bourbon/functions/_px-to-em.scss index 6c7ba69..3b07c0b 100644 --- a/source/_sass/bourbon/functions/_px-to-em.scss +++ b/source/_sass/bourbon/functions/_px-to-em.scss @@ -1,15 +1,19 @@ +@use "../settings/px-to-em"; +@use "sass:math"; +@use "strip-units"; + // Convert pixels to ems // eg. for a relational value of 12px write em(12) when the parent is 16px // if the parent is another value say 24px write em(12, 24) -@use "sass:math"; - -@function em($pxval, $base: $em-base) { +@function em($pxval, $base: px-to-em.$em-base) { @if not math.is-unitless($pxval) { - $pxval: strip-units($pxval); + $pxval: strip-units.strip-units($pxval); } + @if not math.is-unitless($base) { - $base: strip-units($base); + $base: strip-units.strip-units($base); } + @return math.div($pxval, $base) * 1em; } diff --git a/source/_sass/bourbon/functions/_px-to-rem.scss b/source/_sass/bourbon/functions/_px-to-rem.scss index 8fdca3f..b5285b7 100644 --- a/source/_sass/bourbon/functions/_px-to-rem.scss +++ b/source/_sass/bourbon/functions/_px-to-rem.scss @@ -2,16 +2,20 @@ // eg. for a relational value of 12px write rem(12) // Assumes $em-base is the font-size of +@use "../settings/px-to-em"; @use "sass:math"; +@use "strip-units"; @function rem($pxval) { - @if not unitless($pxval) { - $pxval: strip-units($pxval); + @if not math.is-unitless($pxval) { + $pxval: strip-units.strip-units($pxval); } - $base: $em-base; - @if not unitless($base) { - $base: strip-units($base); + $base: px-to-em.$em-base; + + @if not math.is-unitless($base) { + $base: strip-units.strip-units($base); } + @return math.div($pxval, $base) * 1rem; } diff --git a/source/_sass/bourbon/functions/_tint-shade.scss b/source/_sass/bourbon/functions/_tint-shade.scss index f717200..a10b80b 100644 --- a/source/_sass/bourbon/functions/_tint-shade.scss +++ b/source/_sass/bourbon/functions/_tint-shade.scss @@ -1,9 +1,11 @@ +@use "sass:color"; + // Add percentage of white to a color @function tint($color, $percent){ - @return mix(white, $color, $percent); + @return color.mix(white, $color, $percent); } // Add percentage of black to a color @function shade($color, $percent){ - @return mix(black, $color, $percent); + @return color.mix(black, $color, $percent); } diff --git a/source/_sass/bourbon/functions/_transition-property-name.scss b/source/_sass/bourbon/functions/_transition-property-name.scss index 54cd422..cd2d92b 100644 --- a/source/_sass/bourbon/functions/_transition-property-name.scss +++ b/source/_sass/bourbon/functions/_transition-property-name.scss @@ -1,3 +1,6 @@ +@use "sass:list"; +@use "sass:string"; + // Return vendor-prefixed property names if appropriate // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background //************************************************************************// @@ -5,7 +8,7 @@ $new-props: (); @each $prop in $props { - $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + $new-props: list.append($new-props, transition-property-name($prop, $vendor), comma); } @return $new-props; @@ -14,7 +17,7 @@ @function transition-property-name($prop, $vendor: false) { // put other properties that need to be prefixed here aswell @if $vendor and $prop == transform { - @return unquote('-'+$vendor+'-'+$prop); + @return string.unquote('-'+$vendor+'-'+$prop); } @else { @return $prop; diff --git a/source/_sass/bourbon/functions/_unpack.scss b/source/_sass/bourbon/functions/_unpack.scss index 3775963..0c2bdec 100644 --- a/source/_sass/bourbon/functions/_unpack.scss +++ b/source/_sass/bourbon/functions/_unpack.scss @@ -1,14 +1,16 @@ // Convert shorthand to the 4-value syntax +@use "sass:list"; + @function unpack($shorthand) { - @if length($shorthand) == 1 { - @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + @if list.length($shorthand) == 1 { + @return list.nth($shorthand, 1) list.nth($shorthand, 1) list.nth($shorthand, 1) list.nth($shorthand, 1); } - @else if length($shorthand) == 2 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + @else if list.length($shorthand) == 2 { + @return list.nth($shorthand, 1) list.nth($shorthand, 2) list.nth($shorthand, 1) list.nth($shorthand, 2); } - @else if length($shorthand) == 3 { - @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + @else if list.length($shorthand) == 3 { + @return list.nth($shorthand, 1) list.nth($shorthand, 2) list.nth($shorthand, 3) list.nth($shorthand, 2); } @else { @return $shorthand; diff --git a/source/_sass/bourbon/helpers/_convert-units.scss b/source/_sass/bourbon/helpers/_convert-units.scss index 3443db3..cc58a76 100644 --- a/source/_sass/bourbon/helpers/_convert-units.scss +++ b/source/_sass/bourbon/helpers/_convert-units.scss @@ -1,15 +1,16 @@ +@use "sass:list"; //************************************************************************// // Helper function for str-to-num fn. // Source: http://sassmeister.com/gist/9647408 //************************************************************************// -@function _convert-units($number, $unit) { +@function convert-units($number, $unit) { $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; - $index: index($strings, $unit); + $index: list.index($strings, $unit); @if not $index { @warn "Unknown unit `#{$unit}`."; @return false; } - @return $number * nth($units, $index); + @return $number * list.nth($units, $index); } diff --git a/source/_sass/bourbon/helpers/_gradient-positions-parser.scss b/source/_sass/bourbon/helpers/_gradient-positions-parser.scss index 07d30b6..010edc6 100644 --- a/source/_sass/bourbon/helpers/_gradient-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_gradient-positions-parser.scss @@ -1,13 +1,17 @@ +@use "linear-positions-parser"; +@use "radial-positions-parser"; +@use "sass:meta"; + @function _gradient-positions-parser($gradient-type, $gradient-positions) { @if $gradient-positions and ($gradient-type == linear) - and (type-of($gradient-positions) != color) { - $gradient-positions: _linear-positions-parser($gradient-positions); + and (meta.type-of($gradient-positions) != color) { + $gradient-positions: linear-positions-parser.linear-positions-parser($gradient-positions); } @else if $gradient-positions and ($gradient-type == radial) - and (type-of($gradient-positions) != color) { - $gradient-positions: _radial-positions-parser($gradient-positions); + and (meta.type-of($gradient-positions) != color) { + $gradient-positions: radial-positions-parser.radial-positions-parser($gradient-positions); } @return $gradient-positions; } diff --git a/source/_sass/bourbon/helpers/_is-num.scss b/source/_sass/bourbon/helpers/_is-num.scss index 71459e1..383bc48 100644 --- a/source/_sass/bourbon/helpers/_is-num.scss +++ b/source/_sass/bourbon/helpers/_is-num.scss @@ -1,8 +1,9 @@ +@use "sass:list"; //************************************************************************// // Helper for linear-gradient-parser //************************************************************************// -@function _is-num($char) { +@function is-num($char) { $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; - $index: index($values, $char); + $index: list.index($values, $char); @return if($index, true, false); } diff --git a/source/_sass/bourbon/helpers/_linear-angle-parser.scss b/source/_sass/bourbon/helpers/_linear-angle-parser.scss index e0401ed..f9d6eae 100644 --- a/source/_sass/bourbon/helpers/_linear-angle-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-angle-parser.scss @@ -1,8 +1,11 @@ +@use "sass:string"; +@use "str-to-num"; + // Private function for linear-gradient-parser -@function _linear-angle-parser($image, $first-val, $prefix, $suffix) { +@function linear-angle-parser($image, $first-val, $prefix, $suffix) { $offset: null; - $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); - $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + $unit-short: string.slice($first-val, string.length($first-val) - 2, string.length($first-val)); + $unit-long: string.slice($first-val, string.length($first-val) - 3, string.length($first-val)); @if ($unit-long == "grad") or ($unit-long == "turn") { @@ -15,7 +18,7 @@ } @if $offset { - $num: _str-to-num($first-val); + $num: str-to-num.str-to-num($first-val); @return ( webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, diff --git a/source/_sass/bourbon/helpers/_linear-gradient-parser.scss b/source/_sass/bourbon/helpers/_linear-gradient-parser.scss index 12bcdcd..3be16a2 100644 --- a/source/_sass/bourbon/helpers/_linear-gradient-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-gradient-parser.scss @@ -1,23 +1,29 @@ -@function _linear-gradient-parser($image) { - $image: unquote($image); +@use "is-num"; +@use "linear-angle-parser"; +@use "linear-positions-parser"; +@use "linear-side-corner-parser"; +@use "sass:string"; + +@function linear-gradient-parser($image) { + $image: string.unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); - $first-val: str-slice($image, $start + 1, $end - 1); + $start: string.index($image, "("); + $end: string.index($image, ","); + $first-val: string.slice($image, $start + 1, $end - 1); - $prefix: str-slice($image, 0, $start); - $suffix: str-slice($image, $end, str-length($image)); + $prefix: string.slice($image, 0, $start); + $suffix: string.slice($image, $end, string.length($image)); - $has-multiple-vals: str-index($first-val, " "); - $has-single-position: unquote(_position-flipper($first-val) + ""); - $has-angle: _is-num(str-slice($first-val, 0, 0)); + $has-multiple-vals: string.index($first-val, " "); + $has-single-position: string.unquote(linear-positions-parser.position-flipper($first-val) + ""); + $has-angle: is-num.is-num(string.slice($first-val, 0, 0)); @if $has-multiple-vals { - $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); + $gradients: linear-side-corner-parser.linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); } @else if $has-single-position != "" { - $pos: unquote($has-single-position + ""); + $pos: string.unquote($has-single-position + ""); $gradients: ( webkit-image: -webkit- + $image, @@ -27,7 +33,7 @@ @else if $has-angle { // Rotate degree for webkit - $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); + $gradients: linear-angle-parser.linear-angle-parser($image, $first-val, $prefix, $suffix); } @else { diff --git a/source/_sass/bourbon/helpers/_linear-positions-parser.scss b/source/_sass/bourbon/helpers/_linear-positions-parser.scss index d26383e..99c8aad 100644 --- a/source/_sass/bourbon/helpers/_linear-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-positions-parser.scss @@ -1,39 +1,43 @@ -@function _linear-positions-parser($pos) { - $type: type-of(nth($pos, 1)); +@use "sass:list"; +@use "sass:meta"; +@use "sass:string"; + +@function linear-positions-parser($pos) { + $type: meta.type-of(list.nth($pos, 1)); $spec: null; $degree: null; $side: null; $corner: null; - $length: length($pos); + $length: list.length($pos); // Parse Side and corner positions @if ($length > 1) { - @if nth($pos, 1) == "to" { // Newer syntax - $side: nth($pos, 2); + @if list.nth($pos, 1) == "to" { // Newer syntax + $side: list.nth($pos, 2); @if $length == 2 { // eg. to top // Swap for backwards compatability - $degree: _position-flipper(nth($pos, 2)); + $degree: position-flipper(list.nth($pos, 2)); } @else if $length == 3 { // eg. to top left - $corner: nth($pos, 3); + $corner: list.nth($pos, 3); } } @else if $length == 2 { // Older syntax ("top left") - $side: _position-flipper(nth($pos, 1)); - $corner: _position-flipper(nth($pos, 2)); + $side: position-flipper(list.nth($pos, 1)); + $corner: position-flipper(list.nth($pos, 2)); } @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + $degree: position-flipper(#{$side}) position-flipper(#{$corner}); } $spec: to $side $corner; } @@ -41,19 +45,19 @@ // Swap for backwards compatability @if $type == string { $degree: $pos; - $spec: to _position-flipper($pos); + $spec: to position-flipper($pos); } @else { $degree: -270 - $pos; //rotate the gradient opposite from spec $spec: $pos; } } - $degree: unquote($degree + ","); - $spec: unquote($spec + ","); + $degree: string.unquote($degree + ","); + $spec: string.unquote($spec + ","); @return $degree $spec; } -@function _position-flipper($pos) { +@function position-flipper($pos) { @return if($pos == left, right, null) if($pos == right, left, null) if($pos == top, bottom, null) diff --git a/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss b/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss index 86ad88f..8a555c4 100644 --- a/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss +++ b/source/_sass/bourbon/helpers/_linear-side-corner-parser.scss @@ -1,17 +1,20 @@ +@use "linear-positions-parser"; +@use "sass:string"; + // Private function for linear-gradient-parser -@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { - $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); - $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); +@function linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { + $val-1: string.slice($first-val, 0, $has-multiple-vals - 1 ); + $val-2: string.slice($first-val, $has-multiple-vals + 1, string.length($first-val)); $val-3: null; - $has-val-3: str-index($val-2, " "); + $has-val-3: string.index($val-2, " "); @if $has-val-3 { - $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); - $val-2: str-slice($val-2, 0, $has-val-3 - 1); + $val-3: string.slice($val-2, $has-val-3 + 1, string.length($val-2)); + $val-2: string.slice($val-2, 0, $has-val-3 - 1); } - $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); - $pos: unquote($pos + ""); + $pos: linear-positions-parser.position-flipper($val-1) linear-positions-parser.position-flipper($val-2) linear-positions-parser.position-flipper($val-3); + $pos: string.unquote($pos + ""); // Use old spec for webkit @if $val-1 == "to" { diff --git a/source/_sass/bourbon/helpers/_radial-arg-parser.scss b/source/_sass/bourbon/helpers/_radial-arg-parser.scss index a3a3704..471ef28 100644 --- a/source/_sass/bourbon/helpers/_radial-arg-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-arg-parser.scss @@ -1,25 +1,28 @@ -@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { +@use "sass:list"; +@use "sass:meta"; + +@function radial-arg-parser($G1, $G2, $pos, $shape-size) { @each $value in $G1, $G2 { - $first-val: nth($value, 1); - $pos-type: type-of($first-val); + $first-val: list.nth($value, 1); + $pos-type: meta.type-of($first-val); $spec-at-index: null; // Determine if spec was passed to mixin - @if type-of($value) == list { - $spec-at-index: if(index($value, at), index($value, at), false); + @if meta.type-of($value) == list { + $spec-at-index: if(list.index($value, at), list.index($value, at), false); } @if $spec-at-index { @if $spec-at-index > 1 { @for $i from 1 through ($spec-at-index - 1) { - $shape-size: $shape-size nth($value, $i); + $shape-size: $shape-size list.nth($value, $i); } - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); + @for $i from ($spec-at-index + 1) through list.length($value) { + $pos: $pos list.nth($value, $i); } } @else if $spec-at-index == 1 { - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); + @for $i from ($spec-at-index + 1) through list.length($value) { + $pos: $pos list.nth($value, $i); } } $G1: null; diff --git a/source/_sass/bourbon/helpers/_radial-gradient-parser.scss b/source/_sass/bourbon/helpers/_radial-gradient-parser.scss index 6dde50f..32c652e 100644 --- a/source/_sass/bourbon/helpers/_radial-gradient-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-gradient-parser.scss @@ -1,19 +1,22 @@ -@function _radial-gradient-parser($image) { - $image: unquote($image); +@use "sass:list"; +@use "sass:string"; + +@function radial-gradient-parser($image) { + $image: string.unquote($image); $gradients: (); - $start: str-index($image, "("); - $end: str-index($image, ","); - $first-val: str-slice($image, $start + 1, $end - 1); + $start: string.index($image, "("); + $end: string.index($image, ","); + $first-val: string.slice($image, $start + 1, $end - 1); - $prefix: str-slice($image, 0, $start); - $suffix: str-slice($image, $end, str-length($image)); + $prefix: string.slice($image, 0, $start); + $suffix: string.slice($image, $end, string.length($image)); - $is-spec-syntax: str-index($first-val, "at"); + $is-spec-syntax: string.index($first-val, "at"); @if $is-spec-syntax and $is-spec-syntax > 1 { - $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); - $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); - $pos: append($pos, $keyword, comma); + $keyword: string.slice($first-val, 1, $is-spec-syntax - 2); + $pos: string.slice($first-val, $is-spec-syntax + 3, string.length($first-val)); + $pos: list.append($pos, $keyword, comma); $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, @@ -22,7 +25,7 @@ } @else if $is-spec-syntax == 1 { - $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + $pos: string.slice($first-val, $is-spec-syntax + 3, string.length($first-val)); $gradients: ( webkit-image: -webkit- + $prefix + $pos + $suffix, @@ -30,7 +33,7 @@ ) } - @else if str-index($image, "cover") or str-index($image, "contain") { + @else if string.index($image, "cover") or string.index($image, "contain") { @warn "Radial-gradient needs to be updated to conform to latest spec."; $gradients: ( diff --git a/source/_sass/bourbon/helpers/_radial-positions-parser.scss b/source/_sass/bourbon/helpers/_radial-positions-parser.scss index 6a5b477..6ff82cb 100644 --- a/source/_sass/bourbon/helpers/_radial-positions-parser.scss +++ b/source/_sass/bourbon/helpers/_radial-positions-parser.scss @@ -1,10 +1,14 @@ -@function _radial-positions-parser($gradient-pos) { - $shape-size: nth($gradient-pos, 1); - $pos: nth($gradient-pos, 2); - $shape-size-spec: _shape-size-stripper($shape-size); +@use "sass:list"; +@use "sass:string"; +@use "shape-size-stripper"; - $pre-spec: unquote(if($pos, "#{$pos}, ", null)) - unquote(if($shape-size, "#{$shape-size},", null)); +@function radial-positions-parser($gradient-pos) { + $shape-size: list.nth($gradient-pos, 1); + $pos: list.nth($gradient-pos, 2); + $shape-size-spec: shape-size-stripper.shape-size-stripper($shape-size); + + $pre-spec: string.unquote(if($pos, "#{$pos}, ", null)) + string.unquote(if($shape-size, "#{$shape-size},", null)); $pos-spec: if($pos, "at #{$pos}", null); $spec: "#{$shape-size-spec} #{$pos-spec}"; diff --git a/source/_sass/bourbon/helpers/_render-gradients.scss b/source/_sass/bourbon/helpers/_render-gradients.scss index 5765676..9cd554b 100644 --- a/source/_sass/bourbon/helpers/_render-gradients.scss +++ b/source/_sass/bourbon/helpers/_render-gradients.scss @@ -1,18 +1,21 @@ // User for linear and radial gradients within background-image or border-image properties +@use "sass:list"; +@use "sass:string"; + @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { $pre-spec: null; $spec: null; $vendor-gradients: null; @if $gradient-type == linear { @if $gradient-positions { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $pre-spec: list.nth($gradient-positions, 1); + $spec: list.nth($gradient-positions, 2); } } @else if $gradient-type == radial { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); + $pre-spec: list.nth($gradient-positions, 1); + $spec: list.nth($gradient-positions, 2); } @if $vendor { @@ -20,7 +23,7 @@ } @else if $vendor == false { $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; - $vendor-gradients: unquote($vendor-gradients); + $vendor-gradients: string.unquote($vendor-gradients); } @return $vendor-gradients; } diff --git a/source/_sass/bourbon/helpers/_shape-size-stripper.scss b/source/_sass/bourbon/helpers/_shape-size-stripper.scss index ee5eda4..6282f89 100644 --- a/source/_sass/bourbon/helpers/_shape-size-stripper.scss +++ b/source/_sass/bourbon/helpers/_shape-size-stripper.scss @@ -1,4 +1,4 @@ -@function _shape-size-stripper($shape-size) { +@function shape-size-stripper($shape-size) { $shape-size-spec: null; @each $value in $shape-size { @if ($value == "cover") or ($value == "contain") { diff --git a/source/_sass/bourbon/helpers/_str-to-num.scss b/source/_sass/bourbon/helpers/_str-to-num.scss index 526d1d0..d25b8a5 100644 --- a/source/_sass/bourbon/helpers/_str-to-num.scss +++ b/source/_sass/bourbon/helpers/_str-to-num.scss @@ -2,12 +2,16 @@ // Helper function for linear/radial-gradient-parsers. // Source: http://sassmeister.com/gist/9647408 //************************************************************************// + +@use "convert-units"; +@use "sass:list"; @use "sass:math"; +@use "sass:string"; @function _str-to-num($string) { // Matrices $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; - $numbers: 0 1 2 3 4 5 6 7 8 9; + $numbers: 0 1 2 3 4 5 6 7 8 9; // Result $result: 0; @@ -15,27 +19,27 @@ $minus: false; // Looping through all characters - @for $i from 1 through str-length($string) { - $character: str-slice($string, $i, $i); - $index: index($strings, $character); + @for $i from 1 through string.length($string) { + $character: string.slice($string, $i, $i); + $index: list.index($strings, $character); - @if $character == '-' { + @if $character =='-' { $minus: true; } - @else if $character == '.' { + @else if $character =='.' { $divider: 1; } @else { @if not $index { $result: if($minus, $result * -1, $result); - @return _convert-units($result, str-slice($string, $i)); + @return convert-units.convert-units($result, string.slice($string, $i)); } - $number: nth($numbers, $index); + $number: list.nth($numbers, $index); - @if $divider == 0 { + @if $divider ==0 { $result: $result * 10; } @@ -48,5 +52,6 @@ $result: $result + $number; } } + @return if($minus, $result * -1, $result); } diff --git a/source/_sass/colors.scss b/source/_sass/colors.scss index 49efc21..633bf3c 100644 --- a/source/_sass/colors.scss +++ b/source/_sass/colors.scss @@ -90,10 +90,10 @@ $color-blog: $orange-02; $color-examples: #2c67ce; $modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started', - 'sdk', 'appstore', 'blog'; + 'sdk', 'appstore', 'blog'; $modifier-colors: $color-guides, $color-docs, $color-community, $color-more, - $color-getting-started, $color-sdk, $color-appstore, - $color-blog; + $color-getting-started, $color-sdk, $color-appstore, + $color-blog; $modifier-colors-fg: $white $white $white $white $white $white $white $white; diff --git a/source/_sass/elements/alert.scss b/source/_sass/elements/alert.scss index c9f14c3..4eacbc7 100644 --- a/source/_sass/elements/alert.scss +++ b/source/_sass/elements/alert.scss @@ -14,11 +14,13 @@ * limitations under the License. */ -@use 'sass:list'; +@use "../base/lists"; +@use "../colors"; +@use "sass:list"; .alert { background-color: #ddd; - color: $white; + color: colors.$white; margin-bottom: 1em; padding: 0.5em; @@ -50,8 +52,8 @@ padding: 0.7em; } -$alert-colors: $white $green $blue $red $purple $yellow $orange $lightblue $dark-red $color-blog; -$alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog'; +$alert-colors: colors.$white colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$color-blog; +$alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog'; @each $color in $alert-colors { $i: list.index($alert-colors, $color); @@ -71,11 +73,11 @@ $alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'l } .alert--error { - background-color: $dark-red; + background-color: colors.$dark-red; color: #fff; } .alert--success { - background-color: $green; + background-color: colors.$green; color: #fff; } diff --git a/source/_sass/elements/bigbox.scss b/source/_sass/elements/bigbox.scss index 763facc..643d574 100644 --- a/source/_sass/elements/bigbox.scss +++ b/source/_sass/elements/bigbox.scss @@ -14,6 +14,10 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; +@use "../responsive/utilities/variables" as utilities-variables; + .bigbox { text-align: center; padding: 2em; @@ -21,7 +25,7 @@ position: relative; p { - font-size: 1.2 * $base-font-size; + font-size: 1.2 * utilities-variables.$base-font-size; } h2, @@ -30,7 +34,7 @@ font-weight: 600; a { - color: $base-font-color; + color: variables.$base-font-color; &:hover { text-decoration: underline; @@ -58,56 +62,56 @@ } .bigbox--lightblue { - background-color: $lightblue; - color: $white; + background-color: colors.$lightblue; + color: colors.$white; } .bigbox--blue { - background-color: $bigbox--blue; - color: $white; + background-color: colors.$bigbox--blue; + color: colors.$white; } .bigbox--dark-blue { - background-color: $bigbox--blue; - color: $white; + background-color: colors.$bigbox--blue; + color: colors.$white; } .bigbox--green { - background-color: $bigbox--green; - color: $white; + background-color: colors.$bigbox--green; + color: colors.$white; } .bigbox--dark-green { - background-color: $bigbox--darkgreen; - color: $white; + background-color: colors.$bigbox--darkgreen; + color: colors.$white; } .bigbox--orange { - background-color: $orange; - color: $white; + background-color: colors.$orange; + color: colors.$white; } .bigbox--red { - background-color: $red; - color: $white; + background-color: colors.$red; + color: colors.$white; } .bigbox--dark-red { - background-color: $dark-red; - color: $white; + background-color: colors.$dark-red; + color: colors.$white; } .bigbox--lightgray { - background-color: $gray-04; + background-color: colors.$gray-04; } .bigbox--gray { - background-color: $gray-05; + background-color: colors.$gray-05; } .bigbox--darkgray { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; } @@ -118,8 +122,8 @@ } .bigbox--android { - color: $white; - background-color: $android-green; + color: colors.$white; + background-color: colors.$android-green; i { font-size: 6em; @@ -129,8 +133,8 @@ .bigbox--ios { - color: $black; - background-color: $white; + color: colors.$black; + background-color: colors.$white; i { font-size: 6em; @@ -143,12 +147,12 @@ top: 0; left: 0; right: 0; - background-color: $green; - color: $white; + background-color: colors.$green; + color: colors.$white; padding: 0.50rem; &:hover { - color: $white; + color: colors.$white; text-decoration: underline; } } @@ -164,25 +168,25 @@ } .bigbox__guides-beautiful { - background-color: $blue; - color: $breakfast-room-white; + background-color: colors.$blue; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/first_time_bg.png'); } .bigbox__guides-building { - background-color: $gray-02; - color: $breakfast-room-white; + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/back_for_more_bg.png'); } .bigbox__guides-publishing { - background-color: $blue; - color: $breakfast-room-white; + background-color: colors.$blue; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/meta_bg.png'); } .bigbox__guides-interactive { - background-color: $gray-02; - color: $breakfast-room-white; + background-color: colors.$gray-02; + color: colors.$breakfast-room-white; background-image: url('/assets/images/landing-page/interactive_bg.png'); } diff --git a/source/_sass/elements/buttons.scss b/source/_sass/elements/buttons.scss index 167e648..8e033ab 100644 --- a/source/_sass/elements/buttons.scss +++ b/source/_sass/elements/buttons.scss @@ -14,13 +14,14 @@ * limitations under the License. */ -@use 'sass:color'; -@use 'sass:list'; +@use "../colors"; +@use "sass:color"; +@use "sass:list"; .btn { - background-color: $white; + background-color: colors.$white; border-radius: 4px; - color: $darker-grey; + color: colors.$darker-grey; font-weight: 700; padding: 0.5em 2em; text-transform: uppercase; @@ -28,7 +29,7 @@ text-align: center; &:hover { - color: $darker-grey; + color: colors.$darker-grey; } } @@ -38,8 +39,8 @@ submit.btn { font-size: inherit; } -$btn-colors: $white $gray-02 $green $blue $red $purple $yellow $orange $lightblue $dark-red $orange-02 $android-green; -$btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'orange-02' 'android-green'; +$btn-colors: colors.$white colors.$gray-02 colors.$green colors.$blue colors.$red colors.$purple colors.$yellow colors.$orange colors.$lightblue colors.$dark-red colors.$orange-02 colors.$android-green; +$btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'orange-02' 'android-green'; @each $color in $btn-colors { $i: list.index($btn-colors, $color); @@ -68,42 +69,42 @@ $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orang // Generate a pair of button classes for each section (original and alternate). // This should be used when adding buttons in each section, in case we change // the colours in the future. -@each $color in $modifier-colors { - $i: list.index($modifier-colors, $color); +@each $color in colors.$modifier-colors { + $i: list.index(colors.$modifier-colors, $color); - .btn--#{list.nth($modifier-color-names, $i)} { + .btn--#{list.nth(colors.$modifier-color-names, $i)} { background-color: $color; - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); &:hover, &:focus { - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); background-color: color.adjust($color, $lightness: -10%, $space: hsl); } a { - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); } } - .btn--#{list.nth($modifier-color-names, $i)}--alt { + .btn--#{list.nth(colors.$modifier-color-names, $i)}--alt { background-color: color.complement($color); - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); &:hover, &:focus { - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); background-color: color.adjust(color.complement($color), $lightness: -10%, $space: hsl); } a { - color: list.nth($modifier-colors-fg, $i); + color: list.nth(colors.$modifier-colors-fg, $i); } } } -.btn + .btn { +.btn+.btn { margin-left: 1em; } @@ -127,6 +128,6 @@ $btn-names: 'white' gray-02 'green' 'blue' 'red' 'purple' 'yellow' 'orang } .btn--ios { - color: $white; - background-color: $black; + color: colors.$white; + background-color: colors.$black; } diff --git a/source/_sass/elements/form.scss b/source/_sass/elements/form.scss index 45e8fd3..06227d3 100644 --- a/source/_sass/elements/form.scss +++ b/source/_sass/elements/form.scss @@ -14,7 +14,9 @@ * limitations under the License. */ -@use 'sass:color'; +@use "../base/variables"; +@use "../colors"; +@use "sass:color"; .form__group { display: table; @@ -25,12 +27,12 @@ select, textarea { background-color: white; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-left: none; border-radius: 0 5px 5px 0; - color: $gray-02; + color: colors.$gray-02; display: table-cell; - font-family: $sans-serif; + font-family: variables.$sans-serif; font-size: 15px; margin: 0; padding: 7px; @@ -59,11 +61,11 @@ .select-style { background-color: white; border-radius: 0 5px 5px 0; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-left-width: 0; color: color.adjust(#444, $alpha: -0.5); display: table-cell; - font-family: $sans-serif; + font-family: variables.$sans-serif; font-size: 15px; margin: 0; overflow: hidden; @@ -92,7 +94,7 @@ label { background-color: #fff; - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; border-right: none; border-radius: 5px 0 0 5px; color: #111; @@ -107,8 +109,8 @@ } input.mce_inline_error { - background-color: color.adjust($dark-red, $lightness: 40%, $space: hsl); - border: 1px solid $dark-red; + background-color: color.adjust(colors.$dark-red, $lightness: 40%, $space: hsl); + border: 1px solid colors.$dark-red; } } diff --git a/source/_sass/elements/full-height.scss b/source/_sass/elements/full-height.scss index 89e1ed5..2052cdc 100644 --- a/source/_sass/elements/full-height.scss +++ b/source/_sass/elements/full-height.scss @@ -14,29 +14,31 @@ * limitations under the License. */ +@use "../responsive/utilities/mixins/breakpoints"; + .full-height { height: 100%; } -@include bp(xs) { +@include breakpoints.bp(xs) { .full-height--xs { height: 100%; } } -@include bp(s) { +@include breakpoints.bp(s) { .full-height--s { height: 100%; } } -@include bp(m) { +@include breakpoints.bp(m) { .full-height--m { height: 100%; } } -@include bp(l) { +@include breakpoints.bp(l) { .full-height--l { height: 100%; } diff --git a/source/_sass/elements/gray-box.scss b/source/_sass/elements/gray-box.scss index 598dd3b..91965aa 100644 --- a/source/_sass/elements/gray-box.scss +++ b/source/_sass/elements/gray-box.scss @@ -14,9 +14,12 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; + .gray-box { - background-color: $gray-04; - border-radius: $base-border-radius; + background-color: colors.$gray-04; + border-radius: variables.$base-border-radius; margin-bottom: 1em; overflow-x: hidden; padding: 1em; @@ -38,7 +41,7 @@ } h3 { - color: $gray-02; + color: colors.$gray-02; font-size: 1.3em; font-weight: 600; text-transform: uppercase; @@ -46,7 +49,7 @@ a, a:hover, a:active { - color: $gray-02; + color: colors.$gray-02; } a:hover, @@ -61,8 +64,8 @@ } .white-box { - background-color: $white; - border-radius: $base-border-radius; + background-color: colors.$white; + border-radius: variables.$base-border-radius; margin-bottom: 1em; padding: 0.5em; } diff --git a/source/_sass/elements/highlight.scss b/source/_sass/elements/highlight.scss index 8ac17b9..f121f87 100644 --- a/source/_sass/elements/highlight.scss +++ b/source/_sass/elements/highlight.scss @@ -1,3 +1,8 @@ +@use "../base/variables"; +@use "../bourbon/addons/font-family"; +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; + /** * Copyright 2025 Google LLC * @@ -15,15 +20,15 @@ */ .highlight { - background-color: $gray-07; - border-radius: $base-border-radius; + background-color: colors.$gray-07; + border-radius: variables.$base-border-radius; color: #f8f8f2; - font: 13px/1.3em $monospace; + font: 13px/1.3em font-family.$monospace; margin: 0 0 0.75em; padding: 10px; position: relative; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { font-size: 12px; } @@ -38,9 +43,9 @@ } .code-copy-link { - background-color: $turquoise; - border-radius: $base-border-radius; - color: $white; + background-color: colors.$turquoise; + border-radius: variables.$base-border-radius; + color: colors.$white; opacity: 0.1; padding: 0.3em 0.3em 0.3em 0.35em; position: absolute; @@ -293,5 +298,5 @@ } .highlight--large { - font: 15px/1.3em $monospace; + font: 15px/1.3em font-family.$monospace; } diff --git a/source/_sass/elements/inline-list.scss b/source/_sass/elements/inline-list.scss index 22b976f..d313441 100644 --- a/source/_sass/elements/inline-list.scss +++ b/source/_sass/elements/inline-list.scss @@ -14,7 +14,10 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; @use "sass:color"; + @charset "UTF-8"; ul.inline-list { @@ -31,7 +34,7 @@ ul.inline-list { } .inline-list--piped li::after { - color: color.adjust($base-font-color, $lightness: 30%, $space: hsl); + color: color.adjust(variables.$base-font-color, $lightness: 30%, $space: hsl); content: ' | '; display: inline; } @@ -41,7 +44,7 @@ ul.inline-list { } .inline-list--dashed li::after { - color: color.adjust($base-font-color, $lightness: 40%, $space: hsl); + color: color.adjust(variables.$base-font-color, $lightness: 40%, $space: hsl); content: ' — '; display: inline; } @@ -55,7 +58,7 @@ ul.inline-list { li { background-color: #444; border-radius: 2px; - color: $white; + color: colors.$white; display: inline-block; font-size: 0.65em; font-weight: bold; diff --git a/source/_sass/elements/markdown.scss b/source/_sass/elements/markdown.scss index 2be9a09..bb1c6ce 100644 --- a/source/_sass/elements/markdown.scss +++ b/source/_sass/elements/markdown.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../base/lists"; +@use "../colors"; @use "sass:color"; .markdown { @@ -26,11 +28,11 @@ @extend %default-ol; } - $table-border-color: $gray-06; + $table-border-color: colors.$gray-06; $table-border: 1px solid $table-border-color; - $table-background: $white; - $table-header-background: $gray-02; - $table-header-color: $white; + $table-background: colors.$white; + $table-header-background: colors.$gray-02; + $table-header-color: colors.$white; $table-hover-color: color.adjust($table-background, $lightness: -5%, $space: hsl); $table-stripe-color: color.adjust($table-background, $lightness: -4%, $space: hsl); $table-stripe-color-hover: color.adjust($table-stripe-color, $lightness: -5%, $space: hsl); @@ -55,15 +57,15 @@ padding: $table-padding; } - tr:hover > td, - tr:hover > th { + tr:hover>td, + tr:hover>th { background-color: $table-hover-color; } tr:nth-child(even) { background-color: $table-stripe-color; - &:hover > td { + &:hover>td { background-color: $table-stripe-color-hover; } } diff --git a/source/_sass/elements/mobile-nav.scss b/source/_sass/elements/mobile-nav.scss index d0f9ed7..8e2b5a4 100644 --- a/source/_sass/elements/mobile-nav.scss +++ b/source/_sass/elements/mobile-nav.scss @@ -14,18 +14,22 @@ * limitations under the License. */ +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables"; @use "sass:color"; @use "sass:math"; -$hamburger-width: $header-height; +$hamburger-width: header.$header-height; .mobile-nav { - background-color: $gray-03; + background-color: colors.$gray-03; bottom: 0; left: 0; overflow-y: auto; position: fixed; - top: $header-height; + top: header.$header-height; width: 90%; z-index: 200; @@ -45,36 +49,36 @@ $hamburger-width: $header-height; text-transform: uppercase; &:hover { - background-color: color.adjust($gray-03, $lightness: 10%, $space: hsl); + background-color: color.adjust(colors.$gray-03, $lightness: 10%, $space: hsl); } } .mainmenu__item.active a { - background-color: $gray-06; - color: $gray-03; + background-color: colors.$gray-06; + color: colors.$gray-03; } } .mobile-nav__hamburger { display: none; - @include bp-max (xs) { - border-bottom: 1px solid $gray-10; + @include breakpoints.bp-max (xs) { + border-bottom: 1px solid colors.$gray-10; display: block; position: fixed; - background-color: $white; + background-color: colors.$white; left: 0; width: $hamburger-width; top: 0; - height: $header-height; - padding: math.div($base-font-size, 1.5) 0; - font-size: $base-font-size * 2; + height: header.$header-height; + padding: math.div(variables.$base-font-size, 1.5) 0; + font-size: variables.$base-font-size * 2; text-align: center; - color: $gray-03; + color: colors.$gray-03; &:hover, &:active { - color: $gray-03; + color: colors.$gray-03; } } } @@ -84,33 +88,33 @@ $hamburger-width: $header-height; } .mobile-nav--tutorials { - border-left: 5px solid $color-getting-started; + border-left: 5px solid colors.$color-getting-started; } .mobile-nav--sdk { - border-left: 5px solid $color-sdk; + border-left: 5px solid colors.$color-sdk; } .mobile-nav--guides { - border-left: 5px solid $color-guides; + border-left: 5px solid colors.$color-guides; } .mobile-nav--docs { - border-left: 5px solid $color-docs; + border-left: 5px solid colors.$color-docs; } .mobile-nav--examples { - border-left: 5px solid $color-examples; + border-left: 5px solid colors.$color-examples; } .mobile-nav--community { - border-left: 5px solid $color-community; + border-left: 5px solid colors.$color-community; } .mobile-nav--blog { - border-left: 5px solid $color-blog; + border-left: 5px solid colors.$color-blog; } .mobile-nav--more { - border-left: 5px solid $color-more; + border-left: 5px solid colors.$color-more; } diff --git a/source/_sass/elements/pagination.scss b/source/_sass/elements/pagination.scss index e14a4dc..6378cb5 100644 --- a/source/_sass/elements/pagination.scss +++ b/source/_sass/elements/pagination.scss @@ -14,6 +14,9 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; + .pagination { margin: 0.5rem 0; @@ -22,23 +25,23 @@ } a { - border: 1px solid $gray-08; - border-radius: $base-border-radius; - color: $gray-02; + border: 1px solid colors.$gray-08; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; display: block; padding: 0.5rem 1rem; &:hover { // background-color: lighten($base-link-color, 20); - border-color: $base-link-color; - color: $base-link-color; + border-color: variables.$base-link-color; + color: variables.$base-link-color; } } .active a { - background-color: $base-link-color; - color: $white; + background-color: variables.$base-link-color; + color: colors.$white; font-weight: bold; - border-color: $base-link-color; + border-color: variables.$base-link-color; } } diff --git a/source/_sass/elements/platform-choice.scss b/source/_sass/elements/platform-choice.scss index 088b0c8..f4a6cb1 100644 --- a/source/_sass/elements/platform-choice.scss +++ b/source/_sass/elements/platform-choice.scss @@ -14,9 +14,12 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; + .platform-choice { padding: 0.5em; - border-radius: $base-border-radius; + border-radius: variables.$base-border-radius; } .platform-choice--large { @@ -33,7 +36,7 @@ img { display: block; float: left; - height: $unitless-line-height * 1em; + height: variables.$unitless-line-height * 1em; margin-right: 0.5em; } @@ -63,7 +66,7 @@ } h4 { - color: $white; + color: colors.$white; font-size: 0.9em; margin: 0.5em 0 0; text-align: center; diff --git a/source/_sass/elements/ribbon.scss b/source/_sass/elements/ribbon.scss index dc6074a..5b2e484 100644 --- a/source/_sass/elements/ribbon.scss +++ b/source/_sass/elements/ribbon.scss @@ -14,9 +14,12 @@ * limitations under the License. */ +@use "../bourbon/css3/transform"; +@use "../colors"; + .ribbon { - @include transform(rotate(45deg)); - background-color: $pebble-green; + @include transform.transform(rotate(45deg)); + background-color: colors.$pebble-green; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); color: #fff; font-size: 19px; @@ -44,22 +47,22 @@ } .ribbon--bg-white { - background-color: $white; + background-color: colors.$white; } .ribbon--fg-dark-grey { - color: $dark-grey; + color: colors.$dark-grey; } .ribbon--bg-dark-red { - background-color: $dark-red; + background-color: colors.$dark-red; } .ribbon--fg-dark-red { - color: $dark-red; + color: colors.$dark-red; } .ribbon--fg-white { - color: $white; + color: colors.$white; } diff --git a/source/_sass/elements/screenshot.scss b/source/_sass/elements/screenshot.scss index 4a9ef43..ac14c81 100644 --- a/source/_sass/elements/screenshot.scss +++ b/source/_sass/elements/screenshot.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../colors"; + .pebble-screenshot { background-repeat: no-repeat; display: inline-block; @@ -265,8 +267,8 @@ -webkit-align-items: flex-end; h4 { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; font-weight: normal; text-transform: uppercase; font-size: 1.2em; @@ -286,14 +288,14 @@ .screenshot-viewer--tabbed { .screenshot-viewer__tabs { h4 { - border: 2px solid $gray-02; - background-color: $gray-06; - color: $gray-02; + border: 2px solid colors.$gray-02; + background-color: colors.$gray-06; + color: colors.$gray-02; cursor: pointer; &.selected { - background-color: $gray-02; - color: $white; + background-color: colors.$gray-02; + color: colors.$white; } } } diff --git a/source/_sass/elements/search.scss b/source/_sass/elements/search.scss index da7b1ff..1ae36b6 100644 --- a/source/_sass/elements/search.scss +++ b/source/_sass/elements/search.scss @@ -14,34 +14,47 @@ * limitations under the License. */ +@use "mobile-nav"; +@use "sectionmenu"; +@use "sidebar"; + +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; @use "sass:math"; +// THIS IS A HACK I DON'T KNOW HOW TO FIX IT PROPERLY +$font-size: 15px; + + .search { - background-color: $white; - border-bottom: 1px solid $gray-10; - height: $header-height; - left: $sidebar-width; - padding: math.div($base-font-size, 1.2); + background-color: colors.$white; + border-bottom: 1px solid colors.$gray-10; + height: header.$header-height; + left: sidebar.$sidebar-width; + padding: math.div(variables.$base-font-size, 1.2); position: fixed; right: 0; top: 0; z-index: 100; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; - padding-left: $hamburger-width; + padding-left: mobile-nav.$hamburger-width; } input { -webkit-appearance: textfield; border: 0; box-shadow: none; - font-size: $base-font-size * 1.2; - padding: $base-font-size * 0.5; + font-size: variables.$base-font-size * 1.2; + padding: variables.$base-font-size * 0.5; padding-left: 2em; width: 100%; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { padding-left: 0; } @@ -58,28 +71,28 @@ } .search__icon { - font-size: $base-font-size * 1.2; - left: math.div($base-font-size, 0.6); + font-size: variables.$base-font-size * 1.2; + left: math.div(variables.$base-font-size, 0.6); position: absolute; - top: math.div($base-font-size, 0.6); + top: math.div(variables.$base-font-size, 0.6); - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { display: none; } } .content--narrow .search { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu .search { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } @@ -88,20 +101,20 @@ background-color: #fff; border-bottom: 1px solid #d9d9d9; bottom: 10%; - left: $sidebar-width; + left: sidebar.$sidebar-width; overflow-y: scroll; padding: 0 1em 1em; position: fixed; right: 0; - top: $header-height - 2; + top: header.$header-height - 2; z-index: 200; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } h3 { - font-size: 1.2 * $base-font-size; + font-size: 1.2 * $font-size; margin: 0.5em 0; text-transform: uppercase; } @@ -113,54 +126,54 @@ .quicksearch__block { h3 { - color: $white; + color: colors.$white; padding: 0 0.25rem; } } .quicksearch__block--guides { h3 { - background-color: $color-guides; - color: $base-font-color; + background-color: colors.$color-guides; + color: variables.$base-font-color; } } .quicksearch__block--docs { h3 { - background-color: $color-docs; + background-color: colors.$color-docs; } } .quicksearch__block--community { h3 { - background-color: $color-community; + background-color: colors.$color-community; } } -.quicksearch__block--more{ +.quicksearch__block--more { h3 { - background-color: $color-more; + background-color: colors.$color-more; } } .quicksearch__block--other { h3 { - background-color: $color-other; + background-color: colors.$color-other; } } .quicksearch__result { - margin-bottom: 0.5 * $base-font-size; + margin-bottom: 0.5 * $font-size; overflow: hidden; text-overflow: ellipsis; } .quicksearch__summary { - font-size: 0.9 * $base-font-size; - line-height: 0.9 * $base-line-height; + font-size: 0.9 * $font-size; + line-height: 0.9 * utilities-variables.$base-line-height; margin: 0; - max-height: 0.9 * $base-line-height; + max-height: 0.9 * utilities-variables.$base-line-height; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -171,7 +184,7 @@ } .quicksearch__result__tag { - background-color: $color-docs; + background-color: colors.$color-docs; border-radius: 2px; color: #fff; display: inline-block; @@ -185,16 +198,16 @@ margin: 0; font-size: 0.75em; text-transform: uppercase; - color: $gray-11; + color: colors.$gray-11; font-weight: bold; width: auto; display: table; } .quicksearch__result--active { - background-color: $gray-01; - border-left: 2px solid $gray-03; - border-right: 2px solid $gray-03; + background-color: colors.$gray-01; + border-left: 2px solid colors.$gray-03; + border-right: 2px solid colors.$gray-03; margin: -5px -5px 2.5px; padding: 5px; } @@ -204,21 +217,21 @@ font-weight: 300; text-align: center; padding: 1em; - color: $gray-09; + color: colors.$gray-09; } .content--narrow .quicksearch { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu .quicksearch { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } @@ -226,25 +239,25 @@ #search__blackout { background-color: rgba(0, 0, 0, 0.7); bottom: 0; - left: $sidebar-width; + left: sidebar.$sidebar-width; position: fixed; right: 0; - top: $header-height; + top: header.$header-height; z-index: 150; } .content--narrow #search__blackout { - left: $sidebar--wide-width; + left: sidebar.$sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } .content--section-menu #search__blackout { - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; } } diff --git a/source/_sass/elements/sectionmenu.scss b/source/_sass/elements/sectionmenu.scss index b781933..6ef238f 100644 --- a/source/_sass/elements/sectionmenu.scss +++ b/source/_sass/elements/sectionmenu.scss @@ -14,64 +14,70 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; @use "sass:color"; @use "sass:math"; +@use "sidebar"; $section-menu-width: 240px; .sidebar__wrapper--sectionmenu { - width: $sidebar-width + $section-menu-width; + width: sidebar.$sidebar-width + $section-menu-width; } .section-menu { - border-right: 1px solid $gray-08; + border-right: 1px solid colors.$gray-08; bottom: 0; - left: $sidebar-width; - margin-top: $header-height; + left: sidebar.$sidebar-width; + margin-top: header.$header-height; position: absolute; top: 0; width: $section-menu-width; overflow-y: auto; - > ul { + >ul { padding: 1em; } - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { display: none; } } .content--section-menu { - margin-left: $sidebar-width + $section-menu-width; + padding-left: $section-menu-width; - @include bp-max ($sidebar-hide-at) { - margin-left: 0; + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { + padding-left: 0; } } .section-menu__header { - height: $header-height; + height: header.$header-height; padding: 0 1em; position: fixed; top: 0; width: $section-menu-width; h3 { - border-bottom: 1px solid rgba(68,68,68,0.2); - font-size: $base-font-size * 1.2; + border-bottom: 1px solid rgba(68, 68, 68, 0.2); + font-size: utilities-variables.$base-font-size * 1.2; font-weight: 400; margin-top: 3px; - padding: math.div($base-line-height, 1.2) 0; + padding: math.div(variables.$base-line-height, 1.2) 0; text-transform: uppercase; width: 100%; } } .documentation-menu { - background-color: $color-docs; + background-color: colors.$color-docs; border-bottom: 1px solid rgba(68, 68, 68, 0.3); - border-right: 1px solid color.adjust($color-docs, $lightness: -10%, $space: hsl); + border-right: 1px solid color.adjust(colors.$color-docs, $lightness: -10%, $space: hsl); box-shadow: rgba(68, 68, 68, 0.3) 0 5px 5px -5px; display: none; margin: -1em; @@ -81,7 +87,7 @@ $section-menu-width: 240px; padding: 0.5em 1em; &:hover { - background-color: color.adjust($color-docs, $lightness: -5%, $space: hsl); + background-color: color.adjust(colors.$color-docs, $lightness: -5%, $space: hsl); } } } @@ -96,28 +102,28 @@ $section-menu-width: 240px; .section-menu__item { - > a { - color: $gray-02; + >a { + color: colors.$gray-02; display: inline-block; font-size: 13px; font-weight: bold; - margin: $base-line-height * 0.25 0; + margin: variables.$base-line-height * 0.25 0; padding: 0.5em; } - > ul { + >ul { display: none; } - &.open > ul { + &.open>ul { display: block; } } .section-menu__subitem { - > a { - color: $gray-02; + >a { + color: colors.$gray-02; display: block; font-size: 13px; font-weight: 600; @@ -141,8 +147,8 @@ $section-menu-width: 240px; .section-menu__subsubitem { - > a { - color: $gray-02; + >a { + color: colors.$gray-02; display: block; font-size: 12px; font-weight: normal; @@ -161,15 +167,15 @@ $section-menu-width: 240px; &, a, .section-menu__header a { - color: $white; + color: colors.$white; } - .section-menu__item.active > a, - .section-menu__subitem.active > a, - .section-menu__subsubitem.active > a span { - background-color: $white; - border-radius: $base-border-radius; - color: $gray-02; + .section-menu__item.active>a, + .section-menu__subitem.active>a, + .section-menu__subsubitem.active>a span { + background-color: colors.$white; + border-radius: variables.$base-border-radius; + color: colors.$gray-02; } } @@ -178,68 +184,68 @@ $section-menu-width: 240px; &, a, .section-menu__header a { - color: $gray-02; + color: colors.$gray-02; } - .section-menu__item.active > a, - .section-menu__subitem.active > a, - .section-menu__subsubitem.active > a span { - background-color: $gray-02; - border-radius: $base-border-radius; - color: $white; + .section-menu__item.active>a, + .section-menu__subitem.active>a, + .section-menu__subsubitem.active>a span { + background-color: colors.$gray-02; + border-radius: variables.$base-border-radius; + color: colors.$white; } } .section-menu--guides { - background-color: $color-guides; - border-right-color: color.adjust($color-guides, $lightness: -10%, $space: hsl); + background-color: colors.$color-guides; + border-right-color: color.adjust(colors.$color-guides, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-guides; + background-color: colors.$color-guides; } } .section-menu--docs { - background-color: $color-docs; - border-right-color: color.adjust($color-docs, $lightness: -10%, $space: hsl); + background-color: colors.$color-docs; + border-right-color: color.adjust(colors.$color-docs, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-docs; + background-color: colors.$color-docs; } } .section-menu--community { - background-color: $color-community; - border-right-color: color.adjust($color-community, $lightness: -10%, $space: hsl); + background-color: colors.$color-community; + border-right-color: color.adjust(colors.$color-community, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-community; + background-color: colors.$color-community; } } .section-menu--sdk { - background-color: $color-sdk; - border-right-color: color.adjust($color-sdk, $lightness: -10%, $space: hsl); + background-color: colors.$color-sdk; + border-right-color: color.adjust(colors.$color-sdk, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-sdk; + background-color: colors.$color-sdk; } } .section-menu--more { - background-color: $color-more; - border-right-color: color.adjust($color-more, $lightness: -10%, $space: hsl); + background-color: colors.$color-more; + border-right-color: color.adjust(colors.$color-more, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-more; + background-color: colors.$color-more; } } .section-menu--getting-started { - background-color: $color-getting-started; - border-right-color: color.adjust($color-getting-started, $lightness: -10%, $space: hsl); + background-color: colors.$color-getting-started; + border-right-color: color.adjust(colors.$color-getting-started, $lightness: -10%, $space: hsl); .section-menu__header { - background-color: $color-getting-started; + background-color: colors.$color-getting-started; } } diff --git a/source/_sass/elements/sidebar.scss b/source/_sass/elements/sidebar.scss index cab9b51..4871848 100644 --- a/source/_sass/elements/sidebar.scss +++ b/source/_sass/elements/sidebar.scss @@ -14,11 +14,16 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; +@use "../responsive/utilities/variables" as utilities-variables; @use "sass:color"; @use "sass:math"; $sidebar-width: 105px; -$sidebar--wide-width: $header-logo-width; +$sidebar--wide-width: header.$header-logo-width; $sidebar-hide-at: xs; .sidebar__wrapper { @@ -29,7 +34,7 @@ $sidebar-hide-at: xs; left: 0; z-index: 10; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { display: none; } } @@ -38,12 +43,12 @@ $sidebar-hide-at: xs; background-color: #f6f6f6; bottom: 0; left: 0; - padding-top: $header-height; + padding-top: header.$header-height; position: absolute; top: 0; width: $sidebar-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { display: none; } } @@ -54,20 +59,20 @@ $sidebar-hide-at: xs; .sidebar__header { background-color: #222; - border-bottom: 2px solid $black; - color: $white; - font-size: $base-font-size * 1.2; - height: $header-height; + border-bottom: 2px solid colors.$black; + color: colors.$white; + font-size: utilities-variables.$base-font-size * 1.2; + height: header.$header-height; left: 0; - padding: math.div($base-line-height, 1.2) 0; + padding: math.div(variables.$base-line-height, 1.2) 0; position: absolute; text-align: center; top: 0; width: $sidebar-width; &:hover { - background-color: $black; - color: $white; + background-color: colors.$black; + color: colors.$white; } span { @@ -84,8 +89,8 @@ $sidebar-hide-at: xs; display: block; } - > a { - background-color: color.adjust($base-link-color, $lightness: 30%, $space: hsl); + >a { + background-color: color.adjust(variables.$base-link-color, $lightness: 30%, $space: hsl); color: #fff; } } @@ -99,7 +104,7 @@ $sidebar-hide-at: xs; margin-left: $sidebar-width; height: 100%; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { margin-left: 0; } } @@ -107,7 +112,7 @@ $sidebar-hide-at: xs; .content--narrow { margin-left: $sidebar--wide-width; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max ($sidebar-hide-at) { margin: 0; } } @@ -116,13 +121,13 @@ $sidebar-hide-at: xs; position: absolute; left: 0; right: 0; - bottom: 3 * $base-line-height; + bottom: 3 * utilities-variables.$base-line-height; font-size: 0.85em; padding: 1em 0; text-align: center; a { - color: $gray-03; + color: colors.$gray-03; &:hover { text-decoration: underline; @@ -131,14 +136,14 @@ $sidebar-hide-at: xs; } .sidebar__footer { - background-color: $color-appstore; - border-right: 1px solid color.adjust($color-appstore, $lightness: -10%, $space: hsl); + background-color: colors.$color-appstore; + border-right: 1px solid color.adjust(colors.$color-appstore, $lightness: -10%, $space: hsl); bottom: 0; - color: $white; + color: colors.$white; font-weight: bold; - height: 3 * $base-line-height; + height: 3 * utilities-variables.$base-line-height; left: 0; - padding: $base-line-height 0; + padding: utilities-variables.$base-line-height 0; position: absolute; right: 0; text-align: center; @@ -146,9 +151,9 @@ $sidebar-hide-at: xs; &:hover, &.active { - background-color: color.adjust($color-appstore, $lightness: -10%, $space: hsl); - border-color: color.adjust($color-appstore, $lightness: -20%, $space: hsl); - color: $white; + background-color: color.adjust(colors.$color-appstore, $lightness: -10%, $space: hsl); + border-color: color.adjust(colors.$color-appstore, $lightness: -20%, $space: hsl); + color: colors.$white; } } @@ -158,8 +163,8 @@ $sidebar-hide-at: xs; span { background-color: #444; - border-radius: $base-border-radius; - color: $white; + border-radius: variables.$base-border-radius; + color: colors.$white; display: none; left: 80px; margin-top: -1.2em; @@ -179,7 +184,7 @@ $sidebar-hide-at: xs; } .mainmenu { - border-right: 1px solid $gray-08; + border-right: 1px solid colors.$gray-08; height: 100%; // I would like to enable scrolling on the Y axis but it breaks the tooltips. // overflow-x: visible; @@ -194,7 +199,7 @@ $sidebar-hide-at: xs; background-position: center center; background-repeat: no-repeat; background-size: 3em; - color: $gray-02; + color: colors.$gray-02; display: block; font-size: 13px; font-weight: bold; @@ -204,7 +209,7 @@ $sidebar-hide-at: xs; position: relative; text-transform: uppercase; - @media screen and ( max-height: 640px ){ + @media screen and (max-height: 640px) { margin: 0; } diff --git a/source/_sass/elements/spinner.scss b/source/_sass/elements/spinner.scss index a965d5c..a218f9c 100644 --- a/source/_sass/elements/spinner.scss +++ b/source/_sass/elements/spinner.scss @@ -14,6 +14,9 @@ * limitations under the License. */ +@use "../bourbon/css3/animation"; +@use "../colors"; + @charset "UTF-8"; // Spinner by CSS Wizadry: http://jsfiddle.net/csswizardry/M2D4M/ @@ -32,7 +35,7 @@ // zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement .spinner { - @include animation(0.5s spinner linear infinite); + @include animation.animation(0.5s spinner linear infinite); border-bottom: 1px solid; // 4 display: inline-block; font-size: 32px; // 3 @@ -69,7 +72,7 @@ .spinner--large { font-size: 64px; } // Color overrides. -.spinner--light { color: $white; } +.spinner--light { color: colors.$white; } .spinner--dark { color: #333; } .spinner--center { diff --git a/source/_sass/elements/toc.scss b/source/_sass/elements/toc.scss index 799fd19..08e86fa 100644 --- a/source/_sass/elements/toc.scss +++ b/source/_sass/elements/toc.scss @@ -14,6 +14,7 @@ * limitations under the License. */ +@use "../base/variables"; @use "sass:color"; .toc__item { @@ -42,7 +43,8 @@ .toc__item--active { font-weight: 600; + a { - color: color.adjust($base-link-color, $lightness: -20%, $space: hsl); + color: color.adjust(variables.$base-link-color, $lightness: -20%, $space: hsl); } } diff --git a/source/_sass/font-awesome/_bordered-pulled.scss b/source/_sass/font-awesome/_bordered-pulled.scss index 9d3fdf3..58540d2 100644 --- a/source/_sass/font-awesome/_bordered-pulled.scss +++ b/source/_sass/font-awesome/_bordered-pulled.scss @@ -1,16 +1,18 @@ +@use "variables"; + // Bordered & Pulled // ------------------------- -.#{$fa-css-prefix}-border { +.#{variables.$fa-css-prefix}-border { padding: .2em .25em .15em; - border: solid .08em $fa-border-color; + border: solid .08em variables.$fa-border-color; border-radius: .1em; } .pull-right { float: right; } .pull-left { float: left; } -.#{$fa-css-prefix} { +.#{variables.$fa-css-prefix} { &.pull-left { margin-right: .3em; } &.pull-right { margin-left: .3em; } } diff --git a/source/_sass/font-awesome/_core.scss b/source/_sass/font-awesome/_core.scss index 861ccd9..49839b0 100644 --- a/source/_sass/font-awesome/_core.scss +++ b/source/_sass/font-awesome/_core.scss @@ -1,7 +1,9 @@ +@use "variables"; + // Base Class Definition // ------------------------- -.#{$fa-css-prefix} { +.#{variables.$fa-css-prefix} { display: inline-block; font-family: FontAwesome; font-style: normal; diff --git a/source/_sass/font-awesome/_fixed-width.scss b/source/_sass/font-awesome/_fixed-width.scss index 5411f95..d0b5ab7 100644 --- a/source/_sass/font-awesome/_fixed-width.scss +++ b/source/_sass/font-awesome/_fixed-width.scss @@ -1,8 +1,10 @@ // Fixed Width Icons // ------------------------- + @use "sass:math"; +@use "variables"; -.#{$fa-css-prefix}-fw { +.#{variables.$fa-css-prefix}-fw { width: math.div(18em, 14); text-align: center; } diff --git a/source/_sass/font-awesome/_icons.scss b/source/_sass/font-awesome/_icons.scss index efb4435..c0e94be 100644 --- a/source/_sass/font-awesome/_icons.scss +++ b/source/_sass/font-awesome/_icons.scss @@ -1,506 +1,508 @@ +@use "variables"; + /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ -.#{$fa-css-prefix}-glass:before { content: $fa-var-glass; } -.#{$fa-css-prefix}-music:before { content: $fa-var-music; } -.#{$fa-css-prefix}-search:before { content: $fa-var-search; } -.#{$fa-css-prefix}-envelope-o:before { content: $fa-var-envelope-o; } -.#{$fa-css-prefix}-heart:before { content: $fa-var-heart; } -.#{$fa-css-prefix}-star:before { content: $fa-var-star; } -.#{$fa-css-prefix}-star-o:before { content: $fa-var-star-o; } -.#{$fa-css-prefix}-user:before { content: $fa-var-user; } -.#{$fa-css-prefix}-film:before { content: $fa-var-film; } -.#{$fa-css-prefix}-th-large:before { content: $fa-var-th-large; } -.#{$fa-css-prefix}-th:before { content: $fa-var-th; } -.#{$fa-css-prefix}-th-list:before { content: $fa-var-th-list; } -.#{$fa-css-prefix}-check:before { content: $fa-var-check; } -.#{$fa-css-prefix}-times:before { content: $fa-var-times; } -.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; } -.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; } -.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; } -.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; } -.#{$fa-css-prefix}-gear:before, -.#{$fa-css-prefix}-cog:before { content: $fa-var-cog; } -.#{$fa-css-prefix}-trash-o:before { content: $fa-var-trash-o; } -.#{$fa-css-prefix}-home:before { content: $fa-var-home; } -.#{$fa-css-prefix}-file-o:before { content: $fa-var-file-o; } -.#{$fa-css-prefix}-clock-o:before { content: $fa-var-clock-o; } -.#{$fa-css-prefix}-road:before { content: $fa-var-road; } -.#{$fa-css-prefix}-download:before { content: $fa-var-download; } -.#{$fa-css-prefix}-arrow-circle-o-down:before { content: $fa-var-arrow-circle-o-down; } -.#{$fa-css-prefix}-arrow-circle-o-up:before { content: $fa-var-arrow-circle-o-up; } -.#{$fa-css-prefix}-inbox:before { content: $fa-var-inbox; } -.#{$fa-css-prefix}-play-circle-o:before { content: $fa-var-play-circle-o; } -.#{$fa-css-prefix}-rotate-right:before, -.#{$fa-css-prefix}-repeat:before { content: $fa-var-repeat; } -.#{$fa-css-prefix}-refresh:before { content: $fa-var-refresh; } -.#{$fa-css-prefix}-list-alt:before { content: $fa-var-list-alt; } -.#{$fa-css-prefix}-lock:before { content: $fa-var-lock; } -.#{$fa-css-prefix}-flag:before { content: $fa-var-flag; } -.#{$fa-css-prefix}-headphones:before { content: $fa-var-headphones; } -.#{$fa-css-prefix}-volume-off:before { content: $fa-var-volume-off; } -.#{$fa-css-prefix}-volume-down:before { content: $fa-var-volume-down; } -.#{$fa-css-prefix}-volume-up:before { content: $fa-var-volume-up; } -.#{$fa-css-prefix}-qrcode:before { content: $fa-var-qrcode; } -.#{$fa-css-prefix}-barcode:before { content: $fa-var-barcode; } -.#{$fa-css-prefix}-tag:before { content: $fa-var-tag; } -.#{$fa-css-prefix}-tags:before { content: $fa-var-tags; } -.#{$fa-css-prefix}-book:before { content: $fa-var-book; } -.#{$fa-css-prefix}-bookmark:before { content: $fa-var-bookmark; } -.#{$fa-css-prefix}-print:before { content: $fa-var-print; } -.#{$fa-css-prefix}-camera:before { content: $fa-var-camera; } -.#{$fa-css-prefix}-font:before { content: $fa-var-font; } -.#{$fa-css-prefix}-bold:before { content: $fa-var-bold; } -.#{$fa-css-prefix}-italic:before { content: $fa-var-italic; } -.#{$fa-css-prefix}-text-height:before { content: $fa-var-text-height; } -.#{$fa-css-prefix}-text-width:before { content: $fa-var-text-width; } -.#{$fa-css-prefix}-align-left:before { content: $fa-var-align-left; } -.#{$fa-css-prefix}-align-center:before { content: $fa-var-align-center; } -.#{$fa-css-prefix}-align-right:before { content: $fa-var-align-right; } -.#{$fa-css-prefix}-align-justify:before { content: $fa-var-align-justify; } -.#{$fa-css-prefix}-list:before { content: $fa-var-list; } -.#{$fa-css-prefix}-dedent:before, -.#{$fa-css-prefix}-outdent:before { content: $fa-var-outdent; } -.#{$fa-css-prefix}-indent:before { content: $fa-var-indent; } -.#{$fa-css-prefix}-video-camera:before { content: $fa-var-video-camera; } -.#{$fa-css-prefix}-photo:before, -.#{$fa-css-prefix}-image:before, -.#{$fa-css-prefix}-picture-o:before { content: $fa-var-picture-o; } -.#{$fa-css-prefix}-pencil:before { content: $fa-var-pencil; } -.#{$fa-css-prefix}-map-marker:before { content: $fa-var-map-marker; } -.#{$fa-css-prefix}-adjust:before { content: $fa-var-adjust; } -.#{$fa-css-prefix}-tint:before { content: $fa-var-tint; } -.#{$fa-css-prefix}-edit:before, -.#{$fa-css-prefix}-pencil-square-o:before { content: $fa-var-pencil-square-o; } -.#{$fa-css-prefix}-share-square-o:before { content: $fa-var-share-square-o; } -.#{$fa-css-prefix}-check-square-o:before { content: $fa-var-check-square-o; } -.#{$fa-css-prefix}-arrows:before { content: $fa-var-arrows; } -.#{$fa-css-prefix}-step-backward:before { content: $fa-var-step-backward; } -.#{$fa-css-prefix}-fast-backward:before { content: $fa-var-fast-backward; } -.#{$fa-css-prefix}-backward:before { content: $fa-var-backward; } -.#{$fa-css-prefix}-play:before { content: $fa-var-play; } -.#{$fa-css-prefix}-pause:before { content: $fa-var-pause; } -.#{$fa-css-prefix}-stop:before { content: $fa-var-stop; } -.#{$fa-css-prefix}-forward:before { content: $fa-var-forward; } -.#{$fa-css-prefix}-fast-forward:before { content: $fa-var-fast-forward; } -.#{$fa-css-prefix}-step-forward:before { content: $fa-var-step-forward; } -.#{$fa-css-prefix}-eject:before { content: $fa-var-eject; } -.#{$fa-css-prefix}-chevron-left:before { content: $fa-var-chevron-left; } -.#{$fa-css-prefix}-chevron-right:before { content: $fa-var-chevron-right; } -.#{$fa-css-prefix}-plus-circle:before { content: $fa-var-plus-circle; } -.#{$fa-css-prefix}-minus-circle:before { content: $fa-var-minus-circle; } -.#{$fa-css-prefix}-times-circle:before { content: $fa-var-times-circle; } -.#{$fa-css-prefix}-check-circle:before { content: $fa-var-check-circle; } -.#{$fa-css-prefix}-question-circle:before { content: $fa-var-question-circle; } -.#{$fa-css-prefix}-info-circle:before { content: $fa-var-info-circle; } -.#{$fa-css-prefix}-crosshairs:before { content: $fa-var-crosshairs; } -.#{$fa-css-prefix}-times-circle-o:before { content: $fa-var-times-circle-o; } -.#{$fa-css-prefix}-check-circle-o:before { content: $fa-var-check-circle-o; } -.#{$fa-css-prefix}-ban:before { content: $fa-var-ban; } -.#{$fa-css-prefix}-arrow-left:before { content: $fa-var-arrow-left; } -.#{$fa-css-prefix}-arrow-right:before { content: $fa-var-arrow-right; } -.#{$fa-css-prefix}-arrow-up:before { content: $fa-var-arrow-up; } -.#{$fa-css-prefix}-arrow-down:before { content: $fa-var-arrow-down; } -.#{$fa-css-prefix}-mail-forward:before, -.#{$fa-css-prefix}-share:before { content: $fa-var-share; } -.#{$fa-css-prefix}-expand:before { content: $fa-var-expand; } -.#{$fa-css-prefix}-compress:before { content: $fa-var-compress; } -.#{$fa-css-prefix}-plus:before { content: $fa-var-plus; } -.#{$fa-css-prefix}-minus:before { content: $fa-var-minus; } -.#{$fa-css-prefix}-asterisk:before { content: $fa-var-asterisk; } -.#{$fa-css-prefix}-exclamation-circle:before { content: $fa-var-exclamation-circle; } -.#{$fa-css-prefix}-gift:before { content: $fa-var-gift; } -.#{$fa-css-prefix}-leaf:before { content: $fa-var-leaf; } -.#{$fa-css-prefix}-fire:before { content: $fa-var-fire; } -.#{$fa-css-prefix}-eye:before { content: $fa-var-eye; } -.#{$fa-css-prefix}-eye-slash:before { content: $fa-var-eye-slash; } -.#{$fa-css-prefix}-warning:before, -.#{$fa-css-prefix}-exclamation-triangle:before { content: $fa-var-exclamation-triangle; } -.#{$fa-css-prefix}-plane:before { content: $fa-var-plane; } -.#{$fa-css-prefix}-calendar:before { content: $fa-var-calendar; } -.#{$fa-css-prefix}-random:before { content: $fa-var-random; } -.#{$fa-css-prefix}-comment:before { content: $fa-var-comment; } -.#{$fa-css-prefix}-magnet:before { content: $fa-var-magnet; } -.#{$fa-css-prefix}-chevron-up:before { content: $fa-var-chevron-up; } -.#{$fa-css-prefix}-chevron-down:before { content: $fa-var-chevron-down; } -.#{$fa-css-prefix}-retweet:before { content: $fa-var-retweet; } -.#{$fa-css-prefix}-shopping-cart:before { content: $fa-var-shopping-cart; } -.#{$fa-css-prefix}-folder:before { content: $fa-var-folder; } -.#{$fa-css-prefix}-folder-open:before { content: $fa-var-folder-open; } -.#{$fa-css-prefix}-arrows-v:before { content: $fa-var-arrows-v; } -.#{$fa-css-prefix}-arrows-h:before { content: $fa-var-arrows-h; } -.#{$fa-css-prefix}-bar-chart-o:before { content: $fa-var-bar-chart-o; } -.#{$fa-css-prefix}-twitter-square:before { content: $fa-var-twitter-square; } -.#{$fa-css-prefix}-facebook-square:before { content: $fa-var-facebook-square; } -.#{$fa-css-prefix}-camera-retro:before { content: $fa-var-camera-retro; } -.#{$fa-css-prefix}-key:before { content: $fa-var-key; } -.#{$fa-css-prefix}-gears:before, -.#{$fa-css-prefix}-cogs:before { content: $fa-var-cogs; } -.#{$fa-css-prefix}-comments:before { content: $fa-var-comments; } -.#{$fa-css-prefix}-thumbs-o-up:before { content: $fa-var-thumbs-o-up; } -.#{$fa-css-prefix}-thumbs-o-down:before { content: $fa-var-thumbs-o-down; } -.#{$fa-css-prefix}-star-half:before { content: $fa-var-star-half; } -.#{$fa-css-prefix}-heart-o:before { content: $fa-var-heart-o; } -.#{$fa-css-prefix}-sign-out:before { content: $fa-var-sign-out; } -.#{$fa-css-prefix}-linkedin-square:before { content: $fa-var-linkedin-square; } -.#{$fa-css-prefix}-thumb-tack:before { content: $fa-var-thumb-tack; } -.#{$fa-css-prefix}-external-link:before { content: $fa-var-external-link; } -.#{$fa-css-prefix}-sign-in:before { content: $fa-var-sign-in; } -.#{$fa-css-prefix}-trophy:before { content: $fa-var-trophy; } -.#{$fa-css-prefix}-github-square:before { content: $fa-var-github-square; } -.#{$fa-css-prefix}-upload:before { content: $fa-var-upload; } -.#{$fa-css-prefix}-lemon-o:before { content: $fa-var-lemon-o; } -.#{$fa-css-prefix}-phone:before { content: $fa-var-phone; } -.#{$fa-css-prefix}-square-o:before { content: $fa-var-square-o; } -.#{$fa-css-prefix}-bookmark-o:before { content: $fa-var-bookmark-o; } -.#{$fa-css-prefix}-phone-square:before { content: $fa-var-phone-square; } -.#{$fa-css-prefix}-twitter:before { content: $fa-var-twitter; } -.#{$fa-css-prefix}-facebook:before { content: $fa-var-facebook; } -.#{$fa-css-prefix}-github:before { content: $fa-var-github; } -.#{$fa-css-prefix}-unlock:before { content: $fa-var-unlock; } -.#{$fa-css-prefix}-credit-card:before { content: $fa-var-credit-card; } -.#{$fa-css-prefix}-rss:before { content: $fa-var-rss; } -.#{$fa-css-prefix}-hdd-o:before { content: $fa-var-hdd-o; } -.#{$fa-css-prefix}-bullhorn:before { content: $fa-var-bullhorn; } -.#{$fa-css-prefix}-bell:before { content: $fa-var-bell; } -.#{$fa-css-prefix}-certificate:before { content: $fa-var-certificate; } -.#{$fa-css-prefix}-hand-o-right:before { content: $fa-var-hand-o-right; } -.#{$fa-css-prefix}-hand-o-left:before { content: $fa-var-hand-o-left; } -.#{$fa-css-prefix}-hand-o-up:before { content: $fa-var-hand-o-up; } -.#{$fa-css-prefix}-hand-o-down:before { content: $fa-var-hand-o-down; } -.#{$fa-css-prefix}-arrow-circle-left:before { content: $fa-var-arrow-circle-left; } -.#{$fa-css-prefix}-arrow-circle-right:before { content: $fa-var-arrow-circle-right; } -.#{$fa-css-prefix}-arrow-circle-up:before { content: $fa-var-arrow-circle-up; } -.#{$fa-css-prefix}-arrow-circle-down:before { content: $fa-var-arrow-circle-down; } -.#{$fa-css-prefix}-globe:before { content: $fa-var-globe; } -.#{$fa-css-prefix}-wrench:before { content: $fa-var-wrench; } -.#{$fa-css-prefix}-tasks:before { content: $fa-var-tasks; } -.#{$fa-css-prefix}-filter:before { content: $fa-var-filter; } -.#{$fa-css-prefix}-briefcase:before { content: $fa-var-briefcase; } -.#{$fa-css-prefix}-arrows-alt:before { content: $fa-var-arrows-alt; } -.#{$fa-css-prefix}-group:before, -.#{$fa-css-prefix}-users:before { content: $fa-var-users; } -.#{$fa-css-prefix}-chain:before, -.#{$fa-css-prefix}-link:before { content: $fa-var-link; } -.#{$fa-css-prefix}-cloud:before { content: $fa-var-cloud; } -.#{$fa-css-prefix}-flask:before { content: $fa-var-flask; } -.#{$fa-css-prefix}-cut:before, -.#{$fa-css-prefix}-scissors:before { content: $fa-var-scissors; } -.#{$fa-css-prefix}-copy:before, -.#{$fa-css-prefix}-files-o:before { content: $fa-var-files-o; } -.#{$fa-css-prefix}-paperclip:before { content: $fa-var-paperclip; } -.#{$fa-css-prefix}-save:before, -.#{$fa-css-prefix}-floppy-o:before { content: $fa-var-floppy-o; } -.#{$fa-css-prefix}-square:before { content: $fa-var-square; } -.#{$fa-css-prefix}-navicon:before, -.#{$fa-css-prefix}-reorder:before, -.#{$fa-css-prefix}-bars:before { content: $fa-var-bars; } -.#{$fa-css-prefix}-list-ul:before { content: $fa-var-list-ul; } -.#{$fa-css-prefix}-list-ol:before { content: $fa-var-list-ol; } -.#{$fa-css-prefix}-strikethrough:before { content: $fa-var-strikethrough; } -.#{$fa-css-prefix}-underline:before { content: $fa-var-underline; } -.#{$fa-css-prefix}-table:before { content: $fa-var-table; } -.#{$fa-css-prefix}-magic:before { content: $fa-var-magic; } -.#{$fa-css-prefix}-truck:before { content: $fa-var-truck; } -.#{$fa-css-prefix}-pinterest:before { content: $fa-var-pinterest; } -.#{$fa-css-prefix}-pinterest-square:before { content: $fa-var-pinterest-square; } -.#{$fa-css-prefix}-google-plus-square:before { content: $fa-var-google-plus-square; } -.#{$fa-css-prefix}-google-plus:before { content: $fa-var-google-plus; } -.#{$fa-css-prefix}-money:before { content: $fa-var-money; } -.#{$fa-css-prefix}-caret-down:before { content: $fa-var-caret-down; } -.#{$fa-css-prefix}-caret-up:before { content: $fa-var-caret-up; } -.#{$fa-css-prefix}-caret-left:before { content: $fa-var-caret-left; } -.#{$fa-css-prefix}-caret-right:before { content: $fa-var-caret-right; } -.#{$fa-css-prefix}-columns:before { content: $fa-var-columns; } -.#{$fa-css-prefix}-unsorted:before, -.#{$fa-css-prefix}-sort:before { content: $fa-var-sort; } -.#{$fa-css-prefix}-sort-down:before, -.#{$fa-css-prefix}-sort-desc:before { content: $fa-var-sort-desc; } -.#{$fa-css-prefix}-sort-up:before, -.#{$fa-css-prefix}-sort-asc:before { content: $fa-var-sort-asc; } -.#{$fa-css-prefix}-envelope:before { content: $fa-var-envelope; } -.#{$fa-css-prefix}-linkedin:before { content: $fa-var-linkedin; } -.#{$fa-css-prefix}-rotate-left:before, -.#{$fa-css-prefix}-undo:before { content: $fa-var-undo; } -.#{$fa-css-prefix}-legal:before, -.#{$fa-css-prefix}-gavel:before { content: $fa-var-gavel; } -.#{$fa-css-prefix}-dashboard:before, -.#{$fa-css-prefix}-tachometer:before { content: $fa-var-tachometer; } -.#{$fa-css-prefix}-comment-o:before { content: $fa-var-comment-o; } -.#{$fa-css-prefix}-comments-o:before { content: $fa-var-comments-o; } -.#{$fa-css-prefix}-flash:before, -.#{$fa-css-prefix}-bolt:before { content: $fa-var-bolt; } -.#{$fa-css-prefix}-sitemap:before { content: $fa-var-sitemap; } -.#{$fa-css-prefix}-umbrella:before { content: $fa-var-umbrella; } -.#{$fa-css-prefix}-paste:before, -.#{$fa-css-prefix}-clipboard:before { content: $fa-var-clipboard; } -.#{$fa-css-prefix}-lightbulb-o:before { content: $fa-var-lightbulb-o; } -.#{$fa-css-prefix}-exchange:before { content: $fa-var-exchange; } -.#{$fa-css-prefix}-cloud-download:before { content: $fa-var-cloud-download; } -.#{$fa-css-prefix}-cloud-upload:before { content: $fa-var-cloud-upload; } -.#{$fa-css-prefix}-user-md:before { content: $fa-var-user-md; } -.#{$fa-css-prefix}-stethoscope:before { content: $fa-var-stethoscope; } -.#{$fa-css-prefix}-suitcase:before { content: $fa-var-suitcase; } -.#{$fa-css-prefix}-bell-o:before { content: $fa-var-bell-o; } -.#{$fa-css-prefix}-coffee:before { content: $fa-var-coffee; } -.#{$fa-css-prefix}-cutlery:before { content: $fa-var-cutlery; } -.#{$fa-css-prefix}-file-text-o:before { content: $fa-var-file-text-o; } -.#{$fa-css-prefix}-building-o:before { content: $fa-var-building-o; } -.#{$fa-css-prefix}-hospital-o:before { content: $fa-var-hospital-o; } -.#{$fa-css-prefix}-ambulance:before { content: $fa-var-ambulance; } -.#{$fa-css-prefix}-medkit:before { content: $fa-var-medkit; } -.#{$fa-css-prefix}-fighter-jet:before { content: $fa-var-fighter-jet; } -.#{$fa-css-prefix}-beer:before { content: $fa-var-beer; } -.#{$fa-css-prefix}-h-square:before { content: $fa-var-h-square; } -.#{$fa-css-prefix}-plus-square:before { content: $fa-var-plus-square; } -.#{$fa-css-prefix}-angle-double-left:before { content: $fa-var-angle-double-left; } -.#{$fa-css-prefix}-angle-double-right:before { content: $fa-var-angle-double-right; } -.#{$fa-css-prefix}-angle-double-up:before { content: $fa-var-angle-double-up; } -.#{$fa-css-prefix}-angle-double-down:before { content: $fa-var-angle-double-down; } -.#{$fa-css-prefix}-angle-left:before { content: $fa-var-angle-left; } -.#{$fa-css-prefix}-angle-right:before { content: $fa-var-angle-right; } -.#{$fa-css-prefix}-angle-up:before { content: $fa-var-angle-up; } -.#{$fa-css-prefix}-angle-down:before { content: $fa-var-angle-down; } -.#{$fa-css-prefix}-desktop:before { content: $fa-var-desktop; } -.#{$fa-css-prefix}-laptop:before { content: $fa-var-laptop; } -.#{$fa-css-prefix}-tablet:before { content: $fa-var-tablet; } -.#{$fa-css-prefix}-mobile-phone:before, -.#{$fa-css-prefix}-mobile:before { content: $fa-var-mobile; } -.#{$fa-css-prefix}-circle-o:before { content: $fa-var-circle-o; } -.#{$fa-css-prefix}-quote-left:before { content: $fa-var-quote-left; } -.#{$fa-css-prefix}-quote-right:before { content: $fa-var-quote-right; } -.#{$fa-css-prefix}-spinner:before { content: $fa-var-spinner; } -.#{$fa-css-prefix}-circle:before { content: $fa-var-circle; } -.#{$fa-css-prefix}-mail-reply:before, -.#{$fa-css-prefix}-reply:before { content: $fa-var-reply; } -.#{$fa-css-prefix}-github-alt:before { content: $fa-var-github-alt; } -.#{$fa-css-prefix}-folder-o:before { content: $fa-var-folder-o; } -.#{$fa-css-prefix}-folder-open-o:before { content: $fa-var-folder-open-o; } -.#{$fa-css-prefix}-smile-o:before { content: $fa-var-smile-o; } -.#{$fa-css-prefix}-frown-o:before { content: $fa-var-frown-o; } -.#{$fa-css-prefix}-meh-o:before { content: $fa-var-meh-o; } -.#{$fa-css-prefix}-gamepad:before { content: $fa-var-gamepad; } -.#{$fa-css-prefix}-keyboard-o:before { content: $fa-var-keyboard-o; } -.#{$fa-css-prefix}-flag-o:before { content: $fa-var-flag-o; } -.#{$fa-css-prefix}-flag-checkered:before { content: $fa-var-flag-checkered; } -.#{$fa-css-prefix}-terminal:before { content: $fa-var-terminal; } -.#{$fa-css-prefix}-code:before { content: $fa-var-code; } -.#{$fa-css-prefix}-mail-reply-all:before, -.#{$fa-css-prefix}-reply-all:before { content: $fa-var-reply-all; } -.#{$fa-css-prefix}-star-half-empty:before, -.#{$fa-css-prefix}-star-half-full:before, -.#{$fa-css-prefix}-star-half-o:before { content: $fa-var-star-half-o; } -.#{$fa-css-prefix}-location-arrow:before { content: $fa-var-location-arrow; } -.#{$fa-css-prefix}-crop:before { content: $fa-var-crop; } -.#{$fa-css-prefix}-code-fork:before { content: $fa-var-code-fork; } -.#{$fa-css-prefix}-unlink:before, -.#{$fa-css-prefix}-chain-broken:before { content: $fa-var-chain-broken; } -.#{$fa-css-prefix}-question:before { content: $fa-var-question; } -.#{$fa-css-prefix}-info:before { content: $fa-var-info; } -.#{$fa-css-prefix}-exclamation:before { content: $fa-var-exclamation; } -.#{$fa-css-prefix}-superscript:before { content: $fa-var-superscript; } -.#{$fa-css-prefix}-subscript:before { content: $fa-var-subscript; } -.#{$fa-css-prefix}-eraser:before { content: $fa-var-eraser; } -.#{$fa-css-prefix}-puzzle-piece:before { content: $fa-var-puzzle-piece; } -.#{$fa-css-prefix}-microphone:before { content: $fa-var-microphone; } -.#{$fa-css-prefix}-microphone-slash:before { content: $fa-var-microphone-slash; } -.#{$fa-css-prefix}-shield:before { content: $fa-var-shield; } -.#{$fa-css-prefix}-calendar-o:before { content: $fa-var-calendar-o; } -.#{$fa-css-prefix}-fire-extinguisher:before { content: $fa-var-fire-extinguisher; } -.#{$fa-css-prefix}-rocket:before { content: $fa-var-rocket; } -.#{$fa-css-prefix}-maxcdn:before { content: $fa-var-maxcdn; } -.#{$fa-css-prefix}-chevron-circle-left:before { content: $fa-var-chevron-circle-left; } -.#{$fa-css-prefix}-chevron-circle-right:before { content: $fa-var-chevron-circle-right; } -.#{$fa-css-prefix}-chevron-circle-up:before { content: $fa-var-chevron-circle-up; } -.#{$fa-css-prefix}-chevron-circle-down:before { content: $fa-var-chevron-circle-down; } -.#{$fa-css-prefix}-html5:before { content: $fa-var-html5; } -.#{$fa-css-prefix}-css3:before { content: $fa-var-css3; } -.#{$fa-css-prefix}-anchor:before { content: $fa-var-anchor; } -.#{$fa-css-prefix}-unlock-alt:before { content: $fa-var-unlock-alt; } -.#{$fa-css-prefix}-bullseye:before { content: $fa-var-bullseye; } -.#{$fa-css-prefix}-ellipsis-h:before { content: $fa-var-ellipsis-h; } -.#{$fa-css-prefix}-ellipsis-v:before { content: $fa-var-ellipsis-v; } -.#{$fa-css-prefix}-rss-square:before { content: $fa-var-rss-square; } -.#{$fa-css-prefix}-play-circle:before { content: $fa-var-play-circle; } -.#{$fa-css-prefix}-ticket:before { content: $fa-var-ticket; } -.#{$fa-css-prefix}-minus-square:before { content: $fa-var-minus-square; } -.#{$fa-css-prefix}-minus-square-o:before { content: $fa-var-minus-square-o; } -.#{$fa-css-prefix}-level-up:before { content: $fa-var-level-up; } -.#{$fa-css-prefix}-level-down:before { content: $fa-var-level-down; } -.#{$fa-css-prefix}-check-square:before { content: $fa-var-check-square; } -.#{$fa-css-prefix}-pencil-square:before { content: $fa-var-pencil-square; } -.#{$fa-css-prefix}-external-link-square:before { content: $fa-var-external-link-square; } -.#{$fa-css-prefix}-share-square:before { content: $fa-var-share-square; } -.#{$fa-css-prefix}-compass:before { content: $fa-var-compass; } -.#{$fa-css-prefix}-toggle-down:before, -.#{$fa-css-prefix}-caret-square-o-down:before { content: $fa-var-caret-square-o-down; } -.#{$fa-css-prefix}-toggle-up:before, -.#{$fa-css-prefix}-caret-square-o-up:before { content: $fa-var-caret-square-o-up; } -.#{$fa-css-prefix}-toggle-right:before, -.#{$fa-css-prefix}-caret-square-o-right:before { content: $fa-var-caret-square-o-right; } -.#{$fa-css-prefix}-euro:before, -.#{$fa-css-prefix}-eur:before { content: $fa-var-eur; } -.#{$fa-css-prefix}-gbp:before { content: $fa-var-gbp; } -.#{$fa-css-prefix}-dollar:before, -.#{$fa-css-prefix}-usd:before { content: $fa-var-usd; } -.#{$fa-css-prefix}-rupee:before, -.#{$fa-css-prefix}-inr:before { content: $fa-var-inr; } -.#{$fa-css-prefix}-cny:before, -.#{$fa-css-prefix}-rmb:before, -.#{$fa-css-prefix}-yen:before, -.#{$fa-css-prefix}-jpy:before { content: $fa-var-jpy; } -.#{$fa-css-prefix}-ruble:before, -.#{$fa-css-prefix}-rouble:before, -.#{$fa-css-prefix}-rub:before { content: $fa-var-rub; } -.#{$fa-css-prefix}-won:before, -.#{$fa-css-prefix}-krw:before { content: $fa-var-krw; } -.#{$fa-css-prefix}-bitcoin:before, -.#{$fa-css-prefix}-btc:before { content: $fa-var-btc; } -.#{$fa-css-prefix}-file:before { content: $fa-var-file; } -.#{$fa-css-prefix}-file-text:before { content: $fa-var-file-text; } -.#{$fa-css-prefix}-sort-alpha-asc:before { content: $fa-var-sort-alpha-asc; } -.#{$fa-css-prefix}-sort-alpha-desc:before { content: $fa-var-sort-alpha-desc; } -.#{$fa-css-prefix}-sort-amount-asc:before { content: $fa-var-sort-amount-asc; } -.#{$fa-css-prefix}-sort-amount-desc:before { content: $fa-var-sort-amount-desc; } -.#{$fa-css-prefix}-sort-numeric-asc:before { content: $fa-var-sort-numeric-asc; } -.#{$fa-css-prefix}-sort-numeric-desc:before { content: $fa-var-sort-numeric-desc; } -.#{$fa-css-prefix}-thumbs-up:before { content: $fa-var-thumbs-up; } -.#{$fa-css-prefix}-thumbs-down:before { content: $fa-var-thumbs-down; } -.#{$fa-css-prefix}-youtube-square:before { content: $fa-var-youtube-square; } -.#{$fa-css-prefix}-youtube:before { content: $fa-var-youtube; } -.#{$fa-css-prefix}-xing:before { content: $fa-var-xing; } -.#{$fa-css-prefix}-xing-square:before { content: $fa-var-xing-square; } -.#{$fa-css-prefix}-youtube-play:before { content: $fa-var-youtube-play; } -.#{$fa-css-prefix}-dropbox:before { content: $fa-var-dropbox; } -.#{$fa-css-prefix}-stack-overflow:before { content: $fa-var-stack-overflow; } -.#{$fa-css-prefix}-instagram:before { content: $fa-var-instagram; } -.#{$fa-css-prefix}-flickr:before { content: $fa-var-flickr; } -.#{$fa-css-prefix}-adn:before { content: $fa-var-adn; } -.#{$fa-css-prefix}-bitbucket:before { content: $fa-var-bitbucket; } -.#{$fa-css-prefix}-bitbucket-square:before { content: $fa-var-bitbucket-square; } -.#{$fa-css-prefix}-tumblr:before { content: $fa-var-tumblr; } -.#{$fa-css-prefix}-tumblr-square:before { content: $fa-var-tumblr-square; } -.#{$fa-css-prefix}-long-arrow-down:before { content: $fa-var-long-arrow-down; } -.#{$fa-css-prefix}-long-arrow-up:before { content: $fa-var-long-arrow-up; } -.#{$fa-css-prefix}-long-arrow-left:before { content: $fa-var-long-arrow-left; } -.#{$fa-css-prefix}-long-arrow-right:before { content: $fa-var-long-arrow-right; } -.#{$fa-css-prefix}-apple:before { content: $fa-var-apple; } -.#{$fa-css-prefix}-windows:before { content: $fa-var-windows; } -.#{$fa-css-prefix}-android:before { content: $fa-var-android; } -.#{$fa-css-prefix}-linux:before { content: $fa-var-linux; } -.#{$fa-css-prefix}-dribbble:before { content: $fa-var-dribbble; } -.#{$fa-css-prefix}-skype:before { content: $fa-var-skype; } -.#{$fa-css-prefix}-foursquare:before { content: $fa-var-foursquare; } -.#{$fa-css-prefix}-trello:before { content: $fa-var-trello; } -.#{$fa-css-prefix}-female:before { content: $fa-var-female; } -.#{$fa-css-prefix}-male:before { content: $fa-var-male; } -.#{$fa-css-prefix}-gittip:before { content: $fa-var-gittip; } -.#{$fa-css-prefix}-sun-o:before { content: $fa-var-sun-o; } -.#{$fa-css-prefix}-moon-o:before { content: $fa-var-moon-o; } -.#{$fa-css-prefix}-archive:before { content: $fa-var-archive; } -.#{$fa-css-prefix}-bug:before { content: $fa-var-bug; } -.#{$fa-css-prefix}-vk:before { content: $fa-var-vk; } -.#{$fa-css-prefix}-weibo:before { content: $fa-var-weibo; } -.#{$fa-css-prefix}-renren:before { content: $fa-var-renren; } -.#{$fa-css-prefix}-pagelines:before { content: $fa-var-pagelines; } -.#{$fa-css-prefix}-stack-exchange:before { content: $fa-var-stack-exchange; } -.#{$fa-css-prefix}-arrow-circle-o-right:before { content: $fa-var-arrow-circle-o-right; } -.#{$fa-css-prefix}-arrow-circle-o-left:before { content: $fa-var-arrow-circle-o-left; } -.#{$fa-css-prefix}-toggle-left:before, -.#{$fa-css-prefix}-caret-square-o-left:before { content: $fa-var-caret-square-o-left; } -.#{$fa-css-prefix}-dot-circle-o:before { content: $fa-var-dot-circle-o; } -.#{$fa-css-prefix}-wheelchair:before { content: $fa-var-wheelchair; } -.#{$fa-css-prefix}-vimeo-square:before { content: $fa-var-vimeo-square; } -.#{$fa-css-prefix}-turkish-lira:before, -.#{$fa-css-prefix}-try:before { content: $fa-var-try; } -.#{$fa-css-prefix}-plus-square-o:before { content: $fa-var-plus-square-o; } -.#{$fa-css-prefix}-space-shuttle:before { content: $fa-var-space-shuttle; } -.#{$fa-css-prefix}-slack:before { content: $fa-var-slack; } -.#{$fa-css-prefix}-envelope-square:before { content: $fa-var-envelope-square; } -.#{$fa-css-prefix}-wordpress:before { content: $fa-var-wordpress; } -.#{$fa-css-prefix}-openid:before { content: $fa-var-openid; } -.#{$fa-css-prefix}-institution:before, -.#{$fa-css-prefix}-bank:before, -.#{$fa-css-prefix}-university:before { content: $fa-var-university; } -.#{$fa-css-prefix}-mortar-board:before, -.#{$fa-css-prefix}-graduation-cap:before { content: $fa-var-graduation-cap; } -.#{$fa-css-prefix}-yahoo:before { content: $fa-var-yahoo; } -.#{$fa-css-prefix}-google:before { content: $fa-var-google; } -.#{$fa-css-prefix}-reddit:before { content: $fa-var-reddit; } -.#{$fa-css-prefix}-reddit-square:before { content: $fa-var-reddit-square; } -.#{$fa-css-prefix}-stumbleupon-circle:before { content: $fa-var-stumbleupon-circle; } -.#{$fa-css-prefix}-stumbleupon:before { content: $fa-var-stumbleupon; } -.#{$fa-css-prefix}-delicious:before { content: $fa-var-delicious; } -.#{$fa-css-prefix}-digg:before { content: $fa-var-digg; } -.#{$fa-css-prefix}-pied-piper-square:before, -.#{$fa-css-prefix}-pied-piper:before { content: $fa-var-pied-piper; } -.#{$fa-css-prefix}-pied-piper-alt:before { content: $fa-var-pied-piper-alt; } -.#{$fa-css-prefix}-drupal:before { content: $fa-var-drupal; } -.#{$fa-css-prefix}-joomla:before { content: $fa-var-joomla; } -.#{$fa-css-prefix}-language:before { content: $fa-var-language; } -.#{$fa-css-prefix}-fax:before { content: $fa-var-fax; } -.#{$fa-css-prefix}-building:before { content: $fa-var-building; } -.#{$fa-css-prefix}-child:before { content: $fa-var-child; } -.#{$fa-css-prefix}-paw:before { content: $fa-var-paw; } -.#{$fa-css-prefix}-spoon:before { content: $fa-var-spoon; } -.#{$fa-css-prefix}-cube:before { content: $fa-var-cube; } -.#{$fa-css-prefix}-cubes:before { content: $fa-var-cubes; } -.#{$fa-css-prefix}-behance:before { content: $fa-var-behance; } -.#{$fa-css-prefix}-behance-square:before { content: $fa-var-behance-square; } -.#{$fa-css-prefix}-steam:before { content: $fa-var-steam; } -.#{$fa-css-prefix}-steam-square:before { content: $fa-var-steam-square; } -.#{$fa-css-prefix}-recycle:before { content: $fa-var-recycle; } -.#{$fa-css-prefix}-automobile:before, -.#{$fa-css-prefix}-car:before { content: $fa-var-car; } -.#{$fa-css-prefix}-cab:before, -.#{$fa-css-prefix}-taxi:before { content: $fa-var-taxi; } -.#{$fa-css-prefix}-tree:before { content: $fa-var-tree; } -.#{$fa-css-prefix}-spotify:before { content: $fa-var-spotify; } -.#{$fa-css-prefix}-deviantart:before { content: $fa-var-deviantart; } -.#{$fa-css-prefix}-soundcloud:before { content: $fa-var-soundcloud; } -.#{$fa-css-prefix}-database:before { content: $fa-var-database; } -.#{$fa-css-prefix}-file-pdf-o:before { content: $fa-var-file-pdf-o; } -.#{$fa-css-prefix}-file-word-o:before { content: $fa-var-file-word-o; } -.#{$fa-css-prefix}-file-excel-o:before { content: $fa-var-file-excel-o; } -.#{$fa-css-prefix}-file-powerpoint-o:before { content: $fa-var-file-powerpoint-o; } -.#{$fa-css-prefix}-file-photo-o:before, -.#{$fa-css-prefix}-file-picture-o:before, -.#{$fa-css-prefix}-file-image-o:before { content: $fa-var-file-image-o; } -.#{$fa-css-prefix}-file-zip-o:before, -.#{$fa-css-prefix}-file-archive-o:before { content: $fa-var-file-archive-o; } -.#{$fa-css-prefix}-file-sound-o:before, -.#{$fa-css-prefix}-file-audio-o:before { content: $fa-var-file-audio-o; } -.#{$fa-css-prefix}-file-movie-o:before, -.#{$fa-css-prefix}-file-video-o:before { content: $fa-var-file-video-o; } -.#{$fa-css-prefix}-file-code-o:before { content: $fa-var-file-code-o; } -.#{$fa-css-prefix}-vine:before { content: $fa-var-vine; } -.#{$fa-css-prefix}-codepen:before { content: $fa-var-codepen; } -.#{$fa-css-prefix}-jsfiddle:before { content: $fa-var-jsfiddle; } -.#{$fa-css-prefix}-life-bouy:before, -.#{$fa-css-prefix}-life-saver:before, -.#{$fa-css-prefix}-support:before, -.#{$fa-css-prefix}-life-ring:before { content: $fa-var-life-ring; } -.#{$fa-css-prefix}-circle-o-notch:before { content: $fa-var-circle-o-notch; } -.#{$fa-css-prefix}-ra:before, -.#{$fa-css-prefix}-rebel:before { content: $fa-var-rebel; } -.#{$fa-css-prefix}-ge:before, -.#{$fa-css-prefix}-empire:before { content: $fa-var-empire; } -.#{$fa-css-prefix}-git-square:before { content: $fa-var-git-square; } -.#{$fa-css-prefix}-git:before { content: $fa-var-git; } -.#{$fa-css-prefix}-hacker-news:before { content: $fa-var-hacker-news; } -.#{$fa-css-prefix}-tencent-weibo:before { content: $fa-var-tencent-weibo; } -.#{$fa-css-prefix}-qq:before { content: $fa-var-qq; } -.#{$fa-css-prefix}-wechat:before, -.#{$fa-css-prefix}-weixin:before { content: $fa-var-weixin; } -.#{$fa-css-prefix}-send:before, -.#{$fa-css-prefix}-paper-plane:before { content: $fa-var-paper-plane; } -.#{$fa-css-prefix}-send-o:before, -.#{$fa-css-prefix}-paper-plane-o:before { content: $fa-var-paper-plane-o; } -.#{$fa-css-prefix}-history:before { content: $fa-var-history; } -.#{$fa-css-prefix}-circle-thin:before { content: $fa-var-circle-thin; } -.#{$fa-css-prefix}-header:before { content: $fa-var-header; } -.#{$fa-css-prefix}-paragraph:before { content: $fa-var-paragraph; } -.#{$fa-css-prefix}-sliders:before { content: $fa-var-sliders; } -.#{$fa-css-prefix}-share-alt:before { content: $fa-var-share-alt; } -.#{$fa-css-prefix}-share-alt-square:before { content: $fa-var-share-alt-square; } -.#{$fa-css-prefix}-bomb:before { content: $fa-var-bomb; } +.#{variables.$fa-css-prefix}-glass:before { content: variables.$fa-var-glass; } +.#{variables.$fa-css-prefix}-music:before { content: variables.$fa-var-music; } +.#{variables.$fa-css-prefix}-search:before { content: variables.$fa-var-search; } +.#{variables.$fa-css-prefix}-envelope-o:before { content: variables.$fa-var-envelope-o; } +.#{variables.$fa-css-prefix}-heart:before { content: variables.$fa-var-heart; } +.#{variables.$fa-css-prefix}-star:before { content: variables.$fa-var-star; } +.#{variables.$fa-css-prefix}-star-o:before { content: variables.$fa-var-star-o; } +.#{variables.$fa-css-prefix}-user:before { content: variables.$fa-var-user; } +.#{variables.$fa-css-prefix}-film:before { content: variables.$fa-var-film; } +.#{variables.$fa-css-prefix}-th-large:before { content: variables.$fa-var-th-large; } +.#{variables.$fa-css-prefix}-th:before { content: variables.$fa-var-th; } +.#{variables.$fa-css-prefix}-th-list:before { content: variables.$fa-var-th-list; } +.#{variables.$fa-css-prefix}-check:before { content: variables.$fa-var-check; } +.#{variables.$fa-css-prefix}-times:before { content: variables.$fa-var-times; } +.#{variables.$fa-css-prefix}-search-plus:before { content: variables.$fa-var-search-plus; } +.#{variables.$fa-css-prefix}-search-minus:before { content: variables.$fa-var-search-minus; } +.#{variables.$fa-css-prefix}-power-off:before { content: variables.$fa-var-power-off; } +.#{variables.$fa-css-prefix}-signal:before { content: variables.$fa-var-signal; } +.#{variables.$fa-css-prefix}-gear:before, +.#{variables.$fa-css-prefix}-cog:before { content: variables.$fa-var-cog; } +.#{variables.$fa-css-prefix}-trash-o:before { content: variables.$fa-var-trash-o; } +.#{variables.$fa-css-prefix}-home:before { content: variables.$fa-var-home; } +.#{variables.$fa-css-prefix}-file-o:before { content: variables.$fa-var-file-o; } +.#{variables.$fa-css-prefix}-clock-o:before { content: variables.$fa-var-clock-o; } +.#{variables.$fa-css-prefix}-road:before { content: variables.$fa-var-road; } +.#{variables.$fa-css-prefix}-download:before { content: variables.$fa-var-download; } +.#{variables.$fa-css-prefix}-arrow-circle-o-down:before { content: variables.$fa-var-arrow-circle-o-down; } +.#{variables.$fa-css-prefix}-arrow-circle-o-up:before { content: variables.$fa-var-arrow-circle-o-up; } +.#{variables.$fa-css-prefix}-inbox:before { content: variables.$fa-var-inbox; } +.#{variables.$fa-css-prefix}-play-circle-o:before { content: variables.$fa-var-play-circle-o; } +.#{variables.$fa-css-prefix}-rotate-right:before, +.#{variables.$fa-css-prefix}-repeat:before { content: variables.$fa-var-repeat; } +.#{variables.$fa-css-prefix}-refresh:before { content: variables.$fa-var-refresh; } +.#{variables.$fa-css-prefix}-list-alt:before { content: variables.$fa-var-list-alt; } +.#{variables.$fa-css-prefix}-lock:before { content: variables.$fa-var-lock; } +.#{variables.$fa-css-prefix}-flag:before { content: variables.$fa-var-flag; } +.#{variables.$fa-css-prefix}-headphones:before { content: variables.$fa-var-headphones; } +.#{variables.$fa-css-prefix}-volume-off:before { content: variables.$fa-var-volume-off; } +.#{variables.$fa-css-prefix}-volume-down:before { content: variables.$fa-var-volume-down; } +.#{variables.$fa-css-prefix}-volume-up:before { content: variables.$fa-var-volume-up; } +.#{variables.$fa-css-prefix}-qrcode:before { content: variables.$fa-var-qrcode; } +.#{variables.$fa-css-prefix}-barcode:before { content: variables.$fa-var-barcode; } +.#{variables.$fa-css-prefix}-tag:before { content: variables.$fa-var-tag; } +.#{variables.$fa-css-prefix}-tags:before { content: variables.$fa-var-tags; } +.#{variables.$fa-css-prefix}-book:before { content: variables.$fa-var-book; } +.#{variables.$fa-css-prefix}-bookmark:before { content: variables.$fa-var-bookmark; } +.#{variables.$fa-css-prefix}-print:before { content: variables.$fa-var-print; } +.#{variables.$fa-css-prefix}-camera:before { content: variables.$fa-var-camera; } +.#{variables.$fa-css-prefix}-font:before { content: variables.$fa-var-font; } +.#{variables.$fa-css-prefix}-bold:before { content: variables.$fa-var-bold; } +.#{variables.$fa-css-prefix}-italic:before { content: variables.$fa-var-italic; } +.#{variables.$fa-css-prefix}-text-height:before { content: variables.$fa-var-text-height; } +.#{variables.$fa-css-prefix}-text-width:before { content: variables.$fa-var-text-width; } +.#{variables.$fa-css-prefix}-align-left:before { content: variables.$fa-var-align-left; } +.#{variables.$fa-css-prefix}-align-center:before { content: variables.$fa-var-align-center; } +.#{variables.$fa-css-prefix}-align-right:before { content: variables.$fa-var-align-right; } +.#{variables.$fa-css-prefix}-align-justify:before { content: variables.$fa-var-align-justify; } +.#{variables.$fa-css-prefix}-list:before { content: variables.$fa-var-list; } +.#{variables.$fa-css-prefix}-dedent:before, +.#{variables.$fa-css-prefix}-outdent:before { content: variables.$fa-var-outdent; } +.#{variables.$fa-css-prefix}-indent:before { content: variables.$fa-var-indent; } +.#{variables.$fa-css-prefix}-video-camera:before { content: variables.$fa-var-video-camera; } +.#{variables.$fa-css-prefix}-photo:before, +.#{variables.$fa-css-prefix}-image:before, +.#{variables.$fa-css-prefix}-picture-o:before { content: variables.$fa-var-picture-o; } +.#{variables.$fa-css-prefix}-pencil:before { content: variables.$fa-var-pencil; } +.#{variables.$fa-css-prefix}-map-marker:before { content: variables.$fa-var-map-marker; } +.#{variables.$fa-css-prefix}-adjust:before { content: variables.$fa-var-adjust; } +.#{variables.$fa-css-prefix}-tint:before { content: variables.$fa-var-tint; } +.#{variables.$fa-css-prefix}-edit:before, +.#{variables.$fa-css-prefix}-pencil-square-o:before { content: variables.$fa-var-pencil-square-o; } +.#{variables.$fa-css-prefix}-share-square-o:before { content: variables.$fa-var-share-square-o; } +.#{variables.$fa-css-prefix}-check-square-o:before { content: variables.$fa-var-check-square-o; } +.#{variables.$fa-css-prefix}-arrows:before { content: variables.$fa-var-arrows; } +.#{variables.$fa-css-prefix}-step-backward:before { content: variables.$fa-var-step-backward; } +.#{variables.$fa-css-prefix}-fast-backward:before { content: variables.$fa-var-fast-backward; } +.#{variables.$fa-css-prefix}-backward:before { content: variables.$fa-var-backward; } +.#{variables.$fa-css-prefix}-play:before { content: variables.$fa-var-play; } +.#{variables.$fa-css-prefix}-pause:before { content: variables.$fa-var-pause; } +.#{variables.$fa-css-prefix}-stop:before { content: variables.$fa-var-stop; } +.#{variables.$fa-css-prefix}-forward:before { content: variables.$fa-var-forward; } +.#{variables.$fa-css-prefix}-fast-forward:before { content: variables.$fa-var-fast-forward; } +.#{variables.$fa-css-prefix}-step-forward:before { content: variables.$fa-var-step-forward; } +.#{variables.$fa-css-prefix}-eject:before { content: variables.$fa-var-eject; } +.#{variables.$fa-css-prefix}-chevron-left:before { content: variables.$fa-var-chevron-left; } +.#{variables.$fa-css-prefix}-chevron-right:before { content: variables.$fa-var-chevron-right; } +.#{variables.$fa-css-prefix}-plus-circle:before { content: variables.$fa-var-plus-circle; } +.#{variables.$fa-css-prefix}-minus-circle:before { content: variables.$fa-var-minus-circle; } +.#{variables.$fa-css-prefix}-times-circle:before { content: variables.$fa-var-times-circle; } +.#{variables.$fa-css-prefix}-check-circle:before { content: variables.$fa-var-check-circle; } +.#{variables.$fa-css-prefix}-question-circle:before { content: variables.$fa-var-question-circle; } +.#{variables.$fa-css-prefix}-info-circle:before { content: variables.$fa-var-info-circle; } +.#{variables.$fa-css-prefix}-crosshairs:before { content: variables.$fa-var-crosshairs; } +.#{variables.$fa-css-prefix}-times-circle-o:before { content: variables.$fa-var-times-circle-o; } +.#{variables.$fa-css-prefix}-check-circle-o:before { content: variables.$fa-var-check-circle-o; } +.#{variables.$fa-css-prefix}-ban:before { content: variables.$fa-var-ban; } +.#{variables.$fa-css-prefix}-arrow-left:before { content: variables.$fa-var-arrow-left; } +.#{variables.$fa-css-prefix}-arrow-right:before { content: variables.$fa-var-arrow-right; } +.#{variables.$fa-css-prefix}-arrow-up:before { content: variables.$fa-var-arrow-up; } +.#{variables.$fa-css-prefix}-arrow-down:before { content: variables.$fa-var-arrow-down; } +.#{variables.$fa-css-prefix}-mail-forward:before, +.#{variables.$fa-css-prefix}-share:before { content: variables.$fa-var-share; } +.#{variables.$fa-css-prefix}-expand:before { content: variables.$fa-var-expand; } +.#{variables.$fa-css-prefix}-compress:before { content: variables.$fa-var-compress; } +.#{variables.$fa-css-prefix}-plus:before { content: variables.$fa-var-plus; } +.#{variables.$fa-css-prefix}-minus:before { content: variables.$fa-var-minus; } +.#{variables.$fa-css-prefix}-asterisk:before { content: variables.$fa-var-asterisk; } +.#{variables.$fa-css-prefix}-exclamation-circle:before { content: variables.$fa-var-exclamation-circle; } +.#{variables.$fa-css-prefix}-gift:before { content: variables.$fa-var-gift; } +.#{variables.$fa-css-prefix}-leaf:before { content: variables.$fa-var-leaf; } +.#{variables.$fa-css-prefix}-fire:before { content: variables.$fa-var-fire; } +.#{variables.$fa-css-prefix}-eye:before { content: variables.$fa-var-eye; } +.#{variables.$fa-css-prefix}-eye-slash:before { content: variables.$fa-var-eye-slash; } +.#{variables.$fa-css-prefix}-warning:before, +.#{variables.$fa-css-prefix}-exclamation-triangle:before { content: variables.$fa-var-exclamation-triangle; } +.#{variables.$fa-css-prefix}-plane:before { content: variables.$fa-var-plane; } +.#{variables.$fa-css-prefix}-calendar:before { content: variables.$fa-var-calendar; } +.#{variables.$fa-css-prefix}-random:before { content: variables.$fa-var-random; } +.#{variables.$fa-css-prefix}-comment:before { content: variables.$fa-var-comment; } +.#{variables.$fa-css-prefix}-magnet:before { content: variables.$fa-var-magnet; } +.#{variables.$fa-css-prefix}-chevron-up:before { content: variables.$fa-var-chevron-up; } +.#{variables.$fa-css-prefix}-chevron-down:before { content: variables.$fa-var-chevron-down; } +.#{variables.$fa-css-prefix}-retweet:before { content: variables.$fa-var-retweet; } +.#{variables.$fa-css-prefix}-shopping-cart:before { content: variables.$fa-var-shopping-cart; } +.#{variables.$fa-css-prefix}-folder:before { content: variables.$fa-var-folder; } +.#{variables.$fa-css-prefix}-folder-open:before { content: variables.$fa-var-folder-open; } +.#{variables.$fa-css-prefix}-arrows-v:before { content: variables.$fa-var-arrows-v; } +.#{variables.$fa-css-prefix}-arrows-h:before { content: variables.$fa-var-arrows-h; } +.#{variables.$fa-css-prefix}-bar-chart-o:before { content: variables.$fa-var-bar-chart-o; } +.#{variables.$fa-css-prefix}-twitter-square:before { content: variables.$fa-var-twitter-square; } +.#{variables.$fa-css-prefix}-facebook-square:before { content: variables.$fa-var-facebook-square; } +.#{variables.$fa-css-prefix}-camera-retro:before { content: variables.$fa-var-camera-retro; } +.#{variables.$fa-css-prefix}-key:before { content: variables.$fa-var-key; } +.#{variables.$fa-css-prefix}-gears:before, +.#{variables.$fa-css-prefix}-cogs:before { content: variables.$fa-var-cogs; } +.#{variables.$fa-css-prefix}-comments:before { content: variables.$fa-var-comments; } +.#{variables.$fa-css-prefix}-thumbs-o-up:before { content: variables.$fa-var-thumbs-o-up; } +.#{variables.$fa-css-prefix}-thumbs-o-down:before { content: variables.$fa-var-thumbs-o-down; } +.#{variables.$fa-css-prefix}-star-half:before { content: variables.$fa-var-star-half; } +.#{variables.$fa-css-prefix}-heart-o:before { content: variables.$fa-var-heart-o; } +.#{variables.$fa-css-prefix}-sign-out:before { content: variables.$fa-var-sign-out; } +.#{variables.$fa-css-prefix}-linkedin-square:before { content: variables.$fa-var-linkedin-square; } +.#{variables.$fa-css-prefix}-thumb-tack:before { content: variables.$fa-var-thumb-tack; } +.#{variables.$fa-css-prefix}-external-link:before { content: variables.$fa-var-external-link; } +.#{variables.$fa-css-prefix}-sign-in:before { content: variables.$fa-var-sign-in; } +.#{variables.$fa-css-prefix}-trophy:before { content: variables.$fa-var-trophy; } +.#{variables.$fa-css-prefix}-github-square:before { content: variables.$fa-var-github-square; } +.#{variables.$fa-css-prefix}-upload:before { content: variables.$fa-var-upload; } +.#{variables.$fa-css-prefix}-lemon-o:before { content: variables.$fa-var-lemon-o; } +.#{variables.$fa-css-prefix}-phone:before { content: variables.$fa-var-phone; } +.#{variables.$fa-css-prefix}-square-o:before { content: variables.$fa-var-square-o; } +.#{variables.$fa-css-prefix}-bookmark-o:before { content: variables.$fa-var-bookmark-o; } +.#{variables.$fa-css-prefix}-phone-square:before { content: variables.$fa-var-phone-square; } +.#{variables.$fa-css-prefix}-twitter:before { content: variables.$fa-var-twitter; } +.#{variables.$fa-css-prefix}-facebook:before { content: variables.$fa-var-facebook; } +.#{variables.$fa-css-prefix}-github:before { content: variables.$fa-var-github; } +.#{variables.$fa-css-prefix}-unlock:before { content: variables.$fa-var-unlock; } +.#{variables.$fa-css-prefix}-credit-card:before { content: variables.$fa-var-credit-card; } +.#{variables.$fa-css-prefix}-rss:before { content: variables.$fa-var-rss; } +.#{variables.$fa-css-prefix}-hdd-o:before { content: variables.$fa-var-hdd-o; } +.#{variables.$fa-css-prefix}-bullhorn:before { content: variables.$fa-var-bullhorn; } +.#{variables.$fa-css-prefix}-bell:before { content: variables.$fa-var-bell; } +.#{variables.$fa-css-prefix}-certificate:before { content: variables.$fa-var-certificate; } +.#{variables.$fa-css-prefix}-hand-o-right:before { content: variables.$fa-var-hand-o-right; } +.#{variables.$fa-css-prefix}-hand-o-left:before { content: variables.$fa-var-hand-o-left; } +.#{variables.$fa-css-prefix}-hand-o-up:before { content: variables.$fa-var-hand-o-up; } +.#{variables.$fa-css-prefix}-hand-o-down:before { content: variables.$fa-var-hand-o-down; } +.#{variables.$fa-css-prefix}-arrow-circle-left:before { content: variables.$fa-var-arrow-circle-left; } +.#{variables.$fa-css-prefix}-arrow-circle-right:before { content: variables.$fa-var-arrow-circle-right; } +.#{variables.$fa-css-prefix}-arrow-circle-up:before { content: variables.$fa-var-arrow-circle-up; } +.#{variables.$fa-css-prefix}-arrow-circle-down:before { content: variables.$fa-var-arrow-circle-down; } +.#{variables.$fa-css-prefix}-globe:before { content: variables.$fa-var-globe; } +.#{variables.$fa-css-prefix}-wrench:before { content: variables.$fa-var-wrench; } +.#{variables.$fa-css-prefix}-tasks:before { content: variables.$fa-var-tasks; } +.#{variables.$fa-css-prefix}-filter:before { content: variables.$fa-var-filter; } +.#{variables.$fa-css-prefix}-briefcase:before { content: variables.$fa-var-briefcase; } +.#{variables.$fa-css-prefix}-arrows-alt:before { content: variables.$fa-var-arrows-alt; } +.#{variables.$fa-css-prefix}-group:before, +.#{variables.$fa-css-prefix}-users:before { content: variables.$fa-var-users; } +.#{variables.$fa-css-prefix}-chain:before, +.#{variables.$fa-css-prefix}-link:before { content: variables.$fa-var-link; } +.#{variables.$fa-css-prefix}-cloud:before { content: variables.$fa-var-cloud; } +.#{variables.$fa-css-prefix}-flask:before { content: variables.$fa-var-flask; } +.#{variables.$fa-css-prefix}-cut:before, +.#{variables.$fa-css-prefix}-scissors:before { content: variables.$fa-var-scissors; } +.#{variables.$fa-css-prefix}-copy:before, +.#{variables.$fa-css-prefix}-files-o:before { content: variables.$fa-var-files-o; } +.#{variables.$fa-css-prefix}-paperclip:before { content: variables.$fa-var-paperclip; } +.#{variables.$fa-css-prefix}-save:before, +.#{variables.$fa-css-prefix}-floppy-o:before { content: variables.$fa-var-floppy-o; } +.#{variables.$fa-css-prefix}-square:before { content: variables.$fa-var-square; } +.#{variables.$fa-css-prefix}-navicon:before, +.#{variables.$fa-css-prefix}-reorder:before, +.#{variables.$fa-css-prefix}-bars:before { content: variables.$fa-var-bars; } +.#{variables.$fa-css-prefix}-list-ul:before { content: variables.$fa-var-list-ul; } +.#{variables.$fa-css-prefix}-list-ol:before { content: variables.$fa-var-list-ol; } +.#{variables.$fa-css-prefix}-strikethrough:before { content: variables.$fa-var-strikethrough; } +.#{variables.$fa-css-prefix}-underline:before { content: variables.$fa-var-underline; } +.#{variables.$fa-css-prefix}-table:before { content: variables.$fa-var-table; } +.#{variables.$fa-css-prefix}-magic:before { content: variables.$fa-var-magic; } +.#{variables.$fa-css-prefix}-truck:before { content: variables.$fa-var-truck; } +.#{variables.$fa-css-prefix}-pinterest:before { content: variables.$fa-var-pinterest; } +.#{variables.$fa-css-prefix}-pinterest-square:before { content: variables.$fa-var-pinterest-square; } +.#{variables.$fa-css-prefix}-google-plus-square:before { content: variables.$fa-var-google-plus-square; } +.#{variables.$fa-css-prefix}-google-plus:before { content: variables.$fa-var-google-plus; } +.#{variables.$fa-css-prefix}-money:before { content: variables.$fa-var-money; } +.#{variables.$fa-css-prefix}-caret-down:before { content: variables.$fa-var-caret-down; } +.#{variables.$fa-css-prefix}-caret-up:before { content: variables.$fa-var-caret-up; } +.#{variables.$fa-css-prefix}-caret-left:before { content: variables.$fa-var-caret-left; } +.#{variables.$fa-css-prefix}-caret-right:before { content: variables.$fa-var-caret-right; } +.#{variables.$fa-css-prefix}-columns:before { content: variables.$fa-var-columns; } +.#{variables.$fa-css-prefix}-unsorted:before, +.#{variables.$fa-css-prefix}-sort:before { content: variables.$fa-var-sort; } +.#{variables.$fa-css-prefix}-sort-down:before, +.#{variables.$fa-css-prefix}-sort-desc:before { content: variables.$fa-var-sort-desc; } +.#{variables.$fa-css-prefix}-sort-up:before, +.#{variables.$fa-css-prefix}-sort-asc:before { content: variables.$fa-var-sort-asc; } +.#{variables.$fa-css-prefix}-envelope:before { content: variables.$fa-var-envelope; } +.#{variables.$fa-css-prefix}-linkedin:before { content: variables.$fa-var-linkedin; } +.#{variables.$fa-css-prefix}-rotate-left:before, +.#{variables.$fa-css-prefix}-undo:before { content: variables.$fa-var-undo; } +.#{variables.$fa-css-prefix}-legal:before, +.#{variables.$fa-css-prefix}-gavel:before { content: variables.$fa-var-gavel; } +.#{variables.$fa-css-prefix}-dashboard:before, +.#{variables.$fa-css-prefix}-tachometer:before { content: variables.$fa-var-tachometer; } +.#{variables.$fa-css-prefix}-comment-o:before { content: variables.$fa-var-comment-o; } +.#{variables.$fa-css-prefix}-comments-o:before { content: variables.$fa-var-comments-o; } +.#{variables.$fa-css-prefix}-flash:before, +.#{variables.$fa-css-prefix}-bolt:before { content: variables.$fa-var-bolt; } +.#{variables.$fa-css-prefix}-sitemap:before { content: variables.$fa-var-sitemap; } +.#{variables.$fa-css-prefix}-umbrella:before { content: variables.$fa-var-umbrella; } +.#{variables.$fa-css-prefix}-paste:before, +.#{variables.$fa-css-prefix}-clipboard:before { content: variables.$fa-var-clipboard; } +.#{variables.$fa-css-prefix}-lightbulb-o:before { content: variables.$fa-var-lightbulb-o; } +.#{variables.$fa-css-prefix}-exchange:before { content: variables.$fa-var-exchange; } +.#{variables.$fa-css-prefix}-cloud-download:before { content: variables.$fa-var-cloud-download; } +.#{variables.$fa-css-prefix}-cloud-upload:before { content: variables.$fa-var-cloud-upload; } +.#{variables.$fa-css-prefix}-user-md:before { content: variables.$fa-var-user-md; } +.#{variables.$fa-css-prefix}-stethoscope:before { content: variables.$fa-var-stethoscope; } +.#{variables.$fa-css-prefix}-suitcase:before { content: variables.$fa-var-suitcase; } +.#{variables.$fa-css-prefix}-bell-o:before { content: variables.$fa-var-bell-o; } +.#{variables.$fa-css-prefix}-coffee:before { content: variables.$fa-var-coffee; } +.#{variables.$fa-css-prefix}-cutlery:before { content: variables.$fa-var-cutlery; } +.#{variables.$fa-css-prefix}-file-text-o:before { content: variables.$fa-var-file-text-o; } +.#{variables.$fa-css-prefix}-building-o:before { content: variables.$fa-var-building-o; } +.#{variables.$fa-css-prefix}-hospital-o:before { content: variables.$fa-var-hospital-o; } +.#{variables.$fa-css-prefix}-ambulance:before { content: variables.$fa-var-ambulance; } +.#{variables.$fa-css-prefix}-medkit:before { content: variables.$fa-var-medkit; } +.#{variables.$fa-css-prefix}-fighter-jet:before { content: variables.$fa-var-fighter-jet; } +.#{variables.$fa-css-prefix}-beer:before { content: variables.$fa-var-beer; } +.#{variables.$fa-css-prefix}-h-square:before { content: variables.$fa-var-h-square; } +.#{variables.$fa-css-prefix}-plus-square:before { content: variables.$fa-var-plus-square; } +.#{variables.$fa-css-prefix}-angle-double-left:before { content: variables.$fa-var-angle-double-left; } +.#{variables.$fa-css-prefix}-angle-double-right:before { content: variables.$fa-var-angle-double-right; } +.#{variables.$fa-css-prefix}-angle-double-up:before { content: variables.$fa-var-angle-double-up; } +.#{variables.$fa-css-prefix}-angle-double-down:before { content: variables.$fa-var-angle-double-down; } +.#{variables.$fa-css-prefix}-angle-left:before { content: variables.$fa-var-angle-left; } +.#{variables.$fa-css-prefix}-angle-right:before { content: variables.$fa-var-angle-right; } +.#{variables.$fa-css-prefix}-angle-up:before { content: variables.$fa-var-angle-up; } +.#{variables.$fa-css-prefix}-angle-down:before { content: variables.$fa-var-angle-down; } +.#{variables.$fa-css-prefix}-desktop:before { content: variables.$fa-var-desktop; } +.#{variables.$fa-css-prefix}-laptop:before { content: variables.$fa-var-laptop; } +.#{variables.$fa-css-prefix}-tablet:before { content: variables.$fa-var-tablet; } +.#{variables.$fa-css-prefix}-mobile-phone:before, +.#{variables.$fa-css-prefix}-mobile:before { content: variables.$fa-var-mobile; } +.#{variables.$fa-css-prefix}-circle-o:before { content: variables.$fa-var-circle-o; } +.#{variables.$fa-css-prefix}-quote-left:before { content: variables.$fa-var-quote-left; } +.#{variables.$fa-css-prefix}-quote-right:before { content: variables.$fa-var-quote-right; } +.#{variables.$fa-css-prefix}-spinner:before { content: variables.$fa-var-spinner; } +.#{variables.$fa-css-prefix}-circle:before { content: variables.$fa-var-circle; } +.#{variables.$fa-css-prefix}-mail-reply:before, +.#{variables.$fa-css-prefix}-reply:before { content: variables.$fa-var-reply; } +.#{variables.$fa-css-prefix}-github-alt:before { content: variables.$fa-var-github-alt; } +.#{variables.$fa-css-prefix}-folder-o:before { content: variables.$fa-var-folder-o; } +.#{variables.$fa-css-prefix}-folder-open-o:before { content: variables.$fa-var-folder-open-o; } +.#{variables.$fa-css-prefix}-smile-o:before { content: variables.$fa-var-smile-o; } +.#{variables.$fa-css-prefix}-frown-o:before { content: variables.$fa-var-frown-o; } +.#{variables.$fa-css-prefix}-meh-o:before { content: variables.$fa-var-meh-o; } +.#{variables.$fa-css-prefix}-gamepad:before { content: variables.$fa-var-gamepad; } +.#{variables.$fa-css-prefix}-keyboard-o:before { content: variables.$fa-var-keyboard-o; } +.#{variables.$fa-css-prefix}-flag-o:before { content: variables.$fa-var-flag-o; } +.#{variables.$fa-css-prefix}-flag-checkered:before { content: variables.$fa-var-flag-checkered; } +.#{variables.$fa-css-prefix}-terminal:before { content: variables.$fa-var-terminal; } +.#{variables.$fa-css-prefix}-code:before { content: variables.$fa-var-code; } +.#{variables.$fa-css-prefix}-mail-reply-all:before, +.#{variables.$fa-css-prefix}-reply-all:before { content: variables.$fa-var-reply-all; } +.#{variables.$fa-css-prefix}-star-half-empty:before, +.#{variables.$fa-css-prefix}-star-half-full:before, +.#{variables.$fa-css-prefix}-star-half-o:before { content: variables.$fa-var-star-half-o; } +.#{variables.$fa-css-prefix}-location-arrow:before { content: variables.$fa-var-location-arrow; } +.#{variables.$fa-css-prefix}-crop:before { content: variables.$fa-var-crop; } +.#{variables.$fa-css-prefix}-code-fork:before { content: variables.$fa-var-code-fork; } +.#{variables.$fa-css-prefix}-unlink:before, +.#{variables.$fa-css-prefix}-chain-broken:before { content: variables.$fa-var-chain-broken; } +.#{variables.$fa-css-prefix}-question:before { content: variables.$fa-var-question; } +.#{variables.$fa-css-prefix}-info:before { content: variables.$fa-var-info; } +.#{variables.$fa-css-prefix}-exclamation:before { content: variables.$fa-var-exclamation; } +.#{variables.$fa-css-prefix}-superscript:before { content: variables.$fa-var-superscript; } +.#{variables.$fa-css-prefix}-subscript:before { content: variables.$fa-var-subscript; } +.#{variables.$fa-css-prefix}-eraser:before { content: variables.$fa-var-eraser; } +.#{variables.$fa-css-prefix}-puzzle-piece:before { content: variables.$fa-var-puzzle-piece; } +.#{variables.$fa-css-prefix}-microphone:before { content: variables.$fa-var-microphone; } +.#{variables.$fa-css-prefix}-microphone-slash:before { content: variables.$fa-var-microphone-slash; } +.#{variables.$fa-css-prefix}-shield:before { content: variables.$fa-var-shield; } +.#{variables.$fa-css-prefix}-calendar-o:before { content: variables.$fa-var-calendar-o; } +.#{variables.$fa-css-prefix}-fire-extinguisher:before { content: variables.$fa-var-fire-extinguisher; } +.#{variables.$fa-css-prefix}-rocket:before { content: variables.$fa-var-rocket; } +.#{variables.$fa-css-prefix}-maxcdn:before { content: variables.$fa-var-maxcdn; } +.#{variables.$fa-css-prefix}-chevron-circle-left:before { content: variables.$fa-var-chevron-circle-left; } +.#{variables.$fa-css-prefix}-chevron-circle-right:before { content: variables.$fa-var-chevron-circle-right; } +.#{variables.$fa-css-prefix}-chevron-circle-up:before { content: variables.$fa-var-chevron-circle-up; } +.#{variables.$fa-css-prefix}-chevron-circle-down:before { content: variables.$fa-var-chevron-circle-down; } +.#{variables.$fa-css-prefix}-html5:before { content: variables.$fa-var-html5; } +.#{variables.$fa-css-prefix}-css3:before { content: variables.$fa-var-css3; } +.#{variables.$fa-css-prefix}-anchor:before { content: variables.$fa-var-anchor; } +.#{variables.$fa-css-prefix}-unlock-alt:before { content: variables.$fa-var-unlock-alt; } +.#{variables.$fa-css-prefix}-bullseye:before { content: variables.$fa-var-bullseye; } +.#{variables.$fa-css-prefix}-ellipsis-h:before { content: variables.$fa-var-ellipsis-h; } +.#{variables.$fa-css-prefix}-ellipsis-v:before { content: variables.$fa-var-ellipsis-v; } +.#{variables.$fa-css-prefix}-rss-square:before { content: variables.$fa-var-rss-square; } +.#{variables.$fa-css-prefix}-play-circle:before { content: variables.$fa-var-play-circle; } +.#{variables.$fa-css-prefix}-ticket:before { content: variables.$fa-var-ticket; } +.#{variables.$fa-css-prefix}-minus-square:before { content: variables.$fa-var-minus-square; } +.#{variables.$fa-css-prefix}-minus-square-o:before { content: variables.$fa-var-minus-square-o; } +.#{variables.$fa-css-prefix}-level-up:before { content: variables.$fa-var-level-up; } +.#{variables.$fa-css-prefix}-level-down:before { content: variables.$fa-var-level-down; } +.#{variables.$fa-css-prefix}-check-square:before { content: variables.$fa-var-check-square; } +.#{variables.$fa-css-prefix}-pencil-square:before { content: variables.$fa-var-pencil-square; } +.#{variables.$fa-css-prefix}-external-link-square:before { content: variables.$fa-var-external-link-square; } +.#{variables.$fa-css-prefix}-share-square:before { content: variables.$fa-var-share-square; } +.#{variables.$fa-css-prefix}-compass:before { content: variables.$fa-var-compass; } +.#{variables.$fa-css-prefix}-toggle-down:before, +.#{variables.$fa-css-prefix}-caret-square-o-down:before { content: variables.$fa-var-caret-square-o-down; } +.#{variables.$fa-css-prefix}-toggle-up:before, +.#{variables.$fa-css-prefix}-caret-square-o-up:before { content: variables.$fa-var-caret-square-o-up; } +.#{variables.$fa-css-prefix}-toggle-right:before, +.#{variables.$fa-css-prefix}-caret-square-o-right:before { content: variables.$fa-var-caret-square-o-right; } +.#{variables.$fa-css-prefix}-euro:before, +.#{variables.$fa-css-prefix}-eur:before { content: variables.$fa-var-eur; } +.#{variables.$fa-css-prefix}-gbp:before { content: variables.$fa-var-gbp; } +.#{variables.$fa-css-prefix}-dollar:before, +.#{variables.$fa-css-prefix}-usd:before { content: variables.$fa-var-usd; } +.#{variables.$fa-css-prefix}-rupee:before, +.#{variables.$fa-css-prefix}-inr:before { content: variables.$fa-var-inr; } +.#{variables.$fa-css-prefix}-cny:before, +.#{variables.$fa-css-prefix}-rmb:before, +.#{variables.$fa-css-prefix}-yen:before, +.#{variables.$fa-css-prefix}-jpy:before { content: variables.$fa-var-jpy; } +.#{variables.$fa-css-prefix}-ruble:before, +.#{variables.$fa-css-prefix}-rouble:before, +.#{variables.$fa-css-prefix}-rub:before { content: variables.$fa-var-rub; } +.#{variables.$fa-css-prefix}-won:before, +.#{variables.$fa-css-prefix}-krw:before { content: variables.$fa-var-krw; } +.#{variables.$fa-css-prefix}-bitcoin:before, +.#{variables.$fa-css-prefix}-btc:before { content: variables.$fa-var-btc; } +.#{variables.$fa-css-prefix}-file:before { content: variables.$fa-var-file; } +.#{variables.$fa-css-prefix}-file-text:before { content: variables.$fa-var-file-text; } +.#{variables.$fa-css-prefix}-sort-alpha-asc:before { content: variables.$fa-var-sort-alpha-asc; } +.#{variables.$fa-css-prefix}-sort-alpha-desc:before { content: variables.$fa-var-sort-alpha-desc; } +.#{variables.$fa-css-prefix}-sort-amount-asc:before { content: variables.$fa-var-sort-amount-asc; } +.#{variables.$fa-css-prefix}-sort-amount-desc:before { content: variables.$fa-var-sort-amount-desc; } +.#{variables.$fa-css-prefix}-sort-numeric-asc:before { content: variables.$fa-var-sort-numeric-asc; } +.#{variables.$fa-css-prefix}-sort-numeric-desc:before { content: variables.$fa-var-sort-numeric-desc; } +.#{variables.$fa-css-prefix}-thumbs-up:before { content: variables.$fa-var-thumbs-up; } +.#{variables.$fa-css-prefix}-thumbs-down:before { content: variables.$fa-var-thumbs-down; } +.#{variables.$fa-css-prefix}-youtube-square:before { content: variables.$fa-var-youtube-square; } +.#{variables.$fa-css-prefix}-youtube:before { content: variables.$fa-var-youtube; } +.#{variables.$fa-css-prefix}-xing:before { content: variables.$fa-var-xing; } +.#{variables.$fa-css-prefix}-xing-square:before { content: variables.$fa-var-xing-square; } +.#{variables.$fa-css-prefix}-youtube-play:before { content: variables.$fa-var-youtube-play; } +.#{variables.$fa-css-prefix}-dropbox:before { content: variables.$fa-var-dropbox; } +.#{variables.$fa-css-prefix}-stack-overflow:before { content: variables.$fa-var-stack-overflow; } +.#{variables.$fa-css-prefix}-instagram:before { content: variables.$fa-var-instagram; } +.#{variables.$fa-css-prefix}-flickr:before { content: variables.$fa-var-flickr; } +.#{variables.$fa-css-prefix}-adn:before { content: variables.$fa-var-adn; } +.#{variables.$fa-css-prefix}-bitbucket:before { content: variables.$fa-var-bitbucket; } +.#{variables.$fa-css-prefix}-bitbucket-square:before { content: variables.$fa-var-bitbucket-square; } +.#{variables.$fa-css-prefix}-tumblr:before { content: variables.$fa-var-tumblr; } +.#{variables.$fa-css-prefix}-tumblr-square:before { content: variables.$fa-var-tumblr-square; } +.#{variables.$fa-css-prefix}-long-arrow-down:before { content: variables.$fa-var-long-arrow-down; } +.#{variables.$fa-css-prefix}-long-arrow-up:before { content: variables.$fa-var-long-arrow-up; } +.#{variables.$fa-css-prefix}-long-arrow-left:before { content: variables.$fa-var-long-arrow-left; } +.#{variables.$fa-css-prefix}-long-arrow-right:before { content: variables.$fa-var-long-arrow-right; } +.#{variables.$fa-css-prefix}-apple:before { content: variables.$fa-var-apple; } +.#{variables.$fa-css-prefix}-windows:before { content: variables.$fa-var-windows; } +.#{variables.$fa-css-prefix}-android:before { content: variables.$fa-var-android; } +.#{variables.$fa-css-prefix}-linux:before { content: variables.$fa-var-linux; } +.#{variables.$fa-css-prefix}-dribbble:before { content: variables.$fa-var-dribbble; } +.#{variables.$fa-css-prefix}-skype:before { content: variables.$fa-var-skype; } +.#{variables.$fa-css-prefix}-foursquare:before { content: variables.$fa-var-foursquare; } +.#{variables.$fa-css-prefix}-trello:before { content: variables.$fa-var-trello; } +.#{variables.$fa-css-prefix}-female:before { content: variables.$fa-var-female; } +.#{variables.$fa-css-prefix}-male:before { content: variables.$fa-var-male; } +.#{variables.$fa-css-prefix}-gittip:before { content: variables.$fa-var-gittip; } +.#{variables.$fa-css-prefix}-sun-o:before { content: variables.$fa-var-sun-o; } +.#{variables.$fa-css-prefix}-moon-o:before { content: variables.$fa-var-moon-o; } +.#{variables.$fa-css-prefix}-archive:before { content: variables.$fa-var-archive; } +.#{variables.$fa-css-prefix}-bug:before { content: variables.$fa-var-bug; } +.#{variables.$fa-css-prefix}-vk:before { content: variables.$fa-var-vk; } +.#{variables.$fa-css-prefix}-weibo:before { content: variables.$fa-var-weibo; } +.#{variables.$fa-css-prefix}-renren:before { content: variables.$fa-var-renren; } +.#{variables.$fa-css-prefix}-pagelines:before { content: variables.$fa-var-pagelines; } +.#{variables.$fa-css-prefix}-stack-exchange:before { content: variables.$fa-var-stack-exchange; } +.#{variables.$fa-css-prefix}-arrow-circle-o-right:before { content: variables.$fa-var-arrow-circle-o-right; } +.#{variables.$fa-css-prefix}-arrow-circle-o-left:before { content: variables.$fa-var-arrow-circle-o-left; } +.#{variables.$fa-css-prefix}-toggle-left:before, +.#{variables.$fa-css-prefix}-caret-square-o-left:before { content: variables.$fa-var-caret-square-o-left; } +.#{variables.$fa-css-prefix}-dot-circle-o:before { content: variables.$fa-var-dot-circle-o; } +.#{variables.$fa-css-prefix}-wheelchair:before { content: variables.$fa-var-wheelchair; } +.#{variables.$fa-css-prefix}-vimeo-square:before { content: variables.$fa-var-vimeo-square; } +.#{variables.$fa-css-prefix}-turkish-lira:before, +.#{variables.$fa-css-prefix}-try:before { content: variables.$fa-var-try; } +.#{variables.$fa-css-prefix}-plus-square-o:before { content: variables.$fa-var-plus-square-o; } +.#{variables.$fa-css-prefix}-space-shuttle:before { content: variables.$fa-var-space-shuttle; } +.#{variables.$fa-css-prefix}-slack:before { content: variables.$fa-var-slack; } +.#{variables.$fa-css-prefix}-envelope-square:before { content: variables.$fa-var-envelope-square; } +.#{variables.$fa-css-prefix}-wordpress:before { content: variables.$fa-var-wordpress; } +.#{variables.$fa-css-prefix}-openid:before { content: variables.$fa-var-openid; } +.#{variables.$fa-css-prefix}-institution:before, +.#{variables.$fa-css-prefix}-bank:before, +.#{variables.$fa-css-prefix}-university:before { content: variables.$fa-var-university; } +.#{variables.$fa-css-prefix}-mortar-board:before, +.#{variables.$fa-css-prefix}-graduation-cap:before { content: variables.$fa-var-graduation-cap; } +.#{variables.$fa-css-prefix}-yahoo:before { content: variables.$fa-var-yahoo; } +.#{variables.$fa-css-prefix}-google:before { content: variables.$fa-var-google; } +.#{variables.$fa-css-prefix}-reddit:before { content: variables.$fa-var-reddit; } +.#{variables.$fa-css-prefix}-reddit-square:before { content: variables.$fa-var-reddit-square; } +.#{variables.$fa-css-prefix}-stumbleupon-circle:before { content: variables.$fa-var-stumbleupon-circle; } +.#{variables.$fa-css-prefix}-stumbleupon:before { content: variables.$fa-var-stumbleupon; } +.#{variables.$fa-css-prefix}-delicious:before { content: variables.$fa-var-delicious; } +.#{variables.$fa-css-prefix}-digg:before { content: variables.$fa-var-digg; } +.#{variables.$fa-css-prefix}-pied-piper-square:before, +.#{variables.$fa-css-prefix}-pied-piper:before { content: variables.$fa-var-pied-piper; } +.#{variables.$fa-css-prefix}-pied-piper-alt:before { content: variables.$fa-var-pied-piper-alt; } +.#{variables.$fa-css-prefix}-drupal:before { content: variables.$fa-var-drupal; } +.#{variables.$fa-css-prefix}-joomla:before { content: variables.$fa-var-joomla; } +.#{variables.$fa-css-prefix}-language:before { content: variables.$fa-var-language; } +.#{variables.$fa-css-prefix}-fax:before { content: variables.$fa-var-fax; } +.#{variables.$fa-css-prefix}-building:before { content: variables.$fa-var-building; } +.#{variables.$fa-css-prefix}-child:before { content: variables.$fa-var-child; } +.#{variables.$fa-css-prefix}-paw:before { content: variables.$fa-var-paw; } +.#{variables.$fa-css-prefix}-spoon:before { content: variables.$fa-var-spoon; } +.#{variables.$fa-css-prefix}-cube:before { content: variables.$fa-var-cube; } +.#{variables.$fa-css-prefix}-cubes:before { content: variables.$fa-var-cubes; } +.#{variables.$fa-css-prefix}-behance:before { content: variables.$fa-var-behance; } +.#{variables.$fa-css-prefix}-behance-square:before { content: variables.$fa-var-behance-square; } +.#{variables.$fa-css-prefix}-steam:before { content: variables.$fa-var-steam; } +.#{variables.$fa-css-prefix}-steam-square:before { content: variables.$fa-var-steam-square; } +.#{variables.$fa-css-prefix}-recycle:before { content: variables.$fa-var-recycle; } +.#{variables.$fa-css-prefix}-automobile:before, +.#{variables.$fa-css-prefix}-car:before { content: variables.$fa-var-car; } +.#{variables.$fa-css-prefix}-cab:before, +.#{variables.$fa-css-prefix}-taxi:before { content: variables.$fa-var-taxi; } +.#{variables.$fa-css-prefix}-tree:before { content: variables.$fa-var-tree; } +.#{variables.$fa-css-prefix}-spotify:before { content: variables.$fa-var-spotify; } +.#{variables.$fa-css-prefix}-deviantart:before { content: variables.$fa-var-deviantart; } +.#{variables.$fa-css-prefix}-soundcloud:before { content: variables.$fa-var-soundcloud; } +.#{variables.$fa-css-prefix}-database:before { content: variables.$fa-var-database; } +.#{variables.$fa-css-prefix}-file-pdf-o:before { content: variables.$fa-var-file-pdf-o; } +.#{variables.$fa-css-prefix}-file-word-o:before { content: variables.$fa-var-file-word-o; } +.#{variables.$fa-css-prefix}-file-excel-o:before { content: variables.$fa-var-file-excel-o; } +.#{variables.$fa-css-prefix}-file-powerpoint-o:before { content: variables.$fa-var-file-powerpoint-o; } +.#{variables.$fa-css-prefix}-file-photo-o:before, +.#{variables.$fa-css-prefix}-file-picture-o:before, +.#{variables.$fa-css-prefix}-file-image-o:before { content: variables.$fa-var-file-image-o; } +.#{variables.$fa-css-prefix}-file-zip-o:before, +.#{variables.$fa-css-prefix}-file-archive-o:before { content: variables.$fa-var-file-archive-o; } +.#{variables.$fa-css-prefix}-file-sound-o:before, +.#{variables.$fa-css-prefix}-file-audio-o:before { content: variables.$fa-var-file-audio-o; } +.#{variables.$fa-css-prefix}-file-movie-o:before, +.#{variables.$fa-css-prefix}-file-video-o:before { content: variables.$fa-var-file-video-o; } +.#{variables.$fa-css-prefix}-file-code-o:before { content: variables.$fa-var-file-code-o; } +.#{variables.$fa-css-prefix}-vine:before { content: variables.$fa-var-vine; } +.#{variables.$fa-css-prefix}-codepen:before { content: variables.$fa-var-codepen; } +.#{variables.$fa-css-prefix}-jsfiddle:before { content: variables.$fa-var-jsfiddle; } +.#{variables.$fa-css-prefix}-life-bouy:before, +.#{variables.$fa-css-prefix}-life-saver:before, +.#{variables.$fa-css-prefix}-support:before, +.#{variables.$fa-css-prefix}-life-ring:before { content: variables.$fa-var-life-ring; } +.#{variables.$fa-css-prefix}-circle-o-notch:before { content: variables.$fa-var-circle-o-notch; } +.#{variables.$fa-css-prefix}-ra:before, +.#{variables.$fa-css-prefix}-rebel:before { content: variables.$fa-var-rebel; } +.#{variables.$fa-css-prefix}-ge:before, +.#{variables.$fa-css-prefix}-empire:before { content: variables.$fa-var-empire; } +.#{variables.$fa-css-prefix}-git-square:before { content: variables.$fa-var-git-square; } +.#{variables.$fa-css-prefix}-git:before { content: variables.$fa-var-git; } +.#{variables.$fa-css-prefix}-hacker-news:before { content: variables.$fa-var-hacker-news; } +.#{variables.$fa-css-prefix}-tencent-weibo:before { content: variables.$fa-var-tencent-weibo; } +.#{variables.$fa-css-prefix}-qq:before { content: variables.$fa-var-qq; } +.#{variables.$fa-css-prefix}-wechat:before, +.#{variables.$fa-css-prefix}-weixin:before { content: variables.$fa-var-weixin; } +.#{variables.$fa-css-prefix}-send:before, +.#{variables.$fa-css-prefix}-paper-plane:before { content: variables.$fa-var-paper-plane; } +.#{variables.$fa-css-prefix}-send-o:before, +.#{variables.$fa-css-prefix}-paper-plane-o:before { content: variables.$fa-var-paper-plane-o; } +.#{variables.$fa-css-prefix}-history:before { content: variables.$fa-var-history; } +.#{variables.$fa-css-prefix}-circle-thin:before { content: variables.$fa-var-circle-thin; } +.#{variables.$fa-css-prefix}-header:before { content: variables.$fa-var-header; } +.#{variables.$fa-css-prefix}-paragraph:before { content: variables.$fa-var-paragraph; } +.#{variables.$fa-css-prefix}-sliders:before { content: variables.$fa-var-sliders; } +.#{variables.$fa-css-prefix}-share-alt:before { content: variables.$fa-var-share-alt; } +.#{variables.$fa-css-prefix}-share-alt-square:before { content: variables.$fa-var-share-alt-square; } +.#{variables.$fa-css-prefix}-bomb:before { content: variables.$fa-var-bomb; } diff --git a/source/_sass/font-awesome/_larger.scss b/source/_sass/font-awesome/_larger.scss index a406594..4b29c32 100644 --- a/source/_sass/font-awesome/_larger.scss +++ b/source/_sass/font-awesome/_larger.scss @@ -3,13 +3,26 @@ /* makes the font 33% larger relative to the icon container */ @use "sass:math"; +@use "variables"; -.#{$fa-css-prefix}-lg { +.#{variables.$fa-css-prefix}-lg { font-size: math.div(4em, 3); line-height: (3em * 0.25); vertical-align: -15%; } -.#{$fa-css-prefix}-2x { font-size: 2em; } -.#{$fa-css-prefix}-3x { font-size: 3em; } -.#{$fa-css-prefix}-4x { font-size: 4em; } -.#{$fa-css-prefix}-5x { font-size: 5em; } + +.#{variables.$fa-css-prefix}-2x { + font-size: 2em; +} + +.#{variables.$fa-css-prefix}-3x { + font-size: 3em; +} + +.#{variables.$fa-css-prefix}-4x { + font-size: 4em; +} + +.#{variables.$fa-css-prefix}-5x { + font-size: 5em; +} diff --git a/source/_sass/font-awesome/_list.scss b/source/_sass/font-awesome/_list.scss index 988e6f8..32eca57 100644 --- a/source/_sass/font-awesome/_list.scss +++ b/source/_sass/font-awesome/_list.scss @@ -2,20 +2,26 @@ // ------------------------- @use "sass:math"; +@use "variables"; -.#{$fa-css-prefix}-ul { +.#{variables.$fa-css-prefix}-ul { padding-left: 0; - margin-left: $fa-li-width; + margin-left: variables.$fa-li-width; list-style-type: none; - > li { position: relative; } + + >li { + position: relative; + } } -.#{$fa-css-prefix}-li { + +.#{variables.$fa-css-prefix}-li { position: absolute; - left: -$fa-li-width; - width: $fa-li-width; + left: - variables.$fa-li-width; + width: variables.$fa-li-width; top: math.div(2em, 14); text-align: center; - &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + math.div(4em, 14); + + &.#{variables.$fa-css-prefix}-lg { + left: - variables.$fa-li-width + math.div(4em, 14); } } diff --git a/source/_sass/font-awesome/_path.scss b/source/_sass/font-awesome/_path.scss index fd21c35..495dd10 100644 --- a/source/_sass/font-awesome/_path.scss +++ b/source/_sass/font-awesome/_path.scss @@ -1,13 +1,15 @@ +@use "variables"; + /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; - src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); - src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), - url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), - url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), - url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); + src: url('#{variables.$fa-font-path}/fontawesome-webfont.eot?v=#{variables.$fa-version}'); + src: url('#{variables.$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{variables.$fa-version}') format('embedded-opentype'), + url('#{variables.$fa-font-path}/fontawesome-webfont.woff?v=#{variables.$fa-version}') format('woff'), + url('#{variables.$fa-font-path}/fontawesome-webfont.ttf?v=#{variables.$fa-version}') format('truetype'), + url('#{variables.$fa-font-path}/fontawesome-webfont.svg?v=#{variables.$fa-version}#fontawesomeregular') format('svg'); //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts font-weight: normal; font-style: normal; diff --git a/source/_sass/font-awesome/_rotated-flipped.scss b/source/_sass/font-awesome/_rotated-flipped.scss index 343fa55..6bec49e 100644 --- a/source/_sass/font-awesome/_rotated-flipped.scss +++ b/source/_sass/font-awesome/_rotated-flipped.scss @@ -1,9 +1,12 @@ +@use "mixins"; +@use "variables"; + // Rotated & Flipped Icons // ------------------------- -.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } -.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } -.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } +.#{variables.$fa-css-prefix}-rotate-90 { @include mixins.fa-icon-rotate(90deg, 1); } +.#{variables.$fa-css-prefix}-rotate-180 { @include mixins.fa-icon-rotate(180deg, 2); } +.#{variables.$fa-css-prefix}-rotate-270 { @include mixins.fa-icon-rotate(270deg, 3); } -.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } -.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } +.#{variables.$fa-css-prefix}-flip-horizontal { @include mixins.fa-icon-flip(-1, 1, 0); } +.#{variables.$fa-css-prefix}-flip-vertical { @include mixins.fa-icon-flip(1, -1, 2); } diff --git a/source/_sass/font-awesome/_spinning.scss b/source/_sass/font-awesome/_spinning.scss index c378744..ecf2184 100644 --- a/source/_sass/font-awesome/_spinning.scss +++ b/source/_sass/font-awesome/_spinning.scss @@ -1,7 +1,9 @@ // Spinning Icons // -------------------------- -.#{$fa-css-prefix}-spin { +@use "variables"; + +.#{variables.$fa-css-prefix}-spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; diff --git a/source/_sass/font-awesome/_stacked.scss b/source/_sass/font-awesome/_stacked.scss index aef7403..9fe0d51 100644 --- a/source/_sass/font-awesome/_stacked.scss +++ b/source/_sass/font-awesome/_stacked.scss @@ -1,7 +1,9 @@ +@use "variables"; + // Stacked Icons // ------------------------- -.#{$fa-css-prefix}-stack { +.#{variables.$fa-css-prefix}-stack { position: relative; display: inline-block; width: 2em; @@ -9,12 +11,12 @@ line-height: 2em; vertical-align: middle; } -.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { +.#{variables.$fa-css-prefix}-stack-1x, .#{variables.$fa-css-prefix}-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } -.#{$fa-css-prefix}-stack-1x { line-height: inherit; } -.#{$fa-css-prefix}-stack-2x { font-size: 2em; } -.#{$fa-css-prefix}-inverse { color: $fa-inverse; } +.#{variables.$fa-css-prefix}-stack-1x { line-height: inherit; } +.#{variables.$fa-css-prefix}-stack-2x { font-size: 2em; } +.#{variables.$fa-css-prefix}-inverse { color: variables.$fa-inverse; } diff --git a/source/_sass/font-awesome/_variables.scss b/source/_sass/font-awesome/_variables.scss index 5e6bbfd..8e79a54 100644 --- a/source/_sass/font-awesome/_variables.scss +++ b/source/_sass/font-awesome/_variables.scss @@ -3,13 +3,13 @@ @use "sass:math"; -$fa-font-path: "../fonts" !default; +$fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts" !default; // for referencing Bootstrap CDN font files directly -$fa-css-prefix: fa !default; -$fa-version: "4.1.0" !default; -$fa-border-color: #eee !default; -$fa-inverse: #fff !default; -$fa-li-width: math.div(30em, 14) !default; +$fa-css-prefix: fa !default; +$fa-version: "4.1.0" !default; +$fa-border-color: #eee !default; +$fa-inverse: #fff !default; +$fa-li-width: math.div(30em, 14) !default; $fa-var-adjust: "\f042"; $fa-var-adn: "\f170"; @@ -514,4 +514,3 @@ $fa-var-yen: "\f157"; $fa-var-youtube: "\f167"; $fa-var-youtube-play: "\f16a"; $fa-var-youtube-square: "\f166"; - diff --git a/source/_sass/font-awesome/font-awesome.scss b/source/_sass/font-awesome/font-awesome.scss index 2307dbd..c1de260 100644 --- a/source/_sass/font-awesome/font-awesome.scss +++ b/source/_sass/font-awesome/font-awesome.scss @@ -3,15 +3,15 @@ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ -@import "variables"; -@import "mixins"; -@import "path"; -@import "core"; -@import "larger"; -@import "fixed-width"; -@import "list"; -@import "bordered-pulled"; -@import "spinning"; -@import "rotated-flipped"; -@import "stacked"; -@import "icons"; +@use "bordered-pulled"; +@use "core"; +@use "fixed-width"; +@use "larger"; +@use "list"; +@use "mixins"; +@use "path"; +@use "rotated-flipped"; +@use "spinning"; +@use "stacked"; +@use "variables"; +@use "icons"; diff --git a/source/_sass/footer.scss b/source/_sass/footer.scss index 24d5197..ce2825a 100644 --- a/source/_sass/footer.scss +++ b/source/_sass/footer.scss @@ -14,8 +14,12 @@ * limitations under the License. */ +@use "bourbon/addons/clearfix"; +@use "bourbon/css3/transition"; +@use "responsive/utilities/mixins/breakpoints"; @use "sass:color"; + $footer-height: 2rem; $footer-height-mobile: 9.95rem; $footer-background-color: #333; @@ -26,9 +30,9 @@ $footer-bp: s; height: auto !important; margin: 0 auto -1 * $footer-height-mobile; min-height: 100%; - @include clearfix; + @include clearfix.clearfix; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { margin: 0 auto -1 * $footer-height; } } @@ -36,7 +40,7 @@ $footer-bp: s; .push { height: $footer-height-mobile; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { height: $footer-height; } } @@ -49,7 +53,7 @@ $footer-bp: s; width: 100%; z-index: 100; - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { height: $footer-height; } @@ -58,14 +62,14 @@ $footer-bp: s; } li { - @include bp-min ($footer-bp) { + @include breakpoints.bp-min ($footer-bp) { display: table-cell; width: 2%; } } a { - @include transition (all 0.2s ease-in-out); + @include transition.transition (all 0.2s ease-in-out); background-color: $footer-background-color; color: $footer-text-color; display: block; diff --git a/source/_sass/header.scss b/source/_sass/header.scss index 54f523c..490aa10 100644 --- a/source/_sass/header.scss +++ b/source/_sass/header.scss @@ -14,5 +14,8 @@ * limitations under the License. */ -$header-height: 3 * $base-line-height; +@use "responsive/utilities/variables"; + + +$header-height: 3 * variables.$base-line-height; $header-logo-width: 226px; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss b/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss index 999203d..dba273c 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.buttonbars.scss @@ -2,98 +2,93 @@ jQuery.mmenu buttonbars addon CSS */ -@import "../inc/variables"; - - -.mm-buttonbar -{ - border: 1px solid transparent; - border-radius: $mm_padding * 0.5; - text-align: center; - line-height: $mm_buttonbarHeight; - overflow: hidden; - display: block; - padding: 0; - margin: 0; - position: relative; - - @include mm_clearfix; - - > * - { - border-left: 1px solid transparent; - box-sizing: border-box; - display: block; - width: 100%; - height: 100%; - float: left; - - @include mm_ellipsis; - } - > a - { - text-decoration: none; - } - > input - { - position: absolute; - left: -1000px; - top: -1000px; - } - > input:checked + label - { - border-color: transparent !important; - } - - > *:first-child, - > input:first-child + * - { - border-left: none; - } - - - &.mm-buttonbar-2 > * - { - width: 50%; - } - &.mm-buttonbar-3 > * - { - width: 33.33%; - } - &.mm-buttonbar-4 > * - { - width: 25%; - } - &.mm-buttonbar-5 > * - { - width: 20%; - } +@use "../inc/colors"; +@use "../inc/mixins"; +@use "../inc/variables"; + +.mm-buttonbar { + border: 1px solid transparent; + border-radius: variables.$mm_padding * 0.5; + text-align: center; + line-height: variables.$mm_buttonbarHeight; + overflow: hidden; + display: block; + padding: 0; + margin: 0; + position: relative; + + @include mixins.mm_clearfix; + + >* { + border-left: 1px solid transparent; + box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + float: left; + + @include mixins.mm_ellipsis; + } + + >a { + text-decoration: none; + } + + >input { + position: absolute; + left: -1000px; + top: -1000px; + } + + >input:checked+label { + border-color: transparent !important; + } + + >*:first-child, + >input:first-child+* { + border-left: none; + } + + + &.mm-buttonbar-2>* { + width: 50%; + } + + &.mm-buttonbar-3>* { + width: 33.33%; + } + + &.mm-buttonbar-4>* { + width: 25%; + } + + &.mm-buttonbar-5>* { + width: 20%; + } } -.mm-header .mm-buttonbar -{ - margin-top: $mm_headerHeight - ( $mm_buttonbarHeight * 2 ); - margin-left: -( $mm_btnSize - $mm_padding ); - margin-right: -( $mm_btnSize - $mm_padding ); +.mm-header .mm-buttonbar { + margin-top: variables.$mm_headerHeight - (variables.$mm_buttonbarHeight * 2); + margin-left: -(variables.$mm_btnSize - variables.$mm_padding ); + margin-right: -(variables.$mm_btnSize - variables.$mm_padding ); } -.mm-footer .mm-buttonbar -{ - border: none; - border-radius: none; - line-height: $mm_footerHeight; - margin: ( -$mm_padding ) ( -$mm_padding ) 0 ( -( $mm_padding * 2 ) ); - - > * - { - border-left: none; - } +.mm-footer .mm-buttonbar { + border: none; + border-radius: none; + line-height: variables.$mm_footerHeight; + margin: (-(variables.$mm_padding)) (-(variables.$mm_padding)) 0 (-(variables.$mm_padding * 2)); + + >* { + border-left: none; + } } -.mm-list > li > .mm-buttonbar -{ - margin: $mm_padding ( $mm_padding * 2 ); +.mm-list>li>.mm-buttonbar { + margin: variables.$mm_padding ( + variables.$mm_padding * 2 + ); } -@include mm_colors_buttonbars; \ No newline at end of file +@include colors.mm_colors_buttonbars; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.counters.scss b/source/_sass/mmenu/addons/jquery.mmenu.counters.scss index af25c63..a64c651 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.counters.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.counters.scss @@ -2,52 +2,46 @@ jQuery.mmenu counters addon CSS */ -@import "../inc/variables"; - - -em.mm-counter -{ - font: inherit; - font-size: $mm_fontSize; - font-style: normal; - text-indent: 0; - line-height: $mm_btnSize * 0.5; - display: block; - margin-top: -( $mm_btnSize * 0.25 ); - position: absolute; - right: $mm_subopenWidth; - top: 50%; - - + a.mm-subopen - { - padding-left: $mm_counterWidth; - - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth; - } - } - + a.mm-fullsubopen - { - padding-left: 0; - } +@use "../inc/colors"; +@use "../inc/variables"; + +em.mm-counter { + font: inherit; + font-size: variables.$mm_fontSize; + font-style: normal; + text-indent: 0; + line-height: variables.$mm_btnSize * 0.5; + display: block; + margin-top: -(variables.$mm_btnSize * 0.25); + position: absolute; + right: variables.$mm_subopenWidth; + top: 50%; + + +a.mm-subopen { + padding-left: variables.$mm_counterWidth; + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth; + } + } + + +a.mm-fullsubopen { + padding-left: 0; + } } // vertical submenu -.mm-vertical -{ - em.mm-counter - { - top: ( $mm_btnSize * 0.25 ) + 2; - margin-top: 0; - } +.mm-vertical { + em.mm-counter { + top: (variables.$mm_btnSize * 0.25) + 2; + margin-top: 0; + } } // Search -.mm-nosubresults > em.mm-counter -{ - display: none; +.mm-nosubresults>em.mm-counter { + display: none; } -@include mm_colors_counters; \ No newline at end of file +@include colors.mm_colors_counters; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss b/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss index 006e5c5..e1b521f 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.dragopen.scss @@ -2,7 +2,8 @@ jQuery.mmenu dragOpen addon CSS */ -@import "../inc/variables"; +@use "../inc/mixins"; +@use "../inc/variables"; html.mm-opened.mm-dragging { @@ -12,6 +13,6 @@ html.mm-opened.mm-dragging .mm-fixed-bottom, #mm-blocker { - @include mm_webkit-prefix( "transition-duration", 0s ); + @include mixins.mm_webkit-prefix( "transition-duration", 0s ); } } \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.footer.scss b/source/_sass/mmenu/addons/jquery.mmenu.footer.scss index 085424d..43f1734 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.footer.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.footer.scss @@ -2,20 +2,20 @@ jQuery.mmenu footer addon CSS */ -@import "../inc/variables"; - +@use "../inc/colors"; +@use "../inc/variables"; .mm-footer { background: inherit; border-top: 1px solid transparent; text-align: center; - line-height: $mm_footerHeight - ( $mm_padding * 2 ); + line-height: variables.$mm_footerHeight - ( variables.$mm_padding * 2 ); box-sizing: border-box; width: 100%; - height: $mm_footerHeight; - padding: $mm_padding $mm_padding 0 ( $mm_padding * 2 ); + height: variables.$mm_footerHeight; + padding: variables.$mm_padding variables.$mm_padding 0 ( variables.$mm_padding * 2 ); position: absolute; z-index: 2; bottom: 0; @@ -26,9 +26,9 @@ { > .mm-panel:after { - height: $mm_footerHeight + $mm_btnSize; + height: variables.$mm_footerHeight + variables.$mm_btnSize; } } -@include mm_colors_footer; \ No newline at end of file +@include colors.mm_colors_footer; \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.header.scss b/source/_sass/mmenu/addons/jquery.mmenu.header.scss index 5138f7d..25c9967 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.header.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.header.scss @@ -2,141 +2,131 @@ jQuery.mmenu header addon CSS */ -@import "../inc/variables"; - - -.mm-header -{ - background: inherit; - border-bottom: 1px solid transparent; - text-align: center; - line-height: $mm_btnSize * 0.5; - - box-sizing: border-box; - width: 100%; - height: $mm_headerHeight; - padding: 0 ( $mm_btnSize + $mm_padding ); - position: absolute; - z-index: 2; - top: 0; - left: 0; - - .mm-title, - .mm-prev, - .mm-next, - .mm-close - { - padding-top: $mm_headerPaddingTop; - } - .mm-title - { - @include mm_ellipsis; - - display: inline-block; - width: 100%; - position: relative; - } - - .mm-prev, - .mm-next, - .mm-close - { - text-decoration: none; - display: block; - box-sizing: border-box; - min-width: $mm_padding; - height: 100%; - position: absolute; - top: 0; - z-index: 1; - } - .mm-prev - { - padding-left: ( $mm_padding * 2 ); - padding-right: $mm_padding; - left: 0; - } - .mm-next, - .mm-close - { - padding-left: $mm_padding; - padding-right: ( $mm_padding * 2 ); - right: 0; - } - [href] - { - &.mm-prev:before, - &.mm-next:after - { - @include mm_arrow; - } - &.mm-prev:before - { - @include mm_arrow-prev; - margin-left: 2px; - margin-right: $mm_padding * 0.5; - } - &.mm-next:after, - &.mm-close:after - { - margin-left: $mm_padding * 0.5; - margin-right: -2px; - } - &.mm-next:after - { - @include mm_arrow-next; - } - &.mm-close:after - { - content: 'x'; - } - } -} +@use "../inc/colors"; +@use "../inc/mixins"; +@use "../inc/variables"; -.mm-menu.mm-hassearch .mm-header -{ - height: $mm_headerHeight - $mm_padding; - top: $mm_searchHeight; - - .mm-title, - .mm-prev, - .mm-next, - .mm-close - { - padding-top: $mm_headerPaddingTop - $mm_padding; - } -} +.mm-header { + background: inherit; + border-bottom: 1px solid transparent; + text-align: center; + line-height: variables.$mm_btnSize * 0.5; + + box-sizing: border-box; + width: 100%; + height: variables.$mm_headerHeight; + padding: 0 (variables.$mm_btnSize + variables.$mm_padding ); + position: absolute; + z-index: 2; + top: 0; + left: 0; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop; + } + + .mm-title { + @include mixins.mm_ellipsis; + + .mm-prev, + .mm-next, + .mm-close { + text-decoration: none; + display: block; + box-sizing: border-box; + min-width: variables.$mm_padding; + height: 100%; + position: absolute; + top: 0; + z-index: 1; + } + + .mm-prev { + padding-left: (variables.$mm_padding * 2); + padding-right: variables.$mm_padding; + left: 0; + } + + .mm-next, + .mm-close { + padding-left: variables.$mm_padding; + padding-right: (variables.$mm_padding * 2); + right: 0; + } + + [href] { + + &.mm-prev:before, + &.mm-next:after { + @include mixins.mm_arrow; + } + + &.mm-prev:before { + @include mixins.mm_arrow-prev; + margin-left: 2px; + margin-right: variables.$mm_padding * 0.5; + } + + &.mm-next:after, + &.mm-close:after { + margin-left: variables.$mm_padding * 0.5; + margin-right: -2px; + } + + &.mm-next:after { + @include mixins.mm_arrow-next; + } + + &.mm-close:after { + content: 'x'; + } + } + } + + .mm-menu.mm-hassearch .mm-header { + height: variables.$mm_headerHeight - variables.$mm_padding; + top: variables.$mm_searchHeight; + + .mm-title, + .mm-prev, + .mm-next, + .mm-close { + padding-top: variables.$mm_headerPaddingTop - variables.$mm_padding; + } + } + + $mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; + + .mm-menu.mm-hasheader { + li.mm-subtitle { + display: none; + } + + >.mm-panel { + padding-top: variables.$mm_headerHeight + $mm_paddingBeneathHeader; + + &.mm-list { + padding-top: variables.$mm_headerHeight; + } + + >.mm-list:first-child { + margin-top: -$mm_paddingBeneathHeader; + } + } + + &.mm-hassearch>.mm-panel { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight + variables.$mm_padding; -$mm_paddingBeneathHeader: $mm_padding * 2 !default; -.mm-menu.mm-hasheader -{ - li.mm-subtitle - { - display: none; - } - > .mm-panel - { - padding-top: $mm_headerHeight + $mm_paddingBeneathHeader; - &.mm-list - { - padding-top: $mm_headerHeight; - } - > .mm-list:first-child - { - margin-top: -$mm_paddingBeneathHeader; - } - } - &.mm-hassearch > .mm-panel - { - padding-top: $mm_headerHeight + $mm_searchHeight + $mm_padding; - - &.mm-list - { - padding-top: $mm_headerHeight + $mm_searchHeight - $mm_padding; - } - } + &.mm-list { + padding-top: variables.$mm_headerHeight + variables.$mm_searchHeight - variables.$mm_padding; + } + } + } } -@include mm_colors_header; \ No newline at end of file +@include colors.mm_colors_header; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.labels.scss b/source/_sass/mmenu/addons/jquery.mmenu.labels.scss index ca0becd..8ab33fd 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.labels.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.labels.scss @@ -2,39 +2,34 @@ jQuery.mmenu labels addon CSS */ -@import "../inc/variables"; +@use "../inc/colors"; +@use "../inc/mixins"; +@use "../inc/variables"; -.mm-list -{ - li.mm-label - { - > span - { - @include mm_ellipsis; - padding: 0; - line-height: $mm_labelHeight; - } +.mm-list { + li.mm-label { + >span { + @include mixins.mm_ellipsis; + padding: 0; + line-height: variables.$mm_labelHeight; + } - &.mm-opened a.mm-subopen:after - { - @include mm_webkit-prefix( "transform", rotate( 45deg ) ); - } - } - li.mm-collapsed:not( .mm-uncollapsed ) - { - display: none; - } + &.mm-opened a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + li.mm-collapsed:not(.mm-uncollapsed) { + display: none; + } } -.mm-menu.mm-vertical .mm-list -{ - > li.mm-label - { - > a.mm-subopen:after - { - top: ( $mm_labelHeight * 0.5 ) - 4; - } - } +.mm-menu.mm-vertical .mm-list { + >li.mm-label { + >a.mm-subopen:after { + top: (variables.$mm_labelHeight * 0.5) - 4; + } + } } -@include mm_colors_labels; \ No newline at end of file +@include colors.mm_colors_labels; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss b/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss index 1a94d47..b71d2d7 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.offcanvas.scss @@ -2,8 +2,8 @@ jQuery.mmenu offcanvas addon CSS */ -@import "../inc/variables"; - +@use "../inc/sizing"; +@use "../inc/variables"; // Animations .mm-page @@ -11,9 +11,9 @@ box-sizing: border-box; position: relative; - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - -ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + -ms-transition: -ms-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Container, Page, Blocker @@ -67,4 +67,4 @@ html.mm-blocking } -@include mm_sizing; \ No newline at end of file +@include sizing.mm_sizing; \ No newline at end of file diff --git a/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss b/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss index c64d910..424fa64 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.searchfield.scss @@ -2,126 +2,114 @@ jQuery.mmenu searchfield addon CSS */ +@use "../inc/colors"; +@use "../inc/variables"; @use "sass:math"; -@import "../inc/variables"; - .mm-search, -.mm-search input -{ - box-sizing: border-box; +.mm-search input { + box-sizing: border-box; } -.mm-list -{ - > li.mm-search - { - padding: $mm_padding; - margin-top: -( $mm_padding * 2 ); - } - > li.mm-subtitle + li.mm-search - { - margin-top: 0; - } + +.mm-list { + >li.mm-search { + padding: variables.$mm_padding; + margin-top: -(variables.$mm_padding * 2); + } + + >li.mm-subtitle+li.mm-search { + margin-top: 0; + } } -div.mm-panel > div.mm-search -{ - padding: 0 0 $mm_padding 0; + +div.mm-panel>div.mm-search { + padding: 0 0 variables.$mm_padding 0; } -.mm-menu.mm-hasheader .mm-list > li.mm-search -{ - margin-top: 0; + +.mm-menu.mm-hasheader .mm-list>li.mm-search { + margin-top: 0; } -.mm-menu > .mm-search -{ - background: inherit; - width: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; + +.mm-menu>.mm-search { + background: inherit; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; } -.mm-search -{ - padding: $mm_padding; - - input - { - border: none; - border-radius: $mm_searchfieldHeight; - font: inherit; - font-size: $mm_fontSize; - line-height: $mm_searchfieldHeight; - outline: none; - display: block; - width: 100%; - height: $mm_searchfieldHeight; - margin: 0; - padding: 0 $mm_padding; - } - input::-ms-clear - { - display: none; - } + +.mm-search { + padding: variables.$mm_padding; + + input { + border: none; + border-radius: variables.$mm_searchfieldHeight; + font: inherit; + font-size: variables.$mm_fontSize; + line-height: variables.$mm_searchfieldHeight; + outline: none; + display: block; + width: 100%; + height: variables.$mm_searchfieldHeight; + margin: 0; + padding: 0 variables.$mm_padding; + } + + input::-ms-clear { + display: none; + } } -.mm-menu .mm-noresultsmsg -{ - text-align: center; - font-size: math.round( $mm_fontSize * 1.5 ); - display: none; - padding: ( $mm_btnSize * 1.5 ) 0; - - &:after - { - border: none !important; - } +.mm-menu .mm-noresultsmsg { + text-align: center; + font-size: math.round(variables.$mm_fontSize * 1.5); + display: none; + padding: (variables.$mm_btnSize * 1.5) 0; + + &:after { + border: none !important; + } } -.mm-noresults .mm-noresultsmsg -{ - display: block; + +.mm-noresults .mm-noresultsmsg { + display: block; } -$mm_paddingBeneathHeader: $mm_padding * 2 !default; -.mm-menu -{ - li.mm-nosubresults > a.mm-subopen - { - display: none; - - + a, - + span - { - padding-right: 10px; - } - } - &.mm-hassearch - { - > .mm-panel - { - padding-top: $mm_searchHeight + $mm_paddingBeneathHeader; - - > .mm-list:first-child - { - margin-top: -$mm_paddingBeneathHeader; - } - } - } - &.mm-hasheader - { - > .mm-panel - { - > div.mm-search:first-child - { - margin-top: -$mm_padding; - - + .mm-list - { - padding-top: 0; - } - } - } - } +$mm_paddingBeneathHeader: variables.$mm_padding * 2 !default; + +.mm-menu { + li.mm-nosubresults>a.mm-subopen { + display: none; + + +a, + +span { + padding-right: 10px; + } + } + + &.mm-hassearch { + >.mm-panel { + padding-top: variables.$mm_searchHeight + $mm_paddingBeneathHeader; + + >.mm-list:first-child { + margin-top: -$mm_paddingBeneathHeader; + } + } + } + + &.mm-hasheader { + >.mm-panel { + >div.mm-search:first-child { + margin-top: - variables.$mm_padding; + + +.mm-list { + padding-top: 0; + } + } + } + } } -@include mm_colors_searchfield; +@include colors.mm_colors_searchfield; diff --git a/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss b/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss index 6e17c69..007db18 100755 --- a/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss +++ b/source/_sass/mmenu/addons/jquery.mmenu.toggles.scss @@ -2,177 +2,179 @@ jQuery.mmenu toggles addon CSS */ -@import "../inc/variables"; - +@use "../inc/colors"; +@use "../inc/mixins"; +@use "../inc/variables"; input.mm-toggle, -input.mm-check -{ - position: absolute; - left: -10000px; +input.mm-check { + position: absolute; + left: -10000px; } label.mm-toggle, -label.mm-check -{ - margin: 0; - position: absolute; - bottom: 50%; - z-index: 2; - - &:before - { - content: ''; - display: block; - } +label.mm-check { + margin: 0; + position: absolute; + bottom: 50%; + z-index: 2; + + &:before { + content: ''; + display: block; + } } // styling -label.mm-toggle -{ - border-radius: $mm_toggleHeight; - width: $mm_toggleWidth; - height: $mm_toggleHeight; - margin-bottom: -( $mm_toggleHeight * 0.5 ); - - &:before - { - border-radius: $mm_toggleHeight; - width: $mm_toggleHeight - 2; - height: $mm_toggleHeight - 2; - margin: 1px; - } -} -input.mm-toggle:checked ~ label.mm-toggle:before -{ - float: right; -} - -label.mm-check -{ - width: $mm_checkWidth; - height: $mm_checkHeight; - margin-bottom: -( $mm_checkHeight * 0.5 ); - - &:before - { - border-left: 3px solid; - border-bottom: 3px solid; - width: 40%; - height: 20%; - margin: 25% 0 0 20%; - opacity: 0.1; - - @include mm-webkit-prefix( 'transform', rotate( -45deg ) ); - } -} -input.mm-check:checked ~ label.mm-check:before -{ - opacity: 1; +label.mm-toggle { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleWidth; + height: variables.$mm_toggleHeight; + margin-bottom: -(variables.$mm_toggleHeight * 0.5); + + &:before { + border-radius: variables.$mm_toggleHeight; + width: variables.$mm_toggleHeight - 2; + height: variables.$mm_toggleHeight - 2; + margin: 1px; + } +} + +label.mm-check { + width: variables.$mm_checkWidth; + height: variables.$mm_checkHeight; + margin-bottom: -(variables.$mm_checkHeight * 0.5); + + &:before { + border-left: 3px solid; + border-bottom: 3px solid; + width: 40%; + height: 20%; + margin: 25% 0 0 20%; + opacity: 0.1; + + @include mixins.mm-webkit-prefix('transform', rotate(-45deg)); + } +} + +label.mm-check { + width: variables.$mm_checkWidth; + height: variables.$mm_checkHeight; + margin-bottom: - variables.$mm_checkHeight * 0.5; + + &:before { + border-left: 3px solid; + border-bottom: 3px solid; + width: 40%; + height: 20%; + margin: 25% 0 0 20%; + opacity: 0.1; + + @include mixins.mm-webkit-prefix('transform', rotate(-45deg)); + } +} + +input.mm-check:checked~label.mm-check:before { + opacity: 1; } // vertical submenu -.mm-menu.mm-vertical .mm-list -{ - > li label - { - &.mm-toggle, - &.mm-check - { - bottom: auto; - margin-bottom: 0; - } - &.mm-toggle - { - top: ( $mm_btnSize - $mm_toggleHeight ) * 0.5; - - } - &.mm-check - { - top: ( $mm_btnSize - $mm_checkHeight ) * 0.5; - } - } +.mm-menu.mm-vertical .mm-list { + >li label { + + &.mm-toggle, + &.mm-check { + bottom: auto; + margin-bottom: 0; + } + + &.mm-toggle { + top: (variables.$mm_btnSize - variables.$mm_toggleHeight ) * 0.5; + + } + + &.mm-check { + top: (variables.$mm_btnSize - variables.$mm_checkHeight ) * 0.5; + } + } } // positioning -label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_padding * 2; - } -} -label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_toggleWidth + ( $mm_padding * 2 ); - } -} -label.mm-check -{ - + a, - + span - { - margin-right: $mm_checkWidth + ( $mm_padding * 2 ); - } +label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_padding * 2; + } +} + +label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_toggleWidth + (variables.$mm_padding * 2); + } +} + +label.mm-check { + + +a, + +span { + margin-right: variables.$mm_checkWidth + (variables.$mm_padding * 2); + } } // positioning with subopen -a.mm-subopen + label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_subopenWidth + $mm_padding; - } -} -a.mm-subopen + label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_subopenWidth + $mm_toggleWidth + $mm_padding; - } -} -a.mm-subopen + label.mm-check -{ - + a, - + span - { - margin-right: $mm_subopenWidth + $mm_checkWidth + $mm_padding; - } +a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } } // positioning with counter -em.mm-counter + a.mm-subopen + label -{ - &.mm-toggle, - &.mm-check - { - right: $mm_counterWidth + $mm_subopenWidth + $mm_padding; - } -} -em.mm-counter + a.mm-subopen + label.mm-toggle -{ - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_toggleWidth + $mm_padding; - } -} -em.mm-counter + a.mm-subopen + label.mm-check -{ - + a, - + span - { - margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_checkWidth + $mm_padding; - } -} - -@include mm_colors_toggles; -@include mm_colors_checks; \ No newline at end of file +em.mm-counter+a.mm-subopen+label { + + &.mm-toggle, + &.mm-check { + right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-toggle { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_toggleWidth + variables.$mm_padding; + } +} + +em.mm-counter+a.mm-subopen+label.mm-check { + + +a, + +span { + margin-right: variables.$mm_counterWidth + variables.$mm_subopenWidth + variables.$mm_checkWidth + variables.$mm_padding; + } +} + +@include colors.mm_colors_toggles; +@include colors.mm_colors_checks; diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss b/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss index 78f9d5f..4db5461 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.effects.scss @@ -2,26 +2,26 @@ jQuery.mmenu effects extension CSS */ -@import "../inc/variables"; - +@use "../inc/mixins"; +@use "../inc/variables"; // Slide html.mm-slide { .mm-menu { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Left &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( -(variables.$mm_subpanelOffset) ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); } // Right @@ -29,11 +29,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( $mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( variables.$mm_subpanelOffset ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateX( 0% ) ); } } @@ -42,11 +42,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( -(variables.$mm_subpanelOffset) ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); } } @@ -55,11 +55,11 @@ html.mm-slide { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( $mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( variables.$mm_subpanelOffset ) ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', translateY( 0% ) ); } } } @@ -72,19 +72,19 @@ html.mm-zoom-menu { .mm-menu { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Left &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', left center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); } // Right @@ -92,12 +92,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( $mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', right center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown) translateX( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', right center ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); } } @@ -106,12 +106,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -$mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', center top ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( -(variables.$mm_subpanelOffset) ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center top ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); } } @@ -120,12 +120,12 @@ html.mm-zoom-menu { &.mm-opened .mm-menu { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( $mm_subpanelOffset ) ); - @include mm_webkit-prefix( 'transform-origin', center bottom ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateY( variables.$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', center bottom ); } &.mm-opening .mm-menu { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateY( 0% ) ); } } } @@ -134,19 +134,19 @@ html.mm-zoom-menu // Zoom panels html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) ); - @include mm_webkit-prefix( 'transform-origin', left center ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleUp, $mm_scaleUp ) translateX( 100% ) ); + @include mixins.mm_webkit-prefix( 'transform-origin', left center ); -webkit-transition-property: -webkit-transform, left; transition-property: transform, left; &.mm-opened { - @include mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( 1, 1 ) translateX( 0% ) ); &.mm-subopened { - @include mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -$mm_subpanelOffset ) ); + @include mixins.mm_webkit-prefix( 'transform', scale( $mm_scaleDown, $mm_scaleDown ) translateX( -(variables.$mm_subpanelOffset) ) ); } } } diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss b/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss index e53fc60..59a293e 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss @@ -2,20 +2,21 @@ jQuery.mmenu fullscreen extension CSS */ -@import "../inc/variables"; +@use "../inc/sizing"; +@use "../inc/variables"; $mm_fs_class : ".mm-fullscreen"; $mm_fs_full : 1 !default; $mm_fs_min : 140px !default; $mm_fs_max : 10000px !default; -@include mm_sizing( $mm_fs_class, +@include sizing.mm_sizing( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max ); -@include mm_sizing_right( $mm_fs_class, +@include sizing.mm_sizing_right( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max); -@include mm_sizing_zposition( $mm_fs_class, +@include sizing.mm_sizing_zposition( $mm_fs_class, $mm_fs_full, $mm_fs_min, $mm_fs_max ); html.mm-opened#{$mm_fs_class} .mm-page diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss b/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss index db75266..0a02540 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.positioning.scss @@ -2,7 +2,9 @@ jQuery.mmenu position extension CSS */ -@import "../inc/variables"; +@use "../inc/mixins"; +@use "../inc/sizing"; +@use "../inc/variables"; // top // bottom @@ -28,7 +30,7 @@ bottom: 0; } -@include mm_sizing_right; +@include sizing.mm_sizing_right; @@ -42,7 +44,7 @@ html.mm-front .mm-page, #mm-blocker { - @include mm-webkit-prefix( 'transform', translate( 0, 0 ) !important ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) !important ); z-index: 0; } } @@ -64,25 +66,25 @@ html.mm-opened.mm-next .mm-page &.mm-front, &.mm-next { - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; - @include mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); &.mm-right { - @include mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); } } &.mm-front { &.mm-top { - @include mm-webkit-prefix( 'transform', translate( 0, -100% ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, -100% ) ); } &.mm-bottom { - @include mm-webkit-prefix( 'transform', translate( 0, 100% ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 100% ) ); } } } @@ -91,8 +93,8 @@ html.mm-opening .mm-menu &.mm-front, &.mm-next { - @include mm-webkit-prefix( 'transform', translate( 0, 0 ) ); + @include mixins.mm-webkit-prefix( 'transform', translate( 0, 0 ) ); } } -@include mm_sizing_zposition; \ No newline at end of file +@include sizing.mm_sizing_zposition; \ No newline at end of file diff --git a/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss b/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss index ac299bc..e9ad4ca 100755 --- a/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss +++ b/source/_sass/mmenu/extensions/jquery.mmenu.themes.scss @@ -2,42 +2,43 @@ jQuery.mmenu themes extension CSS */ -@import "../inc/variables"; +@use "../inc/colors"; +@use "../inc/variables"; @mixin mm_apply_theme() { - @include mm_colors( $mm_t_cls, + @include colors.mm_colors( $mm_t_cls, $mm_t_backgroundColor, $mm_t_pageShadow, $mm_t_textColor, $mm_t_dimmedTextColor, $mm_t_emphasizedBackgroundColor, $mm_t_highlightedBackgroundColor, $mm_t_borderColor ); - @include mm_colors_buttonbars( $mm_t_cls, + @include colors.mm_colors_buttonbars( $mm_t_cls, $mm_t_backgroundColor, $mm_t_textColor ); - @include mm_colors_checks( $mm_t_cls, + @include colors.mm_colors_checks( $mm_t_cls, $mm_t_textColor ); - @include mm_colors_counters( $mm_t_cls, + @include colors.mm_colors_counters( $mm_t_cls, $mm_t_dimmedTextColor ); - @include mm_colors_footer( $mm_t_cls, + @include colors.mm_colors_footer( $mm_t_cls, $mm_t_dimmedTextColor, $mm_t_borderColor ); - @include mm_colors_header( $mm_t_cls, + @include colors.mm_colors_header( $mm_t_cls, $mm_t_dimmedTextColor, $mm_t_borderColor ); - @include mm_colors_labels( $mm_t_cls, + @include colors.mm_colors_labels( $mm_t_cls, $mm_t_highlightedBackgroundColor ); - @include mm_colors_searchfield( $mm_t_cls, + @include colors.mm_colors_searchfield( $mm_t_cls, $mm_t_inputBackgroundColor, $mm_t_textColor, $mm_t_dimmedTextColor ); - @include mm_colors_toggles( $mm_t_cls, + @include colors.mm_colors_toggles( $mm_t_cls, $mm_t_backgroundColor, $mm_t_borderColor ); } diff --git a/source/_sass/mmenu/inc/_colors.scss b/source/_sass/mmenu/inc/_colors.scss index d05565e..660b925 100755 --- a/source/_sass/mmenu/inc/_colors.scss +++ b/source/_sass/mmenu/inc/_colors.scss @@ -1,8 +1,10 @@ +@use "variables"; + @mixin mm_colors( $cls: "", - $baseBg: $mm_backgroundColor, $pageShadow: $mm_pageShadow, - $color: $mm_textColor, $dimmedColor: $mm_dimmedTextColor, - $emphasizedBg: $mm_emphasizedBackgroundColor, $highlightedBg: $mm_highlightedBackgroundColor, - $borderColor: $mm_borderColor + $baseBg: variables.$mm_backgroundColor, $pageShadow: variables.$mm_pageShadow, + $color: variables.$mm_textColor, $dimmedColor: variables.$mm_dimmedTextColor, + $emphasizedBg: variables.$mm_emphasizedBackgroundColor, $highlightedBg: variables.$mm_highlightedBackgroundColor, + $borderColor: variables.$mm_borderColor ) { html.mm-opened#{$cls} .mm-page { @@ -68,8 +70,8 @@ } @mixin mm_colors_buttonbars( $cls: "", - $baseBg: $mm_backgroundColor, - $color: $mm_textColor + $baseBg: variables.$mm_backgroundColor, + $color: variables.$mm_textColor ) { .mm-menu#{$cls} { @@ -93,7 +95,7 @@ } @mixin mm_colors_checks( $cls: "", - $color: $mm_textColor + $color: variables.$mm_textColor ) { .mm-menu#{$cls} label.mm-check:before { @@ -102,7 +104,7 @@ } @mixin mm_colors_counters( $cls: "", - $dimmedColor: $mm_dimmedTextColor + $dimmedColor: variables.$mm_dimmedTextColor ) { .mm-menu#{$cls} em.mm-counter { @@ -111,8 +113,8 @@ } @mixin mm_colors_footer( $cls: "", - $dimmedColor: $mm_dimmedTextColor, - $borderColor: $mm_borderColor + $dimmedColor: variables.$mm_dimmedTextColor, + $borderColor: variables.$mm_borderColor ) { .mm-menu#{$cls} { @@ -125,8 +127,8 @@ } @mixin mm_colors_header( $cls: "", - $dimmedColor: $mm_dimmedTextColor, - $borderColor: $mm_borderColor + $dimmedColor: variables.$mm_dimmedTextColor, + $borderColor: variables.$mm_borderColor ) { .mm-menu#{$cls} { @@ -146,7 +148,7 @@ } @mixin mm_colors_labels( $cls: "", - $highlightedBg: $mm_highlightedBackgroundColor + $highlightedBg: variables.$mm_highlightedBackgroundColor ) { .mm-menu#{$cls} { @@ -158,8 +160,8 @@ } @mixin mm_colors_searchfield( $cls: "", - $inputBg: $mm_dimmedTextColor, $color: $mm_textColor, - $dimmedColor: $mm_dimmedTextColor + $inputBg: variables.$mm_dimmedTextColor, $color: variables.$mm_textColor, + $dimmedColor: variables.$mm_dimmedTextColor ) { .mm-menu#{$cls} { @@ -176,8 +178,8 @@ } @mixin mm_colors_toggles( $cls: "", - $buttonBg: $mm_backgroundColor, - $offBg: $mm_borderColor, $onBg: $mm_toggleCheckedColor + $buttonBg: variables.$mm_backgroundColor, + $offBg: variables.$mm_borderColor, $onBg: variables.$mm_toggleCheckedColor ) { .mm-menu#{$cls} { @@ -195,4 +197,4 @@ background: $onBg; } } -} \ No newline at end of file +} diff --git a/source/_sass/mmenu/inc/_sizing.scss b/source/_sass/mmenu/inc/_sizing.scss index 49970d4..77ba756 100755 --- a/source/_sass/mmenu/inc/_sizing.scss +++ b/source/_sass/mmenu/inc/_sizing.scss @@ -1,94 +1,91 @@ // Sizing left (default) + +@use "mixins"; @use "sass:math"; +@use "variables"; + +@mixin mm_sizing($cls: "", + $width: variables.$mm_width, $minWidth: variables.$mm_minWidth, $maxWidth: variables.$mm_maxWidth) { + .mm-menu#{$cls} { + width: math.percentage($width ); + min-width: $minWidth; + max-width: $maxWidth; + } + + html.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(math.percentage($width ), 0)); + } + } + + @media all and (max-width: math.div($minWidth, $width)) { + html.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate($minWidth, 0)); + } + } + } + + @media all and (min-width: math.div($maxWidth, $width)) { + html.mm-opening#{$cls} { -@mixin mm_sizing( $cls: "", - $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth -) { - .mm-menu#{$cls} - { - width: math.percentage( $width ); - min-width: $minWidth; - max-width: $maxWidth; - } - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( math.percentage( $width ), 0 ) ); - } - } - @media all and (max-width: math.div($minWidth, $width) ) { - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( $minWidth, 0 ) ); - } - } - } - @media all and (min-width: math.div($maxWidth, $width) ) { - html.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( $maxWidth, 0 ) ); - } - } - } + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate($maxWidth, 0)); + } + } + } } // Sizing right -@mixin mm_sizing_right( $cls: "", - $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth -) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -( math.percentage( $width ) ), 0 ) ); - } - } - @media all and ( max-width: math.div($minWidth, $width) ) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -$minWidth, 0 ) ); - } - } - } - @media all and ( min-width: math.div($maxWidth, $width) ) { - html.mm-right.mm-opening#{$cls} - { - .mm-page, - #mm-blocker - { - @include mm-webkit-prefix( 'transform', translate( -$maxWidth, 0 ) ); - } - } - } +@mixin mm_sizing_right($cls: "", + $width: variables.$mm_width, $minWidth: variables.$mm_minWidth, $maxWidth: variables.$mm_maxWidth) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-(math.percentage($width )), 0)); + } + } + + @media all and (max-width: math.div($minWidth, $width)) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-$minWidth, 0)); + } + } + } + + @media all and (min-width: math.div($maxWidth, $width)) { + html.mm-right.mm-opening#{$cls} { + + .mm-page, + #mm-blocker { + @include mixins.mm-webkit-prefix('transform', translate(-$maxWidth, 0)); + } + } + } } // Sizing z-position -@mixin mm_sizing_zposition( $cls: "", - $height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight -) { - - // top - // bottom - .mm-menu.mm-front#{$cls} - { - &.mm-top, - &.mm-bottom - { - height: math.percentage( $height ); - min-height: $minHeight; - max-height: $maxHeight; - } - } +@mixin mm_sizing_zposition($cls: "", + $height: variables.$mm_height, $minHeight: variables.$mm_minHeight, $maxHeight: variables.$mm_maxHeight) { + + // top + // bottom + .mm-menu.mm-front#{$cls} { + + &.mm-top, + &.mm-bottom { + height: math.percentage($height ); + min-height: $minHeight; + max-height: $maxHeight; + } + } } diff --git a/source/_sass/mmenu/inc/_variables.scss b/source/_sass/mmenu/inc/_variables.scss index f035647..e11dc64 100755 --- a/source/_sass/mmenu/inc/_variables.scss +++ b/source/_sass/mmenu/inc/_variables.scss @@ -19,12 +19,13 @@ $mm_subpanelOffset : 30% !default; $mm_subopenWidth : $mm_btnSize !default; // Addon sizes -$mm_buttonbarHeight : $mm_btnSize - ( $mm_padding * 2 ) !default; +$mm_buttonbarHeight : $mm_btnSize - ($mm_padding * 2) !default; $mm_counterWidth : $mm_btnSize !default; $mm_toggleHeight : $mm_btnSize - $mm_padding !default; -$mm_toggleWidth : ( $mm_toggleHeight * 2 ) - $mm_padding !default; +$mm_toggleWidth : ( + $mm_toggleHeight * 2) - $mm_padding !default; $mm_checkHeight : $mm_btnSize - $mm_padding !default; $mm_checkWidth : $mm_btnSize - $mm_padding !default; @@ -34,25 +35,24 @@ $mm_footerHeight : $mm_btnSize; $mm_headerHeight : $mm_btnSize * 1.5 !default; $mm_headerPaddingTop : $mm_headerHeight * 0.5 !default; -$mm_labelHeight : ( $mm_btnSize * 0.5 ) + ( $mm_padding * 0.5 ) !default; +$mm_labelHeight : ( + $mm_btnSize * 0.5) + ($mm_padding * 0.5) !default; $mm_searchHeight : $mm_btnSize + $mm_padding !default; -$mm_searchfieldHeight : $mm_searchHeight - ( $mm_padding * 2 ) !default; +$mm_searchfieldHeight : $mm_searchHeight - ($mm_padding * 2) !default; // Colors $mm_pageShadow : none; //0 0 20px rgba( 0, 0, 0, 0.5 ) !default; -$mm_borderColor : rgba( 0, 0, 0, 0.15 ) !default; +$mm_borderColor : rgba(0, 0, 0, 0.15) !default; $mm_backgroundColor : #222 !default; -$mm_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.1 ) !default; -$mm_highlightedBackgroundColor : rgba( 255, 255, 255, 0.05 ) !default; -$mm_textColor : rgba( 255, 255, 255, 0.8 ) !default; -$mm_dimmedTextColor : rgba( 255, 255, 255, 0.5 ) !default; +$mm_emphasizedBackgroundColor : rgba(0, 0, 0, 0.1) !default; +$mm_highlightedBackgroundColor : rgba(255, 255, 255, 0.05) !default; +$mm_textColor : rgba(255, 255, 255, 0.8) !default; +$mm_dimmedTextColor : rgba(255, 255, 255, 0.5) !default; // Addon colors $mm_toggleCheckedColor : #4bd963 !default; -@import "mixins"; -@import "sizing"; -@import "colors"; \ No newline at end of file +@use "mixins"; diff --git a/source/_sass/mmenu/jquery.mmenu.all.scss b/source/_sass/mmenu/jquery.mmenu.all.scss index 2198034..b54d645 100755 --- a/source/_sass/mmenu/jquery.mmenu.all.scss +++ b/source/_sass/mmenu/jquery.mmenu.all.scss @@ -1,15 +1,15 @@ -@import "jquery.mmenu"; +@use "jquery.mmenu"; -@import "addons/jquery.mmenu.buttonbars"; -@import "addons/jquery.mmenu.counters"; -@import "addons/jquery.mmenu.dragopen"; -@import "addons/jquery.mmenu.footer"; -@import "addons/jquery.mmenu.header"; -@import "addons/jquery.mmenu.labels"; -@import "addons/jquery.mmenu.searchfield"; -@import "addons/jquery.mmenu.toggles"; +@use "addons/jquery.mmenu.buttonbars" as jquery2; +@use "addons/jquery.mmenu.counters" as jquery3; +@use "addons/jquery.mmenu.dragopen" as jquery4; +@use "addons/jquery.mmenu.footer" as jquery5; +@use "addons/jquery.mmenu.header" as jquery6; +@use "addons/jquery.mmenu.labels" as jquery7; +@use "addons/jquery.mmenu.searchfield" as jquery8; +@use "addons/jquery.mmenu.toggles" as jquery9; -@import "extensions/jquery.mmenu.effects"; -@import "extensions/jquery.mmenu.fullscreen"; -@import "extensions/jquery.mmenu.positioning"; -@import "extensions/jquery.mmenu.themes"; \ No newline at end of file +@use "extensions/jquery.mmenu.effects" as jquery10; +@use "extensions/jquery.mmenu.fullscreen" as jquery11; +@use "extensions/jquery.mmenu.positioning" as jquery12; +@use "extensions/jquery.mmenu.themes" as jquery13; \ No newline at end of file diff --git a/source/_sass/mmenu/jquery.mmenu.oncanvas.scss b/source/_sass/mmenu/jquery.mmenu.oncanvas.scss index c75c4e3..46d8a10 100755 --- a/source/_sass/mmenu/jquery.mmenu.oncanvas.scss +++ b/source/_sass/mmenu/jquery.mmenu.oncanvas.scss @@ -1,298 +1,304 @@ /* jQuery.mmenu panels CSS */ -@import "inc/variables"; +@use "inc/colors"; +@use "inc/mixins"; +@use "inc/sizing"; +@use "inc/variables"; // Animations -.mm-menu.mm-horizontal > .mm-panel -{ - -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; - transition: transform $mm_transitionDuration $mm_transitionFunction; +.mm-menu.mm-horizontal>.mm-panel { + -webkit-transition: -webkit-transform variables.$mm_transitionDuration variables.$mm_transitionFunction; + transition: transform variables.$mm_transitionDuration variables.$mm_transitionFunction; } // Generic classes -.mm-menu .mm-hidden -{ - display: none; +.mm-menu .mm-hidden { + display: none; } // Container -.mm-wrapper -{ - overflow-x: hidden; - position: relative; +.mm-wrapper { + overflow-x: hidden; + position: relative; } // Menu .mm-menu, -.mm-menu > .mm-panel -{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: 0; +.mm-menu>.mm-panel { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 0; } -.mm-menu -{ - background: inherit; - display: block; - overflow: hidden; - padding: 0; - - > .mm-panel - { - background: inherit; - - -webkit-overflow-scrolling: touch; - overflow: scroll; - overflow-x: hidden; - overflow-y: auto; - - box-sizing: border-box; - padding: $mm_padding * 2; - - @include mm_webkit-prefix( 'transform', translateX( 100% ) ); - - &.mm-opened - { - @include mm_webkit-prefix( 'transform', translateX( 0% ) ); - } - &.mm-subopened - { - @include mm_webkit-prefix( 'transform', translateX( -$mm_subpanelOffset ) ); - } - &.mm-highest - { - z-index: 1; - } - } - - // Lists - .mm-list - { - padding: ( $mm_btnSize * 0.5 ) 0; - } - > .mm-list - { - padding-bottom: 0; - - &:after - { - content: ''; - display: block; - height: $mm_btnSize; - } - } + +.mm-menu { + background: inherit; + display: block; + overflow: hidden; + padding: 0; + + >.mm-panel { + background: inherit; + + -webkit-overflow-scrolling: touch; + overflow: scroll; + overflow-x: hidden; + overflow-y: auto; + + box-sizing: border-box; + padding: variables.$mm_padding * 2; + + // Lists + .mm-list { + padding: (variables.$mm_btnSize * 0.5) 0; + } + + >.mm-list { + padding-bottom: 0; + + &.mm-opened { + @include mixins.mm_webkit-prefix('transform', translateX(0%)); + } + + &.mm-subopened { + @include mixins.mm_webkit-prefix('transform', translateX(-(variables.$mm_subpanelOffset))); + } + + &.mm-highest { + z-index: 1; + } + } + + // Lists + .mm-list { + padding: variables.$mm_btnSize * 0.5 0; + } + + >.mm-list { + padding-bottom: 0; + + &:after { + content: ''; + display: block; + height: variables.$mm_btnSize; + } + } + } + + .mm-panel>.mm-list { + margin-left: -(variables.$mm_padding * 2); + margin-right: -(variables.$mm_padding * 2); + + &:first-child { + padding-top: 0; + } + } + + .mm-list, + .mm-list>li { + list-style: none; + display: block; + padding: 0; + margin: 0; + } + + .mm-list { + font: inherit; + font-size: variables.$mm_fontSize; + + a, + a:hover { + text-decoration: none; + } + + >li { + position: relative; + + >a, + >span { + @include mixins.mm_ellipsis; + + color: inherit; + line-height: variables.$mm_btnSize - (variables.$mm_padding * 2); + display: block; + padding: variables.$mm_padding variables.$mm_padding variables.$mm_padding ( + variables.$mm_padding * 2 + ); + margin: 0; + } + } + + >li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) { + @include mixins.mm_border-bottom; + + &:after { + width: auto; + margin-left: (variables.$mm_padding * 2); + position: relative; + left: auto; + } + } + + // subopen/close + a.mm-subopen { + @include mixins.mm_border-left; + + background: rgba(3, 2, 1, 0); + width: variables.$mm_subopenWidth; + height: 100%; + padding: 0; + position: absolute; + right: 0; + top: 0; + z-index: 2; + + +a, + +span { + padding-right: (variables.$mm_padding * 0.5); + margin-right: variables.$mm_subopenWidth; + } + } + + >li.mm-selected { + >a.mm-subopen { + background: transparent; + } + + >a.mm-fullsubopen { + + +a, + +span { + padding-right: variables.$mm_btnSize + (variables.$mm_padding * 0.5); + margin-right: 0; + } + } + } + + a.mm-subclose { + text-indent: variables.$mm_btnSize - (variables.$mm_padding * 2); + padding-top: (variables.$mm_btnSize * 0.5) + variables.$mm_padding; + margin-top: -(variables.$mm_btnSize * 0.5); + } + + +a, + +span { + padding-right: variables.$mm_padding * 0.5; + margin-right: variables.$mm_subopenWidth; + } } -.mm-panel > .mm-list -{ - margin-left: -( $mm_padding * 2 ); - margin-right: -( $mm_padding * 2 ); - - &:first-child - { - padding-top: 0; - } + +>li.mm-selected { + >a.mm-subopen { + background: transparent; + } + + font-size: 10px; + text-transform: uppercase; + text-indent: variables.$mm_padding * 2; + line-height: variables.$mm_labelHeight; + padding-right: variables.$mm_padding * 0.5; } -.mm-list, -.mm-list > li -{ - list-style: none; - display: block; - padding: 0; - margin: 0; +>a.mm-fullsubopen { + + +a, + +span { + padding-right: variables.$mm_btnSize + (variables.$mm_padding * 0.5); + margin-right: 0; + } +} } -.mm-list -{ - font: inherit; - font-size: $mm_fontSize; - - a, - a:hover - { - text-decoration: none; - } - - > li - { - position: relative; - - > a, - > span - { - @include mm_ellipsis; - - color: inherit; - line-height: $mm_btnSize - ( $mm_padding * 2 ); - display: block; - padding: $mm_padding $mm_padding $mm_padding ( $mm_padding * 2 ); - margin: 0; - } - } - - > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults) - { - @include mm_border-bottom; - - &:after - { - width: auto; - margin-left: ( $mm_padding * 2 ); - position: relative; - left: auto; - } - } - - // subopen/close - a.mm-subopen - { - @include mm_border-left; - - background: rgba( 3, 2, 1, 0 ); - width: $mm_subopenWidth; - height: 100%; - padding: 0; - position: absolute; - right: 0; - top: 0; - z-index: 2; - - &.mm-fullsubopen - { - width: 100%; - - &:before - { - border-left: none; - } - } - - + a, - + span - { - padding-right: ( $mm_padding * 0.5 ); - margin-right: $mm_subopenWidth; - } - } - - > li.mm-selected - { - > a.mm-subopen - { - background: transparent; - } - > a.mm-fullsubopen - { - + a, - + span - { - padding-right: $mm_btnSize + ( $mm_padding * 0.5 ); - margin-right: 0; - } - } - } - - a.mm-subclose - { - text-indent: $mm_btnSize - ( $mm_padding * 2 ); - padding-top: ( $mm_btnSize * 0.5 ) + $mm_padding; - margin-top: -( $mm_btnSize * 0.5 ); - } - - // Labels - > li.mm-label - { - @include mm_ellipsis; - - font-size: 10px; - text-transform: uppercase; - text-indent: $mm_padding * 2; - line-height: $mm_labelHeight; - padding-right: $mm_padding * 0.5; - } - - // Spacers - > li.mm-spacer - { - padding-top: $mm_btnSize; - - &.mm-label - { - padding-top: $mm_labelHeight; - } - } - - // Arrows - a.mm-subopen:after, - a.mm-subclose:before - { - @include mm_arrow; - - margin-bottom: -5px; - position: absolute; - bottom: 50%; - } - a.mm-subopen:after - { - @include mm_arrow-next; - - right: 18px; - } - a.mm-subclose:before - { - @include mm_arrow-prev; - - margin-bottom: -( $mm_padding * 2 ) + 5; - left: 22px; - } + +a.mm-subclose { + text-indent: variables.$mm_btnSize - (variables.$mm_padding * 2); + padding-top: variables.$mm_btnSize * 0.5 + variables.$mm_padding; + margin-top: - variables.$mm_btnSize * 0.5; +} + +// Labels +ul>li.mm-label { + @include mixins.mm_ellipsis; + + font-size: 10px; + text-transform: uppercase; + text-indent: variables.$mm_padding * 2; + line-height: variables.$mm_labelHeight; + padding-right: variables.$mm_padding * 0.5; +} + +// Spacers +ul>li.mm-spacer { + padding-top: variables.$mm_btnSize; + + &.mm-label { + padding-top: variables.$mm_labelHeight; + } +} + +// Arrows +a.mm-subopen:after, +a.mm-subclose:before { + @include mixins.mm_arrow; + + margin-bottom: -5px; + position: absolute; + bottom: 50%; +} + +a.mm-subopen:after { + @include mixins.mm_arrow-next; + + right: 18px; +} + +a.mm-subclose:before { + @include mixins.mm_arrow-prev; + + margin-bottom: -(variables.$mm_padding * 2) + 5; + left: 22px; } // vertical submenu -.mm-menu.mm-vertical .mm-list -{ - .mm-panel - { - display: none; - padding: $mm_padding 0 $mm_padding $mm_padding; - - li:last-child:after - { - border-color: transparent; - } - } - li.mm-opened > .mm-panel - { - display: block; - } - > li - { - > a.mm-subopen - { - height: $mm_btnSize; - &:after - { - top: ( $mm_btnSize * 0.5 ) - 4; - bottom: auto; - } - } - &.mm-opened - { - > a.mm-subopen:after - { - @include mm_webkit-prefix( "transform", rotate( 45deg ) ); - } - } - &.mm-label > a.mm-subopen - { - height: $mm_labelHeight; - } - } +.mm-menu.mm-vertical .mm-list { + .mm-panel { + display: none; + padding: variables.$mm_padding 0 variables.$mm_padding variables.$mm_padding; + + li:last-child:after { + border-color: transparent; + } + } + + li.mm-opened>.mm-panel { + display: block; + } + + >li { + >a.mm-subopen { + height: variables.$mm_btnSize; + + &:after { + top: (variables.$mm_btnSize * 0.5) - 4; + bottom: auto; + } + } + + &.mm-opened { + >a.mm-subopen:after { + @include mixins.mm_webkit-prefix("transform", rotate(45deg)); + } + } + + &.mm-label>a.mm-subopen { + height: variables.$mm_labelHeight; + } + } } -@include mm_colors; \ No newline at end of file +@include colors.mm_colors; diff --git a/source/_sass/mmenu/jquery.mmenu.scss b/source/_sass/mmenu/jquery.mmenu.scss index ed6efe3..0764685 100755 --- a/source/_sass/mmenu/jquery.mmenu.scss +++ b/source/_sass/mmenu/jquery.mmenu.scss @@ -2,5 +2,5 @@ jQuery.mmenu CSS */ -@import "jquery.mmenu.oncanvas"; -@import "addons/jquery.mmenu.offcanvas"; +@use "jquery.mmenu.oncanvas"; +@use "addons/jquery.mmenu.offcanvas" as jquery2; diff --git a/source/_sass/responsive/partials/_code.scss b/source/_sass/responsive/partials/_code.scss index fa5124f..7c3193a 100755 --- a/source/_sass/responsive/partials/_code.scss +++ b/source/_sass/responsive/partials/_code.scss @@ -1,8 +1,9 @@ -@use "sass:color"; - /* * Colors and padding. */ + +@use "sass:color"; + pre, code, samp, diff --git a/source/_sass/responsive/partials/_grid.scss b/source/_sass/responsive/partials/_grid.scss index edcac6f..420f30e 100755 --- a/source/_sass/responsive/partials/_grid.scss +++ b/source/_sass/responsive/partials/_grid.scss @@ -1,84 +1,90 @@ - /**Manages width in a single place */ +/**Manages width in a single place */ + +@use "../../base/extends/clearfix"; +@use "../utilities/mixins/breakpoints"; +@use "../utilities/mixins/grid"; +@use "../utilities/variables"; + .container { - margin: 0 auto; - max-width: $grid-container-max-width; - width: $grid-container-width; - - &.fixed, - .fixed & { - width: $grid-container-max-width; - } + margin: 0 auto; + max-width: variables.$grid-container-max-width; + width: variables.$grid-container-width; + + &.fixed, + .fixed & { + width: variables.$grid-container-max-width; + } } .container--full { - width: 100%; - height: 100%; + width: 100%; + height: 100%; - &.fixed, - .fixed & { - width: $grid-container-max-width; - } + &.fixed, + .fixed & { + width: variables.$grid-container-max-width; + } } .row { - @extend .clearfix; + @extend %clearfix; } /**Columns */ [class*=col-] { - display: block; - width: 100%; - float: left; - min-height: 1px; - - [dir="rtl"] & { - float: right; - } - - &[class*=offset], - &[class*=push], - &[class*=pull] { - position: relative; - } + display: block; + width: 100%; + float: left; + min-height: 1px; + + [dir="rtl"] & { + float: right; + } + + &[class*=offset], + &[class*=push], + &[class*=pull] { + position: relative; + } } -.no-gutter.pad-gutter > [class*=col-] { - padding: 0 $grid-column-gutter*0.5; +.no-gutter.pad-gutter>[class*=col-] { + padding: 0 variables.$grid-column-gutter*0.5; } /* * Extra small */ -@include grid-base(xs); +@include grid.grid-base(xs); -@include grid-columns(xs); +@include grid.grid-columns(xs); /* * Small */ -@include bp-min(s) { +@include breakpoints.bp-min(s) { - @include grid-base(s); + @include grid.grid-base(s); - @include grid-columns(s); + @include grid.grid-columns(s); } /* * Medium */ -@include bp-min(m) { +@include breakpoints.bp-min(m) { - @include grid-base(m); + @include grid.grid-base(m); - @include grid-columns(m); + @include grid.grid-columns(m); } /* * Large */ -@include bp-min(l) { +@include breakpoints.bp-min(l) { - @include grid-base(l); + @include grid.grid-base(l); - @include grid-columns(l); + @include grid.grid-columns(l); } diff --git a/source/_sass/responsive/partials/_helpers-layout.scss b/source/_sass/responsive/partials/_helpers-layout.scss index 9e03161..41eaa3b 100755 --- a/source/_sass/responsive/partials/_helpers-layout.scss +++ b/source/_sass/responsive/partials/_helpers-layout.scss @@ -1,3 +1,9 @@ +@use "../../base/extends/clearfix"; +@use "../utilities/mixins/grid-state"; +@use "../utilities/mixins/layout"; +@use "../utilities/mixins/push-pull"; +@use "../utilities/mixins/text-align"; + /* * Clearfix: contain floats * @@ -40,10 +46,10 @@ } } // XS, S, M, L viewports. -@include push-pull(xs); -@include push-pull(s); -@include push-pull(m); -@include push-pull(l); +@include push-pull.push-pull(xs); +@include push-pull.push-pull(s); +@include push-pull.push-pull(m); +@include push-pull.push-pull(l); /* * Layout helpers @@ -61,10 +67,10 @@ } // XS, S, M, L viewports. -@include layout(xs); -@include layout(s); -@include layout(m); -@include layout(l); +@include layout.layout(xs); +@include layout.layout(s); +@include layout.layout(m); +@include layout.layout(l); /* * Text align helpers @@ -82,10 +88,10 @@ } // XS, S, M, L viewports. -@include text-align(xs); -@include text-align(s); -@include text-align(m); -@include text-align(l); +@include text-align.text-align(xs); +@include text-align.text-align(s); +@include text-align.text-align(m); +@include text-align.text-align(l); // Grid state detection. .grid-state-indicator { @@ -101,6 +107,6 @@ } } // Breakpoint driven changes -@include grid-state(s, 1px); -@include grid-state(m, 2px); -@include grid-state(l, 3px); +@include grid-state.grid-state(s, 1px); +@include grid-state.grid-state(m, 2px); +@include grid-state.grid-state(l, 3px); diff --git a/source/_sass/responsive/partials/_helpers-visibility.scss b/source/_sass/responsive/partials/_helpers-visibility.scss index d1053f0..4e79ac2 100755 --- a/source/_sass/responsive/partials/_helpers-visibility.scss +++ b/source/_sass/responsive/partials/_helpers-visibility.scss @@ -1,3 +1,5 @@ +@use "../utilities/mixins/visibility"; + /* * Image replacement */ @@ -87,7 +89,7 @@ } // XS, S, M, L viewports. -@include visibility(xs); -@include visibility(s); -@include visibility(m); -@include visibility(l); +@include visibility.visibility(xs); +@include visibility.visibility(s); +@include visibility.visibility(m); +@include visibility.visibility(l); diff --git a/source/_sass/responsive/partials/_modal.scss b/source/_sass/responsive/partials/_modal.scss index 1af1126..f9f5f1b 100755 --- a/source/_sass/responsive/partials/_modal.scss +++ b/source/_sass/responsive/partials/_modal.scss @@ -1,3 +1,5 @@ +@use "../utilities/variables"; + .modal-on, .modal-lock > body { touch-action: none; @@ -104,7 +106,7 @@ x::-ms-reveal, max-height: 100%; overflow: auto; padding: 1em; - background-color: $modal-content-background-color; + background-color: variables.$modal-content-background-color; text-align: left; [dir="rtl"] & { @@ -139,7 +141,7 @@ x::-ms-reveal, padding: .83em; font-size: 1.5em; font-weight: bold; - color: $modal-control-color; + color: variables.$modal-control-color; [dir="rtl"] & { right: auto; @@ -155,7 +157,7 @@ x::-ms-reveal, display: block; width: 2em; padding: .5em; - color: $modal-control-color; + color: variables.$modal-control-color; font-size: 2em; font-weight: bold; text-align: center; diff --git a/source/_sass/responsive/responsive.scss b/source/_sass/responsive/responsive.scss index d163eee..e47aa34 100755 --- a/source/_sass/responsive/responsive.scss +++ b/source/_sass/responsive/responsive.scss @@ -1,12 +1,12 @@ // Utilities -@import "utilities/variables"; -@import "utilities/mixins/breakpoints"; -@import "utilities/mixins/grid"; -@import "utilities/mixins/push-pull"; -@import "utilities/mixins/grid-state"; -@import "utilities/mixins/layout"; -@import "utilities/mixins/text-align"; -@import "utilities/mixins/visibility"; +@forward "utilities/variables"; +@forward "utilities/mixins/breakpoints"; +@forward "utilities/mixins/grid"; +@forward "utilities/mixins/push-pull"; +@forward "utilities/mixins/grid-state"; +@forward "utilities/mixins/layout"; +@forward "utilities/mixins/text-align"; +@forward "utilities/mixins/visibility"; // Base Styles // @import "partials/copyright"; @@ -14,7 +14,7 @@ // @import "partials/base"; // Grid System -@import "partials/grid"; +@use "partials/grid" as grid2; // CSS Components // @import "partials/alerts"; @@ -29,13 +29,13 @@ // @import "partials/autosize"; // @import "partials/carousel"; // @import "partials/dropdown"; -@import "partials/modal"; +@forward "partials/modal"; // @import "partials/tablelist"; // @import "partials/tabs"; // Helpers -@import "partials/helpers-layout"; -@import "partials/helpers-visibility"; +@forward "partials/helpers-layout"; +@forward "partials/helpers-visibility"; // Print Styles -@import "partials/print"; +@forward "partials/print"; diff --git a/source/_sass/responsive/utilities/_variables.scss b/source/_sass/responsive/utilities/_variables.scss index dd47af2..fcf3812 100755 --- a/source/_sass/responsive/utilities/_variables.scss +++ b/source/_sass/responsive/utilities/_variables.scss @@ -1,6 +1,6 @@ // General Styles $base-font-size: 100% !default; -$base-line-height: 1.4 !default; +$base-line-height: 21px !default; $base-text-color: #222 !default; // Selected text diff --git a/source/_sass/responsive/utilities/mixins/_breakpoints.scss b/source/_sass/responsive/utilities/mixins/_breakpoints.scss index 0123b5a..5eb8620 100755 --- a/source/_sass/responsive/utilities/mixins/_breakpoints.scss +++ b/source/_sass/responsive/utilities/mixins/_breakpoints.scss @@ -1,22 +1,24 @@ -// Media Query Breakpoints +@use "../variables"; + +// Media Query Breakpoints @mixin bp($point) { @if $point == xs { - @media (max-width: $grid-breakpoint-xs-max) { + @media (max-width: variables.$grid-breakpoint-xs-max) { @content; } } @else if $point == s { - @media (min-width: $grid-breakpoint-s-min) and (max-width: $grid-breakpoint-s-max) { + @media (min-width: variables.$grid-breakpoint-s-min) and (max-width: variables.$grid-breakpoint-s-max) { @content; } } @else if $point == m { - @media (min-width: $grid-breakpoint-m-min) and (max-width: $grid-breakpoint-m-max) { + @media (min-width: variables.$grid-breakpoint-m-min) and (max-width: variables.$grid-breakpoint-m-max) { @content; } } @else if $point == l { - @media (min-width: $grid-breakpoint-l-min) { + @media (min-width: variables.$grid-breakpoint-l-min) { @content; } } @@ -25,17 +27,17 @@ // Minimum width. @mixin bp-min($point) { @if $point == s { - @media (min-width: $grid-breakpoint-s-min) { + @media (min-width: variables.$grid-breakpoint-s-min) { @content; } } @else if $point == m { - @media (min-width: $grid-breakpoint-m-min) { + @media (min-width: variables.$grid-breakpoint-m-min) { @content; } } @else if $point == l { - @media (min-width: $grid-breakpoint-l-min) { + @media (min-width: variables.$grid-breakpoint-l-min) { @content; } } @@ -44,18 +46,18 @@ // Max width. @mixin bp-max($point) { @if $point == xs { - @media (max-width: $grid-breakpoint-xs-max) { + @media (max-width: variables.$grid-breakpoint-xs-max) { @content; } } @else if $point == s { - @media (max-width: $grid-breakpoint-s-max) { + @media (max-width: variables.$grid-breakpoint-s-max) { @content; } } @else if $point == m { - @media (max-width: $grid-breakpoint-m-max) { + @media (max-width: variables.$grid-breakpoint-m-max) { @content; } } -} \ No newline at end of file +} diff --git a/source/_sass/responsive/utilities/mixins/_grid-state.scss b/source/_sass/responsive/utilities/mixins/_grid-state.scss index 601d676..052cb31 100755 --- a/source/_sass/responsive/utilities/mixins/_grid-state.scss +++ b/source/_sass/responsive/utilities/mixins/_grid-state.scss @@ -1,8 +1,10 @@ -//== +@use "breakpoints"; + +//== // Creates grid state classes for each breakpoint. //## @mixin grid-state($bp, $width) { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .grid-state-indicator { width: $width; } diff --git a/source/_sass/responsive/utilities/mixins/_grid.scss b/source/_sass/responsive/utilities/mixins/_grid.scss index d039feb..6c1543d 100755 --- a/source/_sass/responsive/utilities/mixins/_grid.scss +++ b/source/_sass/responsive/utilities/mixins/_grid.scss @@ -2,158 +2,168 @@ // Grid System - Base //## +@use "../variables"; +@use "breakpoints"; @use "sass:math"; @mixin grid-base($bp) { - // Large doesn't need an "only" since it operates on min width. - @if $bp != l { - @include bp-max($bp) { - - [class*=col-] { - // Reset classes for each level. - &.reset-#{$bp}-only { - clear: both; - margin-left: 0 !important; - - [dir="rtl"] & { - margin-right: 0 !important; - } - } - } + + // Large doesn't need an "only" since it operates on min width. + @if $bp !=l { + @include breakpoints.bp-max($bp) { + + [class*=col-] { + + // Reset classes for each level. + &.reset-#{$bp}-only { + clear: both; + margin-left: 0 !important; + + [dir="rtl"] & { + margin-right: 0 !important; + } } + } } - // Set the margin for each following column. - [class*=col-#{$bp}] + [class*=col-#{$bp}] { - margin-left: $grid-column-gutter; + } - [dir="rtl"] & { - margin-left: 0; - margin-right: $grid-column-gutter; - } + // Set the margin for each following column. + [class*=col-#{$bp}]+[class*=col-#{$bp}] { + margin-left: variables.$grid-column-gutter; + + [dir="rtl"] & { + margin-left: 0; + margin-right: variables.$grid-column-gutter; } + } - .no-gutter > [class*=col-#{$bp}] { - margin-left: 0; + .no-gutter>[class*=col-#{$bp}] { + margin-left: 0; - [dir="rtl"] & { - margin-left: 0; - margin-right: 0; - } + [dir="rtl"] & { + margin-left: 0; + margin-right: 0; } + } - [class*=col-] { - // Global reset classes. - &.reset-#{$bp} { - clear: both; - margin-left: 0 !important; + [class*=col-] { - [dir="rtl"] & { - margin-right: 0 !important; - } - } + // Global reset classes. + &.reset-#{$bp} { + clear: both; + margin-left: 0 !important; + + [dir="rtl"] & { + margin-right: 0 !important; + } } + } } //== // Grid System - Columns //## @mixin grid-columns($bp) { - // Calculate column width and width with gutter. - $column-width: math.div(100%, $grid-column-count); - $column-width-with-gutter: math.div(100% - ($grid-column-gutter * ($grid-column-count - 1 )), $grid-column-count); + // Calculate column width and width with gutter. + $column-width: math.div(100%, variables.$grid-column-count); + $column-width-with-gutter: math.div(100% - (variables.$grid-column-gutter * (variables.$grid-column-count - 1)), variables.$grid-column-count); + + // Loop through and set width. + @for $i from 1 to (variables.$grid-column-count + 1) { + $temp-width: $column-width-with-gutter * $i + (variables.$grid-column-gutter * $i); + + .col-#{$bp}-#{$i} { + width: $temp-width - variables.$grid-column-gutter; + } + + // We don't want add offsets etc to full width columns. + @if $i !=variables.$grid-column-count { + .offset-#{$bp}-#{$i} { + margin-left: $temp-width; + + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width; + } + } + + [class*=col-]+.offset-#{$bp}-#{$i} { + margin-left: $temp-width + variables.$grid-column-gutter; + + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width + variables.$grid-column-gutter; + } + } - // Loop through and set width. - @for $i from 1 to ($grid-column-count + 1) { - $temp-width: $column-width-with-gutter * $i + ($grid-column-gutter * $i); + .push-#{$bp}-#{$i} { + left: $temp-width; - .col-#{$bp}-#{$i} { - width: $temp-width - $grid-column-gutter; + [dir="rtl"] & { + left: auto; + right: $temp-width; } - // We don't want add offsets etc to full width columns. - @if $i != $grid-column-count { - .offset-#{$bp}-#{$i} { - margin-left: $temp-width; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width; - } - } - - [class*=col-] + .offset-#{$bp}-#{$i} { - margin-left: $temp-width + $grid-column-gutter; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width + $grid-column-gutter; - } - } - - .push-#{$bp}-#{$i} { - left: $temp-width; - - [dir="rtl"] & { - left: auto; - right: $temp-width; - } - } - - .pull-#{$bp}-#{$i} { - right: $temp-width; - - [dir="rtl"] & { - right: auto; - left: $temp-width; - } - } + } + + .pull-#{$bp}-#{$i} { + right: $temp-width; + + [dir="rtl"] & { + right: auto; + left: $temp-width; } - @else { - // Ensure that the gutter is reset on full width columns. - .col-#{$bp}-#{$i}, - [class*=col-] + [class*=col-#{$bp}-#{$i}] { - margin-left: 0; - - [dir="rtl"] & { - margin-right: 0; - } - } + } + } + + @else { + + // Ensure that the gutter is reset on full width columns. + .col-#{$bp}-#{$i}, + [class*=col-]+[class*=col-#{$bp}-#{$i}] { + margin-left: 0; + + [dir="rtl"] & { + margin-right: 0; } + } } - // Loop through and build the "no-gutter" columns. - .no-gutter { - @for $i from 1 to ($grid-column-count + 1) { - $temp-width: $column-width * $i; - - > .col-#{$bp}-#{$i} { - width: $temp-width; - } - - > .offset-#{$bp}-#{$i} { - margin-left: $temp-width; - - [dir="rtl"] & { - margin-left: 0; - margin-right: $temp-width; - } - } - - > .push-#{$bp}-#{$i} { - left: $temp-width; - - [dir="rtl"] & { - left: auto; - right: $temp-width; - } - } - - > .pull-#{$bp}-#{$i} { - right: $temp-width; - - [dir="rtl"] & { - right: auto; - left: $temp-width; - } - } + } + + // Loop through and build the "no-gutter" columns. + .no-gutter { + @for $i from 1 to (variables.$grid-column-count + 1) { + $temp-width: $column-width * $i; + + >.col-#{$bp}-#{$i} { + width: $temp-width; + } + + >.offset-#{$bp}-#{$i} { + margin-left: $temp-width; + + [dir="rtl"] & { + margin-left: 0; + margin-right: $temp-width; + } + } + + >.push-#{$bp}-#{$i} { + left: $temp-width; + + [dir="rtl"] & { + left: auto; + right: $temp-width; + } + } + + >.pull-#{$bp}-#{$i} { + right: $temp-width; + + [dir="rtl"] & { + right: auto; + left: $temp-width; } + } } + } } diff --git a/source/_sass/responsive/utilities/mixins/_layout.scss b/source/_sass/responsive/utilities/mixins/_layout.scss index c9f887d..48bc408 100755 --- a/source/_sass/responsive/utilities/mixins/_layout.scss +++ b/source/_sass/responsive/utilities/mixins/_layout.scss @@ -1,4 +1,6 @@ -@mixin layout($bp) { +@use "breakpoints"; + +@mixin layout($bp) { // XS doesn't have a min value. @if $bp == xs { @@ -14,7 +16,7 @@ display: inline; } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .block-#{$bp}-only { display: block !important; } @@ -30,7 +32,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .block-#{$bp} { display: block !important; @@ -45,7 +47,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .block-#{$bp}-only { display: block !important; } diff --git a/source/_sass/responsive/utilities/mixins/_push-pull.scss b/source/_sass/responsive/utilities/mixins/_push-pull.scss index 9542d93..d9037a1 100755 --- a/source/_sass/responsive/utilities/mixins/_push-pull.scss +++ b/source/_sass/responsive/utilities/mixins/_push-pull.scss @@ -1,4 +1,6 @@ -//== +@use "breakpoints"; + +//== // Creates float classes for each breakpoint. //## @mixin push-pull($bp) { @@ -21,7 +23,7 @@ } } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .push-#{$bp}-only { float: right !important; @@ -41,7 +43,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .push-#{$bp} { float: right !important; @@ -60,7 +62,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .push-#{$bp}-only { float: right !important; diff --git a/source/_sass/responsive/utilities/mixins/_text-align.scss b/source/_sass/responsive/utilities/mixins/_text-align.scss index 1efc689..0a92937 100755 --- a/source/_sass/responsive/utilities/mixins/_text-align.scss +++ b/source/_sass/responsive/utilities/mixins/_text-align.scss @@ -1,4 +1,6 @@ -//== +@use "breakpoints"; + +//== // Creates text align classes for each breakpoint. //## @mixin text-align($bp) { @@ -17,7 +19,7 @@ text-align: center !important; } - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .text-#{$bp}-left-only { text-align: left !important; } @@ -33,7 +35,7 @@ } @else { - @include bp-min($bp) { + @include breakpoints.bp-min($bp) { .text-#{$bp}-left { text-align: left !important; @@ -48,7 +50,7 @@ } // Large doesn't need an "only" since it operates on min width. @if $bp != l { - @include bp-max($bp) { + @include breakpoints.bp-max($bp) { .text-#{$bp}-left { text-align: left !important; } diff --git a/source/_sass/responsive/utilities/mixins/_visibility.scss b/source/_sass/responsive/utilities/mixins/_visibility.scss index 3c53be8..74f6cc4 100755 --- a/source/_sass/responsive/utilities/mixins/_visibility.scss +++ b/source/_sass/responsive/utilities/mixins/_visibility.scss @@ -1,8 +1,10 @@ -//== +@use "breakpoints"; + +//== // Creates visibility classes for each breakpoint. //## @mixin visibility($bp) { - @include bp($bp) { + @include breakpoints.bp($bp) { .hidden-#{$bp} { display: none !important; diff --git a/source/_sass/sections/blog.scss b/source/_sass/sections/blog.scss index bcde02e..7917a7a 100644 --- a/source/_sass/sections/blog.scss +++ b/source/_sass/sections/blog.scss @@ -14,11 +14,13 @@ * limitations under the License. */ +@use "../colors"; +@use "../responsive/utilities/mixins/breakpoints"; @use "sass:color"; .blog__meta { - border-bottom: 1px solid $gray-09; - border-top: 1px solid $gray-09; + border-bottom: 1px solid colors.$gray-09; + border-top: 1px solid colors.$gray-09; padding: 0.5em; margin-bottom: 1em; } @@ -53,7 +55,7 @@ font-size: 0.9em; a { - color: color.adjust($gray-09, $lightness: -20%, $space: hsl); + color: color.adjust(colors.$gray-09, $lightness: -20%, $space: hsl); } } @@ -65,7 +67,7 @@ } p { - color: $gray-09; + color: colors.$gray-09; font-size: 0.85em; text-align: center; } @@ -75,7 +77,7 @@ float: left; max-width: 43em; - @include bp-min (m) { + @include breakpoints.bp-min (m) { width: 83%; } } diff --git a/source/_sass/sections/documentation.scss b/source/_sass/sections/documentation.scss index 66731d5..4a6e91c 100644 --- a/source/_sass/sections/documentation.scss +++ b/source/_sass/sections/documentation.scss @@ -14,22 +14,27 @@ * limitations under the License. */ +@use "../base/lists"; +@use "../base/variables"; +@use "../colors"; +@use "../header"; @use "sass:color"; +@use "sass:meta"; -$docs-header-color: $gray-06; +$docs-header-color: colors.$gray-06; .documentation { max-width: 43em; a, a code { - color: color.adjust($base-link-color, $lightness: -20%, $space: hsl); + color: color.adjust(variables.$base-link-color, $lightness: -20%, $space: hsl); font-weight: 600; } a:hover, a:active { - color: color.adjust($base-link-color, $lightness: -40%, $space: hsl); + color: color.adjust(variables.$base-link-color, $lightness: -40%, $space: hsl); } } @@ -55,7 +60,7 @@ $docs-header-color: $gray-06; &:hover, &:active, &:focus { - color: $gray-02; + color: colors.$gray-02; } } } @@ -81,8 +86,8 @@ $docs-header-color: $gray-06; &::before { content: ' '; display: block; - height: $header-height; - margin-top: -1 * $header-height; + height: header.$header-height; + margin-top: -1 * header.$header-height; visibility: hidden; } @@ -107,21 +112,21 @@ $docs-header-color: $gray-06; a { background-color: color.adjust($docs-header-color, $lightness: 8%, $space: hsl); border-radius: 4px 4px 0 0; - color: color.adjust($gray-02, $lightness: 10%, $space: hsl); + color: color.adjust(colors.$gray-02, $lightness: 10%, $space: hsl); display: block; padding: 0.4em 0.8em; text-transform: uppercase; &.active { background-color: $docs-header-color; - color: $gray-02; + color: colors.$gray-02; } } } .docs__item__header { background-color: $docs-header-color; - color: $gray-02; + color: colors.$gray-02; font-size: 0.9em; font-weight: 600; padding: 0.5em; @@ -129,12 +134,12 @@ $docs-header-color: $gray-06; a, a:hover, a:active { - color: $gray-02; + color: colors.$gray-02; } } .docs__item__name { - color: $gray-02; + color: colors.$gray-02; font-weight: bold; } @@ -153,7 +158,7 @@ $docs-header-color: $gray-06; padding: 0.5em; h4 { - border-bottom: 1px solid $color-docs; + border-bottom: 1px solid colors.$color-docs; text-transform: uppercase; font-weight: 600; font-size: 1.2em; @@ -181,7 +186,7 @@ $docs-header-color: $gray-06; } .docs__item--missing { - border: 1px solid $gray-09; + border: 1px solid colors.$gray-09; padding: 0.5em; p { @@ -190,10 +195,10 @@ $docs-header-color: $gray-06; } .alert--docs-notes { - background-color: $gray-05; - border-bottom: 2px solid $color-docs; - border-top: 2px solid $color-docs; - color: $gray-03; + background-color: colors.$gray-05; + border-bottom: 2px solid colors.$color-docs; + border-top: 2px solid colors.$color-docs; + color: colors.$gray-03; margin: 0 -0.5em 1em; h5 { @@ -207,13 +212,13 @@ $docs-header-color: $gray-06; &::before { content: ' '; display: block; - height: $header-height; - margin-top: -1 * $header-height; + height: header.$header-height; + margin-top: -1 * header.$header-height; visibility: hidden; } } -@import 'documentation/c'; -@import 'documentation/android'; -@import 'documentation/ios'; -@import 'documentation/js'; +@include meta.load-css('documentation/c'); +@include meta.load-css('documentation/android'); +@include meta.load-css('documentation/ios'); +@include meta.load-css('documentation/js'); diff --git a/source/_sass/sections/documentation/android.scss b/source/_sass/sections/documentation/android.scss index 805701e..8dfa850 100644 --- a/source/_sass/sections/documentation/android.scss +++ b/source/_sass/sections/documentation/android.scss @@ -14,6 +14,10 @@ * limitations under the License. */ +@use "../../../_sass/base/variables"; +@use "../../../_sass/bourbon/addons/font-family"; +@use "../../../_sass/colors"; + .documentation__android { ul { list-style-type:disc; @@ -27,12 +31,12 @@ } .detail, .serialized-class-details { - border: 1px solid $gray-06; + border: 1px solid colors.$gray-06; h3 { font-size: 0.9em; padding: 8px; - background-color: $gray-06; + background-color: colors.$gray-06; } & > :not(h3) { @@ -116,7 +120,7 @@ } dl.notes > dt { text-transform: uppercase; - border-bottom: 1px solid $pink; + border-bottom: 1px solid colors.$pink; font-weight:600; font-size: 1.2em; margin:10px 0 0 0; @@ -189,7 +193,7 @@ .summary-table, .details-table { width:100%; border-spacing:0; - border:1px solid $gray-06; + border:1px solid colors.$gray-06; padding:0; } .caption { @@ -207,7 +211,7 @@ white-space:pre; } .caption a:link, .caption a:visited { - color:$lightblue; + color:colors.$lightblue; } .caption a:hover, .caption a:active { @@ -221,7 +225,7 @@ padding-right:12px; padding-bottom:7px; float:left; - background-color:$pink; + background-color:colors.$pink; color:#FFFFFF; border: none; } @@ -276,7 +280,7 @@ padding-bottom:3px; } .table-header { - background:$gray-06; + background:colors.$gray-06; font-weight: bold; font-size:0.9em; } @@ -305,7 +309,7 @@ background-color:#FFFFFF; } .odd-row-color, .odd-row-color .table-header { - background-color:$gray-01; + background-color:colors.$gray-01; } /* * Styles for contents. @@ -325,7 +329,7 @@ .package-signature, .type-signature, .member-signature { - font-family:$monospace; + font-family:font-family.$monospace; margin:14px 0; } .member-signature .type-parameters-long, @@ -342,7 +346,7 @@ * Styles for formatting effect. */ .source-line-no { - color:$green; + color:colors.$green; padding:0 30px 0 0; } h1.hidden { @@ -353,7 +357,7 @@ .block { display:block; margin:0 10px 5px 0; - color: $base-font-color; + color: variables.$base-font-color; } .deprecated-label, .descfrm-type-label, .implementation-label, .member-name-label, .member-name-link, .module-label-in-package, .module-label-in-type, .override-specify-label, .package-label-in-type, diff --git a/source/_sass/sections/events.scss b/source/_sass/sections/events.scss index 939aef2..cef11f8 100644 --- a/source/_sass/sections/events.scss +++ b/source/_sass/sections/events.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; @use "sass:color"; @use "sass:math"; @@ -25,7 +27,7 @@ .events__calendar { width: 100%; - background-color: $white; + background-color: colors.$white; margin-bottom: 1em; th, @@ -36,9 +38,9 @@ .calendar__month, .calendar__arrow { - background-color: $gray-09; + background-color: colors.$gray-09; font-weight: 700; - color: $white; + color: colors.$white; } .calendar__arrow { @@ -46,7 +48,7 @@ padding: 0; a { - color: $white; + color: colors.$white; } } @@ -62,16 +64,16 @@ } .calendar__day--past { - color: $gray-06; + color: colors.$gray-06; } .calendar__day--event { - background-color: $green; + background-color: colors.$green; color: #fff; } .calendar__day--past-event { - background-color: $gray-06; + background-color: colors.$gray-06; color: #fff; } @@ -94,20 +96,19 @@ .event__meta { font-size: 0.9em; - color: color.adjust($gray-09, $lightness: -20%, $space: hsl); - margin-bottom: 0.5em; + color: color.adjust(colors.$gray-09, $lightness: -20%, $space: hsl); } } .event--highlighted { padding: 0 10px; - border-left: 10px solid $color-community; + border-left: 10px solid colors.$color-community; margin-left: -20px; } .event--past { a { - color: color.adjust($base-link-color, $lightness: 15%, $space: hsl); + color: color.adjust(variables.$base-link-color, $lightness: 15%, $space: hsl); } } } diff --git a/source/_sass/sections/examples.scss b/source/_sass/sections/examples.scss index ad9ef3d..a919ffc 100644 --- a/source/_sass/sections/examples.scss +++ b/source/_sass/sections/examples.scss @@ -14,6 +14,7 @@ * limitations under the License. */ +@use "../colors"; @use "sass:color"; .examples__filters { @@ -29,9 +30,9 @@ } .examples__tag { - background-color: $color-examples; + background-color: colors.$color-examples; border-radius: 3px; - color: $white; + color: colors.$white; display: inline-block; font-size: 0.75em; line-height: 1; @@ -44,17 +45,17 @@ &:hover, &:active, &:focus { - color: $white; - background-color: color.adjust($color-examples, $lightness: -20%, $space: hsl); + color: colors.$white; + background-color: color.adjust(colors.$color-examples, $lightness: -20%, $space: hsl); } } .examples__filters--selected { .examples__tag { - background-color: color.adjust($color-examples, $lightness: 20%, $space: hsl); + background-color: color.adjust(colors.$color-examples, $lightness: 20%, $space: hsl); &.selected { - background-color: $color-examples; + background-color: colors.$color-examples; } } } @@ -64,5 +65,5 @@ margin-bottom: 0.5em; font-size: 0.8em; text-transform: uppercase; - color: $gray-09; + color: colors.$gray-09; } diff --git a/source/_sass/sections/guides.scss b/source/_sass/sections/guides.scss index 7b7fb66..69ed3cd 100644 --- a/source/_sass/sections/guides.scss +++ b/source/_sass/sections/guides.scss @@ -14,6 +14,8 @@ * limitations under the License. */ +@use "../colors"; + .guides__toc { h2 { @@ -48,5 +50,5 @@ table td hr { margin: 0; - border-bottom-color: $gray-06; + border-bottom-color: colors.$gray-06; } diff --git a/source/_sass/sections/inspiration.scss b/source/_sass/sections/inspiration.scss index 987451d..8d69586 100644 --- a/source/_sass/sections/inspiration.scss +++ b/source/_sass/sections/inspiration.scss @@ -14,11 +14,13 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../colors"; @use "sass:color"; .inspiration-page { h2 { - color: $purple; + color: colors.$purple; font-size: 1.5rem; margin: 1rem 0 0; text-transform: uppercase; @@ -28,7 +30,7 @@ blockquote { font-size: 1.3rem; border: 0; - color: color.adjust($base-font-color, $lightness: 20%, $space: hsl); + color: color.adjust(variables.$base-font-color, $lightness: 20%, $space: hsl); margin: 0; padding: 0; diff --git a/source/_sass/sections/retreat.scss b/source/_sass/sections/retreat.scss index 50c8cc8..f5d26fb 100644 --- a/source/_sass/sections/retreat.scss +++ b/source/_sass/sections/retreat.scss @@ -14,6 +14,13 @@ * limitations under the License. */ +@use "../base/variables"; +@use "../bourbon/css3/flex-box"; +@use "../colors"; +@use "../elements/sectionmenu"; +@use "../elements/sidebar"; +@use "../header"; +@use "../responsive/utilities/mixins/breakpoints"; @use "sass:color"; $banner-blue: #066AC4; @@ -36,8 +43,8 @@ $banner-blue: #066AC4; &::before { content: ' '; display: block; - height: $header-height + 60px; - margin-top: -1 * ($header-height + 60px); + height: header.$header-height + 60px; + margin-top: -1 * (header.$header-height + 60px); visibility: hidden; } } @@ -54,7 +61,7 @@ $banner-blue: #066AC4; width: 100%; max-height: 620px; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { padding-top: 3rem; } @@ -69,14 +76,14 @@ $banner-blue: #066AC4; .retreat-nav { background-color: color.adjust(#222, $alpha: -0.3); - left: $sidebar-width + $section-menu-width; + left: sidebar.$sidebar-width + sectionmenu.$section-menu-width; position: fixed; text-align: center; - top: $header-height; + top: header.$header-height; right: 0; z-index: 100; - @include bp-max ($sidebar-hide-at) { + @include breakpoints.bp-max (sidebar.$sidebar-hide-at) { left: 0; width: 100%; } @@ -87,18 +94,18 @@ $banner-blue: #066AC4; } ul { - @include display(flex); + @include flex-box.display(flex); } li { - @include flex(1 0 auto); + @include flex-box.flex(1 0 auto); display: block; - &:last-child > a { + &:last-child>a { margin-right: 0 !important; } - > a { + >a { color: #fff; display: block; padding: 1rem 0; @@ -129,7 +136,7 @@ $banner-blue: #066AC4; font-size: 1.2rem; margin-top: 5vw; - @include bp-min(s) { + @include breakpoints.bp-min(s) { padding: 2em 0; margin-top: 20vw; font-size: 1.3em; @@ -148,8 +155,8 @@ $banner-blue: #066AC4; position: relative; &::before { - border-radius: $base-border-radius; - color: $white; + border-radius: variables.$base-border-radius; + color: colors.$white; font-size: 1.4em; font-weight: normal; left: 0; @@ -165,7 +172,7 @@ $banner-blue: #066AC4; dt { &::before { - background-color: $pebble-pink; + background-color: colors.$pebble-pink; content: 'Q'; } } @@ -173,7 +180,7 @@ $banner-blue: #066AC4; dd { &::before { - background-color: $pebble-green; + background-color: colors.$pebble-green; content: 'A'; } } diff --git a/source/_sass/sections/round.scss b/source/_sass/sections/round.scss index 4f821c5..1a31d88 100644 --- a/source/_sass/sections/round.scss +++ b/source/_sass/sections/round.scss @@ -14,13 +14,17 @@ * limitations under the License. */ +@use "../colors"; +@use "../elements/sidebar"; +@use "../responsive/utilities/mixins/breakpoints"; + .round-landing { background-image: url('../images/round/splash.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { height: 120%; } } @@ -28,7 +32,7 @@ .round-landing__contents { max-width: 800px; width: 80%; - color: $white; + color: colors.$white; text-align: center; padding-top: 5%; margin: 0 auto; @@ -44,7 +48,7 @@ margin: 0 auto 2rem; } -@include bp-max (s) { +@include breakpoints.bp-max (s) { .round-landing__buttons { .btn { display: block; @@ -58,7 +62,7 @@ } } -@include bp-min (m) { +@include breakpoints.bp-min (m) { .round-landing__buttons { display: -webkit-flex; display: flex; @@ -74,22 +78,22 @@ font-size: 1.2em; font-weight: 300; background-color: rgba(200, 200, 200, 0.7); - color: $black; + color: colors.$black; padding: 0.5em 0.8em; margin: 1em 0; a { - color: $black; + color: colors.$black; text-decoration: underline; &:hover { - color: $black; + color: colors.$black; } } - @include bp-min (m) { + @include breakpoints.bp-min (m) { position: absolute; - left: $sidebar-width + 20px; + left: sidebar.$sidebar-width + 20px; bottom: 20px; width: 50%; min-width: 300px; diff --git a/source/_sass/sections/sdk.scss b/source/_sass/sections/sdk.scss index b4c2db5..dcb423a 100644 --- a/source/_sass/sections/sdk.scss +++ b/source/_sass/sections/sdk.scss @@ -14,13 +14,15 @@ * limitations under the License. */ +@use "../responsive/utilities/mixins/breakpoints"; + .sdk4-landing { background-image: url('../images/landing-page/devblog.jpg'); background-repeat: no-repeat; background-position: center bottom; background-size: cover; - @include bp-max (xs) { + @include breakpoints.bp-max (xs) { height: 120%; } } diff --git a/source/assets/css/main.scss b/source/assets/css/main.scss index 83609e2..95b44c4 100644 --- a/source/assets/css/main.scss +++ b/source/assets/css/main.scss @@ -16,4 +16,4 @@ * limitations under the License. */ -@import 'app'; +@use 'app';