bulma/sass/components/dropdown.scss

189 lines
6.0 KiB
SCSS
Raw Normal View History

2024-03-21 16:11:54 +00:00
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$dropdown-menu-min-width: 12rem !default;
$dropdown-content-background-color: cv.getVar("scheme-main") !default;
$dropdown-content-offset: 0.25rem !default;
$dropdown-content-padding-bottom: 0.5rem !default;
$dropdown-content-padding-top: 0.5rem !default;
$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-divider-background-color: cv.getVar("border-weak") !default;
.#{iv.$class-prefix}dropdown {
// prettier-ignore-start
@include cv.register-vars(
(
"dropdown-menu-min-width": #{$dropdown-menu-min-width},
"dropdown-content-background-color": #{$dropdown-content-background-color},
"dropdown-content-offset": #{$dropdown-content-offset},
"dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
"dropdown-content-padding-top": #{$dropdown-content-padding-top},
"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},
)
);
// prettier-ignore-end
}
.#{iv.$class-prefix}dropdown {
display: inline-flex;
position: relative;
vertical-align: top;
&.#{iv.$class-prefix}is-active,
&.#{iv.$class-prefix}is-hoverable:hover {
.#{iv.$class-prefix}dropdown-menu {
display: block;
}
}
&.#{iv.$class-prefix}is-right {
.#{iv.$class-prefix}dropdown-menu {
left: auto;
right: 0;
}
}
&.#{iv.$class-prefix}is-up {
.#{iv.$class-prefix}dropdown-menu {
bottom: 100%;
padding-bottom: cv.getVar("dropdown-content-offset");
padding-top: initial;
top: auto;
}
}
}
.#{iv.$class-prefix}dropdown-menu {
display: none;
@include mx.ltr-position(0, false);
min-width: cv.getVar("dropdown-menu-min-width");
padding-top: cv.getVar("dropdown-content-offset");
position: absolute;
top: 100%;
z-index: cv.getVar("dropdown-content-z");
}
.#{iv.$class-prefix}dropdown-content {
background-color: cv.getVar("dropdown-content-background-color");
border-radius: cv.getVar("dropdown-content-radius");
box-shadow: cv.getVar("dropdown-content-shadow");
padding-bottom: cv.getVar("dropdown-content-padding-bottom");
padding-top: cv.getVar("dropdown-content-padding-top");
}
.#{iv.$class-prefix}dropdown-item {
color: hsl(
#{cv.getVar("dropdown-item-h")},
#{cv.getVar("dropdown-item-s")},
#{cv.getVar("dropdown-item-color-l")}
);
display: block;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.375rem 1rem;
}
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"
)}
)
);
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"
)},
)
);
}
&: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"
)},
)
);
}
&.#{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")},
)
);
}
}
.#{iv.$class-prefix}dropdown-divider {
background-color: cv.getVar("dropdown-divider-background-color");
border: none;
display: block;
height: 1px;
margin: 0.5rem 0;
}