bulma/sass/components/panel.scss
Jeremy Thomas 69877a652c Init v1
2024-03-21 16:11:54 +00:00

219 lines
6.5 KiB
SCSS

@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$panel-margin: cv.getVar("block-spacing") !default;
$panel-item-border: 1px solid cv.getVar("border-weak") !default;
$panel-radius: cv.getVar("radius-large") !default;
$panel-shadow: cv.getVar("shadow") !default;
$panel-heading-line-height: 1.25 !default;
$panel-heading-padding: 1em 1.25em !default;
$panel-heading-radius: cv.getVar("radius") !default;
$panel-heading-size: 1.25em !default;
$panel-heading-weight: cv.getVar("weight-bold") !default;
$panel-tabs-font-size: 1em !default;
$panel-tab-border-bottom-color: cv.getVar("border") !default;
$panel-tab-border-bottom-style: solid !default;
$panel-tab-border-bottom-width: 1px !default;
$panel-tab-active-color: cv.getVar("link-active") !default;
$panel-list-item-color: cv.getVar("text") !default;
$panel-list-item-hover-color: cv.getVar("link") !default;
$panel-block-color: cv.getVar("text-strong") !default;
$panel-block-hover-background-color: cv.getVar("background") !default;
$panel-block-active-border-left-color: cv.getVar("link") !default;
$panel-block-active-color: cv.getVar("link-active") !default;
$panel-block-active-icon-color: cv.getVar("link") !default;
$panel-icon-color: cv.getVar("text-weak") !default;
$panel-colors: dv.$colors !default;
.#{iv.$class-prefix}panel {
@include cv.register-vars(
(
"panel-margin": #{$panel-margin},
"panel-item-border": #{$panel-item-border},
"panel-radius": #{$panel-radius},
"panel-shadow": #{$panel-shadow},
"panel-heading-line-height": #{$panel-heading-line-height},
"panel-heading-padding": #{$panel-heading-padding},
"panel-heading-radius": #{$panel-heading-radius},
"panel-heading-size": #{$panel-heading-size},
"panel-heading-weight": #{$panel-heading-weight},
"panel-tabs-font-size": #{$panel-tabs-font-size},
"panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color},
"panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style},
"panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width},
"panel-tab-active-color": #{$panel-tab-active-color},
"panel-list-item-color": #{$panel-list-item-color},
"panel-list-item-hover-color": #{$panel-list-item-hover-color},
"panel-block-color": #{$panel-block-color},
"panel-block-hover-background-color": #{$panel-block-hover-background-color},
"panel-block-active-border-left-color": #{$panel-block-active-border-left-color},
"panel-block-active-color": #{$panel-block-active-color},
"panel-block-active-icon-color": #{$panel-block-active-icon-color},
"panel-icon-color": #{$panel-icon-color},
)
);
}
.#{iv.$class-prefix}panel {
@include cv.register-vars(
(
"panel-h": #{cv.getVar("scheme-h")},
"panel-s": #{cv.getVar("scheme-s")},
"panel-color-l": #{cv.getVar("text-l")},
"panel-heading-background-l": #{cv.getVar("text-l")},
"panel-heading-color-l": #{cv.getVar("text-invert-l")},
)
);
border-radius: cv.getVar("panel-radius");
box-shadow: cv.getVar("panel-shadow");
font-size: cv.getVar("size-normal");
&:not(:last-child) {
margin-bottom: cv.getVar("panel-margin");
}
// Colors
@each $name, $components in $panel-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"panel-h": #{cv.getVar($name, "", "-h")},
"panel-s": #{cv.getVar($name, "", "-s")},
"panel-color-l": #{cv.getVar($name, "", "-l")},
"panel-heading-background-l": #{cv.getVar($name, "", "-l")},
"panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
)
);
}
}
}
.#{iv.$class-prefix}panel-tabs,
.#{iv.$class-prefix}panel-block {
&:not(:last-child) {
border-bottom: cv.getVar("panel-item-border");
}
}
.#{iv.$class-prefix}panel-heading {
background-color: hsl(
cv.getVar("panel-h"),
cv.getVar("panel-s"),
cv.getVar("panel-heading-background-l")
);
border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0;
color: hsl(
cv.getVar("panel-h"),
cv.getVar("panel-s"),
cv.getVar("panel-heading-color-l")
);
font-size: cv.getVar("panel-heading-size");
font-weight: cv.getVar("panel-heading-weight");
line-height: cv.getVar("panel-heading-line-height");
padding: cv.getVar("panel-heading-padding");
}
.#{iv.$class-prefix}panel-tabs {
align-items: flex-end;
display: flex;
font-size: cv.getVar("panel-tabs-font-size");
justify-content: center;
a {
border-bottom-color: cv.getVar("panel-tab-border-bottom-color");
border-bottom-style: cv.getVar("panel-tab-border-bottom-style");
border-bottom-width: cv.getVar("panel-tab-border-bottom-width");
margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width});
padding: 0.75em;
// Modifiers
&.#{iv.$class-prefix}is-active {
border-bottom-color: hsl(
cv.getVar("panel-h"),
cv.getVar("panel-s"),
cv.getVar("panel-color-l")
);
color: cv.getVar("panel-tab-active-color");
}
}
}
.#{iv.$class-prefix}panel-list {
a {
color: cv.getVar("panel-list-item-color");
&:hover {
color: cv.getVar("panel-list-item-hover-color");
}
}
}
.#{iv.$class-prefix}panel-block {
align-items: center;
color: cv.getVar("panel-block-color");
display: flex;
justify-content: flex-start;
padding: 0.75em 1em;
input[type="checkbox"] {
margin-inline-end: 0.75em;
}
& > .#{iv.$class-prefix}control {
flex-grow: 1;
flex-shrink: 1;
width: 100%;
}
&.#{iv.$class-prefix}is-wrapped {
flex-wrap: wrap;
}
&.#{iv.$class-prefix}is-active {
border-left-color: cv.getVar("panel-block-active-border-left-color");
color: cv.getVar("panel-block-active-color");
.#{iv.$class-prefix}panel-icon {
color: hsl(
cv.getVar("panel-h"),
cv.getVar("panel-s"),
cv.getVar("panel-color-l")
);
}
}
&:last-child {
border-bottom-left-radius: cv.getVar("panel-radius");
border-bottom-right-radius: cv.getVar("panel-radius");
}
}
a.#{iv.$class-prefix}panel-block,
label.#{iv.$class-prefix}panel-block {
cursor: pointer;
&:hover {
background-color: cv.getVar("panel-block-hover-background-color");
}
}
.#{iv.$class-prefix}panel-icon {
@include mx.fa(1em, 1em);
color: cv.getVar("panel-icon-color");
margin-inline-end: 0.75em;
.#{iv.$class-prefix}fa {
font-size: inherit;
line-height: inherit;
}
}