From 6a28f02529ce1aac89d03dfb46d2d0e89cd78f30 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 31 Mar 2025 02:16:20 +0200 Subject: [PATCH 1/4] fix(styles): Fix relative import path of SASS files. The SASS docs suggest to use real relative imports - we don't have a load-path definition here. sass-migrator also wouldn't migrate with this kind of imports. --- _sass/_patterns.scss | 52 +++++++++++------------ src/pat/auto-suggest/_auto-suggest.scss | 2 +- src/pat/checklist/_checklist.scss | 2 +- src/pat/collapsible/_collapsible.scss | 4 +- src/pat/colour-picker/_colour-picker.scss | 2 +- src/pat/date-picker/_date-picker.scss | 2 +- src/pat/equaliser/_equaliser.scss | 2 +- src/pat/focus/_focus.scss | 2 +- src/pat/fullscreen/_fullscreen.scss | 2 +- src/pat/notification/_notification.scss | 4 +- src/pat/tooltip/_tooltip.scss | 2 +- 11 files changed, 38 insertions(+), 38 deletions(-) diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index 85438d2cc..6bfacc118 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -14,29 +14,29 @@ @import "components/button-bar"; @import "components/form"; @import "components/icon"; -@import "src/pat/auto-scale/auto-scale"; -@import "src/pat/auto-suggest/auto-suggest"; -@import "src/pat/carousel/carousel"; -@import "src/pat/checklist/checklist"; -@import "src/pat/collapsible/collapsible"; -@import "src/pat/colour-picker/colour-picker"; -@import "src/pat/date-picker/date-picker"; -@import "src/pat/datetime-picker/datetime-picker"; -@import "src/pat/equaliser/equaliser"; -@import "src/pat/expandable-tree/expandable-tree"; -@import "src/pat/focus/focus"; -@import "src/pat/gallery/gallery"; -@import "src/pat/grid/grid"; -@import "src/pat/image-crop/image-crop"; -@import "src/pat/inject/inject"; -@import "src/pat/inject/injection"; -@import "src/pat/masonry/masonry"; -@import "src/pat/menu/menu"; -@import "src/pat/modal/modal"; -@import "src/pat/notification/notification"; -@import "src/pat/sortable/sortable"; -@import "src/pat/stacks/stacks"; -@import "src/pat/switch/switch"; -@import "src/pat/syntax-highlight/syntax-highlight"; -@import "src/pat/toggle/toggle"; -@import "src/pat/tooltip/tooltip"; +@import "../src/pat/auto-scale/auto-scale"; +@import "../src/pat/auto-suggest/auto-suggest"; +@import "../src/pat/carousel/carousel"; +@import "../src/pat/checklist/checklist"; +@import "../src/pat/collapsible/collapsible"; +@import "../src/pat/colour-picker/colour-picker"; +@import "../src/pat/date-picker/date-picker"; +@import "../src/pat/datetime-picker/datetime-picker"; +@import "../src/pat/equaliser/equaliser"; +@import "../src/pat/expandable-tree/expandable-tree"; +@import "../src/pat/focus/focus"; +@import "../src/pat/gallery/gallery"; +@import "../src/pat/grid/grid"; +@import "../src/pat/image-crop/image-crop"; +@import "../src/pat/inject/inject"; +@import "../src/pat/inject/injection"; +@import "../src/pat/masonry/masonry"; +@import "../src/pat/menu/menu"; +@import "../src/pat/modal/modal"; +@import "../src/pat/notification/notification"; +@import "../src/pat/sortable/sortable"; +@import "../src/pat/stacks/stacks"; +@import "../src/pat/switch/switch"; +@import "../src/pat/syntax-highlight/syntax-highlight"; +@import "../src/pat/toggle/toggle"; +@import "../src/pat/tooltip/tooltip"; diff --git a/src/pat/auto-suggest/_auto-suggest.scss b/src/pat/auto-suggest/_auto-suggest.scss index b37701fab..c3ea4f624 100644 --- a/src/pat/auto-suggest/_auto-suggest.scss +++ b/src/pat/auto-suggest/_auto-suggest.scss @@ -1,5 +1,5 @@ @charset "UTF-8"; -@import "settings"; +@import "../../../_sass/settings"; /* @group Auto suggest */ diff --git a/src/pat/checklist/_checklist.scss b/src/pat/checklist/_checklist.scss index 94af75eea..3eba21601 100644 --- a/src/pat/checklist/_checklist.scss +++ b/src/pat/checklist/_checklist.scss @@ -1,5 +1,5 @@ @charset "UTF-8"; -@import "settings"; +@import "../../../_sass/settings"; .pat-checklist { > br { diff --git a/src/pat/collapsible/_collapsible.scss b/src/pat/collapsible/_collapsible.scss index 59ec25b58..1bd3a84e0 100644 --- a/src/pat/collapsible/_collapsible.scss +++ b/src/pat/collapsible/_collapsible.scss @@ -1,5 +1,5 @@ -@import "settings"; -@import "components/button"; +@import "../../../_sass/settings"; +@import "../../../_sass/components/button"; .pat-collapsible { margin-bottom: 0.5em; diff --git a/src/pat/colour-picker/_colour-picker.scss b/src/pat/colour-picker/_colour-picker.scss index 9b469c553..9344c28bc 100644 --- a/src/pat/colour-picker/_colour-picker.scss +++ b/src/pat/colour-picker/_colour-picker.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "spectrum-colorpicker/spectrum"; +@import "../../../node_modules/spectrum-colorpicker/spectrum"; .checkNative, .checkPattern { diff --git a/src/pat/date-picker/_date-picker.scss b/src/pat/date-picker/_date-picker.scss index e7f9877f1..55af47a86 100644 --- a/src/pat/date-picker/_date-picker.scss +++ b/src/pat/date-picker/_date-picker.scss @@ -1,2 +1,2 @@ @charset "UTF-8"; -@import "pikaday/scss/pikaday.scss"; +@import "../../../node_modules/pikaday/scss/pikaday.scss"; diff --git a/src/pat/equaliser/_equaliser.scss b/src/pat/equaliser/_equaliser.scss index 6fc5ffc1b..c61d3cbd0 100644 --- a/src/pat/equaliser/_equaliser.scss +++ b/src/pat/equaliser/_equaliser.scss @@ -1,4 +1,4 @@ -@import "src/pat/collapsible/collapsible"; +@import "../collapsible/collapsible"; .column > .panel, .columns > .panel { diff --git a/src/pat/focus/_focus.scss b/src/pat/focus/_focus.scss index 099fd098b..693753e98 100644 --- a/src/pat/focus/_focus.scss +++ b/src/pat/focus/_focus.scss @@ -1,4 +1,4 @@ -@import "settings"; +@import "../../../_sass/settings"; fieldset.focus > .legend, label.focus { diff --git a/src/pat/fullscreen/_fullscreen.scss b/src/pat/fullscreen/_fullscreen.scss index dd73472db..defa53ba2 100644 --- a/src/pat/fullscreen/_fullscreen.scss +++ b/src/pat/fullscreen/_fullscreen.scss @@ -1,4 +1,4 @@ -@import "settings"; +@import "../../../_sass/settings"; :fullscreen { background-color: transparent; diff --git a/src/pat/notification/_notification.scss b/src/pat/notification/_notification.scss index 4691bc796..22c08a780 100644 --- a/src/pat/notification/_notification.scss +++ b/src/pat/notification/_notification.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "settings"; -@import "components/button"; +@import "../../../_sass/settings"; +@import "../../../_sass/components/button"; .pat-notification-panel { padding: 0.5em; diff --git a/src/pat/tooltip/_tooltip.scss b/src/pat/tooltip/_tooltip.scss index 8f4ff420e..49d073eb1 100644 --- a/src/pat/tooltip/_tooltip.scss +++ b/src/pat/tooltip/_tooltip.scss @@ -1,2 +1,2 @@ @charset "UTF-8"; -@import "node_modules/tippy.js/dist/tippy"; +@import "../../../node_modules/tippy.js/dist/tippy"; From 1bab49dab3d1a1957e9eb3c2fc5c414f439480bd Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 31 Mar 2025 02:29:04 +0200 Subject: [PATCH 2/4] fix(styles): Migrate using sass-migrator module. --- _sass/_mixins.scss | 27 +++++---- _sass/_patterns.scss | 68 +++++++++++------------ _sass/components/_avatar.scss | 4 +- _sass/components/_button.scss | 6 +- _sass/components/_form.scss | 23 ++++---- src/pat/auto-suggest/_auto-suggest.scss | 6 +- src/pat/checklist/_checklist.scss | 10 ++-- src/pat/collapsible/_collapsible.scss | 6 +- src/pat/colour-picker/_colour-picker.scss | 2 +- src/pat/date-picker/_date-picker.scss | 2 +- src/pat/equaliser/_equaliser.scss | 2 +- src/pat/focus/_focus.scss | 4 +- src/pat/fullscreen/_fullscreen.scss | 4 +- src/pat/modal/_modal.scss | 8 +-- src/pat/notification/_notification.scss | 21 +++---- src/pat/tooltip/_tooltip.scss | 2 +- 16 files changed, 103 insertions(+), 92 deletions(-) diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss index 32c043aa9..5417f0b0e 100644 --- a/_sass/_mixins.scss +++ b/_sass/_mixins.scss @@ -1,22 +1,25 @@ +@use "sass:color"; +@use "settings"; + @mixin screen-size($media) { @if $media == small { - @media only screen and (max-width: $break-small) { + @media only screen and (max-width: settings.$break-small) { @content; } } @else if $media == small-medium { - @media only screen and (max-width: $break-large - 1) { + @media only screen and (max-width: settings.$break-large - 1) { @content; } } @else if $media == medium { - @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { + @media only screen and (min-width: settings.$break-small + 1) and (max-width: settings.$break-large - 1) { @content; } } @else if $media == medium-large { - @media only screen and (min-width: $break-small + 1) { + @media only screen and (min-width: settings.$break-small + 1) { @content; } } @else if $media == large { - @media only screen and (min-width: $break-large) { + @media only screen and (min-width: settings.$break-large) { @content; } } @@ -158,7 +161,7 @@ display: block; &.success { - background-color: $colour-success; + background-color: settings.$colour-success; color: white; a { @@ -170,10 +173,10 @@ } } &.notice { - background-color: $colour-notice; + background-color: settings.$colour-notice; } &.warning { - background-color: $colour-warning; + background-color: settings.$colour-warning; color: white; a { @@ -235,14 +238,14 @@ background-color: #efefef; &.success { - background-color: $colour-success; - color: darken($colour-success, 50%); + background-color: settings.$colour-success; + color: color.adjust(settings.$colour-success, $lightness: -50%); } &.notice { - background-color: $colour-notice; + background-color: settings.$colour-notice; } &.warning { - background-color: $colour-warning; + background-color: settings.$colour-warning; color: white; } } diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index 6bfacc118..59e11770f 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -1,42 +1,42 @@ // Each pattern comes with a mixin. They may also be included seperately // in a project and applied on custom markup. -@import "fonts"; -@import "settings"; -@import "mixins"; +@use "fonts"; +@use "settings"; +@use "mixins"; // Individual scss files are imported for each Pattern. These files may // also be imported seperately in a project, but always require the Patterns // mixins -@import "components/avatar"; -@import "components/button"; -@import "components/button-bar"; -@import "components/form"; -@import "components/icon"; -@import "../src/pat/auto-scale/auto-scale"; -@import "../src/pat/auto-suggest/auto-suggest"; -@import "../src/pat/carousel/carousel"; -@import "../src/pat/checklist/checklist"; -@import "../src/pat/collapsible/collapsible"; -@import "../src/pat/colour-picker/colour-picker"; -@import "../src/pat/date-picker/date-picker"; -@import "../src/pat/datetime-picker/datetime-picker"; -@import "../src/pat/equaliser/equaliser"; -@import "../src/pat/expandable-tree/expandable-tree"; -@import "../src/pat/focus/focus"; -@import "../src/pat/gallery/gallery"; -@import "../src/pat/grid/grid"; -@import "../src/pat/image-crop/image-crop"; -@import "../src/pat/inject/inject"; -@import "../src/pat/inject/injection"; -@import "../src/pat/masonry/masonry"; -@import "../src/pat/menu/menu"; -@import "../src/pat/modal/modal"; -@import "../src/pat/notification/notification"; -@import "../src/pat/sortable/sortable"; -@import "../src/pat/stacks/stacks"; -@import "../src/pat/switch/switch"; -@import "../src/pat/syntax-highlight/syntax-highlight"; -@import "../src/pat/toggle/toggle"; -@import "../src/pat/tooltip/tooltip"; +@use "components/avatar"; +@use "components/button"; +@use "components/button-bar"; +@use "components/form"; +@use "components/icon"; +@use "../src/pat/auto-scale/auto-scale"; +@use "../src/pat/auto-suggest/auto-suggest"; +@use "../src/pat/carousel/carousel"; +@use "../src/pat/checklist/checklist"; +@use "../src/pat/collapsible/collapsible"; +@use "../src/pat/colour-picker/colour-picker"; +@use "../src/pat/date-picker/date-picker"; +@use "../src/pat/datetime-picker/datetime-picker"; +@use "../src/pat/equaliser/equaliser"; +@use "../src/pat/expandable-tree/expandable-tree"; +@use "../src/pat/focus/focus"; +@use "../src/pat/gallery/gallery"; +@use "../src/pat/grid/grid"; +@use "../src/pat/image-crop/image-crop"; +@use "../src/pat/inject/inject"; +@use "../src/pat/inject/injection"; +@use "../src/pat/masonry/masonry"; +@use "../src/pat/menu/menu"; +@use "../src/pat/modal/modal"; +@use "../src/pat/notification/notification"; +@use "../src/pat/sortable/sortable"; +@use "../src/pat/stacks/stacks"; +@use "../src/pat/switch/switch"; +@use "../src/pat/syntax-highlight/syntax-highlight"; +@use "../src/pat/toggle/toggle"; +@use "../src/pat/tooltip/tooltip"; diff --git a/_sass/components/_avatar.scss b/_sass/components/_avatar.scss index 51a4656de..088973d87 100644 --- a/_sass/components/_avatar.scss +++ b/_sass/components/_avatar.scss @@ -1,3 +1,5 @@ +@use "../mixins"; + .pat-avatar { - @include pat-avatar(); + @include mixins.pat-avatar(); } diff --git a/_sass/components/_button.scss b/_sass/components/_button.scss index 97a4e5e56..ce2e28d2a 100644 --- a/_sass/components/_button.scss +++ b/_sass/components/_button.scss @@ -1,7 +1,9 @@ +@use "../settings"; + @charset "UTF-8"; @mixin pat-button() { - font-family: $body-font-family; + font-family: settings.$body-font-family; margin: 0 0.5em 0 0; border: 1px solid rgba(0, 0, 0, 0.3); cursor: default; @@ -59,7 +61,7 @@ ::-webkit-search-cancel-button { &:hover { - color: $colour-accent; + color: settings.$colour-accent; } &::after { content: "\e803"; diff --git a/_sass/components/_form.scss b/_sass/components/_form.scss index 007c5f713..24373084e 100644 --- a/_sass/components/_form.scss +++ b/_sass/components/_form.scss @@ -1,3 +1,6 @@ +@use "../mixins"; +@use "../settings"; + @charset "UTF-8"; form { @@ -11,8 +14,8 @@ form { .pat-message, .message { - @include pat-message(); - @include box-sizing(); + @include mixins.pat-message(); + @include mixins.box-sizing(); display: block; clear: both; @@ -30,9 +33,9 @@ form { -webkit-appearance: none; -moz-appearance: none; appearance: none; - font-family: $body-font-family; + font-family: settings.$body-font-family; display: inline-block; - @include box-sizing(); + @include mixins.box-sizing(); padding: 0.2em 0.5em; margin: -0.2em 0; background-color: rgba(0, 0, 0, 0.09); @@ -57,7 +60,7 @@ form { &::-webkit-search-cancel-button { &:hover { - color: $colour-accent; + color: settings.$colour-accent; } &::after { content: "\e803"; @@ -97,7 +100,7 @@ form { input[type="range"]::-webkit-slider-runnable-track { // width: 300px; height: 0.5em; - background: $colour-base; + background: settings.$colour-base; border: none; border-radius: 1em; } @@ -108,7 +111,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: $colour-accent; + background: settings.$colour-accent; margin-top: -0.45em; } @@ -125,7 +128,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: $colour-accent; + background: settings.$colour-accent; } /*hide the outline behind the border*/ @@ -139,7 +142,7 @@ form { height: 0.5em; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ - background: $colour-base; + background: settings.$colour-base; /*leave room for the larger thumb to overflow with a transparent border */ border-color: transparent; @@ -166,7 +169,7 @@ form { height: 1.4em; width: 1.4em; border-radius: 50%; - background: $colour-accent; + background: settings.$colour-accent; } input[type="range"]:focus::-ms-fill-lower { diff --git a/src/pat/auto-suggest/_auto-suggest.scss b/src/pat/auto-suggest/_auto-suggest.scss index c3ea4f624..9c853a48a 100644 --- a/src/pat/auto-suggest/_auto-suggest.scss +++ b/src/pat/auto-suggest/_auto-suggest.scss @@ -1,5 +1,5 @@ @charset "UTF-8"; -@import "../../../_sass/settings"; +@use "../../../_sass/settings"; /* @group Auto suggest */ @@ -478,7 +478,7 @@ disabled look for disabled choices in the results dropdown -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: $colour-accent; + background-color: settings.$colour-accent; font-size: 0.9em; font-weight: normal; @@ -513,7 +513,7 @@ disabled look for disabled choices in the results dropdown font-size: 1em; outline: none; &:before { - content: "#{$glyph-close}"; + content: "#{settings.$glyph-close}"; color: white; font: 1em fontello; } diff --git a/src/pat/checklist/_checklist.scss b/src/pat/checklist/_checklist.scss index 3eba21601..8e40e8daf 100644 --- a/src/pat/checklist/_checklist.scss +++ b/src/pat/checklist/_checklist.scss @@ -1,5 +1,5 @@ @charset "UTF-8"; -@import "../../../_sass/settings"; +@use "../../../_sass/settings"; .pat-checklist { > br { @@ -15,7 +15,7 @@ &.checked:before, &.unchecked:before { font-family: fontello; - content: "#{$glyph-checkbox}"; + content: "#{settings.$glyph-checkbox}"; float: left; position: absolute; left: 0; @@ -23,7 +23,7 @@ } &.checked:before { - content: "#{$glyph-checkbox-active}"; + content: "#{settings.$glyph-checkbox-active}"; } input[type="checkbox"], @@ -35,10 +35,10 @@ &.radio label { &:before { - content: "#{$glyph-radio-button}"; + content: "#{settings.$glyph-radio-button}"; } &.checked:before { - content: "#{$glyph-radio-button-active}"; + content: "#{settings.$glyph-radio-button-active}"; } } diff --git a/src/pat/collapsible/_collapsible.scss b/src/pat/collapsible/_collapsible.scss index 1bd3a84e0..95c456296 100644 --- a/src/pat/collapsible/_collapsible.scss +++ b/src/pat/collapsible/_collapsible.scss @@ -1,5 +1,5 @@ -@import "../../../_sass/settings"; -@import "../../../_sass/components/button"; +@use "../../../_sass/settings"; +@use "../../../_sass/components/button"; .pat-collapsible { margin-bottom: 0.5em; @@ -21,7 +21,7 @@ } > *:first-child { - @include pat-button(); + @include button.pat-button(); font-weight: normal; width: 100%; diff --git a/src/pat/colour-picker/_colour-picker.scss b/src/pat/colour-picker/_colour-picker.scss index 9344c28bc..b1196253c 100644 --- a/src/pat/colour-picker/_colour-picker.scss +++ b/src/pat/colour-picker/_colour-picker.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../../../node_modules/spectrum-colorpicker/spectrum"; +@use "../../../node_modules/spectrum-colorpicker/spectrum"; .checkNative, .checkPattern { diff --git a/src/pat/date-picker/_date-picker.scss b/src/pat/date-picker/_date-picker.scss index 55af47a86..cf53236a4 100644 --- a/src/pat/date-picker/_date-picker.scss +++ b/src/pat/date-picker/_date-picker.scss @@ -1,2 +1,2 @@ @charset "UTF-8"; -@import "../../../node_modules/pikaday/scss/pikaday.scss"; +@use "../../../node_modules/pikaday/scss/pikaday.scss"; diff --git a/src/pat/equaliser/_equaliser.scss b/src/pat/equaliser/_equaliser.scss index c61d3cbd0..b9b25aca5 100644 --- a/src/pat/equaliser/_equaliser.scss +++ b/src/pat/equaliser/_equaliser.scss @@ -1,4 +1,4 @@ -@import "../collapsible/collapsible"; +@use "../collapsible/collapsible"; .column > .panel, .columns > .panel { diff --git a/src/pat/focus/_focus.scss b/src/pat/focus/_focus.scss index 693753e98..6f6eae507 100644 --- a/src/pat/focus/_focus.scss +++ b/src/pat/focus/_focus.scss @@ -1,6 +1,6 @@ -@import "../../../_sass/settings"; +@use "../../../_sass/settings"; fieldset.focus > .legend, label.focus { - color: $colour-accent; + color: settings.$colour-accent; } diff --git a/src/pat/fullscreen/_fullscreen.scss b/src/pat/fullscreen/_fullscreen.scss index defa53ba2..052e28204 100644 --- a/src/pat/fullscreen/_fullscreen.scss +++ b/src/pat/fullscreen/_fullscreen.scss @@ -1,4 +1,4 @@ -@import "../../../_sass/settings"; +@use "../../../_sass/settings"; :fullscreen { background-color: transparent; @@ -24,7 +24,7 @@ border: none; &:before { - content: "#{$glyph-close}"; + content: "#{settings.$glyph-close}"; text-indent: 0; position: absolute; top: 0; diff --git a/src/pat/modal/_modal.scss b/src/pat/modal/_modal.scss index 9b1f5cc5d..6eb59b34c 100644 --- a/src/pat/modal/_modal.scss +++ b/src/pat/modal/_modal.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../../../_sass/settings"; -@import "../../../_sass/mixins"; +@use "../../../_sass/settings"; +@use "../../../_sass/mixins"; div.pat-modal { -webkit-box-sizing: border-box; @@ -64,7 +64,7 @@ div.pat-modal { outline: none; &:before { - content: "#{$glyph-close}"; + content: "#{settings.$glyph-close}"; text-indent: 0; position: absolute; top: 0; @@ -186,7 +186,7 @@ div.pat-modal { -webkit-animation-fill-mode: forwards; } - @include screen-size(small) { + @include mixins.screen-size(small) { width: 100% !important; height: 100% !important; z-index: 10000; diff --git a/src/pat/notification/_notification.scss b/src/pat/notification/_notification.scss index 22c08a780..db8ebd905 100644 --- a/src/pat/notification/_notification.scss +++ b/src/pat/notification/_notification.scss @@ -1,6 +1,7 @@ @charset "UTF-8"; -@import "../../../_sass/settings"; -@import "../../../_sass/components/button"; +@use "sass:color"; +@use "../../../_sass/settings"; +@use "../../../_sass/components/button"; .pat-notification-panel { padding: 0.5em; @@ -15,39 +16,39 @@ // border: 1px solid white; button { - @include pat-button(); + @include button.pat-button(); } a { text-decoration: underline; } &.notice { - background-color: $colour-notice; + background-color: settings.$colour-notice; } &.success { - background-color: $colour-success; - color: darken($colour-success, 50%); + background-color: settings.$colour-success; + color: color.adjust(settings.$colour-success, $lightness: -50%); * { - color: darken($colour-success, 50%) !important; + color: color.adjust(settings.$colour-success, $lightness: -50%) !important; //Instead of the line below you could use @includetext-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) } } &.warning { - background-color: $colour-warning; + background-color: settings.$colour-warning; color: white; * { color: white !important; } } &.error { - background-color: $colour-error; + background-color: settings.$colour-error; color: white; * { color: white !important; } } &.info { - background-color: $colour-info; + background-color: settings.$colour-info; color: #247fad; } p:last-of-type { diff --git a/src/pat/tooltip/_tooltip.scss b/src/pat/tooltip/_tooltip.scss index 49d073eb1..6fa0d5d3c 100644 --- a/src/pat/tooltip/_tooltip.scss +++ b/src/pat/tooltip/_tooltip.scss @@ -1,2 +1,2 @@ @charset "UTF-8"; -@import "../../../node_modules/tippy.js/dist/tippy"; +@use "../../../node_modules/tippy.js/dist/tippy"; From 75701d724f810bfd93dc80c473e4b2d76fb50ea7 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 31 Mar 2025 11:50:19 +0200 Subject: [PATCH 3/4] fix(styles): Fix SASS nesting warnings. --- _sass/components/_form.scss | 9 +++++---- src/pat/auto-suggest/_auto-suggest.scss | 12 +++++++----- src/pat/collapsible/_collapsible.scss | 3 +-- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/_sass/components/_form.scss b/_sass/components/_form.scss index 24373084e..54c0221fc 100644 --- a/_sass/components/_form.scss +++ b/_sass/components/_form.scss @@ -14,13 +14,13 @@ form { .pat-message, .message { - @include mixins.pat-message(); - @include mixins.box-sizing(); - display: block; clear: both; margin-top: 0.5em; font-style: normal; + + @include mixins.box-sizing(); + @include mixins.pat-message(); } h2 { @@ -30,12 +30,13 @@ form { input, textarea, select { + @include mixins.box-sizing(); + -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: settings.$body-font-family; display: inline-block; - @include mixins.box-sizing(); padding: 0.2em 0.5em; margin: -0.2em 0; background-color: rgba(0, 0, 0, 0.09); diff --git a/src/pat/auto-suggest/_auto-suggest.scss b/src/pat/auto-suggest/_auto-suggest.scss index 9c853a48a..3baf5ebc9 100644 --- a/src/pat/auto-suggest/_auto-suggest.scss +++ b/src/pat/auto-suggest/_auto-suggest.scss @@ -357,15 +357,16 @@ Version: 3.4.3 Timestamp: Tue Sep 17 06:47:14 PDT 2013 display: list-item; } .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; + &.select2-highlighted { color: #666; background: #f4f4f4; display: list-item; cursor: default; } - background: #f4f4f4; - display: list-item; - cursor: default; } .select2-selected { display: none; @@ -377,11 +378,12 @@ disabled look for disabled choices in the results dropdown */ .select2-more-results { + background: #f4f4f4; + display: list-item; + &.select2-active { background: #f4f4f4 url("select2-spinner.gif") no-repeat 100%; } - background: #f4f4f4; - display: list-item; } /* disabled styles */ diff --git a/src/pat/collapsible/_collapsible.scss b/src/pat/collapsible/_collapsible.scss index 95c456296..43eefa49e 100644 --- a/src/pat/collapsible/_collapsible.scss +++ b/src/pat/collapsible/_collapsible.scss @@ -21,8 +21,6 @@ } > *:first-child { - @include button.pat-button(); - font-weight: normal; width: 100%; @@ -30,5 +28,6 @@ -webkit-box-sizing: border-box; box-sizing: border-box; // font-size: 0.8em; + @include button.pat-button(); } } From ce923a957ae9c3901f72dcce27e18509a146a29a Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 31 Mar 2025 02:39:13 +0200 Subject: [PATCH 4/4] Compiled CSS. --- style/patterns.css | 620 ++++----------------------------------------- 1 file changed, 49 insertions(+), 571 deletions(-) diff --git a/style/patterns.css b/style/patterns.css index 1d6541d2c..0288ec64e 100644 --- a/style/patterns.css +++ b/style/patterns.css @@ -183,18 +183,18 @@ form p.instruction .pat-message { } form .pat-message, form .message { + display: block; + clear: both; + margin-top: 0.5em; + font-style: normal; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; color: rgba(0, 0, 0, 0.5); padding: 0.8em; margin-bottom: 1em; border: rgba(0, 0, 0, 0.05) solid 0.2rem; background-color: #efefef; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display: block; - clear: both; - margin-top: 0.5em; - font-style: normal; } form .pat-message.success, form .message.success { @@ -216,14 +216,14 @@ form h2 { form input, form textarea, form select { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Source Sans Pro", sans-serif; display: inline-block; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; padding: 0.2em 0.5em; margin: -0.2em 0; background-color: rgba(0, 0, 0, 0.09); @@ -1356,162 +1356,6 @@ disabled look for disabled choices in the results dropdown position: relative; } -.pat-button { - font-family: "Source Sans Pro", sans-serif; - margin: 0 0.5em 0 0; - border: 1px solid rgba(0, 0, 0, 0.3); - cursor: default; - border-radius: 0.2em; - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - text-decoration: none !important; - line-height: 1.5; - white-space: nowrap; - background-color: transparent; - display: inline-block; - padding-top: 0; - padding-left: 1em; - padding-right: 1em; - font-size: 0.98em; -} -.pat-button:active, .pat-button.active { - box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3); -} -.pat-button.no-label { - padding-left: 0; - padding-right: 0; - width: 1.7em; -} -.pat-button.no-label:before { - width: 100%; - text-align: center; - margin: 0; -} - -::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -::-webkit-search-cancel-button:hover { - color: #0198e1; -} -::-webkit-search-cancel-button::after { - content: "\e803"; - font-family: fontello; - right: 1em; - position: absolute; - top: 50%; - line-height: 1; - margin-top: -0.5em; -} - -.pat-button:focus, -*[data-option].focus:after, -input:focus, -.select2-container-multi.select2-container-active, -textarea:focus { - border-color: #0081be; - box-shadow: 0 0 4px #0081be; -} - -.pat-button.link { - border-style: none; - background-image: none; -} - -.pat-button.dropdown { - position: relative; - padding-right: 1.6em; -} - -.pat-button.dropdown:after { - content: "▾"; - display: inline-block; - font: 18px fontello; - position: absolute; - right: 4px; -} - -.pat-button.dropdown[class*=icon-] { - padding-right: 12px; -} - -a.button.dropdown[class*=icon-]:after, -button.dropdown[class*=icon-]:after { - display: none; -} - -a.button.tentative, -button.tentative, -ul.cal-events label[data-option=Tentative] select { - background-color: #ff9300; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #c46f00; -} - -a.button.confirmative, -button.confirmative, -ul.cal-events label[data-option=Confirmed] select { - background-color: #5bb75b; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #298f00; -} - -a.button.negative, -button.negative, -ul.cal-events label[data-option=Declined] select { - background-color: red; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffcb91", endColorstr="#ff1a00",GradientType=0 ); - border: 1px solid #941100; -} - -.pat-button.on, -a.button:active { - box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3); -} - -.pat-button.disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -button.pat-button[disabled=disabled], button.pat-button:disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -.button-cluster { - overflow: hidden; - display: inline-block; - margin: 0; -} - -.button-cluster.float-before { - margin-right: 5px; -} -.button-cluster button, -.button-cluster a.button { - margin: 0; - border-radius: 0; - border-left-style: none; - float: left; -} -.button-cluster :first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-left-style: none; - border-left-style: solid; -} - -.button-cluster :last-child { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; -} - .pat-collapsible { margin-bottom: 0.5em; } @@ -1529,6 +1373,11 @@ button.pat-button[disabled=disabled], button.pat-button:disabled { width: 100% !important; } .pat-collapsible > *:first-child { + font-weight: normal; + width: 100%; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; font-family: "Source Sans Pro", sans-serif; margin: 0 0.5em 0 0; border: 1px solid rgba(0, 0, 0, 0.3); @@ -1546,11 +1395,6 @@ button.pat-button[disabled=disabled], button.pat-button:disabled { padding-left: 1em; padding-right: 1em; font-size: 0.98em; - font-weight: normal; - width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } .pat-collapsible > *:first-child:active, .pat-collapsible > *:first-child.active { box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3); @@ -2361,256 +2205,46 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. margin-right: 0.2em; } -.pat-button { - font-family: "Source Sans Pro", sans-serif; - margin: 0 0.5em 0 0; - border: 1px solid rgba(0, 0, 0, 0.3); - cursor: default; - border-radius: 0.2em; - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - text-decoration: none !important; - line-height: 1.5; - white-space: nowrap; - background-color: transparent; +.column > .panel, +.columns > .panel { + height: 100%; +} + +.pat-expandable { + background-color: #f9f9f9; + list-style-type: none; + padding: 10px; + margin-left: 0; +} +.pat-expandable .current { + font-weight: bold; display: inline-block; - padding-top: 0; - padding-left: 1em; - padding-right: 1em; - font-size: 0.98em; + color: red; } -.pat-button:active, .pat-button.active { - box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3); +.pat-expandable li li { + display: block; + padding-left: 30px; } -.pat-button.no-label { - padding-left: 0; - padding-right: 0; - width: 1.7em; +.pat-expandable li span.toggle { + width: 1.2em; + height: 1.2em; + float: left; + font-size: 1em; + line-height: 1.2em; } -.pat-button.no-label:before { - width: 100%; - text-align: center; - margin: 0; +.pat-expandable li ul { + margin-bottom: 0; + margin-left: 0; + margin-top: 0; + padding: 0; + display: none; } - -::-webkit-search-cancel-button { - -webkit-appearance: none; +.pat-expandable li.open > ul, +.pat-expandable li a { + display: block; } - -::-webkit-search-cancel-button:hover { - color: #0198e1; -} -::-webkit-search-cancel-button::after { - content: "\e803"; - font-family: fontello; - right: 1em; - position: absolute; - top: 50%; - line-height: 1; - margin-top: -0.5em; -} - -.pat-button:focus, -*[data-option].focus:after, -input:focus, -.select2-container-multi.select2-container-active, -textarea:focus { - border-color: #0081be; - box-shadow: 0 0 4px #0081be; -} - -.pat-button.link { - border-style: none; - background-image: none; -} - -.pat-button.dropdown { - position: relative; - padding-right: 1.6em; -} - -.pat-button.dropdown:after { - content: "▾"; - display: inline-block; - font: 18px fontello; - position: absolute; - right: 4px; -} - -.pat-button.dropdown[class*=icon-] { - padding-right: 12px; -} - -a.button.dropdown[class*=icon-]:after, -button.dropdown[class*=icon-]:after { - display: none; -} - -a.button.tentative, -button.tentative, -ul.cal-events label[data-option=Tentative] select { - background-color: #ff9300; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #c46f00; -} - -a.button.confirmative, -button.confirmative, -ul.cal-events label[data-option=Confirmed] select { - background-color: #5bb75b; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #298f00; -} - -a.button.negative, -button.negative, -ul.cal-events label[data-option=Declined] select { - background-color: red; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffcb91", endColorstr="#ff1a00",GradientType=0 ); - border: 1px solid #941100; -} - -.pat-button.on, -a.button:active { - box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3); -} - -.pat-button.disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -button.pat-button[disabled=disabled], button.pat-button:disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -.button-cluster { - overflow: hidden; - display: inline-block; - margin: 0; -} - -.button-cluster.float-before { - margin-right: 5px; -} -.button-cluster button, -.button-cluster a.button { - margin: 0; - border-radius: 0; - border-left-style: none; - float: left; -} -.button-cluster :first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-left-style: none; - border-left-style: solid; -} - -.button-cluster :last-child { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; -} - -.pat-collapsible { - margin-bottom: 0.5em; -} -.pat-collapsible > *:first-child:before { - content: "▼"; - width: 1.5em; - display: inline-block; -} -.pat-collapsible.closed > *:first-child:before { - content: "▶"; -} -.pat-collapsible > .panel-content { - padding-top: 1em; - padding-bottom: 1em; - width: 100% !important; -} -.pat-collapsible > *:first-child { - font-family: "Source Sans Pro", sans-serif; - margin: 0 0.5em 0 0; - border: 1px solid rgba(0, 0, 0, 0.3); - cursor: default; - border-radius: 0.2em; - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - text-decoration: none !important; - line-height: 1.5; - white-space: nowrap; - background-color: transparent; - display: inline-block; - padding-top: 0; - padding-left: 1em; - padding-right: 1em; - font-size: 0.98em; - font-weight: normal; - width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.pat-collapsible > *:first-child:active, .pat-collapsible > *:first-child.active { - box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3); -} -.pat-collapsible > *:first-child.no-label { - padding-left: 0; - padding-right: 0; - width: 1.7em; -} -.pat-collapsible > *:first-child.no-label:before { - width: 100%; - text-align: center; - margin: 0; -} - -.column > .panel, -.columns > .panel { - height: 100%; -} - -.pat-expandable { - background-color: #f9f9f9; - list-style-type: none; - padding: 10px; - margin-left: 0; -} -.pat-expandable .current { - font-weight: bold; - display: inline-block; - color: red; -} -.pat-expandable li li { - display: block; - padding-left: 30px; -} -.pat-expandable li span.toggle { - width: 1.2em; - height: 1.2em; - float: left; - font-size: 1em; - line-height: 1.2em; -} -.pat-expandable li ul { - margin-bottom: 0; - margin-left: 0; - margin-top: 0; - padding: 0; - display: none; -} -.pat-expandable li.open > ul, -.pat-expandable li a { - display: block; -} -.pat-expandable span.toggle:before { - content: "▶"; +.pat-expandable span.toggle:before { + content: "▶"; } .pat-expandable .open > span.toggle:before { content: "▼"; @@ -4364,162 +3998,6 @@ div.pat-modal:after { } } -.pat-button { - font-family: "Source Sans Pro", sans-serif; - margin: 0 0.5em 0 0; - border: 1px solid rgba(0, 0, 0, 0.3); - cursor: default; - border-radius: 0.2em; - background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); - text-decoration: none !important; - line-height: 1.5; - white-space: nowrap; - background-color: transparent; - display: inline-block; - padding-top: 0; - padding-left: 1em; - padding-right: 1em; - font-size: 0.98em; -} -.pat-button:active, .pat-button.active { - box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3); -} -.pat-button.no-label { - padding-left: 0; - padding-right: 0; - width: 1.7em; -} -.pat-button.no-label:before { - width: 100%; - text-align: center; - margin: 0; -} - -::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -::-webkit-search-cancel-button:hover { - color: #0198e1; -} -::-webkit-search-cancel-button::after { - content: "\e803"; - font-family: fontello; - right: 1em; - position: absolute; - top: 50%; - line-height: 1; - margin-top: -0.5em; -} - -.pat-button:focus, -*[data-option].focus:after, -input:focus, -.select2-container-multi.select2-container-active, -textarea:focus { - border-color: #0081be; - box-shadow: 0 0 4px #0081be; -} - -.pat-button.link { - border-style: none; - background-image: none; -} - -.pat-button.dropdown { - position: relative; - padding-right: 1.6em; -} - -.pat-button.dropdown:after { - content: "▾"; - display: inline-block; - font: 18px fontello; - position: absolute; - right: 4px; -} - -.pat-button.dropdown[class*=icon-] { - padding-right: 12px; -} - -a.button.dropdown[class*=icon-]:after, -button.dropdown[class*=icon-]:after { - display: none; -} - -a.button.tentative, -button.tentative, -ul.cal-events label[data-option=Tentative] select { - background-color: #ff9300; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #c46f00; -} - -a.button.confirmative, -button.confirmative, -ul.cal-events label[data-option=Confirmed] select { - background-color: #5bb75b; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9de96", endColorstr="#398235",GradientType=0 ); - border: 1px solid #298f00; -} - -a.button.negative, -button.negative, -ul.cal-events label[data-option=Declined] select { - background-color: red; - color: white; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffcb91", endColorstr="#ff1a00",GradientType=0 ); - border: 1px solid #941100; -} - -.pat-button.on, -a.button:active { - box-shadow: inset 0 1px 10px rgba(0, 0, 0, 0.3); -} - -.pat-button.disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -button.pat-button[disabled=disabled], button.pat-button:disabled { - opacity: 0.4; - filter: alpha(opacity=40); -} - -.button-cluster { - overflow: hidden; - display: inline-block; - margin: 0; -} - -.button-cluster.float-before { - margin-right: 5px; -} -.button-cluster button, -.button-cluster a.button { - margin: 0; - border-radius: 0; - border-left-style: none; - float: left; -} -.button-cluster :first-child { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - border-left-style: none; - border-left-style: solid; -} - -.button-cluster :last-child { - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; -} - .pat-notification-panel { padding: 0.5em; margin-bottom: 1em;