diff --git a/.eslintrc.js b/.eslintrc.js index b3eb5fb4..3eea4263 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,16 +1,15 @@ module.exports = { root: true, env: { - node: true + node: true, }, - 'extends': [ - 'plugin:vue/essential' - ], + extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' + "vue/multi-word-component-names": "off", + "no-console": process.env.NODE_ENV === "production" ? "error" : "off", + "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", }, parserOptions: { - parser: 'babel-eslint' - } -} + parser: "@babel/eslint-parser", + }, +}; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 0a585151..92f637e8 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,9 @@ jobs: autoclose: runs-on: ubuntu-latest steps: - - name: Issue auto-closer - uses: roots/issue-closer-action@v1.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-argon-design-system\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\nšŸ‘‰  https://www.creative-tim.com/bundles\nšŸ‘‰  https://www.creative-tim.com\n\n\n
\n\n" - issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-argon-design-system\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\nšŸ‘‰  https://www.creative-tim.com/bundles\nšŸ‘‰  https://www.creative-tim.com\n\n\n
\n\n" + issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) diff --git a/.gitignore b/.gitignore index 185e6631..8e521562 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .DS_Store node_modules +package-lock.json /dist # local env files diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..5c6c9587 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/.postcssrc.js b/.postcssrc.js index 100cc012..a47ef4f9 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -1,5 +1,5 @@ module.exports = { plugins: { - autoprefixer: {} - } -} \ No newline at end of file + autoprefixer: {}, + }, +}; diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c6a8520..23142e15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,22 @@ # Changelog +##[1.2.0] 2023-06-20 + +- Update dependencies and devDependencies +- Fix installation issue when running `npm i` +- Fix issue when running `npm run serve` +- Migrate from `node-sass` to `sass` +- Fix warnings + ##[1.1.0] 2019-02-12 + - Package updates - SSR fixes for checkboxes and radio - IE fixes - Best practices & accessibility improvements + pwa support ## [1.0.0] 2018-08-14 + Initial stable release + ### Original Release diff --git a/babel.config.js b/babel.config.js index d118d549..9cb4380e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,10 +1,3 @@ module.exports = { - presets: [ - [ - "@vue/app", - { - "polyfills": ["es7.object.entries", "es6.promise"] - } - ] - ] + presets: [["@vue/app"]], }; diff --git a/package.json b/package.json index 86ea86aa..45cd0f9f 100644 --- a/package.json +++ b/package.json @@ -1,30 +1,41 @@ { "name": "vue-argon-design-system", - "version": "0.1.0", + "version": "1.2.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "prettify": "prettier --write ." }, "dependencies": { - "bootstrap-vue": "^2.0.4", - "flatpickr": "^4.5.1", - "nouislider": "^11.1.0", - "register-service-worker": "^1.5.2", - "vue": "^2.6.6", - "vue-flatpickr-component": "^8.1.1", - "vue-lazyload": "^1.2.6", - "vue-router": "^3.0.2", - "vue2-transitions": "^0.2.3" + "bootstrap-vue": "2.23.1", + "flatpickr": "4.6.13", + "nouislider": "15.7.1", + "register-service-worker": "1.7.2", + "vue": "2.7.14", + "vue-flatpickr-component": "8.1.8", + "vue-lazyload": "1.3.4", + "vue-router": "3.6.5", + "vue2-transitions": "0.3.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "^3.4.0", - "@vue/cli-plugin-eslint": "^3.4.0", - "@vue/cli-plugin-pwa": "^3.4.0", - "@vue/cli-service": "^3.4.0", - "node-sass": "^4.11.0", - "sass-loader": "^7.1.0", - "vue-template-compiler": "^2.6.6" + "@babel/eslint-parser": "7.22.5", + "@vue/cli-plugin-babel": "5.0.8", + "@vue/cli-plugin-eslint": "5.0.8", + "@vue/cli-plugin-pwa": "5.0.8", + "@vue/cli-service": "5.0.8", + "@vue/eslint-config-prettier": "7.1.0", + "babel-plugin-component": "1.1.1", + "eslint": "8.43.0", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-vue": "9.15.0", + "prettier": "2.8.8", + "sass": "1.63.4", + "sass-loader": "13.3.2", + "vue-template-compiler": "2.7.14" + }, + "overrides": { + "consolidate": "1.0.1" } } diff --git a/public/index.html b/public/index.html index d1d0da56..b15a872e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,11 @@ - +
diff --git a/src/App.vue b/src/App.vue index 2f8b8a7c..af7d0d78 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,20 +1,20 @@ diff --git a/src/assets/scss/argon.scss b/src/assets/scss/argon.scss index 30128ab0..92daa35b 100644 --- a/src/assets/scss/argon.scss +++ b/src/assets/scss/argon.scss @@ -1,11 +1,11 @@ /*! ========================================================= -* Vue Argon Design System - v1.1.0 +* Vue Argon Design System - v1.2.0 ========================================================= * Product Page: https://www.creative-tim.com/product/argon-design-system -* Copyright 2019 Creative Tim (https://www.creative-tim.com) +* Copyright 2023 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md) * Coded by www.creative-tim.com diff --git a/src/assets/scss/bootstrap/_alert.scss b/src/assets/scss/bootstrap/_alert.scss index dd43e237..ac323fd5 100644 --- a/src/assets/scss/bootstrap/_alert.scss +++ b/src/assets/scss/bootstrap/_alert.scss @@ -21,7 +21,6 @@ font-weight: $alert-link-font-weight; } - // Dismissible alerts // // Expand the right padding and account for the close button's positioning. @@ -39,13 +38,16 @@ } } - // Alternate styles // // Generate contextual modifier classes for colorizing the alert. @each $color, $value in $theme-colors { .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + @include alert-variant( + theme-color-level($color, $alert-bg-level), + theme-color-level($color, $alert-border-level), + theme-color-level($color, $alert-color-level) + ); } } diff --git a/src/assets/scss/bootstrap/_button-group.scss b/src/assets/scss/bootstrap/_button-group.scss index 54951703..cc25838b 100644 --- a/src/assets/scss/bootstrap/_button-group.scss +++ b/src/assets/scss/bootstrap/_button-group.scss @@ -64,17 +64,20 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-sm > .btn { @extend .btn-sm; } -.btn-group-lg > .btn { @extend .btn-lg; } - +.btn-group-sm > .btn { + @extend .btn-sm; +} +.btn-group-lg > .btn { + @extend .btn-lg; +} // // Split button dropdowns // .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $btn-padding-x * 0.75; + padding-left: $btn-padding-x * 0.75; &::after, .dropup &::after, @@ -88,16 +91,15 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $btn-padding-x-sm * 0.75; + padding-left: $btn-padding-x-sm * 0.75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $btn-padding-x-lg * 0.75; + padding-left: $btn-padding-x-lg * 0.75; } - // The clickable button for toggling the menu // Set the same inset shadow as the :active state .btn-group.show .dropdown-toggle { @@ -109,7 +111,6 @@ } } - // // Vertical button groups // @@ -144,7 +145,6 @@ } } - // Checkbox and radio options // // In order to support the browser's form validation feedback, powered by the diff --git a/src/assets/scss/bootstrap/_buttons.scss b/src/assets/scss/bootstrap/_buttons.scss index 0a8eaa9b..d7032145 100644 --- a/src/assets/scss/bootstrap/_buttons.scss +++ b/src/assets/scss/bootstrap/_buttons.scss @@ -12,7 +12,13 @@ vertical-align: middle; user-select: none; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size( + $btn-padding-y, + $btn-padding-x, + $font-size-base, + $btn-line-height, + $btn-border-radius + ); @include transition($btn-transition); // Share hover and focus styles @@ -54,7 +60,6 @@ fieldset:disabled a.btn { pointer-events: none; } - // // Alternate buttons // @@ -71,7 +76,6 @@ fieldset:disabled a.btn { } } - // // Link buttons // @@ -105,20 +109,30 @@ fieldset:disabled a.btn { // No need for an active state here } - // // Button Sizes // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size( + $btn-padding-y-lg, + $btn-padding-x-lg, + $font-size-lg, + $btn-line-height-lg, + $btn-border-radius-lg + ); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size( + $btn-padding-y-sm, + $btn-padding-x-sm, + $font-size-sm, + $btn-line-height-sm, + $btn-border-radius-sm + ); } - // // Block button // diff --git a/src/assets/scss/bootstrap/_card.scss b/src/assets/scss/bootstrap/_card.scss index 28d7e624..13114a3c 100644 --- a/src/assets/scss/bootstrap/_card.scss +++ b/src/assets/scss/bootstrap/_card.scss @@ -72,7 +72,9 @@ border-bottom: $card-border-width solid $card-border-color; &:first-child { - @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + @include border-radius( + $card-inner-border-radius $card-inner-border-radius 0 0 + ); } + .list-group { @@ -88,11 +90,12 @@ border-top: $card-border-width solid $card-border-color; &:last-child { - @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + @include border-radius( + 0 0 $card-inner-border-radius $card-inner-border-radius + ); } } - // // Header navs // @@ -135,7 +138,6 @@ @include border-bottom-radius($card-inner-border-radius); } - // Card deck .card-deck { @@ -163,7 +165,6 @@ } } - // // Card groups // @@ -248,7 +249,6 @@ } } - // // Columns // @@ -271,7 +271,6 @@ } } - // // Accordion // diff --git a/src/assets/scss/bootstrap/_carousel.scss b/src/assets/scss/bootstrap/_carousel.scss index 91c23e5f..a96488b2 100644 --- a/src/assets/scss/bootstrap/_carousel.scss +++ b/src/assets/scss/bootstrap/_carousel.scss @@ -67,7 +67,6 @@ } } - // // Alternate transitions // @@ -75,7 +74,7 @@ .carousel-fade { .carousel-item { opacity: 0; - transition-duration: .6s; + transition-duration: 0.6s; transition-property: opacity; } @@ -103,7 +102,6 @@ } } - // // Left/right controls for nav // @@ -129,19 +127,23 @@ color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: 0.9; } } .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); + background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); + background: linear-gradient( + 270deg, + rgba($black, 0.25), + rgba($black, 0.001) + ); } } @@ -161,7 +163,6 @@ background-image: $carousel-control-next-icon-bg; } - // Optional indicator pips // // Add an ordered list with the following class and add a list item for each @@ -190,7 +191,7 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: rgba($carousel-indicator-active-bg, .5); + background-color: rgba($carousel-indicator-active-bg, 0.5); // Use pseudo classes to increase the hit area by 10px on top and bottom. &::before { @@ -218,7 +219,6 @@ } } - // Optional captions // // diff --git a/src/assets/scss/bootstrap/_close.scss b/src/assets/scss/bootstrap/_close.scss index a0dd1e2a..07a5b8e6 100644 --- a/src/assets/scss/bootstrap/_close.scss +++ b/src/assets/scss/bootstrap/_close.scss @@ -5,14 +5,13 @@ line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - opacity: .5; + opacity: 0.5; &:not(:disabled):not(.disabled) { - @include hover-focus { color: $close-color; text-decoration: none; - opacity: .75; + opacity: 0.75; } // Opinionated: add "hand" cursor to non-disabled .close elements diff --git a/src/assets/scss/bootstrap/_custom-forms.scss b/src/assets/scss/bootstrap/_custom-forms.scss index 8348e261..8077e2ee 100644 --- a/src/assets/scss/bootstrap/_custom-forms.scss +++ b/src/assets/scss/bootstrap/_custom-forms.scss @@ -2,7 +2,6 @@ // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open - // Checkboxes and radios // // Base class takes care of all the key behavioral aspects. @@ -63,7 +62,9 @@ // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); + top: ( + ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2 + ); left: -$custom-control-gutter; display: block; width: $custom-control-indicator-size; @@ -78,7 +79,9 @@ // Foreground (icon) &::after { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); + top: ( + ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2 + ); left: -$custom-control-gutter; display: block; width: $custom-control-indicator-size; @@ -90,7 +93,6 @@ } } - // Checkboxes // // Tweak just a few things for checkboxes. @@ -154,7 +156,6 @@ } } - // Select // // Replaces the browser default select with a custom one, mostly pulled from @@ -165,11 +166,14 @@ display: inline-block; width: 100%; height: $custom-select-height; - padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + padding: $custom-select-padding-y + ($custom-select-padding-x + $custom-select-indicator-padding) + $custom-select-padding-y $custom-select-padding-x; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background: $custom-select-bg $custom-select-indicator no-repeat right + $custom-select-padding-x center; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -232,7 +236,6 @@ font-size: $custom-select-font-size-lg; } - // File // // Custom file input. @@ -302,7 +305,9 @@ content: "Browse"; @include gradient-bg($custom-file-button-bg); border-left: $custom-file-border-width solid $custom-file-border-color; - @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); + @include border-radius( + 0 $custom-file-border-radius $custom-file-border-radius 0 + ); } } @@ -323,9 +328,15 @@ // Pseudo-elements must be split across multiple rulesets to have an affect. // No box-shadow() mixin for focus accessibility. - &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-webkit-slider-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } + &::-moz-range-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } + &::-ms-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } } &::-moz-focus-outer { @@ -335,7 +346,9 @@ &::-webkit-slider-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific + margin-top: ( + ($custom-range-track-height - $custom-range-thumb-height) / 2 + ); // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -390,7 +403,7 @@ height: $custom-range-thumb-height; margin-top: 0; // Edge specific margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. - margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -410,7 +423,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: ($custom-range-thumb-height * .5); + border-width: ($custom-range-thumb-height * 0.5); @include box-shadow($custom-range-track-box-shadow); } diff --git a/src/assets/scss/bootstrap/_forms.scss b/src/assets/scss/bootstrap/_forms.scss index 5530630e..003db2e8 100644 --- a/src/assets/scss/bootstrap/_forms.scss +++ b/src/assets/scss/bootstrap/_forms.scss @@ -76,7 +76,6 @@ select.form-control { width: 100%; } - // // Labels // @@ -105,7 +104,6 @@ select.form-control { line-height: $input-line-height-sm; } - // Readonly controls as plain text // // Apply class to a readonly input to make it appear like regular plain @@ -130,7 +128,6 @@ select.form-control { } } - // Form control sizing // // Build on `.form-control` with modifier classes to decrease or increase the @@ -181,7 +178,6 @@ textarea.form-control { margin-top: $form-text-margin-top; } - // Form grid // // Special replacement for our grid system's `.row` for tighter form layouts. @@ -199,7 +195,6 @@ textarea.form-control { } } - // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. @@ -239,7 +234,6 @@ textarea.form-control { } } - // Form validation // // Provide feedback to users when form field values are valid or invalid. Works diff --git a/src/assets/scss/bootstrap/_functions.scss b/src/assets/scss/bootstrap/_functions.scss index bf8be9ae..ee9cefa4 100644 --- a/src/assets/scss/bootstrap/_functions.scss +++ b/src/assets/scss/bootstrap/_functions.scss @@ -42,7 +42,12 @@ $index: str-index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); } @return $string; @@ -54,7 +59,7 @@ $g: green($color); $b: blue($color); - $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + $yiq: calc((($r * 299) + ($g * 587) + ($b * 114)) / 1000); @if ($yiq >= $yiq-contrasted-threshold) { @return $yiq-text-dark; diff --git a/src/assets/scss/bootstrap/_images.scss b/src/assets/scss/bootstrap/_images.scss index 2bce02f6..abb01bf8 100644 --- a/src/assets/scss/bootstrap/_images.scss +++ b/src/assets/scss/bootstrap/_images.scss @@ -9,7 +9,6 @@ @include img-fluid; } - // Image thumbnails .img-thumbnail { padding: $thumbnail-padding; @@ -32,7 +31,7 @@ } .figure-img { - margin-bottom: ($spacer / 2); + margin-bottom: calc($spacer / 2); line-height: 1; } diff --git a/src/assets/scss/bootstrap/_input-group.scss b/src/assets/scss/bootstrap/_input-group.scss index 2ed5f330..1b91734a 100644 --- a/src/assets/scss/bootstrap/_input-group.scss +++ b/src/assets/scss/bootstrap/_input-group.scss @@ -42,8 +42,12 @@ > .form-control, > .custom-select { - &:not(:last-child) { @include border-right-radius(0); } - &:not(:first-child) { @include border-left-radius(0); } + &:not(:last-child) { + @include border-right-radius(0); + } + &:not(:first-child) { + @include border-left-radius(0); + } } // Custom file inputs have more complex markup, thus requiring different @@ -53,12 +57,15 @@ align-items: center; &:not(:last-child) .custom-file-label, - &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } - &:not(:first-child) .custom-file-label { @include border-left-radius(0); } + &:not(:last-child) .custom-file-label::after { + @include border-right-radius(0); + } + &:not(:first-child) .custom-file-label { + @include border-left-radius(0); + } } } - // Prepend and append // // While it requires one extra layer of HTML for each, dedicated prepend and @@ -85,9 +92,12 @@ } } -.input-group-prepend { margin-right: -$input-border-width; } -.input-group-append { margin-left: -$input-border-width; } - +.input-group-prepend { + margin-right: -$input-border-width; +} +.input-group-append { + margin-left: -$input-border-width; +} // Textual addons // @@ -116,7 +126,6 @@ } } - // Sizing // // Remix the default form control sizing classes into new ones for easier @@ -146,20 +155,22 @@ @include border-radius($input-border-radius-sm); } - // Prepend and append rounded corners // // These rulesets must come after the sizing ones to properly override sm and lg // border-radius values when extending. They're more specific than we'd like // with the `.input-group >` part, but without it, we cannot override the sizing. - .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { +.input-group + > .input-group-append:last-child + > .btn:not(:last-child):not(.dropdown-toggle), +.input-group + > .input-group-append:last-child + > .input-group-text:not(:last-child) { @include border-right-radius(0); } @@ -168,6 +179,8 @@ .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { +.input-group + > .input-group-prepend:first-child + > .input-group-text:not(:first-child) { @include border-left-radius(0); } diff --git a/src/assets/scss/bootstrap/_list-group.scss b/src/assets/scss/bootstrap/_list-group.scss index 9f145c1d..ff06e8df 100644 --- a/src/assets/scss/bootstrap/_list-group.scss +++ b/src/assets/scss/bootstrap/_list-group.scss @@ -11,7 +11,6 @@ margin-bottom: 0; } - // Interactive list items // // Use anchor or button elements instead of `li`s or `div`s to create interactive @@ -35,7 +34,6 @@ } } - // Individual list items // // Use on `li`s or `div`s within the `.list-group` parent. @@ -78,7 +76,6 @@ } } - // Flush list items // // Remove borders and border-radius to keep list group items edge-to-edge. Most @@ -104,12 +101,15 @@ } } - // Contextual variants // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. @each $color, $value in $theme-colors { - @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); + @include list-group-item-variant( + $color, + theme-color-level($color, -9), + theme-color-level($color, 6) + ); } diff --git a/src/assets/scss/bootstrap/_modal.scss b/src/assets/scss/bootstrap/_modal.scss index f20bb9d8..94e082f7 100644 --- a/src/assets/scss/bootstrap/_modal.scss +++ b/src/assets/scss/bootstrap/_modal.scss @@ -3,7 +3,6 @@ // .modal-dialog - positioning shell for the actual modal // .modal-content - actual modal w/ bg and corners and stuff - .modal-open { // Kill the scroll on the body overflow: hidden; @@ -91,8 +90,12 @@ background-color: $modal-backdrop-bg; // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity; } + &.fade { + opacity: 0; + } + &.show { + opacity: $modal-backdrop-opacity; + } } // Modal header @@ -108,7 +111,8 @@ .close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; + margin: (-$modal-header-padding) (-$modal-header-padding) + (-$modal-header-padding) auto; } } @@ -137,8 +141,12 @@ border-top: $modal-footer-border-width solid $modal-footer-border-color; // Easily place margin between footer elements - > :not(:first-child) { margin-left: .25rem; } - > :not(:last-child) { margin-right: .25rem; } + > :not(:first-child) { + margin-left: 0.25rem; + } + > :not(:last-child) { + margin-right: 0.25rem; + } } // Measure scrollbar width for padding body during modal show/hide @@ -164,17 +172,19 @@ &::before { height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2)); } - } .modal-content { @include box-shadow($modal-content-box-shadow-sm-up); } - .modal-sm { max-width: $modal-sm; } - + .modal-sm { + max-width: $modal-sm; + } } @include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } + .modal-lg { + max-width: $modal-lg; + } } diff --git a/src/assets/scss/bootstrap/_nav.scss b/src/assets/scss/bootstrap/_nav.scss index bf3484e8..b013df78 100644 --- a/src/assets/scss/bootstrap/_nav.scss +++ b/src/assets/scss/bootstrap/_nav.scss @@ -66,7 +66,6 @@ } } - // // Pills // @@ -83,7 +82,6 @@ } } - // // Justified variants // @@ -103,7 +101,6 @@ } } - // Tabbable tabs // // Hide tabbable panes to start, show them when `.active` diff --git a/src/assets/scss/bootstrap/_navbar.scss b/src/assets/scss/bootstrap/_navbar.scss index 52de5050..d62a14d0 100644 --- a/src/assets/scss/bootstrap/_navbar.scss +++ b/src/assets/scss/bootstrap/_navbar.scss @@ -9,7 +9,6 @@ // Navbar position // Navbar themes - // Navbar // // Provide a static navbar from which we expand to create full-width, fixed, and @@ -34,7 +33,6 @@ } } - // Navbar brand // // Used for brand, project, or site names. @@ -53,7 +51,6 @@ } } - // Navbar nav // // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). @@ -76,7 +73,6 @@ } } - // Navbar text // // @@ -87,7 +83,6 @@ padding-bottom: $nav-link-padding-y; } - // Responsive navbar // // Custom styles for responsive collapsing and toggling of navbar contents. @@ -175,7 +170,7 @@ } .navbar-collapse { - display: flex !important; // stylelint-disable-line declaration-no-important + display: flex !important; // stylelint-disable-line declaration-no-important // Changes flex-bases to auto because of an IE10 bug flex-basis: auto; @@ -189,7 +184,6 @@ } } - // Navbar themes // // Styles for switching between navbars with light or dark background. diff --git a/src/assets/scss/bootstrap/_pagination.scss b/src/assets/scss/bootstrap/_pagination.scss index 9349f3f9..cb2e497f 100644 --- a/src/assets/scss/bootstrap/_pagination.scss +++ b/src/assets/scss/bootstrap/_pagination.scss @@ -64,15 +64,26 @@ } } - // // Sizing // .pagination-lg { - @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); + @include pagination-size( + $pagination-padding-y-lg, + $pagination-padding-x-lg, + $font-size-lg, + $line-height-lg, + $border-radius-lg + ); } .pagination-sm { - @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); + @include pagination-size( + $pagination-padding-y-sm, + $pagination-padding-x-sm, + $font-size-sm, + $line-height-sm, + $border-radius-sm + ); } diff --git a/src/assets/scss/bootstrap/_popover.scss b/src/assets/scss/bootstrap/_popover.scss index 3ef5f628..25339ad4 100644 --- a/src/assets/scss/bootstrap/_popover.scss +++ b/src/assets/scss/bootstrap/_popover.scss @@ -70,7 +70,8 @@ .arrow::before, .arrow::after { - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-width: ($popover-arrow-width / 2) $popover-arrow-height + ($popover-arrow-width / 2) 0; } .arrow::before { @@ -93,7 +94,8 @@ .arrow::before, .arrow::after { - border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height + ($popover-arrow-width / 2); } .arrow::before { @@ -131,7 +133,8 @@ .arrow::before, .arrow::after { - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) + $popover-arrow-height; } .arrow::before { @@ -160,7 +163,6 @@ } } - // Offset the popover to account for the popover arrow .popover-header { padding: $popover-header-padding-y $popover-header-padding-x; diff --git a/src/assets/scss/bootstrap/_print.scss b/src/assets/scss/bootstrap/_print.scss index 1df94873..61b60b98 100644 --- a/src/assets/scss/bootstrap/_print.scss +++ b/src/assets/scss/bootstrap/_print.scss @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } diff --git a/src/assets/scss/bootstrap/_progress.scss b/src/assets/scss/bootstrap/_progress.scss index 0ac3e0c9..a9bd593a 100644 --- a/src/assets/scss/bootstrap/_progress.scss +++ b/src/assets/scss/bootstrap/_progress.scss @@ -1,6 +1,10 @@ @keyframes progress-bar-stripes { - from { background-position: $progress-height 0; } - to { background-position: 0 0; } + from { + background-position: $progress-height 0; + } + to { + background-position: 0 0; + } } .progress { diff --git a/src/assets/scss/bootstrap/_reboot.scss b/src/assets/scss/bootstrap/_reboot.scss index f297d095..d118311a 100644 --- a/src/assets/scss/bootstrap/_reboot.scss +++ b/src/assets/scss/bootstrap/_reboot.scss @@ -7,7 +7,6 @@ // // Normalize is licensed MIT. https://github.com/necolas/normalize.css - // Document // // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. @@ -42,7 +41,16 @@ html { // stylelint-disable selector-list-comma-newline-after // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } // stylelint-enable selector-list-comma-newline-after @@ -74,7 +82,6 @@ body { outline: 0 !important; } - // Content grouping // // 1. Add the correct box sizing in Firefox. @@ -86,7 +93,6 @@ hr { overflow: visible; // 2 } - // // Typography // @@ -96,7 +102,12 @@ hr { // By default, `

`-`

` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. // stylelint-disable selector-list-comma-newline-after -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; } @@ -119,7 +130,8 @@ p { // 4. Duplicate behavior to the data-* attribute for our tooltip plugin abbr[title], -abbr[data-original-title] { // 4 +abbr[data-original-title] { + // 4 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 @@ -151,7 +163,7 @@ dt { } dd { - margin-bottom: .5rem; + margin-bottom: 0.5rem; margin-left: 0; // Undo browser default } @@ -187,9 +199,12 @@ sup { vertical-align: baseline; } -sub { bottom: -.25em; } -sup { top: -.5em; } - +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} // // Links @@ -227,7 +242,6 @@ a:not([href]):not([tabindex]) { } } - // // Code // @@ -252,7 +266,6 @@ pre { -ms-overflow-style: scrollbar; } - // // Figures // @@ -262,7 +275,6 @@ figure { margin: 0 0 1rem; } - // // Images and content // @@ -279,7 +291,6 @@ svg { vertical-align: middle; } - // // Tables // @@ -302,7 +313,6 @@ th { text-align: inherit; } - // // Forms // @@ -375,7 +385,6 @@ input[type="checkbox"] { padding: 0; // 2. Remove the padding in IE 10- } - input[type="date"], input[type="time"], input[type="datetime-local"], @@ -414,7 +423,7 @@ legend { width: 100%; max-width: 100%; // 1 padding: 0; - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; // 2 diff --git a/src/assets/scss/bootstrap/_tables.scss b/src/assets/scss/bootstrap/_tables.scss index 5fa6a866..1aacbf82 100644 --- a/src/assets/scss/bootstrap/_tables.scss +++ b/src/assets/scss/bootstrap/_tables.scss @@ -28,7 +28,6 @@ } } - // // Condensed table w/ half padding // @@ -40,7 +39,6 @@ } } - // Border versions // // Add or remove borders all around the table and between all the columns. @@ -80,7 +78,6 @@ } } - // Hover effect // // Placed here since it has to come after the potential zebra striping @@ -93,7 +90,6 @@ } } - // Table backgrounds // // Exact selectors below required to override `.table-striped` and prevent @@ -105,7 +101,6 @@ @include table-row-variant(active, $table-active-bg); - // Dark styles // // Same table markup, but inverted color scheme: dark background and light text. @@ -158,7 +153,6 @@ } } - // Responsive tables // // Generate series of `.table-responsive-*` classes for configuring the screen diff --git a/src/assets/scss/bootstrap/_tooltip.scss b/src/assets/scss/bootstrap/_tooltip.scss index 1286ebfc..59b7c2be 100644 --- a/src/assets/scss/bootstrap/_tooltip.scss +++ b/src/assets/scss/bootstrap/_tooltip.scss @@ -12,7 +12,9 @@ word-wrap: break-word; opacity: 0; - &.show { opacity: $tooltip-opacity; } + &.show { + opacity: $tooltip-opacity; + } .arrow { position: absolute; @@ -53,7 +55,8 @@ &::before { right: 0; - border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; + border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height + ($tooltip-arrow-width / 2) 0; border-right-color: $tooltip-arrow-color; } } @@ -83,7 +86,8 @@ &::before { left: 0; - border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; + border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) + $tooltip-arrow-height; border-left-color: $tooltip-arrow-color; } } diff --git a/src/assets/scss/bootstrap/_type.scss b/src/assets/scss/bootstrap/_type.scss index 57d610f0..bc2efe9e 100644 --- a/src/assets/scss/bootstrap/_type.scss +++ b/src/assets/scss/bootstrap/_type.scss @@ -4,8 +4,18 @@ // Headings // -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: $headings-margin-bottom; font-family: $headings-font-family; font-weight: $headings-font-weight; @@ -13,12 +23,30 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $h1-font-size; } -h2, .h2 { font-size: $h2-font-size; } -h3, .h3 { font-size: $h3-font-size; } -h4, .h4 { font-size: $h4-font-size; } -h5, .h5 { font-size: $h5-font-size; } -h6, .h6 { font-size: $h6-font-size; } +h1, +.h1 { + font-size: $h1-font-size; +} +h2, +.h2 { + font-size: $h2-font-size; +} +h3, +.h3 { + font-size: $h3-font-size; +} +h4, +.h4 { + font-size: $h4-font-size; +} +h5, +.h5 { + font-size: $h5-font-size; +} +h6, +.h6 { + font-size: $h6-font-size; +} .lead { font-size: $lead-font-size; @@ -47,7 +75,6 @@ h6, .h6 { font-size: $h6-font-size; } line-height: $display-line-height; } - // // Horizontal rules // @@ -59,7 +86,6 @@ hr { border-top: $hr-border-width solid $hr-border-color; } - // // Emphasis // @@ -76,7 +102,6 @@ mark, background-color: $mark-bg; } - // // Lists // @@ -97,7 +122,6 @@ mark, } } - // // Misc // diff --git a/src/assets/scss/bootstrap/_variables.scss b/src/assets/scss/bootstrap/_variables.scss index 5cf118f0..5824b7a9 100644 --- a/src/assets/scss/bootstrap/_variables.scss +++ b/src/assets/scss/bootstrap/_variables.scss @@ -3,12 +3,11 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - // // Color system // -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -18,7 +17,7 @@ $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; $grays: () !default; // stylelint-disable-next-line scss/dollar-variable-default @@ -32,92 +31,90 @@ $grays: map-merge( "600": $gray-600, "700": $gray-700, "800": $gray-800, - "900": $gray-900 + "900": $gray-900, ), $grays ); - -$blue: #007bff !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #dc3545 !default; -$orange: #fd7e14 !default; -$yellow: #ffc107 !default; -$green: #28a745 !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; +$blue: #007bff !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; $colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $colors: map-merge( ( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800, ), $colors ); -$primary: $blue !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; $theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, ), $theme-colors ); // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; // Spacing // @@ -131,11 +128,19 @@ $spacers: () !default; $spacers: map-merge( ( 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), + 1: ( + $spacer * 0.25, + ), + 2: ( + $spacer * 0.5, + ), 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3) + 4: ( + $spacer * 1.5, + ), + 5: ( + $spacer * 3, + ), ), $spacers ); @@ -149,7 +154,7 @@ $sizes: map-merge( 50: 50%, 75: 75%, 100: 100%, - auto: auto + auto: auto, ), $sizes ); @@ -158,24 +163,23 @@ $sizes: map-merge( // // Settings for the `` element. -$body-bg: $white !default; -$body-color: $gray-900 !default; +$body-bg: $white !default; +$body-color: $gray-900 !default; // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: 1rem !default; - +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints // @@ -187,13 +191,12 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); - // Grid containers // // Define the maximum width of `.container` for different screen sizes. @@ -202,751 +205,786 @@ $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, - xl: 1140px + xl: 1140px, ) !default; @include _assert-ascending($container-max-widths, "$container-max-widths"); - // Grid columns // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; // Components // // Define common padding and border radius sizes and more. -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; - -$border-width: 1px !default; -$border-color: $gray-300 !default; +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-width: 1px !default; +$border-color: $gray-300 !default; -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; -$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; -$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; +$border-radius: 0.25rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default; +$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; -$caret-width: .3em !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$caret-width: 0.3em !default; +$transition-base: all 0.2s ease-in-out !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; // Fonts // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: ($font-size-base * 1.25) !default; -$font-size-sm: ($font-size-base * .875) !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * 0.875) !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 700 !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; -$h1-font-size: $font-size-base * 2.5 !default; -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.75 !default; -$h4-font-size: $font-size-base * 1.5 !default; -$h5-font-size: $font-size-base * 1.25 !default; -$h6-font-size: $font-size-base !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.2 !default; -$headings-color: inherit !default; +$headings-margin-bottom: calc($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; -$lead-font-size: ($font-size-base * 1.25) !default; -$lead-font-weight: 300 !default; +$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-weight: 300 !default; -$small-font-size: 80% !default; +$small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; -$hr-border-color: rgba($black, .1) !default; -$hr-border-width: $border-width !default; +$hr-border-color: rgba($black, 0.1) !default; +$hr-border-width: $border-width !default; -$mark-padding: .2em !default; +$mark-padding: 0.2em !default; -$dt-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem !default; +$list-inline-padding: 0.5rem !default; -$mark-bg: #fcf8e3 !default; - -$hr-margin-y: $spacer !default; +$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer !default; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding: .75rem !default; -$table-cell-padding-sm: .3rem !default; +$table-cell-padding: 0.75rem !default; +$table-cell-padding-sm: 0.3rem !default; -$table-bg: transparent !default; -$table-accent-bg: rgba($black, .05) !default; -$table-hover-bg: rgba($black, .075) !default; -$table-active-bg: $table-hover-bg !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05) !default; +$table-hover-bg: rgba($black, 0.075) !default; +$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($gray-900, 7.5%) !default; -$table-dark-color: $body-bg !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05) !default; +$table-dark-hover-bg: rgba($white, 0.075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; -$table-striped-order: odd !default; +$table-striped-order: odd !default; -$table-caption-color: $text-muted !default; +$table-caption-color: $text-muted !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: .375rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: $line-height-base !default; - -$input-btn-focus-width: .2rem !default; -$input-btn-focus-color: rgba($component-active-bg, .25) !default; -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; +$input-btn-padding-y: 0.375rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-line-height: $line-height-base !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: $line-height-sm !default; +$input-btn-focus-width: 0.2rem !default; +$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; -$input-btn-padding-y-lg: .5rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; -$input-btn-border-width: $border-width !default; +$input-btn-padding-y-lg: 0.5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-border-width: $border-width !default; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-line-height: $input-btn-line-height !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-border-width: $input-btn-border-width !default; +$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; -$btn-focus-width: $input-btn-focus-width !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; -$btn-disabled-opacity: .65 !default; -$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: 0.65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; -$btn-link-disabled-color: $gray-600 !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem !default; +$btn-block-spacing-y: 0.5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; - -$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; +$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; // Forms -$label-margin-bottom: .5rem !default; +$label-margin-bottom: 0.5rem !default; -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-color: $gray-700 !default; -$input-border-color: $gray-400 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten($component-active-bg, 25%) !default; -$input-focus-color: $input-color !default; -$input-focus-width: $input-btn-focus-width !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; -$input-placeholder-color: $gray-600 !default; -$input-plaintext-color: $body-color !default; +$input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; -$input-height-border: $input-border-width * 2 !default; +$input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; -$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc( + #{$input-height-inner-sm} + #{$input-height-border} +) !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; -$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc( + #{$input-height-inner-lg} + #{$input-height-border} +) !default; -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; -$form-text-margin-top: .25rem !default; +$form-text-margin-top: 0.25rem !default; -$form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .3rem !default; -$form-check-input-margin-x: .25rem !default; - -$form-check-inline-margin-x: .75rem !default; -$form-check-inline-input-margin-x: .3125rem !default; - -$form-group-margin-bottom: 1rem !default; - -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: $gray-200 !default; -$input-group-addon-border-color: $input-border-color !default; - -$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; - -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; - -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; - -$custom-control-indicator-checked-color: $component-active-color !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; -$custom-control-indicator-checked-box-shadow: none !default; - -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; - -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; -$custom-control-indicator-active-box-shadow: none !default; - -$custom-checkbox-indicator-border-radius: $border-radius !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; - -$custom-radio-indicator-border-radius: 50% !default; -$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; -$custom-select-height: $input-height !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-btn-line-height !default; -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $input-bg !default; -$custom-select-disabled-bg: $gray-200 !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: $gray-800 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; -$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; - -$custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-width: $input-btn-focus-width !default; -$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default; - -$custom-select-font-size-sm: 75% !default; -$custom-select-height-sm: $input-height-sm !default; - -$custom-select-font-size-lg: 125% !default; -$custom-select-height-lg: $input-height-lg !default; - -$custom-range-track-width: 100% !default; -$custom-range-track-height: .5rem !default; -$custom-range-track-cursor: pointer !default; -$custom-range-track-bg: $gray-300 !default; -$custom-range-track-border-radius: 1rem !default; -$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-range-thumb-width: 1rem !default; -$custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; -$custom-range-thumb-border: 0 !default; -$custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge -$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; - -$custom-file-height: $input-height !default; -$custom-file-height-inner: $input-height-inner !default; -$custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; -$custom-file-disabled-bg: $input-disabled-bg !default; - -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; -$custom-file-color: $input-color !default; -$custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; -$custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $input-border-radius !default; -$custom-file-box-shadow: $input-box-shadow !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $input-group-addon-bg !default; -$custom-file-text: ( - en: "Browse" +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: 0.3rem !default; +$form-check-input-margin-x: 0.25rem !default; + +$form-check-inline-margin-x: 0.75rem !default; +$form-check-inline-input-margin-x: 0.3125rem !default; + +$form-group-margin-bottom: 1rem !default; + +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +$custom-forms-transition: background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; + +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; + +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; + +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 ) !default; +$custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; -// Form validation -$form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-color: theme-color("danger") !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten( + $component-active-bg, + 35% +) !default; +$custom-control-indicator-active-box-shadow: none !default; + +$custom-checkbox-indicator-border-radius: $border-radius !default; +$custom-checkbox-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; + +$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; + +$custom-select-padding-y: 0.375rem !default; +$custom-select-padding-x: 0.75rem !default; +$custom-select-height: $input-height !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-btn-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-600 !default; +$custom-select-bg: $input-bg !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: $gray-800 !default; +$custom-select-indicator: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; +$custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-width: $input-btn-focus-width !default; +$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width + rgba($custom-select-focus-border-color, 0.5) !default; + +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + +$custom-range-track-width: 100% !default; +$custom-range-track-height: 0.5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; + +$custom-file-height: $input-height !default; +$custom-file-height-inner: $input-height-inner !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-file-disabled-bg: $input-disabled-bg !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; +$custom-file-text: ( + en: "Browse", +) !default; + +// Form validation +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; - -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: 0.5rem !default; +$dropdown-spacer: 0.125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, 0.15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; -$dropdown-link-disabled-color: $gray-600 !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-header-color: $gray-600 !default; +$dropdown-item-padding-y: 0.25rem !default; +$dropdown-item-padding-x: 1.5rem !default; +$dropdown-header-color: $gray-600 !default; // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navs -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: $gray-300 !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; -$nav-tabs-link-active-color: $gray-700 !default; -$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; -$nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: ($spacer / 2) !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: calc($spacer / 2) !default; // Navbar -$navbar-padding-y: ($spacer / 2) !default; -$navbar-padding-x: $spacer !default; +$navbar-padding-y: calc($spacer / 2) !default; +$navbar-padding-x: $spacer !default; -$navbar-nav-link-padding-x: .5rem !default; +$navbar-nav-link-padding-x: 0.5rem !default; -$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; -$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; - -$navbar-toggler-padding-y: .25rem !default; -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; -$navbar-toggler-border-radius: $btn-border-radius !default; - -$navbar-dark-color: rgba($white, .5) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; - -$navbar-light-color: rgba($black, .5) !default; -$navbar-light-hover-color: rgba($black, .7) !default; -$navbar-light-active-color: rgba($black, .9) !default; -$navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black, .1) !default; +$nav-link-height: ( + $font-size-base * $line-height-base + $nav-link-padding-y * 2 +) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) / 2) !default; + +$navbar-toggler-padding-y: 0.25rem !default; +$navbar-toggler-padding-x: 0.75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; + +$navbar-dark-color: rgba($white, 0.5) !default; +$navbar-dark-hover-color: rgba($white, 0.75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, 0.25) !default; +$navbar-dark-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-dark-toggler-border-color: rgba($white, 0.1) !default; + +$navbar-light-color: rgba($black, 0.5) !default; +$navbar-light-hover-color: rgba($black, 0.7) !default; +$navbar-light-active-color: rgba($black, 0.9) !default; +$navbar-light-disabled-color: rgba($black, 0.3) !default; +$navbar-light-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-light-toggler-border-color: rgba($black, 0.1) !default; // Pagination -$pagination-padding-y: .5rem !default; -$pagination-padding-x: .75rem !default; -$pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-sm: .5rem !default; -$pagination-padding-y-lg: .75rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; - -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-padding-y: 0.5rem !default; +$pagination-padding-x: 0.75rem !default; +$pagination-padding-y-sm: 0.25rem !default; +$pagination-padding-x-sm: 0.5rem !default; +$pagination-padding-y-lg: 0.75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; -$pagination-focus-outline: 0 !default; +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Jumbotron -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-200 !default; - +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; // Cards -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-bg: $white !default; - -$card-img-overlay-padding: 1.25rem !default; +$card-spacer-y: 0.75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, 0.125) !default; +$card-inner-border-radius: calc( + #{$card-border-radius} - #{$card-border-width} +) !default; +$card-cap-bg: rgba($black, 0.03) !default; +$card-bg: $white !default; -$card-group-margin: ($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; +$card-img-overlay-padding: 1.25rem !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; - -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: 0.9 !default; +$tooltip-padding-y: 0.25rem !default; +$tooltip-padding-x: 0.5rem !default; +$tooltip-margin: 0 !default; +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; - -$popover-header-bg: darken($popover-bg, 3%) !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: .5rem !default; -$popover-header-padding-x: .75rem !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black, 0.2) !default; +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.5rem !default; +$popover-header-padding-x: 0.75rem !default; -$popover-arrow-width: 1rem !default; -$popover-arrow-height: .5rem !default; -$popover-arrow-color: $popover-bg !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: 0.5rem !default; +$popover-arrow-color: $popover-bg !default; +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .4em !default; -$badge-border-radius: $border-radius !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; +$badge-border-radius: $border-radius !default; -$badge-pill-padding-x: .6em !default; +$badge-pill-padding-x: 0.6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; - +$badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; - -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-inner-padding: 1rem !default; -$modal-title-line-height: $line-height-base !default; +$modal-dialog-margin: 0.5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; +$modal-title-line-height: $line-height-base !default; -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; +$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; -$modal-transition: transform .3s ease-out !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; +$modal-transition: transform 0.3s ease-out !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: .75rem !default; -$alert-padding-x: 1.25rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; - -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 6 !default; +$alert-padding-y: 0.75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; // Progress bars -$progress-height: 1rem !default; -$progress-font-size: ($font-size-base * .75) !default; -$progress-bg: $gray-200 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; -$progress-bar-color: $white !default; -$progress-bar-bg: theme-color("primary") !default; -$progress-bar-animation-timing: 1s linear infinite !default; -$progress-bar-transition: width .6s ease !default; +$progress-height: 1rem !default; +$progress-font-size: ($font-size-base * 0.75) !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: theme-color("primary") !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width 0.6s ease !default; // List group -$list-group-bg: $white !default; -$list-group-border-color: rgba($black, .125) !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-y: .75rem !default; -$list-group-item-padding-x: 1.25rem !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, 0.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-item-padding-y: 0.75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-active-color: $body-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: $gray-300 !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; - +$thumbnail-padding: 0.25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default; // Figures -$figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-600 !default; - +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; - -$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-padding-y: 0.75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: 0.5rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: quote("/") !default; +$breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-border-radius: $border-radius !default; +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: quote("/") !default; +$breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; - -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: 0.5 !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; -$carousel-control-icon-width: 20px !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-icon-width: 20px !default; -$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-control-prev-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-control-next-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-transition: transform 0.6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 87.5% !default; -$code-color: $pink !default; - -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: $gray-900 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; -$pre-color: $gray-900 !default; -$pre-scrollable-max-height: 340px !default; +$kbd-padding-y: 0.2rem !default; +$kbd-padding-x: 0.4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; // Printing -$print-page-size: a3 !default; -$print-body-min-width: map-get($grid-breakpoints, "lg") !default; +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/src/assets/scss/bootstrap/mixins/_background-variant.scss b/src/assets/scss/bootstrap/mixins/_background-variant.scss index 494439d2..7519953a 100644 --- a/src/assets/scss/bootstrap/mixins/_background-variant.scss +++ b/src/assets/scss/bootstrap/mixins/_background-variant.scss @@ -16,6 +16,7 @@ @mixin bg-gradient-variant($parent, $color) { #{$parent} { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; + background: $color + linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; } } diff --git a/src/assets/scss/bootstrap/mixins/_breakpoints.scss b/src/assets/scss/bootstrap/mixins/_breakpoints.scss index 59f25a27..66c0138b 100644 --- a/src/assets/scss/bootstrap/mixins/_breakpoints.scss +++ b/src/assets/scss/bootstrap/mixins/_breakpoints.scss @@ -14,9 +14,17 @@ // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md -@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if( + $n < length($breakpoint-names), + nth($breakpoint-names, $n + 1), + null + ); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -39,7 +47,7 @@ // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. @@ -81,7 +89,11 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints -@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-between( + $lower, + $upper, + $breakpoints: $grid-breakpoints +) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); diff --git a/src/assets/scss/bootstrap/mixins/_buttons.scss b/src/assets/scss/bootstrap/mixins/_buttons.scss index 06ad6772..cdb0911c 100644 --- a/src/assets/scss/bootstrap/mixins/_buttons.scss +++ b/src/assets/scss/bootstrap/mixins/_buttons.scss @@ -3,7 +3,14 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { +@mixin button-variant( + $background, + $border, + $hover-background: darken($background, 7.5%), + $hover-border: darken($border, 10%), + $active-background: darken($background, 10%), + $active-border: darken($border, 12.5%) +) { color: color-yiq($background); @include gradient-bg($background); border-color: $border; @@ -19,9 +26,9 @@ &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); } } @@ -46,15 +53,21 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($border, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); } } } } -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { +@mixin button-outline-variant( + $color, + $color-hover: color-yiq($color), + $active-background: $color, + $active-border: $color +) { color: $color; background-color: transparent; background-image: none; @@ -68,7 +81,7 @@ &:focus, &.focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); } &.disabled, @@ -87,16 +100,23 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($color, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); } } } } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size( + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius +) { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; diff --git a/src/assets/scss/bootstrap/mixins/_caret.scss b/src/assets/scss/bootstrap/mixins/_caret.scss index 82aea421..5780a07a 100644 --- a/src/assets/scss/bootstrap/mixins/_caret.scss +++ b/src/assets/scss/bootstrap/mixins/_caret.scss @@ -31,8 +31,8 @@ display: inline-block; width: 0; height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-left: $caret-width * 0.85; + vertical-align: $caret-width * 0.85; content: ""; @if $direction == down { @include caret-down; @@ -52,8 +52,8 @@ display: inline-block; width: 0; height: 0; - margin-right: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-right: $caret-width * 0.85; + vertical-align: $caret-width * 0.85; content: ""; @include caret-left; } diff --git a/src/assets/scss/bootstrap/mixins/_forms.scss b/src/assets/scss/bootstrap/mixins/_forms.scss index 3a618786..67d1cf70 100644 --- a/src/assets/scss/bootstrap/mixins/_forms.scss +++ b/src/assets/scss/bootstrap/mixins/_forms.scss @@ -25,7 +25,6 @@ } } - @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; @@ -42,7 +41,7 @@ display: none; max-width: 100%; // Contain to parent when possible padding: $tooltip-padding-y $tooltip-padding-x; - margin-top: .1rem; + margin-top: 0.1rem; font-size: $tooltip-font-size; line-height: $line-height-base; color: color-yiq($color); @@ -58,7 +57,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } ~ .#{$state}-feedback, @@ -116,7 +115,8 @@ &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 1px $body-bg, + 0 0 0 $input-focus-width rgba($color, 0.25); } } } @@ -129,7 +129,9 @@ ~ .custom-file-label { border-color: $color; - &::after { border-color: inherit; } + &::after { + border-color: inherit; + } } ~ .#{$state}-feedback, @@ -139,7 +141,7 @@ &:focus { ~ .custom-file-label { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } } } diff --git a/src/assets/scss/bootstrap/mixins/_gradients.scss b/src/assets/scss/bootstrap/mixins/_gradients.scss index 88c4d64b..3ac4a109 100644 --- a/src/assets/scss/bootstrap/mixins/_gradients.scss +++ b/src/assets/scss/bootstrap/mixins/_gradients.scss @@ -2,7 +2,9 @@ @mixin gradient-bg($color) { @if $enable-gradients { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; + background: $color + linear-gradient(180deg, mix($body-bg, $color, 15%), $color) + repeat-x; } @else { background-color: $color; } @@ -11,35 +13,85 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); +@mixin gradient-x( + $start-color: $gray-700, + $end-color: $gray-800, + $start-percent: 0%, + $end-percent: 100% +) { + background-image: linear-gradient( + to right, + $start-color $start-percent, + $end-color $end-percent + ); background-repeat: repeat-x; } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { - background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); +@mixin gradient-y( + $start-color: $gray-700, + $end-color: $gray-800, + $start-percent: 0%, + $end-percent: 100% +) { + background-image: linear-gradient( + to bottom, + $start-color $start-percent, + $end-color $end-percent + ); background-repeat: repeat-x; } -@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { +@mixin gradient-directional( + $start-color: $gray-700, + $end-color: $gray-800, + $deg: 45deg +) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } -@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { - background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); +@mixin gradient-x-three-colors( + $start-color: $blue, + $mid-color: $purple, + $color-stop: 50%, + $end-color: $red +) { + background-image: linear-gradient( + to right, + $start-color, + $mid-color $color-stop, + $end-color + ); background-repeat: no-repeat; } -@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { - background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); +@mixin gradient-y-three-colors( + $start-color: $blue, + $mid-color: $purple, + $color-stop: 50%, + $end-color: $red +) { + background-image: linear-gradient( + $start-color, + $mid-color $color-stop, + $end-color + ); background-repeat: no-repeat; } @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } -@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { - background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); +@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) { + background-image: linear-gradient( + $angle, + $color 25%, + transparent 25%, + transparent 50%, + $color 50%, + $color 75%, + transparent 75%, + transparent + ); } diff --git a/src/assets/scss/bootstrap/mixins/_grid-framework.scss b/src/assets/scss/bootstrap/mixins/_grid-framework.scss index 7b37f868..467a36ed 100644 --- a/src/assets/scss/bootstrap/mixins/_grid-framework.scss +++ b/src/assets/scss/bootstrap/mixins/_grid-framework.scss @@ -3,7 +3,11 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { +@mixin make-grid-columns( + $columns: $grid-columns, + $gutter: $grid-gutter-width, + $breakpoints: $grid-breakpoints +) { // Common properties for all breakpoints %grid-column { position: relative; @@ -46,17 +50,24 @@ } } - .order#{$infix}-first { order: -1; } + .order#{$infix}-first { + order: -1; + } - .order#{$infix}-last { order: $columns + 1; } + .order#{$infix}-last { + order: $columns + 1; + } @for $i from 0 through $columns { - .order#{$infix}-#{$i} { order: $i; } + .order#{$infix}-#{$i} { + order: $i; + } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { - @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + @if not($infix == "" and $i == 0) { + // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } diff --git a/src/assets/scss/bootstrap/mixins/_grid.scss b/src/assets/scss/bootstrap/mixins/_grid.scss index b75ebcbc..f56d484c 100644 --- a/src/assets/scss/bootstrap/mixins/_grid.scss +++ b/src/assets/scss/bootstrap/mixins/_grid.scss @@ -4,15 +4,17 @@ @mixin make-container() { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: calc($grid-gutter-width / 2); + padding-left: calc($grid-gutter-width / 2); margin-right: auto; margin-left: auto; } - // For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { +@mixin make-container-max-widths( + $max-widths: $container-max-widths, + $breakpoints: $grid-breakpoints +) { @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; @@ -23,8 +25,8 @@ @mixin make-row() { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: calc($grid-gutter-width / -2); + margin-left: calc($grid-gutter-width / -2); } @mixin make-col-ready() { @@ -34,8 +36,8 @@ // later on to override this initial width. width: 100%; min-height: 1px; // Prevent collapsing - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: calc($grid-gutter-width / 2); + padding-left: calc($grid-gutter-width / 2); } @mixin make-col($size, $columns: $grid-columns) { diff --git a/src/assets/scss/bootstrap/mixins/_hover.scss b/src/assets/scss/bootstrap/mixins/_hover.scss index 192f847e..467ce475 100644 --- a/src/assets/scss/bootstrap/mixins/_hover.scss +++ b/src/assets/scss/bootstrap/mixins/_hover.scss @@ -10,7 +10,9 @@ // Issue: https://github.com/twbs/bootstrap/issues/25195 @mixin hover { - &:hover { @content; } + &:hover { + @content; + } } @mixin hover-focus { diff --git a/src/assets/scss/bootstrap/mixins/_image.scss b/src/assets/scss/bootstrap/mixins/_image.scss index 0544f0d2..2792c483 100644 --- a/src/assets/scss/bootstrap/mixins/_image.scss +++ b/src/assets/scss/bootstrap/mixins/_image.scss @@ -2,7 +2,6 @@ // - Responsive image // - Retina image - // Responsive image // // Keep images from scaling beyond the width of their parents. @@ -15,7 +14,6 @@ height: auto; } - // Retina image // // Short retina mixin for setting background-image and -size. @@ -28,9 +26,10 @@ // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution - @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx - only screen and (min-resolution: 2dppx) { // Standardized + @media only screen and (min-resolution: 192dpi){ + // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { + // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } -} +} \ No newline at end of file diff --git a/src/assets/scss/bootstrap/mixins/_nav-divider.scss b/src/assets/scss/bootstrap/mixins/_nav-divider.scss index 4fb37b62..cdd6d5e7 100644 --- a/src/assets/scss/bootstrap/mixins/_nav-divider.scss +++ b/src/assets/scss/bootstrap/mixins/_nav-divider.scss @@ -2,7 +2,10 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { +@mixin nav-divider( + $color: $nav-divider-color, + $margin-y: $nav-divider-margin-y +) { height: 0; margin: $margin-y 0; overflow: hidden; diff --git a/src/assets/scss/bootstrap/mixins/_pagination.scss b/src/assets/scss/bootstrap/mixins/_pagination.scss index ff36eb6b..b614d6d8 100644 --- a/src/assets/scss/bootstrap/mixins/_pagination.scss +++ b/src/assets/scss/bootstrap/mixins/_pagination.scss @@ -1,6 +1,12 @@ // Pagination -@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin pagination-size( + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius +) { .page-link { padding: $padding-y $padding-x; font-size: $font-size; diff --git a/src/assets/scss/bootstrap/utilities/_align.scss b/src/assets/scss/bootstrap/utilities/_align.scss index 8b7df9f7..688d731d 100644 --- a/src/assets/scss/bootstrap/utilities/_align.scss +++ b/src/assets/scss/bootstrap/utilities/_align.scss @@ -1,8 +1,20 @@ // stylelint-disable declaration-no-important -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } -.align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-baseline { + vertical-align: baseline !important; +} // Browser default +.align-top { + vertical-align: top !important; +} +.align-middle { + vertical-align: middle !important; +} +.align-bottom { + vertical-align: bottom !important; +} +.align-text-bottom { + vertical-align: text-bottom !important; +} +.align-text-top { + vertical-align: text-top !important; +} diff --git a/src/assets/scss/bootstrap/utilities/_borders.scss b/src/assets/scss/bootstrap/utilities/_borders.scss index b8832ef7..885c5a84 100644 --- a/src/assets/scss/bootstrap/utilities/_borders.scss +++ b/src/assets/scss/bootstrap/utilities/_borders.scss @@ -4,17 +4,37 @@ // Border // -.border { border: $border-width solid $border-color !important; } -.border-top { border-top: $border-width solid $border-color !important; } -.border-right { border-right: $border-width solid $border-color !important; } -.border-bottom { border-bottom: $border-width solid $border-color !important; } -.border-left { border-left: $border-width solid $border-color !important; } - -.border-0 { border: 0 !important; } -.border-top-0 { border-top: 0 !important; } -.border-right-0 { border-right: 0 !important; } -.border-bottom-0 { border-bottom: 0 !important; } -.border-left-0 { border-left: 0 !important; } +.border { + border: $border-width solid $border-color !important; +} +.border-top { + border-top: $border-width solid $border-color !important; +} +.border-right { + border-right: $border-width solid $border-color !important; +} +.border-bottom { + border-bottom: $border-width solid $border-color !important; +} +.border-left { + border-left: $border-width solid $border-color !important; +} + +.border-0 { + border: 0 !important; +} +.border-top-0 { + border-top: 0 !important; +} +.border-right-0 { + border-right: 0 !important; +} +.border-bottom-0 { + border-bottom: 0 !important; +} +.border-left-0 { + border-left: 0 !important; +} @each $color, $value in $theme-colors { .border-#{$color} { diff --git a/src/assets/scss/bootstrap/utilities/_display.scss b/src/assets/scss/bootstrap/utilities/_display.scss index 20aeeb5f..67cf8bda 100644 --- a/src/assets/scss/bootstrap/utilities/_display.scss +++ b/src/assets/scss/bootstrap/utilities/_display.scss @@ -8,31 +8,66 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .d#{$infix}-none { display: none !important; } - .d#{$infix}-inline { display: inline !important; } - .d#{$infix}-inline-block { display: inline-block !important; } - .d#{$infix}-block { display: block !important; } - .d#{$infix}-table { display: table !important; } - .d#{$infix}-table-row { display: table-row !important; } - .d#{$infix}-table-cell { display: table-cell !important; } - .d#{$infix}-flex { display: flex !important; } - .d#{$infix}-inline-flex { display: inline-flex !important; } + .d#{$infix}-none { + display: none !important; + } + .d#{$infix}-inline { + display: inline !important; + } + .d#{$infix}-inline-block { + display: inline-block !important; + } + .d#{$infix}-block { + display: block !important; + } + .d#{$infix}-table { + display: table !important; + } + .d#{$infix}-table-row { + display: table-row !important; + } + .d#{$infix}-table-cell { + display: table-cell !important; + } + .d#{$infix}-flex { + display: flex !important; + } + .d#{$infix}-inline-flex { + display: inline-flex !important; + } } } - // // Utilities for toggling `display` in print // @media print { - .d-print-none { display: none !important; } - .d-print-inline { display: inline !important; } - .d-print-inline-block { display: inline-block !important; } - .d-print-block { display: block !important; } - .d-print-table { display: table !important; } - .d-print-table-row { display: table-row !important; } - .d-print-table-cell { display: table-cell !important; } - .d-print-flex { display: flex !important; } - .d-print-inline-flex { display: inline-flex !important; } + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } } diff --git a/src/assets/scss/bootstrap/utilities/_flex.scss b/src/assets/scss/bootstrap/utilities/_flex.scss index 3d4266e0..36ad56e6 100644 --- a/src/assets/scss/bootstrap/utilities/_flex.scss +++ b/src/assets/scss/bootstrap/utilities/_flex.scss @@ -8,44 +8,112 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .flex#{$infix}-row { flex-direction: row !important; } - .flex#{$infix}-column { flex-direction: column !important; } - .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } - .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; } - - .flex#{$infix}-wrap { flex-wrap: wrap !important; } - .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } - .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } - .flex#{$infix}-fill { flex: 1 1 auto !important; } - .flex#{$infix}-grow-0 { flex-grow: 0 !important; } - .flex#{$infix}-grow-1 { flex-grow: 1 !important; } - .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } - .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } - - .justify-content#{$infix}-start { justify-content: flex-start !important; } - .justify-content#{$infix}-end { justify-content: flex-end !important; } - .justify-content#{$infix}-center { justify-content: center !important; } - .justify-content#{$infix}-between { justify-content: space-between !important; } - .justify-content#{$infix}-around { justify-content: space-around !important; } - - .align-items#{$infix}-start { align-items: flex-start !important; } - .align-items#{$infix}-end { align-items: flex-end !important; } - .align-items#{$infix}-center { align-items: center !important; } - .align-items#{$infix}-baseline { align-items: baseline !important; } - .align-items#{$infix}-stretch { align-items: stretch !important; } - - .align-content#{$infix}-start { align-content: flex-start !important; } - .align-content#{$infix}-end { align-content: flex-end !important; } - .align-content#{$infix}-center { align-content: center !important; } - .align-content#{$infix}-between { align-content: space-between !important; } - .align-content#{$infix}-around { align-content: space-around !important; } - .align-content#{$infix}-stretch { align-content: stretch !important; } - - .align-self#{$infix}-auto { align-self: auto !important; } - .align-self#{$infix}-start { align-self: flex-start !important; } - .align-self#{$infix}-end { align-self: flex-end !important; } - .align-self#{$infix}-center { align-self: center !important; } - .align-self#{$infix}-baseline { align-self: baseline !important; } - .align-self#{$infix}-stretch { align-self: stretch !important; } + .flex#{$infix}-row { + flex-direction: row !important; + } + .flex#{$infix}-column { + flex-direction: column !important; + } + .flex#{$infix}-row-reverse { + flex-direction: row-reverse !important; + } + .flex#{$infix}-column-reverse { + flex-direction: column-reverse !important; + } + + .flex#{$infix}-wrap { + flex-wrap: wrap !important; + } + .flex#{$infix}-nowrap { + flex-wrap: nowrap !important; + } + .flex#{$infix}-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex#{$infix}-fill { + flex: 1 1 auto !important; + } + .flex#{$infix}-grow-0 { + flex-grow: 0 !important; + } + .flex#{$infix}-grow-1 { + flex-grow: 1 !important; + } + .flex#{$infix}-shrink-0 { + flex-shrink: 0 !important; + } + .flex#{$infix}-shrink-1 { + flex-shrink: 1 !important; + } + + .justify-content#{$infix}-start { + justify-content: flex-start !important; + } + .justify-content#{$infix}-end { + justify-content: flex-end !important; + } + .justify-content#{$infix}-center { + justify-content: center !important; + } + .justify-content#{$infix}-between { + justify-content: space-between !important; + } + .justify-content#{$infix}-around { + justify-content: space-around !important; + } + + .align-items#{$infix}-start { + align-items: flex-start !important; + } + .align-items#{$infix}-end { + align-items: flex-end !important; + } + .align-items#{$infix}-center { + align-items: center !important; + } + .align-items#{$infix}-baseline { + align-items: baseline !important; + } + .align-items#{$infix}-stretch { + align-items: stretch !important; + } + + .align-content#{$infix}-start { + align-content: flex-start !important; + } + .align-content#{$infix}-end { + align-content: flex-end !important; + } + .align-content#{$infix}-center { + align-content: center !important; + } + .align-content#{$infix}-between { + align-content: space-between !important; + } + .align-content#{$infix}-around { + align-content: space-around !important; + } + .align-content#{$infix}-stretch { + align-content: stretch !important; + } + + .align-self#{$infix}-auto { + align-self: auto !important; + } + .align-self#{$infix}-start { + align-self: flex-start !important; + } + .align-self#{$infix}-end { + align-self: flex-end !important; + } + .align-self#{$infix}-center { + align-self: center !important; + } + .align-self#{$infix}-baseline { + align-self: baseline !important; + } + .align-self#{$infix}-stretch { + align-self: stretch !important; + } } } diff --git a/src/assets/scss/bootstrap/utilities/_float.scss b/src/assets/scss/bootstrap/utilities/_float.scss index 01655e9a..1fe35eff 100644 --- a/src/assets/scss/bootstrap/utilities/_float.scss +++ b/src/assets/scss/bootstrap/utilities/_float.scss @@ -2,8 +2,14 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .float#{$infix}-left { @include float-left; } - .float#{$infix}-right { @include float-right; } - .float#{$infix}-none { @include float-none; } + .float#{$infix}-left { + @include float-left; + } + .float#{$infix}-right { + @include float-right; + } + .float#{$infix}-none { + @include float-none; + } } } diff --git a/src/assets/scss/bootstrap/utilities/_position.scss b/src/assets/scss/bootstrap/utilities/_position.scss index 9ecdeeb9..d4adc8fe 100644 --- a/src/assets/scss/bootstrap/utilities/_position.scss +++ b/src/assets/scss/bootstrap/utilities/_position.scss @@ -7,7 +7,9 @@ $positions: static, relative, absolute, fixed, sticky; @each $position in $positions { - .position-#{$position} { position: $position !important; } + .position-#{$position} { + position: $position !important; + } } // Shorthand diff --git a/src/assets/scss/bootstrap/utilities/_shadows.scss b/src/assets/scss/bootstrap/utilities/_shadows.scss index f5d03fcd..243a9698 100644 --- a/src/assets/scss/bootstrap/utilities/_shadows.scss +++ b/src/assets/scss/bootstrap/utilities/_shadows.scss @@ -1,6 +1,14 @@ // stylelint-disable declaration-no-important -.shadow-sm { box-shadow: $box-shadow-sm !important; } -.shadow { box-shadow: $box-shadow !important; } -.shadow-lg { box-shadow: $box-shadow-lg !important; } -.shadow-none { box-shadow: none !important; } +.shadow-sm { + box-shadow: $box-shadow-sm !important; +} +.shadow { + box-shadow: $box-shadow !important; +} +.shadow-lg { + box-shadow: $box-shadow-lg !important; +} +.shadow-none { + box-shadow: none !important; +} diff --git a/src/assets/scss/bootstrap/utilities/_sizing.scss b/src/assets/scss/bootstrap/utilities/_sizing.scss index e95a4db3..5737d46e 100644 --- a/src/assets/scss/bootstrap/utilities/_sizing.scss +++ b/src/assets/scss/bootstrap/utilities/_sizing.scss @@ -4,9 +4,15 @@ @each $prop, $abbrev in (width: w, height: h) { @each $size, $length in $sizes { - .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}-#{$size} { + #{$prop}: $length !important; + } } } -.mw-100 { max-width: 100% !important; } -.mh-100 { max-height: 100% !important; } +.mw-100 { + max-width: 100% !important; +} +.mh-100 { + max-height: 100% !important; +} diff --git a/src/assets/scss/bootstrap/utilities/_spacing.scss b/src/assets/scss/bootstrap/utilities/_spacing.scss index b2e2354b..e7f07715 100644 --- a/src/assets/scss/bootstrap/utilities/_spacing.scss +++ b/src/assets/scss/bootstrap/utilities/_spacing.scss @@ -8,8 +8,9 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}#{$infix}-#{$size} { + #{$prop}: $length !important; + } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $length !important; @@ -30,7 +31,9 @@ } // Some special margin utils - .m#{$infix}-auto { margin: auto !important; } + .m#{$infix}-auto { + margin: auto !important; + } .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; diff --git a/src/assets/scss/bootstrap/utilities/_text.scss b/src/assets/scss/bootstrap/utilities/_text.scss index 9d96c465..cb972ccf 100644 --- a/src/assets/scss/bootstrap/utilities/_text.scss +++ b/src/assets/scss/bootstrap/utilities/_text.scss @@ -4,13 +4,21 @@ // Text // -.text-monospace { font-family: $font-family-monospace; } +.text-monospace { + font-family: $font-family-monospace; +} // Alignment -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-truncate { @include text-truncate; } +.text-justify { + text-align: justify !important; +} +.text-nowrap { + white-space: nowrap !important; +} +.text-truncate { + @include text-truncate; +} // Responsive alignment @@ -18,38 +26,68 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .text#{$infix}-left { text-align: left !important; } - .text#{$infix}-right { text-align: right !important; } - .text#{$infix}-center { text-align: center !important; } + .text#{$infix}-left { + text-align: left !important; + } + .text#{$infix}-right { + text-align: right !important; + } + .text#{$infix}-center { + text-align: center !important; + } } } // Transformation -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } +.text-lowercase { + text-transform: lowercase !important; +} +.text-uppercase { + text-transform: uppercase !important; +} +.text-capitalize { + text-transform: capitalize !important; +} // Weight and italics -.font-weight-light { font-weight: $font-weight-light !important; } -.font-weight-normal { font-weight: $font-weight-normal !important; } -.font-weight-bold { font-weight: $font-weight-bold !important; } -.font-italic { font-style: italic !important; } +.font-weight-light { + font-weight: $font-weight-light !important; +} +.font-weight-normal { + font-weight: $font-weight-normal !important; +} +.font-weight-bold { + font-weight: $font-weight-bold !important; +} +.font-italic { + font-style: italic !important; +} // Contextual colors -.text-white { color: $white !important; } +.text-white { + color: $white !important; +} @each $color, $value in $theme-colors { @include text-emphasis-variant(".text-#{$color}", $value); } -.text-body { color: $body-color !important; } -.text-muted { color: $text-muted !important; } +.text-body { + color: $body-color !important; +} +.text-muted { + color: $text-muted !important; +} -.text-black-50 { color: rgba($black, .5) !important; } -.text-white-50 { color: rgba($white, .5) !important; } +.text-black-50 { + color: rgba($black, 0.5) !important; +} +.text-white-50 { + color: rgba($white, 0.5) !important; +} // Misc diff --git a/src/assets/scss/custom/_alerts.scss b/src/assets/scss/custom/_alerts.scss index 9e5585ad..5e47ea51 100644 --- a/src/assets/scss/custom/_alerts.scss +++ b/src/assets/scss/custom/_alerts.scss @@ -1,75 +1,75 @@ .alert { - padding: $alert-padding-y $alert-padding-x; - border: 0; - font-size: $font-size-sm; - @include border-radius($alert-border-radius); + padding: $alert-padding-y $alert-padding-x; + border: 0; + font-size: $font-size-sm; + @include border-radius($alert-border-radius); - .alert-inner--icon { - font-size: 1.25rem; - margin-right: 1.25rem; - display: inline-block; - vertical-align: middle; + .alert-inner--icon { + font-size: 1.25rem; + margin-right: 1.25rem; + display: inline-block; + vertical-align: middle; - i.ni { - position: relative; - top: 1px; - } - } - .alert-inner--text { - display: inline-block; - vertical-align: middle; + i.ni { + position: relative; + top: 1px; } + } + .alert-inner--text { + display: inline-block; + vertical-align: middle; + } } .alert:not(.alert-secondary) { - color: $white; + color: $white; } [class*="alert-"] { - .alert-link { - color: $white; - border-bottom: 1px dotted rgba($white, .5); - } + .alert-link { + color: $white; + border-bottom: 1px dotted rgba($white, 0.5); + } } .alert-heading { - font-weight: $font-weight-bold; - font-size: $h4-font-size; - margin-top: .15rem; -} + font-weight: $font-weight-bold; + font-size: $h4-font-size; + margin-top: 0.15rem; +} .alert-dismissible { - .close { - top: 50%; - right: $alert-padding-x; - padding: 0; - transform: translateY(-50%); - color: rgba($white, .6); - opacity: 1; + .close { + top: 50%; + right: $alert-padding-x; + padding: 0; + transform: translateY(-50%); + color: rgba($white, 0.6); + opacity: 1; - &:hover, - &:focus { - color: rgba($white, .9); - opacity: 1 !important; - } + &:hover, + &:focus { + color: rgba($white, 0.9); + opacity: 1 !important; + } - @include media-breakpoint-down(xs) { - top: 1rem; - right: .5rem; - } + @include media-breakpoint-down(xs) { + top: 1rem; + right: 0.5rem; + } - &>span:not(.sr-only) { - font-size: 1.5rem; - background-color: transparent; - color: rgba($white, .6); - } + & > span:not(.sr-only) { + font-size: 1.5rem; + background-color: transparent; + color: rgba($white, 0.6); + } - &:hover, - &:focus { - &>span:not(.sr-only) { - background-color: transparent; - color: rgba($white, .9); - } - } + &:hover, + &:focus { + & > span:not(.sr-only) { + background-color: transparent; + color: rgba($white, 0.9); + } } + } } diff --git a/src/assets/scss/custom/_avatars.scss b/src/assets/scss/custom/_avatars.scss index c5e6766e..d8aae13e 100644 --- a/src/assets/scss/custom/_avatars.scss +++ b/src/assets/scss/custom/_avatars.scss @@ -1,51 +1,50 @@ .avatar { - color: $white; - background-color: $gray-500; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 1rem; - border-radius: 50%; - height: 48px; - width: 48px; -} + color: $white; + background-color: $gray-500; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 50%; + height: 48px; + width: 48px; +} .avatar img { - width: 100%; - border-radius: 50%; + width: 100%; + border-radius: 50%; } .avatar + .avatar-content { - display: inline-block; - margin-left: .75rem; + display: inline-block; + margin-left: 0.75rem; } .avatar-lg { - width: 58px; - height: 58px; - font-size: $font-size-sm; + width: 58px; + height: 58px; + font-size: $font-size-sm; } .avatar-sm { - width: 38px; - height: 38px; - font-size: $font-size-sm; + width: 38px; + height: 38px; + font-size: $font-size-sm; } -// Overlapped avatars +// Overlapped avatars .avatar-group { - .avatar { - position: relative; - z-index: 2; - border: 2px solid $card-bg; - - &:hover { - z-index: 3; - } - } + .avatar { + position: relative; + z-index: 2; + border: 2px solid $card-bg; + + &:hover { + z-index: 3; + } + } - .avatar + .avatar { - margin-left: -1rem; - - } + .avatar + .avatar { + margin-left: -1rem; + } } diff --git a/src/assets/scss/custom/_badge.scss b/src/assets/scss/custom/_badge.scss index e7f91016..a9441a13 100644 --- a/src/assets/scss/custom/_badge.scss +++ b/src/assets/scss/custom/_badge.scss @@ -1,71 +1,70 @@ .badge { - text-transform: $badge-text-transfom; + text-transform: $badge-text-transfom; - a { - color: #FFF; - } + a { + color: #fff; + } } .badge + .badge { - margin-left: 3px; + margin-left: 3px; } // Variations .badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; } .badge-circle { - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - width: 2rem; - height: 2rem; - font-size: .875rem; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 2rem; + height: 2rem; + font-size: 0.875rem; } // Multiple inline badges .badge-inline { - margin-right: .625rem; + margin-right: 0.625rem; } .badge-inline + span { - top: 2px; - position: relative; + top: 2px; + position: relative; } .badge-inline + span > a { - text-decoration: underline; + text-decoration: underline; } // Sizes .badge-md { - padding: .65em 1em; + padding: 0.65em 1em; } .badge-lg { - padding: .85em 1.375em; + padding: 0.85em 1.375em; } - // Color variations .badge-secondary { - color: $gray-800; + color: $gray-800; } // Link badges .btn { - .badge { - &:not(:first-child) { - margin-left: .5rem; - } - &:not(:last-child) { - margin-right: .5rem; - } + .badge { + &:not(:first-child) { + margin-left: 0.5rem; + } + &:not(:last-child) { + margin-right: 0.5rem; } + } } diff --git a/src/assets/scss/custom/_buttons.scss b/src/assets/scss/custom/_buttons.scss index 61dd4337..a38ab71f 100644 --- a/src/assets/scss/custom/_buttons.scss +++ b/src/assets/scss/custom/_buttons.scss @@ -1,160 +1,157 @@ // General .btn { - position: relative; - text-transform: $btn-text-transform; - transition: $transition-base; - will-change: transform; - letter-spacing: $btn-letter-spacing; - font-size: $input-btn-font-size; - - &:hover { - @include box-shadow($btn-hover-box-shadow); - transform: translateY(-1px); - } - - &:not(:last-child) { - margin-right: .5rem; - } + position: relative; + text-transform: $btn-text-transform; + transition: $transition-base; + will-change: transform; + letter-spacing: $btn-letter-spacing; + font-size: $input-btn-font-size; + + &:hover { + @include box-shadow($btn-hover-box-shadow); + transform: translateY(-1px); + } + + &:not(:last-child) { + margin-right: 0.5rem; + } } .btn-group, .input-group { - .btn { - margin-right: 0; - transform: translateY(0); - } + .btn { + margin-right: 0; + transform: translateY(0); + } } // Sizes .btn-sm { - font-size: $input-btn-font-size-sm; + font-size: $input-btn-font-size-sm; } .btn-lg { - font-size: $input-btn-font-size-lg; + font-size: $input-btn-font-size-lg; } // Fixes [class*="btn-outline-"] { - border-width: 1px; + border-width: 1px; } .btn-outline-secondary { - color: darken(theme-color("secondary"), 50%); + color: darken(theme-color("secondary"), 50%); } .btn-inner--icon { - i:not(.fa) { - position: relative; - top: 2px; - } + i:not(.fa) { + position: relative; + top: 2px; + } } .btn-link { - font-weight: $btn-font-weight; - box-shadow: none; + font-weight: $btn-font-weight; + box-shadow: none; - &:hover { - box-shadow: none; - transform: none; - } + &:hover { + box-shadow: none; + transform: none; + } } .btn-neutral { - color: theme-color("primary"); + color: theme-color("primary"); } // Icons .btn svg:not(:first-child), .btn i:not(:first-child) { - margin-left: 0.5rem; + margin-left: 0.5rem; } - + .btn svg:not(:last-child), .btn i:not(:last-child) { - margin-right: 0.5rem; + margin-right: 0.5rem; } // Icon labels .btn-icon-label { + position: relative; + + .btn-inner--icon { + position: absolute; + height: 100%; + line-height: 1; + border-radius: 0; + text-align: center; + margin: 0; + width: 3em; + background-color: rgba(0, 0, 0, 0.1); + } + .btn-inner--icon:not(:first-child) { + right: 0; + top: 0; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + } + .btn-inner--icon:not(:last-child) { + left: 0; + top: 0; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + } + .btn-inner--icon svg { position: relative; + top: 50%; + transform: translateY(-50%); + } - .btn-inner--icon { - position: absolute; - height: 100%; - line-height: 1; - border-radius: 0; - text-align: center; - margin: 0; - width: 3em; - background-color: rgba(0, 0, 0, .1); - } - .btn-inner--icon:not(:first-child) { - right: 0; - top: 0; - border-top-right-radius: inherit; - border-bottom-right-radius: inherit; - } - .btn-inner--icon:not(:last-child) { - left: 0; - top: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - } - .btn-inner--icon svg { - position: relative; - top: 50%; - transform: translateY(-50%); - } - - .btn-inner--text:not(:first-child) { - padding-left: 3em; - } - .btn-inner--text:not(:last-child) { - padding-right: 3em; - } + .btn-inner--text:not(:first-child) { + padding-left: 3em; + } + .btn-inner--text:not(:last-child) { + padding-right: 3em; + } } - -// Icons +// Icons .btn-icon { - .btn-inner--icon { - img { - width: 20px; - } - } - .btn-inner--text:not(:first-child) { - margin-left: .75em; - } - .btn-inner--text:not(:last-child) { - margin-right: .75em; + .btn-inner--icon { + img { + width: 20px; } + } + .btn-inner--text:not(:first-child) { + margin-left: 0.75em; + } + .btn-inner--text:not(:last-child) { + margin-right: 0.75em; + } } .btn-icon-only { - width: 2.375rem; - height: 2.375rem; - padding: 0; + width: 2.375rem; + height: 2.375rem; + padding: 0; } a.btn-icon-only { - line-height: 2.5; + line-height: 2.5; } .btn-icon-only.btn-sm { - width: 2rem; - height: 2rem; + width: 2rem; + height: 2rem; } - // Brand buttons -@each $color, -$value in $brand-colors { - .btn-#{$color} { - @include button-variant($value, $value); - } +@each $color, $value in $brand-colors { + .btn-#{$color} { + @include button-variant($value, $value); + } } diff --git a/src/assets/scss/custom/_card.scss b/src/assets/scss/custom/_card.scss index 450b8312..a4e6c909 100644 --- a/src/assets/scss/custom/_card.scss +++ b/src/assets/scss/custom/_card.scss @@ -1,95 +1,95 @@ .card { - position: relative; + position: relative; } .profile-page { - .card-profile { - margin-top: -150px; - - .card-profile-image { - position: relative; - //min-height: 130px; - - img { - max-width: 180px; - border-radius: $border-radius; - @extend .shadow; - transform: translate(-50%,-30%); - position: absolute; - left: 50%; - transition: $transition-base; - - &:hover { - transform: translate(-50%, -33%); - } - } + .card-profile { + margin-top: -150px; + + .card-profile-image { + position: relative; + //min-height: 130px; + + img { + max-width: 180px; + border-radius: $border-radius; + @extend .shadow; + transform: translate(-50%, -30%); + position: absolute; + left: 50%; + transition: $transition-base; + + &:hover { + transform: translate(-50%, -33%); } + } + } - .card-profile-stats { - padding: 1rem 0; - - > div { - text-align: center; - margin-right: 1rem; - padding: .875rem; - - &:last-child { - margin-right: 0; - } - - .heading { - font-size: 1.1rem; - font-weight: bold; - display: block; - } - .description { - font-size: .875rem; - color: $gray-500; - } - } - } + .card-profile-stats { + padding: 1rem 0; - .card-profile-actions { - padding: .875rem; - } + > div { + text-align: center; + margin-right: 1rem; + padding: 0.875rem; - @include media-breakpoint-down(xs) { - .card-profile-actions { - margin-top: 110px; - } + &:last-child { + margin-right: 0; } - @include media-breakpoint-between(sm, md) { - .card-profile-stats { - margin-top: 30px; - } + .heading { + font-size: 1.1rem; + font-weight: bold; + display: block; } + .description { + font-size: 0.875rem; + color: $gray-500; + } + } + } + + .card-profile-actions { + padding: 0.875rem; + } + + @include media-breakpoint-down(xs) { + .card-profile-actions { + margin-top: 110px; + } + } + + @include media-breakpoint-between(sm, md) { + .card-profile-stats { + margin-top: 30px; + } } + } } // Card with blockquotes .card { - .card-blockquote { - padding: 2rem; - position: relative; - - .svg-bg { - display: block; - width: 100%; - height: 95px; - position: absolute; - top: -94px; - left: 0; - } + .card-blockquote { + padding: 2rem; + position: relative; + + .svg-bg { + display: block; + width: 100%; + height: 95px; + position: absolute; + top: -94px; + left: 0; } + } } // Animated cards .card-lift--hover { - &:hover { - transform: translateY(-20px); - @include transition($transition-base); - } -} \ No newline at end of file + &:hover { + transform: translateY(-20px); + @include transition($transition-base); + } +} diff --git a/src/assets/scss/custom/_close.scss b/src/assets/scss/custom/_close.scss index 678cc99f..1143e22c 100644 --- a/src/assets/scss/custom/_close.scss +++ b/src/assets/scss/custom/_close.scss @@ -1,29 +1,29 @@ -.close { +.close { + @if $enable-transitions { + transition: $transition-base; + } + & > span:not(.sr-only) { + background-color: $close-bg; + color: $close-color; + line-height: 17px; + height: 1.25rem; + width: 1.25rem; + border-radius: 50%; + font-size: 1.25rem; + display: block; @if $enable-transitions { - transition: $transition-base; - } - &>span:not(.sr-only) { - background-color: $close-bg; - color: $close-color; - line-height: 17px; - height: 1.25rem; - width: 1.25rem; - border-radius: 50%; - font-size: 1.25rem; - display: block; - @if $enable-transitions { - transition: $transition-base; - } - } + transition: $transition-base; + } + } + + &:hover, + &:focus { + background-color: $close-hover-bg; + color: $close-hover-color; + outline: none; - &:hover, - &:focus { - background-color: $close-hover-bg; - color: $close-hover-color; - outline: none; - - span:not(.sr-only) { - background-color: $close-hover-bg; - } + span:not(.sr-only) { + background-color: $close-hover-bg; } + } } diff --git a/src/assets/scss/custom/_custom-forms.scss b/src/assets/scss/custom/_custom-forms.scss index c7418b47..b0d9eb60 100644 --- a/src/assets/scss/custom/_custom-forms.scss +++ b/src/assets/scss/custom/_custom-forms.scss @@ -1,186 +1,190 @@ .custom-control-label { - // Background-color and (when enabled) gradient - &::before { - border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color; - @if $enable-transitions { - transition: $input-transition; - } + // Background-color and (when enabled) gradient + &::before { + border: $custom-control-indicator-border-width solid + $custom-control-indicator-border-color; + @if $enable-transitions { + transition: $input-transition; } + } - span { - position: relative; - top: 2px; - } -} + span { + position: relative; + top: 2px; + } +} .custom-control-label { - margin-bottom: 0; + margin-bottom: 0; } .custom-control-input { - &:active~.custom-control-label::before { - border-color: $custom-control-indicator-active-border-color; - } + &:active ~ .custom-control-label::before { + border-color: $custom-control-indicator-active-border-color; + } } -// Alternative custom control +// Alternative custom control .custom-control-alternative { - .custom-control-label { - // Background-color and (when enabled) gradient + .custom-control-label { + // Background-color and (when enabled) gradient + &::before { + border: 0; + box-shadow: $input-alternative-box-shadow; + } + } + + .custom-control-input { + &:checked { + ~ .custom-control-label { &::before { - border: 0; - box-shadow: $input-alternative-box-shadow; - } - } - - .custom-control-input { - &:checked { - ~ .custom-control-label { - &::before { - box-shadow: $input-focus-alternative-box-shadow; - } - } + box-shadow: $input-focus-alternative-box-shadow; } + } + } - &:active~.custom-control-label::before, - &:focus~.custom-control-label::before { - box-shadow: $input-alternative-box-shadow; - } + &:active ~ .custom-control-label::before, + &:focus ~ .custom-control-label::before { + box-shadow: $input-alternative-box-shadow; } + } } - // Checkboxes .custom-checkbox { - .custom-control-input~.custom-control-label { - cursor: pointer; - font-size: $font-size-sm; + .custom-control-input ~ .custom-control-label { + cursor: pointer; + font-size: $font-size-sm; + } + + .custom-control-input { + &:checked { + ~ .custom-control-label { + &::before { + border-color: $custom-control-indicator-checked-border-color; + } + &::after { + background-image: $custom-checkbox-indicator-icon-checked; + } + } } - .custom-control-input { - &:checked { - ~ .custom-control-label { - &::before { - border-color: $custom-control-indicator-checked-border-color; - } - &::after { - background-image: $custom-checkbox-indicator-icon-checked; - } - } + &:disabled { + ~ .custom-control-label { + &::before { + border-color: $custom-control-indicator-disabled-bg; } + } - &:disabled { - ~ .custom-control-label { - &::before { - border-color: $custom-control-indicator-disabled-bg; - } - } - - &:checked { - &::before { - border-color: $custom-control-indicator-checked-disabled-bg; - } - } + &:checked { + &::before { + border-color: $custom-control-indicator-checked-disabled-bg; } + } } + } } // Radios .custom-radio { - .custom-control-input~.custom-control-label { - cursor: pointer; - font-size: $font-size-sm; + .custom-control-input ~ .custom-control-label { + cursor: pointer; + font-size: $font-size-sm; + } + + .custom-control-input { + &:checked { + ~ .custom-control-label { + &::before { + border-color: $custom-control-indicator-checked-border-color; + } + &::after { + background-image: $custom-radio-indicator-icon-checked; + } + } } - .custom-control-input { - &:checked { - ~ .custom-control-label { - &::before { - border-color: $custom-control-indicator-checked-border-color; - } - &::after { - background-image: $custom-radio-indicator-icon-checked; - } - } + &:disabled { + ~ .custom-control-label { + &::before { + border-color: $custom-control-indicator-disabled-bg; } + } - &:disabled { - ~ .custom-control-label { - &::before { - border-color: $custom-control-indicator-disabled-bg; - } - } - - &:checked { - &::before { - border-color: $custom-control-indicator-checked-disabled-bg; - } - } + &:checked { + &::before { + border-color: $custom-control-indicator-checked-disabled-bg; } + } } - + } } // Toggles .custom-toggle { - position: relative; - display: inline-block; - width: 50px; - height: 1.5rem; - - input { - display: none; - - &:checked { - + .custom-toggle-slider { - border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color; - - &:before { - background: $custom-toggle-checked-bg; - transform: translateX(1.625rem); - } - } + position: relative; + display: inline-block; + width: 50px; + height: 1.5rem; + + input { + display: none; + + &:checked { + + .custom-toggle-slider { + border: $custom-control-indicator-border-width solid + $custom-control-indicator-checked-border-color; + + &:before { + background: $custom-toggle-checked-bg; + transform: translateX(1.625rem); } - - &:disabled { - + .custom-toggle-slider { - border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg; - } - - &:checked { - + .custom-toggle-slider { - border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg; - - &:before { - background-color: lighten($custom-control-indicator-checked-bg, 10%); - } - } - } + } + } + + &:disabled { + + .custom-toggle-slider { + border: $custom-control-indicator-border-width solid + $custom-control-indicator-disabled-bg; + } + + &:checked { + + .custom-toggle-slider { + border: $custom-control-indicator-border-width solid + $custom-control-indicator-disabled-bg; + + &:before { + background-color: lighten( + $custom-control-indicator-checked-bg, + 10% + ); + } } + } } + } } .custom-toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: $custom-control-indicator-border-width solid $input-border-color; + border-radius: 34px !important; + background-color: transparent; + + &:before { position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: $custom-control-indicator-border-width solid $input-border-color; - border-radius: 34px !important; - background-color: transparent; - - - &:before { - position: absolute; - content: ""; - height: 18px; - width: 18px; - left: 2px; - bottom: 2px; - border-radius: 50% !important; - background-color: $custom-toggle-slider-bg; - transition: $input-transition; - } + content: ""; + height: 18px; + width: 18px; + left: 2px; + bottom: 2px; + border-radius: 50% !important; + background-color: $custom-toggle-slider-bg; + transition: $input-transition; + } } diff --git a/src/assets/scss/custom/_dropdown.scss b/src/assets/scss/custom/_dropdown.scss index 5b6eede6..a6ec1d8b 100644 --- a/src/assets/scss/custom/_dropdown.scss +++ b/src/assets/scss/custom/_dropdown.scss @@ -2,91 +2,90 @@ .dropup, .dropright, .dropleft { - display: inline-block; + display: inline-block; } .dropdown-menu { - min-width: 12rem; - - .dropdown-item { - padding: .5rem 1rem; - font-size: $font-size-sm; - > i, - > svg { - margin-right: 1rem; - font-size: 1rem; - vertical-align: -17%; - } + min-width: 12rem; + + .dropdown-item { + padding: 0.5rem 1rem; + font-size: $font-size-sm; + > i, + > svg { + margin-right: 1rem; + font-size: 1rem; + vertical-align: -17%; } + } } .dropdown-header { - padding-left: 1rem; - padding-right: 1rem; - color: $gray-100; - font-size: .625rem; - text-transform: uppercase; - font-weight: 700; -} - + padding-left: 1rem; + padding-right: 1rem; + color: $gray-100; + font-size: 0.625rem; + text-transform: uppercase; + font-weight: 700; +} // Inverse dropdown menu .dropdown-menu-inverse { - background: #282f37; - border-color: #242a31; + background: #282f37; + border-color: #242a31; - .dropdown-item { - color: #dadada; + .dropdown-item { + color: #dadada; - &:active, - &:focus, - &:hover { - color: #fff; - background: #31353e; - } + &:active, + &:focus, + &:hover { + color: #fff; + background: #31353e; } + } - .dropdown-divider { - background: #191e23; - } + .dropdown-divider { + background: #191e23; + } } // Dropdown elements .dropdown-menu { - a.media { - - > div { - &:first-child { - line-height: 1; - } - } + a.media { + > div { + &:first-child { + line-height: 1; + } + } - p { - color: $gray-600; - } - &:hover { - .heading, p { - color: theme-color("default") !important; - } - } + p { + color: $gray-600; + } + &:hover { + .heading, + p { + color: theme-color("default") !important; + } } + } } // Dropown: Sizes .dropdown-menu-sm { - min-width: 100px; - border: $border-radius-lg; + min-width: 100px; + border: $border-radius-lg; } .dropdown-menu-lg { - min-width: 260px; - border-radius: $border-radius-lg; + min-width: 260px; + border-radius: $border-radius-lg; } .dropdown-menu-xl { - min-width: 450px; - border-radius: $border-radius-lg; + min-width: 450px; + border-radius: $border-radius-lg; } diff --git a/src/assets/scss/custom/_footer.scss b/src/assets/scss/custom/_footer.scss index 6661fc63..b66c37a1 100644 --- a/src/assets/scss/custom/_footer.scss +++ b/src/assets/scss/custom/_footer.scss @@ -1,83 +1,83 @@ .footer { - background: $footer-bg; - padding: 3rem 0; - //color: $footer-color; + background: $footer-bg; + padding: 3rem 0; + //color: $footer-color; - .col-footer { - .heading { - color: $footer-heading-color; - letter-spacing: 0; - font-size: $footer-heading-font-size; - text-transform: uppercase; - font-weight: $font-weight-bold; - margin-bottom: 1rem; - } + .col-footer { + .heading { + color: $footer-heading-color; + letter-spacing: 0; + font-size: $footer-heading-font-size; + text-transform: uppercase; + font-weight: $font-weight-bold; + margin-bottom: 1rem; } + } - .nav .nav-item .nav-link, - .footer-link { - color: $footer-link-color !important; + .nav .nav-item .nav-link, + .footer-link { + color: $footer-link-color !important; - &:hover { - color: $footer-link-hover-color !important; - } + &:hover { + color: $footer-link-hover-color !important; } + } - .list-unstyled li a { - display: inline-block; - padding: .125rem 0; - color: $footer-link-color; - font-size: $footer-link-font-size; + .list-unstyled li a { + display: inline-block; + padding: 0.125rem 0; + color: $footer-link-color; + font-size: $footer-link-font-size; - &:hover { - color: $footer-link-hover-color; - } + &:hover { + color: $footer-link-hover-color; } + } - .copyright { - font-size: $font-size-sm; - } + .copyright { + font-size: $font-size-sm; + } } .footer-dark { - .col-footer .heading { - color: $white; - } + .col-footer .heading { + color: $white; + } } .footer.has-cards { - overflow: hidden; - padding-top: 500px; - margin-top: -420px; - position: relative; - background: transparent; - pointer-events: none; + overflow: hidden; + padding-top: 500px; + margin-top: -420px; + position: relative; + background: transparent; + pointer-events: none; - &:before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 600px; - height: 2000px; - background: theme-color("secondary"); - transform: skew(0,-8deg); - } + &:before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 600px; + height: 2000px; + background: theme-color("secondary"); + transform: skew(0, -8deg); + } - .container { - pointer-events: auto; - position: relative; - } + .container { + pointer-events: auto; + position: relative; + } } .nav-footer { - .nav-link { - font-size: $font-size-sm; - } + .nav-link { + font-size: $font-size-sm; + } - .nav-item:last-child { - .nav-link { - padding-right: 0; - } + .nav-item:last-child { + .nav-link { + padding-right: 0; } + } } diff --git a/src/assets/scss/custom/_forms.scss b/src/assets/scss/custom/_forms.scss index 37a8ba69..f84a4fb8 100644 --- a/src/assets/scss/custom/_forms.scss +++ b/src/assets/scss/custom/_forms.scss @@ -1,139 +1,137 @@ /* Form controls */ label { - font-size: $font-size-sm; + font-size: $font-size-sm; } .form-control { - font-size: $input-btn-font-size; + font-size: $input-btn-font-size; - &:focus { - &::placeholder { - color: $input-focus-placeholder-color; - } + &:focus { + &::placeholder { + color: $input-focus-placeholder-color; } + } } - /* Textareas */ textarea[resize="none"] { - resize: none!important; + resize: none !important; } textarea[resize="both"] { - resize: both!important; + resize: both !important; } textarea[resize="vertical"] { - resize: vertical!important; + resize: vertical !important; } textarea[resize="horizontal"] { - resize: horizontal!important; + resize: horizontal !important; } - /* Alternative styles */ .form-control-muted { - background-color: $input-muted-bg; - border-color: $input-muted-bg; - box-shadow: none; + background-color: $input-muted-bg; + border-color: $input-muted-bg; + box-shadow: none; - &:focus { - background-color: $input-muted-bg; - //box-shadow: none; - } + &:focus { + background-color: $input-muted-bg; + //box-shadow: none; + } } .form-control-alternative { - box-shadow: $input-alternative-box-shadow; - border: 0; - transition: box-shadow .15s ease; + box-shadow: $input-alternative-box-shadow; + border: 0; + transition: box-shadow 0.15s ease; - &:focus { - box-shadow: $input-focus-alternative-box-shadow; - } + &:focus { + box-shadow: $input-focus-alternative-box-shadow; + } } // Sizes .form-control-lg { - font-size: $font-size-base; + font-size: $font-size-base; } // Validation .has-success, .has-danger { - position: relative; - - &:after { - width: 19px; - height: 19px; - line-height: 19px; - text-align: center; - font-family: 'NucleoIcons'; - display: inline-block; - position: absolute; - right: 15px; - top: 2px; - transform: translateY(50%); - border-radius: 50%; - font-size: 9px; - opacity: 1; - } + position: relative; + + &:after { + width: 19px; + height: 19px; + line-height: 19px; + text-align: center; + font-family: "NucleoIcons"; + display: inline-block; + position: absolute; + right: 15px; + top: 2px; + transform: translateY(50%); + border-radius: 50%; + font-size: 9px; + opacity: 1; + } } .has-success { - &:after { - content: "\ea26"; - color: darken($form-feedback-valid-color, 18%); - background-color: $form-feedback-valid-bg; - } - .form-control { - background-color: $input-focus-bg; + &:after { + content: "\ea26"; + color: darken($form-feedback-valid-color, 18%); + background-color: $form-feedback-valid-bg; + } + .form-control { + background-color: $input-focus-bg; - &:focus { - border-color: $input-focus-border-color; - } + &:focus { + border-color: $input-focus-border-color; + } - // Placeholder - &::placeholder { - color: $form-feedback-valid-color; - } + // Placeholder + &::placeholder { + color: $form-feedback-valid-color; } + } - &.focused { - &:after { - //opacity: 0; - } + &.focused { + &:after { + //opacity: 0; } + } } .has-danger { - &:after { - content: "\ea53"; - color: darken($form-feedback-invalid-color, 18%); - background-color: $form-feedback-invalid-bg; - } - .form-control { - background-color: $input-focus-bg; + &:after { + content: "\ea53"; + color: darken($form-feedback-invalid-color, 18%); + background-color: $form-feedback-invalid-bg; + } + .form-control { + background-color: $input-focus-bg; - &:focus { - border-color: $input-focus-border-color; - } + &:focus { + border-color: $input-focus-border-color; + } - // Placeholder - &::placeholder { - color: $form-feedback-invalid-color; - } + // Placeholder + &::placeholder { + color: $form-feedback-invalid-color; } + } - &.focused { - &:after { - //opacity: 0; - } + &.focused { + &:after { + //opacity: 0; } + } } diff --git a/src/assets/scss/custom/_functions.scss b/src/assets/scss/custom/_functions.scss index 99ef5914..d3838442 100644 --- a/src/assets/scss/custom/_functions.scss +++ b/src/assets/scss/custom/_functions.scss @@ -1,23 +1,23 @@ // Retrieve color Sass maps @function section-color($key: "primary") { - @return map-get($section-colors, $key); + @return map-get($section-colors, $key); } // Lines colors @function shapes-primary-color($key: "step-1-gradient-bg") { - @return map-get($shapes-primary-colors, $key); + @return map-get($shapes-primary-colors, $key); } @function shapes-default-color($key: "step-1-gradient-bg") { - @return map-get($shapes-default-colors, $key); + @return map-get($shapes-default-colors, $key); } @function lines-light-color($key: "step-1-gradient-bg") { - @return map-get($shapes-light-colors, $key); + @return map-get($shapes-light-colors, $key); } @function shapes-dark-color($key: "step-1-gradient-bg") { - @return map-get($shapes-dark-colors, $key); -} \ No newline at end of file + @return map-get($shapes-dark-colors, $key); +} diff --git a/src/assets/scss/custom/_global.scss b/src/assets/scss/custom/_global.scss index 5132e07a..b82f8880 100644 --- a/src/assets/scss/custom/_global.scss +++ b/src/assets/scss/custom/_global.scss @@ -1,172 +1,168 @@ // Nucleo icons .section-nucleo-icons .icons-container { - position: relative; - max-width: 100%; - height: 360px; - margin: 0 auto; - z-index: 1; + position: relative; + max-width: 100%; + height: 360px; + margin: 0 auto; + z-index: 1; } .section-nucleo-icons { + --icon-size: 5rem; + --icon-sm-size: 3.75rem; + --gutter: 7rem; + + .icons-container { + i { + position: absolute; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: $white; + z-index: 1; + transform: translate(-50%, -50%); + @include box-shadow($box-shadow); + transition: all 0.2s cubic-bezier(0.25, 0.65, 0.9, 0.75); + + &.icon { + width: var(--icon-size); + height: var(--icon-size); + font-size: 1.7em; + } + + &.icon-sm { + width: var(--icon-sm-size); + height: var(--icon-sm-size); + font-size: 1.5em; + } + + &:nth-child(1) { + font-size: 42px; + color: theme-color("warning"); + z-index: 2; + } + } + + &:not(.on-screen) { + i { + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + + &:not(:nth-child(1)) { + opacity: 0; + } + } + } - --icon-size: 5rem; - --icon-sm-size: 3.75rem; - --gutter: 7rem; - - .icons-container { - i { - position: absolute; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: $white; - z-index: 1; - transform: translate(-50%, -50%); - @include box-shadow($box-shadow); - transition: all .2s cubic-bezier(.25,.65,.9,.75); - - &.icon { - width: var(--icon-size); - height: var(--icon-size); - font-size: 1.7em; - } - - &.icon-sm { - width: var(--icon-sm-size); - height: var(--icon-sm-size); - font-size: 1.5em; - } - - &:nth-child(1) { - font-size: 42px; - color: theme-color("warning"); - z-index: 2; - } + &.on-screen { + i { + opacity: 1; + + &:nth-child(1) { + left: 50%; + top: 50%; + font-size: 42px; + color: theme-color("warning"); } - &:not(.on-screen) { - i { - transform: translate(-50%, -50%); - left: 50%; - top: 50%; + &:nth-child(2) { + left: calc(50% + (var(--gutter) * 1.7)); + top: 50%; + } - &:not(:nth-child(1)) { - opacity: 0; - } - } + &:nth-child(3) { + left: calc(50% + var(--gutter)); + top: calc(50% + var(--gutter)); } - &.on-screen { - - i { - opacity: 1; - - &:nth-child(1) { - left: 50%; - top: 50%; - font-size: 42px; - color: theme-color("warning"); - } - - &:nth-child(2) { - left: calc(50% + (var(--gutter) * 1.7)); - top: 50%; - } - - &:nth-child(3) { - left: calc(50% + var(--gutter)); - top: calc(50% + var(--gutter)); - } - - &:nth-child(4) { - left: calc(50% + var(--gutter)); - top: calc(50% - var(--gutter)); - } - - &:nth-child(5) { - left: calc(50% + (var(--gutter) * 4)); - top: 50%; - } - - &:nth-child(6) { - left: calc(50% + (var(--gutter) * 2.7)); - top: calc(50% + (var(--gutter) * 1.5)); - } - - &:nth-child(7) { - left: calc(50% + (var(--gutter) * 2.7)); - top: calc(50% - (var(--gutter) * 1.5)); - } - - &:nth-child(8) { - left: calc(50% - (var(--gutter) * 1.7)); - top: 50%; - } - - &:nth-child(9) { - left: calc(50% - var(--gutter)); - top: calc(50% + var(--gutter)); - } - - &:nth-child(10) { - left: calc(50% - var(--gutter)); - top: calc(50% - var(--gutter)); - } - - &:nth-child(11) { - left: calc(50% - (var(--gutter) * 4)); - top: 50%; - } - - &:nth-child(12) { - left: calc(50% - (var(--gutter) * 2.7)); - top: calc(50% + (var(--gutter) * 1.5)); - } - - &:nth-child(13) { - left: calc(50% - (var(--gutter) * 2.7)); - top: calc(50% - (var(--gutter) * 1.5)); - } - } - + &:nth-child(4) { + left: calc(50% + var(--gutter)); + top: calc(50% - var(--gutter)); } + + &:nth-child(5) { + left: calc(50% + (var(--gutter) * 4)); + top: 50%; + } + + &:nth-child(6) { + left: calc(50% + (var(--gutter) * 2.7)); + top: calc(50% + (var(--gutter) * 1.5)); + } + + &:nth-child(7) { + left: calc(50% + (var(--gutter) * 2.7)); + top: calc(50% - (var(--gutter) * 1.5)); + } + + &:nth-child(8) { + left: calc(50% - (var(--gutter) * 1.7)); + top: 50%; + } + + &:nth-child(9) { + left: calc(50% - var(--gutter)); + top: calc(50% + var(--gutter)); + } + + &:nth-child(10) { + left: calc(50% - var(--gutter)); + top: calc(50% - var(--gutter)); + } + + &:nth-child(11) { + left: calc(50% - (var(--gutter) * 4)); + top: 50%; + } + + &:nth-child(12) { + left: calc(50% - (var(--gutter) * 2.7)); + top: calc(50% + (var(--gutter) * 1.5)); + } + + &:nth-child(13) { + left: calc(50% - (var(--gutter) * 2.7)); + top: calc(50% - (var(--gutter) * 1.5)); + } + } } + } } - // Blurable sections .blur--hover { - position: relative; - + position: relative; + + .blur-item { + transition: 1s cubic-bezier(0.19, 1, 0.22, 1); + will-change: transform; + filter: blur(0); + opacity: 1; + } + + .blur-hidden { + position: absolute; + top: calc(50% + 7px); + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: $transition-base; + z-index: 100; + } + &:hover { .blur-item { - transition: 1s cubic-bezier(.19,1,.22,1); - will-change: transform; - filter: blur(0); - opacity: 1; + opacity: 0.8; + filter: blur(10px); + transform: scale(0.95); + z-index: 1; } - .blur-hidden { - position: absolute; - top: calc(50% + 7px); - left: 50%; - transform: translate(-50%, -50%); - opacity: 0; - transition: $transition-base; - z-index: 100; - } - &:hover { - .blur-item { - opacity: .8; - filter: blur(10px); - transform: scale(.95); - z-index: 1; - } - .blur-hidden { - opacity: 1; - top: 50%; - } + opacity: 1; + top: 50%; } + } } diff --git a/src/assets/scss/custom/_grid.scss b/src/assets/scss/custom/_grid.scss index d7d7aae4..310e5d86 100644 --- a/src/assets/scss/custom/_grid.scss +++ b/src/assets/scss/custom/_grid.scss @@ -1,5 +1,5 @@ @include media-breakpoint-up(lg) { - .container-lg { - max-width: 1160px; - } -} \ No newline at end of file + .container-lg { + max-width: 1160px; + } +} diff --git a/src/assets/scss/custom/_icons.scss b/src/assets/scss/custom/_icons.scss index 9e930e9f..1b7941ff 100644 --- a/src/assets/scss/custom/_icons.scss +++ b/src/assets/scss/custom/_icons.scss @@ -1,92 +1,96 @@ .icon { - width: $icon-size; - height: $icon-size; + width: $icon-size; + height: $icon-size; - i, svg { - font-size: $icon-size - .75; - } + i, + svg { + font-size: $icon-size - 0.75; + } } .icon + .icon-text { - padding-left: 1rem; - width: calc(100% - #{$icon-size} - 1); + padding-left: 1rem; + width: calc(100% - #{$icon-size} - 1); } .icon-xl { - width: $icon-size-xl; - height: $icon-size-xl; + width: $icon-size-xl; + height: $icon-size-xl; - i, svg { - font-size: $icon-size-xl - .75; - } + i, + svg { + font-size: $icon-size-xl - 0.75; + } } .icon-xl + .icon-text { - width: calc(100% - #{$icon-size-xl} - 1); + width: calc(100% - #{$icon-size-xl} - 1); } .icon-lg { - width: $icon-size-lg; - height: $icon-size-lg; + width: $icon-size-lg; + height: $icon-size-lg; - i, svg { - font-size: $icon-size-lg - .75; - } + i, + svg { + font-size: $icon-size-lg - 0.75; + } } .icon-lg + .icon-text { - width: calc(100% - #{$icon-size-lg} - 1); + width: calc(100% - #{$icon-size-lg} - 1); } .icon-sm { - width: $icon-size-sm; - height: $icon-size-sm; + width: $icon-size-sm; + height: $icon-size-sm; - i, svg { - font-size: $icon-size-sm - .75; - } + i, + svg { + font-size: $icon-size-sm - 0.75; + } } .icon-sm + .icon-text { - width: calc(100% - #{$icon-size-sm} - 1); + width: calc(100% - #{$icon-size-sm} - 1); } - // Icons included in shapes .icon-shape { - padding: 12px; - text-align: center; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - - - i, svg { - font-size: 1.25rem; - } - - &.icon-lg { - i, svg { - font-size: 1.625rem; - } - } - - &.icon-sm { - i, svg { - font-size: .875rem; - } - } - - svg { - width: 30px; - height: 30px; - } - + padding: 12px; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + i, + svg { + font-size: 1.25rem; + } + + &.icon-lg { + i, + svg { + font-size: 1.625rem; + } + } + + &.icon-sm { + i, + svg { + font-size: 0.875rem; + } + } + + svg { + width: 30px; + height: 30px; + } } @each $color, $value in $theme-colors { - .icon-shape-#{$color} { - @include icon-shape-variant(theme-color($color)); - } + .icon-shape-#{$color} { + @include icon-shape-variant(theme-color($color)); + } } diff --git a/src/assets/scss/custom/_input-group.scss b/src/assets/scss/custom/_input-group.scss index c43a319d..174f8b34 100644 --- a/src/assets/scss/custom/_input-group.scss +++ b/src/assets/scss/custom/_input-group.scss @@ -1,62 +1,61 @@ .input-group { - box-shadow: $input-box-shadow; - border-radius: $input-border-radius; - transition: $transition-base; - - .form-control { - box-shadow: none; - - &:not(:first-child) { - border-left: 0; - padding-left: 0; - } - &:not(:last-child) { - border-right: 0; - padding-right: 0; - } - &:focus { - box-shadow: none; - } - } + box-shadow: $input-box-shadow; + border-radius: $input-border-radius; + transition: $transition-base; + + .form-control { + box-shadow: none; + + &:not(:first-child) { + border-left: 0; + padding-left: 0; + } + &:not(:last-child) { + border-right: 0; + padding-right: 0; + } + &:focus { + box-shadow: none; + } + } } .input-group-text { - transition: $input-transition; + transition: $input-transition; } .input-group-alternative { - box-shadow: $input-alternative-box-shadow; - border: 0; - transition: box-shadow .15s ease; + box-shadow: $input-alternative-box-shadow; + border: 0; + transition: box-shadow 0.15s ease; - .form-control, - .input-group-text { - border: 0; - box-shadow: none; - } + .form-control, + .input-group-text { + border: 0; + box-shadow: none; + } } .focused { - .input-group-alternative { - box-shadow: $input-focus-alternative-box-shadow !important; - } + .input-group-alternative { + box-shadow: $input-focus-alternative-box-shadow !important; + } } - // .focus class is applied dinamycally from theme.js .focused { - .input-group { - box-shadow: $input-focus-box-shadow; - } - - .input-group-text { - color: $input-group-addon-focus-color; - background-color: $input-group-addon-focus-bg; - border-color: $input-group-addon-focus-border-color; - } - - .form-control { - border-color: $input-group-addon-focus-border-color; - } + .input-group { + box-shadow: $input-focus-box-shadow; + } + + .input-group-text { + color: $input-group-addon-focus-color; + background-color: $input-group-addon-focus-bg; + border-color: $input-group-addon-focus-border-color; + } + + .form-control { + border-color: $input-group-addon-focus-border-color; + } } diff --git a/src/assets/scss/custom/_list-group.scss b/src/assets/scss/custom/_list-group.scss index 3ed15c37..cb46be1e 100644 --- a/src/assets/scss/custom/_list-group.scss +++ b/src/assets/scss/custom/_list-group.scss @@ -1,39 +1,38 @@ // Space list items .list-group-space { - .list-group-item { - margin-bottom: 1.5rem; - @include border-radius($list-group-border-radius); - } + .list-group-item { + margin-bottom: 1.5rem; + @include border-radius($list-group-border-radius); + } } - // List group components .list-group-img { - width: 3rem; - height: 3rem; - border-radius: 50%; - vertical-align: top; - margin: -.1rem 1.2rem 0 -.2rem; + width: 3rem; + height: 3rem; + border-radius: 50%; + vertical-align: top; + margin: -0.1rem 1.2rem 0 -0.2rem; } .list-group-content { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - min-width: 0; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; } .list-group-content > p { - color: $gray-500; - line-height: 1.5; - margin: .2rem 0 0; + color: $gray-500; + line-height: 1.5; + margin: 0.2rem 0 0; } .list-group-heading { - font-size: $font-size-base; - color: $gray-800; + font-size: $font-size-base; + color: $gray-800; } .list-group-heading > small { - float: right; - color: $gray-500; - font-weight: 500; + float: right; + color: $gray-500; + font-weight: 500; } diff --git a/src/assets/scss/custom/_modal.scss b/src/assets/scss/custom/_modal.scss index 719e2ca9..43bcc9f8 100644 --- a/src/assets/scss/custom/_modal.scss +++ b/src/assets/scss/custom/_modal.scss @@ -1,26 +1,24 @@ .modal-content { - border: 0; - @if $enable-rounded { - border-radius: $modal-content-border-radius; - } @else { - border-radius: 0; - } + border: 0; + @if $enable-rounded { + border-radius: $modal-content-border-radius; + } @else { + border-radius: 0; + } } - .modal-fluid { - .modal-dialog { - margin-top: 0; - margin-bottom: 0; - } - .modal-content { - border-radius: 0; - } + .modal-dialog { + margin-top: 0; + margin-bottom: 0; + } + .modal-content { + border-radius: 0; + } } @each $color, $value in $theme-colors { - .modal-#{$color} { - @include modal-variant($value); - } + .modal-#{$color} { + @include modal-variant($value); + } } - diff --git a/src/assets/scss/custom/_nav.scss b/src/assets/scss/custom/_nav.scss index 7c8f1740..3c9cabde 100644 --- a/src/assets/scss/custom/_nav.scss +++ b/src/assets/scss/custom/_nav.scss @@ -1,84 +1,85 @@ .nav-link { - color: $nav-link-color; + color: $nav-link-color; - &:hover { - color: theme-color("primary"); - } + &:hover { + color: theme-color("primary"); + } - i:not(.fa) { - position: relative; - top: 2px; - } + i:not(.fa) { + position: relative; + top: 2px; + } } -// Pills +// Pills .nav-pills { - .nav-item:not(:last-child) { - padding-right: $nav-pills-space-x; - } + .nav-item:not(:last-child) { + padding-right: $nav-pills-space-x; + } - .nav-link { - padding: $nav-pills-padding-y $nav-pills-padding-x; - color: $nav-pills-link-color; - font-weight: 500; - font-size: $font-size-sm; - box-shadow: $nav-pills-box-shadow; - background-color: $nav-pills-bg; - transition: $transition-base; + .nav-link { + padding: $nav-pills-padding-y $nav-pills-padding-x; + color: $nav-pills-link-color; + font-weight: 500; + font-size: $font-size-sm; + box-shadow: $nav-pills-box-shadow; + background-color: $nav-pills-bg; + transition: $transition-base; - &:hover { - color: $nav-pills-link-hover-color; - } - } - - .nav-link.active, - .show > .nav-link { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; + &:hover { + color: $nav-pills-link-hover-color; } + } - @include media-breakpoint-down(xs) { - .nav-item { - margin-bottom: $spacer; - } + .nav-link.active, + .show > .nav-link { + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; + } + + @include media-breakpoint-down(xs) { + .nav-item { + margin-bottom: $spacer; } + } } @include media-breakpoint-down(sm) { - .nav-pills:not(.nav-pills-circle) { - .nav-item { - padding-right: 0; - } + .nav-pills:not(.nav-pills-circle) { + .nav-item { + padding-right: 0; } -} + } +} // Nav pills circle .nav-pills-circle { - .nav-link { - text-align: center; - height: 60px; - width: 60px; - padding: 0; - line-height: 60px; - border-radius: 50%; - } + .nav-link { + text-align: center; + height: 60px; + width: 60px; + padding: 0; + line-height: 60px; + border-radius: 50%; + } - .nav-link-icon { - i, svg { - font-size: 1rem; - } + .nav-link-icon { + i, + svg { + font-size: 1rem; } + } } -// Nav wrapper +// Nav wrapper .nav-wrapper { - padding: 1rem 0; - @include border-top-radius($card-border-radius); + padding: 1rem 0; + @include border-top-radius($card-border-radius); - + .card { - @include border-top-radius(0); - @include border-bottom-radius($card-border-radius); - } -} \ No newline at end of file + + .card { + @include border-top-radius(0); + @include border-bottom-radius($card-border-radius); + } +} diff --git a/src/assets/scss/custom/_navbar.scss b/src/assets/scss/custom/_navbar.scss index 9bb1f15c..8b6ae0e5 100644 --- a/src/assets/scss/custom/_navbar.scss +++ b/src/assets/scss/custom/_navbar.scss @@ -1,362 +1,363 @@ .navbar-nav { - .nav-link { - font-size: $navbar-nav-link-font-size; - font-family: $navbar-nav-link-font-family; - font-weight: $navbar-nav-link-font-weight; - text-transform: $navbar-nav-link-text-transform; - letter-spacing: $navbar-nav-link-letter-spacing; - @if $enable-transitions { - transition: $navbar-transition; - } + .nav-link { + font-size: $navbar-nav-link-font-size; + font-family: $navbar-nav-link-font-family; + font-weight: $navbar-nav-link-font-weight; + text-transform: $navbar-nav-link-text-transform; + letter-spacing: $navbar-nav-link-letter-spacing; + @if $enable-transitions { + transition: $navbar-transition; + } - .nav-link-inner--text { - margin-left: .25rem; - } + .nav-link-inner--text { + margin-left: 0.25rem; } + } } .navbar-brand { - font-size: $font-size-sm; - font-weight: 600; - text-transform: uppercase; - font-size: .875rem; - letter-spacing: .05px; - - img { - height: 30px; - } + font-size: $font-size-sm; + font-weight: 600; + text-transform: uppercase; + font-size: 0.875rem; + letter-spacing: 0.05px; + + img { + height: 30px; + } } .navbar-dark { - .navbar-brand { - color: $white; - } + .navbar-brand { + color: $white; + } } .navbar-light { - .navbar-brand { - color: $gray-800; - } + .navbar-brand { + color: $gray-800; + } } .navbar-nav { .nav-item { - .media:not(:last-child){ + .media:not(:last-child) { margin-bottom: 1.5rem; } } } @include media-breakpoint-up(lg) { - .navbar-main { - padding: 1rem 0; - } + .navbar-main { + padding: 1rem 0; + } - .navbar-nav { - .nav-item { - margin-right: .5rem; - - [data-toggle="dropdown"]::after { - transition: $transition-base; - } - - &.show { - [data-toggle="dropdown"]::after { - transform: rotate(180deg); - } - } - } - .nav-link { - padding-top: $navbar-nav-link-padding-y; - padding-bottom: $navbar-nav-link-padding-y; - border-radius: $navbar-nav-link-border-radius; - - i { - margin-right: .625rem; - } - } + .navbar-nav { + .nav-item { + margin-right: 0.5rem; - .nav-link-icon { - padding-left: .5rem !important; - padding-right: .5rem !important; - font-size: 1rem; - border-radius: $navbar-nav-link-border-radius; + [data-toggle="dropdown"]::after { + transition: $transition-base; + } - i { - margin-right: 0; - } + &.show { + [data-toggle="dropdown"]::after { + transform: rotate(180deg); } + } + } + .nav-link { + padding-top: $navbar-nav-link-padding-y; + padding-bottom: $navbar-nav-link-padding-y; + border-radius: $navbar-nav-link-border-radius; - // Dropdown menu - .dropdown-menu { - opacity: 0; - pointer-events: none; - margin: 0; - - &:before { - background: $dropdown-bg; - box-shadow: none; - content: ''; - display: block; - height: 16px; - width: 16px; - left: 20px; - position: absolute; - bottom: 100%; - transform: rotate(-45deg) translateY(1rem); - z-index: -5; - border-radius: $border-radius-sm; - } - } + i { + margin-right: 0.625rem; + } + } - .dropdown-menu-right { - &:before { - right: 20px; - left: auto; - } - } + .nav-link-icon { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + font-size: 1rem; + border-radius: $navbar-nav-link-border-radius; - &:not(.navbar-nav-hover) { - .dropdown-menu { - &.show { - opacity: 1; - pointer-events: auto; - animation: show-navbar-dropdown .25s ease forwards; - } - - &.close { - display: block; - animation: hide-navbar-dropdown .15s ease backwards; - } - } - } + i { + margin-right: 0; + } + } + + // Dropdown menu + .dropdown-menu { + opacity: 0; + pointer-events: none; + margin: 0; + + &:before { + background: $dropdown-bg; + box-shadow: none; + content: ""; + display: block; + height: 16px; + width: 16px; + left: 20px; + position: absolute; + bottom: 100%; + transform: rotate(-45deg) translateY(1rem); + z-index: -5; + border-radius: $border-radius-sm; + } + } + + .dropdown-menu-right { + &:before { + right: 20px; + left: auto; + } + } - &.navbar-nav-hover { - .dropdown-menu { - opacity: 0; - display: block; - pointer-events: none; - transform: translate(0, 10px) perspective(200px) rotateX(-2deg); - transition: visibility 0.25s, opacity 0.25s, transform 0.25s; - } - - .nav-item.dropdown:hover > .dropdown-menu { - display: block; - opacity: 1; - pointer-events: auto; - visibility: visible; - transform: translate(0, 0); - animation: none; - } + &:not(.navbar-nav-hover) { + .dropdown-menu { + &.show { + opacity: 1; + pointer-events: auto; + animation: show-navbar-dropdown 0.25s ease forwards; } - - .dropdown-menu-inner { - position: relative; - padding: 1rem; + + &.close { + display: block; + animation: hide-navbar-dropdown 0.15s ease backwards; } + } } -} -// Transparent navbar -.navbar-transparent { - position: absolute; - top: 0; - width: 100%; - z-index: 100; - background-color: transparent; - border: 0; - box-shadow: none; + &.navbar-nav-hover { + .dropdown-menu { + opacity: 0; + display: block; + pointer-events: none; + transform: translate(0, 10px) perspective(200px) rotateX(-2deg); + transition: visibility 0.25s, opacity 0.25s, transform 0.25s; + } - .navbar-brand { - color: rgba(255, 255, 255, 1); + .nav-item.dropdown:hover > .dropdown-menu { + display: block; + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translate(0, 0); + animation: none; + } } - .navbar-toggler { - color: rgba(255, 255, 255, 1); + .dropdown-menu-inner { + position: relative; + padding: 1rem; } + } +} - .navbar-toggler-icon { - background-image: $navbar-dark-toggler-icon-bg; - } +// Transparent navbar +.navbar-transparent { + position: absolute; + top: 0; + width: 100%; + z-index: 100; + background-color: transparent; + border: 0; + box-shadow: none; + + .navbar-brand { + color: rgba(255, 255, 255, 1); + } + + .navbar-toggler { + color: rgba(255, 255, 255, 1); + } + + .navbar-toggler-icon { + background-image: $navbar-dark-toggler-icon-bg; + } } @include media-breakpoint-up(md) { - .navbar-transparent { - .navbar-nav { - .nav-link { - color: $navbar-dark-color; - - @include hover-focus { - color: $navbar-dark-hover-color; - } - - &.disabled { - color: $navbar-dark-disabled-color; - } - } - - .show > .nav-link, - .active > .nav-link, - .nav-link.show, - .nav-link.active { - color: $navbar-dark-active-color; - } - } + .navbar-transparent { + .navbar-nav { + .nav-link { + color: $navbar-dark-color; - .navbar-brand { - color: $navbar-dark-color; + @include hover-focus { + color: $navbar-dark-hover-color; + } - @include hover-focus { - color: $navbar-dark-color; - } + &.disabled { + color: $navbar-dark-disabled-color; } + } + + .show > .nav-link, + .active > .nav-link, + .nav-link.show, + .nav-link.active { + color: $navbar-dark-active-color; + } } + + .navbar-brand { + color: $navbar-dark-color; + + @include hover-focus { + color: $navbar-dark-color; + } + } + } } // Collapse .navbar-collapse-header { - display: none; + display: none; } @include media-breakpoint-down(md) { - .navbar-nav { - .nav-link { - padding: .625rem 0; - color: theme-color("default") !important; - } + .navbar-nav { + .nav-link { + padding: 0.625rem 0; + color: theme-color("default") !important; + } - .dropdown-menu { - box-shadow: none; - min-width: auto; + .dropdown-menu { + box-shadow: none; + min-width: auto; - .media { - svg { - width: 30px; - } - } + .media { + svg { + width: 30px; } + } } - - .navbar-collapse { - width: calc(100% - 1.4rem); - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 1050; - margin: .7rem; - overflow-y: auto; - height: auto !important; - opacity: 0; + } - .navbar-toggler { - width: 20px; - height: 20px; - position: relative; - cursor: pointer; - display: inline-block; - padding: 0; - - span { - display: block; - position: absolute; - width: 100%; - height: 2px; - border-radius: 2px; - opacity: 1; - background: #283448; - } - - :nth-child(1) { - transform: rotate(135deg); - } - - :nth-child(2) { - transform: rotate(-135deg); - } - } + .navbar-collapse { + width: calc(100% - 1.4rem); + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1050; + margin: 0.7rem; + overflow-y: auto; + height: auto !important; + opacity: 0; - .navbar-collapse-header { - display: block; - padding-bottom: 1rem; - margin-bottom: 1rem; - border-bottom: 1px solid rgba(0, 0, 0, .1); - } + .navbar-toggler { + width: 20px; + height: 20px; + position: relative; + cursor: pointer; + display: inline-block; + padding: 0; + + span { + display: block; + position: absolute; + width: 100%; + height: 2px; + border-radius: 2px; + opacity: 1; + background: #283448; + } - .collapse-brand { - img { - height: 36px; - } - } + :nth-child(1) { + transform: rotate(135deg); + } - .collapse-close { - text-align: right; - } + :nth-child(2) { + transform: rotate(-135deg); + } + } + + .navbar-collapse-header { + display: block; + padding-bottom: 1rem; + margin-bottom: 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - .navbar-collapse.collapsing, - .navbar-collapse.show { - padding: 1.5rem; - border-radius: $border-radius; - background: #FFF; - box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1); - animation: show-navbar-collapse .2s ease forwards; + .collapse-brand { + img { + height: 36px; + } } - .navbar-collapse.collapsing-out { - animation: hide-navbar-collapse .2s ease forwards; + .collapse-close { + text-align: right; } + } + + .navbar-collapse.collapsing, + .navbar-collapse.show { + padding: 1.5rem; + border-radius: $border-radius; + background: #fff; + box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), + 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); + animation: show-navbar-collapse 0.2s ease forwards; + } + + .navbar-collapse.collapsing-out { + animation: hide-navbar-collapse 0.2s ease forwards; + } } // Keyframes @keyframes show-navbar-collapse { - 0% { - opacity: 0; - transform: scale(.95); - transform-origin: 100% 0; - } + 0% { + opacity: 0; + transform: scale(0.95); + transform-origin: 100% 0; + } - 100% { - opacity: 1; - transform: scale(1); - } + 100% { + opacity: 1; + transform: scale(1); + } } @keyframes hide-navbar-collapse { - from { - opacity: 1; - transform: scale(1); - transform-origin: 100% 0; - } + from { + opacity: 1; + transform: scale(1); + transform-origin: 100% 0; + } - to { - opacity: 0; - transform: scale(.95); - } + to { + opacity: 0; + transform: scale(0.95); + } } @keyframes show-navbar-dropdown { - 0% { - opacity: 0; - transform: translate(0, 10px) perspective(200px) rotateX(-2deg); - transition: visibility 0.25s, opacity 0.25s, transform 0.25s; - } + 0% { + opacity: 0; + transform: translate(0, 10px) perspective(200px) rotateX(-2deg); + transition: visibility 0.25s, opacity 0.25s, transform 0.25s; + } - 100% { - transform: translate(0, 0); - opacity: 1; - } + 100% { + transform: translate(0, 0); + opacity: 1; + } } @keyframes hide-navbar-dropdown { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0; - transform: translate(0, 10px); - } + to { + opacity: 0; + transform: translate(0, 10px); + } } diff --git a/src/assets/scss/custom/_pagination.scss b/src/assets/scss/custom/_pagination.scss index 9320a5eb..8376f553 100644 --- a/src/assets/scss/custom/_pagination.scss +++ b/src/assets/scss/custom/_pagination.scss @@ -1,40 +1,40 @@ .page-item { - &.active .page-link { - box-shadow: $pagination-active-box-shadow; - } + &.active .page-link { + box-shadow: $pagination-active-box-shadow; + } - .page-link, - span { - display: flex; - align-items: center; - justify-content: center; - padding: 0; - margin: 0 3px; - border-radius: 50% !important; - width: 36px; - height: 36px; - font-size: $font-size-sm; - } + .page-link, + span { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0 3px; + border-radius: 50% !important; + width: 36px; + height: 36px; + font-size: $font-size-sm; + } } .pagination-lg { - .page-item { - .page-link, - span { - width: 46px; - height: 46px; - line-height: 46px; - } + .page-item { + .page-link, + span { + width: 46px; + height: 46px; + line-height: 46px; } + } } .pagination-sm { - .page-item { - .page-link, - span { - width: 30px; - height: 30px; - line-height: 30px; - } + .page-item { + .page-link, + span { + width: 30px; + height: 30px; + line-height: 30px; } -} \ No newline at end of file + } +} diff --git a/src/assets/scss/custom/_popover.scss b/src/assets/scss/custom/_popover.scss index 9f87ac72..b6218ba3 100644 --- a/src/assets/scss/custom/_popover.scss +++ b/src/assets/scss/custom/_popover.scss @@ -1,14 +1,14 @@ .popover { - border: 0; + border: 0; } .popover-header { - font-weight: $font-weight-bold; + font-weight: $font-weight-bold; } // Alternative colors @each $color, $value in $theme-colors { - .popover-#{$color} { - @include popover-variant($value); - } + .popover-#{$color} { + @include popover-variant($value); + } } diff --git a/src/assets/scss/custom/_progress.scss b/src/assets/scss/custom/_progress.scss index 551386bd..d6fe03ae 100644 --- a/src/assets/scss/custom/_progress.scss +++ b/src/assets/scss/custom/_progress.scss @@ -1,62 +1,62 @@ .progress-wrapper { - position: relative; - padding-top: 1.5rem; + position: relative; + padding-top: 1.5rem; } .progress { - height: 8px; - margin-bottom: $spacer; - overflow: hidden; - border-radius: $border-radius-sm; - background-color: $progress-bg; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + height: 8px; + margin-bottom: $spacer; + overflow: hidden; + border-radius: $border-radius-sm; + background-color: $progress-bg; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress .sr-only { - width: auto; - height: 20px; - margin: 0 0 0 30px; - left: 0; - clip: auto; - line-height: 20px; - font-size: 13px; + width: auto; + height: 20px; + margin: 0 0 0 30px; + left: 0; + clip: auto; + line-height: 20px; + font-size: 13px; } .progress-heading { - font-size: 14px; - font-weight: 500; - margin: 0 0 2px; - padding: 0; + font-size: 14px; + font-weight: 500; + margin: 0 0 2px; + padding: 0; } .progress-bar { - box-shadow: none; - border-radius: 0; - height: auto; + box-shadow: none; + border-radius: 0; + height: auto; } -.progress-info{ - margin-bottom: .5rem; - display: flex; - align-items: center; - justify-content: space-between; +.progress-info { + margin-bottom: 0.5rem; + display: flex; + align-items: center; + justify-content: space-between; } .progress-label { - span { - display: inline-block; - color: $primary; - font-size: .625rem; - font-weight: 600; - text-transform: uppercase; - background: rgba($primary, .1); - padding: .25rem 1rem; - border-radius: 30px; - } + span { + display: inline-block; + color: $primary; + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + background: rgba($primary, 0.1); + padding: 0.25rem 1rem; + border-radius: 30px; + } } .progress-percentage { - text-align: right; - span { - display: inline-block; - color: $gray-600; - font-size: .875rem; - font-weight: 600; - } + text-align: right; + span { + display: inline-block; + color: $gray-600; + font-size: 0.875rem; + font-weight: 600; + } } diff --git a/src/assets/scss/custom/_reboot.scss b/src/assets/scss/custom/_reboot.scss index b72a4c98..06508c98 100644 --- a/src/assets/scss/custom/_reboot.scss +++ b/src/assets/scss/custom/_reboot.scss @@ -1,31 +1,31 @@ @at-root { - @-ms-viewport{ - width: device-width; - } + @-ms-viewport { + width: device-width; + } } html { - box-sizing: border-box; - -ms-overflow-style: scrollbar; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + box-sizing: border-box; + -ms-overflow-style: scrollbar; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { - font-family: $font-family-base; - font-size: $font-size-base; - line-height: $line-height-base; - color: $body-color; - background-color: $body-bg; + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + color: $body-color; + background-color: $body-bg; } iframe { - border: 0; + border: 0; } figcaption, figure, main { - display: block; + display: block; } main { - overflow: hidden; -} \ No newline at end of file + overflow: hidden; +} diff --git a/src/assets/scss/custom/_section.scss b/src/assets/scss/custom/_section.scss index d3aa704b..34827eeb 100644 --- a/src/assets/scss/custom/_section.scss +++ b/src/assets/scss/custom/_section.scss @@ -1,567 +1,605 @@ .section { - position: relative; - padding-top: $spacer * 4; - padding-bottom: $spacer * 4; + position: relative; + padding-top: $spacer * 4; + padding-bottom: $spacer * 4; } .section-xl { - padding-top: $spacer * 8; - padding-bottom: $spacer * 8; + padding-top: $spacer * 8; + padding-bottom: $spacer * 8; } .section-lg { - padding-top: $spacer * 6; - padding-bottom: $spacer * 6; + padding-top: $spacer * 6; + padding-bottom: $spacer * 6; } .section-sm { - padding-top: $spacer * 2; - padding-bottom: $spacer * 2; + padding-top: $spacer * 2; + padding-bottom: $spacer * 2; } // Hero sections .section-hero { - @include media-breakpoint-up(md) { - height: 100vh; - min-height: 500px; - } + @include media-breakpoint-up(md) { + height: 100vh; + min-height: 500px; + } } // Circle sections .section-shaped { - margin: 180px 0; - position: relative; - - .stars-and-coded{ - margin-top: 8rem; - } - - .shape { - position: absolute; - top: 0; - z-index: -1; - width: 100%; - height: 100%; - - span { - position: absolute; - } - - +.container { - position: relative; - padding-top: 6rem; - padding-bottom: 0rem; - height: 100%; - } - - &.shape-skew { + margin: 180px 0; + position: relative; - +.container { - padding-top: 0; + .stars-and-coded { + margin-top: 8rem; + } - .col { - margin-top: -100px; - } - } + .shape { + position: absolute; + top: 0; + z-index: -1; + width: 100%; + height: 100%; - + .shape-container { - padding-top: 18rem; - padding-bottom: 19rem; - } - } + span { + position: absolute; } - .shape-skew { - transform: skewY(-8deg); - transform-origin: 0; - - span { - transform: skew(8deg); - } + + .container { + position: relative; + padding-top: 6rem; + padding-bottom: 0rem; + height: 100%; } - // Color variations - .shape-primary { - background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%); + &.shape-skew { + + .container { + padding-top: 0; - :nth-child(1) { - background: shapes-primary-color("span-1-bg"); + .col { + margin-top: -100px; } + } - :nth-child(2) { - background: shapes-primary-color("span-2-bg"); - } - - :nth-child(3) { - background: shapes-primary-color("span-3-bg"); - } - - :nth-child(4) { - background: shapes-primary-color("span-4-bg"); - } - - :nth-child(5) { - background: shapes-primary-color("span-5-bg"); - } + + .shape-container { + padding-top: 18rem; + padding-bottom: 19rem; + } } + } - .shape-default { - background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%); - - :nth-child(1) { - background: shapes-default-color("span-1-bg"); - } - - :nth-child(2) { - background: shapes-default-color("span-2-bg"); - } + .shape-skew { + transform: skewY(-8deg); + transform-origin: 0; - :nth-child(3) { - background: shapes-default-color("span-3-bg"); - } + span { + transform: skew(8deg); + } + } + + // Color variations + .shape-primary { + background: linear-gradient( + 150deg, + shapes-primary-color("step-1-gradient-bg") 15%, + shapes-primary-color("step-2-gradient-bg") 70%, + shapes-primary-color("step-3-gradient-bg") 94% + ); + + :nth-child(1) { + background: shapes-primary-color("span-1-bg"); + } - :nth-child(4) { - background: shapes-default-color("span-4-bg"); - } + :nth-child(2) { + background: shapes-primary-color("span-2-bg"); + } - :nth-child(5) { - background: shapes-default-color("span-5-bg"); - } + :nth-child(3) { + background: shapes-primary-color("span-3-bg"); } - .shape-light { - background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%); + :nth-child(4) { + background: shapes-primary-color("span-4-bg"); + } - :nth-child(1) { - background: shapes-light-color("span-1-bg"); - } + :nth-child(5) { + background: shapes-primary-color("span-5-bg"); + } + } + + .shape-default { + background: linear-gradient( + 150deg, + shapes-default-color("step-1-gradient-bg") 15%, + shapes-default-color("step-2-gradient-bg") 70%, + shapes-default-color("step-3-gradient-bg") 94% + ); + + :nth-child(1) { + background: shapes-default-color("span-1-bg"); + } - :nth-child(2) { - background: shapes-light-color("span-2-bg"); - } + :nth-child(2) { + background: shapes-default-color("span-2-bg"); + } - :nth-child(3) { - background: shapes-light-color("span-3-bg"); - } + :nth-child(3) { + background: shapes-default-color("span-3-bg"); + } - :nth-child(4) { - background: shapes-light-color("span-4-bg"); - } + :nth-child(4) { + background: shapes-default-color("span-4-bg"); + } - :nth-child(5) { - background: shapes-light-color("span-5-bg"); - } + :nth-child(5) { + background: shapes-default-color("span-5-bg"); + } + } + + .shape-light { + background: linear-gradient( + 150deg, + shapes-light-color("step-1-gradient-bg") 15%, + shapes-light-color("step-2-gradient-bg") 70%, + shapes-light-color("step-3-gradient-bg") 94% + ); + + :nth-child(1) { + background: shapes-light-color("span-1-bg"); } - .shape-dark { - background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%); + :nth-child(2) { + background: shapes-light-color("span-2-bg"); + } - :nth-child(1) { - background: shapes-dark-color("span-1-bg"); - } + :nth-child(3) { + background: shapes-light-color("span-3-bg"); + } - :nth-child(2) { - background: shapes-dark-color("span-2-bg"); - } + :nth-child(4) { + background: shapes-light-color("span-4-bg"); + } - :nth-child(3) { - background: shapes-dark-color("span-3-bg"); - } + :nth-child(5) { + background: shapes-light-color("span-5-bg"); + } + } + + .shape-dark { + background: linear-gradient( + 150deg, + shapes-dark-color("step-1-gradient-bg") 15%, + shapes-dark-color("step-2-gradient-bg") 70%, + shapes-dark-color("step-3-gradient-bg") 94% + ); + + :nth-child(1) { + background: shapes-dark-color("span-1-bg"); + } - :nth-child(4) { - background: shapes-dark-color("span-4-bg"); - } + :nth-child(2) { + background: shapes-dark-color("span-2-bg"); + } - :nth-child(5) { - background: shapes-dark-color("span-5-bg"); - } + :nth-child(3) { + background: shapes-dark-color("span-3-bg"); } - .shape-style-1 { - span { - height: 120px; - width: 120px; - border-radius: 50%; - } + :nth-child(4) { + background: shapes-dark-color("span-4-bg"); + } - .span-200 { - height: 200px; - width: 200px; - } + :nth-child(5) { + background: shapes-dark-color("span-5-bg"); + } + } - .span-150 { - height: 150px; - width: 150px; - } + .shape-style-1 { + span { + height: 120px; + width: 120px; + border-radius: 50%; + } - .span-100 { - height: 100px; - width: 100px; - } + .span-200 { + height: 200px; + width: 200px; + } - .span-75 { - height: 75px; - width: 75px; - } + .span-150 { + height: 150px; + width: 150px; + } - .span-50 { - height: 50px; - width: 50px; - } + .span-100 { + height: 100px; + width: 100px; + } - :nth-child(1) { - left: -4%; - bottom: auto; - background: rgba(255, 255, 255, .1); - } + .span-75 { + height: 75px; + width: 75px; + } - :nth-child(2) { - right: 4%; - top: 10%; - background: rgba(255, 255, 255, .1); - } + .span-50 { + height: 50px; + width: 50px; + } - :nth-child(3) { - top: 280px; - right: 5.66666%; - background: rgba(255, 255, 255, .3); - } + :nth-child(1) { + left: -4%; + bottom: auto; + background: rgba(255, 255, 255, 0.1); + } - :nth-child(4) { - top: 320px; - right: 7%; - background: rgba(255, 255, 255, .15); - } + :nth-child(2) { + right: 4%; + top: 10%; + background: rgba(255, 255, 255, 0.1); + } - :nth-child(5) { - top: 38%; - left: 1%; - right: auto; - background: rgba(255, 255, 255, .05); - } + :nth-child(3) { + top: 280px; + right: 5.66666%; + background: rgba(255, 255, 255, 0.3); + } - :nth-child(6) { - width: 200px; - height: 200px; - top: 44%; - left: 10%; - right: auto; - background: rgba(255, 255, 255, .15); - } + :nth-child(4) { + top: 320px; + right: 7%; + background: rgba(255, 255, 255, 0.15); + } - :nth-child(7) { - bottom: 50%; - right: 36%; - background: rgba(255, 255, 255, .04); - } + :nth-child(5) { + top: 38%; + left: 1%; + right: auto; + background: rgba(255, 255, 255, 0.05); + } - :nth-child(8) { - bottom: 70px; - right: 2%; - background: rgba(255, 255, 255, .2); - } + :nth-child(6) { + width: 200px; + height: 200px; + top: 44%; + left: 10%; + right: auto; + background: rgba(255, 255, 255, 0.15); + } - :nth-child(9) { - bottom: 1%; - right: 2%; - background: rgba(255, 255, 255, .1); - } + :nth-child(7) { + bottom: 50%; + right: 36%; + background: rgba(255, 255, 255, 0.04); + } - :nth-child(10) { - bottom: 1%; - left: 1%; - right: auto; - background: rgba(255, 255, 255, .05); - } + :nth-child(8) { + bottom: 70px; + right: 2%; + background: rgba(255, 255, 255, 0.2); + } - @include media-breakpoint-down(md) { - span { - height: 120px; - } - } + :nth-child(9) { + bottom: 1%; + right: 2%; + background: rgba(255, 255, 255, 0.1); + } - @include media-breakpoint-down(sm) { - span { - height: 90px; - } - } + :nth-child(10) { + bottom: 1%; + left: 1%; + right: auto; + background: rgba(255, 255, 255, 0.05); + } - // shape color variations - &.shape-primary { - background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%); - } + @include media-breakpoint-down(md) { + span { + height: 120px; + } + } - &.shape-default { - background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%); - } + @include media-breakpoint-down(sm) { + span { + height: 90px; + } + } - &.shape-light { - background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%); + // shape color variations + &.shape-primary { + background: linear-gradient( + 150deg, + shapes-primary-color("step-1-gradient-bg") 15%, + shapes-primary-color("step-2-gradient-bg") 70%, + shapes-primary-color("step-3-gradient-bg") 94% + ); + } - } + &.shape-default { + background: linear-gradient( + 150deg, + shapes-default-color("step-1-gradient-bg") 15%, + shapes-default-color("step-2-gradient-bg") 70%, + shapes-default-color("step-3-gradient-bg") 94% + ); + } - &.shape-dark { - background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%); - } + &.shape-light { + background: linear-gradient( + 150deg, + shapes-light-color("step-1-gradient-bg") 15%, + shapes-light-color("step-2-gradient-bg") 70%, + shapes-light-color("step-3-gradient-bg") 94% + ); } - // Styles - works with a color variation class (e.g shapes-default) - .shape-style-2 { - span { - height: 190px; - } + &.shape-dark { + background: linear-gradient( + 150deg, + shapes-dark-color("step-1-gradient-bg") 15%, + shapes-dark-color("step-2-gradient-bg") 70%, + shapes-dark-color("step-3-gradient-bg") 94% + ); + } + } - .span-sm { - height: 100px; - } + // Styles - works with a color variation class (e.g shapes-default) + .shape-style-2 { + span { + height: 190px; + } - :nth-child(1) { - width: 33.33333%; - top: 0; - left: -16.66666%; - } + .span-sm { + height: 100px; + } - :nth-child(2) { - width: 33.33333%; - top: 0; - left: 16.66666%; - right: auto; - } + :nth-child(1) { + width: 33.33333%; + top: 0; + left: -16.66666%; + } - :nth-child(3) { - width: 33.33333%; - left: 49.99999%; - bottom: auto; - } + :nth-child(2) { + width: 33.33333%; + top: 0; + left: 16.66666%; + right: auto; + } - :nth-child(4) { - width: 33.33333%; - top: 55%; - right: -16.66666%; - } + :nth-child(3) { + width: 33.33333%; + left: 49.99999%; + bottom: auto; + } - :nth-child(5) { - width: 33.33333%; - bottom: 0; - } + :nth-child(4) { + width: 33.33333%; + top: 55%; + right: -16.66666%; + } - @include media-breakpoint-down(md) { - span { - height: 120px; - } - } + :nth-child(5) { + width: 33.33333%; + bottom: 0; + } - @include media-breakpoint-down(sm) { - span { - height: 90px; - } - } + @include media-breakpoint-down(md) { + span { + height: 120px; + } } - .shape-style-3 { - span { - height: 140px; - } + @include media-breakpoint-down(sm) { + span { + height: 90px; + } + } + } - .span-sm { - height: 100px; - } + .shape-style-3 { + span { + height: 140px; + } - :nth-child(1) { - width: 66%; - left: -16.66666%; - bottom: auto; - } + .span-sm { + height: 100px; + } - :nth-child(2) { - width: 40%; - top: 54%; - //height: 320px; - right: -16.66666%; - } + :nth-child(1) { + width: 66%; + left: -16.66666%; + bottom: auto; + } - :nth-child(3) { - width: 33.33333%; - top: 34%; - left: -16.66666%; - right: auto; - } + :nth-child(2) { + width: 40%; + top: 54%; + //height: 320px; + right: -16.66666%; + } - :nth-child(4) { - width: 60%; - bottom: 0; - right: -16.66666%; - opacity: .6; - } + :nth-child(3) { + width: 33.33333%; + top: 34%; + left: -16.66666%; + right: auto; + } - :nth-child(5) { - width: 33.33333%; - bottom: 0; - } + :nth-child(4) { + width: 60%; + bottom: 0; + right: -16.66666%; + opacity: 0.6; + } - @include media-breakpoint-down(md) { - span { - height: 120px; - } - } + :nth-child(5) { + width: 33.33333%; + bottom: 0; + } - @include media-breakpoint-down(sm) { - span { - height: 90px; - } - } + @include media-breakpoint-down(md) { + span { + height: 120px; + } } + @include media-breakpoint-down(sm) { + span { + height: 90px; + } + } + } } // Device illustrations used on shape sections .device-ill { - pointer-events: none; - position: absolute; + pointer-events: none; + position: absolute; + display: flex; + width: 1287px; + left: 50%; + margin-left: -644px; + transform: scale(0.5) rotate(-12deg) translateX(50px); + transform-origin: 50% 20%; + will-change: transform; + + div { display: flex; - width: 1287px; - left: 50%; - margin-left: -644px; - transform: scale(.5) rotate(-12deg) translateX(50px); - transform-origin: 50% 20%; - will-change: transform; - - div { - display: flex; - justify-content: center; - align-items: center; - border-radius: $border-radius; - padding: .875rem; - background: #fff; - box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05); + justify-content: center; + align-items: center; + border-radius: $border-radius; + padding: 0.875rem; + background: #fff; + box-shadow: inset 0 4px 7px 1px #fff, + inset 0 -5px 20px rgba(173, 186, 204, 0.25), + 0 2px 6px rgba(0, 21, 64, 0.14), 0 10px 20px rgba(0, 21, 64, 0.05); + } + + .tablet-landscape { + width: 512px; + height: 352px; + margin: 115px 50px 0; + } +} + +@media (min-width: 670px) { + .device-ill { + flex-wrap: wrap; + width: 512px; + margin-left: -50px; + top: 215px; + transform: rotate(-12deg); + transform-origin: 100% 0; + + [class^="tablet"] { + margin: 0; } .tablet-landscape { - width: 512px; - height: 352px; - margin: 115px 50px 0; + width: 512px; + height: 352px; } + } } -@media (min-width:670px) { - .device-ill { - flex-wrap: wrap; - width: 512px; - margin-left: -50px; - top: 215px; - transform: rotate(-12deg); - transform-origin: 100% 0; - - [class^=tablet] { - margin: 0; - } +@media (min-width: 880px) { + .device-ill { + width: 829px; + margin-left: -10px; + top: 20px; - .tablet-landscape { - width: 512px; - height: 352px; - } + .tablet-landscape { + align-self: flex-end; + margin-right: 50px; } -} -@media (min-width:880px) { - .device-ill { - width: 829px; - margin-left: -10px; - top: 20px; - - .tablet-landscape { - align-self: flex-end; - margin-right: 50px; - } - - .phone-big { - display: flex; - width: 267px; - height: 553px; - } + .phone-big { + display: flex; + width: 267px; + height: 553px; } + } } // Profile cover .section-profile-cover { - height: 580px; - background-size: cover; - background-position: center center; + height: 580px; + background-size: cover; + background-position: center center; } @include media-breakpoint-down(md) { - .section-profile-cover { - height: 400px; - } + .section-profile-cover { + height: 400px; + } } // Components section (for demo) .section-components { - >.form-control { - +.form-control { - margin-top: .5rem; - } + > .form-control { + + .form-control { + margin-top: 0.5rem; } - - >.nav+.nav, - >.alert+.alert, - >.navbar+.navbar, - >.progress+.progress, - >.progress+.btn, - .badge, + } + + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress, + > .progress + .btn, + .badge, + .btn { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .btn-group { + margin-top: 0.5rem; + margin-bottom: 0.5rem; .btn { - margin-top: .5rem; - margin-bottom: .5rem; + margin: 0; } + } - .btn-group { - margin-top: .5rem; - margin-bottom: .5rem; - .btn { - margin: 0; - } - } + .alert { + margin: 0; - .alert { - margin: 0; - - +.alert { - margin-top: 1.25rem; - } + + .alert { + margin-top: 1.25rem; } + } - .badge { - margin-right: .5rem; - } + .badge { + margin-right: 0.5rem; + } - .modal-footer { - .btn { - margin: 0; - } + .modal-footer { + .btn { + margin: 0; } + } } - .floating-cards { - -webkit-perspective:1500px; - perspective:1500px; - position:relative; - -webkit-box-align:center; - -ms-flex-align:center; - align-items:center + -webkit-perspective: 1500px; + perspective: 1500px; + position: relative; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.floating-cards>div { - position:absolute; - -ms-flex-negative:0; - flex-shrink:0; - border-radius:8px; - overflow:hidden +.floating-cards > div { + position: absolute; + -ms-flex-negative: 0; + flex-shrink: 0; + border-radius: 8px; + overflow: hidden; } .floating-cards .shine { - position:absolute; - left:0; - right:0; - top:0; - bottom:0; - pointer-events:none + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; } diff --git a/src/assets/scss/custom/_type.scss b/src/assets/scss/custom/_type.scss index 3506d730..26354581 100644 --- a/src/assets/scss/custom/_type.scss +++ b/src/assets/scss/custom/_type.scss @@ -1,61 +1,61 @@ // General styles p { - font-size: $paragraph-font-size; - font-weight: $paragraph-font-weight; - line-height: $paragraph-line-height; -} + font-size: $paragraph-font-size; + font-weight: $paragraph-font-weight; + line-height: $paragraph-line-height; +} .lead { - font-size: $lead-font-size; - font-weight: $lead-font-weight; - line-height: $paragraph-line-height; - margin-top: 1.5rem; - - + .btn-wrapper { - margin-top: 3rem; - } + font-size: $lead-font-size; + font-weight: $lead-font-weight; + line-height: $paragraph-line-height; + margin-top: 1.5rem; + + + .btn-wrapper { + margin-top: 3rem; + } } .description { - font-size: $font-size-sm; + font-size: $font-size-sm; } // Headings .heading { - letter-spacing: $heading-letter-spacing; - font-size: $heading-font-size; - text-transform: $heading-text-transform; - font-weight: $heading-font-weight; + letter-spacing: $heading-letter-spacing; + font-size: $heading-font-size; + text-transform: $heading-text-transform; + font-weight: $heading-font-weight; } .heading-title { - letter-spacing: $heading-title-letter-spacing; - font-size: $heading-title-font-size; - font-weight: $heading-title-font-weight; - text-transform: $heading-title-text-transform; + letter-spacing: $heading-title-letter-spacing; + font-size: $heading-title-font-size; + font-weight: $heading-title-font-weight; + text-transform: $heading-title-text-transform; } .heading-section { - letter-spacing: $heading-section-letter-spacing; - font-size: $heading-section-font-size; - font-weight: $heading-section-font-weight; - text-transform: $heading-section-text-transform; - - img { - display: block; - width: 72px; - height: 72px; - margin-bottom: 1.5rem; - } - - &.text-center { - img { - margin-left: auto; - margin-right: auto; - } - } + letter-spacing: $heading-section-letter-spacing; + font-size: $heading-section-font-size; + font-weight: $heading-section-font-weight; + text-transform: $heading-section-text-transform; + + img { + display: block; + width: 72px; + height: 72px; + margin-bottom: 1.5rem; + } + + &.text-center { + img { + margin-left: auto; + margin-right: auto; + } + } } // Section titles @@ -64,30 +64,30 @@ p { .display-2, .display-3, .display-4 { - span { - display: block; - font-weight: $font-weight-light; - } + span { + display: block; + font-weight: $font-weight-light; + } } - // Articles article { - h4:not(:first-child), - h5:not(:first-child) { - margin-top: 3rem; - } - - h4, h5 { - margin-bottom: 1.5rem; - } - - figure { - margin: 3rem 0; - } - - h5 + figure { - margin-top: 0; - } + h4:not(:first-child), + h5:not(:first-child) { + margin-top: 3rem; + } + + h4, + h5 { + margin-bottom: 1.5rem; + } + + figure { + margin: 3rem 0; + } + + h5 + figure { + margin-top: 0; + } } diff --git a/src/assets/scss/custom/_utilities.scss b/src/assets/scss/custom/_utilities.scss index 19c0f786..92827751 100644 --- a/src/assets/scss/custom/_utilities.scss +++ b/src/assets/scss/custom/_utilities.scss @@ -1,8 +1,8 @@ -@import "custom/utilities/backgrounds.scss"; -@import "custom/utilities/floating.scss"; -@import "custom/utilities/helper.scss"; -@import "custom/utilities/sizing.scss"; -@import "custom/utilities/spacing.scss"; -@import "custom/utilities/shadows.scss"; -@import "custom/utilities/text.scss"; -@import "custom/utilities/transform.scss"; \ No newline at end of file +@import "./utilities/backgrounds"; +@import "./utilities/floating.scss"; +@import "./utilities/helper.scss"; +@import "./utilities/sizing.scss"; +@import "./utilities/spacing.scss"; +@import "./utilities/shadows.scss"; +@import "./utilities/text.scss"; +@import "./utilities/transform.scss"; diff --git a/src/assets/scss/custom/_variables.scss b/src/assets/scss/custom/_variables.scss index 42fdf36c..d5e93a45 100644 --- a/src/assets/scss/custom/_variables.scss +++ b/src/assets/scss/custom/_variables.scss @@ -1,189 +1,212 @@ - // Global settings -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: true !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: true !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-grid-classes: true !default; +$enable-print-styles: true !default; // Color system -$white: #fff !default; +$white: #fff !default; $gray-100: #f6f9fc !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; -$gray-600: #8898aa !default; // Line footer color -$gray-700: #525f7f !default; // Line p color -$gray-800: #32325d !default; // Line heading color +$gray-600: #8898aa !default; // Line footer color +$gray-700: #525f7f !default; // Line p color +$gray-800: #32325d !default; // Line heading color $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; $grays: () !default; -$grays: map-merge(( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900 -), $grays); - -$blue: #5e72e4 !default; -$indigo: #5603ad !default; -$purple: #8965e0 !default; -$pink: #f3a4b5 !default; -$red: #f5365c !default; -$orange: #fb6340 !default; -$yellow: #ffd600 !default; -$green: #2dce89 !default; -$teal: #11cdef !default; -$cyan: #2bffc6 !default; +$grays: map-merge( + ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900, + ), + $grays +); + +$blue: #5e72e4 !default; +$indigo: #5603ad !default; +$purple: #8965e0 !default; +$pink: #f3a4b5 !default; +$red: #f5365c !default; +$orange: #fb6340 !default; +$yellow: #ffd600 !default; +$green: #2dce89 !default; +$teal: #11cdef !default; +$cyan: #2bffc6 !default; $colors: () !default; -$colors: map-merge(( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "light": $gray-400, - "lighter": $gray-200, - "gray-dark": $gray-800 -), $colors); - -$default: #172b4d !default; -$primary: #5e72e4 !default; -$secondary: #f4f5f7 !default; -$success: $green !default; -$info: $teal !default; -$warning: $orange !default; -$danger: $red !default; -$light: $gray-500 !default; -$dark: $gray-900 !default; -$darker: darken($gray-900, 15%) !default; - -$facebook: #3b5999 !default; -$twitter: #1da1f2 !default; -$google-plus: #dd4b39 !default; -$instagram: #e4405f !default; -$pinterest: #bd081c !default; -$youtube: #cd201f !default; -$slack: #3aaf85 !default; -$dribbble: #ea4c89 !default; -$github: #222222 !default; +$colors: map-merge( + ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "light": $gray-400, + "lighter": $gray-200, + "gray-dark": $gray-800, + ), + $colors +); + +$default: #172b4d !default; +$primary: #5e72e4 !default; +$secondary: #f4f5f7 !default; +$success: $green !default; +$info: $teal !default; +$warning: $orange !default; +$danger: $red !default; +$light: $gray-500 !default; +$dark: $gray-900 !default; +$darker: darken($gray-900, 15%) !default; + +$facebook: #3b5999 !default; +$twitter: #1da1f2 !default; +$google-plus: #dd4b39 !default; +$instagram: #e4405f !default; +$pinterest: #bd081c !default; +$youtube: #cd201f !default; +$slack: #3aaf85 !default; +$dribbble: #ea4c89 !default; +$github: #222222 !default; $theme-colors: () !default; -$theme-colors: map-merge(( - "default": $default, - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "white": $white, - "neutral": $white, - "dark": $dark, - "darker": $darker -), $theme-colors); +$theme-colors: map-merge( + ( + "default": $default, + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "white": $white, + "neutral": $white, + "dark": $dark, + "darker": $darker, + ), + $theme-colors +); $brand-colors: () !default; -$brand-colors: map-merge(( - "facebook": $facebook, - "twitter": $twitter, - "google-plus": $google-plus, - "instagram": $instagram, - "pinterest": $pinterest, - "youtube": $youtube, - "slack": $slack, - "dribbble": $dribbble, - "github": $github -), $brand-colors); +$brand-colors: map-merge( + ( + "facebook": $facebook, + "twitter": $twitter, + "google-plus": $google-plus, + "instagram": $instagram, + "pinterest": $pinterest, + "youtube": $youtube, + "slack": $slack, + "dribbble": $dribbble, + "github": $github, + ), + $brand-colors +); $shape-colors: () !default; -$shape-colors: map-merge(( - "default": #32325d, - "primary": #5533ff, - "secondary": #24b47e, - "neutral": #e9ecef, - "blue-gray": #b2cbe1, - -), $shape-colors); +$shape-colors: map-merge( + ( + "default": #32325d, + "primary": #5533ff, + "secondary": #24b47e, + "neutral": #e9ecef, + "blue-gray": #b2cbe1, + ), + $shape-colors +); $shapes-primary-colors: () !default; -$shapes-primary-colors: map-merge(( - "step-1-gradient-bg": #281483, - "step-2-gradient-bg": #8f6ed5, - "step-3-gradient-bg": #d782d9, - "span-1-bg": #53f, - "span-2-bg": #4553ff, - "span-3-bg": #4f40ff, - "span-4-bg": #25ddf5, - "span-5-bg": #1fa2ff -), $shapes-primary-colors); +$shapes-primary-colors: map-merge( + ( + "step-1-gradient-bg": #281483, + "step-2-gradient-bg": #8f6ed5, + "step-3-gradient-bg": #d782d9, + "span-1-bg": #53f, + "span-2-bg": #4553ff, + "span-3-bg": #4f40ff, + "span-4-bg": #25ddf5, + "span-5-bg": #1fa2ff, + ), + $shapes-primary-colors +); $shapes-default-colors: () !default; -$shapes-default-colors: map-merge(( - "step-1-gradient-bg": #7795f8, - "step-2-gradient-bg": #6772e5, - "step-3-gradient-bg": #555abf, - "span-1-bg": #7795f8, - "span-2-bg": #7b9aff, - "span-3-bg": #6f8ff8, - "span-4-bg": #76eea7, - "span-5-bg": #6adaff -), $shapes-default-colors); +$shapes-default-colors: map-merge( + ( + "step-1-gradient-bg": #7795f8, + "step-2-gradient-bg": #6772e5, + "step-3-gradient-bg": #555abf, + "span-1-bg": #7795f8, + "span-2-bg": #7b9aff, + "span-3-bg": #6f8ff8, + "span-4-bg": #76eea7, + "span-5-bg": #6adaff, + ), + $shapes-default-colors +); $shapes-light-colors: () !default; -$shapes-light-colors: map-merge(( - "step-1-gradient-bg": #b2cbe1, - "step-2-gradient-bg": #f6f9fc, - "step-3-gradient-bg": #f6f9fc, - "span-1-bg": #b4cce1, - "span-2-bg": #c5dbef, - "span-3-bg": #b9d5ed, - "span-4-bg": #74e4a2, - "span-5-bg": #008169 -), $shapes-light-colors); +$shapes-light-colors: map-merge( + ( + "step-1-gradient-bg": #b2cbe1, + "step-2-gradient-bg": #f6f9fc, + "step-3-gradient-bg": #f6f9fc, + "span-1-bg": #b4cce1, + "span-2-bg": #c5dbef, + "span-3-bg": #b9d5ed, + "span-4-bg": #74e4a2, + "span-5-bg": #008169, + ), + $shapes-light-colors +); $shapes-dark-colors: () !default; -$shapes-dark-colors: map-merge(( - "step-1-gradient-bg": #32325d, - "step-2-gradient-bg": #32325d, - "step-3-gradient-bg": #32325d, - "span-1-bg": #2e2e57, - "span-2-bg": #2b2b58, - "span-3-bg": #25254d, - "span-4-bg": #d782d9, - "span-5-bg": #008169 -), $shapes-dark-colors); - +$shapes-dark-colors: map-merge( + ( + "step-1-gradient-bg": #32325d, + "step-2-gradient-bg": #32325d, + "step-3-gradient-bg": #32325d, + "span-1-bg": #2e2e57, + "span-2-bg": #2b2b58, + "span-3-bg": #25254d, + "span-4-bg": #d782d9, + "span-5-bg": #008169, + ), + $shapes-dark-colors +); // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 200 !default; +$yiq-contrasted-threshold: 200 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Action colors @@ -194,31 +217,31 @@ $favorite-color: $yellow !default; $like-color: $blue !default; $love-color: $red !default; - // Body $body-bg: $white !default; $body-color: $gray-700 !default; - // Sections $section-colors: () !default; -$section-colors: map-merge(( - "primary": $body-bg, - "secondary": $secondary, - "light": $gray-400, - "dark": $dark, - "darker": $darker -), $section-colors); - +$section-colors: map-merge( + ( + "primary": $body-bg, + "secondary": $secondary, + "light": $gray-400, + "dark": $dark, + "darker": $darker, + ), + $section-colors +); // Links -$link-color: $primary !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%); -$link-hover-decoration: none !default; +$link-color: $primary !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%); +$link-hover-decoration: none !default; // Grid breakpoints @@ -227,13 +250,12 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, ); @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); - // Grid containers // // Define the maximum width of `.container` for different screen sizes. @@ -242,158 +264,176 @@ $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, - xl: 1040px + xl: 1040px, ); @include _assert-ascending($container-max-widths, "$container-max-widths"); - // Spacing $spacer: 1rem !default; $spacers: () !default; -$spacers: map-merge(( - 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), - 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3), - 'sm': ($spacer * 2), - 'md': ($spacer * 4), - 'lg': ($spacer * 6), - 'xl': ($spacer * 8) -), $spacers); - +$spacers: map-merge( + ( + 0: 0, + 1: ( + $spacer * 0.25, + ), + 2: ( + $spacer * 0.5, + ), + 3: $spacer, + 4: ( + $spacer * 1.5, + ), + 5: ( + $spacer * 3, + ), + "sm": ( + $spacer * 2, + ), + "md": ( + $spacer * 4, + ), + "lg": ( + $spacer * 6, + ), + "xl": ( + $spacer * 8, + ), + ), + $spacers +); // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; -$sizes: map-merge(( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100% -), $sizes); +$sizes: map-merge( + ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + ), + $sizes +); // Components -$shape-height-xl: 1.5 !default; -$shape-height-lg: 1.5 !default; -$shape-height-sm: 1.5 !default; +$shape-height-xl: 1.5 !default; +$shape-height-lg: 1.5 !default; +$shape-height-sm: 1.5 !default; -$border-width: .0625rem !default; -$border-color: $gray-200 !default; +$border-width: 0.0625rem !default; +$border-color: $gray-200 !default; -$border-radius: .25rem !default; -$border-radius-xl: .35rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-radius: 0.25rem !default; +$border-radius-xl: 0.35rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); -$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); -$box-shadow-lg: 0 1rem 3rem rgba($black, .175); +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075); +$box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175); -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; $component-active-border-color: theme-color("primary") !default; -$component-hover-color: $gray-300 !default; -$component-hover-bg: $gray-300 !default; +$component-hover-color: $gray-300 !default; +$component-hover-bg: $gray-300 !default; $component-hover-border-color: $gray-300 !default; -$caret-width: .3em !default; - -$transition-base: all .15s ease !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$caret-width: 0.3em !default; +$transition-base: all 0.15s ease !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; // Fonts -$font-family-base: 'Open Sans', sans-serif !default; -$font-family-alt: 'Open Sans', sans-serif !default; +$font-family-base: "Open Sans", sans-serif !default; +$font-family-alt: "Open Sans", sans-serif !default; -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-xl: ($font-size-base * 1.5); -$font-size-lg: ($font-size-base * 1.25); -$font-size-sm: ($font-size-base * .875); -$font-size-xs: ($font-size-base * .75); +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-xl: ($font-size-base * 1.5); +$font-size-lg: ($font-size-base * 1.25); +$font-size-sm: ($font-size-base * 0.875); +$font-size-xs: ($font-size-base * 0.75); -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 600 !default; -$font-weight-extra-bold: 700 !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 600 !default; +$font-weight-extra-bold: 700 !default; -$font-weight-base: $font-weight-normal !default; -$shape-height-base: 1.5 !default; +$font-weight-base: $font-weight-normal !default; +$shape-height-base: 1.5 !default; -$h1-font-size: $font-size-base * 2.5 !default; //2.1875rem -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.75 !default; -$h4-font-size: $font-size-base * 1.5 !default; -$h5-font-size: $font-size-base * 1.25 !default; -$h6-font-size: $font-size-base !default; +$h1-font-size: $font-size-base * 2.5 !default; //2.1875rem +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2); -$headings-font-family: inherit !default; -$headings-font-weight: $font-weight-normal !default; -$headings-line-height: 1.3 !default; -$headings-color: $gray-800 !default; +$headings-margin-bottom: calc($spacer / 2); +$headings-font-family: inherit !default; +$headings-font-weight: $font-weight-normal !default; +$headings-line-height: 1.3 !default; +$headings-color: $gray-800 !default; -$heading-letter-spacing: .025em !default; -$heading-font-size: .95rem !default; -$heading-text-transform: uppercase !default; -$heading-font-weight: $headings-font-weight !default; +$heading-letter-spacing: 0.025em !default; +$heading-font-size: 0.95rem !default; +$heading-text-transform: uppercase !default; +$heading-font-weight: $headings-font-weight !default; -$heading-title-letter-spacing: .025em !default; -$heading-title-font-size: 1.375rem !default; -$heading-title-font-weight: $font-weight-bold !default; -$heading-title-text-transform: uppercase !default; +$heading-title-letter-spacing: 0.025em !default; +$heading-title-font-size: 1.375rem !default; +$heading-title-font-weight: $font-weight-bold !default; +$heading-title-text-transform: uppercase !default; -$heading-section-letter-spacing: .025em !default; -$heading-section-font-size: 1.375rem !default; -$heading-section-font-weight: $font-weight-bold !default; -$heading-section-text-transform: uppercase !default; +$heading-section-letter-spacing: 0.025em !default; +$heading-section-font-size: 1.375rem !default; +$heading-section-font-weight: $font-weight-bold !default; +$heading-section-text-transform: uppercase !default; -$display1-size: 3.3rem !default; -$display2-size: 2.75rem !default; -$display3-size: 2.1875rem !default; -$display4-size: 1.6275rem !default; +$display1-size: 3.3rem !default; +$display2-size: 2.75rem !default; +$display3-size: 2.1875rem !default; +$display4-size: 1.6275rem !default; -$display1-weight: $font-weight-bold !default; -$display2-weight: $font-weight-bold !default; -$display3-weight: $font-weight-bold !default; -$display4-weight: $font-weight-bold !default; -$display-line-height: $headings-line-height !default; +$display1-weight: $font-weight-bold !default; +$display2-weight: $font-weight-bold !default; +$display3-weight: $font-weight-bold !default; +$display4-weight: $font-weight-bold !default; +$display-line-height: $headings-line-height !default; -$paragraph-font-size: 1rem !default; -$paragraph-font-weight: 300 !default; -$paragraph-line-height: 1.7 !default; +$paragraph-font-size: 1rem !default; +$paragraph-font-weight: 300 !default; +$paragraph-line-height: 1.7 !default; -$lead-font-size: ($paragraph-font-size * 1.25); -$lead-font-weight: 300 !default; +$lead-font-size: ($paragraph-font-size * 1.25); +$lead-font-weight: 300 !default; -$small-font-size: 80% !default; +$small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25); +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25); -$hr-border-color: rgba($black, .1); -$hr-border-width: $border-width !default; +$hr-border-color: rgba($black, 0.1); +$hr-border-width: $border-width !default; -$mark-padding: .2em !default; +$mark-padding: 0.2em !default; -$dt-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem !default; +$list-inline-padding: 0.5rem !default; -$mark-bg: #fcf8e3 !default; - -$hr-margin-y: $spacer * 2 !default; +$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer * 2 !default; // Icons @@ -402,282 +442,279 @@ $icon-size-xl: 5rem !default; $icon-size-lg: 4rem !default; $icon-size-sm: 2rem !default; - // Tables -$table-cell-padding: 1rem !default; -$table-cell-padding-sm: .3rem !default; - -$table-bg: transparent !default; -$table-accent-bg: rgba($black, .05); -$table-hover-bg: rgba($black, .075); -$table-active-bg: $table-hover-bg !default; +$table-cell-padding: 1rem !default; +$table-cell-padding-sm: 0.3rem !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05); +$table-hover-bg: rgba($black, 0.075); +$table-active-bg: $table-hover-bg !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05); -$table-dark-hover-bg: rgba($white, .075); -$table-dark-border-color: lighten($gray-900, 7.5%); -$table-dark-color: $body-bg !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05); +$table-dark-hover-bg: rgba($white, 0.075); +$table-dark-border-color: lighten($gray-900, 7.5%); +$table-dark-color: $body-bg !default; // Buttons + Forms -$input-btn-padding-y: .625rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: $shape-height-base !default; +$input-btn-padding-y: 0.625rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-line-height: $shape-height-base !default; -$input-btn-focus-width: 0 !default; -$input-btn-focus-color: rgba($component-active-bg, 1); +$input-btn-focus-width: 0 !default; +$input-btn-focus-color: rgba($component-active-bg, 1); //$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04); -$input-btn-focus-box-shadow: none !default; +$input-btn-focus-box-shadow: none !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: $shape-height-sm !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: $shape-height-sm !default; -$input-btn-padding-y-lg: .875rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $shape-height-lg !default; +$input-btn-padding-y-lg: 0.875rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $shape-height-lg !default; -$input-btn-border-width: 1px !default; +$input-btn-border-width: 1px !default; -$input-btn-font-size-sm: .75rem !default; -$input-btn-font-size: .875rem !default; -$input-btn-font-size-lg: .875rem !default; +$input-btn-font-size-sm: 0.75rem !default; +$input-btn-font-size: 0.875rem !default; +$input-btn-font-size-lg: 0.875rem !default; // Buttons -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x + 0.5 !default; -$btn-line-height: $input-btn-line-height !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x + 0.5 !default; +$btn-line-height: $input-btn-line-height !default; -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-border-width: $input-btn-border-width !default; +$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: 600 !default; -$btn-text-transform: uppercase !default; -$btn-letter-spacing: .025em !default; -$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); -$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); -$btn-focus-box-shadow: $btn-hover-box-shadow !default; -$btn-focus-width: $input-btn-focus-width !default; - - -$btn-active-box-shadow: none !default; +$btn-font-weight: 600 !default; +$btn-text-transform: uppercase !default; +$btn-letter-spacing: 0.025em !default; +$btn-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +$btn-hover-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), + 0 3px 6px rgba(0, 0, 0, 0.08); +$btn-focus-box-shadow: $btn-hover-box-shadow !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-active-box-shadow: none !default; // Forms -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; - -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; -$input-border-radius: $border-radius !default; -$input-border-radius-xl: $border-radius-xl !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; +$input-border-radius: $border-radius !default; +$input-border-radius-xl: $border-radius-xl !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-muted-bg: #EDF0F5 !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); -$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); +$input-muted-bg: #edf0f5 !default; -$input-color: $gray-600 !default; -$input-border-color: #cad1d7 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default; +$input-alternative-box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), + 0 1px 0 rgba(0, 0, 0, 0.02); +$input-focus-alternative-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); -$input-focus-bg: $white !default; -$input-focus-border-color: rgba(50,151,211,.25); -$input-focus-color: $input-color !default; -$input-focus-width: 0 !default; -$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default; +$input-color: $gray-600 !default; +$input-border-color: #cad1d7 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default; -$input-placeholder-color: $gray-500 !default; -$input-focus-placeholder-color: $gray-500 !default; +$input-focus-bg: $white !default; +$input-focus-border-color: rgba(50, 151, 211, 0.25); +$input-focus-color: $input-color !default; +$input-focus-width: 0 !default; +$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default; -$input-height-border: $input-border-width * 2 !default; +$input-placeholder-color: $gray-500 !default; +$input-focus-placeholder-color: $gray-500 !default; -$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +$input-height-border: $input-border-width * 2 !default; +$input-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); // Input groups -$input-group-addon-color: $input-placeholder-color !default; -$input-group-addon-bg: $input-bg !default; -$input-group-addon-border-color: $input-border-color !default; - -$input-group-addon-focus-color: $input-focus-color !default; -$input-group-addon-focus-bg: $input-focus-bg !default; -$input-group-addon-focus-border-color: $input-focus-border-color !default; +$input-group-addon-color: $input-placeholder-color !default; +$input-group-addon-bg: $input-bg !default; +$input-group-addon-border-color: $input-border-color !default; +$input-group-addon-focus-color: $input-focus-color !default; +$input-group-addon-focus-bg: $input-focus-bg !default; +$input-group-addon-focus-border-color: $input-focus-border-color !default; // Custom forms -$custom-control-gutter: 1.75rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-indicator-size: 1.25rem !default; +$custom-control-gutter: 1.75rem !default; +$custom-control-spacer-x: 1rem !default; +$custom-control-indicator-size: 1.25rem !default; -$custom-control-indicator-bg: $input-bg !default; -$custom-control-indicator-border-width: 1px !default; -$custom-control-indicator-border-color: $input-border-color !default; -$custom-control-indicator-box-shadow: none !default; +$custom-control-indicator-bg: $input-bg !default; +$custom-control-indicator-border-width: 1px !default; +$custom-control-indicator-border-color: $input-border-color !default; +$custom-control-indicator-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-hover-color: $component-hover-color !default; -$custom-control-indicator-hover-bg: $component-hover-bg !default; -$custom-control-indicator-hover-border-color: $component-hover-border-color !default; +$custom-control-indicator-hover-color: $component-hover-color !default; +$custom-control-indicator-hover-bg: $component-hover-bg !default; +$custom-control-indicator-hover-border-color: $component-hover-border-color !default; -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: $component-active-bg !default; -$custom-control-indicator-active-border-color: $component-active-border-color !default; -$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: $component-active-bg !default; +$custom-control-indicator-active-border-color: $component-active-border-color !default; +$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-checked-color: $component-active-color !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-border-color: $component-active-border-color !default; -$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5); +$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 +); -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; -$custom-checkbox-indicator-border-radius: $border-radius-sm !default; +$custom-checkbox-indicator-border-radius: $border-radius-sm !default; //$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-toggle-slider-bg: #ddd !default; -$custom-toggle-checked-bg: theme-color("primary") !default; +$custom-toggle-slider-bg: #ddd !default; +$custom-toggle-checked-bg: theme-color("primary") !default; // Form validation -$form-feedback-valid-bg: lighten($success, 15%); -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-bg: lighten($warning, 15%); -$form-feedback-invalid-color: theme-color("warning") !default; - +$form-feedback-valid-bg: lighten($success, 15%); +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-bg: lighten($warning, 15%); +$form-feedback-invalid-color: theme-color("warning") !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $input-border-radius !default; -$btn-border-radius-xl: $input-border-radius-xl !default; -$btn-border-radius-lg: $input-border-radius-lg !default; -$btn-border-radius-sm: $input-border-radius !default; - +$btn-border-radius: $input-border-radius !default; +$btn-border-radius-xl: $input-border-radius-xl !default; +$btn-border-radius-lg: $input-border-radius-lg !default; +$btn-border-radius-sm: $input-border-radius !default; // No UI Slider -$noui-target-bg: #eceeef !default; -$noui-target-thickness: 5px !default; -$noui-target-border-radius: 5px !default; -$noui-target-border-color: 0 !default; -$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1); +$noui-target-bg: #eceeef !default; +$noui-target-thickness: 5px !default; +$noui-target-border-radius: 5px !default; +$noui-target-border-color: 0 !default; +$noui-target-box-shadow: inset 0 1px 2px rgba(90, 97, 105, 0.1); -$noui-slider-connect-bg: $primary !default; +$noui-slider-connect-bg: $primary !default; $noui-slider-connect-disabled-bg: #b2b2b2 !default; -$noui-handle-width: 15px !default; -$noui-handle-bg: theme-color("primary") !default; -$noui-handle-border: 0 !default; -$noui-handle-border-radius: 100% !default; - -$noui-origin-border-radius: 2px !default; +$noui-handle-width: 15px !default; +$noui-handle-bg: theme-color("primary") !default; +$noui-handle-border: 0 !default; +$noui-handle-border-radius: 100% !default; +$noui-origin-border-radius: 2px !default; // Dropdown -$dropdown-bg: $white !default; -$dropdown-border-width: 0 !default; -$dropdown-border-color: rgba($black, .15); -$dropdown-border-radius: $border-radius-lg !default; -$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); +$dropdown-bg: $white !default; +$dropdown-border-width: 0 !default; +$dropdown-border-color: rgba($black, 0.15); +$dropdown-border-radius: $border-radius-lg !default; +$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), + 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; // Navs -$nav-link-padding-y: .25rem !default; -$nav-link-padding-x: .75rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: 0.25rem !default; +$nav-link-padding-x: 0.75rem !default; +$nav-link-color: $gray-700 !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-pills-padding-y: .75rem !default; -$nav-pills-padding-x: 1rem !default; +$nav-pills-padding-y: 0.75rem !default; +$nav-pills-padding-x: 1rem !default; -$nav-pills-space-x: 1rem !default; +$nav-pills-space-x: 1rem !default; -$nav-pills-bg: $white; -$nav-pills-border-width: 1px !default; -$nav-pills-border-color: theme-color("primary") !default; -$nav-pills-border-radius: $border-radius !default; +$nav-pills-bg: $white; +$nav-pills-border-width: 1px !default; +$nav-pills-border-color: theme-color("primary") !default; +$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-color: theme-color("primary") !default; -$nav-pills-link-hover-color: darken(theme-color("primary"), 5%); -$nav-pills-link-active-color: color-yiq(theme-color("primary")); -$nav-pills-link-active-bg: theme-color("primary") !default; -$nav-pills-box-shadow: $btn-box-shadow !default; +$nav-pills-link-color: theme-color("primary") !default; +$nav-pills-link-hover-color: darken(theme-color("primary"), 5%); +$nav-pills-link-active-color: color-yiq(theme-color("primary")); +$nav-pills-link-active-bg: theme-color("primary") !default; +$nav-pills-box-shadow: $btn-box-shadow !default; // Navbar -$navbar-transition: all .15s linear !default; -$navbar-padding-y: .5rem !default; -$navbar-padding-x: 1rem !default; - -$navbar-nav-link-padding-x: 1rem !default; -$navbar-nav-link-padding-y: 1rem !default; - -$navbar-nav-link-font-family: $font-family-alt !default; -$navbar-nav-link-font-size: .9rem !default; -$navbar-nav-link-font-weight: 400 !default; -$navbar-nav-link-text-transform: normal !default; -$navbar-nav-link-letter-spacing: 0 !default; -$navbar-nav-link-border-radius: $border-radius !default; - -$navbar-dark-bg: transparent !default; -$navbar-dark-hover-bg: rgba(255, 255, 255, .1); -$navbar-dark-active-bg: rgba(255, 255, 255, .1); -$navbar-dark-color: rgba($white, .95); -$navbar-dark-hover-color: rgba($white, .65); -$navbar-dark-active-color: rgba($white, .65); -$navbar-dark-disabled-color: rgba($white, .25); -$navbar-dark-toggler-border-color: transparent !default; - -$navbar-light-bg: transparent !default; -$navbar-light-hover-bg: rgba(0, 0, 0, .1); -$navbar-light-active-bg: rgba(0, 0, 0, .1); -$navbar-light-color: rgba($black, .5); -$navbar-light-hover-color: rgba($black, .7); -$navbar-light-active-color: rgba($black, .9); -$navbar-light-disabled-color: rgba($black, .3); -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-transition: all 0.15s linear !default; +$navbar-padding-y: 0.5rem !default; +$navbar-padding-x: 1rem !default; + +$navbar-nav-link-padding-x: 1rem !default; +$navbar-nav-link-padding-y: 1rem !default; + +$navbar-nav-link-font-family: $font-family-alt !default; +$navbar-nav-link-font-size: 0.9rem !default; +$navbar-nav-link-font-weight: 400 !default; +$navbar-nav-link-text-transform: normal !default; +$navbar-nav-link-letter-spacing: 0 !default; +$navbar-nav-link-border-radius: $border-radius !default; + +$navbar-dark-bg: transparent !default; +$navbar-dark-hover-bg: rgba(255, 255, 255, 0.1); +$navbar-dark-active-bg: rgba(255, 255, 255, 0.1); +$navbar-dark-color: rgba($white, 0.95); +$navbar-dark-hover-color: rgba($white, 0.65); +$navbar-dark-active-color: rgba($white, 0.65); +$navbar-dark-disabled-color: rgba($white, 0.25); +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-light-bg: transparent !default; +$navbar-light-hover-bg: rgba(0, 0, 0, 0.1); +$navbar-light-active-bg: rgba(0, 0, 0, 0.1); +$navbar-light-color: rgba($black, 0.5); +$navbar-light-hover-color: rgba($black, 0.7); +$navbar-light-active-color: rgba($black, 0.9); +$navbar-light-disabled-color: rgba($black, 0.3); +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-border-color: transparent !default; - // Alerts $alert-padding-y: 1rem !default; @@ -688,82 +725,78 @@ $alert-bg-level: -2 !default; $alert-border-level: -2 !default; $alert-color-level: 0 !default; - // List group -$list-group-bg: $white !default; -$list-group-border-color: $border-color !default; //rgba($black, .125); -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-y: 1rem !default; -$list-group-item-padding-x: 1rem !default; +$list-group-bg: $white !default; +$list-group-border-color: $border-color !default; //rgba($black, .125); +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-item-padding-y: 1rem !default; +$list-group-item-padding-x: 1rem !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-active-color: $list-group-action-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-active-color: $list-group-action-color !default; +$list-group-action-active-bg: $gray-200 !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-bg: transparent !default; -$close-hover-bg: transparent !default; -$close-color: rgba(0, 0, 0, .6); -$close-hover-color: rgba(0, 0, 0, .9); -$close-text-shadow: none !default; - +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-bg: transparent !default; +$close-hover-bg: transparent !default; +$close-color: rgba(0, 0, 0, 0.6); +$close-hover-color: rgba(0, 0, 0, 0.9); +$close-text-shadow: none !default; // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: 1px !default; -$popover-border-color: rgba($black, .05); -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2); - -$popover-header-bg: $popover-bg !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: .75rem !default; -$popover-header-padding-x: .75rem !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: 1px !default; +$popover-border-color: rgba($black, 0.05); +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0px 0.5rem 2rem 0px rgba($black, 0.2); -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-header-bg: $popover-bg !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.75rem !default; +$popover-header-padding-x: 0.75rem !default; -$popover-arrow-width: 1.5rem !default; -$popover-arrow-height: .75rem !default; -$popover-arrow-color: $popover-bg !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-outer-color: transparent !default; +$popover-arrow-width: 1.5rem !default; +$popover-arrow-height: 0.75rem !default; +$popover-arrow-color: $popover-bg !default; +$popover-arrow-outer-color: transparent !default; // Badges -$badge-font-size: 66% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .35rem !default; -$badge-padding-x: .375rem !default; -$badge-border-radius: $border-radius !default; -$badge-text-transfom: uppercase; +$badge-font-size: 66% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: 0.35rem !default; +$badge-padding-x: 0.375rem !default; +$badge-border-radius: $border-radius !default; +$badge-text-transfom: uppercase; -$badge-pill-padding-x: .875em !default; -$badge-pill-border-radius: 10rem !default; +$badge-pill-padding-x: 0.875em !default; +$badge-pill-border-radius: 10rem !default; -$badge-circle-size: 2rem; +$badge-circle-size: 2rem; // Pagination @@ -775,77 +808,78 @@ $badge-circle-size: 2rem; // $pagination-padding-x-lg: 1.5rem !default; // $pagination-line-height: 1.25 !default; -$pagination-color: $gray-600 !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-color: $gray-600 !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; //$pagination-focus-box-shadow: $btn-hover-box-shadow !default; -$pagination-hover-color: $gray-600 !default; -$pagination-hover-bg: $gray-300 !default; -$pagination-hover-border-color: $gray-300 !default; - -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; -$pagination-active-box-shadow: $btn-hover-box-shadow !default; +$pagination-hover-color: $gray-600 !default; +$pagination-hover-bg: $gray-300 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; +$pagination-active-box-shadow: $btn-hover-box-shadow !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Cards -$card-spacer-y: 1.25rem !default; -$card-spacer-x: 1.5rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .05); -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}); -$card-cap-bg: $gray-100 !default; -$card-bg: $white !default; +$card-spacer-y: 1.25rem !default; +$card-spacer-x: 1.5rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, 0.05); +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}); +$card-cap-bg: $gray-100 !default; +$card-bg: $white !default; -$card-img-overlay-padding: 1.25rem !default; +$card-img-overlay-padding: 1.25rem !default; //$card-group-margin: ($grid-gutter-width / 2); //$card-deck-margin: $card-group-margin !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; +$tooltip-font-size: $font-size-sm !default; // Modals -$modal-inner-padding: 1.5rem !default; +$modal-inner-padding: 1.5rem !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 380px !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 380px !default; -$modal-title-line-height: 1.1; +$modal-title-line-height: 1.1; //$modal-title-line-height: $shape-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2); -$modal-content-border-width: 1px !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-box-shadow-xs: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17); -$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17); - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .16 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1.25rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2); +$modal-content-border-width: 1px !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 15px 35px rgba(50, 50, 93, 0.2), + 0 5px 15px rgba(0, 0, 0, 0.17); +$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50, 50, 93, 0.2), + 0 5px 15px rgba(0, 0, 0, 0.17); + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.16 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1.25rem !default; // Datepicker @@ -865,10 +899,13 @@ $datepicker-header-cell-border-radius: $border-radius !default; $datepicker-active-color: $white !default; $datepicker-active-background: theme-color("primary") !default; -$datepicker-active-box-shadow: none !default; +$datepicker-active-box-shadow: none !default; $datepicker-range-background: theme-color("primary") !default; -$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%); +$datepicker-range-cell-focused-background: darken( + $datepicker-range-background, + 5% +); $datepicker-range-color: $white !default; $datepicker-range-highlighted-bg: $gray-200 !default; @@ -876,10 +913,9 @@ $datepicker-dropdown-border: lighten($gray-400, 40%); $datepicker-dropdown-bg: $white !default; $datepicker-highlighted-bg: $datepicker-active-background !default; - // Footer -$footer-link-font-size: .85rem !default; +$footer-link-font-size: 0.85rem !default; $footer-bg: theme-color("secondary") !default; $footer-color: $gray-600 !default; $footer-link-color: $gray-600 !default; diff --git a/src/assets/scss/custom/mixins/_alert.scss b/src/assets/scss/custom/mixins/_alert.scss index 1dbe85b6..d9764da9 100644 --- a/src/assets/scss/custom/mixins/_alert.scss +++ b/src/assets/scss/custom/mixins/_alert.scss @@ -1,13 +1,13 @@ @mixin alert-variant($background, $border, $color) { - color: color-yiq($background); - @include gradient-bg($background); - border-color: $border; + color: color-yiq($background); + @include gradient-bg($background); + border-color: $border; - hr { - border-top-color: darken($border, 5%); - } + hr { + border-top-color: darken($border, 5%); + } - .alert-link { - color: darken($color, 10%); - } -} \ No newline at end of file + .alert-link { + color: darken($color, 10%); + } +} diff --git a/src/assets/scss/custom/mixins/_background-variant.scss b/src/assets/scss/custom/mixins/_background-variant.scss index d6bc3c00..6388caca 100644 --- a/src/assets/scss/custom/mixins/_background-variant.scss +++ b/src/assets/scss/custom/mixins/_background-variant.scss @@ -1,18 +1,22 @@ // Contextual backgrounds @mixin bg-variant($parent, $color) { - #{$parent} { - background-color: $color !important; - } - a#{$parent}, - button#{$parent} { - @include hover-focus { - background-color: darken($color, 10%) !important; - } + #{$parent} { + background-color: $color !important; + } + a#{$parent}, + button#{$parent} { + @include hover-focus { + background-color: darken($color, 10%) !important; } + } } @mixin bg-gradient-variant($parent, $color) { - #{$parent} { - background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important; - } + #{$parent} { + background: linear-gradient( + 87deg, + $color 0, + adjust-hue($color, 25%) 100% + ) !important; + } } diff --git a/src/assets/scss/custom/mixins/_badge.scss b/src/assets/scss/custom/mixins/_badge.scss index f19044f9..aa957da7 100644 --- a/src/assets/scss/custom/mixins/_badge.scss +++ b/src/assets/scss/custom/mixins/_badge.scss @@ -1,12 +1,12 @@ @mixin badge-variant($bg) { - color: saturate(darken($bg, 10%), 10); - background-color: transparentize(lighten($bg, 25%), .5); + color: saturate(darken($bg, 10%), 10); + background-color: transparentize(lighten($bg, 25%), 0.5); - &[href] { - @include hover-focus { - color: color-yiq($bg); - text-decoration: none; - background-color: darken($bg, 10%); - } - } + &[href] { + @include hover-focus { + color: color-yiq($bg); + text-decoration: none; + background-color: darken($bg, 10%); + } + } } diff --git a/src/assets/scss/custom/mixins/_buttons.scss b/src/assets/scss/custom/mixins/_buttons.scss index 5cedd20e..49150741 100644 --- a/src/assets/scss/custom/mixins/_buttons.scss +++ b/src/assets/scss/custom/mixins/_buttons.scss @@ -1,105 +1,121 @@ -@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) { - color: color-yiq($background); - @include gradient-bg($background); - border-color: $border; - @include box-shadow($btn-box-shadow); +@mixin button-variant( + $background, + $border, + $hover-background: darken($background, 0%), + $hover-border: darken($border, 0%), + $active-background: darken($background, 10%), + $active-border: darken($border, 0%) +) { + color: color-yiq($background); + @include gradient-bg($background); + border-color: $border; + @include box-shadow($btn-box-shadow); - @include hover { - color: color-yiq($hover-background); - @include gradient-bg($hover-background); - border-color: $hover-border; - } + @include hover { + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; + } - &:focus, - &.focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); - } - } // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - color: color-yiq($background); - background-color: $background; - border-color: $border; + &:focus, + &.focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); } + } // Disabled comes first so active can properly restyle + &.disabled, + &:disabled { + color: color-yiq($background); + background-color: $background; + border-color: $border; + } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show>&.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - @if $enable-gradients { - background-image: none; // Remove the gradient for the pressed/active state - } - border-color: $active-border; + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + @if $enable-gradients { + background-image: none; // Remove the gradient for the pressed/active state + } + border-color: $active-border; - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); - } - } + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($border, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); + } } + } } -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { - color: $color; - background-color: transparent; - background-image: none; - border-color: $color; +@mixin button-outline-variant( + $color, + $color-hover: color-yiq($color), + $active-background: $color, + $active-border: $color +) { + color: $color; + background-color: transparent; + background-image: none; + border-color: $color; - &:hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; - } + &:hover { + color: $color-hover; + background-color: $active-background; + border-color: $active-border; + } - &:focus, - &.focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } + &:focus, + &.focus { + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); + } - &.disabled, - &:disabled { - color: $color; - background-color: transparent; - } + &.disabled, + &:disabled { + color: $color; + background-color: transparent; + } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show>&.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - border-color: $active-border; + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + border-color: $active-border; - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows and $btn-active-box-shadow !=none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - } + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows and $btn-active-box-shadow !=none { + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($color, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); + } } + } } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { - padding: $padding-y $padding-x; - font-size: $font-size; - line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } - @else { - border-radius: 0; - } -} \ No newline at end of file +@mixin button-size( + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius +) { + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; // Manually declare to provide an override to the browser default + @if $enable-rounded { + border-radius: $border-radius; + } @else { + border-radius: 0; + } +} diff --git a/src/assets/scss/custom/mixins/_forms.scss b/src/assets/scss/custom/mixins/_forms.scss index 4740378b..2f660a14 100644 --- a/src/assets/scss/custom/mixins/_forms.scss +++ b/src/assets/scss/custom/mixins/_forms.scss @@ -1,4 +1,4 @@ -@mixin form-control-focus() { +@mixin form-control-focus() { &:focus { color: $input-focus-color; background-color: $input-focus-bg; @@ -13,7 +13,6 @@ } } - @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; @@ -29,13 +28,13 @@ z-index: 5; display: none; max-width: 100%; // Contain to parent when possible - padding: .5rem; - margin-top: .1rem; - font-size: .875rem; + padding: 0.5rem; + margin-top: 0.1rem; + font-size: 0.875rem; line-height: 1; color: #fff; - background-color: rgba($color, .8); - border-radius: .2rem; + background-color: rgba($color, 0.8); + border-radius: 0.2rem; } .form-control, @@ -96,7 +95,8 @@ &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 1px $body-bg, + 0 0 0 $input-focus-width rgba($color, 0.25); } } } @@ -109,7 +109,9 @@ ~ .custom-file-label { border-color: $color; - &::before { border-color: inherit; } + &::before { + border-color: inherit; + } } ~ .#{$state}-feedback, @@ -119,10 +121,9 @@ &:focus { ~ .custom-file-label { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } } } } } - diff --git a/src/assets/scss/custom/mixins/_icon.scss b/src/assets/scss/custom/mixins/_icon.scss index 88199859..a751c506 100644 --- a/src/assets/scss/custom/mixins/_icon.scss +++ b/src/assets/scss/custom/mixins/_icon.scss @@ -1,4 +1,4 @@ @mixin icon-shape-variant($color) { - color: saturate(darken($color, 10%), 10); - background-color: transparentize(lighten($color, 10%), .5); -} \ No newline at end of file + color: saturate(darken($color, 10%), 10); + background-color: transparentize(lighten($color, 10%), 0.5); +} diff --git a/src/assets/scss/custom/mixins/_modals.scss b/src/assets/scss/custom/mixins/_modals.scss index f9124902..7e0f3f52 100644 --- a/src/assets/scss/custom/mixins/_modals.scss +++ b/src/assets/scss/custom/mixins/_modals.scss @@ -1,23 +1,23 @@ @mixin modal-variant($background) { - .modal-title { - color: color-yiq($background); - } - .modal-header, - .modal-footer { - border-color: rgba(color-yiq($background), .075); - } - .modal-content { - background-color: $background; - color: color-yiq($background); + .modal-title { + color: color-yiq($background); + } + .modal-header, + .modal-footer { + border-color: rgba(color-yiq($background), 0.075); + } + .modal-content { + background-color: $background; + color: color-yiq($background); - .heading { - color: color-yiq($background); - } - } + .heading { + color: color-yiq($background); + } + } - .close { - &>span:not(.sr-only) { - color: $white; - } + .close { + & > span:not(.sr-only) { + color: $white; } -} \ No newline at end of file + } +} diff --git a/src/assets/scss/custom/mixins/_popover.scss b/src/assets/scss/custom/mixins/_popover.scss index e535b537..3182a57b 100644 --- a/src/assets/scss/custom/mixins/_popover.scss +++ b/src/assets/scss/custom/mixins/_popover.scss @@ -1,36 +1,35 @@ @mixin popover-variant($background) { + background-color: $background; - background-color: $background; + .popover-header { + background-color: $background; + color: color-yiq($background); + } - .popover-header { - background-color: $background; - color: color-yiq($background); - } - - .popover-body { - color: color-yiq($background); - } - .popover-header{ - border-color: rgba(color-yiq($background), .2); - } - &.bs-popover-top { - .arrow::after { - border-top-color: $background; - } - } - &.bs-popover-right { - .arrow::after { - border-right-color: $background; - } - } - &.bs-popover-bottom { - .arrow::after { - border-bottom-color: $background; - } - } - &.bs-popover-left { - .arrow::after { - border-left-color: $background; - } - } -} \ No newline at end of file + .popover-body { + color: color-yiq($background); + } + .popover-header { + border-color: rgba(color-yiq($background), 0.2); + } + &.bs-popover-top { + .arrow::after { + border-top-color: $background; + } + } + &.bs-popover-right { + .arrow::after { + border-right-color: $background; + } + } + &.bs-popover-bottom { + .arrow::after { + border-bottom-color: $background; + } + } + &.bs-popover-left { + .arrow::after { + border-left-color: $background; + } + } +} diff --git a/src/assets/scss/custom/utilities/_backgrounds.scss b/src/assets/scss/custom/utilities/_backgrounds.scss index 037d12f2..ec1ff910 100644 --- a/src/assets/scss/custom/utilities/_backgrounds.scss +++ b/src/assets/scss/custom/utilities/_backgrounds.scss @@ -1,42 +1,40 @@ @each $color, $value in $colors { - @include bg-variant(".bg-#{$color}", $value); + @include bg-variant(".bg-#{$color}", $value); } @each $color, $value in $theme-colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } -@each $color, $value in $colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); +@each $color, $value in $colors { + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } - // Sections section { - //background-color: section-color("primary"); + //background-color: section-color("primary"); } @each $color, $value in $section-colors { - @include bg-variant(".section-#{$color}", $value); + @include bg-variant(".section-#{$color}", $value); } @each $color, $value in $theme-colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } - // Shape (svg) fill colors @each $color, $value in $theme-colors { - .fill-#{$color} { - fill: $value; - } + .fill-#{$color} { + fill: $value; + } - .stroke-#{$color} { - stroke: $value; - } + .stroke-#{$color} { + stroke: $value; + } } .fill-opacity-8 { - fill-opacity: .8; -} \ No newline at end of file + fill-opacity: 0.8; +} diff --git a/src/assets/scss/custom/utilities/_floating.scss b/src/assets/scss/custom/utilities/_floating.scss index 357a2dc7..fc6b4478 100644 --- a/src/assets/scss/custom/utilities/_floating.scss +++ b/src/assets/scss/custom/utilities/_floating.scss @@ -1,54 +1,54 @@ .floating { - animation: floating 3s ease infinite; - will-change: transform; + animation: floating 3s ease infinite; + will-change: transform; - &:hover { - animation-play-state: paused; - } + &:hover { + animation-play-state: paused; + } } .floating-lg { - animation: floating-lg 3s ease infinite; + animation: floating-lg 3s ease infinite; } .floating-sm { - animation: floating-sm 3s ease infinite; + animation: floating-sm 3s ease infinite; } // Keyframes @keyframes floating-lg { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(15px) - } - 100% { - transform: translateY(0px) - } + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(15px); + } + 100% { + transform: translateY(0px); + } } @keyframes floating { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(10px) - } - 100% { - transform: translateY(0px) - } + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(10px); + } + 100% { + transform: translateY(0px); + } } @keyframes floating-sm { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(5px) - } - 100% { - transform: translateY(0px) - } -} \ No newline at end of file + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0px); + } +} diff --git a/src/assets/scss/custom/utilities/_helper.scss b/src/assets/scss/custom/utilities/_helper.scss index f0faa589..c1986b35 100644 --- a/src/assets/scss/custom/utilities/_helper.scss +++ b/src/assets/scss/custom/utilities/_helper.scss @@ -1,62 +1,62 @@ // Image .img-center { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; } // Clearfix .floatfix { - &:before, - &:after { - content: ''; - display: table; - } - &:after { - clear: both; - } + &:before, + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } } // Overflows .overflow-visible { - overflow: visible !important; + overflow: visible !important; } .overflow-hidden { - overflow: hidden !important; + overflow: hidden !important; } // Opacity classes .opacity-1 { - opacity: .1 !important; + opacity: 0.1 !important; } .opacity-2 { - opacity: .2 !important; + opacity: 0.2 !important; } .opacity-3 { - opacity: .3 !important; + opacity: 0.3 !important; } .opacity-4 { - opacity: .4 !important; + opacity: 0.4 !important; } .opacity-5 { - opacity: .5 !important; + opacity: 0.5 !important; } .opacity-6 { - opacity: .6 !important; + opacity: 0.6 !important; } .opacity-7 { - opacity: .7 !important; + opacity: 0.7 !important; } .opacity-8 { - opacity: .8 !important; + opacity: 0.8 !important; } .opacity-8 { - opacity: .9 !important; + opacity: 0.9 !important; } .opacity-10 { - opacity: 1 !important; -} \ No newline at end of file + opacity: 1 !important; +} diff --git a/src/assets/scss/custom/utilities/_shadows.scss b/src/assets/scss/custom/utilities/_shadows.scss index 01f4f3c5..2bbe333f 100644 --- a/src/assets/scss/custom/utilities/_shadows.scss +++ b/src/assets/scss/custom/utilities/_shadows.scss @@ -1,10 +1,18 @@ [class*="shadow"] { - @if $enable-transitions { - transition: $transition-base; - } + @if $enable-transitions { + transition: $transition-base; + } } -.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } -.shadow--hover:hover { box-shadow: $box-shadow !important; } -.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } -.shadow-none--hover:hover { box-shadow: none !important; } +.shadow-sm--hover:hover { + box-shadow: $box-shadow-sm !important; +} +.shadow--hover:hover { + box-shadow: $box-shadow !important; +} +.shadow-lg--hover:hover { + box-shadow: $box-shadow-lg !important; +} +.shadow-none--hover:hover { + box-shadow: none !important; +} diff --git a/src/assets/scss/custom/utilities/_sizing.scss b/src/assets/scss/custom/utilities/_sizing.scss index 4361abfb..0b0ce14a 100644 --- a/src/assets/scss/custom/utilities/_sizing.scss +++ b/src/assets/scss/custom/utilities/_sizing.scss @@ -1,5 +1,5 @@ // Height values in vh .h-100vh { - height: 100vh !important; + height: 100vh !important; } diff --git a/src/assets/scss/custom/utilities/_spacing.scss b/src/assets/scss/custom/utilities/_spacing.scss index 32a00612..dbb68f77 100644 --- a/src/assets/scss/custom/utilities/_spacing.scss +++ b/src/assets/scss/custom/utilities/_spacing.scss @@ -1,105 +1,103 @@ // Spacing columns vertically .row.row-grid > [class*="col-"] + [class*="col-"] { - margin-top: 3rem; + margin-top: 3rem; } @include media-breakpoint-up(lg) { - .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { + margin-top: 0; + } } @include media-breakpoint-up(md) { - .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { + margin-top: 0; + } } @include media-breakpoint-up(sm) { - .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { + margin-top: 0; + } } .row-grid + .row-grid { - margin-top: 3rem; + margin-top: 3rem; } // Negative margins and paddings -@media(min-width: 992px) { - [class*="mt--"], - [class*="mr--"], - [class*="mb--"], - [class*="ml--"] { - position: relative; - z-index: 5; - } +@media (min-width: 992px) { + [class*="mt--"], + [class*="mr--"], + [class*="mb--"], + [class*="ml--"] { + position: relative; + z-index: 5; + } + // Large negative margins in pixels - // Large negative margins in pixels + .mt--100 { + margin-top: -100px !important; + } + .mr--100 { + margin-right: -100px !important; + } + .mb--100 { + margin-bottom: -100px !important; + } + .ml--100 { + margin-left: -100px !important; + } + .mt--150 { + margin-top: -150px !important; + } + .mb--150 { + margin-bottom: -150px !important; + } + .mt--200 { + margin-top: -200px !important; + } + .mb--200 { + margin-bottom: -200px !important; + } + .mt--300 { + margin-top: -300px !important; + } + .mb--300 { + margin-bottom: -300px !important; + } - .mt--100 { - margin-top: -100px !important; - } - .mr--100 { - margin-right: -100px !important; - } - .mb--100 { - margin-bottom: -100px !important; - } - .ml--100 { - margin-left: -100px !important; - } - .mt--150 { - margin-top: -150px !important; - } - .mb--150 { - margin-bottom: -150px !important; - } - .mt--200 { - margin-top: -200px !important; - } - .mb--200 { - margin-bottom: -200px !important; - } - .mt--300 { - margin-top: -300px !important; - } - .mb--300 { - margin-bottom: -300px !important; - } + // Large margins in pixels - - // Large margins in pixels - - .pt-100 { - padding-top: 100px !important; - } - .pb-100 { - padding-bottom: 100px !important; - } - .pt-150 { - padding-top: 150px !important; - } - .pb-150 { - padding-bottom: 150px !important; - } - .pt-200 { - padding-top: 200px !important; - } - .pb-200 { - padding-bottom: 200px !important; - } - .pt-250 { - padding-top: 250px !important; - } - .pb-250 { - padding-bottom: 250px !important; - } - .pt-300 { - padding-top: 300px!important; - } - .pb-300 { - padding-bottom: 300px!important; - } + .pt-100 { + padding-top: 100px !important; + } + .pb-100 { + padding-bottom: 100px !important; + } + .pt-150 { + padding-top: 150px !important; + } + .pb-150 { + padding-bottom: 150px !important; + } + .pt-200 { + padding-top: 200px !important; + } + .pb-200 { + padding-bottom: 200px !important; + } + .pt-250 { + padding-top: 250px !important; + } + .pb-250 { + padding-bottom: 250px !important; + } + .pt-300 { + padding-top: 300px !important; + } + .pb-300 { + padding-bottom: 300px !important; + } } diff --git a/src/assets/scss/custom/utilities/_text.scss b/src/assets/scss/custom/utilities/_text.scss index 2cc0a510..24225f34 100644 --- a/src/assets/scss/custom/utilities/_text.scss +++ b/src/assets/scss/custom/utilities/_text.scss @@ -1,35 +1,74 @@ // Weight and italics -.font-weight-300 { font-weight: 300 !important; } -.font-weight-400 { font-weight: 400 !important; } -.font-weight-500 { font-weight: 500 !important; } -.font-weight-600 { font-weight: 600 !important; } -.font-weight-700 { font-weight: 700 !important; } -.font-weight-800 { font-weight: 800 !important; } -.font-weight-900 { font-weight: 900 !important; } - +.font-weight-300 { + font-weight: 300 !important; +} +.font-weight-400 { + font-weight: 400 !important; +} +.font-weight-500 { + font-weight: 500 !important; +} +.font-weight-600 { + font-weight: 600 !important; +} +.font-weight-700 { + font-weight: 700 !important; +} +.font-weight-800 { + font-weight: 800 !important; +} +.font-weight-900 { + font-weight: 900 !important; +} // Text decorations -.text-underline { text-decoration: underline; } -.text-through { text-decoration: line-through; } - +.text-underline { + text-decoration: underline; +} +.text-through { + text-decoration: line-through; +} // Line heights -.lh-100 { line-height: 1; } -.lh-110 { line-height: 1.1; } -.lh-120 { line-height: 1.2; } -.lh-130 { line-height: 1.3; } -.lh-140 { line-height: 1.4; } -.lh-150 { line-height: 1.5; } -.lh-160 { line-height: 1.6; } -.lh-170 { line-height: 1.7; } -.lh-180 { line-height: 1.8; } - +.lh-100 { + line-height: 1; +} +.lh-110 { + line-height: 1.1; +} +.lh-120 { + line-height: 1.2; +} +.lh-130 { + line-height: 1.3; +} +.lh-140 { + line-height: 1.4; +} +.lh-150 { + line-height: 1.5; +} +.lh-160 { + line-height: 1.6; +} +.lh-170 { + line-height: 1.7; +} +.lh-180 { + line-height: 1.8; +} // Letter spacings -.ls-1 { letter-spacing: .0625rem; } -.ls-15 { letter-spacing: .09375rem; } -.ls-2 { letter-spacing: 0.125rem; } \ No newline at end of file +.ls-1 { + letter-spacing: 0.0625rem; +} +.ls-15 { + letter-spacing: 0.09375rem; +} +.ls-2 { + letter-spacing: 0.125rem; +} diff --git a/src/assets/scss/custom/utilities/_transform.scss b/src/assets/scss/custom/utilities/_transform.scss index 1f0d4b13..e01f014f 100644 --- a/src/assets/scss/custom/utilities/_transform.scss +++ b/src/assets/scss/custom/utilities/_transform.scss @@ -1,8 +1,10 @@ @include media-breakpoint-up(lg) { - .transform-perspective-right { - transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); - } - .transform-perspective-left{ - transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) - } + .transform-perspective-right { + transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) + rotate(2deg); + } + .transform-perspective-left { + transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) + rotate(-2deg); + } } diff --git a/src/assets/scss/custom/vendor/_flatpickr.scss b/src/assets/scss/custom/vendor/_flatpickr.scss index 655e982c..54c0256f 100644 --- a/src/assets/scss/custom/vendor/_flatpickr.scss +++ b/src/assets/scss/custom/vendor/_flatpickr.scss @@ -39,27 +39,29 @@ .flatpickr-day.inRange { background: $datepicker-active-background !important; color: $datepicker-active-color; - box-shadow: -5px 0 0 $datepicker-active-background, 5px 0 0 $datepicker-active-background; + box-shadow: -5px 0 0 $datepicker-active-background, + 5px 0 0 $datepicker-active-background; border: none !important; } - .flatpickr-day.startRange, .flatpickr-day.endRange { + .flatpickr-day.startRange, + .flatpickr-day.endRange { background: $datepicker-active-background; } - .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), - .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), - .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { + .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), + .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), + .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { box-shadow: -10px 0 0 $datepicker-active-background; } .flatpickr-months .flatpickr-prev-month:hover svg, - .flatpickr-months .flatpickr-next-month:hover svg{ + .flatpickr-months .flatpickr-next-month:hover svg { fill: $datepicker-active-background; } .flatpickr-current-month span.cur-month, - .flatpickr-current-month input.cur-year{ + .flatpickr-current-month input.cur-year { padding: 0 10px; color: $gray-700; font-size: $font-size-sm; diff --git a/src/assets/scss/custom/vendor/_headroom.scss b/src/assets/scss/custom/vendor/_headroom.scss index 86c8e381..68cccd95 100644 --- a/src/assets/scss/custom/vendor/_headroom.scss +++ b/src/assets/scss/custom/vendor/_headroom.scss @@ -1,21 +1,20 @@ - .headroom { - will-change: transform; - transition: $transition-base; - background-color: inherit; + will-change: transform; + transition: $transition-base; + background-color: inherit; } .headroom--pinned { - @extend .position-fixed; - transform: translateY(0%); + @extend .position-fixed; + transform: translateY(0%); } .headroom--unpinned { - @extend .position-fixed; - transform: translateY(-100%); + @extend .position-fixed; + transform: translateY(-100%); } .headroom--not-top { - padding-top: .5rem; - padding-bottom: .5rem; - background-color: theme-color("default") !important; - box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1); -} \ No newline at end of file + padding-top: 0.5rem; + padding-bottom: 0.5rem; + background-color: theme-color("default") !important; + box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1); +} diff --git a/src/assets/scss/custom/vendor/_nouislider.scss b/src/assets/scss/custom/vendor/_nouislider.scss index 39f48bb1..1032cb99 100644 --- a/src/assets/scss/custom/vendor/_nouislider.scss +++ b/src/assets/scss/custom/vendor/_nouislider.scss @@ -1,451 +1,441 @@ // Original styles .noUi-target, .noUi-target * { - -webkit-touch-callout: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-user-select: none; - touch-action: none; - user-select: none; - box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + touch-action: none; + user-select: none; + box-sizing: border-box; } .noUi-target { - position: relative; - direction: ltr; + position: relative; + direction: ltr; } .noUi-base, .noUi-connects { - width: 100%; - height: 100%; - position: relative; - z-index: 1; + width: 100%; + height: 100%; + position: relative; + z-index: 1; } /* Wrapper for all connect elements. */ .noUi-connects { - overflow: hidden; - z-index: 0; + overflow: hidden; + z-index: 0; } .noUi-connect, .noUi-origin { - will-change: transform; - position: absolute; - z-index: 1; - top: 0; - left: 0; - height: 100%; - width: 100%; - transform-origin: 0 0; + will-change: transform; + position: absolute; + z-index: 1; + top: 0; + left: 0; + height: 100%; + width: 100%; + transform-origin: 0 0; } - html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { - left: auto; - right: 0; + left: auto; + right: 0; } .noUi-vertical .noUi-origin { - width: 0; + width: 0; } .noUi-horizontal .noUi-origin { - height: 0; + height: 0; } .noUi-handle { - position: absolute; + position: absolute; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { - transition: transform .3s; + transition: transform 0.3s; } .noUi-state-drag * { - cursor: inherit !important; + cursor: inherit !important; } .noUi-horizontal { - height: $noui-target-thickness; + height: $noui-target-thickness; } .noUi-horizontal .noUi-handle { - width: 34px; - height: 28px; - left: -17px; - top: -6px; + width: 34px; + height: 28px; + left: -17px; + top: -6px; } .noUi-vertical { - width: $noui-target-thickness; + width: $noui-target-thickness; } .noUi-vertical .noUi-handle { - width: 28px; - height: 34px; - left: -6px; - top: -17px; + width: 28px; + height: 34px; + left: -6px; + top: -17px; } html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { - right: -17px; - left: auto; + right: -17px; + left: auto; } .noUi-connects { - border-radius: 3px; + border-radius: 3px; } .noUi-connect { - background: $noui-slider-connect-bg; + background: $noui-slider-connect-bg; } .noUi-draggable { - cursor: ew-resize; + cursor: ew-resize; } .noUi-vertical .noUi-draggable { - cursor: ns-resize; + cursor: ns-resize; } .noUi-handle { - border: 1px solid #D9D9D9; - border-radius: 3px; - background: #FFF; - cursor: default; - box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; - outline: none; + border: 1px solid #d9d9d9; + border-radius: 3px; + background: #fff; + cursor: default; + box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb; + outline: none; } .noUi-active { - outline: none; - //box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; + outline: none; + //box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } - /* Disabled state; */ [disabled] .noUi-connect { - background: #B8B8B8; + background: #b8b8b8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { - cursor: not-allowed; + cursor: not-allowed; } - /* Base; * */ .noUi-pips, .noUi-pips * { - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .noUi-pips { - position: absolute; - color: #999; + position: absolute; + color: #999; } - /* Values; * */ .noUi-value { - position: absolute; - white-space: nowrap; - text-align: center; + position: absolute; + white-space: nowrap; + text-align: center; } .noUi-value-sub { - color: #ccc; - font-size: 10px; + color: #ccc; + font-size: 10px; } - /* Markings; * */ .noUi-marker { - position: absolute; - background: #CCC; + position: absolute; + background: #ccc; } .noUi-marker-sub { - background: #AAA; + background: #aaa; } .noUi-marker-large { - background: #AAA; + background: #aaa; } - /* Horizontal layout; * */ .noUi-pips-horizontal { - padding: 10px 0; - height: 80px; - top: 100%; - left: 0; - width: 100%; + padding: 10px 0; + height: 80px; + top: 100%; + left: 0; + width: 100%; } .noUi-value-horizontal { - transform: translate(-50%, 50%); + transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { - transform: translate(50%, 50%); + transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { - margin-left: -1px; - width: 2px; - height: 5px; + margin-left: -1px; + width: 2px; + height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { - height: 10px; + height: 10px; } .noUi-marker-horizontal.noUi-marker-large { - height: 15px; + height: 15px; } - /* Vertical layout; * */ .noUi-pips-vertical { - padding: 0 10px; - height: 100%; - top: 0; - left: 100%; + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; } .noUi-value-vertical { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%, 0); - padding-left: 25px; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%, 0); + padding-left: 25px; } .noUi-rtl .noUi-value-vertical { - -webkit-transform: translate(0, 50%); - transform: translate(0, 50%); + -webkit-transform: translate(0, 50%); + transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { - width: 5px; - height: 2px; - margin-top: -1px; + width: 5px; + height: 2px; + margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { - width: 10px; + width: 10px; } .noUi-marker-vertical.noUi-marker-large { - width: 15px; + width: 15px; } .noUi-tooltip { - display: block; - position: absolute; - border: 1px solid #D9D9D9; - border-radius: 3px; - background: #fff; - color: #000; - padding: 5px; - text-align: center; - white-space: nowrap; + display: block; + position: absolute; + border: 1px solid #d9d9d9; + border-radius: 3px; + background: #fff; + color: #000; + padding: 5px; + text-align: center; + white-space: nowrap; } .noUi-horizontal .noUi-tooltip { - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - left: 50%; - bottom: 120%; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + left: 50%; + bottom: 120%; } .noUi-vertical .noUi-tooltip { - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); - top: 50%; - right: 120%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + top: 50%; + right: 120%; } - // Custom styles .noUi-target { - background: $noui-target-bg; - border-radius: $noui-target-border-radius; - border: 0; - box-shadow: $noui-target-box-shadow; - margin: 15px 0; - cursor: pointer; + background: $noui-target-bg; + border-radius: $noui-target-border-radius; + border: 0; + box-shadow: $noui-target-box-shadow; + margin: 15px 0; + cursor: pointer; } .noUi-horizontal { - height: $noui-target-thickness; + height: $noui-target-thickness; } html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { - right: -10px; + right: -10px; } .noUi-vertical { - width: $noui-target-thickness; + width: $noui-target-thickness; } .noUi-connect { - background: theme-color("primary"); - box-shadow: none; + background: theme-color("primary"); + box-shadow: none; } .noUi-handle { - } .noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle { - top: -$noui-target-thickness; - width: $noui-handle-width; - height: $noui-handle-width; - border-radius: 100%; - box-shadow: none; - cursor: pointer; - background-color: $noui-handle-bg; - border: $noui-handle-border; - transition: box-shadow .15s, transform .15s; + top: -$noui-target-thickness; + width: $noui-handle-width; + height: $noui-handle-width; + border-radius: 100%; + box-shadow: none; + cursor: pointer; + background-color: $noui-handle-bg; + border: $noui-handle-border; + transition: box-shadow 0.15s, transform 0.15s; } - .noUi-horizontal .noUi-handle.noUi-active, .noUi-vertical .noUi-handle.noUi-active { - transform: scale(1.2); + transform: scale(1.2); } .noUi-horizontal .noUi-active, .noUi-vertical .noUi-active { - //box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1); + //box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1); } .input-slider--cyan .noUi-connect { - background: $cyan; + background: $cyan; } .input-slider--cyan.noUi-horizontal .noUi-handle, .input-slider--cyan.noUi-vertical .noUi-handle { - background-color: $cyan; + background-color: $cyan; } .input-slider--red .noUi-connect { - background: $red; + background: $red; } .input-slider--red.noUi-horizontal .noUi-handle, .input-slider--red.noUi-vertical .noUi-handle { - background-color: $red; + background-color: $red; } .input-slider--green .noUi-connect { - background: $green; + background: $green; } .input-slider--green.noUi-horizontal .noUi-handle, .input-slider--green.noUi-vertical .noUi-handle { - background-color: $green; + background-color: $green; } .input-slider--yellow .noUi-connect { - background: $yellow; + background: $yellow; } .input-slider--yellow.noUi-horizontal .noUi-handle, .input-slider--yellow.noUi-vertical .noUi-handle { - background-color: $yellow; + background-color: $yellow; } .input-slider--pink .noUi-connect { - background: $pink; + background: $pink; } .input-slider--pink.noUi-horizontal .noUi-handle, .input-slider--pink.noUi-vertical .noUi-handle { - background-color: $pink; + background-color: $pink; } /* Disabled state */ [disabled] .noUi-connect, [disabled].noUi-connect { - background: $noui-slider-connect-disabled-bg; + background: $noui-slider-connect-disabled-bg; } [disabled] .noUi-handle, [disabled].noUi-origin { - cursor: not-allowed; + cursor: not-allowed; } /* Range slider value labels */ .range-slider-value { - font-size: $font-size-xs; - font-weight: 500; - background-color: rgba($dark, .7); - color: color-yiq($dark); - border-radius: 10px; - padding: .4em .8em .3em .85em; + font-size: $font-size-xs; + font-weight: 500; + background-color: rgba($dark, 0.7); + color: color-yiq($dark); + border-radius: 10px; + padding: 0.4em 0.8em 0.3em 0.85em; } .range-slider-wrapper .upper-info { - font-weight: 400; - margin-bottom: 5px; + font-weight: 400; + margin-bottom: 5px; } .input-slider-value-output { - background: #333; - color: #fff; - padding: 4px 8px; - position: relative; - top: 12px; - font-size: 11px; - border-radius: 2px; + background: #333; + color: #fff; + padding: 4px 8px; + position: relative; + top: 12px; + font-size: 11px; + border-radius: 2px; } .input-slider-value-output:after { - bottom: 100%; - left: 10px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: rgba(136, 183, 213, 0); - border-bottom-color: #333; - border-width: 4px; - margin-left: -4px; + bottom: 100%; + left: 10px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-bottom-color: #333; + border-width: 4px; + margin-left: -4px; } .input-slider-value-output.left:after { - left: 10px; - right: auto; + left: 10px; + right: auto; } .input-slider-value-output.right:after { - right: 10px; - left: auto; + right: 10px; + left: auto; } diff --git a/src/assets/vendor/font-awesome/css/font-awesome.css b/src/assets/vendor/font-awesome/css/font-awesome.css index ee906a81..80a9f5bb 100644 --- a/src/assets/vendor/font-awesome/css/font-awesome.css +++ b/src/assets/vendor/font-awesome/css/font-awesome.css @@ -5,9 +5,15 @@ /* FONT PATH * -------------------------- */ @font-face { - font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); + font-family: "FontAwesome"; + src: url("../fonts/fontawesome-webfont.eot?v=4.7.0"); + src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") + format("embedded-opentype"), + url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), + url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), + url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), + url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") + format("svg"); font-weight: normal; font-style: normal; } @@ -60,9 +66,9 @@ left: -1.85714286em; } .fa-border { - padding: .2em .25em .15em; + padding: 0.2em 0.25em 0.15em; border: solid 0.08em #eeeeee; - border-radius: .1em; + border-radius: 0.1em; } .fa-pull-left { float: left; @@ -71,10 +77,10 @@ float: right; } .fa.fa-pull-left { - margin-right: .3em; + margin-right: 0.3em; } .fa.fa-pull-right { - margin-left: .3em; + margin-left: 0.3em; } /* Deprecated as of 4.4.0 */ .pull-right { @@ -84,10 +90,10 @@ float: left; } .fa.pull-left { - margin-right: .3em; + margin-right: 0.3em; } .fa.pull-right { - margin-left: .3em; + margin-left: 0.3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; diff --git a/src/assets/vendor/font-awesome/css/font-awesome.min.css b/src/assets/vendor/font-awesome/css/font-awesome.min.css index 540440ce..180f4fc4 100644 --- a/src/assets/vendor/font-awesome/css/font-awesome.min.css +++ b/src/assets/vendor/font-awesome/css/font-awesome.min.css @@ -1,4 +1,2337 @@ /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} + */ +@font-face { + font-family: "FontAwesome"; + src: url("../fonts/fontawesome-webfont.eot?v=4.7.0"); + src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") + format("embedded-opentype"), + url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), + url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), + url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), + url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") + format("svg"); + font-weight: normal; + font-style: normal; +} +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.fa-lg { + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; +} +.fa-2x { + font-size: 2em; +} +.fa-3x { + font-size: 3em; +} +.fa-4x { + font-size: 4em; +} +.fa-5x { + font-size: 5em; +} +.fa-fw { + width: 1.28571429em; + text-align: center; +} +.fa-ul { + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; +} +.fa-ul > li { + position: relative; +} +.fa-li { + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: 0.14285714em; + text-align: center; +} +.fa-li.fa-lg { + left: -1.85714286em; +} +.fa-border { + padding: 0.2em 0.25em 0.15em; + border: solid 0.08em #eee; + border-radius: 0.1em; +} +.fa-pull-left { + float: left; +} +.fa-pull-right { + float: right; +} +.fa.fa-pull-left { + margin-right: 0.3em; +} +.fa.fa-pull-right { + margin-left: 0.3em; +} +.pull-right { + float: right; +} +.pull-left { + float: left; +} +.fa.pull-left { + margin-right: 0.3em; +} +.fa.pull-right { + margin-left: 0.3em; +} +.fa-spin { + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; +} +.fa-pulse { + -webkit-animation: fa-spin 1s infinite steps(8); + animation: fa-spin 1s infinite steps(8); +} +@-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.fa-rotate-90 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.fa-rotate-180 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.fa-rotate-270 { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.fa-flip-horizontal { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +.fa-flip-vertical { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} +:root .fa-rotate-90, +:root .fa-rotate-180, +:root .fa-rotate-270, +:root .fa-flip-horizontal, +:root .fa-flip-vertical { + filter: none; +} +.fa-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.fa-stack-1x, +.fa-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.fa-stack-1x { + line-height: inherit; +} +.fa-stack-2x { + font-size: 2em; +} +.fa-inverse { + color: #fff; +} +.fa-glass:before { + content: "\f000"; +} +.fa-music:before { + content: "\f001"; +} +.fa-search:before { + content: "\f002"; +} +.fa-envelope-o:before { + content: "\f003"; +} +.fa-heart:before { + content: "\f004"; +} +.fa-star:before { + content: "\f005"; +} +.fa-star-o:before { + content: "\f006"; +} +.fa-user:before { + content: "\f007"; +} +.fa-film:before { + content: "\f008"; +} +.fa-th-large:before { + content: "\f009"; +} +.fa-th:before { + content: "\f00a"; +} +.fa-th-list:before { + content: "\f00b"; +} +.fa-check:before { + content: "\f00c"; +} +.fa-remove:before, +.fa-close:before, +.fa-times:before { + content: "\f00d"; +} +.fa-search-plus:before { + content: "\f00e"; +} +.fa-search-minus:before { + content: "\f010"; +} +.fa-power-off:before { + content: "\f011"; +} +.fa-signal:before { + content: "\f012"; +} +.fa-gear:before, +.fa-cog:before { + content: "\f013"; +} +.fa-trash-o:before { + content: "\f014"; +} +.fa-home:before { + content: "\f015"; +} +.fa-file-o:before { + content: "\f016"; +} +.fa-clock-o:before { + content: "\f017"; +} +.fa-road:before { + content: "\f018"; +} +.fa-download:before { + content: "\f019"; +} +.fa-arrow-circle-o-down:before { + content: "\f01a"; +} +.fa-arrow-circle-o-up:before { + content: "\f01b"; +} +.fa-inbox:before { + content: "\f01c"; +} +.fa-play-circle-o:before { + content: "\f01d"; +} +.fa-rotate-right:before, +.fa-repeat:before { + content: "\f01e"; +} +.fa-refresh:before { + content: "\f021"; +} +.fa-list-alt:before { + content: "\f022"; +} +.fa-lock:before { + content: "\f023"; +} +.fa-flag:before { + content: "\f024"; +} +.fa-headphones:before { + content: "\f025"; +} +.fa-volume-off:before { + content: "\f026"; +} +.fa-volume-down:before { + content: "\f027"; +} +.fa-volume-up:before { + content: "\f028"; +} +.fa-qrcode:before { + content: "\f029"; +} +.fa-barcode:before { + content: "\f02a"; +} +.fa-tag:before { + content: "\f02b"; +} +.fa-tags:before { + content: "\f02c"; +} +.fa-book:before { + content: "\f02d"; +} +.fa-bookmark:before { + content: "\f02e"; +} +.fa-print:before { + content: "\f02f"; +} +.fa-camera:before { + content: "\f030"; +} +.fa-font:before { + content: "\f031"; +} +.fa-bold:before { + content: "\f032"; +} +.fa-italic:before { + content: "\f033"; +} +.fa-text-height:before { + content: "\f034"; +} +.fa-text-width:before { + content: "\f035"; +} +.fa-align-left:before { + content: "\f036"; +} +.fa-align-center:before { + content: "\f037"; +} +.fa-align-right:before { + content: "\f038"; +} +.fa-align-justify:before { + content: "\f039"; +} +.fa-list:before { + content: "\f03a"; +} +.fa-dedent:before, +.fa-outdent:before { + content: "\f03b"; +} +.fa-indent:before { + content: "\f03c"; +} +.fa-video-camera:before { + content: "\f03d"; +} +.fa-photo:before, +.fa-image:before, +.fa-picture-o:before { + content: "\f03e"; +} +.fa-pencil:before { + content: "\f040"; +} +.fa-map-marker:before { + content: "\f041"; +} +.fa-adjust:before { + content: "\f042"; +} +.fa-tint:before { + content: "\f043"; +} +.fa-edit:before, +.fa-pencil-square-o:before { + content: "\f044"; +} +.fa-share-square-o:before { + content: "\f045"; +} +.fa-check-square-o:before { + content: "\f046"; +} +.fa-arrows:before { + content: "\f047"; +} +.fa-step-backward:before { + content: "\f048"; +} +.fa-fast-backward:before { + content: "\f049"; +} +.fa-backward:before { + content: "\f04a"; +} +.fa-play:before { + content: "\f04b"; +} +.fa-pause:before { + content: "\f04c"; +} +.fa-stop:before { + content: "\f04d"; +} +.fa-forward:before { + content: "\f04e"; +} +.fa-fast-forward:before { + content: "\f050"; +} +.fa-step-forward:before { + content: "\f051"; +} +.fa-eject:before { + content: "\f052"; +} +.fa-chevron-left:before { + content: "\f053"; +} +.fa-chevron-right:before { + content: "\f054"; +} +.fa-plus-circle:before { + content: "\f055"; +} +.fa-minus-circle:before { + content: "\f056"; +} +.fa-times-circle:before { + content: "\f057"; +} +.fa-check-circle:before { + content: "\f058"; +} +.fa-question-circle:before { + content: "\f059"; +} +.fa-info-circle:before { + content: "\f05a"; +} +.fa-crosshairs:before { + content: "\f05b"; +} +.fa-times-circle-o:before { + content: "\f05c"; +} +.fa-check-circle-o:before { + content: "\f05d"; +} +.fa-ban:before { + content: "\f05e"; +} +.fa-arrow-left:before { + content: "\f060"; +} +.fa-arrow-right:before { + content: "\f061"; +} +.fa-arrow-up:before { + content: "\f062"; +} +.fa-arrow-down:before { + content: "\f063"; +} +.fa-mail-forward:before, +.fa-share:before { + content: "\f064"; +} +.fa-expand:before { + content: "\f065"; +} +.fa-compress:before { + content: "\f066"; +} +.fa-plus:before { + content: "\f067"; +} +.fa-minus:before { + content: "\f068"; +} +.fa-asterisk:before { + content: "\f069"; +} +.fa-exclamation-circle:before { + content: "\f06a"; +} +.fa-gift:before { + content: "\f06b"; +} +.fa-leaf:before { + content: "\f06c"; +} +.fa-fire:before { + content: "\f06d"; +} +.fa-eye:before { + content: "\f06e"; +} +.fa-eye-slash:before { + content: "\f070"; +} +.fa-warning:before, +.fa-exclamation-triangle:before { + content: "\f071"; +} +.fa-plane:before { + content: "\f072"; +} +.fa-calendar:before { + content: "\f073"; +} +.fa-random:before { + content: "\f074"; +} +.fa-comment:before { + content: "\f075"; +} +.fa-magnet:before { + content: "\f076"; +} +.fa-chevron-up:before { + content: "\f077"; +} +.fa-chevron-down:before { + content: "\f078"; +} +.fa-retweet:before { + content: "\f079"; +} +.fa-shopping-cart:before { + content: "\f07a"; +} +.fa-folder:before { + content: "\f07b"; +} +.fa-folder-open:before { + content: "\f07c"; +} +.fa-arrows-v:before { + content: "\f07d"; +} +.fa-arrows-h:before { + content: "\f07e"; +} +.fa-bar-chart-o:before, +.fa-bar-chart:before { + content: "\f080"; +} +.fa-twitter-square:before { + content: "\f081"; +} +.fa-facebook-square:before { + content: "\f082"; +} +.fa-camera-retro:before { + content: "\f083"; +} +.fa-key:before { + content: "\f084"; +} +.fa-gears:before, +.fa-cogs:before { + content: "\f085"; +} +.fa-comments:before { + content: "\f086"; +} +.fa-thumbs-o-up:before { + content: "\f087"; +} +.fa-thumbs-o-down:before { + content: "\f088"; +} +.fa-star-half:before { + content: "\f089"; +} +.fa-heart-o:before { + content: "\f08a"; +} +.fa-sign-out:before { + content: "\f08b"; +} +.fa-linkedin-square:before { + content: "\f08c"; +} +.fa-thumb-tack:before { + content: "\f08d"; +} +.fa-external-link:before { + content: "\f08e"; +} +.fa-sign-in:before { + content: "\f090"; +} +.fa-trophy:before { + content: "\f091"; +} +.fa-github-square:before { + content: "\f092"; +} +.fa-upload:before { + content: "\f093"; +} +.fa-lemon-o:before { + content: "\f094"; +} +.fa-phone:before { + content: "\f095"; +} +.fa-square-o:before { + content: "\f096"; +} +.fa-bookmark-o:before { + content: "\f097"; +} +.fa-phone-square:before { + content: "\f098"; +} +.fa-twitter:before { + content: "\f099"; +} +.fa-facebook-f:before, +.fa-facebook:before { + content: "\f09a"; +} +.fa-github:before { + content: "\f09b"; +} +.fa-unlock:before { + content: "\f09c"; +} +.fa-credit-card:before { + content: "\f09d"; +} +.fa-feed:before, +.fa-rss:before { + content: "\f09e"; +} +.fa-hdd-o:before { + content: "\f0a0"; +} +.fa-bullhorn:before { + content: "\f0a1"; +} +.fa-bell:before { + content: "\f0f3"; +} +.fa-certificate:before { + content: "\f0a3"; +} +.fa-hand-o-right:before { + content: "\f0a4"; +} +.fa-hand-o-left:before { + content: "\f0a5"; +} +.fa-hand-o-up:before { + content: "\f0a6"; +} +.fa-hand-o-down:before { + content: "\f0a7"; +} +.fa-arrow-circle-left:before { + content: "\f0a8"; +} +.fa-arrow-circle-right:before { + content: "\f0a9"; +} +.fa-arrow-circle-up:before { + content: "\f0aa"; +} +.fa-arrow-circle-down:before { + content: "\f0ab"; +} +.fa-globe:before { + content: "\f0ac"; +} +.fa-wrench:before { + content: "\f0ad"; +} +.fa-tasks:before { + content: "\f0ae"; +} +.fa-filter:before { + content: "\f0b0"; +} +.fa-briefcase:before { + content: "\f0b1"; +} +.fa-arrows-alt:before { + content: "\f0b2"; +} +.fa-group:before, +.fa-users:before { + content: "\f0c0"; +} +.fa-chain:before, +.fa-link:before { + content: "\f0c1"; +} +.fa-cloud:before { + content: "\f0c2"; +} +.fa-flask:before { + content: "\f0c3"; +} +.fa-cut:before, +.fa-scissors:before { + content: "\f0c4"; +} +.fa-copy:before, +.fa-files-o:before { + content: "\f0c5"; +} +.fa-paperclip:before { + content: "\f0c6"; +} +.fa-save:before, +.fa-floppy-o:before { + content: "\f0c7"; +} +.fa-square:before { + content: "\f0c8"; +} +.fa-navicon:before, +.fa-reorder:before, +.fa-bars:before { + content: "\f0c9"; +} +.fa-list-ul:before { + content: "\f0ca"; +} +.fa-list-ol:before { + content: "\f0cb"; +} +.fa-strikethrough:before { + content: "\f0cc"; +} +.fa-underline:before { + content: "\f0cd"; +} +.fa-table:before { + content: "\f0ce"; +} +.fa-magic:before { + content: "\f0d0"; +} +.fa-truck:before { + content: "\f0d1"; +} +.fa-pinterest:before { + content: "\f0d2"; +} +.fa-pinterest-square:before { + content: "\f0d3"; +} +.fa-google-plus-square:before { + content: "\f0d4"; +} +.fa-google-plus:before { + content: "\f0d5"; +} +.fa-money:before { + content: "\f0d6"; +} +.fa-caret-down:before { + content: "\f0d7"; +} +.fa-caret-up:before { + content: "\f0d8"; +} +.fa-caret-left:before { + content: "\f0d9"; +} +.fa-caret-right:before { + content: "\f0da"; +} +.fa-columns:before { + content: "\f0db"; +} +.fa-unsorted:before, +.fa-sort:before { + content: "\f0dc"; +} +.fa-sort-down:before, +.fa-sort-desc:before { + content: "\f0dd"; +} +.fa-sort-up:before, +.fa-sort-asc:before { + content: "\f0de"; +} +.fa-envelope:before { + content: "\f0e0"; +} +.fa-linkedin:before { + content: "\f0e1"; +} +.fa-rotate-left:before, +.fa-undo:before { + content: "\f0e2"; +} +.fa-legal:before, +.fa-gavel:before { + content: "\f0e3"; +} +.fa-dashboard:before, +.fa-tachometer:before { + content: "\f0e4"; +} +.fa-comment-o:before { + content: "\f0e5"; +} +.fa-comments-o:before { + content: "\f0e6"; +} +.fa-flash:before, +.fa-bolt:before { + content: "\f0e7"; +} +.fa-sitemap:before { + content: "\f0e8"; +} +.fa-umbrella:before { + content: "\f0e9"; +} +.fa-paste:before, +.fa-clipboard:before { + content: "\f0ea"; +} +.fa-lightbulb-o:before { + content: "\f0eb"; +} +.fa-exchange:before { + content: "\f0ec"; +} +.fa-cloud-download:before { + content: "\f0ed"; +} +.fa-cloud-upload:before { + content: "\f0ee"; +} +.fa-user-md:before { + content: "\f0f0"; +} +.fa-stethoscope:before { + content: "\f0f1"; +} +.fa-suitcase:before { + content: "\f0f2"; +} +.fa-bell-o:before { + content: "\f0a2"; +} +.fa-coffee:before { + content: "\f0f4"; +} +.fa-cutlery:before { + content: "\f0f5"; +} +.fa-file-text-o:before { + content: "\f0f6"; +} +.fa-building-o:before { + content: "\f0f7"; +} +.fa-hospital-o:before { + content: "\f0f8"; +} +.fa-ambulance:before { + content: "\f0f9"; +} +.fa-medkit:before { + content: "\f0fa"; +} +.fa-fighter-jet:before { + content: "\f0fb"; +} +.fa-beer:before { + content: "\f0fc"; +} +.fa-h-square:before { + content: "\f0fd"; +} +.fa-plus-square:before { + content: "\f0fe"; +} +.fa-angle-double-left:before { + content: "\f100"; +} +.fa-angle-double-right:before { + content: "\f101"; +} +.fa-angle-double-up:before { + content: "\f102"; +} +.fa-angle-double-down:before { + content: "\f103"; +} +.fa-angle-left:before { + content: "\f104"; +} +.fa-angle-right:before { + content: "\f105"; +} +.fa-angle-up:before { + content: "\f106"; +} +.fa-angle-down:before { + content: "\f107"; +} +.fa-desktop:before { + content: "\f108"; +} +.fa-laptop:before { + content: "\f109"; +} +.fa-tablet:before { + content: "\f10a"; +} +.fa-mobile-phone:before, +.fa-mobile:before { + content: "\f10b"; +} +.fa-circle-o:before { + content: "\f10c"; +} +.fa-quote-left:before { + content: "\f10d"; +} +.fa-quote-right:before { + content: "\f10e"; +} +.fa-spinner:before { + content: "\f110"; +} +.fa-circle:before { + content: "\f111"; +} +.fa-mail-reply:before, +.fa-reply:before { + content: "\f112"; +} +.fa-github-alt:before { + content: "\f113"; +} +.fa-folder-o:before { + content: "\f114"; +} +.fa-folder-open-o:before { + content: "\f115"; +} +.fa-smile-o:before { + content: "\f118"; +} +.fa-frown-o:before { + content: "\f119"; +} +.fa-meh-o:before { + content: "\f11a"; +} +.fa-gamepad:before { + content: "\f11b"; +} +.fa-keyboard-o:before { + content: "\f11c"; +} +.fa-flag-o:before { + content: "\f11d"; +} +.fa-flag-checkered:before { + content: "\f11e"; +} +.fa-terminal:before { + content: "\f120"; +} +.fa-code:before { + content: "\f121"; +} +.fa-mail-reply-all:before, +.fa-reply-all:before { + content: "\f122"; +} +.fa-star-half-empty:before, +.fa-star-half-full:before, +.fa-star-half-o:before { + content: "\f123"; +} +.fa-location-arrow:before { + content: "\f124"; +} +.fa-crop:before { + content: "\f125"; +} +.fa-code-fork:before { + content: "\f126"; +} +.fa-unlink:before, +.fa-chain-broken:before { + content: "\f127"; +} +.fa-question:before { + content: "\f128"; +} +.fa-info:before { + content: "\f129"; +} +.fa-exclamation:before { + content: "\f12a"; +} +.fa-superscript:before { + content: "\f12b"; +} +.fa-subscript:before { + content: "\f12c"; +} +.fa-eraser:before { + content: "\f12d"; +} +.fa-puzzle-piece:before { + content: "\f12e"; +} +.fa-microphone:before { + content: "\f130"; +} +.fa-microphone-slash:before { + content: "\f131"; +} +.fa-shield:before { + content: "\f132"; +} +.fa-calendar-o:before { + content: "\f133"; +} +.fa-fire-extinguisher:before { + content: "\f134"; +} +.fa-rocket:before { + content: "\f135"; +} +.fa-maxcdn:before { + content: "\f136"; +} +.fa-chevron-circle-left:before { + content: "\f137"; +} +.fa-chevron-circle-right:before { + content: "\f138"; +} +.fa-chevron-circle-up:before { + content: "\f139"; +} +.fa-chevron-circle-down:before { + content: "\f13a"; +} +.fa-html5:before { + content: "\f13b"; +} +.fa-css3:before { + content: "\f13c"; +} +.fa-anchor:before { + content: "\f13d"; +} +.fa-unlock-alt:before { + content: "\f13e"; +} +.fa-bullseye:before { + content: "\f140"; +} +.fa-ellipsis-h:before { + content: "\f141"; +} +.fa-ellipsis-v:before { + content: "\f142"; +} +.fa-rss-square:before { + content: "\f143"; +} +.fa-play-circle:before { + content: "\f144"; +} +.fa-ticket:before { + content: "\f145"; +} +.fa-minus-square:before { + content: "\f146"; +} +.fa-minus-square-o:before { + content: "\f147"; +} +.fa-level-up:before { + content: "\f148"; +} +.fa-level-down:before { + content: "\f149"; +} +.fa-check-square:before { + content: "\f14a"; +} +.fa-pencil-square:before { + content: "\f14b"; +} +.fa-external-link-square:before { + content: "\f14c"; +} +.fa-share-square:before { + content: "\f14d"; +} +.fa-compass:before { + content: "\f14e"; +} +.fa-toggle-down:before, +.fa-caret-square-o-down:before { + content: "\f150"; +} +.fa-toggle-up:before, +.fa-caret-square-o-up:before { + content: "\f151"; +} +.fa-toggle-right:before, +.fa-caret-square-o-right:before { + content: "\f152"; +} +.fa-euro:before, +.fa-eur:before { + content: "\f153"; +} +.fa-gbp:before { + content: "\f154"; +} +.fa-dollar:before, +.fa-usd:before { + content: "\f155"; +} +.fa-rupee:before, +.fa-inr:before { + content: "\f156"; +} +.fa-cny:before, +.fa-rmb:before, +.fa-yen:before, +.fa-jpy:before { + content: "\f157"; +} +.fa-ruble:before, +.fa-rouble:before, +.fa-rub:before { + content: "\f158"; +} +.fa-won:before, +.fa-krw:before { + content: "\f159"; +} +.fa-bitcoin:before, +.fa-btc:before { + content: "\f15a"; +} +.fa-file:before { + content: "\f15b"; +} +.fa-file-text:before { + content: "\f15c"; +} +.fa-sort-alpha-asc:before { + content: "\f15d"; +} +.fa-sort-alpha-desc:before { + content: "\f15e"; +} +.fa-sort-amount-asc:before { + content: "\f160"; +} +.fa-sort-amount-desc:before { + content: "\f161"; +} +.fa-sort-numeric-asc:before { + content: "\f162"; +} +.fa-sort-numeric-desc:before { + content: "\f163"; +} +.fa-thumbs-up:before { + content: "\f164"; +} +.fa-thumbs-down:before { + content: "\f165"; +} +.fa-youtube-square:before { + content: "\f166"; +} +.fa-youtube:before { + content: "\f167"; +} +.fa-xing:before { + content: "\f168"; +} +.fa-xing-square:before { + content: "\f169"; +} +.fa-youtube-play:before { + content: "\f16a"; +} +.fa-dropbox:before { + content: "\f16b"; +} +.fa-stack-overflow:before { + content: "\f16c"; +} +.fa-instagram:before { + content: "\f16d"; +} +.fa-flickr:before { + content: "\f16e"; +} +.fa-adn:before { + content: "\f170"; +} +.fa-bitbucket:before { + content: "\f171"; +} +.fa-bitbucket-square:before { + content: "\f172"; +} +.fa-tumblr:before { + content: "\f173"; +} +.fa-tumblr-square:before { + content: "\f174"; +} +.fa-long-arrow-down:before { + content: "\f175"; +} +.fa-long-arrow-up:before { + content: "\f176"; +} +.fa-long-arrow-left:before { + content: "\f177"; +} +.fa-long-arrow-right:before { + content: "\f178"; +} +.fa-apple:before { + content: "\f179"; +} +.fa-windows:before { + content: "\f17a"; +} +.fa-android:before { + content: "\f17b"; +} +.fa-linux:before { + content: "\f17c"; +} +.fa-dribbble:before { + content: "\f17d"; +} +.fa-skype:before { + content: "\f17e"; +} +.fa-foursquare:before { + content: "\f180"; +} +.fa-trello:before { + content: "\f181"; +} +.fa-female:before { + content: "\f182"; +} +.fa-male:before { + content: "\f183"; +} +.fa-gittip:before, +.fa-gratipay:before { + content: "\f184"; +} +.fa-sun-o:before { + content: "\f185"; +} +.fa-moon-o:before { + content: "\f186"; +} +.fa-archive:before { + content: "\f187"; +} +.fa-bug:before { + content: "\f188"; +} +.fa-vk:before { + content: "\f189"; +} +.fa-weibo:before { + content: "\f18a"; +} +.fa-renren:before { + content: "\f18b"; +} +.fa-pagelines:before { + content: "\f18c"; +} +.fa-stack-exchange:before { + content: "\f18d"; +} +.fa-arrow-circle-o-right:before { + content: "\f18e"; +} +.fa-arrow-circle-o-left:before { + content: "\f190"; +} +.fa-toggle-left:before, +.fa-caret-square-o-left:before { + content: "\f191"; +} +.fa-dot-circle-o:before { + content: "\f192"; +} +.fa-wheelchair:before { + content: "\f193"; +} +.fa-vimeo-square:before { + content: "\f194"; +} +.fa-turkish-lira:before, +.fa-try:before { + content: "\f195"; +} +.fa-plus-square-o:before { + content: "\f196"; +} +.fa-space-shuttle:before { + content: "\f197"; +} +.fa-slack:before { + content: "\f198"; +} +.fa-envelope-square:before { + content: "\f199"; +} +.fa-wordpress:before { + content: "\f19a"; +} +.fa-openid:before { + content: "\f19b"; +} +.fa-institution:before, +.fa-bank:before, +.fa-university:before { + content: "\f19c"; +} +.fa-mortar-board:before, +.fa-graduation-cap:before { + content: "\f19d"; +} +.fa-yahoo:before { + content: "\f19e"; +} +.fa-google:before { + content: "\f1a0"; +} +.fa-reddit:before { + content: "\f1a1"; +} +.fa-reddit-square:before { + content: "\f1a2"; +} +.fa-stumbleupon-circle:before { + content: "\f1a3"; +} +.fa-stumbleupon:before { + content: "\f1a4"; +} +.fa-delicious:before { + content: "\f1a5"; +} +.fa-digg:before { + content: "\f1a6"; +} +.fa-pied-piper-pp:before { + content: "\f1a7"; +} +.fa-pied-piper-alt:before { + content: "\f1a8"; +} +.fa-drupal:before { + content: "\f1a9"; +} +.fa-joomla:before { + content: "\f1aa"; +} +.fa-language:before { + content: "\f1ab"; +} +.fa-fax:before { + content: "\f1ac"; +} +.fa-building:before { + content: "\f1ad"; +} +.fa-child:before { + content: "\f1ae"; +} +.fa-paw:before { + content: "\f1b0"; +} +.fa-spoon:before { + content: "\f1b1"; +} +.fa-cube:before { + content: "\f1b2"; +} +.fa-cubes:before { + content: "\f1b3"; +} +.fa-behance:before { + content: "\f1b4"; +} +.fa-behance-square:before { + content: "\f1b5"; +} +.fa-steam:before { + content: "\f1b6"; +} +.fa-steam-square:before { + content: "\f1b7"; +} +.fa-recycle:before { + content: "\f1b8"; +} +.fa-automobile:before, +.fa-car:before { + content: "\f1b9"; +} +.fa-cab:before, +.fa-taxi:before { + content: "\f1ba"; +} +.fa-tree:before { + content: "\f1bb"; +} +.fa-spotify:before { + content: "\f1bc"; +} +.fa-deviantart:before { + content: "\f1bd"; +} +.fa-soundcloud:before { + content: "\f1be"; +} +.fa-database:before { + content: "\f1c0"; +} +.fa-file-pdf-o:before { + content: "\f1c1"; +} +.fa-file-word-o:before { + content: "\f1c2"; +} +.fa-file-excel-o:before { + content: "\f1c3"; +} +.fa-file-powerpoint-o:before { + content: "\f1c4"; +} +.fa-file-photo-o:before, +.fa-file-picture-o:before, +.fa-file-image-o:before { + content: "\f1c5"; +} +.fa-file-zip-o:before, +.fa-file-archive-o:before { + content: "\f1c6"; +} +.fa-file-sound-o:before, +.fa-file-audio-o:before { + content: "\f1c7"; +} +.fa-file-movie-o:before, +.fa-file-video-o:before { + content: "\f1c8"; +} +.fa-file-code-o:before { + content: "\f1c9"; +} +.fa-vine:before { + content: "\f1ca"; +} +.fa-codepen:before { + content: "\f1cb"; +} +.fa-jsfiddle:before { + content: "\f1cc"; +} +.fa-life-bouy:before, +.fa-life-buoy:before, +.fa-life-saver:before, +.fa-support:before, +.fa-life-ring:before { + content: "\f1cd"; +} +.fa-circle-o-notch:before { + content: "\f1ce"; +} +.fa-ra:before, +.fa-resistance:before, +.fa-rebel:before { + content: "\f1d0"; +} +.fa-ge:before, +.fa-empire:before { + content: "\f1d1"; +} +.fa-git-square:before { + content: "\f1d2"; +} +.fa-git:before { + content: "\f1d3"; +} +.fa-y-combinator-square:before, +.fa-yc-square:before, +.fa-hacker-news:before { + content: "\f1d4"; +} +.fa-tencent-weibo:before { + content: "\f1d5"; +} +.fa-qq:before { + content: "\f1d6"; +} +.fa-wechat:before, +.fa-weixin:before { + content: "\f1d7"; +} +.fa-send:before, +.fa-paper-plane:before { + content: "\f1d8"; +} +.fa-send-o:before, +.fa-paper-plane-o:before { + content: "\f1d9"; +} +.fa-history:before { + content: "\f1da"; +} +.fa-circle-thin:before { + content: "\f1db"; +} +.fa-header:before { + content: "\f1dc"; +} +.fa-paragraph:before { + content: "\f1dd"; +} +.fa-sliders:before { + content: "\f1de"; +} +.fa-share-alt:before { + content: "\f1e0"; +} +.fa-share-alt-square:before { + content: "\f1e1"; +} +.fa-bomb:before { + content: "\f1e2"; +} +.fa-soccer-ball-o:before, +.fa-futbol-o:before { + content: "\f1e3"; +} +.fa-tty:before { + content: "\f1e4"; +} +.fa-binoculars:before { + content: "\f1e5"; +} +.fa-plug:before { + content: "\f1e6"; +} +.fa-slideshare:before { + content: "\f1e7"; +} +.fa-twitch:before { + content: "\f1e8"; +} +.fa-yelp:before { + content: "\f1e9"; +} +.fa-newspaper-o:before { + content: "\f1ea"; +} +.fa-wifi:before { + content: "\f1eb"; +} +.fa-calculator:before { + content: "\f1ec"; +} +.fa-paypal:before { + content: "\f1ed"; +} +.fa-google-wallet:before { + content: "\f1ee"; +} +.fa-cc-visa:before { + content: "\f1f0"; +} +.fa-cc-mastercard:before { + content: "\f1f1"; +} +.fa-cc-discover:before { + content: "\f1f2"; +} +.fa-cc-amex:before { + content: "\f1f3"; +} +.fa-cc-paypal:before { + content: "\f1f4"; +} +.fa-cc-stripe:before { + content: "\f1f5"; +} +.fa-bell-slash:before { + content: "\f1f6"; +} +.fa-bell-slash-o:before { + content: "\f1f7"; +} +.fa-trash:before { + content: "\f1f8"; +} +.fa-copyright:before { + content: "\f1f9"; +} +.fa-at:before { + content: "\f1fa"; +} +.fa-eyedropper:before { + content: "\f1fb"; +} +.fa-paint-brush:before { + content: "\f1fc"; +} +.fa-birthday-cake:before { + content: "\f1fd"; +} +.fa-area-chart:before { + content: "\f1fe"; +} +.fa-pie-chart:before { + content: "\f200"; +} +.fa-line-chart:before { + content: "\f201"; +} +.fa-lastfm:before { + content: "\f202"; +} +.fa-lastfm-square:before { + content: "\f203"; +} +.fa-toggle-off:before { + content: "\f204"; +} +.fa-toggle-on:before { + content: "\f205"; +} +.fa-bicycle:before { + content: "\f206"; +} +.fa-bus:before { + content: "\f207"; +} +.fa-ioxhost:before { + content: "\f208"; +} +.fa-angellist:before { + content: "\f209"; +} +.fa-cc:before { + content: "\f20a"; +} +.fa-shekel:before, +.fa-sheqel:before, +.fa-ils:before { + content: "\f20b"; +} +.fa-meanpath:before { + content: "\f20c"; +} +.fa-buysellads:before { + content: "\f20d"; +} +.fa-connectdevelop:before { + content: "\f20e"; +} +.fa-dashcube:before { + content: "\f210"; +} +.fa-forumbee:before { + content: "\f211"; +} +.fa-leanpub:before { + content: "\f212"; +} +.fa-sellsy:before { + content: "\f213"; +} +.fa-shirtsinbulk:before { + content: "\f214"; +} +.fa-simplybuilt:before { + content: "\f215"; +} +.fa-skyatlas:before { + content: "\f216"; +} +.fa-cart-plus:before { + content: "\f217"; +} +.fa-cart-arrow-down:before { + content: "\f218"; +} +.fa-diamond:before { + content: "\f219"; +} +.fa-ship:before { + content: "\f21a"; +} +.fa-user-secret:before { + content: "\f21b"; +} +.fa-motorcycle:before { + content: "\f21c"; +} +.fa-street-view:before { + content: "\f21d"; +} +.fa-heartbeat:before { + content: "\f21e"; +} +.fa-venus:before { + content: "\f221"; +} +.fa-mars:before { + content: "\f222"; +} +.fa-mercury:before { + content: "\f223"; +} +.fa-intersex:before, +.fa-transgender:before { + content: "\f224"; +} +.fa-transgender-alt:before { + content: "\f225"; +} +.fa-venus-double:before { + content: "\f226"; +} +.fa-mars-double:before { + content: "\f227"; +} +.fa-venus-mars:before { + content: "\f228"; +} +.fa-mars-stroke:before { + content: "\f229"; +} +.fa-mars-stroke-v:before { + content: "\f22a"; +} +.fa-mars-stroke-h:before { + content: "\f22b"; +} +.fa-neuter:before { + content: "\f22c"; +} +.fa-genderless:before { + content: "\f22d"; +} +.fa-facebook-official:before { + content: "\f230"; +} +.fa-pinterest-p:before { + content: "\f231"; +} +.fa-whatsapp:before { + content: "\f232"; +} +.fa-server:before { + content: "\f233"; +} +.fa-user-plus:before { + content: "\f234"; +} +.fa-user-times:before { + content: "\f235"; +} +.fa-hotel:before, +.fa-bed:before { + content: "\f236"; +} +.fa-viacoin:before { + content: "\f237"; +} +.fa-train:before { + content: "\f238"; +} +.fa-subway:before { + content: "\f239"; +} +.fa-medium:before { + content: "\f23a"; +} +.fa-yc:before, +.fa-y-combinator:before { + content: "\f23b"; +} +.fa-optin-monster:before { + content: "\f23c"; +} +.fa-opencart:before { + content: "\f23d"; +} +.fa-expeditedssl:before { + content: "\f23e"; +} +.fa-battery-4:before, +.fa-battery:before, +.fa-battery-full:before { + content: "\f240"; +} +.fa-battery-3:before, +.fa-battery-three-quarters:before { + content: "\f241"; +} +.fa-battery-2:before, +.fa-battery-half:before { + content: "\f242"; +} +.fa-battery-1:before, +.fa-battery-quarter:before { + content: "\f243"; +} +.fa-battery-0:before, +.fa-battery-empty:before { + content: "\f244"; +} +.fa-mouse-pointer:before { + content: "\f245"; +} +.fa-i-cursor:before { + content: "\f246"; +} +.fa-object-group:before { + content: "\f247"; +} +.fa-object-ungroup:before { + content: "\f248"; +} +.fa-sticky-note:before { + content: "\f249"; +} +.fa-sticky-note-o:before { + content: "\f24a"; +} +.fa-cc-jcb:before { + content: "\f24b"; +} +.fa-cc-diners-club:before { + content: "\f24c"; +} +.fa-clone:before { + content: "\f24d"; +} +.fa-balance-scale:before { + content: "\f24e"; +} +.fa-hourglass-o:before { + content: "\f250"; +} +.fa-hourglass-1:before, +.fa-hourglass-start:before { + content: "\f251"; +} +.fa-hourglass-2:before, +.fa-hourglass-half:before { + content: "\f252"; +} +.fa-hourglass-3:before, +.fa-hourglass-end:before { + content: "\f253"; +} +.fa-hourglass:before { + content: "\f254"; +} +.fa-hand-grab-o:before, +.fa-hand-rock-o:before { + content: "\f255"; +} +.fa-hand-stop-o:before, +.fa-hand-paper-o:before { + content: "\f256"; +} +.fa-hand-scissors-o:before { + content: "\f257"; +} +.fa-hand-lizard-o:before { + content: "\f258"; +} +.fa-hand-spock-o:before { + content: "\f259"; +} +.fa-hand-pointer-o:before { + content: "\f25a"; +} +.fa-hand-peace-o:before { + content: "\f25b"; +} +.fa-trademark:before { + content: "\f25c"; +} +.fa-registered:before { + content: "\f25d"; +} +.fa-creative-commons:before { + content: "\f25e"; +} +.fa-gg:before { + content: "\f260"; +} +.fa-gg-circle:before { + content: "\f261"; +} +.fa-tripadvisor:before { + content: "\f262"; +} +.fa-odnoklassniki:before { + content: "\f263"; +} +.fa-odnoklassniki-square:before { + content: "\f264"; +} +.fa-get-pocket:before { + content: "\f265"; +} +.fa-wikipedia-w:before { + content: "\f266"; +} +.fa-safari:before { + content: "\f267"; +} +.fa-chrome:before { + content: "\f268"; +} +.fa-firefox:before { + content: "\f269"; +} +.fa-opera:before { + content: "\f26a"; +} +.fa-internet-explorer:before { + content: "\f26b"; +} +.fa-tv:before, +.fa-television:before { + content: "\f26c"; +} +.fa-contao:before { + content: "\f26d"; +} +.fa-500px:before { + content: "\f26e"; +} +.fa-amazon:before { + content: "\f270"; +} +.fa-calendar-plus-o:before { + content: "\f271"; +} +.fa-calendar-minus-o:before { + content: "\f272"; +} +.fa-calendar-times-o:before { + content: "\f273"; +} +.fa-calendar-check-o:before { + content: "\f274"; +} +.fa-industry:before { + content: "\f275"; +} +.fa-map-pin:before { + content: "\f276"; +} +.fa-map-signs:before { + content: "\f277"; +} +.fa-map-o:before { + content: "\f278"; +} +.fa-map:before { + content: "\f279"; +} +.fa-commenting:before { + content: "\f27a"; +} +.fa-commenting-o:before { + content: "\f27b"; +} +.fa-houzz:before { + content: "\f27c"; +} +.fa-vimeo:before { + content: "\f27d"; +} +.fa-black-tie:before { + content: "\f27e"; +} +.fa-fonticons:before { + content: "\f280"; +} +.fa-reddit-alien:before { + content: "\f281"; +} +.fa-edge:before { + content: "\f282"; +} +.fa-credit-card-alt:before { + content: "\f283"; +} +.fa-codiepie:before { + content: "\f284"; +} +.fa-modx:before { + content: "\f285"; +} +.fa-fort-awesome:before { + content: "\f286"; +} +.fa-usb:before { + content: "\f287"; +} +.fa-product-hunt:before { + content: "\f288"; +} +.fa-mixcloud:before { + content: "\f289"; +} +.fa-scribd:before { + content: "\f28a"; +} +.fa-pause-circle:before { + content: "\f28b"; +} +.fa-pause-circle-o:before { + content: "\f28c"; +} +.fa-stop-circle:before { + content: "\f28d"; +} +.fa-stop-circle-o:before { + content: "\f28e"; +} +.fa-shopping-bag:before { + content: "\f290"; +} +.fa-shopping-basket:before { + content: "\f291"; +} +.fa-hashtag:before { + content: "\f292"; +} +.fa-bluetooth:before { + content: "\f293"; +} +.fa-bluetooth-b:before { + content: "\f294"; +} +.fa-percent:before { + content: "\f295"; +} +.fa-gitlab:before { + content: "\f296"; +} +.fa-wpbeginner:before { + content: "\f297"; +} +.fa-wpforms:before { + content: "\f298"; +} +.fa-envira:before { + content: "\f299"; +} +.fa-universal-access:before { + content: "\f29a"; +} +.fa-wheelchair-alt:before { + content: "\f29b"; +} +.fa-question-circle-o:before { + content: "\f29c"; +} +.fa-blind:before { + content: "\f29d"; +} +.fa-audio-description:before { + content: "\f29e"; +} +.fa-volume-control-phone:before { + content: "\f2a0"; +} +.fa-braille:before { + content: "\f2a1"; +} +.fa-assistive-listening-systems:before { + content: "\f2a2"; +} +.fa-asl-interpreting:before, +.fa-american-sign-language-interpreting:before { + content: "\f2a3"; +} +.fa-deafness:before, +.fa-hard-of-hearing:before, +.fa-deaf:before { + content: "\f2a4"; +} +.fa-glide:before { + content: "\f2a5"; +} +.fa-glide-g:before { + content: "\f2a6"; +} +.fa-signing:before, +.fa-sign-language:before { + content: "\f2a7"; +} +.fa-low-vision:before { + content: "\f2a8"; +} +.fa-viadeo:before { + content: "\f2a9"; +} +.fa-viadeo-square:before { + content: "\f2aa"; +} +.fa-snapchat:before { + content: "\f2ab"; +} +.fa-snapchat-ghost:before { + content: "\f2ac"; +} +.fa-snapchat-square:before { + content: "\f2ad"; +} +.fa-pied-piper:before { + content: "\f2ae"; +} +.fa-first-order:before { + content: "\f2b0"; +} +.fa-yoast:before { + content: "\f2b1"; +} +.fa-themeisle:before { + content: "\f2b2"; +} +.fa-google-plus-circle:before, +.fa-google-plus-official:before { + content: "\f2b3"; +} +.fa-fa:before, +.fa-font-awesome:before { + content: "\f2b4"; +} +.fa-handshake-o:before { + content: "\f2b5"; +} +.fa-envelope-open:before { + content: "\f2b6"; +} +.fa-envelope-open-o:before { + content: "\f2b7"; +} +.fa-linode:before { + content: "\f2b8"; +} +.fa-address-book:before { + content: "\f2b9"; +} +.fa-address-book-o:before { + content: "\f2ba"; +} +.fa-vcard:before, +.fa-address-card:before { + content: "\f2bb"; +} +.fa-vcard-o:before, +.fa-address-card-o:before { + content: "\f2bc"; +} +.fa-user-circle:before { + content: "\f2bd"; +} +.fa-user-circle-o:before { + content: "\f2be"; +} +.fa-user-o:before { + content: "\f2c0"; +} +.fa-id-badge:before { + content: "\f2c1"; +} +.fa-drivers-license:before, +.fa-id-card:before { + content: "\f2c2"; +} +.fa-drivers-license-o:before, +.fa-id-card-o:before { + content: "\f2c3"; +} +.fa-quora:before { + content: "\f2c4"; +} +.fa-free-code-camp:before { + content: "\f2c5"; +} +.fa-telegram:before { + content: "\f2c6"; +} +.fa-thermometer-4:before, +.fa-thermometer:before, +.fa-thermometer-full:before { + content: "\f2c7"; +} +.fa-thermometer-3:before, +.fa-thermometer-three-quarters:before { + content: "\f2c8"; +} +.fa-thermometer-2:before, +.fa-thermometer-half:before { + content: "\f2c9"; +} +.fa-thermometer-1:before, +.fa-thermometer-quarter:before { + content: "\f2ca"; +} +.fa-thermometer-0:before, +.fa-thermometer-empty:before { + content: "\f2cb"; +} +.fa-shower:before { + content: "\f2cc"; +} +.fa-bathtub:before, +.fa-s15:before, +.fa-bath:before { + content: "\f2cd"; +} +.fa-podcast:before { + content: "\f2ce"; +} +.fa-window-maximize:before { + content: "\f2d0"; +} +.fa-window-minimize:before { + content: "\f2d1"; +} +.fa-window-restore:before { + content: "\f2d2"; +} +.fa-times-rectangle:before, +.fa-window-close:before { + content: "\f2d3"; +} +.fa-times-rectangle-o:before, +.fa-window-close-o:before { + content: "\f2d4"; +} +.fa-bandcamp:before { + content: "\f2d5"; +} +.fa-grav:before { + content: "\f2d6"; +} +.fa-etsy:before { + content: "\f2d7"; +} +.fa-imdb:before { + content: "\f2d8"; +} +.fa-ravelry:before { + content: "\f2d9"; +} +.fa-eercast:before { + content: "\f2da"; +} +.fa-microchip:before { + content: "\f2db"; +} +.fa-snowflake-o:before { + content: "\f2dc"; +} +.fa-superpowers:before { + content: "\f2dd"; +} +.fa-wpexplorer:before { + content: "\f2de"; +} +.fa-meetup:before { + content: "\f2e0"; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} diff --git a/src/assets/vendor/nucleo/css/nucleo-svg.css b/src/assets/vendor/nucleo/css/nucleo-svg.css index c68c10e3..2ee0e1d1 100644 --- a/src/assets/vendor/nucleo/css/nucleo-svg.css +++ b/src/assets/vendor/nucleo/css/nucleo-svg.css @@ -132,4 +132,4 @@ Stroke effects - Nucleo outline icons -ms-transform: translateX(0.5px) translateY(0.5px); -o-transform: translateX(0.5px) translateY(0.5px); transform: translateX(0.5px) translateY(0.5px); -} \ No newline at end of file +} diff --git a/src/assets/vendor/nucleo/css/nucleo.css b/src/assets/vendor/nucleo/css/nucleo.css index 481bf62c..80cd83fe 100644 --- a/src/assets/vendor/nucleo/css/nucleo.css +++ b/src/assets/vendor/nucleo/css/nucleo.css @@ -5,9 +5,13 @@ License - nucleoapp.com/license/ -------------------------------- */ @font-face { - font-family: 'NucleoIcons'; - src: url('../fonts/nucleo-icons.eot'); - src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg'); + font-family: "NucleoIcons"; + src: url("../fonts/nucleo-icons.eot"); + src: url("../fonts/nucleo-icons.eot") format("embedded-opentype"), + url("../fonts/nucleo-icons.woff2") format("woff2"), + url("../fonts/nucleo-icons.woff") format("woff"), + url("../fonts/nucleo-icons.ttf") format("truetype"), + url("../fonts/nucleo-icons.svg") format("svg"); font-weight: normal; font-style: normal; } @@ -169,404 +173,403 @@ License - nucleoapp.com/license/ -------------------------*/ .ni-active-40::before { - content: "\ea02"; + content: "\ea02"; } .ni-air-baloon::before { - content: "\ea03"; + content: "\ea03"; } .ni-album-2::before { - content: "\ea04"; + content: "\ea04"; } .ni-align-center::before { - content: "\ea05"; + content: "\ea05"; } .ni-align-left-2::before { - content: "\ea06"; + content: "\ea06"; } .ni-ambulance::before { - content: "\ea07"; + content: "\ea07"; } .ni-app::before { - content: "\ea08"; + content: "\ea08"; } .ni-archive-2::before { - content: "\ea09"; + content: "\ea09"; } .ni-atom::before { - content: "\ea0a"; + content: "\ea0a"; } .ni-badge::before { - content: "\ea0b"; + content: "\ea0b"; } .ni-bag-17::before { - content: "\ea0c"; + content: "\ea0c"; } .ni-basket::before { - content: "\ea0d"; + content: "\ea0d"; } .ni-bell-55::before { - content: "\ea0e"; + content: "\ea0e"; } .ni-bold-down::before { - content: "\ea0f"; + content: "\ea0f"; } .ni-bold-left::before { - content: "\ea10"; + content: "\ea10"; } .ni-bold-right::before { - content: "\ea11"; + content: "\ea11"; } .ni-bold-up::before { - content: "\ea12"; + content: "\ea12"; } .ni-bold::before { - content: "\ea13"; + content: "\ea13"; } .ni-book-bookmark::before { - content: "\ea14"; + content: "\ea14"; } .ni-books::before { - content: "\ea15"; + content: "\ea15"; } .ni-box-2::before { - content: "\ea16"; + content: "\ea16"; } .ni-briefcase-24::before { - content: "\ea17"; + content: "\ea17"; } .ni-building::before { - content: "\ea18"; + content: "\ea18"; } .ni-bulb-61::before { - content: "\ea19"; + content: "\ea19"; } .ni-bullet-list-67::before { - content: "\ea1a"; + content: "\ea1a"; } .ni-bus-front-12::before { - content: "\ea1b"; + content: "\ea1b"; } .ni-button-pause::before { - content: "\ea1c"; + content: "\ea1c"; } .ni-button-play::before { - content: "\ea1d"; + content: "\ea1d"; } .ni-button-power::before { - content: "\ea1e"; + content: "\ea1e"; } .ni-calendar-grid-58::before { - content: "\ea1f"; + content: "\ea1f"; } .ni-camera-compact::before { - content: "\ea20"; + content: "\ea20"; } .ni-caps-small::before { - content: "\ea21"; + content: "\ea21"; } .ni-cart::before { - content: "\ea22"; + content: "\ea22"; } .ni-chart-bar-32::before { - content: "\ea23"; + content: "\ea23"; } .ni-chart-pie-35::before { - content: "\ea24"; + content: "\ea24"; } .ni-chat-round::before { - content: "\ea25"; + content: "\ea25"; } .ni-check-bold::before { - content: "\ea26"; + content: "\ea26"; } .ni-circle-08::before { - content: "\ea27"; + content: "\ea27"; } .ni-cloud-download-95::before { - content: "\ea28"; + content: "\ea28"; } .ni-cloud-upload-96::before { - content: "\ea29"; + content: "\ea29"; } .ni-compass-04::before { - content: "\ea2a"; + content: "\ea2a"; } .ni-controller::before { - content: "\ea2b"; + content: "\ea2b"; } .ni-credit-card::before { - content: "\ea2c"; + content: "\ea2c"; } .ni-curved-next::before { - content: "\ea2d"; + content: "\ea2d"; } .ni-delivery-fast::before { - content: "\ea2e"; + content: "\ea2e"; } .ni-diamond::before { - content: "\ea2f"; + content: "\ea2f"; } .ni-email-83::before { - content: "\ea30"; + content: "\ea30"; } .ni-fat-add::before { - content: "\ea31"; + content: "\ea31"; } .ni-fat-delete::before { - content: "\ea32"; + content: "\ea32"; } .ni-fat-remove::before { - content: "\ea33"; + content: "\ea33"; } .ni-favourite-28::before { - content: "\ea34"; + content: "\ea34"; } .ni-folder-17::before { - content: "\ea35"; + content: "\ea35"; } .ni-glasses-2::before { - content: "\ea36"; + content: "\ea36"; } .ni-hat-3::before { - content: "\ea37"; + content: "\ea37"; } .ni-headphones::before { - content: "\ea38"; + content: "\ea38"; } .ni-html5::before { - content: "\ea39"; + content: "\ea39"; } .ni-istanbul::before { - content: "\ea3a"; + content: "\ea3a"; } .ni-key-25::before { - content: "\ea3b"; + content: "\ea3b"; } .ni-laptop::before { - content: "\ea3c"; + content: "\ea3c"; } .ni-like-2::before { - content: "\ea3d"; + content: "\ea3d"; } .ni-lock-circle-open::before { - content: "\ea3e"; + content: "\ea3e"; } .ni-map-big::before { - content: "\ea3f"; + content: "\ea3f"; } .ni-mobile-button::before { - content: "\ea40"; + content: "\ea40"; } .ni-money-coins::before { - content: "\ea41"; + content: "\ea41"; } .ni-note-03::before { - content: "\ea42"; + content: "\ea42"; } .ni-notification-70::before { - content: "\ea43"; + content: "\ea43"; } .ni-palette::before { - content: "\ea44"; + content: "\ea44"; } .ni-paper-diploma::before { - content: "\ea45"; + content: "\ea45"; } .ni-pin-3::before { - content: "\ea46"; + content: "\ea46"; } .ni-planet::before { - content: "\ea47"; + content: "\ea47"; } .ni-ruler-pencil::before { - content: "\ea48"; + content: "\ea48"; } .ni-satisfied::before { - content: "\ea49"; + content: "\ea49"; } .ni-scissors::before { - content: "\ea4a"; + content: "\ea4a"; } .ni-send::before { - content: "\ea4b"; + content: "\ea4b"; } .ni-settings-gear-65::before { - content: "\ea4c"; + content: "\ea4c"; } .ni-settings::before { - content: "\ea4d"; + content: "\ea4d"; } .ni-single-02::before { - content: "\ea4e"; + content: "\ea4e"; } .ni-single-copy-04::before { - content: "\ea4f"; + content: "\ea4f"; } .ni-sound-wave::before { - content: "\ea50"; + content: "\ea50"; } .ni-spaceship::before { - content: "\ea51"; + content: "\ea51"; } .ni-square-pin::before { - content: "\ea52"; + content: "\ea52"; } .ni-support-16::before { - content: "\ea53"; + content: "\ea53"; } .ni-tablet-button::before { - content: "\ea54"; + content: "\ea54"; } .ni-tag::before { - content: "\ea55"; + content: "\ea55"; } .ni-tie-bow::before { - content: "\ea56"; + content: "\ea56"; } .ni-time-alarm::before { - content: "\ea57"; + content: "\ea57"; } .ni-trophy::before { - content: "\ea58"; + content: "\ea58"; } .ni-tv-2::before { - content: "\ea59"; + content: "\ea59"; } .ni-umbrella-13::before { - content: "\ea5a"; + content: "\ea5a"; } .ni-user-run::before { - content: "\ea5b"; + content: "\ea5b"; } .ni-vector::before { - content: "\ea5c"; + content: "\ea5c"; } .ni-watch-time::before { - content: "\ea5d"; + content: "\ea5d"; } .ni-world::before { - content: "\ea5e"; + content: "\ea5e"; } .ni-zoom-split-in::before { - content: "\ea5f"; + content: "\ea5f"; } .ni-collection::before { - content: "\ea60"; + content: "\ea60"; } .ni-image::before { - content: "\ea61"; + content: "\ea61"; } .ni-shop::before { - content: "\ea62"; + content: "\ea62"; } .ni-ungroup::before { - content: "\ea63"; + content: "\ea63"; } .ni-world-2::before { - content: "\ea64"; + content: "\ea64"; } .ni-ui-04::before { - content: "\ea65"; + content: "\ea65"; } - /* all icon font classes list here */ diff --git a/src/components/Badge.vue b/src/components/Badge.vue index de754c56..7dad73c3 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -1,15 +1,17 @@ - + diff --git a/src/components/BaseAlert.vue b/src/components/BaseAlert.vue index 02dc0be7..6846c593 100644 --- a/src/components/BaseAlert.vue +++ b/src/components/BaseAlert.vue @@ -1,31 +1,42 @@ diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue index 8e7d8e97..9d65647e 100644 --- a/src/components/BaseButton.vue +++ b/src/components/BaseButton.vue @@ -1,22 +1,30 @@ - + diff --git a/src/components/BaseCheckbox.vue b/src/components/BaseCheckbox.vue index d7c22402..6b0ce8af 100644 --- a/src/components/BaseCheckbox.vue +++ b/src/components/BaseCheckbox.vue @@ -1,11 +1,15 @@