diff --git a/package.json b/package.json index aaa926940..bf72cedac 100644 --- a/package.json +++ b/package.json @@ -63,9 +63,9 @@ "eslint-plugin-vue": "^9.32.0", "gettext-parser": "^4.0.2", "json-loader": "^0.5.7", - "mini-css-extract-plugin": "^2.9.2", + "mini-css-extract-plugin": "^2.9.4", "moment-locales-webpack-plugin": "^1.0.7", - "sass": "^1.82.0", + "sass": "^1.90.0", "sass-loader": "^12.2.0", "svg-url-loader": "^7.1.1", "ttag-cli": "^1.9.2", @@ -75,4 +75,4 @@ "webpack-cli": "^4.9.0", "webpack-watch-files-plugin": "^1.2.0" } -} \ No newline at end of file +} diff --git a/resources/js/app/components/dialog/dialog.scss b/resources/js/app/components/dialog/dialog.scss index 4cfab9a26..b47836cbf 100644 --- a/resources/js/app/components/dialog/dialog.scss +++ b/resources/js/app/components/dialog/dialog.scss @@ -1,3 +1,5 @@ +@use "../../../../styles/variables"; + .bedita-dialog { .backdrop { position: fixed; @@ -52,28 +54,28 @@ } &.warning { - border-color: $warning; + border-color: variables.$warning; } &.error { - border-color: $error; + border-color: variables.$error; } &.prompt, &.info { - border-color: $info; + border-color: variables.$info; .icon-info-1, .icon-info-circled { - color: $info; + color: variables.$info; } } &.success { - border-color: $success; + border-color: variables.$success; .icon-ok-circled-1 { - color: $success; + color: variables.$success; } } @@ -89,7 +91,7 @@ input[type=text] { width: 100%; - border: 1px solid $gray-600; + border: 1px solid variables.$gray-600; } details { @@ -101,12 +103,12 @@ width: 100%; max-height: 400px; overflow: auto; - margin-top: $gutter * .75; - padding: $gutter * .75; + margin-top: variables.$gutter * .75; + padding: variables.$gutter * .75; flex: 1; - background-color: $gray-200; + background-color: variables.$gray-200; font-family: monospace; - font-size: $font-size-sm; + font-size: variables.$font-size-sm; } } } diff --git a/resources/richeditor.lazy.scss b/resources/richeditor.lazy.scss index 09057dfbe..1ec3e2408 100644 --- a/resources/richeditor.lazy.scss +++ b/resources/richeditor.lazy.scss @@ -8,14 +8,14 @@ BEdita Manager */ -@import './styles/variables'; // common variables used for color, margins, typography, media breakpoints, tag collections -@import './styles/mixins'; +@use 'styles/variables'; // common variables used for color, margins, typography, media breakpoints, tag collections +@use 'styles/mixins'; // general -@import './styles/base'; +@use 'styles/base'; // tinymce base content style -@import '~tinymce/skins/ui/oxide/content'; +@use '../node_modules/tinymce/skins/ui/oxide/content'; @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,200;0,400;1,200;1,400&family=IBM+Plex+Sans:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&family=IBM+Plex+Serif:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap"); @@ -23,9 +23,9 @@ body { padding: 1em !important; color: unset; background: unset; - font-family: $font-family-monospace; - font-size: $font-size-base; - font-weight: $font-weight-base; + font-family: variables.$font-family-monospace; + font-size: variables.$font-size-base; + font-weight: variables.$font-weight-base; } .mce-offscreen-selection { @@ -40,7 +40,7 @@ p { blockquote { padding-left:1rem; margin-left:0; - border-left: 4px solid $gray-700; + border-left: 4px solid variables.$gray-700; } a { @@ -58,7 +58,7 @@ a:link, a:hover, a:active, a:visited { [data-placeholder] { &[data-mce-selected] { - outline: solid 2px $info; + outline: solid 2px variables.$info; } } @@ -91,11 +91,11 @@ div[data-placeholder] { } details { - border: 1px solid $gray-700; + border: 1px solid variables.$gray-700; border-radius: 2px; padding: 0 4px; } summary { - border-bottom: 1px solid $gray-700; + border-bottom: 1px solid variables.$gray-700; } diff --git a/resources/style.scss b/resources/style.scss index 95a407f7a..385003569 100644 --- a/resources/style.scss +++ b/resources/style.scss @@ -9,56 +9,56 @@ BEdita Manager */ -@import './styles/variables'; // common variables used for color, margins, typography, media breakpoints, tag collections -@import './styles/mixins'; +@use 'styles/variables'; // common variables used for color, margins, typography, media breakpoints, tag collections +@use 'styles/mixins'; // general -@import './styles/base_normalize'; -@import './styles/base'; -@import './styles/layout'; // main grid base layout -@import './styles/buttons'; -@import './styles/forms'; -@import './styles/forms_file'; -@import './styles/utility_classes'; -@import './styles/elements'; -@import './styles/columns'; -@import './styles/richtexteditor'; +@use 'styles/base_normalize'; +@use 'styles/base'; +@use 'styles/layout'; // main grid base layout +@use 'styles/buttons'; +@use 'styles/forms'; +@use 'styles/forms_file'; +@use 'styles/utility_classes'; +@use 'styles/elements'; +@use 'styles/columns'; +@use 'styles/richtexteditor'; // elements -@import '../templates/Element/Form/form'; -@import '../templates/Element/Form/calendar'; -@import '../templates/Element/Form/locations'; -@import '../templates/Element/Form/trees'; -@import '../templates/Element/Form/publish_properties'; -@import '../templates/Element/Form/relations'; -@import '../templates/Element/Form/map'; -@import '../templates/Element/Form/history'; -@import '../templates/Element/Form/categories'; -@import '../templates/Element/flash/flash'; -@import '../templates/Element/Menu/colophon'; -@import '../templates/Element/Menu/menu'; -@import '../templates/Element/Menu/sidebar'; -@import '../templates/Element/Modules/index_properties'; -@import '../templates/Element/FilterBox/filter_box'; -@import '../templates/Element/Panel/panel'; +@use '../templates/Element/Form/form'; +@use '../templates/Element/Form/calendar'; +@use '../templates/Element/Form/locations'; +@use '../templates/Element/Form/trees'; +@use '../templates/Element/Form/publish_properties'; +@use '../templates/Element/Form/relations'; +@use '../templates/Element/Form/map'; +@use '../templates/Element/Form/history'; +@use '../templates/Element/Form/categories'; +@use '../templates/Element/flash/flash'; +@use '../templates/Element/Menu/colophon'; +@use '../templates/Element/Menu/menu'; +@use '../templates/Element/Menu/sidebar'; +@use '../templates/Element/Modules/index_properties'; +@use '../templates/Element/FilterBox/filter_box'; +@use '../templates/Element/Panel/panel'; // components -@import './js/app/components/dialog/dialog.scss'; -@import './js/app/components/ajax-login/ajax-login.scss'; -@import './js/app/components/tag-form/tag-form.scss'; +@use 'js/app/components/dialog/dialog.scss'; +@use 'js/app/components/ajax-login/ajax-login.scss'; +@use 'js/app/components/tag-form/tag-form.scss'; // Pages -@import '../templates/Pages/Login/login'; -@import '../templates/Pages/Dashboard/dashboard'; -@import '../templates/Pages/Admin/admin'; -@import '../templates/Pages/Import/import'; -@import '../templates/Pages/Modules/modules-index'; -@import '../templates/Pages/Modules/modules-view'; -@import '../templates/Pages/Model/model-index'; -@import '../templates/Pages/Model/model-view'; -@import '../templates/Pages/Translations/view'; +@use '../templates/Pages/Login/login'; +@use '../templates/Pages/Dashboard/dashboard'; +@use '../templates/Pages/Admin/admin'; +@use '../templates/Pages/Import/import'; +@use '../templates/Pages/Modules/modules-index'; +@use '../templates/Pages/Modules/modules-view'; +@use '../templates/Pages/Model/model-index'; +@use '../templates/Pages/Model/model-view'; +@use '../templates/Pages/Translations/view'; -@import './styles/non-production'; +@use 'styles/non-production'; // vue [v-cloak] { @@ -80,7 +80,7 @@ BEdita Manager border-top-color: transparent; content: ""; display: block; - height: $gutter * 2; - width: $gutter * 2; + height: variables.$gutter * 2; + width: variables.$gutter * 2; } } diff --git a/resources/styles/_base.scss b/resources/styles/_base.scss index e8c01848c..165b04bec 100644 --- a/resources/styles/_base.scss +++ b/resources/styles/_base.scss @@ -1,16 +1,18 @@ +@use "variables"; + // base body { overflow-x: hidden; - font-family: $font-family-base; - font-size: $font-size-sm; - line-height: $line-height-base; - background-color: $defaultBackground; + font-family: variables.$font-family-base; + font-size: variables.$font-size-sm; + line-height: variables.$line-height-base; + background-color: variables.$defaultBackground; // background-image: linear-gradient(160deg, $gray-900 0%, $gray-800 100%); background-attachment: fixed; background-repeat: no-repeat; - color: $white; - font-weight: $font-weight-base; + color: variables.$white; + font-weight: variables.$font-weight-base; text-align: left; // explicit initial text-align value so that we can later use `inherit` } @@ -18,11 +20,11 @@ body { *::before, *::after { box-sizing: border-box; } -h1 { margin-bottom: $gutter; } +h1 { margin-bottom: variables.$gutter; } h1, h2, h3 { margin-top: 0; line-height: 1.125em; - font-weight: $font-weight-base; + font-weight: variables.$font-weight-base; } p { margin: 0; } @@ -34,7 +36,7 @@ a:link, a:hover, a:active, a:visited { } b, strong { - font-weight: $font-weight-bold; + font-weight: variables.$font-weight-bold; } figure { margin: 0; } @@ -54,10 +56,10 @@ dl { margin: 0; dd { margin: 0; - font-weight: $font-weight-bold; + font-weight: variables.$font-weight-bold; } dd + dt { - margin-top: $gutter * .25; + margin-top: variables.$gutter * .25; } } diff --git a/resources/styles/_buttons.scss b/resources/styles/_buttons.scss index e53ad2b4f..808e394df 100644 --- a/resources/styles/_buttons.scss +++ b/resources/styles/_buttons.scss @@ -1,4 +1,6 @@ -#{$button-inputs}, +@use "variables"; + +#{variables.$button-inputs}, button, .button { display: inline-flex; justify-content: center; @@ -8,10 +10,10 @@ button, .button { vertical-align: top; position: relative; - height: $gutter * 2; - min-width: $gutter * 3; + height: variables.$gutter * 2; + min-width: variables.$gutter * 3; @media screen and (min-width: 1440px) { - min-width: $gutter * 4; + min-width: variables.$gutter * 4; } flex-shrink: 0; box-shadow: none; @@ -25,14 +27,14 @@ button, .button { border-style: solid; // -- overridden by specific utility buttons - background-color: $gray-200; - border-color: $gray-200; - color: $gray-900; + background-color: variables.$gray-200; + border-color: variables.$gray-200; + color: variables.$gray-900; // -- - font-family: $font-family-sans-serif; - font-size: $font-size-sssm; - font-weight: $font-weight-medium; + font-family: variables.$font-family-sans-serif; + font-size: variables.$font-size-sssm; + font-weight: variables.$font-weight-medium; text-transform: uppercase; line-height: 1; @@ -45,22 +47,22 @@ button, .button { // button states &:disabled, &.disabled { - color: $gray-800 !important; - background-color: $gray-600 !important; - border-color: $gray-600 !important; + color: variables.$gray-800 !important; + background-color: variables.$gray-600 !important; + border-color: variables.$gray-600 !important; pointer-events: none; } &:hover { - background-color: $gray-600; + background-color: variables.$gray-600; color: #FFF; outline: 0; } &:focus { outline: 0; - background-color: $gray-600; + background-color: variables.$gray-600; border-color: #fff; color: #FFF; } @@ -72,15 +74,15 @@ button, .button { } &.is-small { - height: $gutter * 1.5; + height: variables.$gutter * 1.5; padding-left: .5em; padding-right: .5em; - font-size: $font-size-sssm; + font-size: variables.$font-size-sssm; } &.is-dark { - background-color: $gray-700; - color: $gray-300; + background-color: variables.$gray-700; + color: variables.$gray-300; } &.is-loading-spinner { @@ -88,7 +90,7 @@ button, .button { pointer-events: none; &:after { position: absolute; - border-color: $gray-900; + border-color: variables.$gray-900; border-right-color: transparent; border-top-color: transparent; } @@ -100,7 +102,7 @@ button, .button { border: none; width: auto; min-width: initial; - color: $white; + color: variables.$white; font-size: 1rem; } } @@ -109,28 +111,28 @@ button, .button { // utility buttons .button { &-primary { - background-color: $white; - border-color: $white; - color: $black; + background-color: variables.$white; + border-color: variables.$white; + color: variables.$black; } &-secondary { - background-color: $gray-300; - border-color: $gray-300; - color: $black; + background-color: variables.$gray-300; + border-color: variables.$gray-300; + color: variables.$black; } &-outlined { background-color: transparent; - border-color: $white; - color: $white; + border-color: variables.$white; + color: variables.$white; &:disabled, &.disabled { } } &-outlined-white { background-color: transparent; - border-color: $black; - color: $black; + border-color: variables.$black; + color: variables.$black; &:hover { - border-color: $gray-600; + border-color: variables.$gray-600; } &:disabled, &.disabled { } @@ -138,14 +140,14 @@ button, .button { &-text { background-color: transparent; border-color: transparent; - color: $black; + color: variables.$black; &:disabled, &.disabled { } } &-text-white { background-color: transparent; border-color: transparent; - color: $white; + color: variables.$white; &:disabled, &.disabled { } } diff --git a/resources/styles/_columns.scss b/resources/styles/_columns.scss index 65db5dfb6..2072c0ca6 100644 --- a/resources/styles/_columns.scss +++ b/resources/styles/_columns.scss @@ -1,10 +1,12 @@ +@use "variables"; + // flex columns .columns { display: block; flex-wrap: wrap; - margin-left: -($gutter * .5); - margin-right: -($gutter * .5); - margin-top: -($gutter * .5); + margin-left: -(variables.$gutter * .5); + margin-right: -(variables.$gutter * .5); + margin-top: -(variables.$gutter * .5); @media screen and (min-width: 420px) { display: flex; } @@ -15,7 +17,7 @@ flex-basis: 0; flex-grow: 1; flex-shrink: 1; - padding: ($gutter * .5); + padding: (variables.$gutter * .5); &.is-1 { flex: none; flex-basis: 100%; diff --git a/resources/styles/_elements.scss b/resources/styles/_elements.scss index 5f5e097cf..1d3406a8b 100644 --- a/resources/styles/_elements.scss +++ b/resources/styles/_elements.scss @@ -1,7 +1,9 @@ +@use "variables"; + // generic full size backdrop .backdrop { display: none; - @extend .full-size-absolute; + @extend .full-size-absolute !optional; background-color: #000; opacity: .75; } @@ -13,14 +15,14 @@ justify-content: center; align-items: center; height: 2em; - margin-right: $gutter * .25; - margin-bottom: $gutter * .25; + margin-right: variables.$gutter * .25; + margin-bottom: variables.$gutter * .25; padding-left: .75em; padding-right: .75em; - background-color: $gray-600; + background-color: variables.$gray-600; border-radius: 4px; - color: $white; - font-size: $font-size-sssm; + color: variables.$white; + font-size: variables.$font-size-sssm; line-height: 1.5; white-space: nowrap; user-select: none; @@ -34,13 +36,13 @@ } &.is-black { - background-color: $black; - color: $gray-100; + background-color: variables.$black; + color: variables.$gray-100; } &.is-dark { - background-color: $gray-900; - color: $gray-100; + background-color: variables.$gray-900; + color: variables.$gray-100; } &.empty { @@ -56,7 +58,7 @@ &:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; - margin-left: $gutter * .25; + margin-left: variables.$gutter * .25; } &:not(:last-child) { border-bottom-right-radius: 0; @@ -73,11 +75,11 @@ justify-content: center; align-items: center; line-height: 0; - background-color: $white; + background-color: variables.$white; border-radius: 50%; - padding: $gutter * .75; - font-size: $font-size-sssm; - font-weight: $font-weight-black; + padding: variables.$gutter * .75; + font-size: variables.$font-size-sssm; + font-weight: variables.$font-weight-black; box-shadow: 0 0 2px #000; &:after { content: ''; @@ -92,8 +94,8 @@ position: relative; display: flex; flex-direction: column; - background-color: $white; - color: $black; + background-color: variables.$white; + color: variables.$black; box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); .box-body { flex-grow: 1; @@ -108,11 +110,11 @@ nav.pagination { white-space: nowrap; > div { &:not(:first-child) { - margin-left: $gutter; + margin-left: variables.$gutter; } &.page-size { - select { margin-left : $gutter * .5; } + select { margin-left : variables.$gutter * .5; } } &.pagination-buttons { @@ -122,7 +124,7 @@ nav.pagination { button { min-width: 2.5em; border-radius: 4px; - margin-left: $gutter * .5; + margin-left: variables.$gutter * .5; &:first-of-type { margin-left: 0; } &.current-page { @@ -140,8 +142,8 @@ nav.pagination { &:after { content: '…'; } - margin-left: $gutter * .5; - font-size: $font-size-llg; + margin-left: variables.$gutter * .5; + font-size: variables.$font-size-llg; } } } @@ -154,13 +156,13 @@ nav.pagination { position: relative; top: 2px; left: 8px; - background-color: $black; + background-color: variables.$black; border-radius: 50%; - width: $gutter; + width: variables.$gutter; text-align: center; - height: $gutter; - font-size: $font-size-sssm; - line-height: $gutter; + height: variables.$gutter; + font-size: variables.$font-size-sssm; + line-height: variables.$gutter; overflow: hidden; &.empty { opacity: .3; @@ -213,7 +215,7 @@ nav.pagination { flex-shrink: 0; justify-content: flex-start; align-items: center; - border-bottom-color: $gray-700; + border-bottom-color: variables.$gray-700; border-bottom-style: solid; border-bottom-width: 1px; } @@ -227,27 +229,27 @@ nav.pagination { vertical-align: top; margin-bottom: -1px; padding: .5em 1em; - border-bottom-color: $gray-700; + border-bottom-color: variables.$gray-700; border-bottom-style: solid; border-bottom-width: 1px; - color: $gray-500; + color: variables.$gray-500; } &.is-active a { - border-bottom-color: $gray-100; - color: $gray-100; + border-bottom-color: variables.$gray-100; + color: variables.$gray-100; } } } .h-tabs ~ .h-tabs-contents { - margin-top: $gutter * 1.5; + margin-top: variables.$gutter * 1.5; } .hr { - background-color: $gray-700; + background-color: variables.$gray-700; border: none; display: block; height: 1px; @@ -264,22 +266,22 @@ nav.pagination { .drop-area { position: relative; width: 100%; - min-height: $gutter * 5; + min-height: variables.$gutter * 5; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='3' stroke-dasharray='6' stroke-dashoffset='29' stroke-linecap='butt'/%3e%3c/svg%3e"); &.dragover { color: #fff; - background-color: $black; + background-color: variables.$black; font-size: 1.5em; } .upload-placeholder { - color: $gray-550; + color: variables.$gray-550; margin: auto; } .file-input { - @extend .full-size-absolute; + @extend .full-size-absolute !optional; opacity: 0; outline: 0; cursor: pointer; @@ -289,7 +291,7 @@ nav.pagination { .upload-item { width: 100%; & ~ .upload-item { - margin-top: $gutter; + margin-top: variables.$gutter; } .upload-item-header { @@ -301,7 +303,7 @@ nav.pagination { word-break: break-word; } button { - margin-left: $gutter * .5; + margin-left: variables.$gutter * .5; } } @@ -312,30 +314,30 @@ nav.pagination { .progress-bar { width: 100%; - margin: $gutter * .75 0 $gutter * .75; + margin: variables.$gutter * .75 0 variables.$gutter * .75; .progress-bar-status { - min-width: $gutter; + min-width: variables.$gutter; height: 2px; } .progress-bar-status.in-progress { - background-color: $gray-400; + background-color: variables.$gray-400; } .progress-bar-status.done { - background-color: $info; + background-color: variables.$info; } .progress-bar-status.error { - background-color: $error; + background-color: variables.$error; } .progress-bar-status.cancelled { - background-color: $gray-700; + background-color: variables.$gray-700; } } } } } .drop-area-double { - min-height: $gutter * 16; + min-height: variables.$gutter * 16; } .module-items-counter { diff --git a/resources/styles/_forms.scss b/resources/styles/_forms.scss index 9a1eb2fce..572e2ec8c 100644 --- a/resources/styles/_forms.scss +++ b/resources/styles/_forms.scss @@ -1,28 +1,30 @@ +@use "variables"; + /* buttons, and inputs are defined in mixins.scss */ .inverted { - background: $gray-900; - color: $white; + background: variables.$gray-900; + color: variables.$white; &:hover { - background: $white !important; - color: $gray-900 !important; + background: variables.$white !important; + color: variables.$gray-900 !important; } } -#{$text-inputs} { +#{variables.$text-inputs} { padding: 0 .5em; min-width: 4rem; - height: $gutter * 2; + height: variables.$gutter * 2; border: none; border-radius: 2px; - background-color: $gray-100; - font-family: $font-family-sans-serif; - font-size: $font-size-ssm; + background-color: variables.$gray-100; + font-family: variables.$font-family-sans-serif; + font-size: variables.$font-size-ssm; line-height: 1.5em; &:focus { outline: none; - box-shadow: inset 0 0 2px $black; + box-shadow: inset 0 0 2px variables.$black; } } @@ -31,26 +33,26 @@ textarea { min-width: 5rem; border-radius: 2px; border: none; - font-family: $font-family-sans-serif; + font-family: variables.$font-family-sans-serif; } select { - height: $gutter * 2; + height: variables.$gutter * 2; border-radius: 2px; border: none; - font-family: $font-family-sans-serif; + font-family: variables.$font-family-sans-serif; } label { &:not(:empty) { - margin-right: $gutter; + margin-right: variables.$gutter; } > input { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; } > input[type="radio"], > input[type="checkbox"] { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; } &.disabled { pointer-events: none; @@ -104,12 +106,12 @@ form { align-items: center; width: 18px; height: 18px; - color: $gray-550; + color: variables.$gray-550; font-size: 24px; cursor: pointer; &:hover { - color: $gray-900; + color: variables.$gray-900; } } } @@ -129,7 +131,7 @@ form { width: auto !important; height: auto !important; max-width: 15rem; - min-height: $gutter * 2; + min-height: variables.$gutter * 2; padding: 0 .5em !important; color: #000 !important; border-radius: 2px !important; @@ -208,22 +210,22 @@ form { .vue-treeselect--open-below .vue-treeselect__menu { margin-top: -2px !important; - border-top: 1px solid $gray-200 !important; + border-top: 1px solid variables.$gray-200 !important; border-bottom-left-radius: 2px !important; border-bottom-right-radius: 2px !important; } .vue-treeselect--open-above .vue-treeselect__menu { margin-bottom: -2px !important; - border-bottom: 1px solid $gray-200 !important; + border-bottom: 1px solid variables.$gray-200 !important; border-top-left-radius: 2px !important; border-top-right-radius: 2px !important; } .vue-treeselect__checkbox { - border-color: $gray-600 !important; + border-color: variables.$gray-600 !important; } .vue-treeselect__checkbox--checked { - background-color: $gray-600 !important; + background-color: variables.$gray-600 !important; } diff --git a/resources/styles/_forms_file.scss b/resources/styles/_forms_file.scss index 1e524b8ee..dd9399d86 100644 --- a/resources/styles/_forms_file.scss +++ b/resources/styles/_forms_file.scss @@ -1,10 +1,13 @@ -$file-border-color: $gray-600; +@use "sass:color"; +@use "variables"; + +$file-border-color: variables.$gray-600; $file-radius: 2px; -$file-cta-background-color: $gray-100; -$file-cta-color: $gray-600; -$file-cta-hover-color: $black; -$file-cta-active-color: $black; -$file-name-border-color: $gray-600; +$file-cta-background-color: variables.$gray-100; +$file-cta-color: variables.$gray-600; +$file-cta-hover-color: variables.$black; +$file-cta-active-color: variables.$black; +$file-name-border-color: variables.$gray-600; $file-name-border-style: solid; $file-name-border-width: 1px 1px 1px 0; $file-name-max-width: 24em; @@ -47,21 +50,21 @@ $file-name-max-width: 24em; &:hover { .file-cta { - background-color: darken($file-cta-background-color, 2.5%); + background-color: color.adjust($file-cta-background-color, $lightness: -2.5%); color: $file-cta-hover-color; } .file-name { - border-color: darken($file-name-border-color, 2.5%); + border-color: color.adjust($file-name-border-color, $lightness: -2.5%); } } &:active { .file-cta { - background-color: darken($file-cta-background-color, 5%); + background-color: color.adjust($file-cta-background-color, $lightness: -5%); color: $file-cta-active-color; } .file-name { - border-color: darken($file-name-border-color, 5%); + border-color: color.adjust($file-name-border-color, $lightness: -5%); } } } @@ -83,10 +86,10 @@ $file-name-max-width: 24em; position: relative; padding-left: 1em; padding-right: 1em; - height: $gutter * 2; + height: variables.$gutter * 2; border-color: $file-border-color; border-radius: $file-radius; - font-size: $font-size-sm; + font-size: variables.$font-size-sm; text-align: left; white-space: nowrap; } @@ -113,8 +116,8 @@ $file-name-max-width: 24em; &:before { content: "-"; content: attr(data-empty-label); - font-size: $font-size-sssm; - color: $gray-600; + font-size: variables.$font-size-sssm; + color: variables.$gray-600; } } } @@ -139,9 +142,9 @@ $file-name-max-width: 24em; display: inline-block; flex-grow: 0; flex-shrink: 0; - width: $gutter * 2; - height: $gutter * 2; - margin-left: $gutter * .25; + width: variables.$gutter * 2; + height: variables.$gutter * 2; + margin-left: variables.$gutter * .25; font-size: 0; outline: 0; @@ -151,7 +154,7 @@ $file-name-max-width: 24em; &:after, &:before { content: ""; display: block; - background-color: $gray-300; + background-color: variables.$gray-300; position: absolute; left: 50%; top: 50%; diff --git a/resources/styles/_layout.scss b/resources/styles/_layout.scss index b5b6f8100..f89502134 100644 --- a/resources/styles/_layout.scss +++ b/resources/styles/_layout.scss @@ -1,18 +1,20 @@ +@use "variables"; + // main grids main.layout { position: relative; width: 100%; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); // iOS adjust with script and fallback - padding: 0 $gutter; + padding: 0 variables.$gutter; @media (min-width: 568px) { display: grid; - grid-gap: 0 $gutter; + grid-gap: 0 variables.$gutter; grid-template-areas: "sidebar content-header" "sidebar content-body" "sidebar footer"; - grid-template-columns: $dashboard-item-width auto; + grid-template-columns: variables.$dashboard-item-width auto; .view-dashboard & { grid-template-rows: auto 1fr auto; @@ -22,7 +24,7 @@ main.layout { } @media (min-width: 1024px) { - grid-template-rows: ($dashboard-item-height + $gutter) auto; + grid-template-rows: (variables.$dashboard-item-height + variables.$gutter) auto; } > .layout-sidebar { grid-area: sidebar; } @@ -36,7 +38,7 @@ main.layout { > .layout-sidebar, > .layout-footer { max-width: 100%; overflow-x: hidden; } > .layout-content { max-width: 100%; overflow-x: hidden; } > .layout-header + .layout-content { - margin-top: $gutter; + margin-top: variables.$gutter; @media screen and (min-width: 1024px) { margin-top: 0; @@ -47,7 +49,7 @@ main.layout { // on panel show / hide -body:not(.view-login) main.layout > .layout-content { background-color: $defaultBackground; } // covers sidebar on translate +body:not(.view-login) main.layout > .layout-content { background-color: variables.$defaultBackground; } // covers sidebar on translate main.layout { > .layout-header, > .layout-content { @@ -60,7 +62,7 @@ main.layout { .panel-is-open & { > .layout-header, > .layout-content { - transform: translateX(-$dashboard-item-width - $gutter); + transform: translateX(-(variables.$dashboard-item-width) - variables.$gutter); } > .layout-sidebar { opacity: 0; diff --git a/resources/styles/_non-production.scss b/resources/styles/_non-production.scss index 375536f24..b48cd5f9a 100644 --- a/resources/styles/_non-production.scss +++ b/resources/styles/_non-production.scss @@ -1,3 +1,5 @@ +@use "variables"; + // non production environemnt .cake-error { position: relative; @@ -9,7 +11,7 @@ white-space: pre-wrap; word-wrap: break-word; background: #000; - color: $gray-300; + color: variables.$gray-300; font-size: 12px; a { diff --git a/resources/styles/_utility_classes.scss b/resources/styles/_utility_classes.scss index dd54f5642..1bae20430 100644 --- a/resources/styles/_utility_classes.scss +++ b/resources/styles/_utility_classes.scss @@ -1,3 +1,6 @@ +@use "mixins"; +@use "variables"; + // utility classes .full-size-absolute { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 !important; } @@ -8,7 +11,7 @@ .cursor-pointer { cursor: pointer; } -.is-text-hidden { @include hide-text(); } +.is-text-hidden { @include mixins.hide-text(); } .is-block { display: block;} @@ -20,17 +23,17 @@ // typography -.has-text-size-base { font-size: $font-size-base; } // 16px -.has-text-size-large { font-size: $font-size-lg; } // 18px -.has-text-size-larger { font-size: $font-size-llg; } // 20px -.has-text-size-largest { font-size: $font-size-lllg; } // 24px -.has-text-size-small { font-size: $font-size-sm; } // 14px -.has-text-size-smaller { font-size: $font-size-ssm; } // 13px -.has-text-size-smallest { font-size: $font-size-sssm; } // 12px - -.has-font-weight-light { font-weight: $font-weight-light; } -.has-font-weight-normal { font-weight: $font-weight-normal; } -.has-font-weight-bold { font-weight: $font-weight-bold; } +.has-text-size-base { font-size: variables.$font-size-base; } // 16px +.has-text-size-large { font-size: variables.$font-size-lg; } // 18px +.has-text-size-larger { font-size: variables.$font-size-llg; } // 20px +.has-text-size-largest { font-size: variables.$font-size-lllg; } // 24px +.has-text-size-small { font-size: variables.$font-size-sm; } // 14px +.has-text-size-smaller { font-size: variables.$font-size-ssm; } // 13px +.has-text-size-smallest { font-size: variables.$font-size-sssm; } // 12px + +.has-font-weight-light { font-weight: variables.$font-weight-light; } +.has-font-weight-normal { font-weight: variables.$font-weight-normal; } +.has-font-weight-bold { font-weight: variables.$font-weight-bold; } .has-text-transform-upper { text-transform: uppercase; } .has-text-transform-lower { text-transform: lowercase; } @@ -45,111 +48,111 @@ // colors .has-background-transparent { background-color: transparent !important; } -.has-background-white { background-color: $white !important; } -.has-background-black { background-color: $black !important; } -.has-background-gray-100 { background-color: $gray-100 !important; } -.has-background-gray-200 { background-color: $gray-200 !important; } -.has-background-gray-300 { background-color: $gray-300 !important; } -.has-background-gray-400 { background-color: $gray-400 !important; } -.has-background-gray-500 { background-color: $gray-500 !important; } -.has-background-gray-550 { background-color: $gray-550 !important; } -.has-background-gray-600 { background-color: $gray-600 !important; } -.has-background-gray-700 { background-color: $gray-700 !important; } -.has-background-gray-800 { background-color: $gray-800 !important; } -.has-background-gray-900 { background-color: $gray-900 !important; } -.has-background-gray-950 { background-color: $gray-950 !important; } -.has-background-danger { background-color: $danger !important; } -.has-background-light-danger { background-color: $light-danger !important; } -.has-background-info { background-color: $info !important; } +.has-background-white { background-color: variables.$white !important; } +.has-background-black { background-color: variables.$black !important; } +.has-background-gray-100 { background-color: variables.$gray-100 !important; } +.has-background-gray-200 { background-color: variables.$gray-200 !important; } +.has-background-gray-300 { background-color: variables.$gray-300 !important; } +.has-background-gray-400 { background-color: variables.$gray-400 !important; } +.has-background-gray-500 { background-color: variables.$gray-500 !important; } +.has-background-gray-550 { background-color: variables.$gray-550 !important; } +.has-background-gray-600 { background-color: variables.$gray-600 !important; } +.has-background-gray-700 { background-color: variables.$gray-700 !important; } +.has-background-gray-800 { background-color: variables.$gray-800 !important; } +.has-background-gray-900 { background-color: variables.$gray-900 !important; } +.has-background-gray-950 { background-color: variables.$gray-950 !important; } +.has-background-danger { background-color: variables.$danger !important; } +.has-background-light-danger { background-color: variables.$light-danger !important; } +.has-background-info { background-color: variables.$info !important; } .has-text-transparent { color: transparent !important; } -.has-text-white { color: $white !important; } -.has-text-black { color: $black !important; } -.has-text-gray-100 { color: $gray-100 !important; } -.has-text-gray-200 { color: $gray-200 !important; } -.has-text-gray-300 { color: $gray-300 !important; } -.has-text-gray-400 { color: $gray-400 !important; } -.has-text-gray-500 { color: $gray-500 !important; } -.has-text-gray-550 { color: $gray-550 !important; } -.has-text-gray-600 { color: $gray-600 !important; } -.has-text-gray-700 { color: $gray-700 !important; } -.has-text-gray-800 { color: $gray-800 !important; } -.has-text-gray-900 { color: $gray-900 !important; } -.has-text-danger { color: $danger !important; } -.has-text-info { color: $info !important; } +.has-text-white { color: variables.$white !important; } +.has-text-black { color: variables.$black !important; } +.has-text-gray-100 { color: variables.$gray-100 !important; } +.has-text-gray-200 { color: variables.$gray-200 !important; } +.has-text-gray-300 { color: variables.$gray-300 !important; } +.has-text-gray-400 { color: variables.$gray-400 !important; } +.has-text-gray-500 { color: variables.$gray-500 !important; } +.has-text-gray-550 { color: variables.$gray-550 !important; } +.has-text-gray-600 { color: variables.$gray-600 !important; } +.has-text-gray-700 { color: variables.$gray-700 !important; } +.has-text-gray-800 { color: variables.$gray-800 !important; } +.has-text-gray-900 { color: variables.$gray-900 !important; } +.has-text-danger { color: variables.$danger !important; } +.has-text-info { color: variables.$info !important; } .has-border-transparent { border-color: transparent !important; } -.has-border-white { border-color: $white !important; } -.has-border-black { border-color: $black !important; } -.has-border-gray-100 { border-color: $gray-100 !important; } -.has-border-gray-200 { border-color: $gray-200 !important; } -.has-border-gray-300 { border-color: $gray-300 !important; } -.has-border-gray-400 { border-color: $gray-400 !important; } -.has-border-gray-500 { border-color: $gray-500 !important; } -.has-border-gray-550 { border-color: $gray-550 !important; } -.has-border-gray-600 { border-color: $gray-600 !important; } -.has-border-gray-700 { border-color: $gray-700 !important; } -.has-border-gray-800 { border-color: $gray-800 !important; } -.has-border-gray-900 { border-color: $gray-900 !important; } -.has-border-danger { border-color: $danger !important; } -.has-border-info { border-color: $info !important; } +.has-border-white { border-color: variables.$white !important; } +.has-border-black { border-color: variables.$black !important; } +.has-border-gray-100 { border-color: variables.$gray-100 !important; } +.has-border-gray-200 { border-color: variables.$gray-200 !important; } +.has-border-gray-300 { border-color: variables.$gray-300 !important; } +.has-border-gray-400 { border-color: variables.$gray-400 !important; } +.has-border-gray-500 { border-color: variables.$gray-500 !important; } +.has-border-gray-550 { border-color: variables.$gray-550 !important; } +.has-border-gray-600 { border-color: variables.$gray-600 !important; } +.has-border-gray-700 { border-color: variables.$gray-700 !important; } +.has-border-gray-800 { border-color: variables.$gray-800 !important; } +.has-border-gray-900 { border-color: variables.$gray-900 !important; } +.has-border-danger { border-color: variables.$danger !important; } +.has-border-info { border-color: variables.$info !important; } .has-border-none { border: none !important; } // spacing .m-0 { margin: 0 !important; } -.m-1 { margin: $gutter !important; } +.m-1 { margin: variables.$gutter !important; } -.mx-025 { margin-left: $gutter * .25; margin-right: $gutter * .25; } -.mx-05 { margin-left: $gutter * .5; margin-right: $gutter * .5; } -.mx-1 { margin-left: $gutter; margin-right: $gutter; } -.mx-2 { margin-left: $gutter * 2; margin-right: $gutter * 2; } -.my-025 { margin-top: $gutter * .25; margin-bottom: $gutter * .25; } -.my-05 { margin-top: $gutter * .5; margin-bottom: $gutter * .5; } -.my-1 { margin-top: $gutter; margin-bottom: $gutter; } -.my-2 { margin-top: $gutter * 2; margin-bottom: $gutter * 2; } +.mx-025 { margin-left: variables.$gutter * .25; margin-right: variables.$gutter * .25; } +.mx-05 { margin-left: variables.$gutter * .5; margin-right: variables.$gutter * .5; } +.mx-1 { margin-left: variables.$gutter; margin-right: variables.$gutter; } +.mx-2 { margin-left: variables.$gutter * 2; margin-right: variables.$gutter * 2; } +.my-025 { margin-top: variables.$gutter * .25; margin-bottom: variables.$gutter * .25; } +.my-05 { margin-top: variables.$gutter * .5; margin-bottom: variables.$gutter * .5; } +.my-1 { margin-top: variables.$gutter; margin-bottom: variables.$gutter; } +.my-2 { margin-top: variables.$gutter * 2; margin-bottom: variables.$gutter * 2; } .mt-0 { margin-top: 0 !important; } -.mt-025 { margin-top: $gutter * .25; } -.mt-05 { margin-top: $gutter * .5; } -.mt-075 { margin-top: $gutter * .75; } -.mt-1 { margin-top: $gutter; } -.mt-15 { margin-top: $gutter * 1.5; } -.mt-2 { margin-top: $gutter * 2; } -.mt-25 { margin-top: $gutter * 2.5; } - -.mr-05 { margin-right: $gutter * .5; } -.mr-1 { margin-right: $gutter; } -.mr-2 { margin-right: $gutter * 2; } -.ml-05 { margin-left: $gutter * .5; } -.ml-1 { margin-left: $gutter; } -.ml-2 { margin-left: $gutter * 2; } +.mt-025 { margin-top: variables.$gutter * .25; } +.mt-05 { margin-top: variables.$gutter * .5; } +.mt-075 { margin-top: variables.$gutter * .75; } +.mt-1 { margin-top: variables.$gutter; } +.mt-15 { margin-top: variables.$gutter * 1.5; } +.mt-2 { margin-top: variables.$gutter * 2; } +.mt-25 { margin-top: variables.$gutter * 2.5; } + +.mr-05 { margin-right: variables.$gutter * .5; } +.mr-1 { margin-right: variables.$gutter; } +.mr-2 { margin-right: variables.$gutter * 2; } +.ml-05 { margin-left: variables.$gutter * .5; } +.ml-1 { margin-left: variables.$gutter; } +.ml-2 { margin-left: variables.$gutter * 2; } .mb-0 { margin-bottom: 0 !important; } -.mb-05 { margin-bottom: $gutter * .5; } -.mb-1 { margin-bottom: $gutter; } -.mb-15 { margin-bottom: $gutter * 1.5; } -.mb-2 { margin-bottom: $gutter * 2; } -.mb-25 { margin-bottom: $gutter * 2.5; } - -.p-025 { padding: $gutter * .25; } -.p-05 { padding: $gutter * .5; } -.p-1 { padding: $gutter; } -.px-05 { padding-left: $gutter * .5; padding-right: $gutter * .5; } -.px-1 { padding-left: $gutter; padding-right: $gutter; } -.px-2 { padding-left: $gutter * 2; padding-right: $gutter * 2; } -.py-05 { padding-top: $gutter * .5; padding-bottom: $gutter * .5; } -.py-1 { padding-top: $gutter; padding-bottom: $gutter; } -.py-2 { padding-top: $gutter * 2; padding-bottom: $gutter * 2; } - -.pt-05 { padding-top: $gutter * .5; } -.pt-1 { padding-top: $gutter; } -.pt-2 { padding-top: $gutter * 2; } -.pt-25 { padding-top: $gutter * 2.5; } -.pb-05 { padding-bottom: $gutter * .5; } -.pb-1 { padding-bottom: $gutter; } -.pb-2 { padding-bottom: $gutter * 2; } -.pb-25 { padding-bottom: $gutter * 2.5; } +.mb-05 { margin-bottom: variables.$gutter * .5; } +.mb-1 { margin-bottom: variables.$gutter; } +.mb-15 { margin-bottom: variables.$gutter * 1.5; } +.mb-2 { margin-bottom: variables.$gutter * 2; } +.mb-25 { margin-bottom: variables.$gutter * 2.5; } + +.p-025 { padding: variables.$gutter * .25; } +.p-05 { padding: variables.$gutter * .5; } +.p-1 { padding: variables.$gutter; } +.px-05 { padding-left: variables.$gutter * .5; padding-right: variables.$gutter * .5; } +.px-1 { padding-left: variables.$gutter; padding-right: variables.$gutter; } +.px-2 { padding-left: variables.$gutter * 2; padding-right: variables.$gutter * 2; } +.py-05 { padding-top: variables.$gutter * .5; padding-bottom: variables.$gutter * .5; } +.py-1 { padding-top: variables.$gutter; padding-bottom: variables.$gutter; } +.py-2 { padding-top: variables.$gutter * 2; padding-bottom: variables.$gutter * 2; } + +.pt-05 { padding-top: variables.$gutter * .5; } +.pt-1 { padding-top: variables.$gutter; } +.pt-2 { padding-top: variables.$gutter * 2; } +.pt-25 { padding-top: variables.$gutter * 2.5; } +.pb-05 { padding-bottom: variables.$gutter * .5; } +.pb-1 { padding-bottom: variables.$gutter; } +.pb-2 { padding-bottom: variables.$gutter * 2; } +.pb-25 { padding-bottom: variables.$gutter * 2.5; } // fixed height and width .hw-30 { height: 30px; width: 30px; } @@ -240,8 +243,8 @@ table.inside-bordered { border-collapse: collapse; th, td { - border: 1px solid $gray-600; - padding: $gutter * 0.5; + border: 1px solid variables.$gray-600; + padding: variables.$gutter * 0.5; } } diff --git a/resources/styles/_variables.scss b/resources/styles/_variables.scss index b2e510356..cf29d971c 100644 --- a/resources/styles/_variables.scss +++ b/resources/styles/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:map"; /* ** FONTS & TYPOGRAPHY */ @@ -53,7 +54,7 @@ $gray-strange: #3E4143 !default; $black: #000 !default; $grays: () !default; -$grays: map-merge(( +$grays: map.merge(( "100": $gray-100, "200": $gray-200, "300": $gray-300, diff --git a/templates/Element/FilterBox/filter_box.scss b/templates/Element/FilterBox/filter_box.scss index 7d6788973..72ecebc5c 100644 --- a/templates/Element/FilterBox/filter_box.scss +++ b/templates/Element/FilterBox/filter_box.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + .filter-box { display: flex; flex-direction: column; @@ -25,16 +27,16 @@ margin-bottom: 0 !important; > * { - margin-bottom: $gutter; + margin-bottom: variables.$gutter; } > *:not(:last-child) { - margin-right: $gutter; + margin-right: variables.$gutter; } } .more-filters { - margin-top: $gutter; + margin-top: variables.$gutter; } .filter-container { @@ -45,7 +47,7 @@ display: flex; input[type="text"] { width: 100%; - min-width: $gutter * 12; + min-width: variables.$gutter * 12; } } @@ -57,7 +59,7 @@ label { display: inline-flex; align-items: center; - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; &:first-letter { text-transform: uppercase; @@ -72,7 +74,7 @@ display: flex; > * + * { - margin-left: $gutter * .5; + margin-left: variables.$gutter * .5; } input { @@ -94,7 +96,7 @@ .descendants-filter { display: flex; align-items: center; - margin-left: $gutter; + margin-left: variables.$gutter; } } } diff --git a/templates/Element/Form/calendar.scss b/templates/Element/Form/calendar.scss index 799199fac..3bee953cc 100644 --- a/templates/Element/Form/calendar.scss +++ b/templates/Element/Form/calendar.scss @@ -1,18 +1,20 @@ +@use "../../../resources/styles/variables"; + .date-ranges-list { display: flex; flex-direction: column; - margin-bottom: $gutter; + margin-bottom: variables.$gutter; .date-ranges-item { display: grid; grid-template-columns: 250px 250px 1fr 1fr 1fr; - gap: $gutter; - margin-bottom: $gutter * .5; + gap: variables.$gutter; + margin-bottom: variables.$gutter * .5; align-items: flex-end; .weekdays { grid-column-start: 1; - grid-column-gap: $gutter * .5; + grid-column-gap: variables.$gutter * .5; grid-column-end: 5; label { diff --git a/templates/Element/Form/categories.scss b/templates/Element/Form/categories.scss index 5c3c654bf..2f2f80c86 100644 --- a/templates/Element/Form/categories.scss +++ b/templates/Element/Form/categories.scss @@ -1,6 +1,8 @@ +@use "../../../resources/styles/variables"; + .categories-container { .categories { - margin: $gutter 0; + margin: variables.$gutter 0; .select { columns: 2 auto; @@ -13,10 +15,10 @@ } + .categories { - margin-top: $gutter * 2; + margin-top: variables.$gutter * 2; &:last-child { - margin-bottom: $gutter * 4; + margin-bottom: variables.$gutter * 4; } } } diff --git a/templates/Element/Form/form.scss b/templates/Element/Form/form.scss index 5f1297a18..8562fe5af 100644 --- a/templates/Element/Form/form.scss +++ b/templates/Element/Form/form.scss @@ -1,10 +1,12 @@ +@use "../../../resources/styles/variables"; + .object-form { .fieldset > .tab-container, .fieldset > .container { - padding: $gutter 0 0 0; + padding: variables.$gutter 0 0 0; > div { - margin: $gutter 0; + margin: variables.$gutter 0; &:first-child { margin: 0; @@ -12,8 +14,8 @@ } .history-field { - border: dashed $gray-600 1px; - padding: $gutter * .5; + border: dashed variables.$gray-600 1px; + padding: variables.$gutter * .5; } .history-field > label { @@ -22,14 +24,14 @@ .input.title, .input.uri { input[type=text] { - font-size: $font-size-llg; + font-size: variables.$font-size-llg; } } @media screen and (min-width: 1024px) { grid-template-columns: repeat( auto-fit, minmax(212px, 1fr) ); display: grid; - grid-gap: $gutter * 1.5 $gutter; + grid-gap: variables.$gutter * 1.5 variables.$gutter; > div { margin: 0; @@ -45,15 +47,15 @@ } .create-media-box { - padding: $gutter * .5 $gutter $gutter * 1.25; - margin-bottom: $gutter * 1.5; - background-color: $gray-800; + padding: variables.$gutter * .5 variables.$gutter variables.$gutter * 1.25; + margin-bottom: variables.$gutter * 1.5; + background-color: variables.$gray-800; border-radius: 4px; } - #{$text-inputs}, textarea { + #{variables.$text-inputs}, textarea { width: 100%; - background-color: $gray-200; + background-color: variables.$gray-200; &:disabled { opacity: 0.65; @@ -61,9 +63,9 @@ } } - #{$text-inputs} { + #{variables.$text-inputs} { &.input-narrow { - max-width: 4 * $gutter; + max-width: 4 * variables.$gutter; } } @@ -74,7 +76,7 @@ .select { select { - min-width: 12 * $gutter; + min-width: 12 * variables.$gutter; } label { cursor: pointer; @@ -84,18 +86,18 @@ label { display: block; flex: 1 0 100%; - line-height: $gutter * 1.75; + line-height: variables.$gutter * 1.75; } .stream { display: flex; } .thumb { - background-color: $gray-400; + background-color: variables.$gray-400; display: inline-block; a { display: block; - background-image: linear-gradient(45deg, $gray-300 25%, transparent 25%), linear-gradient(-45deg, $gray-300 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $gray-300 75%), linear-gradient(-45deg, transparent 75%, $gray-300 75%); + background-image: linear-gradient(45deg, variables.$gray-300 25%, transparent 25%), linear-gradient(-45deg, variables.$gray-300 25%, transparent 25%), linear-gradient(45deg, transparent 75%, variables.$gray-300 75%), linear-gradient(-45deg, transparent 75%, variables.$gray-300 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; img { @@ -126,7 +128,7 @@ label:not(:first-child) { flex: 0 0 auto; - margin-right: $gutter; + margin-right: variables.$gutter; cursor: pointer; } } @@ -139,7 +141,7 @@ height: 2.125rem; max-width: auto; min-width: auto; - border: 1px solid $gray-900; + border: 1px solid variables.$gray-900; text-align: center; padding:0; } diff --git a/templates/Element/Form/history.scss b/templates/Element/Form/history.scss index 624e2dd3e..2ab125b01 100644 --- a/templates/Element/Form/history.scss +++ b/templates/Element/Form/history.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + .history { .history-content { $module-color: var(--module-color); @@ -42,7 +44,7 @@ &:last-of-type { padding-bottom: 1rem; - border-image: linear-gradient(to bottom, $gray-600 0 1.4rem, transparent 1.4rem 100%) 1; + border-image: linear-gradient(to bottom, variables.$gray-600 0 1.4rem, transparent 1.4rem 100%) 1; } } } diff --git a/templates/Element/Form/locations.scss b/templates/Element/Form/locations.scss index c15fbfefd..c0bdbbd70 100644 --- a/templates/Element/Form/locations.scss +++ b/templates/Element/Form/locations.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + .locations { input, .order { @@ -18,17 +20,17 @@ .get-coordinates { border-bottom-left-radius: 0; border-top-left-radius: 0; - background-color: $defaultBackground; - border-color: $white; - color: $white; + background-color: variables.$defaultBackground; + border-color: variables.$white; + color: variables.$white; } } button { text-transform: uppercase; - background-color: $defaultBackground; - border-color: $white; - color: $white; + background-color: variables.$defaultBackground; + border-color: variables.$white; + color: variables.$white; } .location-form { @@ -50,16 +52,16 @@ ul { margin: 0; - background-color: $white; + background-color: variables.$white; max-height: 15em; overflow: auto; padding: 0 0.5rem; li { list-style-type: none; - color: $defaultBackground; + color: variables.$defaultBackground; padding: 0 0.5rem; - border-bottom: 1px solid $gray-500; + border-bottom: 1px solid variables.$gray-500; } } @@ -89,7 +91,7 @@ } .autocomplete-title-result, .autocomplete-address-result { - border-top: 1px solid $white; + border-top: 1px solid variables.$white; padding: 1rem; background: transparent; } @@ -98,7 +100,7 @@ padding: 1rem; text-transform: uppercase; font-size: 0.75rem; - background: $white; + background: variables.$white; } .location-data { diff --git a/templates/Element/Form/map.scss b/templates/Element/Form/map.scss index 7e6c82c6e..f3681ac16 100644 --- a/templates/Element/Form/map.scss +++ b/templates/Element/Form/map.scss @@ -1,6 +1,8 @@ +@use "../../../resources/styles/variables"; + .map-container { - min-height: 18 * $gutter; - color: $gray-950; + min-height: 18 * variables.$gutter; + color: variables.$gray-950; user-select: none; position: relative; @@ -34,16 +36,16 @@ z-index:1; } .mapboxgl-compare .compare-swiper-vertical { - background-color: $gray-800; + background-color: variables.$gray-800; box-shadow: inset 0 0 0 2px #fff; display: inline-block; - border-radius: $gutter * .5; + border-radius: variables.$gutter * .5; position: absolute; - width: $gutter * 3; - height: $gutter * 2; + width: variables.$gutter * 3; + height: variables.$gutter * 2; bottom: 15%; - left: -$gutter * 1.5; - margin: -$gutter * 1.5 1px 0; + left: -(variables.$gutter) * 1.5; + margin: -(variables.$gutter) * 1.5 1px 0; color: #fff; cursor: ew-resize; background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+); diff --git a/templates/Element/Form/relations.scss b/templates/Element/Form/relations.scss index d648e955d..0910729b3 100644 --- a/templates/Element/Form/relations.scss +++ b/templates/Element/Form/relations.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + .relation-view { .related-list-container { .columns { @@ -172,8 +174,8 @@ } header h1 { - min-height: $font-size-lg * 2; - padding-right: $gutter * .75; + min-height: variables.$font-size-lg * 2; + padding-right: variables.$gutter * .75; word-break: break-word; line-height: 1.25em;; } @@ -184,8 +186,8 @@ .priority { position: absolute; - top: $gutter * .5; - left: $gutter * .5; + top: variables.$gutter * .5; + left: variables.$gutter * .5; z-index: 2; } @@ -194,10 +196,10 @@ width: 100%; height: 0; padding-bottom: 63%; // 16 / 9 56% - background-color: $gray-100; + background-color: variables.$gray-100; pointer-events: none; figure { - @extend .full-size-absolute; + @extend .full-size-absolute !optional; font-size: 2.5rem; // icons img { display: block; @@ -225,7 +227,7 @@ article { //box-shadow: 0 0 0 3px var(--box-shadow-color); .badge { - padding: $gutter * .5; + padding: variables.$gutter * .5; border: none; letter-spacing: 1px; } @@ -233,16 +235,16 @@ } .ribbon { position: absolute; - top: $gutter * .5; - right: -$gutter * .5; + top: variables.$gutter * .5; + right: -(variables.$gutter) * .5; z-index: 2; display: block; color: #fff; background-color: #000; - font-size: $font-size-sssm; - font-weight: $font-weight-black; + font-size: variables.$font-size-sssm; + font-weight: variables.$font-weight-black; text-transform: uppercase; - padding: $gutter * 0.25 $gutter $gutter * 0.25 $gutter; + padding: variables.$gutter * 0.25 variables.$gutter variables.$gutter * 0.25 variables.$gutter; } .in-data-list { background-color: transparent !important; @@ -264,7 +266,7 @@ footer { position: sticky; - background-color: $gray-800; + background-color: variables.$gray-800; bottom: 0; left: 0; display: flex; @@ -284,7 +286,7 @@ .main-panel-container .edit-relation { - @extend %relation-panel-common; + @extend %relation-panel-common !optional; label { display: flex; flex-direction: column; @@ -295,7 +297,7 @@ } } - #{$text-inputs}, select { + #{variables.$text-inputs}, select { &:not(.input-narrow) { min-width: 12rem; } @@ -303,7 +305,7 @@ } .main-panel-container .relations-add { - @extend %relation-panel-common; + @extend %relation-panel-common !optional; .columns { &[data-list='true'] { @@ -447,15 +449,15 @@ justify-content: center; align-items: center; position: absolute; - width: $gutter * 2.25; - height: $gutter * 2.25; - top: $gutter * .5; - left: $gutter * .5; + width: variables.$gutter * 2.25; + height: variables.$gutter * 2.25; + top: variables.$gutter * .5; + left: variables.$gutter * .5; border: 2px solid white; border-radius: 50%; - background-color: $info; + background-color: variables.$info; color: #fff; - font-weight: $font-weight-black; + font-weight: variables.$font-weight-black; } } } diff --git a/templates/Element/Form/trees.scss b/templates/Element/Form/trees.scss index 18c69c9fc..19f5b6cf4 100644 --- a/templates/Element/Form/trees.scss +++ b/templates/Element/Form/trees.scss @@ -1,10 +1,12 @@ +@use "../../../resources/styles/variables"; + .tree-view-node { - color: $gray-100; - padding: 0 $gutter * .5; + color: variables.$gray-100; + padding: 0 variables.$gutter * .5; line-height: 1; &.is-root { - border-bottom: solid 1px $gray-800; + border-bottom: solid 1px variables.$gray-800; } .node-element { @@ -15,28 +17,28 @@ &[data-status='draft'], &[data-status='off'] { - color: $gray-500; + color: variables.$gray-500; } > label.node-label { flex: none !important; - margin-right: $gutter; + margin-right: variables.$gutter; color: inherit; - line-height: $gutter * 2; + line-height: variables.$gutter * 2; cursor: pointer; > input[type='checkbox'], > input[type='radio'] { - margin-top: -$gutter * .125; - margin-right: $gutter * .5; + margin-top: -(variables.$gutter) * .125; + margin-right: variables.$gutter * .5; vertical-align: middle; } } > a { display: inline-block; - padding: $gutter * .5 $gutter * 1.5; - margin-left: $gutter; + padding: variables.$gutter * .5 variables.$gutter * 1.5; + margin-left: variables.$gutter; vertical-align: middle; text-transform: uppercase; border: solid 1px currentColor; @@ -58,7 +60,7 @@ .tree-param { position: relative; - margin: $gutter * .25 $gutter * .5 $gutter * .25 0; + margin: variables.$gutter * .25 variables.$gutter * .5 variables.$gutter * .25 0; input { position: absolute; @@ -70,7 +72,7 @@ appearance: none; &:checked + label { - color: $white; + color: variables.$white; background: var(--color-module, #000); border-color: transparent; } @@ -81,7 +83,7 @@ align-items: center; margin: 0; padding: 0.25em 0.5em; - color: $gray-500; + color: variables.$gray-500; line-height: 1 !important; border-radius: 2em; border: solid 1px currentColor; @@ -91,7 +93,7 @@ > button { margin: 0; - min-width: $gutter * 2; + min-width: variables.$gutter * 2; color: currentColor; background: transparent; border: 0; @@ -115,10 +117,10 @@ .node-element ~ .node-children { &:not(:empty) { - margin-top: -$gutter; - margin-left: 3 * $gutter * .125; - padding-top: $gutter; - padding-left: $gutter * .5; + margin-top: -(variables.$gutter); + margin-left: 3 * variables.$gutter * .125; + padding-top: variables.$gutter; + padding-left: variables.$gutter * .5; border-left: solid 1px rgba(255, 255, 255, 0.25); } } diff --git a/templates/Element/Menu/colophon.scss b/templates/Element/Menu/colophon.scss index 9657e3304..de0d28728 100644 --- a/templates/Element/Menu/colophon.scss +++ b/templates/Element/Menu/colophon.scss @@ -1,7 +1,9 @@ +@use "../../../resources/styles/variables"; + .menu-colophon { - padding: $gutter * 1.5 0 0; + padding: variables.$gutter * 1.5 0 0; border-top: 1px solid #495057; - color: $gray-500; + color: variables.$gray-500; font-size: 12px; font-weight: 100; diff --git a/templates/Element/Menu/menu.scss b/templates/Element/Menu/menu.scss index 77daa985d..20977e238 100644 --- a/templates/Element/Menu/menu.scss +++ b/templates/Element/Menu/menu.scss @@ -1,18 +1,20 @@ +@use "../../../resources/styles/variables"; + .layout-header { .menu-bar { display: grid; - column-gap: $gutter; + column-gap: variables.$gutter; grid-template-columns: 1fr auto; nav[role="menu"] { display: grid; - row-gap: $gutter * .5; - grid-template-columns: repeat(auto-fill, $gutter * 2.5); + row-gap: variables.$gutter * .5; + grid-template-columns: repeat(auto-fill, variables.$gutter * 2.5); .menu-item-label { display: none; } @media screen and (min-width: 1024px) { - grid-template-columns: repeat(auto-fill, $gutter * 3); + grid-template-columns: repeat(auto-fill, variables.$gutter * 3); .menu-item-label { display: block; } .menu-item-short-label { display: none; } } @@ -20,16 +22,16 @@ .menu-item { display: flex; flex-direction: column; - padding-top: $gutter; + padding-top: variables.$gutter; &-color-bar { - height: $gutter * .625; - background-color: $gray-700; + height: variables.$gutter * .625; + background-color: variables.$gray-700; } &-label, &-short-label { - margin-top: $gutter * .25; - font-size: $font-size-smallest; + margin-top: variables.$gutter * .25; + font-size: variables.$font-size-smallest; letter-spacing: .5px; text-transform: lowercase; } @@ -37,7 +39,7 @@ &:hover, &.current { padding-top: 0; .menu-item-color-bar { - height: $gutter + $gutter * .625; + height: variables.$gutter + variables.$gutter * .625; } } } @@ -50,13 +52,13 @@ .popup { display: flex; position: absolute; - top: $gutter * 4; + top: variables.$gutter * 4; right: 0; button { min-width: 38px; - margin-left: $gutter * .5; - font-size: $font-size-ssm; + margin-left: variables.$gutter * .5; + font-size: variables.$font-size-ssm; } } } diff --git a/templates/Element/Menu/sidebar.scss b/templates/Element/Menu/sidebar.scss index 4f7e96913..d60209fe9 100644 --- a/templates/Element/Menu/sidebar.scss +++ b/templates/Element/Menu/sidebar.scss @@ -1,11 +1,13 @@ +@use "../../../resources/styles/variables"; + .app-module-box a { position: relative; display: flex; - height: $dashboard-item-height; - background-color: $gray-600; - font-size: $font-size-base; + height: variables.$dashboard-item-height; + background-color: variables.$gray-600; + font-size: variables.$font-size-base; line-height: 1; - padding: $gutter*0.875 $gutter; + padding: variables.$gutter*0.875 variables.$gutter; filter: brightness(1); transition: filter .3s; @@ -13,8 +15,8 @@ content: ''; position: absolute; bottom: 0; left: 0; - width: 100%; height: $gutter * 1.5; - background-color: $black; + width: 100%; height: variables.$gutter * 1.5; + background-color: variables.$black; opacity: .2; transition: opacity .3s; } @@ -31,7 +33,7 @@ a { position: relative; display: flex; - height: $dashboard-item-height; + height: variables.$dashboard-item-height; background-repeat:no-repeat; background-position: center center; } @@ -60,13 +62,13 @@ .app-module-box-concurrent-editors a { position: relative; display: flex; - height: $dashboard-item-height; + height: variables.$dashboard-item-height; background-image: url('/svg/concurrent-editors.svg'); background-repeat:no-repeat; background-position: center center; - font-size: $font-size-base; + font-size: variables.$font-size-base; line-height: 1; - padding: $gutter*0.875 $gutter; + padding: variables.$gutter*0.875 variables.$gutter; filter: brightness(1); transition: filter .3s; @@ -74,8 +76,8 @@ content: ''; position: absolute; bottom: 0; left: 0; - width: 100%; height: $gutter * 1.5; - background-color: $black; + width: 100%; height: variables.$gutter * 1.5; + background-color: variables.$black; opacity: .2; transition: opacity .3s; } @@ -95,7 +97,7 @@ ul.concurrent-editors { margin:0; padding:0; li { padding: .5rem 0 .5rem 0; - border-bottom: 1px solid $gray-600; + border-bottom: 1px solid variables.$gray-600; } } @@ -106,34 +108,34 @@ ul.concurrent-editors { overflow: hidden; @media (min-width: 568px) { height: 0; - padding-bottom: $dashboard-items-ratio; + padding-bottom: variables.$dashboard-items-ratio; } .app-module-box a { - background-color: $gray-strange; - font: $font-weight-normal $font-size-lg $font-family-serif; + background-color: variables.$gray-strange; + font: variables.$font-weight-normal variables.$font-size-lg variables.$font-family-serif; } } .sidebar { @media (min-width: 568px) { position: fixed; - top: 0; left: $gutter; + top: 0; left: variables.$gutter; } display: flex; flex-direction: column; min-height: 100%; - padding: $gutter 0 $gutter 0; - width: $dashboard-item-width; + padding: variables.$gutter 0 variables.$gutter 0; + width: variables.$dashboard-item-width; // > *:not(:last-child) { margin-bottom: $gutter;} button, .button { - width: $dashboard-item-width * .8; + width: variables.$dashboard-item-width * .8; } &-bedita-logo { - width: $gutter * 3; - height: $gutter * 3; + width: variables.$gutter * 3; + height: variables.$gutter * 3; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTUwLjQgMTIxLjkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1MC40IDEyMS45OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzAxMDEwMTt9PC9zdHlsZT48Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjgsMTA3LjZjLTQuNS01LTYuOC0xMi4zLTYuOC0yMmMwLTcuMiwyLjQtMTMuMSw3LjMtMTcuOGM0LjgtNC42LDExLjgtNywyMC43LTdjMy43LDAsNi44LDAsOS4zLDAuMWMyLjUsMC4xLDQuNCwwLjIsNS43LDAuMnY0Mi45YzAsMy42LTEuNSw2LjMtNC40LDguMmMtMi45LDEuOC03LDIuNy0xMi4yLDIuN0MzOS4xLDExNS4xLDMyLjUsMTEyLjYsMjgsMTA3LjYgTTMzLjEsNDYuN2MtMi4xLTIuNS0zLjYtNS4yLTQuNC04LjFjLTAuOC0yLjktMS4yLTYuNC0xLjItMTAuNGMwLTYuNywxLjgtMTIsNS41LTE1LjhjMy43LTMuOCw5LjQtNS43LDE3LjMtNS43YzAuMiwwLDAuNSwwLDAuNywwYzUuNCwwLDguMiwxLjcsOS45LDMuMmMxLjQsMS4zLDMuMywzLjQsMy4zLDkuNXYzNC41SDUzLjNjLTQuNywwLTguNy0wLjYtMTItMS44QzM3LjksNTAuOSwzNS4yLDQ5LjEsMzMuMSw0Ni43IE0xNDQuMiw4NmMtMC44LDIuNi0yLjcsNi43LTUuNSwxMi4zYy0yLjksNS42LTUuNyw5LjctOC4zLDEyLjVjLTEsMS0yLjYsMS44LTQuOSwyLjRjLTIuMywwLjYtNC42LDEtNi43LDEuMmMtMi4xLDAuMi00LjcsMC4zLTcuOCwwLjNoLTcuNWMtNC44LDAtOC40LTAuMi0xMS0wLjVjLTIuNi0wLjMtNC42LTEtNi4xLTIuMWMtMS41LTEuMS0yLjUtMi43LTMtNC44Yy0wLjUtMi4xLTAuOC01LTAuOC04LjdWNjIuM2gxMy43YzMuNywwLDYuNywwLjMsOSwxYzIuMywwLjcsNC4zLDIuMSw2LjEsNC40YzEuMSwxLjQsMi4xLDMuNiwzLjEsNi43YzEsMy4xLDEuNiw2LDEuOCw4LjdoNi40VjM1LjNoLTYuNGMtMC4zLDIuNS0wLjksNS4xLTEuOCw3LjljLTAuOSwyLjgtMiw1LTMuMiw2LjdjLTEuNSwxLjktMy4zLDMuMy01LjQsNC4yYy0yLDAuOC01LjMsMS4yLTkuNywxLjJIODIuNVY2LjhoMTkuMmMzLjIsMCw2LDAuMSw4LjQsMC4yYzIuNSwwLjEsNC42LDAuMyw2LjQsMC41YzMuNCwwLjUsNy4xLDMuMSwxMC45LDhjMy44LDQuOSw2LjMsOS41LDcuNCwxMy45aDYuNFYwaC05OWMtNC40LDAtOC41LDAuNC0xMi41LDEuM2MtNCwwLjktNy44LDIuNC0xMS40LDQuNmMtMy40LDItNi4yLDQuNy04LjMsOC4yYy0yLjIsMy40LTMuMyw3LjYtMy4zLDEyLjVjMCw0LjMsMC44LDguMSwyLjMsMTEuNWMxLjUsMy40LDMuNyw2LjIsNi41LDguNmMyLjYsMi4zLDUuNyw0LjIsOS4xLDUuOGMzLjQsMS42LDcuMSwyLjgsMTEsMy43djAuOGMtMy41LDAuNC03LjQsMS4zLTExLjcsMi42Yy00LjMsMS4zLTguMiwzLjItMTEuNiw1LjZjLTMuNiwyLjQtNi41LDUuNi04LjgsOS40QzEuMiw3OC41LDAsODMuMiwwLDg4LjdjMCw1LjcsMS4yLDEwLjYsMy43LDE0LjhjMi41LDQuMiw1LjcsNy42LDkuNiwxMC4zYzMuOCwyLjYsOC4yLDQuNiwxMyw2YzQuOCwxLjQsOS44LDIuMSwxNSwyLjFoMTA2LjdsMi4zLTM1LjlIMTQ0LjJ6Ii8+PC9nPjwvc3ZnPg=="); background-repeat: no-repeat; background-size: 100%; @@ -148,14 +150,14 @@ ul.concurrent-editors { display: flex; flex-direction: column; - > *:not(:empty) { margin-bottom: $gutter; } + > *:not(:empty) { margin-bottom: variables.$gutter; } .app-module-buttons, .app-module-links { display: flex; flex-direction: column; overflow: auto; max-height: 400px; - > *:not(:last-child) { margin-bottom: $gutter; } + > *:not(:last-child) { margin-bottom: variables.$gutter; } } .app-module-box > a.module-item { @@ -185,20 +187,20 @@ ul.concurrent-editors { } .listobjnav { - color:$gray-600; + color:variables.$gray-600; font-size:4em; text-align: center; - width: $dashboard-item-width * .8; + width: variables.$dashboard-item-width * .8; a { background-color: transparent; - color:$gray-400; + color:variables.$gray-400; display: inline-flex; &:hover { color:white; } } > div { - color:$gray-100; + color:variables.$gray-100; font-size:0.3em; } } @@ -211,15 +213,15 @@ ul.concurrent-editors { text-decoration: underline; } > *:not(:last-child) { - margin: $gutter 0 $gutter 0; - a:hover { color: $gray-500; } + margin: variables.$gutter 0 variables.$gutter 0; + a:hover { color: variables.$gray-500; } } } // sidebar footer is in layout-footer on mobile &-footer { - margin-top: $gutter; + margin-top: variables.$gutter; display: block; // @media (min-width: 568px) { display: block; } } diff --git a/templates/Element/Modules/index_properties.scss b/templates/Element/Modules/index_properties.scss index c18797fa2..d54e687fc 100644 --- a/templates/Element/Modules/index_properties.scss +++ b/templates/Element/Modules/index_properties.scss @@ -1,9 +1,11 @@ +@use "../../../resources/styles/variables"; + .index-date-ranges { display: flex; // toggle button .show-toggle { - margin-left: $gutter; + margin-left: variables.$gutter; line-height: 1; height: 20px; cursor: cell; @@ -21,19 +23,19 @@ .date-range { display: flex; .date-range ~ .date-range { - margin-top: $gutter * .25; + margin-top: variables.$gutter * .25; } &:last-child:not(:first-child) { margin-bottom: 1px; } // adjust space when expanded .date-item { display: flex; &:first-child { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; } .date { - margin-left: $gutter * .5; - font-weight: $font-weight-bold; + margin-left: variables.$gutter * .5; + font-weight: variables.$font-weight-bold; } } diff --git a/templates/Element/Panel/panel.scss b/templates/Element/Panel/panel.scss index 854f58090..697c0b67d 100644 --- a/templates/Element/Panel/panel.scss +++ b/templates/Element/Panel/panel.scss @@ -1,7 +1,9 @@ +@use "../../../resources/styles/variables"; + .main-panel-container { position: fixed; top: 0; right: 0; - min-width: 20 * $gutter; + min-width: 20 * variables.$gutter; width: 100%; @media screen and (min-width: 768px) { width: 60%; @@ -16,7 +18,7 @@ overflow-x: hidden; overflow-y: auto; height: 100%; - background-color: $gray-800; + background-color: variables.$gray-800; } .panel-slot { @@ -25,12 +27,12 @@ &.on { transform: translateX(0); - box-shadow: 0 0 32px $black; + box-shadow: 0 0 32px variables.$black; } } .main-panel { .fieldset:first-child { - padding-top: $gutter; + padding-top: variables.$gutter; } } diff --git a/templates/Element/flash/flash.scss b/templates/Element/flash/flash.scss index 5183e37f3..f8aab3d43 100644 --- a/templates/Element/flash/flash.scss +++ b/templates/Element/flash/flash.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + #flashMessagesContainer { position: fixed; top: 0; @@ -27,13 +29,13 @@ align-items: flex-start; flex: 1 auto; margin-top: auto; - padding: $gutter * .75 $gutter; + padding: variables.$gutter * .75 variables.$gutter; max-height: 50%; max-width: 70%; border-top: 4px solid transparent; - background-color: $gray-100; - color: $gray-900; - font-size: $font-size-sm; + background-color: variables.$gray-100; + color: variables.$gray-900; + font-size: variables.$font-size-sm; transition: transform .25s; // when parent has not class 'on' transform: translateY(100%); @@ -44,44 +46,44 @@ } // colors - &.success { border-color: $success; } - &.info { border-color: $info; } - &.error { border-color: $error; } - &.warning { border-color: $warning; } - &.success h2 [class^="icon-"] { color: $success; } - &.info h2 [class^="icon-"] { color: $info; } - &.error h2 [class^="icon-"] { color: $error; } - &.warning h2 [class^="icon-"] { color: $warning; } + &.success { border-color: variables.$success; } + &.info { border-color: variables.$info; } + &.error { border-color: variables.$error; } + &.warning { border-color: variables.$warning; } + &.success h2 [class^="icon-"] { color: variables.$success; } + &.info h2 [class^="icon-"] { color: variables.$info; } + &.error h2 [class^="icon-"] { color: variables.$error; } + &.warning h2 [class^="icon-"] { color: variables.$warning; } h2 { display: flex; align-items: center; margin: 0; - padding-right: $gutter * 1.5; - font-size: $font-size-llg; + padding-right: variables.$gutter * 1.5; + font-size: variables.$font-size-llg; [class^="icon-"] { margin-top: 2px; } } details { width: 100%; } summary { cursor: pointer; } .dump { - margin-top: $gutter * .75; - padding: $gutter * .75; + margin-top: variables.$gutter * .75; + padding: variables.$gutter * .75; width: 100%; max-height: 400px; flex: 1; overflow: auto; - background-color: $gray-200; + background-color: variables.$gray-200; font-family: monospace; - font-size: $font-size-sm; + font-size: variables.$font-size-sm; } .icon-cancel-1 { position: absolute; - top: $gutter * .5; - right: $gutter; + top: variables.$gutter * .5; + right: variables.$gutter; cursor: pointer; - color: $black; + color: variables.$black; &::before { margin: 0; diff --git a/templates/Pages/Admin/_admin.scss b/templates/Pages/Admin/_admin.scss index ab9b35ff8..98b14838b 100644 --- a/templates/Pages/Admin/_admin.scss +++ b/templates/Pages/Admin/_admin.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + body.view-admin { .filter-box-admin > .filters-container > .filter-container > span { margin-left: 15px; @@ -11,23 +13,23 @@ body.view-admin { } .table-row { &.new-record > * { - padding-top: calc($gutter * 4) !important; + padding-top: calc(variables.$gutter * 4) !important; } } } .app-module-links { a:not(.button), span { - border-bottom: 1px solid $gray-600; - padding: calc($gutter * 0.5); - padding-left: $gutter; + border-bottom: 1px solid variables.$gray-600; + padding: calc(variables.$gutter * 0.5); + padding-left: variables.$gutter; margin: 0 !important; } .button { - margin-top: calc($gutter * 2); + margin-top: calc(variables.$gutter * 2); } .active-action { - background-color: $gray-600; + background-color: variables.$gray-600; font-weight: normal !important; color: black !important; } diff --git a/templates/Pages/Dashboard/_dashboard.scss b/templates/Pages/Dashboard/_dashboard.scss index 38c538ccb..1d306b945 100644 --- a/templates/Pages/Dashboard/_dashboard.scss +++ b/templates/Pages/Dashboard/_dashboard.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + /*****************/ /*** DASHBOARD ***/ /*****************/ @@ -11,31 +13,31 @@ body.view-dashboard { width: 32px; } .dashboard { - margin-top: $gutter; + margin-top: variables.$gutter; &-section { - margin-bottom: $gutter; + margin-bottom: variables.$gutter; header { h2 { - padding-top: $gutter; - margin-bottom: $gutter; - font-size: $font-size-llg; + padding-top: variables.$gutter; + margin-bottom: variables.$gutter; + font-size: variables.$font-size-llg; } } } &-items { display: grid; - grid-gap: $gutter; + grid-gap: variables.$gutter; grid-template-columns: repeat(2, 1fr); @media (min-width: 768px) { - grid-template-columns: repeat(auto-fill, $dashboard-item-width); + grid-template-columns: repeat(auto-fill, variables.$dashboard-item-width); } } &-item { position: relative; - background-color: $gray-700; - font-size: $font-size-base; + background-color: variables.$gray-700; + font-size: variables.$font-size-base; line-height: 1; letter-spacing: .5px; display: flex; @@ -58,8 +60,8 @@ body.view-dashboard { width: 24px; } - padding: .375rem .375rem calc(#{$dashboard-items-ratio} - .375rem); - @media (min-width: 667px) { padding: $gutter*0.875 $gutter calc(#{$dashboard-items-ratio} - #{$gutter*0.875}); } + padding: .375rem .375rem calc(#{variables.$dashboard-items-ratio} - .375rem); + @media (min-width: 667px) { padding: variables.$gutter*0.875 variables.$gutter calc(#{variables.$dashboard-items-ratio} - #{variables.$gutter*0.875}); } &[class^="icon-"]:before, &[class*=" icon-"]:before { position: absolute; @@ -68,7 +70,7 @@ body.view-dashboard { // @media (min-width: 667px) { top: $gutter * .5; right: $gutter * .5; } margin-top: -1rem !important; opacity: .5; - color: $white; + color: variables.$white; font-size: 1.75rem; z-index: 1; filter: brightness(1); @@ -79,14 +81,14 @@ body.view-dashboard { content: ''; position: absolute; bottom: 0; left: 0; - width: 100%; height: $gutter * 1.5; - background-color: $black; + width: 100%; height: variables.$gutter * 1.5; + background-color: variables.$black; opacity: .2; transition: opacity .3s; } &.has-background-black:after { - background-color: $gray-600; + background-color: variables.$gray-600; } &:hover { @@ -105,10 +107,10 @@ body.view-dashboard { div[role="search"] { display: flex; - gap: $gutter * 2; + gap: variables.$gutter * 2; // @media (min-width: 568px) { width: 22 * $gutter + $gutter; } input { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; flex-grow: 1; } } @@ -127,9 +129,9 @@ body.view-dashboard { > div { display: table-cell; - height: $gutter * 2; + height: variables.$gutter * 2; white-space: nowrap; - border-bottom: 1px solid $gray-550; + border-bottom: 1px solid variables.$gray-550; vertical-align: baseline; &:empty:not(.title-cell) { @@ -150,8 +152,8 @@ body.view-dashboard { // table header .table-header { > div { - height: $gutter * 3.25; - padding: $gutter * 1.625 $gutter 0; + height: variables.$gutter * 3.25; + padding: variables.$gutter * 1.625 variables.$gutter 0; line-height: 1; border-bottom-color: inherit; &:first-letter { text-transform: uppercase; } @@ -185,7 +187,7 @@ body.view-dashboard { // table rows .table-row { &.object-status-off, &.object-status-draft, &.object-status-deleted { - color: $gray-550; + color: variables.$gray-550; } &.object-status-deleted { @@ -193,12 +195,12 @@ body.view-dashboard { } &:hover { - background-color: $gray-800; + background-color: variables.$gray-800; } // table cells > div { - padding: $gutter $gutter $gutter 0; + padding: variables.$gutter variables.$gutter variables.$gutter 0; &.narrow { width: 1px; } @@ -208,7 +210,7 @@ body.view-dashboard { white-space: initial; &:empty:before { content: attr(untitled-label); - color: $gray-550; + color: variables.$gray-550; font-style: italic; } } @@ -219,10 +221,10 @@ body.view-dashboard { img { padding: 1px; display: inline-block; - max-height: $gutter * 2; - max-width: $gutter * 2.5; + max-height: variables.$gutter * 2; + max-width: variables.$gutter * 2.5; vertical-align: middle; - background-color: $gray-200; + background-color: variables.$gray-200; } } @@ -247,9 +249,9 @@ body.view-dashboard { .dashboard-area { @media (min-width: 1280px) { - grid-template-columns: ($dashboard-item-width * 4 + $gutter * 3) auto; + grid-template-columns: (variables.$dashboard-item-width * 4 + variables.$gutter * 3) auto; display:grid; - grid-gap: $gutter; + grid-gap: variables.$gutter; } } diff --git a/templates/Pages/Import/import.scss b/templates/Pages/Import/import.scss index 2ef7e413a..cc76c4a96 100644 --- a/templates/Pages/Import/import.scss +++ b/templates/Pages/Import/import.scss @@ -1,6 +1,8 @@ +@use "../../../resources/styles/variables"; + #data-import { .fieldset { - margin-bottom: $gutter * 1.5; + margin-bottom: variables.$gutter * 1.5; .tab { cursor: auto; @@ -12,14 +14,14 @@ display: block; cursor: pointer; & ~ label { - margin-top: $gutter * .5; + margin-top: variables.$gutter * .5; } } } button.submit { - padding-left: 3 * $gutter; - padding-right: 3 * $gutter; + padding-left: 3 * variables.$gutter; + padding-right: 3 * variables.$gutter; } } @@ -29,11 +31,11 @@ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 50px; .table-header { - border-bottom: 1px solid $gray-700; + border-bottom: 1px solid variables.$gray-700; } > div { - padding: $gutter * .5; + padding: variables.$gutter * .5; &.job-payload { grid-column: span 7; @@ -51,19 +53,19 @@ } &.completed { - color: $success; + color: variables.$success; } &.failed { - color: $danger; + color: variables.$danger; } &.locked, &.pending { - color: $pending; + color: variables.$pending; } &.planned { - color: $info; + color: variables.$info; } } } diff --git a/templates/Pages/Login/login.scss b/templates/Pages/Login/login.scss index a287113a9..2b49f470c 100644 --- a/templates/Pages/Login/login.scss +++ b/templates/Pages/Login/login.scss @@ -1,8 +1,10 @@ +@use "../../../resources/styles/variables"; + // override default layout body.view-login { height: 100vh; - background-color: $defaultBackground; - background-image: linear-gradient(to bottom right, $gray-600 0%, $black 100%); + background-color: variables.$defaultBackground; + background-image: linear-gradient(to bottom right, variables.$gray-600 0%, variables.$black 100%); background-attachment: fixed; background-repeat: no-repeat; @@ -17,7 +19,7 @@ body.view-login { .login { position: relative; display: grid; - column-gap: $gutter * 2; + column-gap: variables.$gutter * 2; grid-template: "login-title login-form" "login-footer login-form"; .logo { @@ -28,29 +30,29 @@ body.view-login { width: 62px; height: 50px; opacity: .2; - margin-bottom:$gutter; + margin-bottom:variables.$gutter; } .login-title { grid-area: login-title; font-size:1.5em; line-height: 1.375em; width:176px; - font-family: $font-family-serif; + font-family: variables.$font-family-serif; } .login-form { width:264px; grid-area: login-form; - padding-top: $gutter * .25; - padding-bottom:$gutter; + padding-top: variables.$gutter * .25; + padding-bottom:variables.$gutter; form { display: flex; flex-direction: column; justify-content: space-between; label { - color: $white; + color: variables.$white; font-weight: normal; - margin: $gutter 0 $gutter * .25 0; + margin: variables.$gutter 0 variables.$gutter * .25 0; } label, input { @@ -58,15 +60,15 @@ body.view-login { width: 100%; &[type='submit'] { - margin-top: $gutter * 2; - margin-bottom: $gutter; + margin-top: variables.$gutter * 2; + margin-bottom: variables.$gutter; color: black; - border-color: $gray-300; + border-color: variables.$gray-300; width:96px; &:focus, &:hover { - color: $white; - background-color: $gray-900; + color: variables.$white; + background-color: variables.$gray-900; } } } @@ -75,7 +77,7 @@ body.view-login { footer { grid-area: login-footer; width:176px; - padding-top: $gutter; + padding-top: variables.$gutter; } @media screen and (max-width: 780px) { grid-template: "login-title" "login-form" "login-footer"; @@ -88,14 +90,14 @@ body.view-login { position: static; display: block; .message { - background-color: $error; + background-color: variables.$error; color: #fff; max-width: 100%; h2 { margin: 0; padding: 0; - font-family: $font-family-sans-serif; - font-size: $font-size-sm; - line-height: $line-height-base; + font-family: variables.$font-family-sans-serif; + font-size: variables.$font-size-sm; + line-height: variables.$line-height-base; } // no multiple messages display: none; diff --git a/templates/Pages/Model/_model-index.scss b/templates/Pages/Model/_model-index.scss index 3f698ddd6..d23d4cd86 100644 --- a/templates/Pages/Model/_model-index.scss +++ b/templates/Pages/Model/_model-index.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + body.view-model { // true @@ -22,12 +24,12 @@ body.view-model { .first-cell { button { - min-width: $gutter * 2; + min-width: variables.$gutter * 2; } } &.editing-property-type { - border-bottom: 1px dashed $gray-200; + border-bottom: 1px dashed variables.$gray-200; } &.delete-property-type { @@ -54,17 +56,17 @@ body.view-model { } div { - padding: $gutter * .25 $gutter * .5; + padding: variables.$gutter * .25 variables.$gutter * .5; vertical-align: middle; &.first-cell, &.action-cell { flex: 0 0 65px; i { - margin-left: $gutter * .5; + margin-left: variables.$gutter * .5; } input { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; } } @@ -79,22 +81,22 @@ body.view-model { &.new-row div { &.primary, &.secondary, &.name-cell, &.inverse_name-cell, &.params-cell, &.enabled-cell, &.is_abstract-cell { - padding: $gutter * 0.25 $gutter * 0.5; + padding: variables.$gutter * 0.25 variables.$gutter * 0.5; } } input, textarea { background: transparent; - color: $gray-100; + color: variables.$gray-100; border: 1px solid transparent; &:hover, &:focus { - border: 1px solid $gray-100; + border: 1px solid variables.$gray-100; } } textarea { - min-height: $gutter * 2; + min-height: variables.$gutter * 2; width: 100%; // resize: none; } @@ -104,7 +106,7 @@ body.view-model { display: flex; &.table-header { - border-bottom: 1px solid $gray-700; + border-bottom: 1px solid variables.$gray-700; .first-cell, .action-cell { flex: 0 0 65px; @@ -137,10 +139,10 @@ body.view-model { width: 100%; &:hover { - background-color: $gray-700; + background-color: variables.$gray-700; .inverted { - background-color: $gray-700; + background-color: variables.$gray-700; } } } @@ -148,7 +150,7 @@ body.view-model { > nav, > .resource-status-on { div { display: flex; - padding: $gutter * .5; + padding: variables.$gutter * .5; white-space: nowrap; vertical-align: middle; @@ -166,14 +168,14 @@ body.view-model { overflow: hidden; &:empty:before { content: attr(untitled-label); - color: $gray-600; + color: variables.$gray-600; font-style: italic; } } &.thumb-cell { - max-width: $gutter * 2.5; - height: $gutter * 2; + max-width: variables.$gutter * 2.5; + height: variables.$gutter * 2; padding: 0; overflow: hidden; img { @@ -182,7 +184,7 @@ body.view-model { max-height: 100%; max-width: 100%; vertical-align: middle; - background-color: $gray-200; + background-color: variables.$gray-200; } .icon { display: inline-block; @@ -207,10 +209,10 @@ body.view-model { } .bulk-actions { - border-top: 1px solid $gray-700; + border-top: 1px solid variables.$gray-700; header { - margin: $gutter 0 $gutter * .5; + margin: variables.$gutter 0 variables.$gutter * .5; width: 100%; opacity: .3; } @@ -222,7 +224,7 @@ body.view-model { nav { display: flex; form { - margin-right: $gutter; + margin-right: variables.$gutter; &:last-of-type { margin-right: 0; margin-left: auto; diff --git a/templates/Pages/Model/_model-view.scss b/templates/Pages/Model/_model-view.scss index d89841022..e8528abae 100644 --- a/templates/Pages/Model/_model-view.scss +++ b/templates/Pages/Model/_model-view.scss @@ -1,18 +1,20 @@ +@use "../../../resources/styles/variables"; + body.view-model { .module-form form section.fieldset { input[disabled] { - background-color: $gray-700; - color: $gray-100; + background-color: variables.$gray-700; + color: variables.$gray-100; } .link-to-parent { display: block; - margin-top: -.75 * $gutter; + margin-top: -.75 * variables.$gutter; } } .modules-view section:not(:first-child) { - margin-top: $gutter * 3; + margin-top: variables.$gutter * 3; } @@ -29,7 +31,7 @@ body.view-model { .properties { &-container { display: grid; - grid-gap: $gutter; + grid-gap: variables.$gutter; grid-template-columns: repeat(1, 1fr); @media screen and (min-width: 768px) { grid-template-columns: repeat(2, 1fr); @@ -42,7 +44,7 @@ body.view-model { .buttons-container { display: flex; flex-direction: column; - button { margin-bottom: $gutter * .5; } + button { margin-bottom: variables.$gutter * .5; } } } } diff --git a/templates/Pages/Modules/_modules-index.scss b/templates/Pages/Modules/_modules-index.scss index f478ab455..9492d96cc 100644 --- a/templates/Pages/Modules/_modules-index.scss +++ b/templates/Pages/Modules/_modules-index.scss @@ -1,7 +1,9 @@ +@use "../../../resources/styles/variables"; + body.view-module { .module-header { - min-height: $dashboard-item-height - ($gutter * 3.25) - $gutter; // minus table header and margin - margin-bottom: $gutter; + min-height: variables.$dashboard-item-height - (variables.$gutter * 3.25) - variables.$gutter; // minus table header and margin + margin-bottom: variables.$gutter; } .module-index { @@ -16,9 +18,9 @@ body.view-module { > div { display: table-cell; - height: $gutter * 2; + height: variables.$gutter * 2; white-space: nowrap; - border-bottom: 1px solid $gray-550; + border-bottom: 1px solid variables.$gray-550; vertical-align: baseline; &:empty:not(.title-cell) { @@ -40,8 +42,8 @@ body.view-module { // table header .table-header { > div { - height: $gutter * 3.25; - padding: $gutter * 1.625 $gutter 0; + height: variables.$gutter * 3.25; + padding: variables.$gutter * 1.625 variables.$gutter 0; line-height: 1; border-bottom-color: inherit; &:first-letter { text-transform: uppercase; } @@ -73,26 +75,26 @@ body.view-module { } .selected { - background-color: $gray-800; + background-color: variables.$gray-800; } // table rows .table-row { &.object-status-off, &.object-status-draft { - color: $gray-550; + color: variables.$gray-550; } &:hover { - background-color: $gray-700; + background-color: variables.$gray-700; } .select-cell:after { display: none; vertical-align: bottom; content: ""; - width: $gutter * 1.5; - height: $gutter * 1.5; - margin-left: $gutter * 0.5; + width: variables.$gutter * 1.5; + height: variables.$gutter * 1.5; + margin-left: variables.$gutter * 0.5; background-repeat: no-repeat; background-position: center center; background-size: 100%; @@ -118,7 +120,7 @@ body.view-module { // table cells > div { - padding: $gutter * 1.5 $gutter $gutter * .375; + padding: variables.$gutter * 1.5 variables.$gutter variables.$gutter * .375; &.narrow { width: 1px; } @@ -128,7 +130,7 @@ body.view-module { white-space: initial; &:empty:before { content: attr(untitled-label); - color: $gray-550; + color: variables.$gray-550; font-style: italic; } } @@ -139,10 +141,10 @@ body.view-module { img { padding: 1px; display: inline-block; - max-height: $gutter * 2; - max-width: $gutter * 2.5; + max-height: variables.$gutter * 2; + max-width: variables.$gutter * 2.5; vertical-align: middle; - background-color: $gray-200; + background-color: variables.$gray-200; } } @@ -160,7 +162,7 @@ body.view-module { } button { - height: $gutter * 2; + height: variables.$gutter * 2; } } } @@ -170,12 +172,12 @@ body.view-module { .module-footer { display: flex; flex-wrap: wrap-reverse; - margin: $gutter 0; + margin: variables.$gutter 0; align-items: flex-end; @media screen and (max-width: 1023px) { > * { - margin-bottom: $gutter; + margin-bottom: variables.$gutter; } } @@ -186,10 +188,10 @@ body.view-module { .bulk-actions { .bulk-header { - font-size: $font-size-base; + font-size: variables.$font-size-base; & + * { - margin-top: $gutter; + margin-top: variables.$gutter; } } @@ -201,10 +203,10 @@ body.view-module { .fieldset { display: inline-flex; align-items: center; - margin-bottom: $gutter; + margin-bottom: variables.$gutter; & > *:not([type='hidden']) ~ *:not([type='hidden']) { - margin-left: $gutter * .5; + margin-left: variables.$gutter * .5; } &[disabled] { @@ -224,11 +226,11 @@ body.view-module { } .input label:first-of-type { - margin-right: $gutter; + margin-right: variables.$gutter; } label { - margin-right: $gutter * .5; + margin-right: variables.$gutter * .5; } } @@ -241,7 +243,7 @@ body.view-module { } .bulk-folders .folder-picker { - margin-left: $gutter !important; + margin-left: variables.$gutter !important; } } } diff --git a/templates/Pages/Modules/_modules-view.scss b/templates/Pages/Modules/_modules-view.scss index 729147d8b..fc4420e41 100644 --- a/templates/Pages/Modules/_modules-view.scss +++ b/templates/Pages/Modules/_modules-view.scss @@ -1,12 +1,14 @@ +@use "../../../resources/styles/variables"; + body.view-module, body.userprofiles-view { .modules-view { >header { - min-height: 3 * $gutter; + min-height: 3 * variables.$gutter; h1:empty { &:before { content: attr(untitled-label); - color: $gray-600; + color: variables.$gray-600; font-style: italic; } } @@ -16,7 +18,7 @@ body.view-module, body.userprofiles-view { // view .module-form { form { - @extend .object-form; + @extend .object-form !optional; } } } @@ -24,14 +26,14 @@ body.view-module, body.userprofiles-view { // tabs layout .fieldset { ~ .fieldset { - margin-top: $gutter * 1.5; + margin-top: variables.$gutter * 1.5; } .tab { display: flex; align-items: center; - padding-left: $gutter * .5; - padding-right: $gutter * .5; - border-bottom: 1px solid $gray-100; + padding-left: variables.$gutter * .5; + padding-right: variables.$gutter * .5; + border-bottom: 1px solid variables.$gray-100; // background-color: $gray-800; &.is-loading-spinner { @@ -42,8 +44,8 @@ body.view-module, body.userprofiles-view { h2 { flex-grow: 1; - margin: 0; padding: 0 $gutter 0 0; - font-size: $font-size-base; + margin: 0; padding: 0 variables.$gutter 0 0; + font-size: variables.$font-size-base; &:first-letter { text-transform: capitalize; } @@ -53,8 +55,8 @@ body.view-module, body.userprofiles-view { cursor: pointer; &:before { content: '+'; - margin-right: $gutter; - font-size: $font-size-2; + margin-right: variables.$gutter; + font-size: variables.$font-size-2; } &.open { &:before { @@ -77,7 +79,7 @@ body.view-module, body.translation-module, body.userprofiles-view { .module-form form { @media screen and (min-width: 768px) { display: grid; - grid-gap: 0 $gutter; + grid-gap: 0 variables.$gutter; grid-template-areas: "header-view header-view" "main-view side-view" "submain-view side-view" @@ -94,7 +96,7 @@ body.view-module, body.translation-module, body.userprofiles-view { } @media screen and (min-width: 1024px) { - grid-gap: 0 $gutter * 1.5; + grid-gap: 0 variables.$gutter * 1.5; grid-template-columns: 2fr 1fr; section.relations { grid-area: submain-view; } section.history { grid-area: submain-view-1; } diff --git a/templates/Pages/Translations/view.scss b/templates/Pages/Translations/view.scss index 97e0551e9..933227b3b 100644 --- a/templates/Pages/Translations/view.scss +++ b/templates/Pages/Translations/view.scss @@ -1,3 +1,5 @@ +@use "../../../resources/styles/variables"; + .lang-header { grid-column: span 3; gap: 12px; @@ -5,5 +7,5 @@ } .module-form { - margin-bottom: $gutter; + margin-bottom: variables.$gutter; } diff --git a/webpack.config.js b/webpack.config.js index 1bc2792ae..6ae390c2d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -38,6 +38,29 @@ if (devMode) { // Print env infos bundler.printMessage(message, separator); +// loaders options +const cssFileLoaderOptions = { + loader: 'file-loader', + options: { + name: `${BUNDLE.cssDir}/[name].css`, + }, +}; +const cssLoaderOptions = { + loader: 'css-loader', + options: { + sourceMap: devMode, + url: false, + } +}; +const sassLoaderOptions = { + loader: 'sass-loader', + options: { + api: 'modern', + sassOptions: { quietDeps: true, silenceDeprecations: ['mixed-decls'] }, + sourceMap: devMode, + } +}; + // Create webpack plugins list // Common Plugins let webpackPlugins = [ @@ -278,18 +301,8 @@ module.exports = { ], use: [ - { - loader: 'file-loader', - options: { - name: `${BUNDLE.cssDir}/[name].css`, - }, - }, - { - loader: 'sass-loader', - options: { - sourceMap: devMode, - } - }, + cssFileLoaderOptions, + sassLoaderOptions, ] }, { @@ -299,18 +312,8 @@ module.exports = { ], use: [ - { - loader: 'file-loader', - options: { - name: `${BUNDLE.cssDir}/[name].css`, - }, - }, - { - loader: 'sass-loader', - options: { - sourceMap: devMode, - } - }, + cssFileLoaderOptions, + sassLoaderOptions, ] }, { @@ -324,19 +327,8 @@ module.exports = { use: [ MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - sourceMap: devMode, - url:false, - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: devMode, - } - } + cssLoaderOptions, + sassLoaderOptions ] }, { @@ -350,19 +342,8 @@ module.exports = { use: [ MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - sourceMap: devMode, - url:false, - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: devMode, - } - } + cssLoaderOptions, + sassLoaderOptions ] }, { @@ -372,19 +353,8 @@ module.exports = { ], use: [ MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - sourceMap: devMode, - url:false, - } - }, - { - loader: 'sass-loader', - options: { - sourceMap: devMode - } - } + cssLoaderOptions, + sassLoaderOptions ], }, { diff --git a/webpack.config.plugin.js b/webpack.config.plugin.js index d105e224b..1f59434c8 100644 --- a/webpack.config.plugin.js +++ b/webpack.config.plugin.js @@ -27,6 +27,8 @@ pluginsFound.forEach(plugin => { aliases[plugin] = path.resolve(__dirname, `${BUNDLE.beditaPluginsRoot}/${plugin}/node_modules`); }); +let sassOptions = { quietDeps: true, silenceDeprecations: ['mixed-decls'] }; + module.exports = { entry: entries, output: { @@ -88,7 +90,9 @@ module.exports = { { loader: 'sass-loader', options: { - sourceMap: devMode + sourceMap: devMode, + api: 'modern', + sassOptions: sassOptions, } } ], diff --git a/yarn.lock b/yarn.lock index ffe79d2b3..b919dc72a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3947,10 +3947,10 @@ mimic-fn@^1.0.0: resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ== -mini-css-extract-plugin@^2.9.2: - version "2.9.2" - resolved "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b" - integrity sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w== +mini-css-extract-plugin@^2.9.4: + version "2.9.4" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.4.tgz#cafa1a42f8c71357f49cd1566810d74ff1cb0200" + integrity sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ== dependencies: schema-utils "^4.0.0" tapable "^2.2.1" @@ -4851,10 +4851,10 @@ sass-loader@^12.2.0: klona "^2.0.4" neo-async "^2.6.2" -sass@^1.82.0: - version "1.84.0" - resolved "https://registry.npmjs.org/sass/-/sass-1.84.0.tgz#da9154cbccb2d2eac7a9486091b6d9ba93ef5bad" - integrity sha512-XDAbhEPJRxi7H0SxrnOpiXFQoUJHwkR2u3Zc4el+fK/Tt5Hpzw5kkQ59qVDfvdaUq6gCrEZIbySFBM2T9DNKHg== +sass@^1.90.0: + version "1.90.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.90.0.tgz#d6fc2be49c7c086ce86ea0b231a35bf9e33cb84b" + integrity sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q== dependencies: chokidar "^4.0.0" immutable "^5.0.2"