Skip to content

Commit 91aa992

Browse files
pmbrownpmbrown
committed
StyleMods v1.2.6
See release notes.
1 parent 7e970ef commit 91aa992

25 files changed

+570
-11
lines changed

‎js/dialog.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
// ------------------------------------------------------------
2-
// Adapted from Mark Otto's 'Fun with the dialog element'
3-
// https://markdotto.com/2022/03/16/dialog-element/
2+
// Adapted from Mark Otto's https://codepen.io/emdeoh/pen/NWXPJOy
43
// ------------------------------------------------------------
5-
64
let toggler = document.querySelectorAll("[data-dialog]"),
75
closers = document.querySelectorAll(".close-dialog");
86
toggler &&

‎js/dropdown.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// ------------------------------------------------------------
2+
// Adapted from Mark Otto's https://codepen.io/emdeoh/pen/QWOVPVK
3+
// ------------------------------------------------------------
4+
let details = document.querySelectorAll("details");
5+
details && details.forEach(function (e) {
6+
let t;
7+
[e.querySelector(".close-dropdown")].forEach(function (e) {
8+
console.log("toggle: " + e), e && e.addEventListener("click", t => {
9+
e.closest("details[open]")
10+
.removeAttribute("open")
11+
})
12+
})
13+
});

‎scss/color/blue.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-blue: (
109109
"dialog-title-bg": $blue-bg,
110110
) !default;
111111

112+
$dropdown-blue: (
113+
"dropdown-text": $blue-bg-text,
114+
"dropdown-btn-text": $blue-bg-text,
115+
"dropdown-ico": $blue-bg-text,
116+
"ico": $blue-bg-text,
117+
"link": $blue-bg-text,
118+
"visited": $blue-bg-text,
119+
"hover": $blue-bg-text,
120+
"dropdown-bg": $blue-bg,
121+
"dropdown-btn-bg": $blue-bg,
122+
"dropdown-link-hover": $blue-bg-dark,
123+
"dropdown-btn-hover": $blue-bg-dark,
124+
"dropdown-bd-color": $blue-bg-light,
125+
"dropdown-focus-color": $blue-bg-light,
126+
) !default;
127+
112128
$list-group-blue: (
113129
"list-group-text": $blue-bg-text,
114130
"ico": $blue-bg-text,
@@ -201,6 +217,14 @@ $popover-blue: (
201217
}
202218
}
203219

220+
@mixin dropdown-blue-css {
221+
.dropdown-blue {
222+
@each $name, $value in $dropdown-blue {
223+
--#{$name}: #{$value};
224+
}
225+
}
226+
}
227+
204228
@mixin list-group-blue-css {
205229
.list-group-blue {
206230
@each $name, $value in $list-group-blue {
@@ -227,6 +251,7 @@ $popover-blue: (
227251
@include button-blue-css;
228252
@include card-blue-css;
229253
@include dialog-blue-css;
254+
@include dropdown-blue-css;
230255
@include list-group-blue-css;
231256
@include popover-blue-css;
232257
}
@@ -239,6 +264,7 @@ $popover-blue: (
239264
@include button-blue-css;
240265
@include card-blue-css;
241266
@include dialog-blue-css;
267+
@include dropdown-blue-css;
242268
@include list-group-blue-css;
243269
@include popover-blue-css;
244270
}

‎scss/color/cyan.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-cyan: (
109109
"dialog-title-bg": $cyan-bg,
110110
) !default;
111111

112+
$dropdown-cyan: (
113+
"dropdown-text": $cyan-bg-text,
114+
"dropdown-btn-text": $cyan-bg-text,
115+
"dropdown-ico": $cyan-bg-text,
116+
"ico": $cyan-bg-text,
117+
"link": $cyan-bg-text,
118+
"visited": $cyan-bg-text,
119+
"hover": $cyan-bg-text,
120+
"dropdown-bg": $cyan-bg,
121+
"dropdown-btn-bg": $cyan-bg,
122+
"dropdown-link-hover": $cyan-bg-dark,
123+
"dropdown-btn-hover": $cyan-bg-dark,
124+
"dropdown-bd-color": $cyan-bg-light,
125+
"dropdown-focus-color": $cyan-bg-light,
126+
) !default;
127+
112128
$list-group-cyan: (
113129
"list-group-text": $cyan-bg-text,
114130
"ico": $cyan-bg-text,

‎scss/color/gray.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-gray: (
109109
"dialog-title-bg": $gray-bg,
110110
) !default;
111111

112+
$dropdown-gray: (
113+
"dropdown-text": $gray-bg-text,
114+
"dropdown-btn-text": $gray-bg-text,
115+
"dropdown-ico": $gray-bg-text,
116+
"ico": $gray-bg-text,
117+
"link": $gray-bg-text,
118+
"visited": $gray-bg-text,
119+
"hover": $gray-bg-text,
120+
"dropdown-bg": $gray-bg,
121+
"dropdown-btn-bg": $gray-bg,
122+
"dropdown-link-hover": $gray-bg-dark,
123+
"dropdown-btn-hover": $gray-bg-dark,
124+
"dropdown-bd-color": $gray-bg-light,
125+
"dropdown-focus-color": $gray-bg-light,
126+
) !default;
127+
112128
$list-group-gray: (
113129
"list-group-text": $gray-bg-text,
114130
"ico": $gray-bg-text,
@@ -201,6 +217,14 @@ $popover-gray: (
201217
}
202218
}
203219

220+
@mixin dropdown-gray-css {
221+
.dropdown-gray {
222+
@each $name, $value in $dropdown-gray {
223+
--#{$name}: #{$value};
224+
}
225+
}
226+
}
227+
204228
@mixin list-group-gray-css {
205229
.list-group-gray {
206230
@each $name, $value in $list-group-gray {
@@ -227,6 +251,7 @@ $popover-gray: (
227251
@include button-gray-css;
228252
@include card-gray-css;
229253
@include dialog-gray-css;
254+
@include dropdown-gray-css;
230255
@include list-group-gray-css;
231256
@include popover-gray-css;
232257
}
@@ -239,6 +264,7 @@ $popover-gray: (
239264
@include button-gray-css;
240265
@include card-gray-css;
241266
@include dialog-gray-css;
267+
@include dropdown-gray-css;
242268
@include list-group-gray-css;
243269
@include popover-gray-css;
244270
}

‎scss/color/green.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-green: (
109109
"dialog-title-bg": $green-bg,
110110
) !default;
111111

112+
$dropdown-green: (
113+
"dropdown-text": $green-bg-text,
114+
"dropdown-btn-text": $green-bg-text,
115+
"dropdown-ico": $green-bg-text,
116+
"ico": $green-bg-text,
117+
"link": $green-bg-text,
118+
"visited": $green-bg-text,
119+
"hover": $green-bg-text,
120+
"dropdown-bg": $green-bg,
121+
"dropdown-btn-bg": $green-bg,
122+
"dropdown-link-hover": $green-bg-dark,
123+
"dropdown-btn-hover": $green-bg-dark,
124+
"dropdown-bd-color": $green-bg-light,
125+
"dropdown-focus-color": $green-bg-light,
126+
) !default;
127+
112128
$list-group-green: (
113129
"list-group-text": $green-bg-text,
114130
"ico": $green-bg-text,
@@ -201,6 +217,14 @@ $popover-green: (
201217
}
202218
}
203219

220+
@mixin dropdown-green-css {
221+
.dropdown-green {
222+
@each $name, $value in $dropdown-green {
223+
--#{$name}: #{$value};
224+
}
225+
}
226+
}
227+
204228
@mixin list-group-green-css {
205229
.list-group-green {
206230
@each $name, $value in $list-group-green {
@@ -227,6 +251,7 @@ $popover-green: (
227251
@include button-green-css;
228252
@include card-green-css;
229253
@include dialog-green-css;
254+
@include dropdown-green-css;
230255
@include list-group-green-css;
231256
@include popover-green-css;
232257
}
@@ -239,6 +264,7 @@ $popover-green: (
239264
@include button-green-css;
240265
@include card-green-css;
241266
@include dialog-green-css;
267+
@include dropdown-green-css;
242268
@include list-group-green-css;
243269
@include popover-green-css;
244270
}

‎scss/color/olive.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-olive: (
109109
"dialog-title-bg": $olive-bg,
110110
) !default;
111111

112+
$dropdown-olive: (
113+
"dropdown-text": $olive-bg-text,
114+
"dropdown-btn-text": $olive-bg-text,
115+
"dropdown-ico": $olive-bg-text,
116+
"ico": $olive-bg-text,
117+
"link": $olive-bg-text,
118+
"visited": $olive-bg-text,
119+
"hover": $olive-bg-text,
120+
"dropdown-bg": $olive-bg,
121+
"dropdown-btn-bg": $olive-bg,
122+
"dropdown-link-hover": $olive-bg-dark,
123+
"dropdown-btn-hover": $olive-bg-dark,
124+
"dropdown-bd-color": $olive-bg-light,
125+
"dropdown-focus-color": $olive-bg-light,
126+
) !default;
127+
112128
$list-group-olive: (
113129
"list-group-text": $olive-bg-text,
114130
"ico": $olive-bg-text,
@@ -201,6 +217,14 @@ $popover-olive: (
201217
}
202218
}
203219

220+
@mixin dropdown-olive-css {
221+
.dropdown-olive {
222+
@each $name, $value in $dropdown-olive {
223+
--#{$name}: #{$value};
224+
}
225+
}
226+
}
227+
204228
@mixin list-group-olive-css {
205229
.list-group-olive {
206230
@each $name, $value in $list-group-olive {
@@ -227,6 +251,7 @@ $popover-olive: (
227251
@include button-olive-css;
228252
@include card-olive-css;
229253
@include dialog-olive-css;
254+
@include dropdown-olive-css;
230255
@include list-group-olive-css;
231256
@include popover-olive-css;
232257
}
@@ -239,6 +264,7 @@ $popover-olive: (
239264
@include button-olive-css;
240265
@include card-olive-css;
241266
@include dialog-olive-css;
267+
@include dropdown-olive-css;
242268
@include list-group-olive-css;
243269
@include popover-olive-css;
244270
}

‎scss/color/orange.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,23 @@ $dialog-orange: (
109109
"dialog-title-bg": $orange-bg,
110110
) !default;
111111

112+
$dropdown-orange: (
113+
"dropdown-text": $orange-bg-text,
114+
"dropdown-btn-text": $orange-bg-text,
115+
"dropdown-ico": $orange-bg-text,
116+
"ico": $orange-bg-text,
117+
"link": $orange-bg-text,
118+
"visited": $orange-bg-text,
119+
"hover": $orange-bg-text,
120+
"dropdown-bg": $orange-bg,
121+
"dropdown-btn-bg": $orange-bg,
122+
"dropdown-link-hover": $orange-bg-dark,
123+
"dropdown-btn-hover": $orange-bg-dark,
124+
"dropdown-bd-color": $orange-bg-light,
125+
"dropdown-focus-color": $orange-bg-light,
126+
) !default;
127+
128+
112129
$list-group-orange: (
113130
"list-group-text": $orange-bg-text,
114131
"ico": $orange-bg-text,
@@ -201,6 +218,14 @@ $popover-orange: (
201218
}
202219
}
203220

221+
@mixin dropdown-orange-css {
222+
.dropdown-orange {
223+
@each $name, $value in $dropdown-orange {
224+
--#{$name}: #{$value};
225+
}
226+
}
227+
}
228+
204229
@mixin list-group-orange-css {
205230
.list-group-orange {
206231
@each $name, $value in $list-group-orange {
@@ -227,6 +252,7 @@ $popover-orange: (
227252
@include button-orange-css;
228253
@include card-orange-css;
229254
@include dialog-orange-css;
255+
@include dropdown-orange-css;
230256
@include list-group-orange-css;
231257
@include popover-orange-css;
232258
}
@@ -239,6 +265,7 @@ $popover-orange: (
239265
@include button-orange-css;
240266
@include card-orange-css;
241267
@include dialog-orange-css;
268+
@include dropdown-orange-css;
242269
@include list-group-orange-css;
243270
@include popover-orange-css;
244271
}

‎scss/color/pink.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ $dialog-pink: (
109109
"dialog-title-bg": $pink-bg,
110110
) !default;
111111

112+
$dropdown-pink: (
113+
"dropdown-text": $pink-bg-text,
114+
"dropdown-btn-text": $pink-bg-text,
115+
"dropdown-ico": $pink-bg-text,
116+
"ico": $pink-bg-text,
117+
"link": $pink-bg-text,
118+
"visited": $pink-bg-text,
119+
"hover": $pink-bg-text,
120+
"dropdown-bg": $pink-bg,
121+
"dropdown-btn-bg": $pink-bg,
122+
"dropdown-link-hover": $pink-bg-dark,
123+
"dropdown-btn-hover": $pink-bg-dark,
124+
"dropdown-bd-color": $pink-bg-light,
125+
"dropdown-focus-color": $pink-bg-light,
126+
) !default;
127+
112128
$list-group-pink: (
113129
"list-group-text": $pink-bg-text,
114130
"ico": $pink-bg-text,
@@ -201,6 +217,14 @@ $popover-pink: (
201217
}
202218
}
203219

220+
@mixin dropdown-pink-css {
221+
.dropdown-pink {
222+
@each $name, $value in $dropdown-pink {
223+
--#{$name}: #{$value};
224+
}
225+
}
226+
}
227+
204228
@mixin list-group-pink-css {
205229
.list-group-pink {
206230
@each $name, $value in $list-group-pink {
@@ -227,6 +251,7 @@ $popover-pink: (
227251
@include button-pink-css;
228252
@include card-pink-css;
229253
@include dialog-pink-css;
254+
@include dropdown-pink-css;
230255
@include list-group-pink-css;
231256
@include popover-pink-css;
232257
}
@@ -239,6 +264,7 @@ $popover-pink: (
239264
@include button-pink-css;
240265
@include card-pink-css;
241266
@include dialog-pink-css;
267+
@include dropdown-pink-css;
242268
@include list-group-pink-css;
243269
@include popover-pink-css;
244270
}

0 commit comments

Comments
 (0)