Compare commits
4 commits
main
...
relative-c
| Author | SHA1 | Date | |
|---|---|---|---|
|
41e046cab3 | ||
|
|
0db6ff07df | ||
|
|
23feb10a7d | ||
|
|
04d86325e8 |
9 changed files with 349 additions and 419 deletions
|
|
@ -13,21 +13,30 @@ $dropdown-content-radius: cv.getVar("radius") !default;
|
|||
$dropdown-content-shadow: cv.getVar("shadow") !default;
|
||||
$dropdown-content-z: 20 !default;
|
||||
|
||||
$dropdown-item-h: cv.getVar("scheme-h");
|
||||
$dropdown-item-s: cv.getVar("scheme-s");
|
||||
$dropdown-item-l: cv.getVar("scheme-main-l");
|
||||
$dropdown-item-background-l: cv.getVar("scheme-main-l");
|
||||
$dropdown-item-background-l-delta: 0%;
|
||||
$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$dropdown-item-active-background-l-delta: cv.getVar(
|
||||
"active-background-l-delta"
|
||||
);
|
||||
$dropdown-item-color-l: cv.getVar("text-strong-l");
|
||||
$dropdown-item-selected-h: cv.getVar("link-h");
|
||||
$dropdown-item-selected-s: cv.getVar("link-s");
|
||||
$dropdown-item-selected-l: cv.getVar("link-l");
|
||||
$dropdown-item-selected-background-l: cv.getVar("link-l");
|
||||
$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
$dropdown-item-background-color: cv.getVar("scheme-main") !default;
|
||||
$dropdown-item-color: cv.getVar("text-strong") !default;
|
||||
$dropdown-item-hover-background-color: hsl(
|
||||
from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$dropdown-item-active-background-color: hsl(
|
||||
from #{cv.getVar("dropdown-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$dropdown-item-selected-background-color: cv.getVar("link") !default;
|
||||
$dropdown-item-selected-color: cv.getVar("link-invert") !default;
|
||||
$dropdown-item-selected-hover-background-color: hsl(
|
||||
from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$dropdown-item-selected-active-background-color: hsl(
|
||||
from #{cv.getVar("dropdown-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
|
||||
$dropdown-divider-background-color: cv.getVar("border-weak") !default;
|
||||
|
||||
|
|
@ -43,19 +52,6 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
|
|||
"dropdown-content-radius": #{$dropdown-content-radius},
|
||||
"dropdown-content-shadow": #{$dropdown-content-shadow},
|
||||
"dropdown-content-z": #{$dropdown-content-z},
|
||||
"dropdown-item-h": #{$dropdown-item-h},
|
||||
"dropdown-item-s": #{$dropdown-item-s},
|
||||
"dropdown-item-l": #{$dropdown-item-l},
|
||||
"dropdown-item-background-l": #{$dropdown-item-background-l},
|
||||
"dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
|
||||
"dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
|
||||
"dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
|
||||
"dropdown-item-color-l": #{$dropdown-item-color-l},
|
||||
"dropdown-item-selected-h": #{$dropdown-item-selected-h},
|
||||
"dropdown-item-selected-s": #{$dropdown-item-selected-s},
|
||||
"dropdown-item-selected-l": #{$dropdown-item-selected-l},
|
||||
"dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
|
||||
"dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
|
||||
"dropdown-divider-background-color": #{$dropdown-divider-background-color},
|
||||
)
|
||||
);
|
||||
|
|
@ -110,11 +106,12 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
|
|||
}
|
||||
|
||||
.#{iv.$class-prefix}dropdown-item {
|
||||
color: hsl(
|
||||
#{cv.getVar("dropdown-item-h")},
|
||||
#{cv.getVar("dropdown-item-s")},
|
||||
#{cv.getVar("dropdown-item-color-l")}
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-color": #{$dropdown-item-color},
|
||||
)
|
||||
);
|
||||
color: cv.getVar("dropdown-item-color");
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -123,59 +120,47 @@ $dropdown-divider-background-color: cv.getVar("border-weak") !default;
|
|||
|
||||
a.#{iv.$class-prefix}dropdown-item,
|
||||
button.#{iv.$class-prefix}dropdown-item {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("dropdown-item-h")},
|
||||
#{cv.getVar("dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
|
||||
"dropdown-item-background-l-delta"
|
||||
)}
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-background-color": #{$dropdown-item-background-color},
|
||||
"dropdown-item-hover-background-color": #{$dropdown-item-hover-background-color},
|
||||
"dropdown-item-active-background-color": #{$dropdown-item-active-background-color},
|
||||
"dropdown-item-selected-background-color": #{$dropdown-item-selected-background-color},
|
||||
"dropdown-item-selected-color": #{$dropdown-item-selected-color},
|
||||
"dropdown-item-selected-hover-background-color": #{$dropdown-item-selected-hover-background-color},
|
||||
"dropdown-item-selected-active-background-color": #{$dropdown-item-selected-active-background-color},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("dropdown-item-background-color");
|
||||
padding-inline-end: 3rem;
|
||||
text-align: inherit;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-background-l-delta": #{cv.getVar(
|
||||
"dropdown-item-hover-background-l-delta"
|
||||
)},
|
||||
"dropdown-item-border-l-delta": #{cv.getVar(
|
||||
"dropdown-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("dropdown-item-hover-background-color");
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-background-l-delta": #{cv.getVar(
|
||||
"dropdown-item-active-background-l-delta"
|
||||
)},
|
||||
"dropdown-item-border-l-delta": #{cv.getVar(
|
||||
"dropdown-item-active-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("dropdown-item-active-background-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
|
||||
"dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
|
||||
"dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
|
||||
"dropdown-item-background-l": #{cv.getVar(
|
||||
"dropdown-item-selected-background-l"
|
||||
)},
|
||||
"dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("dropdown-item-selected-background-color");
|
||||
color: cv.getVar("dropdown-item-selected-color");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar(
|
||||
"dropdown-item-selected-hover-background-color"
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: cv.getVar(
|
||||
"dropdown-item-selected-active-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,20 +3,33 @@
|
|||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$menu-item-h: cv.getVar("scheme-h");
|
||||
$menu-item-s: cv.getVar("scheme-s");
|
||||
$menu-item-l: cv.getVar("scheme-main-l");
|
||||
$menu-item-background-l: cv.getVar("scheme-main-l");
|
||||
$menu-item-background-l-delta: 0%;
|
||||
$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$menu-item-color-l: cv.getVar("text-l");
|
||||
$menu-item-background-color: cv.getVar("scheme-main") !default;
|
||||
$menu-item-color: cv.getVar("text") !default;
|
||||
$menu-item-hover-background-color: hsl(
|
||||
from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$menu-item-hover-color: cv.getVar("text-strong") !default;
|
||||
$menu-item-active-background-color: hsl(
|
||||
from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$menu-item-active-color: cv.getVar("text-strong") !default;
|
||||
$menu-item-selected-background-color: cv.getVar("link") !default;
|
||||
$menu-item-selected-color: cv.getVar("link-invert") !default;
|
||||
$menu-item-selected-hover-background-color: hsl(
|
||||
from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$menu-item-selected-active-background-color: hsl(
|
||||
from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$menu-item-radius: cv.getVar("radius-small") !default;
|
||||
$menu-item-selected-h: cv.getVar("link-h");
|
||||
$menu-item-selected-s: cv.getVar("link-s");
|
||||
$menu-item-selected-l: cv.getVar("link-l");
|
||||
$menu-item-selected-background-l: cv.getVar("link-l");
|
||||
$menu-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
|
||||
$menu-list-border-left: 1px solid cv.getVar("border") !default;
|
||||
$menu-list-line-height: 1.25 !default;
|
||||
|
|
@ -32,20 +45,17 @@ $menu-label-spacing: 1em !default;
|
|||
.#{iv.$class-prefix}menu {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-h": #{$menu-item-h},
|
||||
"menu-item-s": #{$menu-item-s},
|
||||
"menu-item-l": #{$menu-item-l},
|
||||
"menu-item-background-l": #{$menu-item-background-l},
|
||||
"menu-item-background-l-delta": #{$menu-item-background-l-delta},
|
||||
"menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
|
||||
"menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
|
||||
"menu-item-color-l": #{$menu-item-color-l},
|
||||
"menu-item-background-color": #{$menu-item-background-color},
|
||||
"menu-item-color": #{$menu-item-color},
|
||||
"menu-item-hover-background-color": #{$menu-item-hover-background-color},
|
||||
"menu-item-hover-color": #{$menu-item-hover-color},
|
||||
"menu-item-active-background-color": #{$menu-item-active-background-color},
|
||||
"menu-item-active-color": #{$menu-item-active-color},
|
||||
"menu-item-selected-background-color": #{$menu-item-selected-background-color},
|
||||
"menu-item-selected-color": #{$menu-item-selected-color},
|
||||
"menu-item-selected-hover-background-color": #{$menu-item-selected-hover-background-color},
|
||||
"menu-item-selected-active-background-color": #{$menu-item-selected-active-background-color},
|
||||
"menu-item-radius": #{$menu-item-radius},
|
||||
"menu-item-selected-h": #{$menu-item-selected-h},
|
||||
"menu-item-selected-s": #{$menu-item-selected-s},
|
||||
"menu-item-selected-l": #{$menu-item-selected-l},
|
||||
"menu-item-selected-background-l": #{$menu-item-selected-background-l},
|
||||
"menu-item-selected-color-l": #{$menu-item-selected-color-l},
|
||||
"menu-list-border-left": #{$menu-list-border-left},
|
||||
"menu-list-line-height": #{$menu-list-line-height},
|
||||
"menu-list-link-padding": #{$menu-list-link-padding},
|
||||
|
|
@ -83,60 +93,41 @@ $menu-label-spacing: 1em !default;
|
|||
button,
|
||||
.#{iv.$class-prefix}menu-item {
|
||||
@extend %reset;
|
||||
background-color: hsl(
|
||||
#{cv.getVar("menu-item-h")},
|
||||
#{cv.getVar("menu-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("menu-item-background-l")} + #{cv.getVar(
|
||||
"menu-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("menu-item-background-color");
|
||||
border-radius: cv.getVar("menu-item-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("menu-item-h")},
|
||||
#{cv.getVar("menu-item-s")},
|
||||
#{cv.getVar("menu-item-color-l")}
|
||||
);
|
||||
color: cv.getVar("menu-item-color");
|
||||
display: block;
|
||||
padding: cv.getVar("menu-list-link-padding");
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-background-l-delta": #{cv.getVar(
|
||||
"menu-item-hover-background-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("menu-item-hover-background-color");
|
||||
color: cv.getVar("menu-item-hover-color");
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-background-l-delta": #{cv.getVar(
|
||||
"menu-item-active-background-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("menu-item-active-background-color");
|
||||
color: cv.getVar("menu-item-active-color");
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-h": #{cv.getVar("menu-item-selected-h")},
|
||||
"menu-item-s": #{cv.getVar("menu-item-selected-s")},
|
||||
"menu-item-l": #{cv.getVar("menu-item-selected-l")},
|
||||
"menu-item-background-l": #{cv.getVar(
|
||||
"menu-item-selected-background-l"
|
||||
)},
|
||||
"menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("menu-item-selected-background-color");
|
||||
color: cv.getVar("menu-item-selected-color");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar(
|
||||
"menu-item-selected-hover-background-color"
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: cv.getVar(
|
||||
"menu-item-selected-active-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,26 +4,24 @@
|
|||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$message-h: cv.getVar("scheme-h");
|
||||
$message-s: cv.getVar("scheme-s");
|
||||
$message-background-color: cv.getVar("background");
|
||||
$message-background-l: cv.getVar("background-l");
|
||||
$message-border-l: cv.getVar("border-l");
|
||||
$message-border-l-delta: -20% !default;
|
||||
$message-color: cv.getVar("text") !default;
|
||||
$message-border-color: cv.getVar("border");
|
||||
$message-border-style: solid;
|
||||
$message-border-width: 0.25em;
|
||||
$message-color-l: cv.getVar("text-l");
|
||||
$message-header-background-l: cv.getVar("dark-l");
|
||||
$message-header-color-l: cv.getVar("text-dark-invert-l");
|
||||
$message-radius: cv.getVar("radius") !default;
|
||||
$message-header-background-color: cv.getVar("text");
|
||||
$message-header-color: cv.getVar("text-invert");
|
||||
$message-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$message-header-weight: cv.getVar("weight-semibold") !default;
|
||||
$message-header-padding: 1em 1.25em !default;
|
||||
$message-header-radius: cv.getVar("radius") !default;
|
||||
$message-header-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$message-body-border-width: 0 0 0 4px !default;
|
||||
$message-body-color: cv.getVar("text") !default;
|
||||
$message-body-padding: 1.25em 1.5em !default;
|
||||
$message-body-radius: cv.getVar("radius-small") !default;
|
||||
$message-body-radius: cv.getVar("radius-medium") !default;
|
||||
|
||||
$message-body-pre-code-background-color: transparent !default;
|
||||
|
||||
|
|
@ -33,7 +31,10 @@ $message-colors: dv.$colors !default;
|
|||
.#{iv.$class-prefix}message {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"message-border-l-delta": #{$message-border-l-delta},
|
||||
"message-background-color": #{$message-background-color},
|
||||
"message-background-l": #{$message-background-l},
|
||||
"message-color": #{$message-color},
|
||||
"message-border-color": #{$message-border-color},
|
||||
"message-radius": #{$message-radius},
|
||||
"message-header-weight": #{$message-header-weight},
|
||||
"message-header-padding": #{$message-header-padding},
|
||||
|
|
@ -44,15 +45,10 @@ $message-colors: dv.$colors !default;
|
|||
"message-body-radius": #{$message-body-radius},
|
||||
"message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
|
||||
"message-header-body-border-width": #{$message-header-body-border-width},
|
||||
"message-h": #{$message-h},
|
||||
"message-s": #{$message-s},
|
||||
"message-background-l": #{$message-background-l},
|
||||
"message-border-l": #{$message-border-l},
|
||||
"message-border-style": #{$message-border-style},
|
||||
"message-border-width": #{$message-border-width},
|
||||
"message-color-l": #{$message-color-l},
|
||||
"message-header-background-l": #{$message-header-background-l},
|
||||
"message-header-color-l": #{$message-header-color-l},
|
||||
"message-header-background-color": #{$message-header-background-color},
|
||||
"message-header-color": #{$message-header-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -60,11 +56,7 @@ $message-colors: dv.$colors !default;
|
|||
.#{iv.$class-prefix}message {
|
||||
@extend %block;
|
||||
border-radius: cv.getVar("message-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-color-l")}
|
||||
);
|
||||
color: cv.getVar("message-color");
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
strong {
|
||||
|
|
@ -96,17 +88,11 @@ $message-colors: dv.$colors !default;
|
|||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"message-h": #{cv.getVar($name, "", "-h")},
|
||||
"message-s": #{cv.getVar($name, "", "-s")},
|
||||
"message-border-l":
|
||||
calc(
|
||||
#{cv.getVar($name, "", "-l")} + #{cv.getVar(
|
||||
"message-border-l-delta"
|
||||
)}
|
||||
),
|
||||
"message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
|
||||
"message-header-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"message-background-color": #{cv.getVar($name, "", "-light")},
|
||||
"message-border-color": #{cv.getVar($name)},
|
||||
"message-color": #{cv.getVar($name, "", "-on-scheme")},
|
||||
"message-header-background-color": #{cv.getVar($name)},
|
||||
"message-header-color": #{cv.getVar($name, "", "-invert")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -115,18 +101,10 @@ $message-colors: dv.$colors !default;
|
|||
|
||||
.#{iv.$class-prefix}message-header {
|
||||
align-items: center;
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-background-l")}
|
||||
);
|
||||
background-color: cv.getVar("message-header-background-color");
|
||||
border-start-start-radius: cv.getVar("message-header-radius");
|
||||
border-start-end-radius: cv.getVar("message-header-radius");
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-color-l")}
|
||||
);
|
||||
color: cv.getVar("message-header-color");
|
||||
display: flex;
|
||||
font-weight: cv.getVar("message-header-weight");
|
||||
justify-content: space-between;
|
||||
|
|
@ -144,37 +122,30 @@ $message-colors: dv.$colors !default;
|
|||
border-width: cv.getVar("message-header-body-border-width");
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: cv.getVar("message-radius");
|
||||
border-end-start-radius: cv.getVar("message-radius");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}message-body {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-background-l")}
|
||||
);
|
||||
border-inline-start-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-border-l")}
|
||||
from #{cv.getVar("message-background-color")} h s #{cv.getVar(
|
||||
"message-background-l"
|
||||
)}
|
||||
);
|
||||
border-inline-start-color: cv.getVar("message-border-color");
|
||||
border-inline-start-style: #{cv.getVar("message-border-style")};
|
||||
border-inline-start-width: #{cv.getVar("message-border-width")};
|
||||
border-radius: cv.getVar("message-body-radius");
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: cv.getVar("message-radius");
|
||||
border-end-end-radius: cv.getVar("message-radius");
|
||||
border-end-start-radius: 0;
|
||||
padding: cv.getVar("message-body-padding");
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-color-l")}
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("message-h")},
|
||||
#{cv.getVar("message-s")},
|
||||
#{cv.getVar("message-header-background-l")}
|
||||
);
|
||||
background-color: cv.getVar("message-header-color");
|
||||
color: cv.getVar("message-header-background-color");
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@
|
|||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$navbar-h: cv.getVar("scheme-h") !default;
|
||||
$navbar-s: cv.getVar("scheme-s") !default;
|
||||
$navbar-l: cv.getVar("scheme-main-l") !default;
|
||||
$navbar-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-box-shadow-size: 0 0.125em 0 0 !default;
|
||||
$navbar-box-shadow-color: cv.getVar("background") !default;
|
||||
|
|
@ -16,34 +13,34 @@ $navbar-padding-horizontal: 2rem !default;
|
|||
$navbar-z: 30 !default;
|
||||
$navbar-fixed-z: 30 !default;
|
||||
|
||||
$navbar-item-background-a: 0 !default;
|
||||
$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
|
||||
$navbar-item-background-l-delta: 0% !default;
|
||||
$navbar-item-hover-background-l-delta: cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
$navbar-item-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-item-color: cv.getVar("text") !default;
|
||||
$navbar-item-hover-background-color: hsl(
|
||||
from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$navbar-item-active-background-l-delta: cv.getVar(
|
||||
"active-background-l-delta"
|
||||
$navbar-item-hover-color: cv.getVar("text-strong") !default;
|
||||
$navbar-item-active-background-color: hsl(
|
||||
from #{cv.getVar("navbar-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$navbar-item-color-l: cv.getVar("text-l") !default;
|
||||
$navbar-item-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-item-color-l")}
|
||||
$navbar-item-active-color: cv.getVar("text-strong") !default;
|
||||
$navbar-item-selected-background-color: cv.getVar("link") !default;
|
||||
$navbar-item-selected-color: cv.getVar("link-invert") !default;
|
||||
$navbar-item-selected-hover-background-color: hsl(
|
||||
from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$navbar-item-selected-active-background-color: hsl(
|
||||
from #{cv.getVar("navbar-item-selected-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$navbar-item-selected-h: cv.getVar("link-h") !default;
|
||||
$navbar-item-selected-s: cv.getVar("link-s") !default;
|
||||
$navbar-item-selected-l: cv.getVar("link-l") !default;
|
||||
$navbar-item-selected-background-l: cv.getVar("link-l") !default;
|
||||
$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
|
||||
$navbar-item-img-max-height: 1.75rem !default;
|
||||
|
||||
$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
|
||||
$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
|
||||
$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
|
||||
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
|
||||
$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
|
||||
|
||||
$navbar-burger-color: cv.getVar("link") !default;
|
||||
|
||||
$navbar-tab-hover-background-color: transparent !default;
|
||||
|
|
@ -55,12 +52,7 @@ $navbar-tab-active-border-bottom-style: solid !default;
|
|||
$navbar-tab-active-border-bottom-width: 0.1875em !default;
|
||||
|
||||
$navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-dropdown-border-l: cv.getVar("border-l") !default;
|
||||
$navbar-dropdown-border-color: hsl(
|
||||
cv.getVar("navbar-h"),
|
||||
cv.getVar("navbar-s"),
|
||||
cv.getVar("navbar-dropdown-border-l")
|
||||
) !default;
|
||||
$navbar-dropdown-border-color: cv.getVar("border") !default;
|
||||
$navbar-dropdown-border-style: solid !default;
|
||||
$navbar-dropdown-border-width: 0.125em !default;
|
||||
$navbar-dropdown-offset: -0.25em !default;
|
||||
|
|
@ -68,6 +60,20 @@ $navbar-dropdown-arrow: cv.getVar("link") !default;
|
|||
$navbar-dropdown-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-z: 20 !default;
|
||||
|
||||
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
|
||||
$navbar-dropdown-item-background-color: cv.getVar("scheme-main") !default;
|
||||
$navbar-dropdown-item-color: cv.getVar("text") !default;
|
||||
$navbar-dropdown-item-hover-background-color: hsl(
|
||||
from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
$navbar-dropdown-item-active-background-color: hsl(
|
||||
from #{cv.getVar("navbar-dropdown-item-background-color")} h s calc(l + #{cv.getVar(
|
||||
"active-background-l-delta"
|
||||
)})
|
||||
) !default;
|
||||
|
||||
$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-boxed-shadow:
|
||||
0 0.5em 0.5em
|
||||
|
|
@ -86,6 +92,7 @@ $navbar-dropdown-boxed-shadow:
|
|||
) !default;
|
||||
|
||||
$navbar-divider-background-l: cv.getVar("background-l") !default;
|
||||
$navbar-divider-background-color: cv.getVar("background") !default;
|
||||
$navbar-divider-height: 0.125em !default;
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
|
||||
|
|
@ -112,9 +119,6 @@ $navbar-colors: dv.$colors !default;
|
|||
.#{iv.$class-prefix}navbar {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{$navbar-h},
|
||||
"navbar-s": #{$navbar-s},
|
||||
"navbar-l": #{$navbar-l},
|
||||
"navbar-background-color": #{$navbar-background-color},
|
||||
"navbar-box-shadow-size": #{$navbar-box-shadow-size},
|
||||
"navbar-box-shadow-color": #{$navbar-box-shadow-color},
|
||||
|
|
@ -122,18 +126,16 @@ $navbar-colors: dv.$colors !default;
|
|||
"navbar-padding-horizontal": #{$navbar-padding-horizontal},
|
||||
"navbar-z": #{$navbar-z},
|
||||
"navbar-fixed-z": #{$navbar-fixed-z},
|
||||
"navbar-item-background-a": #{$navbar-item-background-a},
|
||||
"navbar-item-background-l": #{$navbar-item-background-l},
|
||||
"navbar-item-background-l-delta": #{$navbar-item-background-l-delta},
|
||||
"navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
|
||||
"navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
|
||||
"navbar-item-color-l": #{$navbar-item-color-l},
|
||||
"navbar-item-background-color": #{$navbar-item-background-color},
|
||||
"navbar-item-color": #{$navbar-item-color},
|
||||
"navbar-item-selected-h": #{$navbar-item-selected-h},
|
||||
"navbar-item-selected-s": #{$navbar-item-selected-s},
|
||||
"navbar-item-selected-l": #{$navbar-item-selected-l},
|
||||
"navbar-item-selected-background-l": #{$navbar-item-selected-background-l},
|
||||
"navbar-item-selected-color-l": #{$navbar-item-selected-color-l},
|
||||
"navbar-item-hover-background-color": #{$navbar-item-hover-background-color},
|
||||
"navbar-item-hover-color": #{$navbar-item-hover-color},
|
||||
"navbar-item-active-background-color": #{$navbar-item-active-background-color},
|
||||
"navbar-item-active-color": #{$navbar-item-active-color},
|
||||
"navbar-item-selected-background-color": #{$navbar-item-selected-background-color},
|
||||
"navbar-item-selected-color": #{$navbar-item-selected-color},
|
||||
"navbar-item-selected-hover-background-color": #{$navbar-item-selected-hover-background-color},
|
||||
"navbar-item-selected-active-background-color": #{$navbar-item-selected-active-background-color},
|
||||
"navbar-item-img-max-height": #{$navbar-item-img-max-height},
|
||||
"navbar-burger-color": #{$navbar-burger-color},
|
||||
"navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
|
||||
|
|
@ -144,7 +146,6 @@ $navbar-colors: dv.$colors !default;
|
|||
"navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
|
||||
"navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
|
||||
"navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
|
||||
"navbar-dropdown-border-l": #{$navbar-dropdown-border-l},
|
||||
"navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
|
||||
"navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
|
||||
"navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
|
||||
|
|
@ -152,14 +153,15 @@ $navbar-colors: dv.$colors !default;
|
|||
"navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
|
||||
"navbar-dropdown-radius": #{$navbar-dropdown-radius},
|
||||
"navbar-dropdown-z": #{$navbar-dropdown-z},
|
||||
"navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
|
||||
"navbar-dropdown-item-background-color": #{$navbar-dropdown-item-background-color},
|
||||
"navbar-dropdown-item-color": #{$navbar-dropdown-item-color},
|
||||
"navbar-dropdown-item-hover-background-color": #{$navbar-dropdown-item-hover-background-color},
|
||||
"navbar-dropdown-item-active-background-color": #{$navbar-dropdown-item-active-background-color},
|
||||
"navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
|
||||
"navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
|
||||
"navbar-dropdown-item-h": #{$navbar-dropdown-item-h},
|
||||
"navbar-dropdown-item-s": #{$navbar-dropdown-item-s},
|
||||
"navbar-dropdown-item-l": #{$navbar-dropdown-item-l},
|
||||
"navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
|
||||
"navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l},
|
||||
"navbar-divider-background-l": #{$navbar-divider-background-l},
|
||||
"navbar-divider-background-color": #{$navbar-divider-background-color},
|
||||
"navbar-divider-height": #{$navbar-divider-height},
|
||||
"navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
|
||||
)
|
||||
|
|
@ -176,31 +178,61 @@ $navbar-colors: dv.$colors !default;
|
|||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-s": #{cv.getVar($name, "", "-s")},
|
||||
"navbar-l": #{cv.getVar($name, "", "-l")},
|
||||
"burger-h": #{cv.getVar($name, "", "-h")},
|
||||
"burger-s": #{cv.getVar($name, "", "-s")},
|
||||
"burger-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-background-color": #{cv.getVar($name)},
|
||||
"navbar-item-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-item-selected-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-item-selected-s": #{cv.getVar($name, "", "-s")},
|
||||
"navbar-item-selected-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")},
|
||||
"navbar-dropdown-background-color":
|
||||
hsl(
|
||||
#{cv.getVar($name, "", "-h")},
|
||||
#{cv.getVar($name, "", "-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")}
|
||||
),
|
||||
"navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")},
|
||||
"navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")},
|
||||
"navbar-item-background-color": #{cv.getVar($name)},
|
||||
"navbar-item-color": #{cv.getVar($name, "", "-invert")},
|
||||
"navbar-item-hover-color": #{cv.getVar($name, "", "-invert")},
|
||||
"navbar-item-active-color": #{cv.getVar($name, "", "-invert")},
|
||||
"navbar-item-selected-background-color": #{cv.getVar($name)},
|
||||
"navbar-item-selected-color": #{cv.getVar($name, "", "-invert")},
|
||||
"navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert")},
|
||||
"navbar-dropdown-border-color": #{cv.getVar($name, "", "-on-scheme")},
|
||||
"navbar-dropdown-item-color": #{cv.getVar($name, "", "-on-scheme")},
|
||||
)
|
||||
);
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
&:not(.is-active, .is-selected) {
|
||||
background-color: hsl(
|
||||
from cv.getVar($name)
|
||||
h
|
||||
s
|
||||
cv.getVar("navbar-dropdown-item-background-l")
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(
|
||||
from cv.getVar($name)
|
||||
h
|
||||
s
|
||||
calc(
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")} +
|
||||
#{cv.getVar("hover-background-l-delta")}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: hsl(
|
||||
from cv.getVar($name)
|
||||
h
|
||||
s
|
||||
calc(
|
||||
cv.getVar("navbar-dropdown-item-background-l") +
|
||||
cv.getVar("active-background-l-delta")
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
background-color: hsl(
|
||||
from cv.getVar($name) h s cv.getVar("navbar-divider-background-l")
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -296,56 +328,37 @@ body {
|
|||
|
||||
a.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
background-color: hsla(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
),
|
||||
#{cv.getVar("navbar-item-background-a")}
|
||||
);
|
||||
background-color: cv.getVar("navbar-item-background-color");
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-l-delta": #{cv.getVar(
|
||||
"navbar-item-hover-background-l-delta"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("navbar-item-hover-background-color");
|
||||
color: cv.getVar("navbar-item-hover-color");
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-l-delta": #{cv.getVar(
|
||||
"navbar-item-active-background-l-delta"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("navbar-item-active-background-color");
|
||||
color: cv.getVar("navbar-item-active-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar("navbar-item-selected-h")},
|
||||
"navbar-s": #{cv.getVar("navbar-item-selected-s")},
|
||||
"navbar-l": #{cv.getVar("navbar-item-selected-l")},
|
||||
"navbar-item-background-l": #{cv.getVar(
|
||||
"navbar-item-selected-background-l"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
"navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("navbar-item-selected-background-color");
|
||||
color: cv.getVar("navbar-item-selected-color");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar(
|
||||
"navbar-item-selected-hover-background-color"
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: cv.getVar(
|
||||
"navbar-item-selected-active-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -417,30 +430,26 @@ a.#{iv.$class-prefix}navbar-item,
|
|||
padding-right: 1.5rem;
|
||||
|
||||
&:not(.is-active, .is-selected) {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-color-l")}
|
||||
);
|
||||
background-color: cv.getVar("navbar-dropdown-item-background-color");
|
||||
color: cv.getVar("navbar-dropdown-item-color");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar(
|
||||
"navbar-dropdown-item-hover-background-color"
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: cv.getVar(
|
||||
"navbar-dropdown-item-active-background-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-divider-background-l")}
|
||||
);
|
||||
background-color: cv.getVar("navbar-divider-background-color");
|
||||
border: none;
|
||||
display: none;
|
||||
height: cv.getVar("navbar-divider-height");
|
||||
|
|
@ -561,31 +570,31 @@ a.#{iv.$class-prefix}navbar-item,
|
|||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
a.#{iv.$class-prefix}navbar-item {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
// background-color: hsl(
|
||||
// #{cv.getVar("navbar-h")},
|
||||
// #{cv.getVar("navbar-s")},
|
||||
// calc(
|
||||
// #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
|
||||
// "navbar-item-background-l-delta"
|
||||
// )}
|
||||
// )
|
||||
// );
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-h": #{cv.getVar("navbar-item-selected-h")},
|
||||
"navbar-s": #{cv.getVar("navbar-item-selected-s")},
|
||||
"navbar-l": #{cv.getVar("navbar-item-selected-l")},
|
||||
"navbar-item-background-l": #{cv.getVar(
|
||||
"navbar-item-selected-background-l"
|
||||
)},
|
||||
"navbar-item-color-l": #{cv.getVar(
|
||||
"navbar-item-selected-color-l"
|
||||
)},
|
||||
)
|
||||
);
|
||||
// @include cv.register-vars(
|
||||
// (
|
||||
// "navbar-h": #{cv.getVar("navbar-item-selected-h")},
|
||||
// "navbar-s": #{cv.getVar("navbar-item-selected-s")},
|
||||
// "navbar-l": #{cv.getVar("navbar-item-selected-l")},
|
||||
// "navbar-item-background-l": #{cv.getVar(
|
||||
// "navbar-item-selected-background-l"
|
||||
// )},
|
||||
// "navbar-item-color-l": #{cv.getVar(
|
||||
// "navbar-item-selected-color-l"
|
||||
// )},
|
||||
// )
|
||||
// );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -688,23 +697,6 @@ a.#{iv.$class-prefix}navbar-item,
|
|||
|
||||
a.#{iv.$class-prefix}navbar-item {
|
||||
padding-inline-end: 3rem;
|
||||
|
||||
&:not(.is-active, .is-selected) {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
|
||||
"navbar-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-dropdown-item-h")},
|
||||
#{cv.getVar("navbar-dropdown-item-s")},
|
||||
#{cv.getVar("navbar-dropdown-item-color-l")}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@
|
|||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$tag-h: cv.getVar("scheme-h");
|
||||
$tag-s: cv.getVar("scheme-s");
|
||||
$tag-background-l: cv.getVar("background-l");
|
||||
$tag-background-l-delta: 0%;
|
||||
$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$tag-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$tag-color-l: cv.getVar("text-l");
|
||||
$tag-color: cv.getVar("text");
|
||||
$tag-background-color: cv.getVar("background");
|
||||
$tag-radius: cv.getVar("radius") !default;
|
||||
$tag-delete-margin: 1px !default;
|
||||
|
||||
|
|
@ -20,7 +17,7 @@ $tag-colors: dv.$colors !default;
|
|||
@extend %block;
|
||||
|
||||
align-items: center;
|
||||
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
|
||||
color: cv.getVar("tag-color");
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -72,28 +69,17 @@ $tag-colors: dv.$colors !default;
|
|||
.#{iv.$class-prefix}tag {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-h": #{$tag-h},
|
||||
"tag-s": #{$tag-s},
|
||||
"tag-background-l": #{$tag-background-l},
|
||||
"tag-background-l-delta": #{$tag-background-l-delta},
|
||||
"tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
|
||||
"tag-active-background-l-delta": #{$tag-active-background-l-delta},
|
||||
"tag-color-l": #{$tag-color-l},
|
||||
"tag-background-color": #{$tag-background-color},
|
||||
"tag-color": #{$tag-color},
|
||||
"tag-radius": #{$tag-radius},
|
||||
"tag-delete-margin": #{$tag-delete-margin},
|
||||
)
|
||||
);
|
||||
|
||||
align-items: center;
|
||||
background-color: hsl(
|
||||
cv.getVar("tag-h"),
|
||||
cv.getVar("tag-s"),
|
||||
calc(
|
||||
#{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
|
||||
)
|
||||
);
|
||||
background-color: cv.getVar("tag-background-color");
|
||||
border-radius: $tag-radius;
|
||||
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
|
||||
color: cv.getVar("tag-color");
|
||||
display: inline-flex;
|
||||
font-size: cv.getVar("size-small");
|
||||
height: 2em;
|
||||
|
|
@ -113,18 +99,16 @@ $tag-colors: dv.$colors !default;
|
|||
&.#{iv.$class-prefix}is-#{$name} {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-h": #{cv.getVar($name, "", "-h")},
|
||||
"tag-s": #{cv.getVar($name, "", "-s")},
|
||||
"tag-background-l": #{cv.getVar($name, "", "-l")},
|
||||
"tag-color-l": #{cv.getVar($name, "", "-invert-l")},
|
||||
"tag-background-color": cv.getVar($name),
|
||||
"tag-color": #{cv.getVar($name, "", "-invert")},
|
||||
)
|
||||
);
|
||||
|
||||
&.#{iv.$class-prefix}is-light {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tag-background-l": #{cv.getVar("light-l")},
|
||||
"tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
||||
"tag-background-color": #{cv.getVar($name, "", "-light")},
|
||||
"tag-color": #{cv.getVar($name, "", "-light-invert")},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
@use "setup";
|
||||
|
||||
// The main lightness of this theme
|
||||
$scheme-main-l: 9%;
|
||||
$background-l: 14%;
|
||||
$scheme-main-l: 9;
|
||||
$background-l: 14;
|
||||
$text-l: 71%;
|
||||
|
||||
// The main scheme color, used to make calculations
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
||||
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
|
||||
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l * 1%);
|
||||
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
|
||||
|
||||
@mixin dark-theme {
|
||||
|
|
@ -30,8 +30,8 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
|
|||
(
|
||||
"scheme-brightness": "dark",
|
||||
"scheme-main-l": $scheme-main-l,
|
||||
"scheme-main-bis-l": $scheme-main-l + 2%,
|
||||
"scheme-main-ter-l": $scheme-main-l + 4%,
|
||||
"scheme-main-bis-l": $scheme-main-l + 2,
|
||||
"scheme-main-ter-l": $scheme-main-l + 4,
|
||||
"soft-l": iv.$dark-l,
|
||||
"bold-l": iv.$light-l,
|
||||
"soft-invert-l": iv.$light-l,
|
||||
|
|
@ -44,10 +44,13 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
|
|||
"text-strong-l": 93%,
|
||||
"text-title-l": 100%,
|
||||
"hover-background-l-delta": 5%,
|
||||
"focus-background-l-delta": 5%,
|
||||
"active-background-l-delta": 10%,
|
||||
"hover-border-l-delta": 10%,
|
||||
"focus-border-l-delta": 10%,
|
||||
"active-border-l-delta": 20%,
|
||||
"hover-color-l-delta": 5%,
|
||||
"focus-color-l-delta": 5%,
|
||||
"active-color-l-delta": 10%,
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
@use "setup";
|
||||
|
||||
// The main lightness of this theme
|
||||
$scheme-main-l: 100%;
|
||||
$scheme-main-l: 100;
|
||||
|
||||
// The main scheme color, used to make calculations
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l * 1%);
|
||||
|
||||
@mixin light-theme {
|
||||
@include cv.register-vars(
|
||||
|
|
@ -27,16 +27,20 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
|||
"bold-invert-l": iv.$light-l,
|
||||
|
||||
// Deltas
|
||||
"hover-background-l-delta": -5%,
|
||||
"active-background-l-delta": -10%,
|
||||
"hover-background-l-delta": -5,
|
||||
"focus-background-l-delta": -5,
|
||||
"active-background-l-delta": -10,
|
||||
|
||||
"hover-border-l-delta": -10%,
|
||||
"active-border-l-delta": -20%,
|
||||
"hover-border-l-delta": -10,
|
||||
"focus-border-l-delta": -10,
|
||||
"active-border-l-delta": -20,
|
||||
|
||||
"hover-color-l-delta": -5%,
|
||||
"active-color-l-delta": -10%,
|
||||
"hover-color-l-delta": -5,
|
||||
"focus-color-l-delta": -5,
|
||||
"active-color-l-delta": -10,
|
||||
|
||||
"hover-shadow-a-delta": -0.05,
|
||||
"focus-shadow-a-delta": -0.05,
|
||||
"active-shadow-a-delta": -0.1,
|
||||
|
||||
// Light only
|
||||
|
|
@ -44,7 +48,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
|||
"scheme-main-l": $scheme-main-l,
|
||||
"scheme-main-bis-l": 98%,
|
||||
"scheme-main-ter-l": 96%,
|
||||
"background-l": 96%,
|
||||
"background-l": 96,
|
||||
"border-weak-l": 93%,
|
||||
"border-l": 86%,
|
||||
"text-weak-l": 48%,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
hsl(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-main-l")}
|
||||
calc(#{cv.getVar("scheme-main-l")} * 1%)
|
||||
),
|
||||
"scheme-main-bis":
|
||||
hsl(
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@
|
|||
@return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
|
||||
}
|
||||
|
||||
@function buildHslaString($name, $l, $a: 1) {
|
||||
@function buildHslaString($name, $l) {
|
||||
$lightness: getVar($name, "", "-l");
|
||||
@if ($l) {
|
||||
$lightness: $l;
|
||||
}
|
||||
@return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
|
||||
@return "hsl(from #{getVar($name)} h s #{$lightness})";
|
||||
}
|
||||
|
||||
@function getVar($name, $prefix: "", $suffix: "") {
|
||||
|
|
@ -124,9 +124,8 @@
|
|||
}
|
||||
|
||||
@mixin register-base-color($name, $base) {
|
||||
$hsla: buildHslaString($name, getVar($name, "", "-l"));
|
||||
@include register-var($name, $hsla);
|
||||
@include register-var($name, $hsla, "", "-base"); // Just for reference
|
||||
@include register-var($name, $base);
|
||||
@include register-var($name, $base, "", "-base"); // Just for reference
|
||||
@include register-rgb($name, $base);
|
||||
@include register-hsl($name, $base);
|
||||
}
|
||||
|
|
@ -143,7 +142,7 @@
|
|||
@mixin generate-color-palette(
|
||||
$name,
|
||||
$base,
|
||||
$scheme-main-l: 100%,
|
||||
$scheme-main-l: 100,
|
||||
$invert: null,
|
||||
$light: null,
|
||||
$dark: null
|
||||
|
|
@ -160,8 +159,9 @@
|
|||
|
||||
// Calculate digits like "40" for the scheme-main
|
||||
$scheme-l-0: 0%;
|
||||
$scheme-l-base: round($scheme-main-l % 10);
|
||||
$closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
|
||||
$scheme-l-base: round(($scheme-main-l * 1%) % 10);
|
||||
@debug $scheme-l-base;
|
||||
$closest-5: math.round(math.div(($scheme-main-l * 1%), 5)) * 5;
|
||||
$pct-to-int: math.div($closest-5, 100%) * 100;
|
||||
$scheme-main-digits: #{$pct-to-int};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue