From 0ed0c54bc1ca0507a9bfeb84cca07e73a18be976 Mon Sep 17 00:00:00 2001 From: John Dillick Date: Wed, 12 Apr 2023 14:12:16 -0400 Subject: [PATCH] Sass performance tweaks --- .core/gulp.tasks.js | 2 +- package-lock.json | 127 +++++ package.json | 1 + src/assets/style/_scss/_button.scss | 250 ---------- src/assets/style/_scss/_fonts.scss | 400 --------------- src/assets/style/_scss/_form.scss | 115 ----- src/assets/style/_scss/_layout.scss | 36 -- src/assets/style/_scss/_reactium-modules.scss | 1 - .../_scss/_reactium-style-molecules.scss | 59 --- src/assets/style/_scss/_reboot.scss | 459 ------------------ src/assets/style/_scss/_typography.scss | 93 ---- src/assets/style/_scss/_variables.scss | 45 -- .../style/_scss/grid/_grid-variables.scss | 105 ---- src/assets/style/_scss/grid/_grid.scss | 153 ------ src/assets/style/_scss/grid/_size.scss | 81 ---- src/assets/style/_scss/grid/_visibility.scss | 28 -- .../style/_scss/grid/mixins/_breakpoint.scss | 10 - src/assets/style/_scss/grid/mixins/_flex.scss | 33 -- .../style/_scss/grid/mixins/_grid-mixins.scss | 366 -------------- src/assets/style/_scss/mixins/_colors.scss | 4 - src/assets/style/_scss/mixins/_headings.scss | 25 - src/assets/style/_scss/mixins/_px2rem.scss | 20 - .../style/_scss/mixins/_text-align.scss | 20 - src/assets/style/a11y/achromatomaly.scss | 6 - src/assets/style/a11y/achromatopsia.scss | 6 - src/assets/style/a11y/deuteranomaly.scss | 6 - src/assets/style/a11y/deuteranopia.scss | 6 - src/assets/style/a11y/protanomaly.scss | 6 - src/assets/style/a11y/protanopia.scss | 6 - src/assets/style/a11y/tritanomaly.scss | 6 - src/assets/style/a11y/tritanopia.scss | 6 - src/assets/style/theme-1/_theme-1-vars.scss | 2 - src/assets/style/theme-1/theme-1.scss | 12 - src/assets/style/theme-2/_theme-2-vars.scss | 2 - src/assets/style/theme-2/theme-2.scss | 11 - 35 files changed, 129 insertions(+), 2379 deletions(-) delete mode 100644 src/assets/style/_scss/_button.scss delete mode 100644 src/assets/style/_scss/_fonts.scss delete mode 100644 src/assets/style/_scss/_form.scss delete mode 100644 src/assets/style/_scss/_layout.scss delete mode 100644 src/assets/style/_scss/_reactium-style-molecules.scss delete mode 100644 src/assets/style/_scss/_reboot.scss delete mode 100644 src/assets/style/_scss/_typography.scss delete mode 100644 src/assets/style/_scss/_variables.scss delete mode 100644 src/assets/style/_scss/grid/_grid-variables.scss delete mode 100755 src/assets/style/_scss/grid/_grid.scss delete mode 100644 src/assets/style/_scss/grid/_size.scss delete mode 100755 src/assets/style/_scss/grid/_visibility.scss delete mode 100644 src/assets/style/_scss/grid/mixins/_breakpoint.scss delete mode 100644 src/assets/style/_scss/grid/mixins/_flex.scss delete mode 100755 src/assets/style/_scss/grid/mixins/_grid-mixins.scss delete mode 100644 src/assets/style/_scss/mixins/_colors.scss delete mode 100644 src/assets/style/_scss/mixins/_headings.scss delete mode 100644 src/assets/style/_scss/mixins/_px2rem.scss delete mode 100644 src/assets/style/_scss/mixins/_text-align.scss delete mode 100644 src/assets/style/a11y/achromatomaly.scss delete mode 100644 src/assets/style/a11y/achromatopsia.scss delete mode 100644 src/assets/style/a11y/deuteranomaly.scss delete mode 100644 src/assets/style/a11y/deuteranopia.scss delete mode 100644 src/assets/style/a11y/protanomaly.scss delete mode 100644 src/assets/style/a11y/protanopia.scss delete mode 100644 src/assets/style/a11y/tritanomaly.scss delete mode 100644 src/assets/style/a11y/tritanopia.scss delete mode 100644 src/assets/style/theme-1/_theme-1-vars.scss delete mode 100644 src/assets/style/theme-1/theme-1.scss delete mode 100644 src/assets/style/theme-2/_theme-2-vars.scss delete mode 100644 src/assets/style/theme-2/theme-2.scss diff --git a/.core/gulp.tasks.js b/.core/gulp.tasks.js index 00631ef3..cdcb4584 100644 --- a/.core/gulp.tasks.js +++ b/.core/gulp.tasks.js @@ -10,7 +10,7 @@ const browserSync = require('browser-sync'); const gulpif = require('gulp-if'); const gulpwatch = require('@atomic-reactor/gulp-watch'); const prefix = require('gulp-autoprefixer'); -const sass = require('gulp-sass')(require('sass')); +const sass = require('gulp-sass')(require('sass-embedded')); const gzip = require('gulp-gzip'); const reactiumImporter = require('@atomic-reactor/node-sass-reactium-importer'); const cleanCSS = require('gulp-clean-css'); diff --git a/package-lock.json b/package-lock.json index ba4a9f93..7f7b9b4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1919,6 +1919,12 @@ "to-fast-properties": "^2.0.0" } }, + "@bufbuild/protobuf": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.2.0.tgz", + "integrity": "sha512-MBVuQMOBHxgGnZ9XCUIi8WOy5O/T4ma3TduCRhRvndv3UDbG9cHgd8h6nOYSGyBYPEvXf1z9nTwhp8mVIDbq2g==", + "dev": true + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -4487,6 +4493,12 @@ "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==", "dev": true }, + "buffer-builder": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", + "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", + "dev": true + }, "buffer-crc32": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", @@ -14588,6 +14600,121 @@ } } }, + "sass-embedded": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.62.0.tgz", + "integrity": "sha512-SwTIG6UmrMiT94/v8G+2pPf6i+XwY4hOQxm8HZl0ld0st2KdGDj/SBXDznFl7+sJ6tFq6hvVvrB9rW5Nj7EhuQ==", + "dev": true, + "requires": { + "@bufbuild/protobuf": "^1.0.0", + "buffer-builder": "^0.2.0", + "immutable": "^4.0.0", + "rxjs": "^7.4.0", + "sass-embedded-darwin-arm64": "1.62.0", + "sass-embedded-darwin-x64": "1.62.0", + "sass-embedded-linux-arm": "1.62.0", + "sass-embedded-linux-arm64": "1.62.0", + "sass-embedded-linux-ia32": "1.62.0", + "sass-embedded-linux-x64": "1.62.0", + "sass-embedded-win32-ia32": "1.62.0", + "sass-embedded-win32-x64": "1.62.0", + "supports-color": "^8.1.1" + }, + "dependencies": { + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", + "dev": true + }, + "rxjs": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz", + "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==", + "dev": true, + "requires": { + "tslib": "^2.1.0" + } + }, + "supports-color": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", + "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "dev": true + } + } + }, + "sass-embedded-darwin-arm64": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.62.0.tgz", + "integrity": "sha512-bYEM6DY7kteOd/aJXUisiavm8B1acRhpIn+rhzKZeTn87kUW5RzZv2nKaSmb1vUd4ZptDGaJ144qz/d20rnogQ==", + "dev": true, + "optional": true + }, + "sass-embedded-darwin-x64": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.62.0.tgz", + "integrity": "sha512-2sBQ4uWjZbf8TKXF8Aq7N0p5V2tKUr4zX9gQAiKvm1NBYwsW22+m8D34heOWu50ikpIxebvt7i/z7hafH5kzKg==", + "dev": true, + "optional": true + }, + "sass-embedded-linux-arm": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.62.0.tgz", + "integrity": "sha512-0lz9Ids/OzKiOK+fd5wo/fHBGJ5lCHbcRsjDnU0CIMWkUmMt7yhcFABWB/TUofS5XvrohYbGqs+yKP3X0oGX3g==", + "dev": true, + "optional": true + }, + "sass-embedded-linux-arm64": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.62.0.tgz", + "integrity": "sha512-FexUt8aE7I7fJub3N6+NsDdbPRP/O8o400qpbEbY7BWgiWEdpr81OBulQZY/2LzZUnz9keUhfpmltNY3SNg3kg==", + "dev": true, + "optional": true + }, + "sass-embedded-linux-ia32": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.62.0.tgz", + "integrity": "sha512-VpDHtMIwcoWqDsiskjhDYAle0SJV4mUiZJTXg5RkMzoX1ZyNiVz+uNaZ88kDqcGXsWpe2i0sIlljD4ryaiMAhA==", + "dev": true, + "optional": true + }, + "sass-embedded-linux-x64": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.62.0.tgz", + "integrity": "sha512-dntYMsu0QonlerFB8VDlzxoJcpMEtN9lPHstKOQ6rk6hbSFPvcI8MqqUomlOjmpakKeVrpyZ04nm9jHrzlFmYg==", + "dev": true, + "optional": true + }, + "sass-embedded-win32-ia32": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.62.0.tgz", + "integrity": "sha512-rTCZCVkQa6XcreyQ8gYqnsEG13HCzqKoN2mCvIuGwJro8IjyT2PzWauouO0M06T0FLH0pc3EvKdKaLdtijf9AQ==", + "dev": true, + "optional": true + }, + "sass-embedded-win32-x64": { + "version": "1.62.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.62.0.tgz", + "integrity": "sha512-g6DZBPGfIDKLBarvYRVKJ+7rJAHJXkOQQVrYSWm22klA9ZNZ0CaVyqLqejttZPKGreD8h/xh2uz/s6w/P900Sw==", + "dev": true, + "optional": true + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", diff --git a/package.json b/package.json index eb5b02f9..f2cfaff4 100644 --- a/package.json +++ b/package.json @@ -146,6 +146,7 @@ "ora": "^5.4.1", "readdir-recursive": "0.0.4", "sass": "^1.59.3", + "sass-embedded": "^1.62.0", "slugify": "^1.6.5", "stylelint": "^13.12.0", "webpack": "^5.76.2", diff --git a/src/assets/style/_scss/_button.scss b/src/assets/style/_scss/_button.scss deleted file mode 100644 index ed5cb4bb..00000000 --- a/src/assets/style/_scss/_button.scss +++ /dev/null @@ -1,250 +0,0 @@ -// color-left, color-right, color, text-shadow -$buttons: ( - "primary": (lighten($color-blue, 5%), $color-blue, $color-white, rgba($color-white, 0)), - "secondary": (lighten($color-black, 15%), $color-black, $color-grey-light, rgba($color-white, 0)), - "tertiary": ($color-gray, $color-gray, $color-white, rgba($color-white, 0)) -); - -// font-size, paddingTop, paddingRight, paddingBottom, paddingLeft -$button-sizes: ( - "xs": (10px, 4px, 18px, 4px, 18px), - "sm": (12px, 8px, 24px, 8px, 24px), - "md": (14px, 12px, 56px, 12px, 56px), - "lg": (22px, 16px, 80px, 16px, 80px) -); - -@mixin default-button($size, $pt, $pr, $pb, $pl) { - display : inline-flex; - justify-content : center; - align-items : center; - padding : $pt $pr $pb $pl; - font-size : $size; - flex-wrap : nowrap; - white-space : nowrap; - border : none; -} - -@mixin pill-button($size) { - border-radius : $size * 3; -} - -@mixin h-gradient($clr-l, $clr-r) { - background : $clr-r; /* Old browsers */ - background : -moz-linear-gradient(left, $clr-l 0%, $clr-r 100%); /* FF3.6-15 */ - background : -webkit-linear-gradient(left, $clr-l 0%, $clr-r 100%); /* Chrome10-25,Safari5.1-6 */ - background : linear-gradient(to right, $clr-l 0%, $clr-r 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$clr-l}', endColorstr='#{$clr-r}',GradientType=1 ); /* IE6-9 */ -} - -@mixin button() { - @each $clr-name, $clr-codes in $buttons { - $shadow: nth($clr-codes, 4); - - &-#{$clr-name} { - @extend .btn; - color: nth($clr-codes, 3); - text-shadow: 0 0 1px $shadow; - line-height: 1; - - svg { - fill: nth($clr-codes, 3); - stroke: nth($clr-codes, 3); - } - - @include h-gradient(nth($clr-codes, 1), nth($clr-codes, 2)); - - &:focus, - &.focus { - box-shadow: 0 0 10px 1px lighten(nth($clr-codes, 1), 5%); - } - - &:hover, - &.hover, - &.active { - text-decoration: none; - @include h-gradient(lighten(nth($clr-codes, 1), 5%), lighten(nth($clr-codes, 2), 5%)); - } - - &:disabled, - &.disabled { - opacity: 0.5; - cursor: default; - @include h-gradient(nth($clr-codes, 1), nth($clr-codes, 2)); - pointer-events: none; - } - - @each $size-name, $size-codes in $button-sizes { - &-#{$size-name} { - @extend .btn; - @extend .btn-#{$clr-name}; - - @include default-button( - nth($size-codes, 1), - nth($size-codes, 2), - nth($size-codes, 3), - nth($size-codes, 4), - nth($size-codes, 5) - ); - } - } - } - - &-#{$clr-name}-outline { - @extend .btn; - color: nth($clr-codes, 2); - - background: transparent; - //border: 2px solid nth($clr-codes, 2) !important; - position: relative; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 2px solid nth($clr-codes, 2) !important; - } - - &:hover, - &:focus, - &.hover, - &.active { - background: nth($clr-codes, 1); - color: nth($clr-codes, 3); - } - - &.active { - background: nth($clr-codes, 2); - } - - &:focus, - &.focus { - box-shadow: 0 0 10px 1px lighten(nth($clr-codes, 1), 5%); - } - - &:disabled, - &.disabled { - opacity: 0.5; - cursor: default; - background: transparent; - color: nth($clr-codes, 2); - pointer-events: none; - } - } - - @each $size-name, $size-codes in $button-sizes { - &-#{$clr-name}-#{$size-name}-outline { - @include default-button( - nth($size-codes, 1), - nth($size-codes, 2), - nth($size-codes, 3), - nth($size-codes, 4), - nth($size-codes, 5) - ); - - @extend .btn-#{$clr-name}-outline; - } - } - - - &-#{$clr-name}-pill { - @extend .btn; - @extend .btn-#{$clr-name}; - - @include pill-button(14px); - } - - &-#{$clr-name}-outline-pill { - @extend .btn; - @extend .btn-#{$clr-name}-outline; - - @include pill-button(14px); - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 2px solid nth($clr-codes, 2) !important; - @include pill-button(14px); - } - } - - @each $size-name, $size-codes in $button-sizes { - - &-#{$clr-name}-#{$size-name} { - @extend .btn; - @extend .btn-#{$clr-name}; - @extend .btn-#{$clr-name}-#{$size-name}; - } - - &-#{$clr-name}-#{$size-name}-pill { - @extend .btn; - @extend .btn-#{$clr-name}; - @extend .btn-#{$clr-name}-#{$size-name}; - @include pill-button(nth($size-codes, 1)); - } - - &-#{$clr-name}-#{$size-name}-outline-pill { - @extend .btn; - @extend .btn-#{$clr-name}-#{$size-name}; - @extend .btn-#{$clr-name}-outline; - @include pill-button(nth($size-codes, 1)); - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 2px solid nth($clr-codes, 2) !important; - @include pill-button(nth($size-codes, 1)); - } - } - } - } -} - -button { - &:hover { - cursor: pointer; - } -} - -.btn { - @include default-button(14px, 8px, 24px, 8px, 24px); - outline: none; - border-radius: 2px; - background : $color-grey; - text-transform : uppercase; - color : $color-white; - font-weight: 400; - - svg { - fill: $color-white; - stroke: $color-white; - } - - @include button(); - - &-block { - width: 100%; - } - - &-icon { - @extend .btn-primary; - border-radius: 100%; - font-size: 22px; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 36px !important; - width: 36px !important; - } -} diff --git a/src/assets/style/_scss/_fonts.scss b/src/assets/style/_scss/_fonts.scss deleted file mode 100644 index 8b7569d1..00000000 --- a/src/assets/style/_scss/_fonts.scss +++ /dev/null @@ -1,400 +0,0 @@ -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 100; - src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7m0dR9pBOi.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 100; - src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRzS7m0dR9pBOi.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 100; - src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxi7m0dR9pBOi.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 100; - src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxy7m0dR9pBOi.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 100; - src: local('Montserrat Thin'), local('Montserrat-Thin'), url(/assets/fonts/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRyS7m0dR9pA.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_aZA3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 300; - src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 300; - src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 300; - src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 300; - src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 300; - src: local('Montserrat Light'), local('Montserrat-Light'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/montserrat/v12/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/montserrat/v12/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/montserrat/v12/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/assets/fonts/montserrat/v12/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_ZpC3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_bZF3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - src: local('Montserrat Bold'), local('Montserrat-Bold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 900; - src: local('Montserrat Black'), local('Montserrat-Black'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gTD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 900; - src: local('Montserrat Black'), local('Montserrat-Black'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3g3D_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* vietnamese */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 900; - src: local('Montserrat Black'), local('Montserrat-Black'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gbD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 900; - src: local('Montserrat Black'), local('Montserrat-Black'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gfD_vx3rCubqg.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 900; - src: local('Montserrat Black'), local('Montserrat-Black'), url(/assets/fonts/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD_vx3rCs.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -/* greek-ext */ -@font-face { - font-family: 'Cardo'; - font-style: normal; - font-weight: 400; - src: local('Cardo'), local('Cardo-Regular'), url(/assets/fonts/cardo/v10/wlp_gwjKBV1pqhv03IE7225PUCk.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} - -/* greek */ -@font-face { - font-family: 'Cardo'; - font-style: normal; - font-weight: 400; - src: local('Cardo'), local('Cardo-Regular'), url(/assets/fonts/cardo/v10/wlp_gwjKBV1pqhv73IE7225PUCk.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} - -/* latin-ext */ -@font-face { - font-family: 'Cardo'; - font-style: normal; - font-weight: 400; - src: local('Cardo'), local('Cardo-Regular'), url(/assets/fonts/cardo/v10/wlp_gwjKBV1pqhv23IE7225PUCk.woff2) format('woff2'); - unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; -} - -/* latin */ -@font-face { - font-family: 'Cardo'; - font-style: normal; - font-weight: 400; - src: local('Cardo'), local('Cardo-Regular'), url(/assets/fonts/cardo/v10/wlp_gwjKBV1pqhv43IE7225P.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@each $selector, $font in $fonts { - .#{$selector} { font-family: #{$font}; } -} diff --git a/src/assets/style/_scss/_form.scss b/src/assets/style/_scss/_form.scss deleted file mode 100644 index 68384bd3..00000000 --- a/src/assets/style/_scss/_form.scss +++ /dev/null @@ -1,115 +0,0 @@ - -.form-group { - display: flex; - flex-direction: column; - line-height: 1.5; - margin: px2rem(20) 0; - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - - label { - user-select: none; - cursor: pointer; - display: flex; - flex-direction: column; - font-weight: 500; - - * { - font-weight: normal; - } - } - - &, label { - input, - textarea, - select { - flex-grow: 1; - font-family: inherit; - font-size: inherit; - font-weight: 200; - outline: none; - border: 1px solid $color-grey; - border-radius: $input-radius; - line-height: 1; - margin-top: 6px; - padding: 10px; - - &:focus, - &.focus { - box-shadow: 0 0 0 5px rgba(lighten(nth($color-blue, 1), 5%), 0.25); - border: 1px solid $color-blue; - } - - &:disabled { - opacity: 0.8; - } - - &:first-child { - &:last-child { - margin-top: 0; - margin-bottom: 0; - } - } - } - - textarea { - line-height: 1.25; - } - } - - .inline, - &.inline { - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row !important; - - } - - - .small, small { - &:last-child { - @extend .em; - margin-top: 8px; - font-weight: normal; - } - } - - &.row { - - label { - flex-direction: row; - align-items: center; - } - - input, - textarea, - select { - margin: 0; - } - } - - &.error { - input, - textarea, - select { - box-shadow: 0 0 0 5px rgba(lighten(nth($color-red, 1), 5%), 0.25); - border: 1px solid $color-red !important; - - &:focus, - &.focus { - box-shadow: none; - } - } - - .small, small { - color: $color-red; - } - } -} diff --git a/src/assets/style/_scss/_layout.scss b/src/assets/style/_scss/_layout.scss deleted file mode 100644 index 4ee72cc6..00000000 --- a/src/assets/style/_scss/_layout.scss +++ /dev/null @@ -1,36 +0,0 @@ - -.flex { - @include flex-factory(); - - @each $prefix in $breakpoint-all-prefixes { - @include breakpoint($prefix) { - &-#{$prefix} { - display: flex; - @include flex-factory(); - } - } - } - - &-grow { - flex-grow: 1; - } - - &-shrink { - flex-shrink: 1; - } - - &.start { - justify-content: flex-start - } - &.end { - justify-content: flex-end; - } - - &.middle { - align-items: center - } - - &.center { - justify-content: center; - } -} diff --git a/src/assets/style/_scss/_reactium-modules.scss b/src/assets/style/_scss/_reactium-modules.scss index dfe58316..d6208f82 100644 --- a/src/assets/style/_scss/_reactium-modules.scss +++ b/src/assets/style/_scss/_reactium-modules.scss @@ -2,5 +2,4 @@ // WARNING: Do not directly edit this file !!!! // File generated by gulp styles:partials task -@import '_reactium-style-molecules'; @import '../../../app/components/Welcome/_reactium-style-organisms'; diff --git a/src/assets/style/_scss/_reactium-style-molecules.scss b/src/assets/style/_scss/_reactium-style-molecules.scss deleted file mode 100644 index 5da67595..00000000 --- a/src/assets/style/_scss/_reactium-style-molecules.scss +++ /dev/null @@ -1,59 +0,0 @@ -$reactium-blue: #4f82ba !default; -$reactium-white: #ffffff !default; - -.reactium-loading { - top: 0; - left: 0; - width: 100vw; - height: 100vh; - position: fixed; - background-color: $reactium-white; - - &, - * { - box-sizing: border-box; - } - - &:before { - content: ''; - width: 64px; - height: 64px; - border-radius: 100%; - z-index: 1; - left: 50%; - top: 50%; - position: absolute; - transform: translate(-50%, -50%); - box-shadow: 0 0 0 0 rgba($reactium-blue, 1); - animation: reactium-pulse 1.2s infinite; - } - - &:after { - content: ''; - width: 64px; - height: 64px; - z-index: 2; - left: 50%; - top: 50%; - position: absolute; - transform: translate(-50%, -50%); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-image: url('/assets/images/logo.png'); - } -} - -@keyframes reactium-pulse { - 0% { - box-shadow: 0 0 0 0 rgba($reactium-blue, 0.7); - } - - 70% { - box-shadow: 0 0 0 12px rgba($reactium-blue, 0); - } - - 100% { - box-shadow: 0 0 0 0 rgba($reactium-white, 0); - } -} diff --git a/src/assets/style/_scss/_reboot.scss b/src/assets/style/_scss/_reboot.scss deleted file mode 100644 index 5492fe6a..00000000 --- a/src/assets/style/_scss/_reboot.scss +++ /dev/null @@ -1,459 +0,0 @@ -// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix - -// Reboot -// -// Normalization of HTML elements, manually forked from Normalize.css to remove -// styles targeting irrelevant browsers while applying new styles. -// -// 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`. -// 2. Change the default font family in all browsers. -// 3. Correct the line height in all browsers. -// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. - -*, -*::before, -*::after { - box-sizing: border-box; // 1 -} - -html { - font-family: sans-serif; // 2 - line-height: 1.15; // 3 - -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba($color-black, 0); // 6 -} - -// IE10+ doesn't honor `` in some cases. -@at-root { - @-ms-viewport { - width: device-width; - } -} - -// 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 { - display: block; -} -// stylelint-enable selector-list-comma-newline-after - -// Body -// -// 1. Remove the margin in all browsers. -// 2. As a best practice, apply a default `background-color`. -// 3. Set an explicit initial text-align value so that we can later use the -// the `inherit` value on things like `` elements. - - -// Suppress the focus outline on elements that cannot be accessed via keyboard. -// This prevents an unwanted focus outline from appearing around elements that -// might still respond to pointer events. -// -// Credit: https://github.com/suitcss/base -[tabindex="-1"]:focus { - outline: 0 !important; -} - - -// Content grouping -// -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. - -hr { - box-sizing: content-box; // 1 - height: 0; // 1 - overflow: visible; // 2 -} - - -// -// Typography -// - -// Remove top margins from headings -// -// 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 { - margin-top: 0; - margin-bottom: $headings-margin-bottom; -} -// stylelint-enable selector-list-comma-newline-after - -// Reset margins on paragraphs -// -// Similarly, the top margin on `

`s get reset. However, we also reset the -// bottom margin to use `rem` units instead of `em`. -p { - margin-top: 0; - margin-bottom: $paragraph-margin-bottom; -} - -// Abbreviations -// -// 1. Remove the bottom border in Firefox 39-. -// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. -// 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin - -abbr[title], -abbr[data-original-title] { // 4 - text-decoration: underline; // 2 - text-decoration: underline dotted; // 2 - cursor: help; // 3 - border-bottom: 0; // 1 -} - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: $dt-font-weight; -} - -dd { - margin-bottom: .5rem; - margin-left: 0; // Undo browser default -} - -dfn { - font-style: italic; // Add the correct font style in Android 4.3- -} - - -// -// Prevent `sub` and `sup` elements from affecting the line height in -// all browsers. -// - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub, .sub { bottom: -.25rem; } -sup, .sup { top: -.5rem; } - - -// -// Links -// - -a { - color: inherit; - text-decoration: none; - background-color: transparent; // Remove the gray background on active links in IE 10. - -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. - - &:hover { - color: inherit; - text-decoration: underline; - } -} - -// And undo these styles for placeholder links/named anchors (without href) -// which have not been made explicitly keyboard-focusable (without tabindex). -// It would be more straightforward to just use a[href] in previous block, but that -// causes specificity issues in many other styles that are too complex to fix. -// See https://github.com/twbs/bootstrap/issues/19402 - -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; - - &:hover, - &:focus { - color: inherit; - text-decoration: none; - } - - &:focus { - outline: 0; - } -} - - -// -// Code -// - -pre, -code, -kbd, -samp { - font-family: $font-family-monospace; - font-size: 1em; // Correct the odd `em` font sizing in all browsers. -} - -pre { - // Remove browser default top margin - margin-top: 0; - // Reset browser default of `1em` to use `rem`s - margin-bottom: 1rem; - // Don't allow content to break outside - overflow: auto; - // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so - // we force a non-overlapping, non-auto-hiding scrollbar to counteract. - -ms-overflow-style: scrollbar; -} - - -// -// Figures -// - -figure { - // Apply a consistent margin strategy (matches our type styles). - margin: 0 0 1rem; -} - - -// -// Images and content -// - -img { - vertical-align: middle; - border-style: none; // Remove the border on images inside links in IE 10-. -} - -svg { - // Workaround for the SVG overflow bug in IE10/11 is still required. - // See https://github.com/twbs/bootstrap/issues/26878 - overflow: hidden; - vertical-align: middle; -} - - -// -// Tables -// - -table { - border-collapse: collapse; // Prevent double borders -} - -caption { - padding-top: $table-cell-padding; - padding-bottom: $table-cell-padding; - color: $table-caption-color; - text-align: left; - caption-side: bottom; -} - -th { - // Matches default `` alignment by inheriting from the ``, or the - // closest parent with a set `text-align`. - text-align: inherit; -} - - -// -// Forms -// - -label { - // Allow labels to use `margin` for spacing. - display: inline-block; - margin-bottom: $label-margin-bottom; -} - -// Remove the default `border-radius` that macOS Chrome adds. -// -// Details at https://github.com/twbs/bootstrap/issues/24093 -button { - border-radius: 0; -} - -// Work around a Firefox/IE bug where the transparent `button` background -// results in a loss of the default `button` focus styles. -// -// Credit: https://github.com/suitcss/base/ -button:focus { - outline: none; -} - -input, -button, -select, -optgroup, -textarea { - margin: 0; // Remove the margin in Firefox and Safari - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; // Show the overflow in Edge -} - -button, -select { - text-transform: none; // Remove the inheritance of text transform in Firefox -} - -// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` -// controls in Android 4. -// 2. Correct the inability to style clickable types in iOS and Safari. -button, -html [type="button"], // 1 -[type="reset"], -[type="submit"] { - -webkit-appearance: button; // 2 -} - -// Remove inner border and padding from Firefox, but don't restore the outline like Normalize. -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type="radio"], -input[type="checkbox"] { - box-sizing: border-box; // 1. Add the correct box sizing in IE 10- - padding: 0; // 2. Remove the padding in IE 10- -} - - -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - // Remove the default appearance of temporal inputs to avoid a Mobile Safari - // bug where setting a custom line-height prevents text from being vertically - // centered within the input. - // See https://bugs.webkit.org/show_bug.cgi?id=139848 - // and https://github.com/twbs/bootstrap/issues/11266 - -webkit-appearance: listbox; -} - -textarea { - overflow: auto; // Remove the default vertical scrollbar in IE. - // Textareas should really only resize vertically so they don't break their (horizontal) containers. - resize: vertical; -} - -fieldset { - // Browsers set a default `min-width: min-content;` on fieldsets, - // unlike e.g. `

`s, which have `min-width: 0;` by default. - // So we reset that to ensure fieldsets behave more like a standard block element. - // See https://github.com/twbs/bootstrap/issues/12359 - // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements - min-width: 0; - // Reset the default outline behavior of fieldsets so they don't affect page layout. - padding: 0; - margin: 0; - border: 0; -} - -// 1. Correct the text wrapping in Edge and IE. -// 2. Correct the color inheritance from `fieldset` elements in IE. -legend { - display: block; - width: 100%; - max-width: 100%; // 1 - padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; // 2 - white-space: normal; // 1 -} - -progress { - vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. -} - -// Correct the cursor style of increment and decrement buttons in Chrome. -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - // This overrides the extra rounded corners on search inputs in iOS so that our - // `.form-control` class can properly style them. Note that this cannot simply - // be added to `.form-control` as it's not specific enough. For details, see - // https://github.com/twbs/bootstrap/issues/11586. - outline-offset: -2px; // 2. Correct the outline style in Safari. - -webkit-appearance: none; -} - -// -// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. -// - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// 1. Correct the inability to style clickable types in iOS and Safari. -// 2. Change font properties to `inherit` in Safari. -// - -::-webkit-file-upload-button { - font: inherit; // 2 - -webkit-appearance: button; // 1 -} - -// -// Correct element displays -// - -output { - display: inline-block; -} - -summary { - display: list-item; // Add the correct display in all browsers - cursor: pointer; -} - -template { - display: none; // Add the correct display in IE -} - -// Always hide an element with the `hidden` HTML attribute (from PureCSS). -// Needed for proper display in IE 10-. -[hidden] { - display: none !important; -} diff --git a/src/assets/style/_scss/_typography.scss b/src/assets/style/_scss/_typography.scss deleted file mode 100644 index 507b6d6e..00000000 --- a/src/assets/style/_scss/_typography.scss +++ /dev/null @@ -1,93 +0,0 @@ -html, body { - margin: 0; - font-family: #{$font-family-base}; - font-size: $font-size-base; - font-weight: $font-weight-base; - line-height: $line-height-base; - color: $color-black; - text-align: left; - background-color: $color-white; -} - -.number { - font-family: $font-family-monospace; -} - -.upper, .uppercase { - text-transform: uppercase -} - -.lower, .lowercase { - text-transform: lowercase; -} - -.proper, .propercase, .capitalize { - text-transform: capitalize; -} - -u, .u, .underline { - text-decoration: underline; -} - -strike, -.strike, -.strikethrough { - text-decoration: line-through; -} - -p, .p { - line-height: 1.5; -} - -.b, -.bold, -.strong, -strong { - font-weight: 600; -} - -em, -.em, -.italic, -.i { - font-style: italic; -} - -small, -.small { - font-size: px2rem(11); -} - -blockquote { - padding : px2rem(20); - margin : px2rem(20) 0; - background-color : $color-grey-light; - font-family : 'Montserrat', sans-serif; - border-radius : 0 px2rem(50) px2rem(50) 0; - border-left : 5px solid $color-grey; -} - -ul li, -ol li { - line-height: 2; - padding: 0; - margin: 0; -} - -ul, ol { - margin: 0 0 0 px2rem(20); - padding: 0; -} - -.light { - font-weight: 100; -} - -.medium { - font-weight: 500; -} - - - -@include heading-factory(); -@include text-align(); diff --git a/src/assets/style/_scss/_variables.scss b/src/assets/style/_scss/_variables.scss deleted file mode 100644 index 09562045..00000000 --- a/src/assets/style/_scss/_variables.scss +++ /dev/null @@ -1,45 +0,0 @@ -// Root font-size: -$root-font: 16px; - -$fonts: ( - "opensans": "Montserrat, Helvetica, Arial, sans-serif", - "sans-serif": "Montserrat, Helvetica, Arial, sans-serif", - "cardo": "Cardo, Times New Roman, Gotham, serif", - "serif": "Cardo, Times New Roman, Gotham, serif" -) !default; - -$font-family-base: map-get($fonts, sans-serif) !default; -$font-size-base: 16px; -$font-weight-base: 400; -$font-family-monospace: 'Courier New', Courier, monospace; -$line-height-base: 1; - -$headings-margin-bottom: 0; - -$paragraph-margin-bottom: 15px; - -$dt-font-weight: 400; - -$table-cell-padding: 10px; -$table-caption-color: inherit; - -$label-margin-bottom: 0; - -$sizing: (0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 48, 56, 64, 72, 80); - -$text-alignment: ('left', 'right', 'center', 'justify'); - -$headings: ( - h1: (map-get($fonts, sans-serif), 2rem, 100), - h2: (map-get($fonts, sans-serif), 1.5rem, 100), - h3: (map-get($fonts, sans-serif), 1.17rem, 100), - h4: (map-get($fonts, sans-serif), 1rem, 100), - h5: (map-get($fonts, sans-serif), 0.83rem, 100), - h6: (map-get($fonts, sans-serif), 0.67rem, 100) -) !default; - -$input-radius: 4px; - - -// Grid grid-variables -@import "grid/grid-variables"; diff --git a/src/assets/style/_scss/grid/_grid-variables.scss b/src/assets/style/_scss/grid/_grid-variables.scss deleted file mode 100644 index b11b9cf9..00000000 --- a/src/assets/style/_scss/grid/_grid-variables.scss +++ /dev/null @@ -1,105 +0,0 @@ -// Grid -$grid-columns: 12 !default; // Set number of columns in the grid - -// smallest to largest -$breakpoints-max: ( - 'xs': 640, - 'sm': 990, - 'md': 1280, - 'lg': 1440, - 'xl': 1600, -) !default; - -$xs-max: '#{map-get($breakpoints-max, 'xs')}px' !default; // Set xs breakpoint's max width -$sm-max: '#{map-get($breakpoints-max, 'sm')}px' !default; // Set sm breakpoint's max width -$md-max: '#{map-get($breakpoints-max, 'md')}px' !default; // Set md breakpoint's max width -$lg-max: '#{map-get($breakpoints-max, 'lg')}px' !default; // Set lg breakpoint's max width - -$gutter: 0 !default; - -$sm-start: '#{map-get($breakpoints-max, 'xs') + 1}px' !default; // Set sm breakpoint's min width -$md-start: '#{map-get($breakpoints-max, 'sm') + 1}px' !default; // Set md breakpoint's min width -$lg-start: '#{map-get($breakpoints-max, 'md') + 1}px' !default; // Set lg breakpoint's min width -$xl-start: '#{map-get($breakpoints-max, 'lg') + 1}px' !default; // Set xl breakpoint's min width - -$content-well-max-width: 'none' !default; // Set the max-width of the content well - -// Breakpoints -// Create breakpoint range statements to be used in media queries -$breakpoint-xs-up: 'only screen' !default; -$breakpoint-xs-only: 'only screen and (max-width: #{$xs-max})' !default; // 0 -> xs-max range -$breakpoint-sm-up: 'only screen and (min-width: #{$sm-start})' !default; // sm-start -> up range -$breakpoint-sm-only: 'only screen and (min-width: #{$sm-start}) and (max-width: #{$sm-max})' !default; // sm-start -> sm-max range -$breakpoint-md-up: 'only screen and (min-width: #{$md-start})' !default; // md-start -> up range -$breakpoint-md-only: 'only screen and (min-width: #{$md-start}) and (max-width: #{$md-max})' !default; // md-start -> md-max range -$breakpoint-lg-up: 'only screen and (min-width: #{$lg-start})' !default; // lg-start -> up range -$breakpoint-lg-only: 'only screen and (min-width: #{$lg-start}) and (max-width: #{$lg-max})' !default; // lg-start -> lg-max range -$breakpoint-xl-up: 'only screen and (min-width: #{$xl-start})' !default; // xl-start -> up range - -$breakpoint-sm-down: 'only screen and (max-width: #{$sm-max})' !default; // sm -> down -$breakpoint-md-down: 'only screen and (max-width: #{$md-max})' !default; // md -> down -$breakpoint-lg-down: 'only screen and (max-width: #{$lg-max})' !default; // lg -> down - -$breakpoints-all: ( - $breakpoint-xs-only, - $breakpoint-sm-up, - $breakpoint-sm-only, - $breakpoint-md-up, - $breakpoint-md-only, - $breakpoint-lg-up, - $breakpoint-lg-only, - $breakpoint-xl-up -) !default; -$breakpoint-ups: ( - $breakpoint-sm-up, - $breakpoint-md-up, - $breakpoint-lg-up, - $breakpoint-xl-up -) !default; -$breakpoint-all-prefixes: ( - 'xs', - 'xs-only', - 'sm', - 'sm-only', - 'md', - 'md-only', - 'lg', - 'lg-only', - 'xl' -) !default; -$breakpoint-up-prefixes: ('xs', 'sm', 'md', 'lg', 'xl') !default; - -$breakpoints: ( - 'xs': $breakpoint-xs-up, - 'xs-only': $breakpoint-xs-only, - 'sm': $breakpoint-sm-up, - 'sm-only': $breakpoint-sm-only, - 'sm-down': $breakpoint-sm-down, - 'md': $breakpoint-md-up, - 'md-only': $breakpoint-md-only, - 'md-down': $breakpoint-md-down, - 'lg': $breakpoint-lg-up, - 'lg-only': $breakpoint-lg-only, - 'lg-down': $breakpoint-lg-down, - 'xl': $breakpoint-xl-up, -) !default; - -body { - &::before { - display: block; - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - content: json-encode($breakpoints); - } - - &::after { - display: block; - height: 0; - width: 0; - overflow: hidden; - visibility: hidden; - content: json-encode($breakpoints-max); - } -} diff --git a/src/assets/style/_scss/grid/_grid.scss b/src/assets/style/_scss/grid/_grid.scss deleted file mode 100755 index 70a91655..00000000 --- a/src/assets/style/_scss/grid/_grid.scss +++ /dev/null @@ -1,153 +0,0 @@ -// Based on Flexbox Grid https://github.com/kristoferjoseph/flexboxgrid - -@use "sass:math"; - -@import 'mixins/breakpoint'; -@import 'mixins/grid-mixins'; -@import 'mixins/flex'; -@import 'visibility'; -@import 'size'; - -// No gutters -// No text alignment with justified container classes (center-xs, for example) - -.row { - @include row(); -} - -.row.reverse { - @include row-reverse(); -} - -.row.eq-height { - @include row-eq-height(); -} - -.row.auto-height { - @include row-auto-height(); -} - -.row.flex-column { - flex-direction: column; -} - -.col { - @include col(); -} - -.col.reverse { - @include col-reverse(); -} - -@each $prefix in $breakpoint-all-prefixes { - @include breakpoint($prefix) { - .col.reverse-#{$prefix} { - @include col-reverse(); - } - .row.reverse-#{$prefix} { - @include row-reverse(); - } - } -} - -.first { - order: -1; -} - -.last { - order: 1; -} - -.align-start { - align-self: flex-start; -} - -.align-end { - align-self: flex-end; -} - -.align-center { - align-self: center; -} - -.align-baseline { - align-self: baseline; -} - -.align-stretch { - align-self: stretch; -} -// Mixin to run inside of for loop - creates col/breakpoint classes * Not for developer use * -@mixin col-factory($thisPrefix) { - .col-#{$thisPrefix} { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - padding: $gutter; - } - @for $i from 1 through $grid-columns { - .col-#{$thisPrefix}-#{$i} { - flex-basis: math.div(100%, $grid-columns) * $i; - max-width: math.div(100%, $grid-columns) * $i; - padding: $gutter; - } - - .col-#{$thisPrefix}-offset-#{$i} { - margin-left: math.div(100%, $grid-columns) * $i; - } - } - - .start-#{$thisPrefix} { - justify-content: flex-start; - } - - .center-#{$thisPrefix} { - justify-content: center; - } - - .end-#{$thisPrefix} { - justify-content: flex-end; - } - - .top-#{$thisPrefix} { - align-items: flex-start; - } - - .middle-#{$thisPrefix} { - align-items: center; - } - - .bottom-#{$thisPrefix} { - align-items: flex-end; - } - - .around-#{$thisPrefix} { - justify-content: space-around; - } - - .between-#{$thisPrefix} { - justify-content: space-between; - } - - .first-#{$thisPrefix} { - order: -1; - } - - .last-#{$thisPrefix} { - order: 1; - } -} -// Mixin to run inside of for loop - creates col/breakpoint classes -@each $prefix in $breakpoint-up-prefixes { - @include breakpoint($prefix) { - @include col-factory($prefix); - } -} - -.col-gutter-lr { - padding: 0 $gutter; -} - -.col-no-gutter { - padding: 0; -} diff --git a/src/assets/style/_scss/grid/_size.scss b/src/assets/style/_scss/grid/_size.scss deleted file mode 100644 index 3fb84582..00000000 --- a/src/assets/style/_scss/grid/_size.scss +++ /dev/null @@ -1,81 +0,0 @@ -$sizes: ( - "m": (margin), - "mt": (margin-top), - "mr": (margin-right), - "mb": (margin-bottom), - "ml": (margin-left), - "mx": (margin-left, margin-right), - "my": (margin-top, margin-bottom), - "p": (padding), - "pt": (padding-top), - "pr": (padding-right), - "pb": (padding-bottom), - "pl": (padding-left), - "px": (padding-left, padding-right), - "py": (padding-top, padding-bottom), -); - -@mixin size-factory($thisPrefix: null) { - @each $prop-name, $props in $sizes { - @each $size in $sizing { - @if ($thisPrefix) { - .#{$prop-name}-#{$thisPrefix}-#{$size} { - @each $prop in $props { - #{$prop}: px2rem($size) !important; - } - } - .#{$prop-name}-#{$thisPrefix}--#{$size} { - @each $prop in $props { - #{$prop}: px2rem(-($size)) !important; - } - } - } @else { - .#{$prop-name}-#{$size} { - @each $prop in $props { - #{$prop}: px2rem($size) !important; - } - } - .#{$prop-name}--#{$size} { - @each $prop in $props { - #{$prop}: px2rem(-($size)) !important; - } - } - } - } - } -} - -@each $prefix in $breakpoint-all-prefixes { - @include breakpoint($prefix) { - @include size-factory($prefix); - } -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} -.ml-auto { - margin-left: auto; -} -.mr-auto { - margin-right: auto; -} - -@each $prefix in $breakpoint-all-prefixes { - @include breakpoint($prefix) { - .mx-#{$prefix}-auto { - margin-left: auto; - margin-right: auto; - } - .ml-#{$prefix}-auto { - margin-left: auto; - } - .mr-#{$prefix}-auto { - margin-right: auto; - } - } -} - - -@include size-factory(); diff --git a/src/assets/style/_scss/grid/_visibility.scss b/src/assets/style/_scss/grid/_visibility.scss deleted file mode 100755 index f144d66e..00000000 --- a/src/assets/style/_scss/grid/_visibility.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Mixin to run inside of for loop - creates visibility classes * Not for developer use * -@mixin vis-factory($thisPrefix: null) { - @if $thisPrefix { - .show-#{$thisPrefix} { - display: block !important; - } - - .hide-#{$thisPrefix} { - display: none !important; - } - } @else { - .show { - display: initial; - } - .hide { - display: none; - } - } -} - -@include vis-factory(); - -// Mixin to run inside of for loop - creates visibility classes * Not for developer use * -@each $prefix in $breakpoint-all-prefixes { - @include breakpoint($prefix) { - @include vis-factory($prefix); - } -} diff --git a/src/assets/style/_scss/grid/mixins/_breakpoint.scss b/src/assets/style/_scss/grid/mixins/_breakpoint.scss deleted file mode 100644 index 2fd48906..00000000 --- a/src/assets/style/_scss/grid/mixins/_breakpoint.scss +++ /dev/null @@ -1,10 +0,0 @@ - -@mixin breakpoint($thisPrefix) { - $break: map-get($breakpoints, $thisPrefix); - - @if ($break != null) { - @media #{$break} { - @content; - } - } -} diff --git a/src/assets/style/_scss/grid/mixins/_flex.scss b/src/assets/style/_scss/grid/mixins/_flex.scss deleted file mode 100644 index 80503fc3..00000000 --- a/src/assets/style/_scss/grid/mixins/_flex.scss +++ /dev/null @@ -1,33 +0,0 @@ -@mixin flex-factory() { - display: flex; - - &-top { - display: flex; - align-items: flex-start; - } - - &-middle { - display: flex; - align-items: center; - } - - &-bottom { - display: flex; - align-items: flex-end; - } - - &-left { - display: flex; - justify-content: flex-start; - } - - &-center { - display: flex; - justify-content: center; - } - - &-right { - display: flex; - justify-content: flex-end; - } -} diff --git a/src/assets/style/_scss/grid/mixins/_grid-mixins.scss b/src/assets/style/_scss/grid/mixins/_grid-mixins.scss deleted file mode 100755 index d0424003..00000000 --- a/src/assets/style/_scss/grid/mixins/_grid-mixins.scss +++ /dev/null @@ -1,366 +0,0 @@ - -@use "sass:math"; - -@mixin row($full-width: "false") { - margin: 0 auto; - width: 100%; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - // // Overrides flexbox's default behavior of making all children equal height - // align-items: flex-start; // If this was not in place it would require two classes to make a row full of unequal height columns aligned top, middle, bottom - @if type-of($content-well-max-width) == number and $content-well-max-width != 0 and $full-width == "false"{ - max-width: $content-well-max-width; - } -} - -@mixin row-reverse() { - flex-direction: row-reverse; -} - -@mixin row-eq-height() { - align-items: stretch; -} - -// For use when row align-item flex-start has been overridden -@mixin row-auto-height() { - align-items: flex-start; -} - -@mixin col-reverse() { - flex-direction: column-reverse; -} - -// Condition to run inside of the col mixin * not for developer use * -@mixin col-condition($col-number) { - @if type-of($col-number) == number { - @if $col-number > $grid-columns or $col-number == 0 { - @warn "Column number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})"; - } @else { - flex-basis: math.div(100%, $grid-columns) * $col-number; - max-width: math.div(100%, $grid-columns) * $col-number; - padding: $gutter; - } - // If no col number is passed then arg is set to "auto" by default - // "auto" mode fills the horizontal space with evenly sized containers - } @else if $col-number == "auto" { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - padding: $gutter; - } @else { - @warn "Column number argument must either be the string 'auto' or a number greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})"; - } -} // Condition to run inside of the col mixin * not for developer use * - -@mixin col($breakpoint: "xs", $col-number: "auto") { - // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs - @if type-of($breakpoint) == number { - $col-number: $breakpoint; - @include col-condition($col-number); - } @else if $breakpoint == "xs" { - @include col-condition($col-number); - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - @include col-condition($col-number); - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - @include col-condition($col-number); - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - @include col-condition($col-number); - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - @include col-condition($col-number); - } - } @else { - @warn "col mixin requires one of the existing breakpoint prefixes (#{$breakpoint-up-prefixes})"; - } -} - -// Condition to run inside of the col-offset mixin * not for developer use * -@mixin col-offset-condition($offset-number) { - @if type-of($offset-number) != number { - @warn "Column offset number must be a number (only arg or second arg in the col mixin)"; - } @else if $offset-number == 0 { - @warn "Column offset number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})"; - } @else if $offset-number > $grid-columns { - @warn "Column offset number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})"; - } @else { - margin-left: math.div(100%, $grid-columns) * $offset-number; - } -} // Condition to run inside of the col-offset mixin * not for developer use * - -@mixin col-offset($breakpoint: "xs", $offset-number: 0) { - // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs - @if type-of($breakpoint) == number { - $offset-number: $breakpoint; - @include col-offset-condition($offset-number); - } @else if $breakpoint == "xs" { - @include col-offset-condition($offset-number); - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - @include col-offset-condition($offset-number); - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - @include col-offset-condition($offset-number); - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - @include col-offset-condition($offset-number); - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - @include col-offset-condition($offset-number); - } - } @else { - @warn "col mixin requires one of the existing breakpoint prefixes (#{$breakpoint-up-prefixes})"; - } -} - -@mixin start($breakpoint: "xs") { - @if $breakpoint == "xs" { - justify-content: flex-start; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - justify-content: flex-start; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - justify-content: flex-start; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - justify-content: flex-start; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - justify-content: flex-start; - } - } @else { - @warn "start mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin center($breakpoint: "xs") { - @if $breakpoint == "xs" { - justify-content: center; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - justify-content: center; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - justify-content: center; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - justify-content: center; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - justify-content: center; - } - } @else { - @warn "center mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin end($breakpoint: "xs") { - @if $breakpoint == "xs" { - justify-content: flex-end; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - justify-content: flex-end; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - justify-content: flex-end; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - justify-content: flex-end; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - justify-content: flex-end; - } - } @else { - @warn "end mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin top($breakpoint: "xs") { - @if $breakpoint == "xs" { - align-items: flex-start; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - align-items: flex-start; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - align-items: flex-start; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - align-items: flex-start; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - align-items: flex-start; - } - } @else { - @warn "top mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin middle($breakpoint: "xs") { - @if $breakpoint == "xs" { - align-items: center; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - align-items: center; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - align-items: center; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - align-items: center; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - align-items: center; - } - } @else { - @warn "middle mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin bottom($breakpoint: "xs") { - @if $breakpoint == "xs" { - align-items: flex-end; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - align-items: flex-end; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - align-items: flex-end; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - align-items: flex-end; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - align-items: flex-end; - } - } @else { - @warn "bottom mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin around($breakpoint: "xs") { - @if $breakpoint == "xs" { - justify-content: space-around; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - justify-content: space-around; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - justify-content: space-around; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - justify-content: space-around; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - justify-content: space-around; - } - } @else { - @warn "around mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin between($breakpoint: "xs") { - @if $breakpoint == "xs" { - justify-content: space-between; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - justify-content: space-between; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - justify-content: space-between; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - justify-content: space-between; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - justify-content: space-between; - } - } @else { - @warn "between mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin first($breakpoint: "xs") { - @if $breakpoint == "xs" { - order: -1; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - order: -1; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - order: -1; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - order: -1; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - order: -1; - } - } @else { - @warn "first mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} - -@mixin last($breakpoint: "xs") { - @if $breakpoint == "xs" { - order: 1; - } @else if $breakpoint == "sm" { - @media #{$breakpoint-sm-up} { - order: 1; - } - } @else if $breakpoint == "md" { - @media #{$breakpoint-md-up} { - order: 1; - } - } @else if $breakpoint == "lg" { - @media #{$breakpoint-lg-up} { - order: 1; - } - } @else if $breakpoint == "xl" { - @media #{$breakpoint-xl-up} { - order: 1; - } - } @else { - @warn "last mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})"; - } -} diff --git a/src/assets/style/_scss/mixins/_colors.scss b/src/assets/style/_scss/mixins/_colors.scss deleted file mode 100644 index 453f7183..00000000 --- a/src/assets/style/_scss/mixins/_colors.scss +++ /dev/null @@ -1,4 +0,0 @@ -@each $clr-name, $clr-code in $color { - .#{$clr-name} { color: $clr-code; } - .bg-#{$clr-name} { background-color: $clr-code; } -} diff --git a/src/assets/style/_scss/mixins/_headings.scss b/src/assets/style/_scss/mixins/_headings.scss deleted file mode 100644 index 26773761..00000000 --- a/src/assets/style/_scss/mixins/_headings.scss +++ /dev/null @@ -1,25 +0,0 @@ -@mixin heading-factory() { - @each $h, $style in $headings { - $font: nth($style, 1); - $size: nth($style, 2); - $wt: nth($style, 3); - - #{$h} { - font-family: #{$font}; - font-weight: $wt; - font-size: $size; - } - } - - @each $h, $style in $headings { - $font: nth($style, 1); - $size: nth($style, 2); - $wt: nth($style, 3); - - .#{$h} { - font-family: #{$font}; - font-weight: $wt; - font-size: $size; - } - } -} diff --git a/src/assets/style/_scss/mixins/_px2rem.scss b/src/assets/style/_scss/mixins/_px2rem.scss deleted file mode 100644 index 3e3b6264..00000000 --- a/src/assets/style/_scss/mixins/_px2rem.scss +++ /dev/null @@ -1,20 +0,0 @@ - -@use "sass:math"; - -@function strip-units($number) { - @return math.div($number, $number * 0 + 1); - } - -@function px2rem($px) { - $rnum: strip-units($root-font); - $fnum: strip-units($px); - $rem: math.div($fnum, $rnum); - @return #{$rem}rem; -} - -@function px2vw($px) { - $rnum: 1920; - $fnum: strip-units($px); - $vw: math.div($fnum, $rnum) * 100; - @return #{$vw}vw; -} diff --git a/src/assets/style/_scss/mixins/_text-align.scss b/src/assets/style/_scss/mixins/_text-align.scss deleted file mode 100644 index 3ef602a1..00000000 --- a/src/assets/style/_scss/mixins/_text-align.scss +++ /dev/null @@ -1,20 +0,0 @@ - -@mixin text-align() { - - @each $align in $text-alignment { - .text-#{$align} { - text-align: #{$align}; - } - } - - @each $prefix in $breakpoint-all-prefixes { - @each $align in $text-alignment { - - @include breakpoint($prefix) { - .text-#{$prefix}-#{$align} { - text-align: #{$align}; - } - } - } - } -} diff --git a/src/assets/style/a11y/achromatomaly.scss b/src/assets/style/a11y/achromatomaly.scss deleted file mode 100644 index 5d687412..00000000 --- a/src/assets/style/a11y/achromatomaly.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#achromatomaly); -} diff --git a/src/assets/style/a11y/achromatopsia.scss b/src/assets/style/a11y/achromatopsia.scss deleted file mode 100644 index 877e321c..00000000 --- a/src/assets/style/a11y/achromatopsia.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#achromatopsia); -} diff --git a/src/assets/style/a11y/deuteranomaly.scss b/src/assets/style/a11y/deuteranomaly.scss deleted file mode 100644 index 93faed36..00000000 --- a/src/assets/style/a11y/deuteranomaly.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#deuteranomaly); -} diff --git a/src/assets/style/a11y/deuteranopia.scss b/src/assets/style/a11y/deuteranopia.scss deleted file mode 100644 index fd133745..00000000 --- a/src/assets/style/a11y/deuteranopia.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#deuteranopia); -} diff --git a/src/assets/style/a11y/protanomaly.scss b/src/assets/style/a11y/protanomaly.scss deleted file mode 100644 index 6d8ec9ac..00000000 --- a/src/assets/style/a11y/protanomaly.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#protanomaly); -} diff --git a/src/assets/style/a11y/protanopia.scss b/src/assets/style/a11y/protanopia.scss deleted file mode 100644 index 837438c8..00000000 --- a/src/assets/style/a11y/protanopia.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#protanopia); -} diff --git a/src/assets/style/a11y/tritanomaly.scss b/src/assets/style/a11y/tritanomaly.scss deleted file mode 100644 index 7fa4a2a3..00000000 --- a/src/assets/style/a11y/tritanomaly.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#tritanomaly); -} diff --git a/src/assets/style/a11y/tritanopia.scss b/src/assets/style/a11y/tritanopia.scss deleted file mode 100644 index bddac6cc..00000000 --- a/src/assets/style/a11y/tritanopia.scss +++ /dev/null @@ -1,6 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -body { - filter: url(/assets/images/a11y/a11y.svg#tritanopia); -} diff --git a/src/assets/style/theme-1/_theme-1-vars.scss b/src/assets/style/theme-1/_theme-1-vars.scss deleted file mode 100644 index 03257577..00000000 --- a/src/assets/style/theme-1/_theme-1-vars.scss +++ /dev/null @@ -1,2 +0,0 @@ -$button-bg-color: #CCCCCC; -$button-color: #000000; diff --git a/src/assets/style/theme-1/theme-1.scss b/src/assets/style/theme-1/theme-1.scss deleted file mode 100644 index 443ebb5d..00000000 --- a/src/assets/style/theme-1/theme-1.scss +++ /dev/null @@ -1,12 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -// THEME SPECIFIC VARIABLES -@import "./theme-1-vars.scss"; - -button.test { - border-radius: 50px; - padding: 10px 10px; - background-color: $button-bg-color; - color: $button-color; -} diff --git a/src/assets/style/theme-2/_theme-2-vars.scss b/src/assets/style/theme-2/_theme-2-vars.scss deleted file mode 100644 index 3fb0c788..00000000 --- a/src/assets/style/theme-2/_theme-2-vars.scss +++ /dev/null @@ -1,2 +0,0 @@ -$button-bg-color: #000000; -$button-color: #CCCCCC; diff --git a/src/assets/style/theme-2/theme-2.scss b/src/assets/style/theme-2/theme-2.scss deleted file mode 100644 index a0a7d1c4..00000000 --- a/src/assets/style/theme-2/theme-2.scss +++ /dev/null @@ -1,11 +0,0 @@ -// DEFAULT STYLES -@import "../style.scss"; - -// THEME SPECIFIC VARIABLES -@import "./theme-2-vars.scss"; - -button.test { - padding: 10px 10px; - background-color: $button-bg-color; - color: $button-color; -}