diff --git a/src/App.scss b/src/App.scss index 70360c1a30..6311bc3c96 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1 +1 @@ -@import './styles/main'; +@use 'styles/main'; diff --git a/src/styles/base/_base-config.scss b/src/styles/base/_base-config.scss index 9412bafcdb..8712ca2a1c 100644 --- a/src/styles/base/_base-config.scss +++ b/src/styles/base/_base-config.scss @@ -20,7 +20,7 @@ */ -@import "reset"; -@import "variables"; -@import "layout"; -@import "fonts"; +@use "reset"; +@use "variables"; +@use "layout"; +@use "fonts"; diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss index e9d1737ee8..2f9ddd5302 100644 --- a/src/styles/base/_fonts.scss +++ b/src/styles/base/_fonts.scss @@ -1,3 +1,6 @@ +@use "sass:meta"; +@use "variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -26,10 +29,10 @@ @mixin font-face($font-family, $file, $font-weight, $font-style) { @font-face { font-family: $font-family; - src: url('#{$font-path}#{$file}.eot'); - src: url('#{$font-path}#{$file}.eot?#iefix') format('embedded-opentype'), - url('#{$font-path}#{$file}.woff') format('woff'), - url('#{$font-path}#{$file}.ttf') format('truetype'); + src: url('#{variables.$font-path}#{$file}.eot'); + src: url('#{variables.$font-path}#{$file}.eot?#iefix') format('embedded-opentype'), + url('#{variables.$font-path}#{$file}.woff') format('woff'), + url('#{variables.$font-path}#{$file}.ttf') format('truetype'); font-weight: $font-weight; font-style: $font-style; } @@ -53,4 +56,4 @@ @include font-face('FontAwesome', 'fontawesome-webfont', normal, normal); -@import "fontawesome/fontawesome-config"; +@include meta.load-css("fontawesome/fontawesome-config"); diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss index 7a4d471b30..ba9d2fe6f0 100644 --- a/src/styles/base/_layout.scss +++ b/src/styles/base/_layout.scss @@ -1,3 +1,5 @@ +@use "variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -24,15 +26,15 @@ html, body { width: 100%; height: 100%; - font-family: $font-stack; + font-family: variables.$font-stack; } body { - background: $body-background; + background: variables.$body-background; font-size: 14px; - font-family: $font-stack; + font-family: variables.$font-stack; position: relative; - color: $global-text-color; + color: variables.$global-text-color; } @@ -43,7 +45,7 @@ a { text-decoration: none; &:hover { - color: $color-link-hover; + color: variables.$color-link-hover; } } diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index d0050e2948..0ab1dd7a82 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/shade"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -64,10 +67,10 @@ $color-white: #fff; // Primary color with light/medium/darker shades -$prim-color: darken(#fff, 50%); -$light-prim-color: lighten($prim-color, 15%); -$medium-prim-color: darken($prim-color, 10%); -$dark-prim-color: darken($prim-color, 30%); +$prim-color: color.adjust(#fff, $lightness: -50%); +$light-prim-color: color.adjust($prim-color, $lightness: 15%); +$medium-prim-color: color.adjust($prim-color, $lightness: -10%); +$dark-prim-color: color.adjust($prim-color, $lightness: -30%); $global-text-color: $medium-prim-color; @@ -86,15 +89,15 @@ $color-link-hover: $dark-prim-color; // Highlights and Lowlights // ---------------------------------------- -$primary-color-green-light-3: lighten($primary-color-green, 24%); // #92e0bb -$primary-color-green-light-2: lighten($primary-color-green, 12%); // #63d29e -$primary-color-green-light-1: lighten($primary-color-green, 6%); // #4bcc8f +$primary-color-green-light-3: color.adjust($primary-color-green, $lightness: 24%); // #92e0bb +$primary-color-green-light-2: color.adjust($primary-color-green, $lightness: 12%); // #63d29e +$primary-color-green-light-1: color.adjust($primary-color-green, $lightness: 6%); // #4bcc8f -$primary-color-green-dark-1: darken($primary-color-green, 9%); // #2d9d68 -$primary-color-green-dark-2: darken($primary-color-green, 15%); // #268558 -$primary-color-green-dark-3: darken($primary-color-green, 20%); // #20724b +$primary-color-green-dark-1: color.adjust($primary-color-green, $lightness: -9%); // #2d9d68 +$primary-color-green-dark-2: color.adjust($primary-color-green, $lightness: -15%); // #268558 +$primary-color-green-dark-3: color.adjust($primary-color-green, $lightness: -20%); // #20724b -$table-highlight: lighten($light-prim-color, 28%); +$table-highlight: color.adjust($light-prim-color, $lightness: 28%); // Border // ---------------------------------------- @@ -143,8 +146,8 @@ $modal-nav-bg-color: #eeeff0; $modal-nav-border-color: #d6d6d6; $modal-nav-link-color: #646E75; $modal-nav-link-active-color: $header-link-color; -$subpage-navigation-link-color: lighten($header-link-color, 25%); -$subpage-navigation-link-hover-color: lighten($header-link-color, 35%); +$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); +$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); // Stats // ---------------------------------------- @@ -208,22 +211,22 @@ $img-path: "/src/img/"; // Success (Green) $state-success-text: #3c763d; $state-success-bg: #dff0d8; -$state-success-border: darken(shade($state-success-bg, 1%), 3%); +$state-success-border: color.adjust(shade.shade($state-success-bg, 1%), $lightness: -3%); // Info (Blue) -$state-info-text: lighten(#31708f, 5%); +$state-info-text: color.adjust(#31708f, $lightness: 5%); $state-info-bg: #d9edf7; -$state-info-border: darken(shade($state-info-bg, 1%), 5%); +$state-info-border: color.adjust(shade.shade($state-info-bg, 1%), $lightness: -5%); // Warning (Yellow) $state-warning-text: #8a6d3b; $state-warning-bg: #fcf8e3; -$state-warning-border: darken(shade($state-warning-bg, 1%), 5%); +$state-warning-border: color.adjust(shade.shade($state-warning-bg, 1%), $lightness: -5%); // Danger (Red) $state-danger-text: #a94442; $state-danger-bg: #f2dede; -$state-danger-border: darken(shade($state-danger-bg, 1%), 3%); +$state-danger-border: color.adjust(shade.shade($state-danger-bg, 1%), $lightness: -3%); // Transition $alert-transition: color 300ms ease-in; diff --git a/src/styles/base/fontawesome/_animated.scss b/src/styles/base/fontawesome/_animated.scss index 8a020dbfff..50f6ade0ee 100644 --- a/src/styles/base/fontawesome/_animated.scss +++ b/src/styles/base/fontawesome/_animated.scss @@ -1,12 +1,14 @@ +@use "variables"; + // Spinning Icons // -------------------------- -.#{$fa-css-prefix}-spin { +.#{variables.$fa-css-prefix}-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } -.#{$fa-css-prefix}-pulse { +.#{variables.$fa-css-prefix}-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } diff --git a/src/styles/base/fontawesome/_bordered-pulled.scss b/src/styles/base/fontawesome/_bordered-pulled.scss index d4b85a02f2..51bec1e6bd 100644 --- a/src/styles/base/fontawesome/_bordered-pulled.scss +++ b/src/styles/base/fontawesome/_bordered-pulled.scss @@ -1,25 +1,27 @@ +@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; } -.#{$fa-css-prefix}-pull-left { float: left; } -.#{$fa-css-prefix}-pull-right { float: right; } +.#{variables.$fa-css-prefix}-pull-left { float: left; } +.#{variables.$fa-css-prefix}-pull-right { float: right; } -.#{$fa-css-prefix} { - &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } - &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } +.#{variables.$fa-css-prefix} { + &.#{variables.$fa-css-prefix}-pull-left { margin-right: .3em; } + &.#{variables.$fa-css-prefix}-pull-right { margin-left: .3em; } } /* Deprecated as of 4.4.0 */ .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/src/styles/base/fontawesome/_core.scss b/src/styles/base/fontawesome/_core.scss index bb0c29187c..02e2abaf7e 100644 --- a/src/styles/base/fontawesome/_core.scss +++ b/src/styles/base/fontawesome/_core.scss @@ -1,11 +1,13 @@ +@use "variables"; + @use "sass:list"; // Base Class Definition // ------------------------- -.#{$fa-css-prefix} { +.#{variables.$fa-css-prefix} { display: inline-block; - font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration + font: normal normal normal list.slash(variables.$fa-font-size-base, variables.$fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_fa-mixins.scss b/src/styles/base/fontawesome/_fa-mixins.scss index 6631c1ea9e..9754dd9df2 100644 --- a/src/styles/base/fontawesome/_fa-mixins.scss +++ b/src/styles/base/fontawesome/_fa-mixins.scss @@ -67,4 +67,18 @@ &:#{$pseudo-position} { float: $float; } -} \ No newline at end of file +} + +// Font Smoothing +@mixin font-smoothing($value: on) { + + @if $value == on { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + @if $value == off { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + } +} diff --git a/src/styles/base/fontawesome/_fa-variables.scss b/src/styles/base/fontawesome/_fa-variables.scss index 91a8dc0af4..9e1b8bfee1 100644 --- a/src/styles/base/fontawesome/_fa-variables.scss +++ b/src/styles/base/fontawesome/_fa-variables.scss @@ -1,3 +1,5 @@ +@use "variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -19,4 +21,4 @@ * */ -$fa-icon-warning-sign: $fa-var-warning; \ No newline at end of file +$fa-icon-warning-sign: variables.$fa-var-warning; \ No newline at end of file diff --git a/src/styles/base/fontawesome/_fixed-width.scss b/src/styles/base/fontawesome/_fixed-width.scss index 29d8e767d7..881b199e0a 100644 --- a/src/styles/base/fontawesome/_fixed-width.scss +++ b/src/styles/base/fontawesome/_fixed-width.scss @@ -1,9 +1,11 @@ +@use "variables"; + @use "sass:math"; // Fixed Width Icons // ------------------------- -.#{$fa-css-prefix}-fw { +.#{variables.$fa-css-prefix}-fw { width: math.div(18em, 14); text-align: center; } diff --git a/src/styles/base/fontawesome/_fontawesome-config.scss b/src/styles/base/fontawesome/_fontawesome-config.scss index 822eef2947..7d330df126 100644 --- a/src/styles/base/fontawesome/_fontawesome-config.scss +++ b/src/styles/base/fontawesome/_fontawesome-config.scss @@ -20,18 +20,18 @@ */ -@import "variables"; -@import "fa-variables"; // Our own version -@import "mixins"; -@import "fa-mixins"; // Our own version +@use "variables"; +@use "fa-variables"; // Our own version +@use "mixins"; +@use "fa-mixins"; // Our own version //@import "path"; // already included -@import "core"; -@import "larger"; -@import "fixed-width"; -@import "list"; -@import "bordered-pulled"; -@import "animated"; -@import "rotated-flipped"; -@import "stacked"; -@import "icons"; -@import "screen-reader"; \ No newline at end of file +@use "core"; +@use "larger"; +@use "fixed-width"; +@use "list"; +@use "bordered-pulled"; +@use "animated"; +@use "rotated-flipped"; +@use "stacked"; +@use "icons"; +@use "screen-reader"; \ No newline at end of file diff --git a/src/styles/base/fontawesome/_icons.scss b/src/styles/base/fontawesome/_icons.scss index 2944344350..5f0ce389c2 100644 --- a/src/styles/base/fontawesome/_icons.scss +++ b/src/styles/base/fontawesome/_icons.scss @@ -1,733 +1,735 @@ +@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}-remove:before, -.#{$fa-css-prefix}-close:before, -.#{$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, -.#{$fa-css-prefix}-bar-chart:before { content: $fa-var-bar-chart; } -.#{$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-f:before, -.#{$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}-feed:before, -.#{$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, -.#{$fa-css-prefix}-gratipay:before { content: $fa-var-gratipay; } -.#{$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-pp:before { content: $fa-var-pied-piper-pp; } -.#{$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-buoy: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}-resistance: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}-y-combinator-square:before, -.#{$fa-css-prefix}-yc-square:before, -.#{$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; } -.#{$fa-css-prefix}-soccer-ball-o:before, -.#{$fa-css-prefix}-futbol-o:before { content: $fa-var-futbol-o; } -.#{$fa-css-prefix}-tty:before { content: $fa-var-tty; } -.#{$fa-css-prefix}-binoculars:before { content: $fa-var-binoculars; } -.#{$fa-css-prefix}-plug:before { content: $fa-var-plug; } -.#{$fa-css-prefix}-slideshare:before { content: $fa-var-slideshare; } -.#{$fa-css-prefix}-twitch:before { content: $fa-var-twitch; } -.#{$fa-css-prefix}-yelp:before { content: $fa-var-yelp; } -.#{$fa-css-prefix}-newspaper-o:before { content: $fa-var-newspaper-o; } -.#{$fa-css-prefix}-wifi:before { content: $fa-var-wifi; } -.#{$fa-css-prefix}-calculator:before { content: $fa-var-calculator; } -.#{$fa-css-prefix}-paypal:before { content: $fa-var-paypal; } -.#{$fa-css-prefix}-google-wallet:before { content: $fa-var-google-wallet; } -.#{$fa-css-prefix}-cc-visa:before { content: $fa-var-cc-visa; } -.#{$fa-css-prefix}-cc-mastercard:before { content: $fa-var-cc-mastercard; } -.#{$fa-css-prefix}-cc-discover:before { content: $fa-var-cc-discover; } -.#{$fa-css-prefix}-cc-amex:before { content: $fa-var-cc-amex; } -.#{$fa-css-prefix}-cc-paypal:before { content: $fa-var-cc-paypal; } -.#{$fa-css-prefix}-cc-stripe:before { content: $fa-var-cc-stripe; } -.#{$fa-css-prefix}-bell-slash:before { content: $fa-var-bell-slash; } -.#{$fa-css-prefix}-bell-slash-o:before { content: $fa-var-bell-slash-o; } -.#{$fa-css-prefix}-trash:before { content: $fa-var-trash; } -.#{$fa-css-prefix}-copyright:before { content: $fa-var-copyright; } -.#{$fa-css-prefix}-at:before { content: $fa-var-at; } -.#{$fa-css-prefix}-eyedropper:before { content: $fa-var-eyedropper; } -.#{$fa-css-prefix}-paint-brush:before { content: $fa-var-paint-brush; } -.#{$fa-css-prefix}-birthday-cake:before { content: $fa-var-birthday-cake; } -.#{$fa-css-prefix}-area-chart:before { content: $fa-var-area-chart; } -.#{$fa-css-prefix}-pie-chart:before { content: $fa-var-pie-chart; } -.#{$fa-css-prefix}-line-chart:before { content: $fa-var-line-chart; } -.#{$fa-css-prefix}-lastfm:before { content: $fa-var-lastfm; } -.#{$fa-css-prefix}-lastfm-square:before { content: $fa-var-lastfm-square; } -.#{$fa-css-prefix}-toggle-off:before { content: $fa-var-toggle-off; } -.#{$fa-css-prefix}-toggle-on:before { content: $fa-var-toggle-on; } -.#{$fa-css-prefix}-bicycle:before { content: $fa-var-bicycle; } -.#{$fa-css-prefix}-bus:before { content: $fa-var-bus; } -.#{$fa-css-prefix}-ioxhost:before { content: $fa-var-ioxhost; } -.#{$fa-css-prefix}-angellist:before { content: $fa-var-angellist; } -.#{$fa-css-prefix}-cc:before { content: $fa-var-cc; } -.#{$fa-css-prefix}-shekel:before, -.#{$fa-css-prefix}-sheqel:before, -.#{$fa-css-prefix}-ils:before { content: $fa-var-ils; } -.#{$fa-css-prefix}-meanpath:before { content: $fa-var-meanpath; } -.#{$fa-css-prefix}-buysellads:before { content: $fa-var-buysellads; } -.#{$fa-css-prefix}-connectdevelop:before { content: $fa-var-connectdevelop; } -.#{$fa-css-prefix}-dashcube:before { content: $fa-var-dashcube; } -.#{$fa-css-prefix}-forumbee:before { content: $fa-var-forumbee; } -.#{$fa-css-prefix}-leanpub:before { content: $fa-var-leanpub; } -.#{$fa-css-prefix}-sellsy:before { content: $fa-var-sellsy; } -.#{$fa-css-prefix}-shirtsinbulk:before { content: $fa-var-shirtsinbulk; } -.#{$fa-css-prefix}-simplybuilt:before { content: $fa-var-simplybuilt; } -.#{$fa-css-prefix}-skyatlas:before { content: $fa-var-skyatlas; } -.#{$fa-css-prefix}-cart-plus:before { content: $fa-var-cart-plus; } -.#{$fa-css-prefix}-cart-arrow-down:before { content: $fa-var-cart-arrow-down; } -.#{$fa-css-prefix}-diamond:before { content: $fa-var-diamond; } -.#{$fa-css-prefix}-ship:before { content: $fa-var-ship; } -.#{$fa-css-prefix}-user-secret:before { content: $fa-var-user-secret; } -.#{$fa-css-prefix}-motorcycle:before { content: $fa-var-motorcycle; } -.#{$fa-css-prefix}-street-view:before { content: $fa-var-street-view; } -.#{$fa-css-prefix}-heartbeat:before { content: $fa-var-heartbeat; } -.#{$fa-css-prefix}-venus:before { content: $fa-var-venus; } -.#{$fa-css-prefix}-mars:before { content: $fa-var-mars; } -.#{$fa-css-prefix}-mercury:before { content: $fa-var-mercury; } -.#{$fa-css-prefix}-intersex:before, -.#{$fa-css-prefix}-transgender:before { content: $fa-var-transgender; } -.#{$fa-css-prefix}-transgender-alt:before { content: $fa-var-transgender-alt; } -.#{$fa-css-prefix}-venus-double:before { content: $fa-var-venus-double; } -.#{$fa-css-prefix}-mars-double:before { content: $fa-var-mars-double; } -.#{$fa-css-prefix}-venus-mars:before { content: $fa-var-venus-mars; } -.#{$fa-css-prefix}-mars-stroke:before { content: $fa-var-mars-stroke; } -.#{$fa-css-prefix}-mars-stroke-v:before { content: $fa-var-mars-stroke-v; } -.#{$fa-css-prefix}-mars-stroke-h:before { content: $fa-var-mars-stroke-h; } -.#{$fa-css-prefix}-neuter:before { content: $fa-var-neuter; } -.#{$fa-css-prefix}-genderless:before { content: $fa-var-genderless; } -.#{$fa-css-prefix}-facebook-official:before { content: $fa-var-facebook-official; } -.#{$fa-css-prefix}-pinterest-p:before { content: $fa-var-pinterest-p; } -.#{$fa-css-prefix}-whatsapp:before { content: $fa-var-whatsapp; } -.#{$fa-css-prefix}-server:before { content: $fa-var-server; } -.#{$fa-css-prefix}-user-plus:before { content: $fa-var-user-plus; } -.#{$fa-css-prefix}-user-times:before { content: $fa-var-user-times; } -.#{$fa-css-prefix}-hotel:before, -.#{$fa-css-prefix}-bed:before { content: $fa-var-bed; } -.#{$fa-css-prefix}-viacoin:before { content: $fa-var-viacoin; } -.#{$fa-css-prefix}-train:before { content: $fa-var-train; } -.#{$fa-css-prefix}-subway:before { content: $fa-var-subway; } -.#{$fa-css-prefix}-medium:before { content: $fa-var-medium; } -.#{$fa-css-prefix}-yc:before, -.#{$fa-css-prefix}-y-combinator:before { content: $fa-var-y-combinator; } -.#{$fa-css-prefix}-optin-monster:before { content: $fa-var-optin-monster; } -.#{$fa-css-prefix}-opencart:before { content: $fa-var-opencart; } -.#{$fa-css-prefix}-expeditedssl:before { content: $fa-var-expeditedssl; } -.#{$fa-css-prefix}-battery-4:before, -.#{$fa-css-prefix}-battery-full:before { content: $fa-var-battery-full; } -.#{$fa-css-prefix}-battery-3:before, -.#{$fa-css-prefix}-battery-three-quarters:before { content: $fa-var-battery-three-quarters; } -.#{$fa-css-prefix}-battery-2:before, -.#{$fa-css-prefix}-battery-half:before { content: $fa-var-battery-half; } -.#{$fa-css-prefix}-battery-1:before, -.#{$fa-css-prefix}-battery-quarter:before { content: $fa-var-battery-quarter; } -.#{$fa-css-prefix}-battery-0:before, -.#{$fa-css-prefix}-battery-empty:before { content: $fa-var-battery-empty; } -.#{$fa-css-prefix}-mouse-pointer:before { content: $fa-var-mouse-pointer; } -.#{$fa-css-prefix}-i-cursor:before { content: $fa-var-i-cursor; } -.#{$fa-css-prefix}-object-group:before { content: $fa-var-object-group; } -.#{$fa-css-prefix}-object-ungroup:before { content: $fa-var-object-ungroup; } -.#{$fa-css-prefix}-sticky-note:before { content: $fa-var-sticky-note; } -.#{$fa-css-prefix}-sticky-note-o:before { content: $fa-var-sticky-note-o; } -.#{$fa-css-prefix}-cc-jcb:before { content: $fa-var-cc-jcb; } -.#{$fa-css-prefix}-cc-diners-club:before { content: $fa-var-cc-diners-club; } -.#{$fa-css-prefix}-clone:before { content: $fa-var-clone; } -.#{$fa-css-prefix}-balance-scale:before { content: $fa-var-balance-scale; } -.#{$fa-css-prefix}-hourglass-o:before { content: $fa-var-hourglass-o; } -.#{$fa-css-prefix}-hourglass-1:before, -.#{$fa-css-prefix}-hourglass-start:before { content: $fa-var-hourglass-start; } -.#{$fa-css-prefix}-hourglass-2:before, -.#{$fa-css-prefix}-hourglass-half:before { content: $fa-var-hourglass-half; } -.#{$fa-css-prefix}-hourglass-3:before, -.#{$fa-css-prefix}-hourglass-end:before { content: $fa-var-hourglass-end; } -.#{$fa-css-prefix}-hourglass:before { content: $fa-var-hourglass; } -.#{$fa-css-prefix}-hand-grab-o:before, -.#{$fa-css-prefix}-hand-rock-o:before { content: $fa-var-hand-rock-o; } -.#{$fa-css-prefix}-hand-stop-o:before, -.#{$fa-css-prefix}-hand-paper-o:before { content: $fa-var-hand-paper-o; } -.#{$fa-css-prefix}-hand-scissors-o:before { content: $fa-var-hand-scissors-o; } -.#{$fa-css-prefix}-hand-lizard-o:before { content: $fa-var-hand-lizard-o; } -.#{$fa-css-prefix}-hand-spock-o:before { content: $fa-var-hand-spock-o; } -.#{$fa-css-prefix}-hand-pointer-o:before { content: $fa-var-hand-pointer-o; } -.#{$fa-css-prefix}-hand-peace-o:before { content: $fa-var-hand-peace-o; } -.#{$fa-css-prefix}-trademark:before { content: $fa-var-trademark; } -.#{$fa-css-prefix}-registered:before { content: $fa-var-registered; } -.#{$fa-css-prefix}-creative-commons:before { content: $fa-var-creative-commons; } -.#{$fa-css-prefix}-gg:before { content: $fa-var-gg; } -.#{$fa-css-prefix}-gg-circle:before { content: $fa-var-gg-circle; } -.#{$fa-css-prefix}-tripadvisor:before { content: $fa-var-tripadvisor; } -.#{$fa-css-prefix}-odnoklassniki:before { content: $fa-var-odnoklassniki; } -.#{$fa-css-prefix}-odnoklassniki-square:before { content: $fa-var-odnoklassniki-square; } -.#{$fa-css-prefix}-get-pocket:before { content: $fa-var-get-pocket; } -.#{$fa-css-prefix}-wikipedia-w:before { content: $fa-var-wikipedia-w; } -.#{$fa-css-prefix}-safari:before { content: $fa-var-safari; } -.#{$fa-css-prefix}-chrome:before { content: $fa-var-chrome; } -.#{$fa-css-prefix}-firefox:before { content: $fa-var-firefox; } -.#{$fa-css-prefix}-opera:before { content: $fa-var-opera; } -.#{$fa-css-prefix}-internet-explorer:before { content: $fa-var-internet-explorer; } -.#{$fa-css-prefix}-tv:before, -.#{$fa-css-prefix}-television:before { content: $fa-var-television; } -.#{$fa-css-prefix}-contao:before { content: $fa-var-contao; } -.#{$fa-css-prefix}-500px:before { content: $fa-var-500px; } -.#{$fa-css-prefix}-amazon:before { content: $fa-var-amazon; } -.#{$fa-css-prefix}-calendar-plus-o:before { content: $fa-var-calendar-plus-o; } -.#{$fa-css-prefix}-calendar-minus-o:before { content: $fa-var-calendar-minus-o; } -.#{$fa-css-prefix}-calendar-times-o:before { content: $fa-var-calendar-times-o; } -.#{$fa-css-prefix}-calendar-check-o:before { content: $fa-var-calendar-check-o; } -.#{$fa-css-prefix}-industry:before { content: $fa-var-industry; } -.#{$fa-css-prefix}-map-pin:before { content: $fa-var-map-pin; } -.#{$fa-css-prefix}-map-signs:before { content: $fa-var-map-signs; } -.#{$fa-css-prefix}-map-o:before { content: $fa-var-map-o; } -.#{$fa-css-prefix}-map:before { content: $fa-var-map; } -.#{$fa-css-prefix}-commenting:before { content: $fa-var-commenting; } -.#{$fa-css-prefix}-commenting-o:before { content: $fa-var-commenting-o; } -.#{$fa-css-prefix}-houzz:before { content: $fa-var-houzz; } -.#{$fa-css-prefix}-vimeo:before { content: $fa-var-vimeo; } -.#{$fa-css-prefix}-black-tie:before { content: $fa-var-black-tie; } -.#{$fa-css-prefix}-fonticons:before { content: $fa-var-fonticons; } -.#{$fa-css-prefix}-reddit-alien:before { content: $fa-var-reddit-alien; } -.#{$fa-css-prefix}-edge:before { content: $fa-var-edge; } -.#{$fa-css-prefix}-credit-card-alt:before { content: $fa-var-credit-card-alt; } -.#{$fa-css-prefix}-codiepie:before { content: $fa-var-codiepie; } -.#{$fa-css-prefix}-modx:before { content: $fa-var-modx; } -.#{$fa-css-prefix}-fort-awesome:before { content: $fa-var-fort-awesome; } -.#{$fa-css-prefix}-usb:before { content: $fa-var-usb; } -.#{$fa-css-prefix}-product-hunt:before { content: $fa-var-product-hunt; } -.#{$fa-css-prefix}-mixcloud:before { content: $fa-var-mixcloud; } -.#{$fa-css-prefix}-scribd:before { content: $fa-var-scribd; } -.#{$fa-css-prefix}-pause-circle:before { content: $fa-var-pause-circle; } -.#{$fa-css-prefix}-pause-circle-o:before { content: $fa-var-pause-circle-o; } -.#{$fa-css-prefix}-stop-circle:before { content: $fa-var-stop-circle; } -.#{$fa-css-prefix}-stop-circle-o:before { content: $fa-var-stop-circle-o; } -.#{$fa-css-prefix}-shopping-bag:before { content: $fa-var-shopping-bag; } -.#{$fa-css-prefix}-shopping-basket:before { content: $fa-var-shopping-basket; } -.#{$fa-css-prefix}-hashtag:before { content: $fa-var-hashtag; } -.#{$fa-css-prefix}-bluetooth:before { content: $fa-var-bluetooth; } -.#{$fa-css-prefix}-bluetooth-b:before { content: $fa-var-bluetooth-b; } -.#{$fa-css-prefix}-percent:before { content: $fa-var-percent; } -.#{$fa-css-prefix}-gitlab:before { content: $fa-var-gitlab; } -.#{$fa-css-prefix}-wpbeginner:before { content: $fa-var-wpbeginner; } -.#{$fa-css-prefix}-wpforms:before { content: $fa-var-wpforms; } -.#{$fa-css-prefix}-envira:before { content: $fa-var-envira; } -.#{$fa-css-prefix}-universal-access:before { content: $fa-var-universal-access; } -.#{$fa-css-prefix}-wheelchair-alt:before { content: $fa-var-wheelchair-alt; } -.#{$fa-css-prefix}-question-circle-o:before { content: $fa-var-question-circle-o; } -.#{$fa-css-prefix}-blind:before { content: $fa-var-blind; } -.#{$fa-css-prefix}-audio-description:before { content: $fa-var-audio-description; } -.#{$fa-css-prefix}-volume-control-phone:before { content: $fa-var-volume-control-phone; } -.#{$fa-css-prefix}-braille:before { content: $fa-var-braille; } -.#{$fa-css-prefix}-assistive-listening-systems:before { content: $fa-var-assistive-listening-systems; } -.#{$fa-css-prefix}-asl-interpreting:before, -.#{$fa-css-prefix}-american-sign-language-interpreting:before { content: $fa-var-american-sign-language-interpreting; } -.#{$fa-css-prefix}-deafness:before, -.#{$fa-css-prefix}-hard-of-hearing:before, -.#{$fa-css-prefix}-deaf:before { content: $fa-var-deaf; } -.#{$fa-css-prefix}-glide:before { content: $fa-var-glide; } -.#{$fa-css-prefix}-glide-g:before { content: $fa-var-glide-g; } -.#{$fa-css-prefix}-signing:before, -.#{$fa-css-prefix}-sign-language:before { content: $fa-var-sign-language; } -.#{$fa-css-prefix}-low-vision:before { content: $fa-var-low-vision; } -.#{$fa-css-prefix}-viadeo:before { content: $fa-var-viadeo; } -.#{$fa-css-prefix}-viadeo-square:before { content: $fa-var-viadeo-square; } -.#{$fa-css-prefix}-snapchat:before { content: $fa-var-snapchat; } -.#{$fa-css-prefix}-snapchat-ghost:before { content: $fa-var-snapchat-ghost; } -.#{$fa-css-prefix}-snapchat-square:before { content: $fa-var-snapchat-square; } -.#{$fa-css-prefix}-pied-piper:before { content: $fa-var-pied-piper; } -.#{$fa-css-prefix}-first-order:before { content: $fa-var-first-order; } -.#{$fa-css-prefix}-yoast:before { content: $fa-var-yoast; } -.#{$fa-css-prefix}-themeisle:before { content: $fa-var-themeisle; } -.#{$fa-css-prefix}-google-plus-circle:before, -.#{$fa-css-prefix}-google-plus-official:before { content: $fa-var-google-plus-official; } -.#{$fa-css-prefix}-fa:before, -.#{$fa-css-prefix}-font-awesome:before { content: $fa-var-font-awesome; } +.#{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}-remove:before, +.#{variables.$fa-css-prefix}-close:before, +.#{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, +.#{variables.$fa-css-prefix}-bar-chart:before { content: variables.$fa-var-bar-chart; } +.#{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-f:before, +.#{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}-feed:before, +.#{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, +.#{variables.$fa-css-prefix}-gratipay:before { content: variables.$fa-var-gratipay; } +.#{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-pp:before { content: variables.$fa-var-pied-piper-pp; } +.#{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-buoy: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}-resistance: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}-y-combinator-square:before, +.#{variables.$fa-css-prefix}-yc-square:before, +.#{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; } +.#{variables.$fa-css-prefix}-soccer-ball-o:before, +.#{variables.$fa-css-prefix}-futbol-o:before { content: variables.$fa-var-futbol-o; } +.#{variables.$fa-css-prefix}-tty:before { content: variables.$fa-var-tty; } +.#{variables.$fa-css-prefix}-binoculars:before { content: variables.$fa-var-binoculars; } +.#{variables.$fa-css-prefix}-plug:before { content: variables.$fa-var-plug; } +.#{variables.$fa-css-prefix}-slideshare:before { content: variables.$fa-var-slideshare; } +.#{variables.$fa-css-prefix}-twitch:before { content: variables.$fa-var-twitch; } +.#{variables.$fa-css-prefix}-yelp:before { content: variables.$fa-var-yelp; } +.#{variables.$fa-css-prefix}-newspaper-o:before { content: variables.$fa-var-newspaper-o; } +.#{variables.$fa-css-prefix}-wifi:before { content: variables.$fa-var-wifi; } +.#{variables.$fa-css-prefix}-calculator:before { content: variables.$fa-var-calculator; } +.#{variables.$fa-css-prefix}-paypal:before { content: variables.$fa-var-paypal; } +.#{variables.$fa-css-prefix}-google-wallet:before { content: variables.$fa-var-google-wallet; } +.#{variables.$fa-css-prefix}-cc-visa:before { content: variables.$fa-var-cc-visa; } +.#{variables.$fa-css-prefix}-cc-mastercard:before { content: variables.$fa-var-cc-mastercard; } +.#{variables.$fa-css-prefix}-cc-discover:before { content: variables.$fa-var-cc-discover; } +.#{variables.$fa-css-prefix}-cc-amex:before { content: variables.$fa-var-cc-amex; } +.#{variables.$fa-css-prefix}-cc-paypal:before { content: variables.$fa-var-cc-paypal; } +.#{variables.$fa-css-prefix}-cc-stripe:before { content: variables.$fa-var-cc-stripe; } +.#{variables.$fa-css-prefix}-bell-slash:before { content: variables.$fa-var-bell-slash; } +.#{variables.$fa-css-prefix}-bell-slash-o:before { content: variables.$fa-var-bell-slash-o; } +.#{variables.$fa-css-prefix}-trash:before { content: variables.$fa-var-trash; } +.#{variables.$fa-css-prefix}-copyright:before { content: variables.$fa-var-copyright; } +.#{variables.$fa-css-prefix}-at:before { content: variables.$fa-var-at; } +.#{variables.$fa-css-prefix}-eyedropper:before { content: variables.$fa-var-eyedropper; } +.#{variables.$fa-css-prefix}-paint-brush:before { content: variables.$fa-var-paint-brush; } +.#{variables.$fa-css-prefix}-birthday-cake:before { content: variables.$fa-var-birthday-cake; } +.#{variables.$fa-css-prefix}-area-chart:before { content: variables.$fa-var-area-chart; } +.#{variables.$fa-css-prefix}-pie-chart:before { content: variables.$fa-var-pie-chart; } +.#{variables.$fa-css-prefix}-line-chart:before { content: variables.$fa-var-line-chart; } +.#{variables.$fa-css-prefix}-lastfm:before { content: variables.$fa-var-lastfm; } +.#{variables.$fa-css-prefix}-lastfm-square:before { content: variables.$fa-var-lastfm-square; } +.#{variables.$fa-css-prefix}-toggle-off:before { content: variables.$fa-var-toggle-off; } +.#{variables.$fa-css-prefix}-toggle-on:before { content: variables.$fa-var-toggle-on; } +.#{variables.$fa-css-prefix}-bicycle:before { content: variables.$fa-var-bicycle; } +.#{variables.$fa-css-prefix}-bus:before { content: variables.$fa-var-bus; } +.#{variables.$fa-css-prefix}-ioxhost:before { content: variables.$fa-var-ioxhost; } +.#{variables.$fa-css-prefix}-angellist:before { content: variables.$fa-var-angellist; } +.#{variables.$fa-css-prefix}-cc:before { content: variables.$fa-var-cc; } +.#{variables.$fa-css-prefix}-shekel:before, +.#{variables.$fa-css-prefix}-sheqel:before, +.#{variables.$fa-css-prefix}-ils:before { content: variables.$fa-var-ils; } +.#{variables.$fa-css-prefix}-meanpath:before { content: variables.$fa-var-meanpath; } +.#{variables.$fa-css-prefix}-buysellads:before { content: variables.$fa-var-buysellads; } +.#{variables.$fa-css-prefix}-connectdevelop:before { content: variables.$fa-var-connectdevelop; } +.#{variables.$fa-css-prefix}-dashcube:before { content: variables.$fa-var-dashcube; } +.#{variables.$fa-css-prefix}-forumbee:before { content: variables.$fa-var-forumbee; } +.#{variables.$fa-css-prefix}-leanpub:before { content: variables.$fa-var-leanpub; } +.#{variables.$fa-css-prefix}-sellsy:before { content: variables.$fa-var-sellsy; } +.#{variables.$fa-css-prefix}-shirtsinbulk:before { content: variables.$fa-var-shirtsinbulk; } +.#{variables.$fa-css-prefix}-simplybuilt:before { content: variables.$fa-var-simplybuilt; } +.#{variables.$fa-css-prefix}-skyatlas:before { content: variables.$fa-var-skyatlas; } +.#{variables.$fa-css-prefix}-cart-plus:before { content: variables.$fa-var-cart-plus; } +.#{variables.$fa-css-prefix}-cart-arrow-down:before { content: variables.$fa-var-cart-arrow-down; } +.#{variables.$fa-css-prefix}-diamond:before { content: variables.$fa-var-diamond; } +.#{variables.$fa-css-prefix}-ship:before { content: variables.$fa-var-ship; } +.#{variables.$fa-css-prefix}-user-secret:before { content: variables.$fa-var-user-secret; } +.#{variables.$fa-css-prefix}-motorcycle:before { content: variables.$fa-var-motorcycle; } +.#{variables.$fa-css-prefix}-street-view:before { content: variables.$fa-var-street-view; } +.#{variables.$fa-css-prefix}-heartbeat:before { content: variables.$fa-var-heartbeat; } +.#{variables.$fa-css-prefix}-venus:before { content: variables.$fa-var-venus; } +.#{variables.$fa-css-prefix}-mars:before { content: variables.$fa-var-mars; } +.#{variables.$fa-css-prefix}-mercury:before { content: variables.$fa-var-mercury; } +.#{variables.$fa-css-prefix}-intersex:before, +.#{variables.$fa-css-prefix}-transgender:before { content: variables.$fa-var-transgender; } +.#{variables.$fa-css-prefix}-transgender-alt:before { content: variables.$fa-var-transgender-alt; } +.#{variables.$fa-css-prefix}-venus-double:before { content: variables.$fa-var-venus-double; } +.#{variables.$fa-css-prefix}-mars-double:before { content: variables.$fa-var-mars-double; } +.#{variables.$fa-css-prefix}-venus-mars:before { content: variables.$fa-var-venus-mars; } +.#{variables.$fa-css-prefix}-mars-stroke:before { content: variables.$fa-var-mars-stroke; } +.#{variables.$fa-css-prefix}-mars-stroke-v:before { content: variables.$fa-var-mars-stroke-v; } +.#{variables.$fa-css-prefix}-mars-stroke-h:before { content: variables.$fa-var-mars-stroke-h; } +.#{variables.$fa-css-prefix}-neuter:before { content: variables.$fa-var-neuter; } +.#{variables.$fa-css-prefix}-genderless:before { content: variables.$fa-var-genderless; } +.#{variables.$fa-css-prefix}-facebook-official:before { content: variables.$fa-var-facebook-official; } +.#{variables.$fa-css-prefix}-pinterest-p:before { content: variables.$fa-var-pinterest-p; } +.#{variables.$fa-css-prefix}-whatsapp:before { content: variables.$fa-var-whatsapp; } +.#{variables.$fa-css-prefix}-server:before { content: variables.$fa-var-server; } +.#{variables.$fa-css-prefix}-user-plus:before { content: variables.$fa-var-user-plus; } +.#{variables.$fa-css-prefix}-user-times:before { content: variables.$fa-var-user-times; } +.#{variables.$fa-css-prefix}-hotel:before, +.#{variables.$fa-css-prefix}-bed:before { content: variables.$fa-var-bed; } +.#{variables.$fa-css-prefix}-viacoin:before { content: variables.$fa-var-viacoin; } +.#{variables.$fa-css-prefix}-train:before { content: variables.$fa-var-train; } +.#{variables.$fa-css-prefix}-subway:before { content: variables.$fa-var-subway; } +.#{variables.$fa-css-prefix}-medium:before { content: variables.$fa-var-medium; } +.#{variables.$fa-css-prefix}-yc:before, +.#{variables.$fa-css-prefix}-y-combinator:before { content: variables.$fa-var-y-combinator; } +.#{variables.$fa-css-prefix}-optin-monster:before { content: variables.$fa-var-optin-monster; } +.#{variables.$fa-css-prefix}-opencart:before { content: variables.$fa-var-opencart; } +.#{variables.$fa-css-prefix}-expeditedssl:before { content: variables.$fa-var-expeditedssl; } +.#{variables.$fa-css-prefix}-battery-4:before, +.#{variables.$fa-css-prefix}-battery-full:before { content: variables.$fa-var-battery-full; } +.#{variables.$fa-css-prefix}-battery-3:before, +.#{variables.$fa-css-prefix}-battery-three-quarters:before { content: variables.$fa-var-battery-three-quarters; } +.#{variables.$fa-css-prefix}-battery-2:before, +.#{variables.$fa-css-prefix}-battery-half:before { content: variables.$fa-var-battery-half; } +.#{variables.$fa-css-prefix}-battery-1:before, +.#{variables.$fa-css-prefix}-battery-quarter:before { content: variables.$fa-var-battery-quarter; } +.#{variables.$fa-css-prefix}-battery-0:before, +.#{variables.$fa-css-prefix}-battery-empty:before { content: variables.$fa-var-battery-empty; } +.#{variables.$fa-css-prefix}-mouse-pointer:before { content: variables.$fa-var-mouse-pointer; } +.#{variables.$fa-css-prefix}-i-cursor:before { content: variables.$fa-var-i-cursor; } +.#{variables.$fa-css-prefix}-object-group:before { content: variables.$fa-var-object-group; } +.#{variables.$fa-css-prefix}-object-ungroup:before { content: variables.$fa-var-object-ungroup; } +.#{variables.$fa-css-prefix}-sticky-note:before { content: variables.$fa-var-sticky-note; } +.#{variables.$fa-css-prefix}-sticky-note-o:before { content: variables.$fa-var-sticky-note-o; } +.#{variables.$fa-css-prefix}-cc-jcb:before { content: variables.$fa-var-cc-jcb; } +.#{variables.$fa-css-prefix}-cc-diners-club:before { content: variables.$fa-var-cc-diners-club; } +.#{variables.$fa-css-prefix}-clone:before { content: variables.$fa-var-clone; } +.#{variables.$fa-css-prefix}-balance-scale:before { content: variables.$fa-var-balance-scale; } +.#{variables.$fa-css-prefix}-hourglass-o:before { content: variables.$fa-var-hourglass-o; } +.#{variables.$fa-css-prefix}-hourglass-1:before, +.#{variables.$fa-css-prefix}-hourglass-start:before { content: variables.$fa-var-hourglass-start; } +.#{variables.$fa-css-prefix}-hourglass-2:before, +.#{variables.$fa-css-prefix}-hourglass-half:before { content: variables.$fa-var-hourglass-half; } +.#{variables.$fa-css-prefix}-hourglass-3:before, +.#{variables.$fa-css-prefix}-hourglass-end:before { content: variables.$fa-var-hourglass-end; } +.#{variables.$fa-css-prefix}-hourglass:before { content: variables.$fa-var-hourglass; } +.#{variables.$fa-css-prefix}-hand-grab-o:before, +.#{variables.$fa-css-prefix}-hand-rock-o:before { content: variables.$fa-var-hand-rock-o; } +.#{variables.$fa-css-prefix}-hand-stop-o:before, +.#{variables.$fa-css-prefix}-hand-paper-o:before { content: variables.$fa-var-hand-paper-o; } +.#{variables.$fa-css-prefix}-hand-scissors-o:before { content: variables.$fa-var-hand-scissors-o; } +.#{variables.$fa-css-prefix}-hand-lizard-o:before { content: variables.$fa-var-hand-lizard-o; } +.#{variables.$fa-css-prefix}-hand-spock-o:before { content: variables.$fa-var-hand-spock-o; } +.#{variables.$fa-css-prefix}-hand-pointer-o:before { content: variables.$fa-var-hand-pointer-o; } +.#{variables.$fa-css-prefix}-hand-peace-o:before { content: variables.$fa-var-hand-peace-o; } +.#{variables.$fa-css-prefix}-trademark:before { content: variables.$fa-var-trademark; } +.#{variables.$fa-css-prefix}-registered:before { content: variables.$fa-var-registered; } +.#{variables.$fa-css-prefix}-creative-commons:before { content: variables.$fa-var-creative-commons; } +.#{variables.$fa-css-prefix}-gg:before { content: variables.$fa-var-gg; } +.#{variables.$fa-css-prefix}-gg-circle:before { content: variables.$fa-var-gg-circle; } +.#{variables.$fa-css-prefix}-tripadvisor:before { content: variables.$fa-var-tripadvisor; } +.#{variables.$fa-css-prefix}-odnoklassniki:before { content: variables.$fa-var-odnoklassniki; } +.#{variables.$fa-css-prefix}-odnoklassniki-square:before { content: variables.$fa-var-odnoklassniki-square; } +.#{variables.$fa-css-prefix}-get-pocket:before { content: variables.$fa-var-get-pocket; } +.#{variables.$fa-css-prefix}-wikipedia-w:before { content: variables.$fa-var-wikipedia-w; } +.#{variables.$fa-css-prefix}-safari:before { content: variables.$fa-var-safari; } +.#{variables.$fa-css-prefix}-chrome:before { content: variables.$fa-var-chrome; } +.#{variables.$fa-css-prefix}-firefox:before { content: variables.$fa-var-firefox; } +.#{variables.$fa-css-prefix}-opera:before { content: variables.$fa-var-opera; } +.#{variables.$fa-css-prefix}-internet-explorer:before { content: variables.$fa-var-internet-explorer; } +.#{variables.$fa-css-prefix}-tv:before, +.#{variables.$fa-css-prefix}-television:before { content: variables.$fa-var-television; } +.#{variables.$fa-css-prefix}-contao:before { content: variables.$fa-var-contao; } +.#{variables.$fa-css-prefix}-500px:before { content: variables.$fa-var-500px; } +.#{variables.$fa-css-prefix}-amazon:before { content: variables.$fa-var-amazon; } +.#{variables.$fa-css-prefix}-calendar-plus-o:before { content: variables.$fa-var-calendar-plus-o; } +.#{variables.$fa-css-prefix}-calendar-minus-o:before { content: variables.$fa-var-calendar-minus-o; } +.#{variables.$fa-css-prefix}-calendar-times-o:before { content: variables.$fa-var-calendar-times-o; } +.#{variables.$fa-css-prefix}-calendar-check-o:before { content: variables.$fa-var-calendar-check-o; } +.#{variables.$fa-css-prefix}-industry:before { content: variables.$fa-var-industry; } +.#{variables.$fa-css-prefix}-map-pin:before { content: variables.$fa-var-map-pin; } +.#{variables.$fa-css-prefix}-map-signs:before { content: variables.$fa-var-map-signs; } +.#{variables.$fa-css-prefix}-map-o:before { content: variables.$fa-var-map-o; } +.#{variables.$fa-css-prefix}-map:before { content: variables.$fa-var-map; } +.#{variables.$fa-css-prefix}-commenting:before { content: variables.$fa-var-commenting; } +.#{variables.$fa-css-prefix}-commenting-o:before { content: variables.$fa-var-commenting-o; } +.#{variables.$fa-css-prefix}-houzz:before { content: variables.$fa-var-houzz; } +.#{variables.$fa-css-prefix}-vimeo:before { content: variables.$fa-var-vimeo; } +.#{variables.$fa-css-prefix}-black-tie:before { content: variables.$fa-var-black-tie; } +.#{variables.$fa-css-prefix}-fonticons:before { content: variables.$fa-var-fonticons; } +.#{variables.$fa-css-prefix}-reddit-alien:before { content: variables.$fa-var-reddit-alien; } +.#{variables.$fa-css-prefix}-edge:before { content: variables.$fa-var-edge; } +.#{variables.$fa-css-prefix}-credit-card-alt:before { content: variables.$fa-var-credit-card-alt; } +.#{variables.$fa-css-prefix}-codiepie:before { content: variables.$fa-var-codiepie; } +.#{variables.$fa-css-prefix}-modx:before { content: variables.$fa-var-modx; } +.#{variables.$fa-css-prefix}-fort-awesome:before { content: variables.$fa-var-fort-awesome; } +.#{variables.$fa-css-prefix}-usb:before { content: variables.$fa-var-usb; } +.#{variables.$fa-css-prefix}-product-hunt:before { content: variables.$fa-var-product-hunt; } +.#{variables.$fa-css-prefix}-mixcloud:before { content: variables.$fa-var-mixcloud; } +.#{variables.$fa-css-prefix}-scribd:before { content: variables.$fa-var-scribd; } +.#{variables.$fa-css-prefix}-pause-circle:before { content: variables.$fa-var-pause-circle; } +.#{variables.$fa-css-prefix}-pause-circle-o:before { content: variables.$fa-var-pause-circle-o; } +.#{variables.$fa-css-prefix}-stop-circle:before { content: variables.$fa-var-stop-circle; } +.#{variables.$fa-css-prefix}-stop-circle-o:before { content: variables.$fa-var-stop-circle-o; } +.#{variables.$fa-css-prefix}-shopping-bag:before { content: variables.$fa-var-shopping-bag; } +.#{variables.$fa-css-prefix}-shopping-basket:before { content: variables.$fa-var-shopping-basket; } +.#{variables.$fa-css-prefix}-hashtag:before { content: variables.$fa-var-hashtag; } +.#{variables.$fa-css-prefix}-bluetooth:before { content: variables.$fa-var-bluetooth; } +.#{variables.$fa-css-prefix}-bluetooth-b:before { content: variables.$fa-var-bluetooth-b; } +.#{variables.$fa-css-prefix}-percent:before { content: variables.$fa-var-percent; } +.#{variables.$fa-css-prefix}-gitlab:before { content: variables.$fa-var-gitlab; } +.#{variables.$fa-css-prefix}-wpbeginner:before { content: variables.$fa-var-wpbeginner; } +.#{variables.$fa-css-prefix}-wpforms:before { content: variables.$fa-var-wpforms; } +.#{variables.$fa-css-prefix}-envira:before { content: variables.$fa-var-envira; } +.#{variables.$fa-css-prefix}-universal-access:before { content: variables.$fa-var-universal-access; } +.#{variables.$fa-css-prefix}-wheelchair-alt:before { content: variables.$fa-var-wheelchair-alt; } +.#{variables.$fa-css-prefix}-question-circle-o:before { content: variables.$fa-var-question-circle-o; } +.#{variables.$fa-css-prefix}-blind:before { content: variables.$fa-var-blind; } +.#{variables.$fa-css-prefix}-audio-description:before { content: variables.$fa-var-audio-description; } +.#{variables.$fa-css-prefix}-volume-control-phone:before { content: variables.$fa-var-volume-control-phone; } +.#{variables.$fa-css-prefix}-braille:before { content: variables.$fa-var-braille; } +.#{variables.$fa-css-prefix}-assistive-listening-systems:before { content: variables.$fa-var-assistive-listening-systems; } +.#{variables.$fa-css-prefix}-asl-interpreting:before, +.#{variables.$fa-css-prefix}-american-sign-language-interpreting:before { content: variables.$fa-var-american-sign-language-interpreting; } +.#{variables.$fa-css-prefix}-deafness:before, +.#{variables.$fa-css-prefix}-hard-of-hearing:before, +.#{variables.$fa-css-prefix}-deaf:before { content: variables.$fa-var-deaf; } +.#{variables.$fa-css-prefix}-glide:before { content: variables.$fa-var-glide; } +.#{variables.$fa-css-prefix}-glide-g:before { content: variables.$fa-var-glide-g; } +.#{variables.$fa-css-prefix}-signing:before, +.#{variables.$fa-css-prefix}-sign-language:before { content: variables.$fa-var-sign-language; } +.#{variables.$fa-css-prefix}-low-vision:before { content: variables.$fa-var-low-vision; } +.#{variables.$fa-css-prefix}-viadeo:before { content: variables.$fa-var-viadeo; } +.#{variables.$fa-css-prefix}-viadeo-square:before { content: variables.$fa-var-viadeo-square; } +.#{variables.$fa-css-prefix}-snapchat:before { content: variables.$fa-var-snapchat; } +.#{variables.$fa-css-prefix}-snapchat-ghost:before { content: variables.$fa-var-snapchat-ghost; } +.#{variables.$fa-css-prefix}-snapchat-square:before { content: variables.$fa-var-snapchat-square; } +.#{variables.$fa-css-prefix}-pied-piper:before { content: variables.$fa-var-pied-piper; } +.#{variables.$fa-css-prefix}-first-order:before { content: variables.$fa-var-first-order; } +.#{variables.$fa-css-prefix}-yoast:before { content: variables.$fa-var-yoast; } +.#{variables.$fa-css-prefix}-themeisle:before { content: variables.$fa-var-themeisle; } +.#{variables.$fa-css-prefix}-google-plus-circle:before, +.#{variables.$fa-css-prefix}-google-plus-official:before { content: variables.$fa-var-google-plus-official; } +.#{variables.$fa-css-prefix}-fa:before, +.#{variables.$fa-css-prefix}-font-awesome:before { content: variables.$fa-var-font-awesome; } diff --git a/src/styles/base/fontawesome/_larger.scss b/src/styles/base/fontawesome/_larger.scss index 3d0601e37c..2c8eff991e 100644 --- a/src/styles/base/fontawesome/_larger.scss +++ b/src/styles/base/fontawesome/_larger.scss @@ -1,3 +1,5 @@ +@use "variables"; + @use "sass:math"; // Icon Sizes @@ -5,12 +7,12 @@ /* makes the font 33% larger relative to the icon container */ -.#{$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/src/styles/base/fontawesome/_list.scss b/src/styles/base/fontawesome/_list.scss index 887901c1ee..81f33a4148 100644 --- a/src/styles/base/fontawesome/_list.scss +++ b/src/styles/base/fontawesome/_list.scss @@ -1,21 +1,23 @@ +@use "variables"; + @use "sass:math"; // List Icons // ------------------------- -.#{$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; } } -.#{$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/src/styles/base/fontawesome/_mixins.scss b/src/styles/base/fontawesome/_mixins.scss index 0c1aa771ec..ea7494788c 100644 --- a/src/styles/base/fontawesome/_mixins.scss +++ b/src/styles/base/fontawesome/_mixins.scss @@ -1,3 +1,5 @@ +@use "variables"; + @use "sass:list"; // Mixins @@ -5,7 +7,7 @@ @mixin fa-icon() { display: inline-block; - font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration + font: normal normal normal list.slash(variables.$fa-font-size-base, variables.$fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_rotated-flipped.scss b/src/styles/base/fontawesome/_rotated-flipped.scss index a3558fd09c..abb70b7995 100644 --- a/src/styles/base/fontawesome/_rotated-flipped.scss +++ b/src/styles/base/fontawesome/_rotated-flipped.scss @@ -1,20 +1,23 @@ +@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); } // Hook for IE8-9 // ------------------------- -:root .#{$fa-css-prefix}-rotate-90, -:root .#{$fa-css-prefix}-rotate-180, -:root .#{$fa-css-prefix}-rotate-270, -:root .#{$fa-css-prefix}-flip-horizontal, -:root .#{$fa-css-prefix}-flip-vertical { +:root .#{variables.$fa-css-prefix}-rotate-90, +:root .#{variables.$fa-css-prefix}-rotate-180, +:root .#{variables.$fa-css-prefix}-rotate-270, +:root .#{variables.$fa-css-prefix}-flip-horizontal, +:root .#{variables.$fa-css-prefix}-flip-vertical { filter: none; } diff --git a/src/styles/base/fontawesome/_screen-reader.scss b/src/styles/base/fontawesome/_screen-reader.scss index 637426f0da..dd98e10116 100644 --- a/src/styles/base/fontawesome/_screen-reader.scss +++ b/src/styles/base/fontawesome/_screen-reader.scss @@ -1,5 +1,7 @@ +@use "mixins"; + // Screen Readers // ------------------------- -.sr-only { @include sr-only(); } -.sr-only-focusable { @include sr-only-focusable(); } +.sr-only { @include mixins.sr-only(); } +.sr-only-focusable { @include mixins.sr-only-focusable(); } diff --git a/src/styles/base/fontawesome/_stacked.scss b/src/styles/base/fontawesome/_stacked.scss index aef7403660..9fe0d510ee 100644 --- a/src/styles/base/fontawesome/_stacked.scss +++ b/src/styles/base/fontawesome/_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/src/styles/components/_about.scss b/src/styles/components/_about.scss index a9fa70a6aa..641585fd76 100644 --- a/src/styles/components/_about.scss +++ b/src/styles/components/_about.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -23,8 +26,8 @@ // About Variables // ---------------------------------------- -$about-border-color: darken($body-background, 13%); -$about-background-color: darken($body-background, 5%); +$about-border-color: color.adjust(variables.$body-background, $lightness: -13%); +$about-background-color: color.adjust(variables.$body-background, $lightness: -5%); // Styles // ---------------------------------------- diff --git a/src/styles/components/_alerts.scss b/src/styles/components/_alerts.scss index db9a2739b0..0a447680cb 100644 --- a/src/styles/components/_alerts.scss +++ b/src/styles/components/_alerts.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -33,7 +36,7 @@ } a { - color: lighten($text-color, 10%); + color: color.adjust($text-color, $lightness: 10%); &:hover { color: $text-color; @@ -98,7 +101,7 @@ .global-notifications { position: fixed; max-width: 300px; - z-index: $max-z; + z-index: variables.$max-z; .alert { .close { @@ -121,12 +124,12 @@ .alert { min-height: 40px; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; position: absolute; top: 20px; left: 0px; right: 20px; - z-index: $max-z; + z-index: variables.$max-z; font-weight: 600; padding: 0 15px; overflow: hidden; @@ -146,7 +149,7 @@ right: 10px; font-size: 20px; margin-top: 9px; - transition: $alert-transition; + transition: variables.$alert-transition; text-decoration: none; color: inherit; } @@ -161,19 +164,19 @@ // Color variables are located in assets/less/base/_variables.less &.info { - @include alert-variant($state-info-bg, $state-info-border, $state-info-text); + @include alert-variant(variables.$state-info-bg, variables.$state-info-border, variables.$state-info-text); } &.warning { - @include alert-variant($state-warning-bg, $state-warning-border, $state-warning-text); + @include alert-variant(variables.$state-warning-bg, variables.$state-warning-border, variables.$state-warning-text); } &.success { - @include alert-variant($state-success-bg, $state-success-border, $state-success-text); + @include alert-variant(variables.$state-success-bg, variables.$state-success-border, variables.$state-success-text); } &.danger { - @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text); + @include alert-variant(variables.$state-danger-bg, variables.$state-danger-border, variables.$state-danger-text); } } diff --git a/src/styles/components/_breadcrumbs.scss b/src/styles/components/_breadcrumbs.scss index 6179225a48..2b60ecb8c0 100644 --- a/src/styles/components/_breadcrumbs.scss +++ b/src/styles/components/_breadcrumbs.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -22,8 +27,8 @@ .breadcrumb { $height: 35px; - background: lighten($modal-nav-bg-color, 4%); - border-bottom: 1px solid $modal-nav-border-color; + background: color.adjust(variables.$modal-nav-bg-color, $lightness: 4%); + border-bottom: 1px solid variables.$modal-nav-border-color; line-height: $height; &.active { @@ -31,7 +36,7 @@ } > button { - color: $modal-nav-link-color; + color: variables.$modal-nav-link-color; font-size: 12px; position: relative; margin-right: 30px; @@ -42,14 +47,14 @@ } &:hover { - color: $modal-nav-link-active-color; + color: variables.$modal-nav-link-active-color; &:before { - color: $modal-nav-link-color; + color: variables.$modal-nav-link-color; } } - @include fa-icon($fa-var-chevron-right, after, inline-block, 0, 0, inherit, 9px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-right, after, inline-block, 0, 0, inherit, 9px); &:after { position: relative; @@ -59,7 +64,7 @@ &:last-child { - color: $modal-nav-link-active-color; + color: variables.$modal-nav-link-active-color; font-weight: 600; } diff --git a/src/styles/components/_cal.scss b/src/styles/components/_cal.scss index 853d4906da..38a9b3b973 100644 --- a/src/styles/components/_cal.scss +++ b/src/styles/components/_cal.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -24,7 +27,7 @@ display: block; width: 216px; margin: 20px 20px 15px; - border: $thin-border-stroke #ccc; + border: variables.$thin-border-stroke #ccc; text-shadow: none; &.left { @@ -59,7 +62,7 @@ color: #fff; text-align: center; margin: -1px -1px 0px -1px; - border: $thin-border-stroke darken($l-blue, 10%); + border: variables.$thin-border-stroke color.adjust(variables.$l-blue, $lightness: -10%); background: linear-gradient(to bottom, #388ed6, #2b77b9); a { @@ -131,8 +134,8 @@ a:active { margin: -1px; color: #f3f3f3; - background: $l-blue; - border: $thin-border-stroke darken($l-blue, 15%); + background: variables.$l-blue; + border: variables.$thin-border-stroke color.adjust(variables.$l-blue, $lightness: -15%); } &.active:first-child a, diff --git a/src/styles/components/_components-config.scss b/src/styles/components/_components-config.scss index 0860459220..32e47aa4af 100644 --- a/src/styles/components/_components-config.scss +++ b/src/styles/components/_components-config.scss @@ -20,36 +20,36 @@ */ -@import "simple-box"; -@import "helper-classes"; -@import "cal"; -@import "ui"; -@import "dropdowns"; -@import "menu-dropdown"; -@import "form"; -@import "multi-select"; -@import "steps"; -@import "breadcrumbs"; -@import "header"; -@import "menu"; -@import "footer"; -@import "tables"; -@import "date-picker"; -@import "datepicker-custom"; -@import "alerts"; -@import "inputs"; -@import "stats"; -@import "popover"; -@import "collapsible-box"; -@import "about"; -@import "tooltips"; +@use "simple-box"; +@use "helper-classes"; +@use "cal"; +@use "ui"; +@use "dropdowns"; +@use "menu-dropdown"; +@use "form"; +@use "multi-select"; +@use "steps"; +@use "breadcrumbs"; +@use "header"; +@use "menu"; +@use "footer"; +@use "tables"; +@use "date-picker"; +@use "datepicker-custom"; +@use "alerts"; +@use "inputs"; +@use "stats"; +@use "popover"; +@use "collapsible-box"; +@use "about"; +@use "tooltips"; // Integrated From Extensions -@import "labels"; -@import "progress-bar"; -@import "toggle-buttons"; -@import "statistics-graph"; +@use "labels"; +@use "progress-bar"; +@use "toggle-buttons"; +@use "statistics-graph"; // Large Components -@import "modals/modals-config"; -@import "data-filter/data-filter-config"; +@use "modals/modals-config"; +@use "data-filter/data-filter-config"; diff --git a/src/styles/components/_date-picker.scss b/src/styles/components/_date-picker.scss index 7c9230eb05..cc9d3f463d 100644 --- a/src/styles/components/_date-picker.scss +++ b/src/styles/components/_date-picker.scss @@ -1,3 +1,6 @@ +@use "../base/variables"; +@use "../mixins/mixins-config"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -24,11 +27,11 @@ box-sizing: content-box; &.popover{ - @include btn-dd-content-mixin(520px); + @include mixins-config.btn-dd-content-mixin(520px); left: auto; right: 0; height: 320px; - z-index: $max-z; + z-index: variables.$max-z; .dates { clear: both; @@ -51,7 +54,7 @@ position: absolute; top: 3px; left: 50%; - color: $light-prim-color; + color: variables.$light-prim-color; margin-left: -7px; text-transform: uppercase; } diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index 93daae4eb5..e40e9420d2 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/variables"; +@use "../base/fontawesome/fa-mixins"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -25,7 +30,7 @@ height: 40px; line-height: 40px; display: inline-block; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; padding-left: 15px; font-weight: 600; font-size: 12px; @@ -36,15 +41,15 @@ // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(#fff, #f7f7f7); - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); - color: $medium-prim-color; + color: variables.$medium-prim-color; text-shadow: 0px 1px 0px #fff; &:hover { - border: $thin-border-stroke darken($main-border-color, 2%); - background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); - color: $medium-prim-color; + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + background: linear-gradient(color.adjust(#fff, $lightness: -1%), color.adjust(#f7f7f7, $lightness: -1%)); + color: variables.$medium-prim-color; } &:active { @@ -52,7 +57,7 @@ } // Menu Icon Settings - $icon-color: $medium-prim-color; + $icon-color: variables.$medium-prim-color; $icon-font-size: 15px; $icon-display-value: inline-block; $icon-pesudo-position: before; @@ -70,7 +75,7 @@ display: inline; margin: 0; padding: 0; - @include font-smoothing(on); + @include fa-mixins.font-smoothing(on); } &:after { @@ -82,20 +87,20 @@ > ul { position: absolute; transition: all 200ms; - background: $off-white; + background: variables.$off-white; list-style: none; - @include border-bottom-radius($main-border-radius); - border: $thin-border-stroke $main-border-color; + @include border-radius.border-bottom-radius(variables.$main-border-radius); + border: variables.$thin-border-stroke variables.$main-border-color; opacity: 1; pointer-events: auto; - z-index: $max-z + 10; + z-index: variables.$max-z + 10; top: 100%; left: -1px; right: -1px; > li { text-decoration: none; - text-shadow: 0 1px 0 $white; + text-shadow: 0 1px 0 variables.$white; display: block; position: relative; transition: all 200ms; @@ -120,7 +125,7 @@ } &:last-child a { - @include border-bottom-radius($main-border-radius); + @include border-radius.border-bottom-radius(variables.$main-border-radius); } } @@ -131,7 +136,7 @@ > span { display: block; font-size: 10px; - color: $light-prim-color; + color: variables.$light-prim-color; margin-top: -20px; } } @@ -145,7 +150,7 @@ padding-left: 15px; font-weight: 600; font-size: 12px; - text-shadow: 0 1px 0 $white; + text-shadow: 0 1px 0 variables.$white; cursor: pointer; position: relative; vertical-align: middle; @@ -161,18 +166,18 @@ > ul { position: absolute; transition: all 200ms; - background: $off-white; + background: variables.$off-white; list-style: none; - @include border-bottom-radius($main-border-radius); - border: $thin-border-stroke $main-border-color; + @include border-radius.border-bottom-radius(variables.$main-border-radius); + border: variables.$thin-border-stroke variables.$main-border-color; opacity: 1; pointer-events: auto; - z-index: $max-z + 10; + z-index: variables.$max-z + 10; > li { text-decoration: none; - text-shadow: 0 1px 0 $white; - color: $medium-prim-color; + text-shadow: 0 1px 0 variables.$white; + color: variables.$medium-prim-color; font-size: 12px; line-height: 20px; font-weight: 600; @@ -189,7 +194,7 @@ span > span { display: block; font-size: 10px; - color: $light-prim-color; + color: variables.$light-prim-color; margin-top: -20px; } @@ -209,7 +214,7 @@ } &:last-child a { - @include border-bottom-radius($main-border-radius); + @include border-radius.border-bottom-radius(variables.$main-border-radius); } } } @@ -219,21 +224,21 @@ &.flipped { &.active { - @include border-top-radius(0); - @include border-bottom-radius($main-border-radius); + @include border-radius.border-top-radius(0); + @include border-radius.border-bottom-radius(variables.$main-border-radius); } > ul { top: auto; bottom: 100%; - @include border-top-radius($main-border-radius); - @include border-bottom-radius(0); + @include border-radius.border-top-radius(variables.$main-border-radius); + @include border-radius.border-bottom-radius(0); } } // Active State &.active { - @include border-bottom-radius(0); + @include border-radius.border-bottom-radius(0); &:after { transform: rotate(180deg); diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss index d413f7ef66..cd1bbfb556 100644 --- a/src/styles/components/_footer.scss +++ b/src/styles/components/_footer.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -23,8 +27,8 @@ // Footer Variables // ---------------------------------------- -$footer-border-color: darken($body-background, 13%); -$footer-background-color: darken($body-background, 5%); +$footer-border-color: color.adjust(variables.$body-background, $lightness: -13%); +$footer-background-color: color.adjust(variables.$body-background, $lightness: -5%); @mixin footer-component-padding() { padding-top: 10px; @@ -44,7 +48,7 @@ $footer-background-color: darken($body-background, 5%); border-top: 1px solid $footer-border-color; .feedback-btn { - @include clearfix(); + @include clearfix.clearfix(); width: 90px; position: absolute; right: 0; @@ -63,7 +67,7 @@ $footer-background-color: darken($body-background, 5%); padding-right: 5px; &:hover { - background: rgba($white, 0.8); + background: rgba(variables.$white, 0.8); } &:before { @@ -80,7 +84,7 @@ $footer-background-color: darken($body-background, 5%); } ul li { - color: $light-prim-color; + color: variables.$light-prim-color; margin-left: 10px; vertical-align: top; font-size: 10px; diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index a3737e4490..36787b9b6d 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -1,3 +1,6 @@ +@use "../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,7 +24,7 @@ .form-container { - @include clearfix(); + @include clearfix.clearfix(); max-width: 100%; padding: 0; margin: 15px 0; @@ -35,7 +38,7 @@ } label { - color: $medium-prim-color; + color: variables.$medium-prim-color; } input[type="text"], @@ -57,7 +60,7 @@ } .row { - @include clearfix(); + @include clearfix.clearfix(); display: block; width: 100%; margin: 15px 0; diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index 278ec041f7..bfa2269e2b 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -1,3 +1,14 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; +@use "../mixins/button"; +@use "../mixins/mixins-config"; +@use "../mixins/triangle-point"; +@use "_menu-dropdown.scss"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -27,7 +38,7 @@ $height: 50px; width: 100%; height: $height; - box-shadow: 0 1px 3px 1px rgba($black, 0.3); + box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3); position: relative; border-bottom: 1px solid #1d3041; background: linear-gradient(to bottom, #388ed6, #2075b1); @@ -40,8 +51,8 @@ padding: 14px 20px 13px; img { - width: $logo-width; - height: $logo-height; + width: variables.$logo-width; + height: variables.$logo-height; } } } @@ -53,7 +64,7 @@ .header-nav { position: absolute; - right: $side-margin; + right: variables.$side-margin; top: 5px; // Nav items @@ -76,7 +87,7 @@ .dropdown-ul { position: absolute; - z-index: $max-z + 10; + z-index: variables.$max-z + 10; opacity: 1; visibility: visible; @extend %menu-dropdown-base; @@ -102,17 +113,17 @@ } // Menu Icon Settings - $icon-color: $medium-prim-color; + $icon-color: variables.$medium-prim-color; $icon-font-size: 15px; $icon-display-value: inline-block; $icon-pesudo-position: before; .cogs-icon { - @include fa-icon($fa-var-cogs, $icon-pesudo-position, $icon-display-value, 0 10px 0 0, 0, $icon-color, $icon-font-size); + @include fa-mixins.fa-icon(variables2.$fa-var-cogs, $icon-pesudo-position, $icon-display-value, 0 10px 0 0, 0, $icon-color, $icon-font-size); } .logout-icon { - @include fa-icon($fa-var-power-off, $icon-pesudo-position, $icon-display-value, 0 14px 0 0, 0, $icon-color, $icon-font-size); + @include fa-mixins.fa-icon(variables2.$fa-var-power-off, $icon-pesudo-position, $icon-display-value, 0 14px 0 0, 0, $icon-color, $icon-font-size); } .fa { @@ -132,7 +143,7 @@ .lang-dd .dropdown-ul { .selected { - @include fa-icon($fa-var-check, $icon-pesudo-position, $icon-display-value, 0 7px 0 0, 0, $green, $icon-font-size); + @include fa-mixins.fa-icon(variables2.$fa-var-check, $icon-pesudo-position, $icon-display-value, 0 7px 0 0, 0, variables.$green, $icon-font-size); } button:not(.selected) { @@ -171,7 +182,7 @@ // ---------------------------------------- .dropdown-icon { - @include fa-icon($fa-var-chevron-down, after, inline-block, 0 0 0 5px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-down, after, inline-block, 0 0 0 5px); } @@ -185,31 +196,31 @@ display: flex; flex-direction: row; align-items: flex-end; - background: $d-blue; + background: variables.$d-blue; .btn-group { - margin-right: $side-margin; + margin-right: variables.$side-margin; align-self: center; // btn specific styles .add { - @include btn(green-dark-bg); + @include button.btn(green-dark-bg); &.plus-icon { - @include fa-icon($fa-var-plus, before, inline-block, 0 10px 0 0); + @include fa-mixins.fa-icon(variables2.$fa-var-plus, before, inline-block, 0 10px 0 0); } &.user-icon { - @include fa-icon($fa-var-user, before, inline-block, 0 10px 0 0); + @include fa-mixins.fa-icon(variables2.$fa-var-user, before, inline-block, 0 10px 0 0); } &.group-icon { - @include fa-icon($fa-var-users, before, inline-block, 0 10px 0 0); + @include fa-mixins.fa-icon(variables2.$fa-var-users, before, inline-block, 0 10px 0 0); } } .secondary { - @include btn(blue-dark-bg); + @include button.btn(blue-dark-bg); margin-right: 20px; &:first-child { @@ -233,7 +244,7 @@ vertical-align: middle; &:first-child { - @include build-icon(auto, auto, export, 19px, 16px); + @include mixins-config.build-icon(auto, auto, export, 19px, 16px); } &.fa-chevron-down { @@ -246,7 +257,7 @@ .upload > i { vertical-align: middle; - @include build-icon(auto, auto, upload, 19px, 16px); + @include mixins-config.build-icon(auto, auto, upload, 19px, 16px); } } @@ -255,10 +266,10 @@ width: 80px; height: 42px; background: #243e55; - @include border-top-radius(4px); - border: $thin-border-stroke darken(#1e364b, 3%); + @include border-radius.border-top-radius(4px); + border: variables.$thin-border-stroke color.adjust(#1e364b, $lightness: -3%); border-bottom: none; - margin: 0 $side-margin; + margin: 0 variables.$side-margin; position: relative; > button { @@ -279,21 +290,21 @@ a { display: inline-block; - color: $subpage-navigation-link-color; + color: variables.$subpage-navigation-link-color; text-align: center; position: relative; padding: 0 20px; margin-bottom: 16px; &:hover { - color: $subpage-navigation-link-hover-color; + color: variables.$subpage-navigation-link-hover-color; } &.active { font-weight: 600; - color: $off-white; + color: variables.$off-white; - @include triangle-point(bottom, 7px, 7px, 50%, $off-white, 0, transparent, 9px); + @include triangle-point.triangle-point(bottom, 7px, 7px, 50%, variables.$off-white, 0, transparent, 9px); &:before, &:after { margin-right: -7px; @@ -324,11 +335,13 @@ &.grey a, a { - @include btn(white); - border: 1px solid $main-border-color; + @include button.btn(white); + & { + border: 1px solid variables.$main-border-color; + } &:not(:last-child) { - border-right: 1px solid $main-border-color; + border-right: 1px solid variables.$main-border-color; } } @@ -337,15 +350,15 @@ // ------------------------------ &.dark-blue a { - @include btn(blue); - border: $thin-border-stroke darken($dark-blue, 5%); + @include button.btn(blue); + border: variables.$thin-border-stroke color.adjust($dark-blue, $lightness: -5%); display: inline-block; padding: 12px 15px; - text-shadow: 0 1px 1px rgba($black, 0.15); + text-shadow: 0 1px 1px rgba(variables.$black, 0.15); border-radius: 0; &.active { - border: darken($mid-blue, 50%); + border: color.adjust($mid-blue, $lightness: -50%); &:not(:first-child) { border-left: 1px solid $dark-blue; @@ -375,13 +388,13 @@ } &:first-child { - border-top-left-radius: $main-border-radius; - border-bottom-left-radius: $main-border-radius; + border-top-left-radius: variables.$main-border-radius; + border-bottom-left-radius: variables.$main-border-radius; } &:last-child { - border-top-right-radius: $main-border-radius; - border-bottom-right-radius: $main-border-radius; + border-top-right-radius: variables.$main-border-radius; + border-bottom-right-radius: variables.$main-border-radius; } // Active Page @@ -389,14 +402,14 @@ &.active { color: #fff !important; - text-shadow: 0 1px 0 rgba($black, 0.2); - border: 1px solid $l-blue; + text-shadow: 0 1px 0 rgba(variables.$black, 0.2); + border: 1px solid variables.$l-blue; - background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); - box-shadow: inset 0 1px 0 0 rgba($white, 0.2), 0 2px 3px 1px rgba($black, 0.05); + background: linear-gradient(to bottom, color.adjust($mid-blue, $lightness: 20%), color.adjust($mid-blue, $lightness: 10%)); + box-shadow: inset 0 1px 0 0 rgba(variables.$white, 0.2), 0 2px 3px 1px rgba(variables.$black, 0.05); &:hover { - background: linear-gradient(to bottom, lighten($mid-blue, 20%), lighten($mid-blue, 10%)); + background: linear-gradient(to bottom, color.adjust($mid-blue, $lightness: 20%), color.adjust($mid-blue, $lightness: 10%)); } &:active { @@ -425,7 +438,7 @@ // Example: https://gist.github.com/mattmischuk/b4dcb1e245f00b21c6a6 .page-nav-container { - @include clearfix(); + @include clearfix.clearfix(); width: 100%; .page-nav-bar { diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index 9ae505f331..82b226b0c8 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -28,50 +33,50 @@ input[type="search"], input[type="time"], input[type="date"], textarea { - height: $input-height; + height: variables.$input-height; width: 130px; - font-family: $font-stack; + font-family: variables.$font-stack; background: #fff; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; margin: 0 auto; padding: 0 20px; position: relative; font-size: 13px; font-weight: 600; - color: $medium-prim-color; + color: variables.$medium-prim-color; &::placeholder { - color: $color-darkgray; + color: variables.$color-darkgray; } &:hover { - border: $thin-border-stroke darken($main-border-color, 20%); + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -20%); } &:focus { - border: $thin-border-stroke $l-blue; + border: variables.$thin-border-stroke variables.$l-blue; } // Error border &.error { - border: $thin-border-stroke $alt-red; - color: $red; + border: variables.$thin-border-stroke variables.$alt-red; + color: variables.$red; } // Input icons // ---------------------------------------- &#email { - background-image: url("#{$img-path}/user-input-icon.png"); + background-image: url("#{variables.$img-path}/user-input-icon.png"); background-size: 23px 20px; background-repeat: no-repeat; background-position: 14px center; } &#password { - background-image: url("#{$img-path}/key-icon.png"); + background-image: url("#{variables.$img-path}/key-icon.png"); background-size: 16px 20px; background-repeat: no-repeat; background-position: 19px center; @@ -106,14 +111,14 @@ textarea { select[multiple] { background: #fff; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; padding: 10px; - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 13px; &:focus { - border: $thin-border-stroke $l-blue; + border: variables.$thin-border-stroke variables.$l-blue; outline: none; } } @@ -126,7 +131,7 @@ input[type="radio"].ios { $grey: #d3d3d3; $transition-duration: 250ms; - background-color: darken($white, 2%); + background-color: color.adjust($white, $lightness: -2%); border: 1px solid $grey; border-radius: 26px; box-shadow: inset 0 0 0 1px $grey; @@ -153,13 +158,13 @@ input[type="radio"].ios { } &:checked { - border-color: $green; - box-shadow: inset 0 0 0 13px $green; + border-color: variables.$green; + box-shadow: inset 0 0 0 13px variables.$green; padding-left: 18px; transition: border 250ms, box-shadow 250ms, padding 250ms 150ms; &:after { - border-color: $green; + border-color: variables.$green; left: 16px; right: 0; transition: border 250ms, left 150ms 250ms, right 250ms 175ms; @@ -173,7 +178,7 @@ input[type="radio"].ios { } .search-container { - @include fa-icon($fa-var-search, after, inline, 0, 0, inherit, 13px); + @include fa-mixins.fa-icon(variables2.$fa-var-search, after, inline, 0, 0, inherit, 13px); position: relative; &:after { diff --git a/src/styles/components/_labels.scss b/src/styles/components/_labels.scss index a02e90721b..3e971cb4d6 100644 --- a/src/styles/components/_labels.scss +++ b/src/styles/components/_labels.scss @@ -1,3 +1,5 @@ +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -22,18 +24,18 @@ label { display: block; - color: $dark-prim-color; + color: variables.$dark-prim-color; > small { display: block; - color: $light-prim-color; + color: variables.$light-prim-color; font-size: 11px; margin-top: 3px; } &.required:after { content: "*"; - color: $red; + color: variables.$red; margin-left: 3px; } } @@ -43,7 +45,7 @@ label { // ---------------------------------------- label.warning { - color: $red !important; + color: variables.$red !important; } diff --git a/src/styles/components/_menu-dropdown.scss b/src/styles/components/_menu-dropdown.scss index 1cb7c18b79..2bbb3409a9 100644 --- a/src/styles/components/_menu-dropdown.scss +++ b/src/styles/components/_menu-dropdown.scss @@ -1,3 +1,6 @@ +@use "../base/variables"; +@use "../mixins/triangle-point"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -27,17 +30,17 @@ // Base Properties $padding: 8px 0; - $background-color: rgba($white, 0.98 ); + $background-color: rgba(variables.$white, 0.98 ); $border-stroke: 1px; - $border-color: rgba($black, 0.1); - $border-radius: $main-border-radius; - $box-shadow: 0 1px 3px rgba($black, 0.1), 0 0 1px $border-stroke rgba($black, 0.1); + $border-color: rgba(variables.$black, 0.1); + $border-radius: variables.$main-border-radius; + $box-shadow: 0 1px 3px rgba(variables.$black, 0.1), 0 0 1px $border-stroke rgba(variables.$black, 0.1); $point-width: 7px; $point-height: 7px; $point-position-from-right: 10px; // Link Properties (List Items) - $link-hover-color: rgba($black, 0.05); + $link-hover-color: rgba(variables.$black, 0.05); $link-padding: 8px 15px; $link-transition-property: background, color; $link-transition-duration: 250ms; @@ -59,7 +62,7 @@ transition-timing-function: ease-in; text-overflow: ellipsis; white-space: nowrap; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; height: 32px; width: 100%; text-align: left; @@ -70,5 +73,5 @@ } // Top Point - @include triangle-point(top, $point-width, $point-height, $point-position-from-right, $background-color, $border-stroke, $border-color); + @include triangle-point.triangle-point(top, $point-width, $point-height, $point-position-from-right, $background-color, $border-stroke, $border-color); } diff --git a/src/styles/components/_menu.scss b/src/styles/components/_menu.scss index c8af06a492..30b62f3aad 100644 --- a/src/styles/components/_menu.scss +++ b/src/styles/components/_menu.scss @@ -1,3 +1,8 @@ +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -26,9 +31,9 @@ float: left; width: 80px; background: #fff; - border: $thin-border-stroke #c3cbd0; + border: variables.$thin-border-stroke #c3cbd0; border-top: none; - @include border-bottom-radius(4px); + @include border-radius.border-bottom-radius(4px); position: absolute; top: 1px; left: -1px; @@ -69,7 +74,7 @@ &:hover > i, &:active > i { color: #24425c; - @include fa-icon-color(before, "#24425c"); + @include fa-mixins.fa-icon-color(before, "#24425c"); } @keyframes fadeIn { @@ -85,27 +90,27 @@ } .events { - @include fa-icon($fa-var-calendar-check-o, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-calendar-check-o, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } .systems { - @include fa-icon($fa-var-server, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-server, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } .recordings { - @include fa-icon($fa-var-video-camera, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-video-camera, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } .users { - @include fa-icon($fa-var-user, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-user, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } .statistics { - @include fa-icon($fa-var-signal, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-signal, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } .configuration { - @include fa-icon($fa-var-cogs, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-cogs, before, block, -3px 0 0 0, 0, inherit, 29px, normal, inherit); } } } diff --git a/src/styles/components/_multi-select.scss b/src/styles/components/_multi-select.scss index f9ce9f6032..e29552896c 100644 --- a/src/styles/components/_multi-select.scss +++ b/src/styles/components/_multi-select.scss @@ -1,3 +1,9 @@ +@use "../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; +@use "../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,7 +27,7 @@ .multi-select-container { - @include clearfix(); + @include clearfix.clearfix(); select[multiple] { margin-top: 10px; @@ -39,12 +45,12 @@ p { font-size: 12px; - color: $medium-prim-color; + color: variables.$medium-prim-color; line-height: 22px; } strong { - color: $medium-prim-color; + color: variables.$medium-prim-color; } .button-container { @@ -56,11 +62,11 @@ } .submit { - @include btn(white); + @include button.btn(white); } .remove { - @include btn(red); + @include button.btn(red); } } @@ -76,7 +82,7 @@ } input.search { - border-radius: $main-border-radius 0 0 $main-border-radius; + border-radius: variables.$main-border-radius 0 0 variables.$main-border-radius; border-right-width: 0; float: left; margin: 0; @@ -85,10 +91,10 @@ button.clear { height: inherit; float: right; - @include btn(white); - @include fa-icon($fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px); + @include button.btn(white); + @include fa-mixins.fa-icon(variables2.$fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px); - border-radius: 0 $main-border-radius $main-border-radius 0; + border-radius: 0 variables.$main-border-radius variables.$main-border-radius 0; &+input.search { width: calc(100% - 46px) !important; @@ -112,7 +118,7 @@ content: "\f0ec"; font-family: FontAwesome; font-size: 18px; - color: $medium-prim-color; + color: variables.$medium-prim-color; text-align: center; } diff --git a/src/styles/components/_popover.scss b/src/styles/components/_popover.scss index 38192c651c..a0ec0da12c 100644 --- a/src/styles/components/_popover.scss +++ b/src/styles/components/_popover.scss @@ -1,3 +1,7 @@ +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + // controlling element of the popover .popover-wrapper { position: relative; @@ -15,8 +19,8 @@ position: absolute; width: 250px; background: #efefef; - border-radius: $main-border-radius; - border: $thin-border-stroke $main-border-color; + border-radius: variables.$main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; z-index: 1; } @@ -31,7 +35,7 @@ position: absolute; pointer-events: none; border-color: transparent; - border-right-color: $main-border-color; + border-right-color: variables.$main-border-color; border-width: 10px; margin-top: 0; } @@ -51,7 +55,7 @@ .popover.popover-left { &:after { @include popover-arrow(); - border-left-color: $main-border-color; + border-left-color: variables.$main-border-color; left: 100%; } } @@ -60,12 +64,12 @@ &:after { @include popover-arrow(); right: 100%; - border-right-color: $main-border-color; + border-right-color: variables.$main-border-color; } } .popover__header { - background: $main-border-color; + background: variables.$main-border-color; height: 26px; position: relative; } @@ -75,7 +79,7 @@ } .popover__list-item { - @include fa-icon($fa-var-play-circle-o, before, inline-block, 0, 0, #37c180, 20px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle-o, before, inline-block, 0, 0, #37c180, 20px, normal, inherit); background-position-y: center; margin: 6px 0; padding-left: 30px; @@ -89,7 +93,7 @@ } .popover__list-item-disabled { - @include fa-icon($fa-var-play-circle-o, before, inline-block, 0, 0, inherit, 20px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle-o, before, inline-block, 0, 0, inherit, 20px, normal, inherit); margin: 6px 0; padding-left: 30px; line-height: 22px; diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index 0202e6f2ce..c53b6bec1c 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -26,8 +29,8 @@ margin-top: 5px; margin-bottom: 10px; background-color: #fff; - border-radius: $main-border-radius; - border: 1px solid darken(#388ed6, 10%); + border-radius: variables.$main-border-radius; + border: 1px solid color.adjust(#388ed6, $lightness: -10%); &.compact { height: 8px; @@ -43,9 +46,9 @@ color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); text-align: center; - background-color: $progress-bar-color; + background-color: variables.$progress-bar-color; background: linear-gradient(to bottom, #388ed6, #2b77b9); - border-right: 1px solid darken(#388ed6, 15%); + border-right: 1px solid color.adjust(#388ed6, $lightness: -15%); transition: width 600ms ease; &[aria-valuenow="1"], diff --git a/src/styles/components/_simple-box.scss b/src/styles/components/_simple-box.scss index 7dc9c2f979..320bff3efa 100644 --- a/src/styles/components/_simple-box.scss +++ b/src/styles/components/_simple-box.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -34,9 +38,9 @@ margin: -3px 8px 0 0; padding: 0 20px; display: inline-block; - background: darken($body-background, 1%); - border: $thin-border-stroke $main-border-color; - @include border-top-radius($main-border-radius); + background: color.adjust(variables.$body-background, $lightness: -1%); + border: variables.$thin-border-stroke variables.$main-border-color; + @include border-radius.border-top-radius(variables.$main-border-radius); font-size: 13px; &.active { @@ -49,8 +53,8 @@ // Main Simple Box Styles (formerly ".container") .simple-box { - border-radius: $main-border-radius; - border: 1px solid $main-border-color; + border-radius: variables.$main-border-radius; + border: 1px solid variables.$main-border-color; background: #fff; padding: 25px 20px 25px; @@ -66,7 +70,7 @@ } > h1 { - color: darken($grey, 20%); + color: color.adjust(variables.$grey, $lightness: -20%); font-size: 23px; margin: 10px 0; } @@ -74,7 +78,7 @@ > p { line-height: 23px; font-size: 12px; - color: $medium-prim-color; + color: variables.$medium-prim-color; margin-bottom: 10px; } @@ -83,7 +87,7 @@ ul { padding-left: 20px; list-style: disc; - color: $light-prim-color; + color: variables.$light-prim-color; } li { @@ -94,14 +98,14 @@ margin-right: 5px; strong { - color: $medium-prim-color; + color: variables.$medium-prim-color; } &:hover { - color: $l-blue; + color: variables.$l-blue; > strong { - color: $l-blue; + color: variables.$l-blue; } } } diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index ee2db262d8..e2497b184b 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; +@use "../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -30,7 +36,7 @@ } > label { - @include btn($white); + @include button.btn(variables.$white); display: inline; border-radius: 0; margin: -2px; @@ -48,9 +54,9 @@ > input[type="radio"]:checked + label { cursor: pointer; - border: $thin-border-stroke darken($main-border-color, 2%); - background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); - color: $medium-prim-color; + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + background: linear-gradient(color.adjust(#fff, $lightness: -4%), color.adjust(#f7f7f7, $lightness: -10%)); + color: variables.$medium-prim-color; box-shadow: inset 0px 1px 6px 2px rgba(0,0,0,.1); } } @@ -67,14 +73,14 @@ .navigation { - @include btn($white); + @include button.btn(variables.$white); &.prev { - @include fa-icon($fa-var-chevron-left, before, inline-block, 0 0 0 0, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-left, before, inline-block, 0 0 0 0, 0, inherit, 10px); } &.next { - @include fa-icon($fa-var-chevron-right, after, inline-block, 0 0 0 0, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-right, after, inline-block, 0 0 0 0, 0, inherit, 10px); } } @@ -100,7 +106,7 @@ margin-left: -100%; .download-icon { - @include fa-icon($fa-var-download, before, inline-block, 0 0 0 0, 0, inherit, 30px); + @include fa-mixins.fa-icon(variables2.$fa-var-download, before, inline-block, 0 0 0 0, 0, inherit, 30px); } } diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss index c7bd459b85..28bb973ec4 100644 --- a/src/styles/components/_stats.scss +++ b/src/styles/components/_stats.scss @@ -1,3 +1,5 @@ +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -40,7 +42,7 @@ text-align: center; cursor: pointer; overflow: hidden; - color: $stats-color; + color: variables.$stats-color; border: none; border-radius: 0; background-color: transparent; @@ -50,10 +52,10 @@ font-size: unset; &:hover { - color: $stats-hover-color; + color: variables.$stats-hover-color; } &:focus { - outline: $stats-color solid thin; + outline: variables.$stats-color solid thin; } h1 { @@ -61,7 +63,7 @@ font-size: 24px; margin: 0 0 5px 0; padding: 2px 0; - border-bottom: $thin-border-stroke $stats-color; + border-bottom: variables.$thin-border-stroke variables.$stats-color; } span { diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index 55948ccd2e..b7d601a04c 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -1,3 +1,5 @@ +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -23,28 +25,28 @@ .step-by-step { .MuiStepLabel-iconContainer svg { - color: $color-gray !important; + color: variables.$color-gray !important; } .MuiStepLabel-labelContainer .Mui-active { - border-bottom: 1px solid $primary-color-blue; + border-bottom: 1px solid variables.$primary-color-blue; font-weight: 800; } .Mui-active svg { - color: $primary-color-blue !important; + color: variables.$primary-color-blue !important; transform: none !important; } .MuiStepLabel-labelContainer span { - color: $color-darkgray; + color: variables.$color-darkgray; margin: 3px 10px; position: relative; } $height: 100px; - background: $modal-nav-bg-color; - border-bottom: 1px solid $modal-nav-border-color; + background: variables.$modal-nav-bg-color; + border-bottom: 1px solid variables.$modal-nav-border-color; height: $height; text-align: center; position: relative; @@ -58,18 +60,18 @@ left: 0; width: 100%; height: 1px; - background: $main-border-color; + background: variables.$main-border-color; background: linear-gradient( to left, - rgba($modal-nav-border-color, 0) 5%, - rgba($modal-nav-border-color, 1) 25%, - rgba($modal-nav-border-color, 1) 75%, - rgba($modal-nav-border-color, 0) 95% + rgba(variables.$modal-nav-border-color, 0) 5%, + rgba(variables.$modal-nav-border-color, 1) 25%, + rgba(variables.$modal-nav-border-color, 1) 75%, + rgba(variables.$modal-nav-border-color, 0) 95% ); } > a { - color: $modal-nav-link-color; + color: variables.$modal-nav-link-color; margin: 0 10px; position: relative; line-height: $height + 30; @@ -82,7 +84,7 @@ top: -20px; left: 50%; margin-left: -5px; - background: $modal-nav-link-color; + background: variables.$modal-nav-link-color; border-radius: 50%; width: 12px; height: 12px; @@ -90,23 +92,23 @@ // First line &:first-child:before { - background: linear-gradient(to right, $modal-nav-bg-color, $modal-nav-border-color); + background: linear-gradient(to right, variables.$modal-nav-bg-color, variables.$modal-nav-border-color); } // Last line &:last-child:before { - background: linear-gradient(to right, $modal-nav-border-color, $modal-nav-bg-color); + background: linear-gradient(to right, variables.$modal-nav-border-color, variables.$modal-nav-bg-color); } // Active step &.active { - color: $modal-nav-link-active-color; + color: variables.$modal-nav-link-active-color; font-weight: 600; // Active Dot &:after { width: 22px; height: 22px; - background: $modal-nav-link-active-color; + background: variables.$modal-nav-link-active-color; margin-left: -11px; top: -25px; } } diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index ccd69a851e..31ad9cbfa8 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; +@use "../mixins/mixins-config"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -28,8 +35,8 @@ width: 100%; border-collapse: separate !important; border-spacing: 0; - border-radius: $main-border-radius; - border: $thin-border-stroke $border-color; + border-radius: variables.$main-border-radius; + border: variables.$thin-border-stroke $border-color; @mixin apply-row-stripe() { box-sizing: border-box; @@ -47,17 +54,17 @@ &.highlight-hover tr:hover { - background-color: $table-highlight; + background-color: variables.$table-highlight; } th { &.sortable { cursor: pointer; &:hover { - background: linear-gradient(to bottom, $off-white, darken(#f1f3f5, 3%)); + background: linear-gradient(to bottom, variables.$off-white, color.adjust(#f1f3f5, $lightness: -3%)); } &:active { - box-shadow: inset 0 3px 10px 2px rgba($black, 0.05); + box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); } } // Layout @@ -83,14 +90,14 @@ border-left: 1px solid #fff; border-bottom: 1px solid $border-color; user-select: none; - background: linear-gradient(to bottom, darken($off-white, 1%), darken(#f1f3f5, 3%)); + background: linear-gradient(to bottom, color.adjust(variables.$off-white, $lightness: -1%), color.adjust(#f1f3f5, $lightness: -3%)); // Typography line-height: 35px; text-align: left; font-size: 13px; font-weight: 600; - color: $medium-prim-color; + color: variables.$medium-prim-color; text-shadow: 0px 1px 0px #fff; @@ -98,14 +105,14 @@ span .sort { float: right; margin: 12px 0 0 5px; - @include build-icon(auto, auto, tbl-sort, 8px, 13px); + @include mixins-config.build-icon(auto, auto, tbl-sort, 8px, 13px); &.asc { - @include build-icon(auto, auto, tbl-sort-up, 8px, 13px); + @include mixins-config.build-icon(auto, auto, tbl-sort-up, 8px, 13px); } &.desc { - @include build-icon(auto, auto, tbl-sort-down, 8px, 13px); + @include mixins-config.build-icon(auto, auto, tbl-sort-down, 8px, 13px); } } @@ -115,8 +122,8 @@ // Darken tbl when sorted on &.col-sort { - background: darken(#f1f3f5, 2%); - box-shadow: inset 0 3px 10px 2px rgba($black, 0.05); + background: color.adjust(#f1f3f5, $lightness: -2%); + box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); } // Special column @@ -173,11 +180,11 @@ border-bottom: none; &:last-child { - border-bottom-right-radius: $main-border-radius; + border-bottom-right-radius: variables.$main-border-radius; } &:first-child { - border-bottom-left-radius: $main-border-radius; + border-bottom-left-radius: variables.$main-border-radius; } } } @@ -186,8 +193,8 @@ // at the bottom of rows. &.total { > td { - background: darken(#f8f8f8, 2%); - color: $medium-prim-color; + background: color.adjust(#f8f8f8, $lightness: -2%); + color: variables.$medium-prim-color; font-weight: bold; &:first-child { @@ -198,7 +205,7 @@ } &.darker-row { - background: darken(#f7f7f7, 5%); + background: color.adjust(#f7f7f7, $lightness: -5%); } } @@ -208,7 +215,7 @@ td { padding: $col-padding; - color: $medium-prim-color; + color: variables.$medium-prim-color; border-right: 1px solid #c9d0d6; line-height: 20px; vertical-align: middle; @@ -224,47 +231,47 @@ padding: unset; &.remove { - @include build-icon(auto, auto, remove-icon, 17px, 17px); + @include mixins-config.build-icon(auto, auto, remove-icon, 17px, 17px); } &.play { - color: $color-silver; - @include fa-icon($fa-var-play-circle-o, before, inline-block, 0, 0, $color-silver, 17px, normal, inherit); + color: variables.$color-silver; + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle-o, before, inline-block, 0, 0, variables.$color-silver, 17px, normal, inherit); &.on { - color: $primary-color-green; - @include fa-icon($fa-var-play-circle-o, before, inline-block, 0, 0, $primary-color-green, 17px, normal, inherit); + color: variables.$primary-color-green; + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle-o, before, inline-block, 0, 0, variables.$primary-color-green, 17px, normal, inherit); } } &.stop { - @include build-icon(auto, auto, stop-icon, 17px, 17px); + @include mixins-config.build-icon(auto, auto, stop-icon, 17px, 17px); } &.audio { - @include build-icon(auto, auto, audio-icon, 18px, 16px); + @include mixins-config.build-icon(auto, auto, audio-icon, 18px, 16px); margin-right: 9px; } &.more { - @include build-icon(auto, auto, more-icon, 19px, 15px); + @include mixins-config.build-icon(auto, auto, more-icon, 19px, 15px); } &.more-series { - @include build-icon(auto, auto, more-series-icon, 19px, 15px); + @include mixins-config.build-icon(auto, auto, more-series-icon, 19px, 15px); } &.comments { - @include fa-icon($fa-var-comment-o, before, block, -3px 0 0 0, 0, inherit, 20px, normal, + @include fa-mixins.fa-icon(variables2.$fa-var-comment-o, before, block, -3px 0 0 0, 0, inherit, 20px, normal, inherit); } &.comments-open { - @include fa-icon($fa-var-comment, before, block, -3px 0 0 0, 0, inherit, 20px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-comment, before, block, -3px 0 0 0, 0, inherit, 20px, normal, inherit); } &.cut { - @include fa-icon($fa-var-scissors, before, inline-block, 2px 0 0 0, 0, inherit, 18px, normal, inherit); + @include fa-mixins.fa-icon(variables2.$fa-var-scissors, before, inline-block, 2px 0 0 0, 0, inherit, 18px, normal, inherit); .badge { position: relative; @@ -275,17 +282,17 @@ height: 6px; display: inline-block; border-radius:100%; - background-color: $red; + background-color: variables.$red; } } &.edit { - color: $l-blue; + color: variables.$l-blue; } &.fa { font-size: 18px; - color: $color-darkgray; + color: variables.$color-darkgray; } &.crosslink { @@ -305,7 +312,7 @@ height: 7px; border-radius: 50%; border: 2px solid #fff; - background: $red; + background: variables.$red; width: 10px; height: 10px; } @@ -325,7 +332,7 @@ } > hr { - background: lighten($main-border-color, 10%); + background: color.adjust(variables.$main-border-color, $lightness: 10%); height: 1px; border: none; } @@ -369,19 +376,19 @@ } span[data-status="AGENTS.STATUS.IDLE"]:before { - background: $green; + background: variables.$green; } span[data-status="AGENTS.STATUS.SHUTTING_DOWN"]:before,span[data-status="AGENTS.STATUS.UNKNOWN"]:before { - background: $yellow; + background: variables.$yellow; } span[data-status="AGENTS.STATUS.CAPTURING"]:before,span[data-status="AGENTS.STATUS.UPLOADING"]:before { - background: $l-blue; + background: variables.$l-blue; } span[data-status="AGENTS.STATUS.ERROR"]:before { - background: $red; + background: variables.$red; } // Circles used on server page @@ -392,27 +399,27 @@ margin: 0; &.green { - background: $green; + background: variables.$green; } &.red { - background: $red; + background: variables.$red; } &.blue { - background: $l-blue; + background: variables.$l-blue; } &.yellow { - background: $yellow; + background: variables.$yellow; } } // Input > input { box-sizing: border-box; - border: $thin-border-stroke #ccc; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke #ccc; + border-radius: variables.$main-border-radius; display: inline-block; padding-left: 10px; vertical-align: middle; @@ -422,12 +429,12 @@ border: none; width: 100%; height: 100%; - color: $dark-prim-color; + color: variables.$dark-prim-color; padding-left: 0; } .required { - color: $red; + color: variables.$red; } textarea.hidden-input { @@ -439,7 +446,7 @@ } &.js-has-check { - @include fa-icon($fa-var-check, after, inline-block, 3px 0 0 0, 0, $green, 18px); + @include fa-mixins.fa-icon(variables2.$fa-var-check, after, inline-block, 3px 0 0 0, 0, variables.$green, 18px); &:after { opacity: 0; @@ -505,12 +512,12 @@ } .main-tbl { - border-top: 1px solid $main-border-color; - border-bottom: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; + border-bottom: 1px solid variables.$main-border-color; } .sub-tbl tr:first-child > td { - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; } // This is used to know if the row that opened the tbl was striped @@ -521,8 +528,8 @@ } .sub-tbl tr:last-child > td { - border-bottom: 1px solid $main-border-color; - @include border-bottom-radius(0); + border-bottom: 1px solid variables.$main-border-color; + @include border-radius.border-bottom-radius(0); } } @@ -554,6 +561,6 @@ border-radius: 0 !important; &:not(:first-child) { - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; } } diff --git a/src/styles/components/_toggle-buttons.scss b/src/styles/components/_toggle-buttons.scss index 70f83a37f7..2e79a04fb3 100644 --- a/src/styles/components/_toggle-buttons.scss +++ b/src/styles/components/_toggle-buttons.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "../base/variables"; +@use "../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -32,9 +36,9 @@ } a { - @include btn(white); + @include button.btn(white); font-size: 13px; - border: 1px solid $main-border-color; + border: 1px solid variables.$main-border-color; border-radius: 0; padding: 10px 12px; margin: 0; @@ -42,25 +46,25 @@ &.active { color: #fff !important; text-shadow: 0px 1px 0px rgba(0,0,0,0.2); - border: 1px solid $l-blue; - border-right: 1px solid darken($l-blue, 10%); - background: linear-gradient(to bottom, lighten(#2b77b9, 5%), #388ed6); + border: 1px solid variables.$l-blue; + border-right: 1px solid color.adjust(variables.$l-blue, $lightness: -10%); + background: linear-gradient(to bottom, color.adjust(#2b77b9, $lightness: 5%), #388ed6); box-shadow: 0px 2px 3px 1px rgba(0,0,0,.05); } } &:first-child { a { - border-top-left-radius: $main-border-radius; - border-bottom-left-radius: $main-border-radius; + border-top-left-radius: variables.$main-border-radius; + border-bottom-left-radius: variables.$main-border-radius; border-right: none; } } &:last-child { a { - border-top-right-radius: $main-border-radius; - border-bottom-right-radius: $main-border-radius; + border-top-right-radius: variables.$main-border-radius; + border-bottom-right-radius: variables.$main-border-radius; border-left: none; } } diff --git a/src/styles/components/_ui.scss b/src/styles/components/_ui.scss index 746bb1f38c..2908c916c4 100644 --- a/src/styles/components/_ui.scss +++ b/src/styles/components/_ui.scss @@ -1,3 +1,7 @@ +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -22,10 +26,10 @@ // Global info link .a-info-circle { - color: $l-blue; + color: variables.$l-blue; font-size: 14px; } .plus-icon-circle { - @include fa-icon($fa-var-plus, before, inline-block, 0, 0, $l-blue, 17px); + @include fa-mixins.fa-icon(variables2.$fa-var-plus, before, inline-block, 0, 0, variables.$l-blue, 17px); } \ No newline at end of file diff --git a/src/styles/components/data-filter/_add-button.scss b/src/styles/components/data-filter/_add-button.scss index 4734f8eec2..467433a0a5 100644 --- a/src/styles/components/data-filter/_add-button.scss +++ b/src/styles/components/data-filter/_add-button.scss @@ -1,3 +1,8 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables"; +@use "../../mixins/button"; +@use "base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,8 +26,8 @@ .df-add-button { box-sizing: border-box; - @include btn(white); - @include fa-icon($fa-var-plus, before, inline-block, 0 8px 0 0, 0, inherit, 11px); + @include button.btn(white); + @include fa-mixins.fa-icon(variables.$fa-var-plus, before, inline-block, 0 8px 0 0, 0, inherit, 11px); transition-property: width, padding, border-radius; transition-duration: 200ms; @@ -31,7 +36,7 @@ float: left; padding: 12px 10px; width: 92px; - height: $df-height; + height: base.$df-height; cursor: pointer; text-align: center; box-shadow: none; @@ -46,7 +51,7 @@ } .js-df-state-new-filter & { - @include fa-icon($fa-var-plus, before, inline-block, 0, 0, #c9d0d3, 11px); + @include fa-mixins.fa-icon(variables.$fa-var-plus, before, inline-block, 0, 0, #c9d0d3, 11px); width: 25px; padding: 12px 5px; diff --git a/src/styles/components/data-filter/_base.scss b/src/styles/components/data-filter/_base.scss index 318a96f295..7b54465232 100644 --- a/src/styles/components/data-filter/_base.scss +++ b/src/styles/components/data-filter/_base.scss @@ -1,3 +1,5 @@ +@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -33,5 +35,5 @@ $df-height: 42px; // ---------------------------------------- .df-container { - @include clearfix; + @include clearfix.clearfix; } \ No newline at end of file diff --git a/src/styles/components/data-filter/_clear-filters.scss b/src/styles/components/data-filter/_clear-filters.scss index e5800ede07..fb19db7bbf 100644 --- a/src/styles/components/data-filter/_clear-filters.scss +++ b/src/styles/components/data-filter/_clear-filters.scss @@ -1,3 +1,7 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables"; +@use "../../base/variables" as variables2; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -38,7 +42,7 @@ right: 8px; cursor: pointer; pointer-events: auto; - @include fa-icon($fa-var-close, before, inline-block, 0, 0, $medium-prim-color, 10px); + @include fa-mixins.fa-icon(variables.$fa-var-close, before, inline-block, 0, 0, variables2.$medium-prim-color, 10px); font-family: "Open Sans", sans-serif; color: #555; @@ -52,15 +56,15 @@ } &:hover { - @include fa-icon-color(before, $alt-red); + @include fa-mixins.fa-icon-color(before, variables2.$alt-red); } } &.disabled .df-clear-button { - @include fa-icon-color(before, $light-prim-color); + @include fa-mixins.fa-icon-color(before, variables2.$light-prim-color); &:hover { - @include fa-icon-color(before, $light-prim-color); + @include fa-mixins.fa-icon-color(before, variables2.$light-prim-color); } } diff --git a/src/styles/components/data-filter/_data-filter-config.scss b/src/styles/components/data-filter/_data-filter-config.scss index d720f2f47a..dbba669ca6 100644 --- a/src/styles/components/data-filter/_data-filter-config.scss +++ b/src/styles/components/data-filter/_data-filter-config.scss @@ -36,14 +36,14 @@ // Component Partials // ---------------------------------------- -@import "base"; -@import "label"; -@import "add-button"; -@import "input-base"; -@import "clear-filters"; -@import "filter-profiles"; -@import "select-dropdown"; -@import "select-title"; -@import "select-options"; -@import "input-button"; -@import "popout"; +@use "base"; +@use "label"; +@use "add-button"; +@use "input-base"; +@use "clear-filters"; +@use "filter-profiles"; +@use "select-dropdown"; +@use "select-title"; +@use "select-options"; +@use "input-button"; +@use "popout"; diff --git a/src/styles/components/data-filter/_filter-profiles.scss b/src/styles/components/data-filter/_filter-profiles.scss index e849c15316..7a1e0d5201 100644 --- a/src/styles/components/data-filter/_filter-profiles.scss +++ b/src/styles/components/data-filter/_filter-profiles.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -29,21 +36,21 @@ // Base styles position: absolute; top: 52px; left: 0; - z-index: $max-z; + z-index: variables.$max-z; visibility: hidden; opacity: 0; pointer-events: auto; background: #fff; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; width: $width; // Common Elements header { background: linear-gradient(#fff, #f7f7f7); - border-top-left-radius: $main-border-radius; - border-top-right-radius: $main-border-radius; - border-bottom: 1px solid $main-border-color; + border-top-left-radius: variables.$main-border-radius; + border-top-right-radius: variables.$main-border-radius; + border-bottom: 1px solid variables.$main-border-color; height: 30px; > h4 { line-height: 30px; @@ -53,14 +60,14 @@ float: right; padding-right: 5px; padding-top: 5px; - @include fa-icon($fa-var-close, before, inline-block, 0, 0, $medium-prim-color, 17px); + @include fa-mixins.fa-icon(variables2.$fa-var-close, before, inline-block, 0, 0, variables.$medium-prim-color, 17px); } } // header .footer-btn { background: linear-gradient(#fafafa, #f0f2f5); - border-top: 1px solid darken(#f0f2f5, 10%); - border-bottom-left-radius: $main-border-radius; - border-bottom-right-radius: $main-border-radius; + border-top: 1px solid color.adjust(#f0f2f5, $lightness: -10%); + border-bottom-left-radius: variables.$main-border-radius; + border-bottom-right-radius: variables.$main-border-radius; display: block; line-height: 30px; text-align: center; @@ -72,7 +79,7 @@ display: inline-block; - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; border-radius: 4px; font-weight: 600; font-size: 12px; @@ -86,7 +93,7 @@ right: 8px; cursor: pointer; pointer-events: auto; - @include fa-icon($fa-var-cogs, before, inline-block, 0, 0, $medium-prim-color, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-cogs, before, inline-block, 0, 0, variables.$medium-prim-color, 10px); font-family: "Open Sans", sans-serif; color: #555; @@ -100,15 +107,15 @@ } &:hover { - @include fa-icon-color(before, $alt-red); + @include fa-mixins.fa-icon-color(before, variables.$alt-red); } } &.disabled .df-profile-button { - @include fa-icon-color(before, $light-prim-color); + @include fa-mixins.fa-icon-color(before, variables.$light-prim-color); &:hover { - @include fa-icon-color(before, $light-prim-color); + @include fa-mixins.fa-icon-color(before, variables.$light-prim-color); } } @@ -128,11 +135,11 @@ padding: 7px 10px; .remove { - @include fa-icon($fa-var-close, before, inline-block, 0, 0, $medium-prim-color, 17px); + @include fa-mixins.fa-icon(variables2.$fa-var-close, before, inline-block, 0, 0, variables.$medium-prim-color, 17px); } .edit { - @include fa-icon($fa-var-cog, before, inline-block, 0, 0, $medium-prim-color, 17px); + @include fa-mixins.fa-icon(variables2.$fa-var-cog, before, inline-block, 0, 0, variables.$medium-prim-color, 17px); padding-left: 5px; padding-right: 5px; } @@ -142,7 +149,7 @@ font-size: inherit; text-align: start; - &.active { color: $l-blue; } + &.active { color: variables.$l-blue; } &:first-child { flex-grow: 1; } } @@ -212,20 +219,20 @@ width: 100%; float: right; padding: 5px; - @include border-bottom-radius($main-border-radius); - background: darken($body-background, 3%); - border-top: 1px solid $main-border-color; + @include border-radius.border-bottom-radius(variables.$main-border-radius); + background: color.adjust(variables.$body-background, $lightness: -3%); + border-top: 1px solid variables.$main-border-color; } .cancel { - @include btn(white); + @include button.btn(white); margin-right: 3px; float: left; height: 28px; } // cancel .save { - @include btn(green); + @include button.btn(green); text-shadow: none; float: right; height: 28px; diff --git a/src/styles/components/data-filter/_input-base.scss b/src/styles/components/data-filter/_input-base.scss index 50b8bc96d0..d14c8e1fbd 100644 --- a/src/styles/components/data-filter/_input-base.scss +++ b/src/styles/components/data-filter/_input-base.scss @@ -1,3 +1,6 @@ +@use "../../base/variables"; +@use "base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -31,11 +34,11 @@ float: left; width: 0px; - height: $df-height; + height: base.$df-height; visibility: hidden; opacity: 0; - $border: $thin-border-stroke #c9d0d3; + $border: variables.$thin-border-stroke #c9d0d3; border-top: $border; border-bottom: $border; background-color: #f7f7f7; diff --git a/src/styles/components/data-filter/_input-button.scss b/src/styles/components/data-filter/_input-button.scss index 6d93c30a87..1bbab62431 100644 --- a/src/styles/components/data-filter/_input-button.scss +++ b/src/styles/components/data-filter/_input-button.scss @@ -1,3 +1,9 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables"; +@use "../../base/variables" as variables2; +@use "../../mixins/button"; +@use "base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -22,11 +28,11 @@ .df-popout-button { box-sizing: border-box; - @include btn(white); + @include button.btn(white); user-select: none; $icon-pseudo-position: before; - @include fa-icon($fa-var-ellipsis-v, $icon-pseudo-position, inline-block, 0 8px 0 0, 0, inherit, 14px); + @include fa-mixins.fa-icon(variables.$fa-var-ellipsis-v, $icon-pseudo-position, inline-block, 0 8px 0 0, 0, inherit, 14px); transition-property: padding, visibility, opacity; transition-duration: 300ms; @@ -35,7 +41,7 @@ float: left; width: 15px; - height: $df-height; + height: base.$df-height; visibility: hidden; opacity: 0; padding: 14px 5px; @@ -46,7 +52,7 @@ border-bottom-left-radius: 0; &.df-popout-active { - box-shadow: inset 0 0 6px 2px rgba($black, 0.1); + box-shadow: inset 0 0 6px 2px rgba(variables2.$black, 0.1); } .js-df-state-new-filter & { diff --git a/src/styles/components/data-filter/_label.scss b/src/styles/components/data-filter/_label.scss index 52c0fb4770..d4897b41d8 100644 --- a/src/styles/components/data-filter/_label.scss +++ b/src/styles/components/data-filter/_label.scss @@ -1,3 +1,5 @@ +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -25,8 +27,8 @@ opacity: 0; margin-bottom: 3px; font-size: 10px; - font-weight: $weight-semibold; - color: $medium-prim-color; + font-weight: variables.$weight-semibold; + color: variables.$medium-prim-color; // Hide Behind Parent position: relative; diff --git a/src/styles/components/data-filter/_popout.scss b/src/styles/components/data-filter/_popout.scss index 2a9ce9a968..9c044d94f5 100644 --- a/src/styles/components/data-filter/_popout.scss +++ b/src/styles/components/data-filter/_popout.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; +@use "../../mixins/triangle-point"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -30,11 +37,11 @@ width: $width; // Styles - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; - background: rgba($white, 0.98); - box-shadow: 0 1px 3px rgba($black, 0.06); - @include triangle-point(top, 10px, 10px); + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; + background: rgba(variables.$white, 0.98); + box-shadow: 0 1px 3px rgba(variables.$black, 0.06); + @include triangle-point.triangle-point(top, 10px, 10px); // Type text-align: left; @@ -49,18 +56,18 @@ } &:hover { - color: $medium-prim-color; + color: variables.$medium-prim-color; } } .df-popout-header { - background: linear-gradient($white, #f7f7f7); - border-top-left-radius: $main-border-radius; - border-top-right-radius: $main-border-radius; - border-bottom: $thin-border-stroke $main-border-color; + background: linear-gradient(variables.$white, #f7f7f7); + border-top-left-radius: variables.$main-border-radius; + border-top-right-radius: variables.$main-border-radius; + border-bottom: variables.$thin-border-stroke variables.$main-border-color; height: 30px; padding: 8px 10px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; font-size: 12px; } @@ -102,7 +109,7 @@ padding: 5px 0; font-size: 12px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } .df-saved-actions { @@ -125,32 +132,32 @@ $df-saved-actions-padding: null; $df-saved-actions-font-size: 11px; .df-saved-edit { - @include fa-icon($fa-var-pencil, $df-saved-actions-pseudo-position, $df-saved-actions-position, $df-saved-actions-margin, $df-saved-actions-padding, $bright-blue, $df-saved-actions-font-size); + @include fa-mixins.fa-icon(variables2.$fa-var-pencil, $df-saved-actions-pseudo-position, $df-saved-actions-position, $df-saved-actions-margin, $df-saved-actions-padding, variables.$bright-blue, $df-saved-actions-font-size); &:hover { - @include fa-icon-color($df-saved-actions-pseudo-position, darken($bright-blue, 5%)); + @include fa-mixins.fa-icon-color($df-saved-actions-pseudo-position, color.adjust(variables.$bright-blue, $lightness: -5%)); } } .df-saved-delete { - @include fa-icon($fa-var-close, $df-saved-actions-pseudo-position, $df-saved-actions-position, 0 0 0 5px, $df-saved-actions-padding, $medium-prim-color, $df-saved-actions-font-size); + @include fa-mixins.fa-icon(variables2.$fa-var-close, $df-saved-actions-pseudo-position, $df-saved-actions-position, 0 0 0 5px, $df-saved-actions-padding, variables.$medium-prim-color, $df-saved-actions-font-size); &:hover { - @include fa-icon-color($df-saved-actions-pseudo-position, $alt-red); + @include fa-mixins.fa-icon-color($df-saved-actions-pseudo-position, variables.$alt-red); } } // Save Filters Button .df-save-button { - @include btn(white); + @include button.btn(white); box-sizing: border-box; padding: 10px; margin: 10px; margin-top: 5px; text-align: center; font-size: 11px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } // Filter Set Form @@ -175,9 +182,9 @@ $df-saved-actions-font-size: 11px; } label { - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 12px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; margin-bottom: 5px; } @@ -203,12 +210,12 @@ $df-saved-actions-font-size: 11px; } .df-save-set-button { - @include btn(brightblue); + @include button.btn(brightblue); @extend %df-save-set-button; } .df-cancel-save-set-button { - @include btn(white); + @include button.btn(white); @extend %df-save-set-button; } } \ No newline at end of file diff --git a/src/styles/components/data-filter/_select-dropdown.scss b/src/styles/components/data-filter/_select-dropdown.scss index 1184e2fd04..be4a1d4ec7 100644 --- a/src/styles/components/data-filter/_select-dropdown.scss +++ b/src/styles/components/data-filter/_select-dropdown.scss @@ -1,3 +1,8 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -41,7 +46,7 @@ $df-select-dropdown-horizontal-padding: 6px; .df-select-dropdown { box-sizing: border-box; - @include btn(white); + @include button.btn(white); appearance: none; display: inline-block; float: left; @@ -54,8 +59,8 @@ $df-select-dropdown-horizontal-padding: 6px; white-space: nowrap; text-overflow: clip; font-size: 9px; - font-weight: $weight-semibold; - color: $medium-prim-color; + font-weight: variables.$weight-semibold; + color: variables.$medium-prim-color; // DF Select Dropdown (1st State) .js-df-state-new-filter & { @@ -100,8 +105,8 @@ $df-select-dropdown-horizontal-padding: 6px; &:hover { background: linear-gradient(#fff, #f7f7f7); - border: $thin-border-stroke $main-border-color; - color: $medium-prim-color; + border: variables.$thin-border-stroke variables.$main-border-color; + color: variables.$medium-prim-color; } &:active { @@ -129,7 +134,7 @@ $df-select-dropdown-horizontal-padding: 6px; .df-delete-select-dropdown-button { box-sizing: border-box; - @include btn(white); + @include button.btn(white); display: block; float: left; width: auto; @@ -139,10 +144,10 @@ $df-select-dropdown-horizontal-padding: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; - @include fa-icon($fa-var-close, before, inline-block, 4px 0 0 0, 0, $medium-prim-color, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-close, before, inline-block, 4px 0 0 0, 0, variables.$medium-prim-color, 10px); &.disabled { - @include fa-icon-color(before, $light-prim-color); + @include fa-mixins.fa-icon-color(before, variables.$light-prim-color); } transition-property: visibility, opacity; @@ -155,6 +160,6 @@ $df-select-dropdown-horizontal-padding: 6px; } &:hover:not(.disabled) { - @include fa-icon-color(before, $alt-red); + @include fa-mixins.fa-icon-color(before, variables.$alt-red); } } diff --git a/src/styles/components/data-filter/_select-options.scss b/src/styles/components/data-filter/_select-options.scss index 33b5ea1bdc..b4a5fa9f6d 100644 --- a/src/styles/components/data-filter/_select-options.scss +++ b/src/styles/components/data-filter/_select-options.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -27,7 +30,7 @@ // Layout position: absolute; - z-index: $z-50; + z-index: variables.$z-50; top: 32px; left: 5px; min-width: 100px; @@ -37,10 +40,10 @@ text-align: left; // Styles - border: $thin-border-stroke lighten($main-border-color, 8%); - border-radius: $main-border-radius; - background: rgba($white, 0.98); - box-shadow: 0 1px 3px rgba($black, 0.06); + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: 8%); + border-radius: variables.$main-border-radius; + background: rgba(variables.$white, 0.98); + box-shadow: 0 1px 3px rgba(variables.$black, 0.06); transition-property: visibility, opacity; transition-duration: 100ms; @@ -48,9 +51,9 @@ a { display: block; - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 10px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; line-height: 11px; padding: 5px 10px; text-shadow: none; @@ -63,8 +66,8 @@ // ---------------------------------------- &:hover { - color: $white; - background: $bright-blue; + color: variables.$white; + background: variables.$bright-blue; } } } \ No newline at end of file diff --git a/src/styles/components/data-filter/_select-title.scss b/src/styles/components/data-filter/_select-title.scss index ca2d7c98c9..0b80218a21 100644 --- a/src/styles/components/data-filter/_select-title.scss +++ b/src/styles/components/data-filter/_select-title.scss @@ -1,3 +1,7 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables"; +@use "../../base/variables" as variables2; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,7 +25,7 @@ .df-select-title { - @include fa-icon($fa-var-sort, after, inline-block, 0, 0 0 0 5px, inherit, 11px); + @include fa-mixins.fa-icon(variables.$fa-var-sort, after, inline-block, 0, 0 0 0 5px, inherit, 11px); &:after { position: relative; @@ -29,10 +33,10 @@ } &.df-select-complete { - color: $bright-blue; + color: variables2.$bright-blue; &:after { - color: $light-prim-color; + color: variables2.$light-prim-color; } } diff --git a/src/styles/components/modals/_footer.scss b/src/styles/components/modals/_footer.scss index 70dded94d3..71e3f7f2e6 100644 --- a/src/styles/components/modals/_footer.scss +++ b/src/styles/components/modals/_footer.scss @@ -1,3 +1,8 @@ +@use "sass:color"; +@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../base/variables"; +@use "../../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -23,25 +28,25 @@ .modal footer { width: 100%; height: 60px; - @include border-bottom-radius($main-border-radius); - background: darken($body-background, 3%); - border-top: 1px solid $main-border-color; + @include border-radius.border-bottom-radius(variables.$main-border-radius); + background: color.adjust(variables.$body-background, $lightness: -3%); + border-top: 1px solid variables.$main-border-color; button { - @include btn(green); + @include button.btn(green); &.cancel { - @include btn(white); + @include button.btn(white); } &.danger { - @include btn(red); + @include button.btn(red); } min-width: 100px; margin: 10px 3% 0 15px; display: inline-block; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; &:first-child { float: right; diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss index 72bb60acf8..deee78a4a8 100644 --- a/src/styles/components/modals/_header.scss +++ b/src/styles/components/modals/_header.scss @@ -1,3 +1,6 @@ +@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -28,13 +31,13 @@ height: 40px; line-height: 40px; background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); - border-bottom: 1px solid $main-border-color; - @include border-top-radius($main-border-radius); + border-bottom: 1px solid variables.$main-border-color; + @include border-radius.border-top-radius(variables.$main-border-radius); padding: 0 20px; > h2 { font-weight: bold; - color: $modal-heading-color; + color: variables.$modal-heading-color; text-shadow: 0px 1px 0px #fff; font-size: 17px; } @@ -60,7 +63,7 @@ > header { margin-bottom: 0 !important; border-bottom: 0 !important; - border-radius: $main-border-radius !important; + border-radius: variables.$main-border-radius !important; &:after { transform: rotate(180deg); diff --git a/src/styles/components/modals/_important-messages.scss b/src/styles/components/modals/_important-messages.scss index 178dbbd025..b956542eca 100644 --- a/src/styles/components/modals/_important-messages.scss +++ b/src/styles/components/modals/_important-messages.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,10 +24,10 @@ .important-message { - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; background: #fff; - box-shadow: 0 0 4px $light-black-alpha; + box-shadow: 0 0 4px variables.$light-black-alpha; margin: 20px auto; &:first-child { @@ -33,13 +36,13 @@ .message-header, .message-body { - color: $grey; + color: variables.$grey; font-weight: 600; } .message-header { - border-bottom: 1px solid lighten($main-border-color, 5%); - box-shadow: 0 1px 2px $light-black-alpha; + border-bottom: 1px solid color.adjust(variables.$main-border-color, $lightness: 5%); + box-shadow: 0 1px 2px variables.$light-black-alpha; font-size: 16px; line-height: 18px; padding: 10px 10px; @@ -60,7 +63,7 @@ &.danger { .message-header, .message-body { - color: $alt-red; + color: variables.$alt-red; } .message-header { @@ -75,10 +78,10 @@ position: absolute; top: 11px; left: 10px; - z-index: $max-z; + z-index: variables.$max-z; width: $w; height: $h; - background-image: url("#{$img-path}/#{$image-name}.png"); + background-image: url("#{variables.$img-path}/#{$image-name}.png"); background-size: $w $h; } } @@ -87,7 +90,7 @@ &.info { .message-header, .message-body { - color: $l-blue; + color: variables.$l-blue; } } } diff --git a/src/styles/components/modals/_modal-alerts.scss b/src/styles/components/modals/_modal-alerts.scss index 0912ac2d7f..7d9012fc4d 100644 --- a/src/styles/components/modals/_modal-alerts.scss +++ b/src/styles/components/modals/_modal-alerts.scss @@ -1,3 +1,8 @@ +@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../../base/fontawesome/fa-variables"; +@use "../../base/variables"; +@use "../alerts"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -24,9 +29,9 @@ @mixin warning-symbol($alert-type) { p, a, h1, h2, h3, h4, h5, h6 { &:first-child:before { - content: $fa-icon-warning-sign; + content: fa-variables.$fa-icon-warning-sign; font-family: FontAwesome; - font-size: $modal-alert-fa-size; + font-size: variables.$modal-alert-fa-size; color: '$state-${$alert-type}-text'; margin-right: 5px; } @@ -34,7 +39,7 @@ } .modal-alert { - @include clearfix(); + @include clearfix.clearfix(); display: block; padding: 15px 25px; @@ -51,20 +56,20 @@ } &.info { - @include alert-variant($state-info-bg, $state-info-border, $state-info-text); + @include alerts.alert-variant(variables.$state-info-bg, variables.$state-info-border, variables.$state-info-text); } &.warning { - @include alert-variant($state-warning-bg, $state-warning-border, $state-warning-text); + @include alerts.alert-variant(variables.$state-warning-bg, variables.$state-warning-border, variables.$state-warning-text); @include warning-symbol(warning); } &.success { - @include alert-variant($state-success-bg, $state-success-border, $state-success-text); + @include alerts.alert-variant(variables.$state-success-bg, variables.$state-success-border, variables.$state-success-text); } &.danger { - @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text); + @include alerts.alert-variant(variables.$state-danger-bg, variables.$state-danger-border, variables.$state-danger-text); @include warning-symbol(danger); } diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 5676787f9d..d47eef7104 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; +@use "../../mixins/mixins-config"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -34,8 +41,8 @@ } .medium-modal { - width: $modal-width; - margin-left: -($modal-width * 0.5); + width: variables.$modal-width; + margin-left: -(variables.$modal-width * 0.5); } .large-modal { @@ -54,18 +61,18 @@ opacity: 0; display: none; transition: all .2s; - z-index: ($max-z + 2); - width: $modal-width; + z-index: (variables.$max-z + 2); + width: variables.$modal-width; height: auto; // Center box position: absolute; top: 100px; left: 50%; - margin-left: -($modal-width * 0.5); - background: $body-background; - border-radius: $main-border-radius; - box-shadow: 0 0 20px 2px rgba($black, 0.3); + margin-left: -(variables.$modal-width * 0.5); + background: variables.$body-background; + border-radius: variables.$main-border-radius; + box-shadow: 0 0 20px 2px rgba(variables.$black, 0.3); &.active { opacity: 1; @@ -79,8 +86,8 @@ position: absolute; top: 48%; font-size: 50px; - color: rgba($white, 0.7); - text-shadow: 0 0 10px rgba($black, 0.4); + color: rgba(variables.$white, 0.7); + text-shadow: 0 0 10px rgba(variables.$black, 0.4); transition: all 0.2s; &.fa-chevron-left { @@ -117,9 +124,9 @@ top: 0; left: 0; width: 100%; height: 100%; - z-index: $max-z + 1; - background-color: rgba($black, 0.2); - background-image: radial-gradient(rgba($black, 0.2), rgba($black, 0.4)); + z-index: variables.$max-z + 1; + background-color: rgba(variables.$black, 0.2); + background-image: radial-gradient(rgba(variables.$black, 0.2), rgba(variables.$black, 0.4)); } @@ -136,7 +143,7 @@ } input.search { - border-radius: $main-border-radius 0 0 $main-border-radius; + border-radius: variables.$main-border-radius 0 0 variables.$main-border-radius; border-right-width: 0; float: left; margin: 0; @@ -146,10 +153,10 @@ height: inherit; width: 46px; float: right; - @include btn(white); - @include fa-icon($fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px); + @include button.btn(white); + @include fa-mixins.fa-icon(variables2.$fa-var-times, before, block, 0, 0.45em 0.45em 0.55em 0.45em, inherit, 14px); - border-radius: 0 $main-border-radius $main-border-radius 0; + border-radius: 0 variables.$main-border-radius variables.$main-border-radius 0; &+input.search { width: calc(100% - 46px) !important; @@ -169,7 +176,7 @@ } .tab-description { - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 12px; line-height: 20px; margin-bottom: 10px; @@ -179,12 +186,12 @@ // Modal obj header header { $height: 35px; - @include accordion-header($height); + @include mixins-config.accordion-header($height); user-select: none; position: static; &.expand { - @include accordion-header($height, true); + @include mixins-config.accordion-header($height, true); } // This is used when there is data displayed in header @@ -194,7 +201,7 @@ } p { - color: $color-darkgray; + color: variables.$color-darkgray; margin-bottom: 0.3em; } } @@ -225,15 +232,15 @@ width: 100%; .obj { - width: $modal-full-col-width; + width: variables.$modal-full-col-width; > header { - width: ($modal-full-col-width); + width: (variables.$modal-full-col-width); } } .tbl-container { - width: $modal-full-col-width; + width: variables.$modal-full-col-width; .obj-container .table-series .wrapper { @@ -248,11 +255,11 @@ } header { - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; } .main-tbl { - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; @@ -281,9 +288,9 @@ .obj { box-sizing: border-box; background: #fff; - border-radius: $main-border-radius; - border: $thin-border-stroke $main-border-color; - color: $medium-prim-color; + border-radius: variables.$main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + color: variables.$medium-prim-color; &:not(:last-child) { margin-bottom: 20px; @@ -294,7 +301,7 @@ padding-left: 0; &.main-tbl.top-tbl { - border-bottom: 1px solid $main-border-color; + border-bottom: 1px solid variables.$main-border-color; border-radius: 0; } @@ -309,11 +316,11 @@ } a.external-link { - @include fa-icon($fa-var-external-link-square, before, inline-block, 4px, 0, inherit, 14px); + @include fa-mixins.fa-icon(variables2.$fa-var-external-link-square, before, inline-block, 4px, 0, inherit, 14px); float: right; &:hover { - @include fa-icon-color(before, $l-blue); + @include fa-mixins.fa-icon-color(before, variables.$l-blue); } } @@ -335,7 +342,7 @@ > p, pre { font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; line-height: 18px; margin-bottom: 15px; @@ -354,13 +361,13 @@ } h3.section-heading { - color: $dark-prim-color; + color: variables.$dark-prim-color; padding: 10px 20px 5px; - border-bottom: 1px solid $main-border-color; + border-bottom: 1px solid variables.$main-border-color; } h4 { - color: $dark-prim-color; + color: variables.$dark-prim-color; font-size: 14px; margin-bottom: 8px; @@ -378,7 +385,7 @@ > li { line-height: 23px; - border-bottom: 1px solid lighten($main-border-color, 10%); + border-bottom: 1px solid color.adjust(variables.$main-border-color, $lightness: 10%); padding: 10px 0; &:first-child { diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index 5d9902fedd..591dd9bbfa 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -1,3 +1,11 @@ +@use "sass:color"; +@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -31,7 +39,7 @@ &.comments { .comment-container { - padding: $modal-container-padding; + padding: variables.$modal-container-padding; height: 400px; overflow-y: auto; @@ -63,7 +71,7 @@ } > hr { - background: lighten($main-border-color, 10%); + background: color.adjust(variables.$main-border-color, $lightness: 10%); height: 1px; border: none; margin: 30px 0 20px; @@ -75,18 +83,18 @@ .category { font-size: 10px; - color: $medium-prim-color; + color: variables.$medium-prim-color; > strong { - color: $medium-prim-color; + color: variables.$medium-prim-color; } } .date { float: right; font-size: 10px; - color: $light-prim-color; - @include fa-icon($fa-var-clock-o, before, inline-block, 0 5px 0 0, 0, inherit, 10px); + color: variables.$light-prim-color; + @include fa-mixins.fa-icon(variables2.$fa-var-clock-o, before, inline-block, 0 5px 0 0, 0, inherit, 10px); } > p { @@ -95,7 +103,7 @@ line-height: 15px; > span { - color: $l-blue; + color: variables.$l-blue; } } @@ -106,33 +114,33 @@ font-size: 11px; font-weight: 600; cursor: pointer; - color: $l-blue; + color: variables.$l-blue; display: inline-block; line-height: inherit; padding: initial; } .delete { - color: $red; + color: variables.$red; margin-left: 10px; } .resolve { - color: $light-prim-color; + color: variables.$light-prim-color; margin-right: 10px; &.resolved { - color: $green; + color: variables.$green; } } } } .add-comment { - background: $off-white; - border-top: $thin-border-stroke #e9e9e9; - @include border-bottom-radius($main-border-radius); + background: variables.$off-white; + border-top: variables.$thin-border-stroke #e9e9e9; + @include border-radius.border-bottom-radius(variables.$main-border-radius); height: 191px; padding: 3%; display: flex; @@ -156,12 +164,12 @@ button.save { min-width: 100px; - @include btn(green); + @include button.btn(green); } button.cancel { min-width: 100px; - @include btn(red); + @include button.btn(red); } @@ -185,11 +193,11 @@ text-align: center; padding: 10px 0 0; height: 42px; - background: darken($body-background, 3%); - border-bottom: 1px solid $main-border-color; + background: color.adjust(variables.$body-background, $lightness: -3%); + border-bottom: 1px solid variables.$main-border-color; > a { - @include btn(green); + @include button.btn(green); margin-left: 10px; } @@ -203,9 +211,9 @@ padding: 5px 7px; margin: 5px 5px 0 0; font-size: 12px; - background: $l-blue; + background: variables.$l-blue; color: #fff; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; > a { margin-left: 5px; @@ -240,7 +248,7 @@ } &:last-child { - color: $dark-prim-color; + color: variables.$dark-prim-color; } } @@ -284,13 +292,13 @@ // ---------------------------------------- .details-link { - color: $l-blue; + color: variables.$l-blue; position: relative; white-space: nowrap; - @include fa-icon($fa-var-chevron-right, after, inline-block, 0, 0, inherit, 8px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-right, after, inline-block, 0, 0, inherit, 8px); &:hover { - color: darken($l-blue, 20%); + color: color.adjust(variables.$l-blue, $lightness: -20%); } &:after { @@ -306,7 +314,7 @@ .remove-btn-container { height: 50px; - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; } .red-btn { @@ -333,16 +341,16 @@ // ---------------------------------------- .file-upload { - @include clearfix(); + @include clearfix.clearfix(); } .upload-file-info { - @include clearfix(); - color: $medium-prim-color; + @include clearfix.clearfix(); + color: variables.$medium-prim-color; font-size: 10px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; background: #fff; - border: 1px solid $main-border-color; + border: 1px solid variables.$main-border-color; border-radius: 10px; height: 19px; display: inline-block; @@ -350,7 +358,7 @@ // Filename label p { - color: $dark-prim-color; + color: variables.$dark-prim-color; display: inline-block; padding: 4px 10px; float: left; @@ -375,17 +383,17 @@ margin: auto;; height: 100%; min-width: 0; - color: $medium-prim-color; + color: variables.$medium-prim-color; border-radius: 0; // Styles - border-left: 1px solid $main-border-color; + border-left: 1px solid variables.$main-border-color; padding: 0 6px; padding-right: 8px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; - @include fa-icon($fa-var-close, after, inline-block, 0, 0, $main-border-color, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-close, after, inline-block, 0, 0, variables.$main-border-color, 10px); &::after { position: relative; @@ -393,17 +401,17 @@ } &:hover { - @include fa-icon-color(after, $medium-prim-color); + @include fa-mixins.fa-icon-color(after, variables.$medium-prim-color); } } } .progress { - border: 1px solid darken($bright-blue, 5%); + border: 1px solid color.adjust(variables.$bright-blue, $lightness: -5%); } .progress-bar { - background: linear-gradient(to bottom, lighten($bright-blue, 5%), $bright-blue); + background: linear-gradient(to bottom, color.adjust(variables.$bright-blue, $lightness: 5%), variables.$bright-blue); } button { @@ -418,7 +426,7 @@ } .upload-button { - @include btn(brightblue); + @include button.btn(brightblue); } @@ -446,17 +454,17 @@ h4 { font-size: 18px; - font-weight: $weight-regular; + font-weight: variables.$weight-regular; line-height: 24px; - color: $dark-prim-color; + color: variables.$dark-prim-color; margin-bottom: 5px; } } .list-row { - @include clearfix(); + @include clearfix.clearfix(); padding: 15px 0; - border-bottom: 1px solid $main-border-color; + border-bottom: 1px solid variables.$main-border-color; &:first-child { padding-top: 0; @@ -473,7 +481,7 @@ } .list-sub-row { - @include clearfix(); + @include clearfix.clearfix(); padding: 5px 0; &:last-child { @@ -504,7 +512,7 @@ // ---------------------------------------- .video-container { - @include clearfix(); + @include clearfix.clearfix(); position: relative; .video-wrapper { @@ -512,14 +520,14 @@ width: 500px; height: auto; padding: 5px; - border: 1px solid $main-border-color; - border-radius: $main-border-radius; + border: 1px solid variables.$main-border-color; + border-radius: variables.$main-border-radius; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } .video-overlay { position: absolute; - z-index: $z-60; + z-index: variables.$z-60; width: 500px; height: 100%; max-width: calc(100% - 10px); @@ -553,7 +561,7 @@ .watermark-image { position: absolute; - z-index: $z-60; + z-index: variables.$z-60; img { max-width: 50px; @@ -590,20 +598,20 @@ .position-selection { position: relative; padding: 5px; - border: 1px solid $main-border-color; - border-radius: $main-border-radius; + border: 1px solid variables.$main-border-color; + border-radius: variables.$main-border-radius; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); background: #fff; min-height: 202px; } .position-button { - @include btn(white); + @include button.btn(white); position: absolute; min-width: 100px; &.active { - @include btn(brightblue); + @include button.btn(brightblue); text-shadow: none !important; position: absolute; } @@ -631,11 +639,11 @@ .overlay-meta { padding: 40px 20px; - color: rgba($white, 0.98); - text-shadow: 0 1px 2px rgba($black, 0.2); + color: rgba(variables.$white, 0.98); + text-shadow: 0 1px 2px rgba(variables.$black, 0.2); font-size: 18px; line-height: 22px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; text-align: center; max-height: calc(100% - 0px); @@ -659,42 +667,42 @@ h1 { font-size: 30px; line-height: 36px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } h2 { font-size: 28px; line-height: 34px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } h3 { font-size: 26px; line-height: 32px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } h4 { font-size: 24px; line-height: 30px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } h5 { font-size: 22px; line-height: 28px; - font-weight: $weight-regular; + font-weight: variables.$weight-regular; } h6 { font-size: 20px; line-height: 26px; - font-weight: $weight-regular; + font-weight: variables.$weight-regular; } // for legal or other small print &.paragraph-meta { - background: linear-gradient(to bottom, rgba($black, 0.8), rgba($black, 0.2)); + background: linear-gradient(to bottom, rgba(variables.$black, 0.8), rgba(variables.$black, 0.2)); height: 100%; font-size: 12px; line-height: 18px; @@ -714,8 +722,8 @@ font-size: 14px; .field-title { - font-weight: $weight-semibold; - color: $dark-prim-color; + font-weight: variables.$weight-semibold; + color: variables.$dark-prim-color; } } diff --git a/src/styles/components/modals/_modals-config.scss b/src/styles/components/modals/_modals-config.scss index 7334407ed3..936e535596 100644 --- a/src/styles/components/modals/_modals-config.scss +++ b/src/styles/components/modals/_modals-config.scss @@ -21,13 +21,13 @@ // Base Elements -@import "_modal-base"; -@import "_header"; -@import "_nav"; -@import "_footer"; -@import "_wizard"; +@use "_modal-base"; +@use "_header"; +@use "_nav"; +@use "_footer"; +@use "_wizard"; // Components -@import "_modal-components"; -@import "_important-messages"; -@import "_modal-alerts"; +@use "_modal-components"; +@use "_important-messages"; +@use "_modal-alerts"; diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss index 84fd66462c..dba4827ad7 100644 --- a/src/styles/components/modals/_nav.scss +++ b/src/styles/components/modals/_nav.scss @@ -1,3 +1,6 @@ +@use "../../base/variables"; +@use "../../mixins/triangle-point"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -26,8 +29,8 @@ $line-height: 20px; width: 100%; height: $height; - background: $modal-nav-bg-color; - border-bottom: 1px solid $modal-nav-border-color; + background: variables.$modal-nav-bg-color; + border-bottom: 1px solid variables.$modal-nav-border-color; > button { $width: 100px; @@ -40,7 +43,7 @@ box-sizing: border-box; height : $height; line-height: $line-height; - color: $modal-nav-link-color; + color: variables.$modal-nav-link-color; font-size: 13px; &.wider { @@ -53,17 +56,17 @@ } &:hover { - color: $modal-nav-link-active-color; + color: variables.$modal-nav-link-active-color; } &.active { - color: $modal-nav-link-active-color; + color: variables.$modal-nav-link-active-color; font-weight: 600; $size: 8px; $position-from-right: ($width*0.5) - $size; - @include triangle-point(bottom, $size, $size, $position-from-right, $off-white, 1px, $modal-nav-border-color, -8px); + @include triangle-point.triangle-point(bottom, $size, $size, $position-from-right, variables.$off-white, 1px, variables.$modal-nav-border-color, -8px); } // Notifiction diff --git a/src/styles/extensions/_extensions-config.scss b/src/styles/extensions/_extensions-config.scss index aaeddbcdc0..00ee97a884 100644 --- a/src/styles/extensions/_extensions-config.scss +++ b/src/styles/extensions/_extensions-config.scss @@ -21,9 +21,9 @@ // Components -@import "components/tables"; -@import "components/drag-and-drop"; +@use "components/tables"; +@use "components/drag-and-drop"; // Views -@import "views/modals/edit-table-view"; -@import "views/modals/registration"; \ No newline at end of file +@use "views/modals/edit-table-view"; +@use "views/modals/registration"; \ No newline at end of file diff --git a/src/styles/extensions/components/_drag-and-drop.scss b/src/styles/extensions/components/_drag-and-drop.scss index afe81bc045..374fab4b8d 100644 --- a/src/styles/extensions/components/_drag-and-drop.scss +++ b/src/styles/extensions/components/_drag-and-drop.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -28,11 +31,11 @@ user-select: none; height: 35px; width: 100%; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; cursor: move; - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; background: linear-gradient(to bottom, #fff, #f3f5f6); - color: darken(#8c939b, 10%); + color: color.adjust(#8c939b, $lightness: -10%); font-weight: 600; text-shadow: 0px 1px 0px #fff; font-size: 13px; @@ -47,14 +50,14 @@ } &:hover { - background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%)); + background: linear-gradient(to bottom, #fff, color.adjust(#f3f5f6, $lightness: -2%)); } &:active, &.being-dragged { - background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%)); + background: linear-gradient(to bottom, color.adjust(#fff, $lightness: -2%), color.adjust(#f3f5f6, $lightness: -3%)); cursor: move; - border: $thin-border-stroke darken($main-border-color, 5%); + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -5%); box-shadow: 0 0 4px rgba(0,0,0,0.1); } @@ -75,7 +78,7 @@ position: absolute; top: 12px; left: 10px; - background-image: url("#{$img-path}/grip.png"); + background-image: url("#{variables.$img-path}/grip.png"); background-size: 13px 14px; } @@ -90,12 +93,12 @@ padding: 0; &.add { - background-image: url("#{$img-path}/plus-icon.png"); + background-image: url("#{variables.$img-path}/plus-icon.png"); background-size: 17px 17px; } &.remove { - background-image: url("#{$img-path}/remove-icon.png"); + background-image: url("#{variables.$img-path}/remove-icon.png"); background-size: 17px 17px; } } diff --git a/src/styles/extensions/components/_tables.scss b/src/styles/extensions/components/_tables.scss index 849a63ae5d..f4f8655ef0 100644 --- a/src/styles/extensions/components/_tables.scss +++ b/src/styles/extensions/components/_tables.scss @@ -1,3 +1,10 @@ +@use "sass:color"; +@use "../../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; +@use "../../mixins/button"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -38,21 +45,21 @@ } .action-bar { - @include clearfix(); - border: 1px solid $main-border-color; + @include clearfix.clearfix(); + border: 1px solid variables.$main-border-color; border-bottom: none; - border-top-left-radius: $main-border-radius; - border-top-right-radius: $main-border-radius; + border-top-left-radius: variables.$main-border-radius; + border-top-right-radius: variables.$main-border-radius; background: linear-gradient(to bottom, #fff, #f7f7f7); $action-icon-margin: 0 4px 0 0; .table-edit-action { - @include fa-icon($fa-var-pencil, before, inline-block, $action-icon-margin); + @include fa-mixins.fa-icon(variables2.$fa-var-pencil, before, inline-block, $action-icon-margin); } .table-export-action { - @include fa-icon($fa-var-external-link, before, inline-block, $action-icon-margin); + @include fa-mixins.fa-icon(variables2.$fa-var-external-link, before, inline-block, $action-icon-margin); } ul { @@ -77,10 +84,10 @@ $highlight-blue: #1d5888; color: $highlight-blue; - text-shadow: 0 1px 0 rgba($white, 0.75); + text-shadow: 0 1px 0 rgba(variables.$white, 0.75); &:hover { - color: lighten($highlight-blue, 10%); + color: color.adjust($highlight-blue, $lightness: 10%); } } } @@ -96,10 +103,10 @@ user-select: none; width: 25px; height: 22px; - @include btn(white); + @include button.btn(white); box-shadow: none; - @include fa-icon($fa-var-ellipsis-v, before, inline-block); + @include fa-mixins.fa-icon(variables2.$fa-var-ellipsis-v, before, inline-block); &:before { position: relative; top: -13px; @@ -116,14 +123,14 @@ visibility: hidden; opacity: 0; position: absolute; - z-index: $max-z + 10; + z-index: variables.$max-z + 10; min-width: $width; top: $vertical-position; left: (-($width)) - (3px + $offset); padding: 4px 0; - background: $body-background; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + background: variables.$body-background; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; transition: visibility 200ms, opacity 200ms; &:before, @@ -158,18 +165,18 @@ font-weight: 600; display: block; line-height: 16px; - text-shadow: 0 1px 0 $white; + text-shadow: 0 1px 0 variables.$white; padding: 8px 15px; } &:first-child a { - border-top-left-radius: $main-border-radius; - border-top-right-radius: $main-border-radius; + border-top-left-radius: variables.$main-border-radius; + border-top-right-radius: variables.$main-border-radius; } &:last-child a { - border-bottom-left-radius: $main-border-radius; - border-bottom-right-radius: $main-border-radius; + border-bottom-left-radius: variables.$main-border-radius; + border-bottom-right-radius: variables.$main-border-radius; } } } diff --git a/src/styles/extensions/views/modals/_edit-table-view.scss b/src/styles/extensions/views/modals/_edit-table-view.scss index bebc0c25ec..d71d78a3a5 100644 --- a/src/styles/extensions/views/modals/_edit-table-view.scss +++ b/src/styles/extensions/views/modals/_edit-table-view.scss @@ -1,3 +1,5 @@ +@use "../../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -30,7 +32,7 @@ .tab-description { padding: 10px 0; - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 12px; line-height: 20px; width: 100%; diff --git a/src/styles/extensions/views/modals/_registration.scss b/src/styles/extensions/views/modals/_registration.scss index 99de606c13..d103c61376 100644 --- a/src/styles/extensions/views/modals/_registration.scss +++ b/src/styles/extensions/views/modals/_registration.scss @@ -1,3 +1,5 @@ +@use "../../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -27,7 +29,7 @@ } .modal-content { - background-color: $primary-color-white; + background-color: variables.$primary-color-white; //background-color: $white; .row { margin: 6px 0; @@ -35,11 +37,11 @@ fieldset { margin: 0px 0px 5px 0px; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; legend { font-weight: bold; - color: $medium-prim-color; + color: variables.$medium-prim-color; padding: 0px 3px; } padding: 0px 20px; @@ -48,19 +50,19 @@ hr { border: none; height: 1px; - color: $main-border-color; - background-color: $main-border-color; + color: variables.$main-border-color; + background-color: variables.$main-border-color; margin: 2px 0px; } p { - color: $dark-prim-color; + color: variables.$dark-prim-color; font-size: 15px; line-height: 1.25; } b { - color: $dark-prim-color; + color: variables.$dark-prim-color; font-weight: 700; } @@ -70,7 +72,7 @@ margin-bottom: 0.3rem; select { - height: $input-height; + height: variables.$input-height; padding-left: 17px; } select:-moz-focusring { @@ -145,15 +147,15 @@ } .scrollbox { h1 { - color: $dark-prim-color; + color: variables.$dark-prim-color; font-size: 18px; font-weight: 600; margin-bottom: 20px; margin-top: 10px; } - background-color: $white; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + background-color: variables.$white; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; max-height: 350px; padding: 10px; overflow: auto; @@ -164,7 +166,7 @@ .registration-header { padding: 10px 0; padding-top: 0; - color: $medium-prim-color; + color: variables.$medium-prim-color; font-size: 12px; line-height: 20px; width: 100%; @@ -172,7 +174,7 @@ h2 { font-size: 31px; - color: $dark-prim-color; + color: variables.$dark-prim-color; overflow: visible; } @@ -193,7 +195,7 @@ .col { width: 48.72%; h3 { - color: $dark-prim-color; + color: variables.$dark-prim-color; font-size: 18px; font-weight: 600; } @@ -227,7 +229,7 @@ .skip-registration { float: none; height: 100%; - color: $light-prim-color; + color: variables.$light-prim-color; font-size: small; } .skip-registration-text { diff --git a/src/styles/main.scss b/src/styles/main.scss index 083aaa90c8..4b5bbc005f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -26,25 +26,32 @@ $disable-warnings: true !default; // disables deprecation warnings // Imports -@import "../../node_modules/bourbon/core/bourbon"; +@use "sass:meta"; +@use "../../node_modules/bourbon/core/bourbon"; // Foundation // ---------------------------------------- // Base -@import "base/base-config"; +@use "base/base-config"; // Mixins -@import "mixins/_mixins-config"; +@use "mixins/_mixins-config"; // Components -@import "components/components-config"; +@use "components/components-config"; // Views -@import "views/views-config"; +@use "views/views-config"; // Extensions -@import "extensions/extensions-config"; +@use "extensions/extensions-config"; +@use "../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "base/fontawesome/fa-mixins"; +@use "base/fontawesome/variables" as variables2; +@use "base/variables"; +@use "components/alerts"; +@use "mixins/button"; // Template Files @@ -84,7 +91,7 @@ $disable-warnings: true !default; // disables deprecation warnings } } -@import "vendor/chosen"; +@include meta.load-css("vendor/chosen"); .filters-container { display: flex; @@ -186,7 +193,7 @@ a.disabled, button.disabled, div.disabled { padding: 0px 5px; margin: 1px 5px 1px 0; font-size: 11px; - background: $l-blue; + background: variables.$l-blue; color: #fff; border-radius: 4px; @@ -279,11 +286,11 @@ textarea.editable { } button.red { - @include btn(red); + @include button.btn(red); } button.green { - @include btn(green-dark-bg); + @include button.btn(green-dark-bg); } div[data-modal-tab-content="metadata"], div[data-modal-tab-content="extended-metadata"] { @@ -332,7 +339,7 @@ div[data-modal-tab-content="metadata"], div[data-modal-tab-content="extended-met color: #919FA5; } button.cancel { - @include btn(grey); + @include button.btn(grey); height: 40px; } button.save{ @@ -423,7 +430,7 @@ div.table-filter { } i { - color: $global-text-color; + color: variables.$global-text-color; cursor: pointer; &.clear { @@ -487,7 +494,7 @@ input.disabled, select.disabled { // Notification alias error to danger .alert { &.error { - @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text); + @include alerts.alert-variant(variables.$state-danger-bg, variables.$state-danger-border, variables.$state-danger-text); } & .autonomous { padding-right: 20px; /* fixes a design bug */ @@ -525,12 +532,12 @@ main.main-view { &.prev { //override right margin with 0 - @include fa-icon($fa-var-chevron-left, before, inline-block, 0 0 0 0, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-left, before, inline-block, 0 0 0 0, 0, inherit, 10px); } &.next { //override left margin with 0 - @include fa-icon($fa-var-chevron-right, after, inline-block, 0 0 0 0, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-right, after, inline-block, 0 0 0 0, 0, inherit, 10px); } .active { @@ -568,7 +575,7 @@ table.main-tbl { td { .fa-check { float: right; - color: $green; + color: variables.$green; margin-top: 3px; font-size: 18px; opacity: 0; @@ -597,15 +604,15 @@ table.main-tbl { } tr.error { - background: $state-warning-bg !important; + background: variables.$state-warning-bg !important; } tr.info { - background: $state-info-bg !important; + background: variables.$state-info-bg !important; } .video-player { - @include clearfix(); + @include clearfix.clearfix(); width: 100%; margin: 0 auto; background: #1e1e1e; diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index f3d3b28de8..0430def95a 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -21,34 +24,34 @@ // Button mixin @mixin btn($color) { - font-family: $font-stack; + font-family: variables.$font-stack; text-align: center; - border-radius: $main-border-radius; + border-radius: variables.$main-border-radius; color: #fff; padding: 5px 10px; position: relative; @if $color == green-dark-bg { - box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient($primary-color-green, $primary-color-green-dark-1); + background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); - border: $thin-border-stroke $dark-bg-border-color; + border: variables.$thin-border-stroke variables.$dark-bg-border-color; &:hover { cursor: pointer; - background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); + background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); } &:focus { cursor: pointer; - background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 5%)); + background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -5%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px $primary-color-green-dark-2; - background-color: $primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; + background-color: variables.$primary-color-green-dark-1 !important; } } @@ -57,45 +60,45 @@ background: linear-gradient(#3a5e7e, #2c9966); - border: $thin-border-stroke $dark-bg-border-color; + border: variables.$thin-border-stroke variables.$dark-bg-border-color; &:hover { cursor: pointer; - background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); + background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(lighten(#3a5e7e, 5%), darken(#2c9966, 10%)); + background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px darken(#2c9966, 3%); + box-shadow: inset 0px 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); } } @else if $color == green { - box-shadow: inset 0px 1px 0px 0px $primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient($primary-color-green, $primary-color-green-dark-1); + background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); - border: $thin-border-stroke $primary-color-green-dark-3; + border: variables.$thin-border-stroke variables.$primary-color-green-dark-3; &:hover { cursor: pointer; - background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); + background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient($primary-color-green-light-1, darken($primary-color-green-dark-2, 10%)); + background: linear-gradient(variables.$primary-color-green-light-1, color.adjust(variables.$primary-color-green-dark-2, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px $primary-color-green-dark-2; - background-color: $primary-color-green-dark-1 !important; + box-shadow: inset 0px 3px 10px 1px variables.$primary-color-green-dark-2; + background-color: variables.$primary-color-green-dark-1 !important; } } @@ -104,117 +107,117 @@ background: linear-gradient(#3a5e7e, #2c9966); - border: $thin-border-stroke $dark-bg-border-color; + border: variables.$thin-border-stroke variables.$dark-bg-border-color; &:hover { cursor: pointer; - background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); + background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(darken(#3a5e7e, 1%), darken(#2c9966, 10%)); + background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0 3px 10px 1px darken(#2c9966, 3%); + box-shadow: inset 0 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); } } @else if $color == lightblue { - box-shadow: inset 0px 1px 0px 0px lighten(#388ed6, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px color.adjust(#388ed6, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); background: linear-gradient(#388ed6, #2b77b9); - border: $thin-border-stroke darken(#2b77b9, 5%); + border: variables.$thin-border-stroke color.adjust(#2b77b9, $lightness: -5%); &:hover { cursor: pointer; - background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); + background: linear-gradient(color.adjust(#388ed6, $lightness: 10%), color.adjust(#2b77b9, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(lighten(#388ed6, 10%), darken(#2b77b9, 10%)); + background: linear-gradient(color.adjust(#388ed6, $lightness: 10%), color.adjust(#2b77b9, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px darken(#2b77b9, 5%); + box-shadow: inset 0px 3px 10px 1px color.adjust(#2b77b9, $lightness: -5%); } } @else if $color == brightblue { - box-shadow: inset 0px 1px 0px 0px lighten(#55cef2, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px color.adjust(#55cef2, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); background: linear-gradient(#55cef2, #4da1f7); - border: $thin-border-stroke darken(#4da1f7, 10%); + border: variables.$thin-border-stroke color.adjust(#4da1f7, $lightness: -10%); &:hover { cursor: pointer; - background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); + background: linear-gradient(color.adjust(#55cef2, $lightness: 5%), color.adjust(#4da1f7, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(lighten(#55cef2, 5%), darken(#4da1f7, 10%)); + background: linear-gradient(color.adjust(#55cef2, $lightness: 5%), color.adjust(#4da1f7, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px darken(#4da1f7, 5%); + box-shadow: inset 0px 3px 10px 1px color.adjust(#4da1f7, $lightness: -5%); } } @else if $color == red { - box-shadow: inset 0px 1px 0px 0px lighten($alt-red, 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$alt-red, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient(lighten($alt-red, 5%), darken($alt-red, 5%)); + background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 5%), color.adjust(variables.$alt-red, $lightness: -5%)); - border: $thin-border-stroke darken($alt-red, 20%); + border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -20%); &:hover { cursor: pointer; - border: $thin-border-stroke darken($alt-red, 30%); - background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); + border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); + background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); } &:focus { cursor: pointer; - border: $thin-border-stroke darken($alt-red, 30%); - background: linear-gradient(lighten($alt-red, 10%), darken($alt-red, 10%)); + border: variables.$thin-border-stroke color.adjust(variables.$alt-red, $lightness: -30%); + background: linear-gradient(color.adjust(variables.$alt-red, $lightness: 10%), color.adjust(variables.$alt-red, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px darken($alt-red, 5%); + box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$alt-red, $lightness: -5%); } } @else if $color == white { background: linear-gradient(#fff, #f7f7f7); - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); - color: $medium-prim-color; + color: variables.$medium-prim-color; text-shadow: 0px 1px 0px #fff; &:hover { cursor: pointer; - border: $thin-border-stroke darken($main-border-color, 2%); - background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); - color: $medium-prim-color; + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + background: linear-gradient(color.adjust(#fff, $lightness: -4%), color.adjust(#f7f7f7, $lightness: -10%)); + color: variables.$medium-prim-color; } &:focus { cursor: pointer; - border: $thin-border-stroke darken($main-border-color, 2%); - background: linear-gradient(darken(#fff, 4%), darken(#f7f7f7, 10%)); - color: $medium-prim-color; + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + background: linear-gradient(color.adjust(#fff, $lightness: -4%), color.adjust(#f7f7f7, $lightness: -10%)); + color: variables.$medium-prim-color; } &:active { @@ -232,11 +235,11 @@ // Standard button styles button { display: inline-block; - height: $btn-height; - border-radius: $main-border-radius; + height: variables.$btn-height; + border-radius: variables.$main-border-radius; color: #fff; font-size: 12px; - font-weight: $weight-semibold; + font-weight: variables.$weight-semibold; } // Need to be added for moving from anchor to button tags diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss index a6eb8a4b7f..4e5efc10cd 100644 --- a/src/styles/mixins/_mixins-config.scss +++ b/src/styles/mixins/_mixins-config.scss @@ -20,32 +20,23 @@ */ -@import "button"; -@import "triangle-point"; +@use "sass:color"; +@use "button"; +@use "triangle-point"; +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; // Temporary Inline Files -// Font Smoothing -@mixin font-smoothing($value: on) { - - @if $value == on { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - @if $value == off { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - } -} - // Build icons mixin @mixin build-icon($top, $left, $image, $width, $height) { top: $top; left: $left; width: $width; height: $height; - background-image: url("#{$img-path}/#{$image}.png"); + background-image: url("#{variables.$img-path}/#{$image}.png"); background-size: $width $height; } @@ -65,27 +56,27 @@ height: $height; line-height: $height; background: linear-gradient(to bottom, #fff, #f3f5f6); - border-bottom: 1px solid $main-border-color; - @include border-top-radius($main-border-radius); + border-bottom: 1px solid variables.$main-border-color; + @include border-radius.border-top-radius(variables.$main-border-radius); margin: 0; width: 100%; padding-left: 10px; padding-right: 10px; - color: darken(#8c939b, 10%); + color: color.adjust(#8c939b, $lightness: -10%); font-weight: 600; - text-shadow: 0 1px 0 $white; + text-shadow: 0 1px 0 variables.$white; font-size: 13px; @if $expand == true { cursor: pointer; - @include fa-icon($fa-var-chevron-down, after, inline-block, 10px 0); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-down, after, inline-block, 10px 0); &:hover { - background: linear-gradient(to bottom, #fff, darken(#f3f5f6, 2%)); + background: linear-gradient(to bottom, #fff, color.adjust(#f3f5f6, $lightness: -2%)); } &:active { - background: linear-gradient(to bottom, darken(#fff, 2%), darken(#f3f5f6, 3%)); + background: linear-gradient(to bottom, color.adjust(#fff, $lightness: -2%), color.adjust(#f3f5f6, $lightness: -3%)); } &:after { @@ -100,19 +91,19 @@ position: absolute; top: 52px; left: -($width * 0.5 - 20); - z-index: $max-z - 9; + z-index: variables.$max-z - 9; visibility: hidden; opacity: 0; transition: all 200ms; - background: $white; - border: $thin-border-stroke $main-border-color; - border-radius: $main-border-radius; + background: variables.$white; + border: variables.$thin-border-stroke variables.$main-border-color; + border-radius: variables.$main-border-radius; width: $width; header { - background: linear-gradient($white, #f7f7f7); - @include border-top-radius($main-border-radius); - border-bottom: $thin-border-stroke $main-border-color; + background: linear-gradient(variables.$white, #f7f7f7); + @include border-radius.border-top-radius(variables.$main-border-radius); + border-bottom: variables.$thin-border-stroke variables.$main-border-color; height: 30px; > h4 { @@ -122,9 +113,9 @@ } .footer-btn { - background: linear-gradient($off-white, #f0f2f5); - border-top: $thin-border-stroke darken(#f0f2f5, 10%); - @include border-bottom-radius($main-border-radius); + background: linear-gradient(variables.$off-white, #f0f2f5); + border-top: variables.$thin-border-stroke color.adjust(#f0f2f5, $lightness: -10%); + @include border-radius.border-bottom-radius(variables.$main-border-radius); display: block; line-height: 30px; text-align: center; diff --git a/src/styles/mixins/_triangle-point.scss b/src/styles/mixins/_triangle-point.scss index 77ef130a48..97ddceb310 100644 --- a/src/styles/mixins/_triangle-point.scss +++ b/src/styles/mixins/_triangle-point.scss @@ -1,3 +1,6 @@ +@use "sass:color"; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -20,7 +23,7 @@ */ -@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: $white, $border-stroke: 1px, $border-color: darken($main-border-color, 5%), $position-from-origin: 1) { +@mixin triangle-point($position, $width, $height, $position-from-right: 10px, $background-color: variables.$white, $border-stroke: 1px, $border-color: color.adjust(variables.$main-border-color, $lightness: -5%), $position-from-origin: 1) { @if $position == top { @@ -43,7 +46,7 @@ &:before { top: - (($height + $position-from-origin) - $border-stroke); border-color: transparent transparent $background-color transparent; - z-index: $z-100; + z-index: variables.$z-100; } } @@ -68,7 +71,7 @@ &:before { bottom: - (($height + $position-from-origin) + $border-stroke); border-color: transparent transparent $background-color transparent; - z-index: $z-100; + z-index: variables.$z-100; } } } \ No newline at end of file diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss index 77bca74083..da07e11594 100644 --- a/src/styles/views/_core.scss +++ b/src/styles/views/_core.scss @@ -1,3 +1,9 @@ +@use "sass:color"; +@use "../../../node_modules/bourbon/core/bourbon/library/clearfix"; +@use "../base/fontawesome/fa-mixins"; +@use "../base/fontawesome/variables" as variables2; +@use "../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -24,7 +30,7 @@ // ---------------------------------------- body { - min-width: $app-min-width; + min-width: variables.$app-min-width; } .page-title { @@ -39,7 +45,7 @@ body { h4 { font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; } } @@ -48,12 +54,12 @@ body { box-sizing: border-box; // Open state adds 110px to $side-margin - margin-left: $side-margin; - padding: 30px $side-margin 60px 0; + margin-left: variables.$side-margin; + padding: 30px variables.$side-margin 60px 0; position: relative; &.has-alert { - padding: 10px $side-margin 60px 0; + padding: 10px variables.$side-margin 60px 0; } .title { @@ -68,7 +74,7 @@ body { h4 { font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; } } @@ -87,29 +93,29 @@ body { > h4 { font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; } // ## (End) .filters-container { - @include clearfix(); + @include clearfix.clearfix(); float: right; position: relative; // Refactor if ">" selector is not there the filters break > span { - color: $light-prim-color; + color: variables.$light-prim-color; display: inline-block; margin-right: 20px; } strong { - color: $medium-prim-color; + color: variables.$medium-prim-color; } .fa-info-circle { - color: $l-blue; + color: variables.$l-blue; cursor: pointer; } @@ -124,7 +130,7 @@ body { .search { margin-right: 10px; - width: $small-input-width; + width: variables.$small-input-width; &:last-child { margin-right: 0 !important; @@ -144,27 +150,27 @@ body { display: inline-block; padding: 7px 10px; margin-right: 4px; - border-radius: $main-border-radius - 1; - box-shadow: inset 0 1px 0 rgba($white, 0.8); + border-radius: variables.$main-border-radius - 1; + box-shadow: inset 0 1px 0 rgba(variables.$white, 0.8); font-size: 12px; font-weight: 600; text-decoration: none; color: #717171; - text-shadow: 0 1px 0 rgba($white, 1); - border: $thin-border-stroke $main-border-color; + text-shadow: 0 1px 0 rgba(variables.$white, 1); + border: variables.$thin-border-stroke variables.$main-border-color; background: linear-gradient(to bottom, #f8f8f8, #e9e9e9); // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(#fff, #f7f7f7); - border: $thin-border-stroke $main-border-color; + border: variables.$thin-border-stroke variables.$main-border-color; box-shadow: inset 0px 1px 0px 0px #fff, 0px 1px 2px rgba(0,0,0,.05); - color: $medium-prim-color; + color: variables.$medium-prim-color; text-shadow: 0px 1px 0px #fff; &:hover:not(.active) { - border: $thin-border-stroke darken($main-border-color, 2%); - background: linear-gradient(darken(#fff, 1%), darken(#f7f7f7, 1%)); - color: $medium-prim-color; + border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); + background: linear-gradient(color.adjust(#fff, $lightness: -1%), color.adjust(#f7f7f7, $lightness: -1%)); + color: variables.$medium-prim-color; } &:active { @@ -176,11 +182,11 @@ body { } &.prev { - @include fa-icon($fa-var-chevron-left, before, inline-block, 0 5px 0 0, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-left, before, inline-block, 0 5px 0 0, 0, inherit, 10px); } &.next { - @include fa-icon($fa-var-chevron-right, after, inline-block, 0 0 0 5px, 0, inherit, 10px); + @include fa-mixins.fa-icon(variables2.$fa-var-chevron-right, after, inline-block, 0 0 0 5px, 0, inherit, 10px); } } @@ -190,9 +196,9 @@ body { margin-right: 4px; border: none; background: #616161; - box-shadow: inset 0 0 8px rgba($black, 0.5); + box-shadow: inset 0 0 8px rgba(variables.$black, 0.5); color: #f0f0f0; - text-shadow: 0 0 3px rgba($black, 0.5); + text-shadow: 0 0 3px rgba(variables.$black, 0.5); } } diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index fdd773ac1b..3fe54ae34b 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -1,11 +1,14 @@ +@use "../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../base/variables"; + .statistics header { box-sizing: border-box; width: 100%; height: 40px; line-height: 40px; background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); - border-bottom: 1px solid $main-border-color; - @include border-top-radius($main-border-radius); + border-bottom: 1px solid variables.$main-border-color; + @include border-radius.border-top-radius(variables.$main-border-radius); padding: 0 20px; } @@ -18,9 +21,9 @@ height: 100%; box-sizing: border-box; background: #fff; - border-radius: $main-border-radius; - border: $thin-border-stroke $main-border-color; - color: $medium-prim-color; + border-radius: variables.$main-border-radius; + border: variables.$thin-border-stroke variables.$main-border-color; + color: variables.$medium-prim-color; &:not(:last-child) { margin-bottom: 20px; diff --git a/src/styles/views/_views-config.scss b/src/styles/views/_views-config.scss index 8ce7e78ca9..f0d7732928 100644 --- a/src/styles/views/_views-config.scss +++ b/src/styles/views/_views-config.scss @@ -21,17 +21,17 @@ // Views -@import "core"; -@import "statistics"; +@use "core"; +@use "statistics"; // Modal Views -@import "modals/users"; -@import "modals/action-modal"; -@import "modals/modal-dialog"; -@import "modals/group"; -@import "modals/lists"; -@import "modals/new-event-series"; -@import "modals/event-series"; -@import "modals/edit-events"; -@import "modals/hotkey-cheat-sheet"; -@import "modals/embedded-code"; +@use "modals/users"; +@use "modals/action-modal"; +@use "modals/modal-dialog"; +@use "modals/group"; +@use "modals/lists"; +@use "modals/new-event-series"; +@use "modals/event-series"; +@use "modals/edit-events"; +@use "modals/hotkey-cheat-sheet"; +@use "modals/embedded-code"; diff --git a/src/styles/views/modals/_action-modal.scss b/src/styles/views/modals/_action-modal.scss index 5fa206296a..fd5e4c3b18 100644 --- a/src/styles/views/modals/_action-modal.scss +++ b/src/styles/views/modals/_action-modal.scss @@ -1,3 +1,6 @@ +@use "../../base/variables"; +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -26,7 +29,7 @@ .remove-btn-container { height: 50px; - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; } .red-btn { diff --git a/src/styles/views/modals/_event-series.scss b/src/styles/views/modals/_event-series.scss index b8dec84884..42e6e2364e 100644 --- a/src/styles/views/modals/_event-series.scss +++ b/src/styles/views/modals/_event-series.scss @@ -1,3 +1,9 @@ +@use "../../../../node_modules/bourbon/core/bourbon/library/border-radius"; +@use "../../base/variables"; +@use "../../components/alerts"; +@use "../../mixins/button"; +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -46,7 +52,7 @@ } > a { - @include btn(white); + @include button.btn(white); } } } @@ -58,7 +64,7 @@ } .action-container { - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; padding: 20px; margin: 0 auto; text-align: center; @@ -68,7 +74,7 @@ } > a { - @include btn(white); + @include button.btn(white); margin-left: 5px; vertical-align: middle; } @@ -86,14 +92,14 @@ } .main-tbl { - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; margin-top: 0; - @include border-top-radius(0); + @include border-radius.border-top-radius(0); } .add-remove-container { box-sizing: border-box; - border-top: 1px solid $main-border-color; + border-top: 1px solid variables.$main-border-color; padding: 20px; width: 100%; @@ -112,22 +118,22 @@ } .fa-plus-circle { - color: $green; + color: variables.$green; } .fa-minus-circle { - color: $red; + color: variables.$red; } .btn { - @include btn(green); + @include button.btn(green); } } } .trim-btn-container { .trim-btn { - @include btn(lightblue); + @include button.btn(lightblue); display: inline-block; padding: 10px 25px; margin-bottom: 10px; @@ -136,14 +142,14 @@ .media-stream-details { .main-tbl { - border-bottom: 1px solid $main-border-color; + border-bottom: 1px solid variables.$main-border-color; } } .more-info-actions { ul { - padding: $modal-container-padding; + padding: variables.$modal-container-padding; font-size: 12px; li { @@ -163,16 +169,16 @@ } .fa-plus-circle { - color: $green; + color: variables.$green; } .cancel { - @include btn(white); + @include button.btn(white); margin-right: 5px; } .apply { - @include btn(green); + @include button.btn(green); } .btn-container { @@ -188,19 +194,19 @@ } .scheduling-conflict { - @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text); + @include alerts.alert-variant(variables.$state-danger-bg, variables.$state-danger-border, variables.$state-danger-text); margin-bottom: 15px; } } } .tobira-page-separator { - color: $color-gray; + color: variables.$color-gray; } .tobira-leaf-page { font-size: larger; - font-weight: $weight-bold; + font-weight: variables.$weight-bold; } .tobira-not-mounted { @@ -209,7 +215,7 @@ .tobira-copy-direct-link { margin-left: 6px; - @include btn(white); + @include button.btn(white); i { margin: 0; } diff --git a/src/styles/views/modals/_group.scss b/src/styles/views/modals/_group.scss index b10c96f526..579881c5ec 100644 --- a/src/styles/views/modals/_group.scss +++ b/src/styles/views/modals/_group.scss @@ -1,3 +1,5 @@ +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional diff --git a/src/styles/views/modals/_hotkey-cheat-sheet.scss b/src/styles/views/modals/_hotkey-cheat-sheet.scss index cf0bcfe9f1..d1456e74ba 100644 --- a/src/styles/views/modals/_hotkey-cheat-sheet.scss +++ b/src/styles/views/modals/_hotkey-cheat-sheet.scss @@ -1,12 +1,14 @@ +@use "../../base/variables"; + .key { display: inline-block; - background-color: $modal-heading-color; - box-shadow: inset 0 1px 0 $color-gray, 0 1px 0 $color-silver; - border: 1px solid $modal-heading-color; + background-color: variables.$modal-heading-color; + box-shadow: inset 0 1px 0 variables.$color-gray, 0 1px 0 variables.$color-silver; + border: 1px solid variables.$modal-heading-color; border-radius: 5px; padding: 2px 9px; - color: $color-white; - text-shadow: 1px 1px 0 $color-darkgray; + color: variables.$color-white; + text-shadow: 1px 1px 0 variables.$color-darkgray; min-width: 32px; } diff --git a/src/styles/views/modals/_lists.scss b/src/styles/views/modals/_lists.scss index 7d7d2ae917..348aecfac0 100644 --- a/src/styles/views/modals/_lists.scss +++ b/src/styles/views/modals/_lists.scss @@ -1,3 +1,7 @@ +@use "../../base/fontawesome/fa-mixins"; +@use "../../base/fontawesome/variables" as variables2; +@use "../../base/variables"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -23,7 +27,7 @@ // Main Properties // ---------------------------------------- - padding: $modal-container-padding; + padding: variables.$modal-container-padding; .obj-container { padding: 0; @@ -36,7 +40,7 @@ p { width: 70%; font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; } .description { @@ -49,7 +53,7 @@ margin: 0; line-height: 16px; font-size: 11px; - color: $medium-prim-color; + color: variables.$medium-prim-color; } } @@ -87,7 +91,7 @@ } .video-icon { - @include fa-icon($fa-var-play-circle, before, inherit, 0, 0, $primary-color-green-light-2, 24px); + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle, before, inherit, 0, 0, variables.$primary-color-green-light-2, 24px); } @@ -98,11 +102,11 @@ display: inline-block; float: right; margin-left: auto; - @include fa-icon($fa-var-play-circle-o, before, inherit, 0, 0, $primary-color-green-light-2, 24px); + @include fa-mixins.fa-icon(variables2.$fa-var-play-circle-o, before, inherit, 0, 0, variables.$primary-color-green-light-2, 24px); &:active:before, &:hover:before { - color: $primary-color-green; + color: variables.$primary-color-green; } } diff --git a/src/styles/views/modals/_modal-dialog.scss b/src/styles/views/modals/_modal-dialog.scss index da41c41c5b..b73d0d7d85 100644 --- a/src/styles/views/modals/_modal-dialog.scss +++ b/src/styles/views/modals/_modal-dialog.scss @@ -1,3 +1,6 @@ +@use "../../base/variables"; +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -40,7 +43,7 @@ } .warning { - color: $red; + color: variables.$red; } .btn-container { diff --git a/src/styles/views/modals/_new-event-series.scss b/src/styles/views/modals/_new-event-series.scss index abdea9075b..f9c97613d5 100644 --- a/src/styles/views/modals/_new-event-series.scss +++ b/src/styles/views/modals/_new-event-series.scss @@ -1,3 +1,7 @@ +@use "../../base/variables"; +@use "../../components/alerts"; +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional @@ -42,15 +46,15 @@ float: none; &:hover { - color: $l-blue; + color: variables.$l-blue; } } .fa-plus-circle { - color: $primary-color-green; + color: variables.$primary-color-green; &:hover { - color: $primary-color-green-light-1; + color: variables.$primary-color-green-light-1; } } @@ -64,7 +68,7 @@ } .scheduling-conflict { - @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text); + @include alerts.alert-variant(variables.$state-danger-bg, variables.$state-danger-border, variables.$state-danger-text); margin-bottom: 15px; } } diff --git a/src/styles/views/modals/_users.scss b/src/styles/views/modals/_users.scss index 3841aa0f1f..80f3cd838f 100644 --- a/src/styles/views/modals/_users.scss +++ b/src/styles/views/modals/_users.scss @@ -1,3 +1,5 @@ +@use "../../components/modals/_modal-base"; + /** * Licensed to The Apereo Foundation under one or more contributor license * agreements. See the NOTICE file distributed with this work for additional diff --git a/vite.config.ts b/vite.config.ts index 787771bc76..237dc5d44d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -34,4 +34,12 @@ export default defineConfig({ }, }, }, + // Use modern SASS compiler + css: { + preprocessorOptions: { + scss: { + api: 'modern-compiler' // or "modern" + } + } + }, });