refactor: rename style to styles
This commit is contained in:
13
styles/bulma/sass/components/_index.scss
Normal file
13
styles/bulma/sass/components/_index.scss
Normal file
@ -0,0 +1,13 @@
|
||||
/* Bulma Components */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "breadcrumb";
|
||||
@forward "card";
|
||||
@forward "dropdown";
|
||||
@forward "menu";
|
||||
@forward "message";
|
||||
@forward "modal";
|
||||
@forward "navbar";
|
||||
@forward "pagination";
|
||||
@forward "panel";
|
||||
@forward "tabs";
|
||||
139
styles/bulma/sass/components/breadcrumb.scss
Normal file
139
styles/bulma/sass/components/breadcrumb.scss
Normal file
@ -0,0 +1,139 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins";
|
||||
|
||||
$breadcrumb-item-color: cv.getVar("link-text") !default;
|
||||
$breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default;
|
||||
$breadcrumb-item-active-color: cv.getVar("link-text-active") !default;
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default;
|
||||
$breadcrumb-item-padding-horizontal: 0.75em !default;
|
||||
|
||||
$breadcrumb-item-separator-color: cv.getVar("border") !default;
|
||||
|
||||
.#{iv.$class-prefix}breadcrumb {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"breadcrumb-item-color": #{$breadcrumb-item-color},
|
||||
"breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color},
|
||||
"breadcrumb-item-active-color": #{$breadcrumb-item-active-color},
|
||||
"breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical},
|
||||
"breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal},
|
||||
"breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}breadcrumb {
|
||||
@extend %block;
|
||||
@extend %unselectable;
|
||||
font-size: cv.getVar("size-normal");
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: cv.getVar("breadcrumb-item-color");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("breadcrumb-item-padding-vertical")
|
||||
cv.getVar("breadcrumb-item-padding-horizontal");
|
||||
|
||||
&:hover {
|
||||
color: cv.getVar("breadcrumb-item-hover-color");
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
&:first-child a {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
color: cv.getVar("breadcrumb-item-active-color");
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + li::before {
|
||||
color: cv.getVar("breadcrumb-item-separator-color");
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:first-child {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
ol,
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
ol,
|
||||
ul {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.#{iv.$class-prefix}has-arrow-separator {
|
||||
li + li::before {
|
||||
content: "→";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-bullet-separator {
|
||||
li + li::before {
|
||||
content: "•";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dot-separator {
|
||||
li + li::before {
|
||||
content: "·";
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-succeeds-separator {
|
||||
li + li::before {
|
||||
content: "≻";
|
||||
}
|
||||
}
|
||||
}
|
||||
162
styles/bulma/sass/components/card.scss
Normal file
162
styles/bulma/sass/components/card.scss
Normal file
@ -0,0 +1,162 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$card-color: cv.getVar("text") !default;
|
||||
$card-background-color: cv.getVar("scheme-main") !default;
|
||||
$card-shadow: cv.getVar("shadow") !default;
|
||||
$card-radius: 0.75rem !default;
|
||||
|
||||
$card-header-background-color: transparent !default;
|
||||
$card-header-color: cv.getVar("text-strong") !default;
|
||||
$card-header-padding: 0.75rem 1rem !default;
|
||||
$card-header-shadow: 0 0.125em 0.25em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
) !default;
|
||||
$card-header-weight: cv.getVar("weight-bold") !default;
|
||||
|
||||
$card-content-background-color: transparent !default;
|
||||
$card-content-padding: 1.5rem !default;
|
||||
|
||||
$card-footer-background-color: transparent !default;
|
||||
$card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
|
||||
$card-footer-padding: 0.75rem !default;
|
||||
|
||||
$card-media-margin: cv.getVar("block-spacing") !default;
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"card-color": #{$card-color},
|
||||
"card-background-color": #{$card-background-color},
|
||||
"card-shadow": #{$card-shadow},
|
||||
"card-radius": #{$card-radius},
|
||||
"card-header-background-color": #{$card-header-background-color},
|
||||
"card-header-color": #{$card-header-color},
|
||||
"card-header-padding": #{$card-header-padding},
|
||||
"card-header-shadow": #{$card-header-shadow},
|
||||
"card-header-weight": #{$card-header-weight},
|
||||
"card-content-background-color": #{$card-content-background-color},
|
||||
"card-content-padding": #{$card-content-padding},
|
||||
"card-footer-background-color": #{$card-footer-background-color},
|
||||
"card-footer-border-top": #{$card-footer-border-top},
|
||||
"card-footer-padding": #{$card-footer-padding},
|
||||
"card-media-margin": #{$card-media-margin},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
@extend %block;
|
||||
background-color: cv.getVar("card-background-color");
|
||||
border-radius: cv.getVar("card-radius");
|
||||
box-shadow: cv.getVar("card-shadow");
|
||||
color: cv.getVar("card-color");
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
%card-item {
|
||||
&:first-child {
|
||||
border-start-start-radius: cv.getVar("card-radius");
|
||||
border-start-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-end-start-radius: cv.getVar("card-radius");
|
||||
border-end-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header {
|
||||
@extend %card-item;
|
||||
background-color: cv.getVar("card-header-background-color");
|
||||
align-items: stretch;
|
||||
box-shadow: cv.getVar("card-header-shadow");
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header-title {
|
||||
align-items: center;
|
||||
color: cv.getVar("card-header-color");
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-weight: cv.getVar("card-header-weight");
|
||||
padding: cv.getVar("card-header-padding");
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-header-icon {
|
||||
@include mx.reset;
|
||||
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("card-header-padding");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
img {
|
||||
border-start-start-radius: cv.getVar("card-radius");
|
||||
border-start-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
img {
|
||||
border-end-start-radius: cv.getVar("card-radius");
|
||||
border-end-end-radius: cv.getVar("card-radius");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-content {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: cv.getVar("card-content-background-color");
|
||||
padding: cv.getVar("card-content-padding");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-footer {
|
||||
@extend %card-item;
|
||||
|
||||
background-color: cv.getVar("card-footer-background-color");
|
||||
border-top: cv.getVar("card-footer-border-top");
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}card-footer-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
padding: cv.getVar("card-footer-padding");
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: cv.getVar("card-footer-border-top");
|
||||
}
|
||||
}
|
||||
|
||||
// Combinations
|
||||
|
||||
.#{iv.$class-prefix}card {
|
||||
.#{iv.$class-prefix}media:not(:last-child) {
|
||||
margin-bottom: cv.getVar("card-media-margin");
|
||||
}
|
||||
}
|
||||
188
styles/bulma/sass/components/dropdown.scss
Normal file
188
styles/bulma/sass/components/dropdown.scss
Normal file
@ -0,0 +1,188 @@
|
||||
@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;
|
||||
}
|
||||
165
styles/bulma/sass/components/menu.scss
Normal file
165
styles/bulma/sass/components/menu.scss
Normal file
@ -0,0 +1,165 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@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-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;
|
||||
$menu-list-link-padding: 0.5em 0.75em !default;
|
||||
$menu-nested-list-margin: 0.75em !default;
|
||||
$menu-nested-list-padding-left: 0.75em !default;
|
||||
|
||||
$menu-label-color: cv.getVar("text-weak") !default;
|
||||
$menu-label-font-size: 0.75em !default;
|
||||
$menu-label-letter-spacing: 0.1em !default;
|
||||
$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-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},
|
||||
"menu-nested-list-margin": #{$menu-nested-list-margin},
|
||||
"menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
|
||||
"menu-label-color": #{$menu-label-color},
|
||||
"menu-label-font-size": #{$menu-label-font-size},
|
||||
"menu-label-letter-spacing": #{$menu-label-letter-spacing},
|
||||
"menu-label-spacing": #{$menu-label-spacing},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu {
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu-list {
|
||||
line-height: cv.getVar("menu-list-line-height");
|
||||
|
||||
a,
|
||||
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"
|
||||
)}
|
||||
)
|
||||
);
|
||||
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")}
|
||||
);
|
||||
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"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"menu-item-background-l-delta": #{cv.getVar(
|
||||
"menu-item-active-background-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// 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")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
ul {
|
||||
border-inline-start: cv.getVar("menu-list-border-left");
|
||||
margin: cv.getVar("menu-nested-list-margin");
|
||||
padding-inline-start: cv.getVar("menu-nested-list-padding-left");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}menu-label {
|
||||
color: cv.getVar("menu-label-color");
|
||||
font-size: cv.getVar("menu-label-font-size");
|
||||
letter-spacing: cv.getVar("menu-label-letter-spacing");
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: cv.getVar("menu-label-spacing");
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: cv.getVar("menu-label-spacing");
|
||||
}
|
||||
}
|
||||
183
styles/bulma/sass/components/message.scss
Normal file
183
styles/bulma/sass/components/message.scss
Normal file
@ -0,0 +1,183 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$message-h: cv.getVar("scheme-h");
|
||||
$message-s: cv.getVar("scheme-s");
|
||||
$message-background-l: cv.getVar("background-l");
|
||||
$message-border-l: cv.getVar("border-l");
|
||||
$message-border-l-delta: -20% !default;
|
||||
$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-weight: cv.getVar("weight-semibold") !default;
|
||||
$message-header-padding: 1em 1.25em !default;
|
||||
$message-header-radius: cv.getVar("radius") !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-pre-code-background-color: transparent !default;
|
||||
|
||||
$message-header-body-border-width: 0 !default;
|
||||
$message-colors: dv.$colors !default;
|
||||
|
||||
.#{iv.$class-prefix}message {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"message-border-l-delta": #{$message-border-l-delta},
|
||||
"message-radius": #{$message-radius},
|
||||
"message-header-weight": #{$message-header-weight},
|
||||
"message-header-padding": #{$message-header-padding},
|
||||
"message-header-radius": #{$message-header-radius},
|
||||
"message-body-border-width": #{$message-body-border-width},
|
||||
"message-body-color": #{$message-body-color},
|
||||
"message-body-padding": #{$message-body-padding},
|
||||
"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},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{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")}
|
||||
);
|
||||
font-size: cv.getVar("size-normal");
|
||||
|
||||
strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not(
|
||||
.#{iv.$class-prefix}dropdown-item
|
||||
) {
|
||||
color: currentColor;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
// Colors
|
||||
@each $name, $components in $message-colors {
|
||||
&.#{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")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{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")}
|
||||
);
|
||||
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")}
|
||||
);
|
||||
display: flex;
|
||||
font-weight: cv.getVar("message-header-weight");
|
||||
justify-content: space-between;
|
||||
line-height: 1.25;
|
||||
padding: cv.getVar("message-header-padding");
|
||||
position: relative;
|
||||
|
||||
.#{iv.$class-prefix}delete {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: 0.75em;
|
||||
}
|
||||
|
||||
& + .#{iv.$class-prefix}message-body {
|
||||
border-width: cv.getVar("message-header-body-border-width");
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{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")}
|
||||
);
|
||||
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");
|
||||
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")}
|
||||
);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: cv.getVar("message-body-pre-code-background-color");
|
||||
}
|
||||
}
|
||||
164
styles/bulma/sass/components/modal.scss
Normal file
164
styles/bulma/sass/components/modal.scss
Normal file
@ -0,0 +1,164 @@
|
||||
@use "../utilities/css-variables" as cv;
|
||||
@use "../utilities/derived-variables" as dv;
|
||||
@use "../utilities/initial-variables" as iv;
|
||||
@use "../utilities/extends";
|
||||
@use "../utilities/mixins" as mx;
|
||||
|
||||
$modal-z: 40 !default;
|
||||
|
||||
$modal-background-background-color: hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.86
|
||||
) !default;
|
||||
|
||||
$modal-content-width: 40rem !default;
|
||||
$modal-content-margin-mobile: 1.25rem !default;
|
||||
$modal-content-spacing-mobile: 10rem !default;
|
||||
$modal-content-spacing-tablet: 2.5rem !default;
|
||||
|
||||
$modal-close-dimensions: 2.5rem !default;
|
||||
$modal-close-right: 1.25rem !default;
|
||||
$modal-close-top: 1.25rem !default;
|
||||
|
||||
$modal-card-spacing: 2.5rem !default;
|
||||
|
||||
$modal-card-head-background-color: cv.getVar("scheme-main") !default;
|
||||
$modal-card-head-padding: 2rem !default;
|
||||
$modal-card-head-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$modal-card-title-color: cv.getVar("text-strong") !default;
|
||||
$modal-card-title-line-height: 1 !default;
|
||||
$modal-card-title-size: cv.getVar("size-4") !default;
|
||||
|
||||
$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default;
|
||||
$modal-card-foot-radius: cv.getVar("radius-large") !default;
|
||||
|
||||
$modal-card-body-background-color: cv.getVar("scheme-main") !default;
|
||||
$modal-card-body-padding: 2rem !default;
|
||||
|
||||
$modal-breakpoint: iv.$tablet !default;
|
||||
|
||||
.#{iv.$class-prefix}modal {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"modal-z": #{$modal-z},
|
||||
"modal-background-background-color": #{$modal-background-background-color},
|
||||
"modal-content-width": #{$modal-content-width},
|
||||
"modal-content-margin-mobile": #{$modal-content-margin-mobile},
|
||||
"modal-content-spacing-mobile": #{$modal-content-spacing-mobile},
|
||||
"modal-content-spacing-tablet": #{$modal-content-spacing-tablet},
|
||||
"modal-close-dimensions": #{$modal-close-dimensions},
|
||||
"modal-close-right": #{$modal-close-right},
|
||||
"modal-close-top": #{$modal-close-top},
|
||||
"modal-card-spacing": #{$modal-card-spacing},
|
||||
"modal-card-head-background-color": #{$modal-card-head-background-color},
|
||||
"modal-card-head-padding": #{$modal-card-head-padding},
|
||||
"modal-card-head-radius": #{$modal-card-head-radius},
|
||||
"modal-card-title-color": #{$modal-card-title-color},
|
||||
"modal-card-title-line-height": #{$modal-card-title-line-height},
|
||||
"modal-card-title-size": #{$modal-card-title-size},
|
||||
"modal-card-foot-background-color": #{$modal-card-foot-background-color},
|
||||
"modal-card-foot-radius": #{$modal-card-foot-radius},
|
||||
"modal-card-body-background-color": #{$modal-card-body-background-color},
|
||||
"modal-card-body-padding": #{$modal-card-body-padding},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal {
|
||||
@extend %overlay;
|
||||
|
||||
align-items: center;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: cv.getVar("modal-z");
|
||||
|
||||
// Modifiers
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-background {
|
||||
@extend %overlay;
|
||||
background-color: cv.getVar("modal-background-background-color");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-content,
|
||||
.#{iv.$class-prefix}modal-card {
|
||||
margin: 0 cv.getVar("modal-content-margin-mobile");
|
||||
max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")});
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// Responsiveness
|
||||
@include mx.from($modal-breakpoint) {
|
||||
margin: 0 auto;
|
||||
max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")});
|
||||
width: cv.getVar("modal-content-width");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-close {
|
||||
@extend %delete;
|
||||
background: none;
|
||||
height: cv.getVar("modal-close-dimensions");
|
||||
inset-inline-end: cv.getVar("modal-close-right");
|
||||
position: fixed;
|
||||
top: cv.getVar("modal-close-top");
|
||||
width: cv.getVar("modal-close-dimensions");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - #{cv.getVar("modal-card-spacing")});
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-head,
|
||||
.#{iv.$class-prefix}modal-card-foot {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
padding: cv.getVar("modal-card-head-padding");
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-head {
|
||||
background-color: cv.getVar("modal-card-head-background-color");
|
||||
border-start-start-radius: cv.getVar("modal-card-head-radius");
|
||||
border-start-end-radius: cv.getVar("modal-card-head-radius");
|
||||
box-shadow: cv.getVar("shadow");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-title {
|
||||
color: cv.getVar("modal-card-title-color");
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
font-size: cv.getVar("modal-card-title-size");
|
||||
line-height: cv.getVar("modal-card-title-line-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-foot {
|
||||
background-color: cv.getVar("modal-card-foot-background-color");
|
||||
border-end-start-radius: cv.getVar("modal-card-foot-radius");
|
||||
border-end-end-radius: cv.getVar("modal-card-foot-radius");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}modal-card-body {
|
||||
@include mx.overflow-touch;
|
||||
background-color: cv.getVar("modal-card-body-background-color");
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: auto;
|
||||
padding: cv.getVar("modal-card-body-padding");
|
||||
}
|
||||
788
styles/bulma/sass/components/navbar.scss
Normal file
788
styles/bulma/sass/components/navbar.scss
Normal file
@ -0,0 +1,788 @@
|
||||
@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;
|
||||
|
||||
$navbar-h: cv.getVar("scheme-h");
|
||||
$navbar-s: cv.getVar("scheme-s");
|
||||
$navbar-l: cv.getVar("scheme-main-l");
|
||||
$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;
|
||||
$navbar-height: 3.25rem !default;
|
||||
$navbar-padding-vertical: 1rem !default;
|
||||
$navbar-padding-horizontal: 2rem !default;
|
||||
$navbar-z: 30 !default;
|
||||
$navbar-fixed-z: 30 !default;
|
||||
|
||||
$navbar-item-background-a: 0;
|
||||
$navbar-item-background-l: cv.getVar("scheme-main-l");
|
||||
$navbar-item-background-l-delta: 0%;
|
||||
$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
|
||||
$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
|
||||
$navbar-item-color-l: cv.getVar("text-l");
|
||||
$navbar-item-selected-h: cv.getVar("link-h");
|
||||
$navbar-item-selected-s: cv.getVar("link-s");
|
||||
$navbar-item-selected-l: cv.getVar("link-l");
|
||||
$navbar-item-selected-background-l: cv.getVar("link-l");
|
||||
$navbar-item-selected-color-l: cv.getVar("link-invert-l");
|
||||
$navbar-item-img-max-height: 1.75rem !default;
|
||||
|
||||
$navbar-dropdown-item-h: cv.getVar("scheme-h");
|
||||
$navbar-dropdown-item-s: cv.getVar("scheme-s");
|
||||
$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
|
||||
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
|
||||
$navbar-dropdown-item-color-l: cv.getVar("text-l");
|
||||
|
||||
$navbar-burger-color: cv.getVar("navbar-item-color") !default;
|
||||
|
||||
$navbar-tab-hover-background-color: transparent !default;
|
||||
$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
|
||||
$navbar-tab-active-color: cv.getVar("link") !default;
|
||||
$navbar-tab-active-background-color: transparent !default;
|
||||
$navbar-tab-active-border-bottom-color: cv.getVar("link") !default;
|
||||
$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-style: solid !default;
|
||||
$navbar-dropdown-border-width: 0.125em !default;
|
||||
$navbar-dropdown-offset: -0.25em !default;
|
||||
$navbar-dropdown-arrow: cv.getVar("link") !default;
|
||||
$navbar-dropdown-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-z: 20 !default;
|
||||
|
||||
$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
|
||||
$navbar-dropdown-boxed-shadow:
|
||||
0 0.5em 0.5em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
),
|
||||
0 0 0 1px
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
) !default;
|
||||
|
||||
$navbar-divider-background-l: cv.getVar("background-l") !default;
|
||||
$navbar-divider-height: 0.125em !default;
|
||||
|
||||
$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
|
||||
|
||||
$navbar-breakpoint: iv.$desktop !default;
|
||||
|
||||
$navbar-colors: dv.$colors !default;
|
||||
|
||||
@mixin navbar-fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: cv.getVar("navbar-fixed-z");
|
||||
}
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-height": #{$navbar-height},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{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},
|
||||
"navbar-padding-vertical": #{$navbar-padding-vertical},
|
||||
"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-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-img-max-height": #{$navbar-item-img-max-height},
|
||||
"navbar-burger-color": #{$navbar-burger-color},
|
||||
"navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
|
||||
"navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color},
|
||||
"navbar-tab-active-color": #{$navbar-tab-active-color},
|
||||
"navbar-tab-active-background-color": #{$navbar-tab-active-background-color},
|
||||
"navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color},
|
||||
"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},
|
||||
"navbar-dropdown-offset": #{$navbar-dropdown-offset},
|
||||
"navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
|
||||
"navbar-dropdown-radius": #{$navbar-dropdown-radius},
|
||||
"navbar-dropdown-z": #{$navbar-dropdown-z},
|
||||
"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-height": #{$navbar-divider-height},
|
||||
"navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar {
|
||||
background-color: cv.getVar("navbar-background-color");
|
||||
min-height: cv.getVar("navbar-height");
|
||||
position: relative;
|
||||
z-index: cv.getVar("navbar-z");
|
||||
|
||||
@each $name, $pair in $navbar-colors {
|
||||
&.#{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")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
& > .#{iv.$class-prefix}container {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: cv.getVar("navbar-box-shadow-size")
|
||||
cv.getVar("navbar-box-shadow-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom,
|
||||
&.#{iv.$class-prefix}is-fixed-top {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: cv.getVar("navbar-bottom-box-shadow-size")
|
||||
cv.getVar("navbar-box-shadow-color");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-brand,
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
@include mx.overflow-touch;
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-burger {
|
||||
@extend %reset;
|
||||
@include mx.burger(2.5rem);
|
||||
align-self: center;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 0.375rem;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-item-color-l")}
|
||||
);
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem 0.75rem;
|
||||
position: relative;
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:only-child {
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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")}
|
||||
);
|
||||
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,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-l-delta": #{cv.getVar(
|
||||
"navbar-item-active-background-l-delta"
|
||||
)},
|
||||
"navbar-item-background-a": 1,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&.#{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")},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
img,
|
||||
svg {
|
||||
max-height: cv.getVar("navbar-item-img-max-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dropdown {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-expanded {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-tab {
|
||||
border-bottom: 1px solid transparent;
|
||||
min-height: cv.getVar("navbar-height");
|
||||
padding-bottom: calc(0.5rem - 1px);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: cv.getVar("navbar-tab-hover-background-color");
|
||||
border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
background-color: cv.getVar("navbar-tab-active-background-color");
|
||||
border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width");
|
||||
color: cv.getVar("navbar-tab-active-color");
|
||||
padding-bottom: calc(
|
||||
0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) {
|
||||
padding-inline-end: 2.5em;
|
||||
|
||||
&::after {
|
||||
@extend %arrow;
|
||||
border-color: cv.getVar("navbar-dropdown-arrow");
|
||||
margin-top: -0.375em;
|
||||
inset-inline-end: 1.125em;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
font-size: 0.875rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
padding-left: 1.5rem;
|
||||
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")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("navbar-h")},
|
||||
#{cv.getVar("navbar-s")},
|
||||
#{cv.getVar("navbar-divider-background-l")}
|
||||
);
|
||||
border: none;
|
||||
display: none;
|
||||
height: cv.getVar("navbar-divider-height");
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
@include mx.until($navbar-breakpoint) {
|
||||
.#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-brand,
|
||||
.#{iv.$class-prefix}navbar-tabs {
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
background-color: cv.getVar("navbar-background-color");
|
||||
box-shadow: 0 0.5em 1em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
);
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.#{iv.$class-prefix}navbar {
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-touch,
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-touch {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top,
|
||||
&.#{iv.$class-prefix}is-fixed-top-touch {
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
@include mx.overflow-touch;
|
||||
max-height: calc(100vh - #{cv.getVar("navbar-height")});
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top-touch {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom-touch {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.from($navbar-breakpoint) {
|
||||
.#{iv.$class-prefix}navbar,
|
||||
.#{iv.$class-prefix}navbar-menu,
|
||||
.#{iv.$class-prefix}navbar-start,
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar {
|
||||
min-height: cv.getVar("navbar-height");
|
||||
|
||||
&.#{iv.$class-prefix}is-spaced {
|
||||
padding: cv.getVar("navbar-padding-vertical")
|
||||
cv.getVar("navbar-padding-horizontal");
|
||||
|
||||
.#{iv.$class-prefix}navbar-start,
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
border-radius: cv.getVar("radius");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-transparent {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"navbar-item-background-a": 0,
|
||||
)
|
||||
);
|
||||
|
||||
.#{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"
|
||||
)}
|
||||
)
|
||||
);
|
||||
|
||||
&.#{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"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item,
|
||||
.#{iv.$class-prefix}navbar-link {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
&.#{iv.$class-prefix}has-dropdown {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-dropdown-up {
|
||||
.#{iv.$class-prefix}navbar-link::after {
|
||||
transform: rotate(135deg) translate(0.25em, -0.25em);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
border-bottom-color: cv.getVar("navbar-dropdown-border-color");
|
||||
border-bottom-style: cv.getVar("navbar-dropdown-border-style");
|
||||
border-bottom-width: cv.getVar("navbar-dropdown-border-width");
|
||||
border-radius: cv.getVar("navbar-dropdown-radius")
|
||||
cv.getVar("navbar-dropdown-radius") 0 0;
|
||||
border-top: none;
|
||||
bottom: 100%;
|
||||
box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active,
|
||||
&.#{iv.$class-prefix}is-hoverable:focus,
|
||||
&.#{iv.$class-prefix}is-hoverable:focus-within,
|
||||
&.#{iv.$class-prefix}is-hoverable:hover {
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
display: block;
|
||||
|
||||
.#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-dropdown {
|
||||
background-color: cv.getVar("navbar-dropdown-background-color");
|
||||
border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
|
||||
border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
|
||||
border-top-color: cv.getVar("navbar-dropdown-border-color");
|
||||
border-top-style: cv.getVar("navbar-dropdown-border-style");
|
||||
border-top-width: cv.getVar("navbar-dropdown-border-width");
|
||||
box-shadow: 0 0.5em 0.5em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.1
|
||||
);
|
||||
display: none;
|
||||
font-size: 0.875rem;
|
||||
inset-inline-start: 0;
|
||||
min-width: 100%;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: cv.getVar("navbar-dropdown-z");
|
||||
|
||||
.#{iv.$class-prefix}navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
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 &,
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
border-radius: cv.getVar("navbar-dropdown-boxed-radius");
|
||||
border-top: none;
|
||||
box-shadow: cv.getVar("navbar-dropdown-boxed-shadow");
|
||||
display: block;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")}));
|
||||
transform: translateY(-5px);
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-divider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container,
|
||||
.#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar {
|
||||
.#{iv.$class-prefix}navbar-brand {
|
||||
margin-inline-start: -0.75rem;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}navbar-menu {
|
||||
margin-inline-end: -0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.#{iv.$class-prefix}navbar {
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-desktop,
|
||||
&.#{iv.$class-prefix}is-fixed-top-desktop {
|
||||
@include navbar-fixed;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-bottom-desktop {
|
||||
bottom: 0;
|
||||
|
||||
&.#{iv.$class-prefix}has-shadow {
|
||||
box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
|
||||
"scheme-s"
|
||||
)}, #{cv.getVar("scheme-invert-l")}, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fixed-top-desktop {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-top-desktop {
|
||||
padding-top: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop {
|
||||
padding-bottom: cv.getVar("navbar-height");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-spaced-navbar-fixed-top {
|
||||
padding-top: calc(
|
||||
#{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
|
||||
2
|
||||
);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom {
|
||||
padding-bottom: calc(
|
||||
#{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
|
||||
2
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Combination
|
||||
|
||||
.#{iv.$class-prefix}hero {
|
||||
&.#{iv.$class-prefix}is-fullheight-with-navbar {
|
||||
min-height: calc(100vh - #{cv.getVar("navbar-height")});
|
||||
}
|
||||
}
|
||||
379
styles/bulma/sass/components/pagination.scss
Normal file
379
styles/bulma/sass/components/pagination.scss
Normal file
@ -0,0 +1,379 @@
|
||||
@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;
|
||||
|
||||
$pagination-margin: -0.25rem !default;
|
||||
$pagination-min-width: cv.getVar("control-height") !default;
|
||||
|
||||
$pagination-item-h: cv.getVar("scheme-h");
|
||||
$pagination-item-s: cv.getVar("scheme-s");
|
||||
$pagination-item-l: cv.getVar("scheme-main-l");
|
||||
$pagination-item-background-l-delta: 0%;
|
||||
$pagination-item-hover-background-l-delta: cv.getVar(
|
||||
"hover-background-l-delta"
|
||||
);
|
||||
$pagination-item-active-background-l-delta: cv.getVar(
|
||||
"active-background-l-delta"
|
||||
);
|
||||
$pagination-item-border-l: cv.getVar("border-l");
|
||||
$pagination-item-border-l-delta: 0%;
|
||||
$pagination-item-border-style: solid !default;
|
||||
$pagination-item-border-width: cv.getVar("control-border-width") !default;
|
||||
$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
|
||||
$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
|
||||
$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
|
||||
$pagination-item-color-l: cv.getVar("text-strong-l");
|
||||
$pagination-item-font-size: 1em !default;
|
||||
$pagination-item-margin: 0.25rem !default;
|
||||
$pagination-item-padding-left: 0.5em !default;
|
||||
$pagination-item-padding-right: 0.5em !default;
|
||||
$pagination-item-outer-shadow-h: 0;
|
||||
$pagination-item-outer-shadow-s: 0%;
|
||||
$pagination-item-outer-shadow-l: 20%;
|
||||
$pagination-item-outer-shadow-a: 0.05;
|
||||
|
||||
$pagination-selected-item-h: cv.getVar("link-h");
|
||||
$pagination-selected-item-s: cv.getVar("link-s");
|
||||
$pagination-selected-item-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-background-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-border-l: cv.getVar("link-l");
|
||||
$pagination-selected-item-color-l: cv.getVar("link-invert-l");
|
||||
|
||||
$pagination-nav-padding-left: 0.75em !default;
|
||||
$pagination-nav-padding-right: 0.75em !default;
|
||||
|
||||
$pagination-disabled-color: cv.getVar("text-weak") !default;
|
||||
$pagination-disabled-background-color: cv.getVar("border") !default;
|
||||
$pagination-disabled-border-color: cv.getVar("border") !default;
|
||||
|
||||
$pagination-current-color: cv.getVar("link-invert") !default;
|
||||
$pagination-current-background-color: cv.getVar("link") !default;
|
||||
$pagination-current-border-color: cv.getVar("link") !default;
|
||||
|
||||
$pagination-ellipsis-color: cv.getVar("text-weak") !default;
|
||||
|
||||
$pagination-shadow-inset: inset 0 0.0625em 0.125em
|
||||
hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("scheme-invert-l")},
|
||||
0.2
|
||||
) !default;
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-margin": #{$pagination-margin},
|
||||
"pagination-min-width": #{$pagination-min-width},
|
||||
"pagination-item-h": #{$pagination-item-h},
|
||||
"pagination-item-s": #{$pagination-item-s},
|
||||
"pagination-item-l": #{$pagination-item-l},
|
||||
"pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
|
||||
"pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
|
||||
"pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
|
||||
"pagination-item-border-style": #{$pagination-item-border-style},
|
||||
"pagination-item-border-width": #{$pagination-item-border-width},
|
||||
"pagination-item-border-l": #{$pagination-item-border-l},
|
||||
"pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
|
||||
"pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
|
||||
"pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
|
||||
"pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
|
||||
"pagination-item-color-l": #{$pagination-item-color-l},
|
||||
"pagination-item-font-size": #{$pagination-item-font-size},
|
||||
"pagination-item-margin": #{$pagination-item-margin},
|
||||
"pagination-item-padding-left": #{$pagination-item-padding-left},
|
||||
"pagination-item-padding-right": #{$pagination-item-padding-right},
|
||||
"pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
|
||||
"pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
|
||||
"pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
|
||||
"pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
|
||||
"pagination-nav-padding-left": #{$pagination-nav-padding-left},
|
||||
"pagination-nav-padding-right": #{$pagination-nav-padding-right},
|
||||
"pagination-disabled-color": #{$pagination-disabled-color},
|
||||
"pagination-disabled-background-color": #{$pagination-disabled-background-color},
|
||||
"pagination-disabled-border-color": #{$pagination-disabled-border-color},
|
||||
"pagination-current-color": #{$pagination-current-color},
|
||||
"pagination-current-background-color": #{$pagination-current-background-color},
|
||||
"pagination-current-border-color": #{$pagination-current-border-color},
|
||||
"pagination-ellipsis-color": #{$pagination-ellipsis-color},
|
||||
"pagination-shadow-inset": #{$pagination-shadow-inset},
|
||||
"pagination-selected-item-h": #{$pagination-selected-item-h},
|
||||
"pagination-selected-item-s": #{$pagination-selected-item-s},
|
||||
"pagination-selected-item-l": #{$pagination-selected-item-l},
|
||||
"pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
|
||||
"pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
|
||||
"pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
@extend %block;
|
||||
|
||||
font-size: cv.getVar("size-normal");
|
||||
margin: cv.getVar("pagination-margin");
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-rounded {
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination,
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link,
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
@extend %control;
|
||||
@extend %unselectable;
|
||||
color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
#{cv.getVar("pagination-item-color-l")}
|
||||
);
|
||||
font-size: cv.getVar("pagination-item-font-size");
|
||||
justify-content: center;
|
||||
margin: cv.getVar("pagination-item-margin");
|
||||
padding-left: cv.getVar("pagination-item-padding-left");
|
||||
padding-right: cv.getVar("pagination-item-padding-right");
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
background-color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
|
||||
"pagination-item-background-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
calc(
|
||||
#{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
|
||||
"pagination-item-border-l-delta"
|
||||
)}
|
||||
)
|
||||
);
|
||||
border-style: cv.getVar("pagination-item-border-style");
|
||||
border-width: cv.getVar("pagination-item-border-width");
|
||||
box-shadow:
|
||||
0px 0.0625em 0.125em
|
||||
hsla(
|
||||
cv.getVar("pagination-item-outer-shadow-h"),
|
||||
cv.getVar("pagination-item-outer-shadow-s"),
|
||||
cv.getVar("pagination-item-outer-shadow-l"),
|
||||
cv.getVar("pagination-item-outer-shadow-a")
|
||||
),
|
||||
0px 0.125em 0.25em
|
||||
hsla(
|
||||
cv.getVar("pagination-item-outer-shadow-h"),
|
||||
cv.getVar("pagination-item-outer-shadow-s"),
|
||||
cv.getVar("pagination-item-outer-shadow-l"),
|
||||
cv.getVar("pagination-item-outer-shadow-a")
|
||||
);
|
||||
color: hsl(
|
||||
#{cv.getVar("pagination-item-h")},
|
||||
#{cv.getVar("pagination-item-s")},
|
||||
#{cv.getVar("pagination-item-color-l")}
|
||||
);
|
||||
min-width: cv.getVar("pagination-min-width");
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, box-shadow, color;
|
||||
|
||||
&:hover {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-background-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-background-l-delta"
|
||||
)},
|
||||
"pagination-item-border-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-background-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-background-l-delta"
|
||||
)},
|
||||
"pagination-item-border-l-delta": #{cv.getVar(
|
||||
"pagination-item-hover-border-l-delta"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: cv.getVar("pagination-shadow-inset");
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&.#{iv.$class-prefix}is-disabled {
|
||||
background-color: cv.getVar("pagination-disabled-background-color");
|
||||
border-color: cv.getVar("pagination-disabled-border-color");
|
||||
box-shadow: none;
|
||||
color: cv.getVar("pagination-disabled-color");
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
padding-left: cv.getVar("pagination-nav-padding-left");
|
||||
padding-right: cv.getVar("pagination-nav-padding-right");
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-link {
|
||||
&.#{iv.$class-prefix}is-current,
|
||||
&.#{iv.$class-prefix}is-selected {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
|
||||
"pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
|
||||
"pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
|
||||
"pagination-item-background-l": #{cv.getVar(
|
||||
"pagination-selected-item-background-l"
|
||||
)},
|
||||
"pagination-item-border-l": #{cv.getVar(
|
||||
"pagination-selected-item-border-l"
|
||||
)},
|
||||
"pagination-item-color-l": #{cv.getVar(
|
||||
"pagination-selected-item-color-l"
|
||||
)},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
color: cv.getVar("pagination-ellipsis-color");
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.mobile {
|
||||
.#{iv.$class-prefix}pagination {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.tablet {
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: flex-start;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous,
|
||||
.#{iv.$class-prefix}pagination-next,
|
||||
.#{iv.$class-prefix}pagination-link,
|
||||
.#{iv.$class-prefix}pagination-ellipsis {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
justify-content: center;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
.#{iv.$class-prefix}pagination-previous {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-next {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}pagination-list {
|
||||
justify-content: flex-end;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
218
styles/bulma/sass/components/panel.scss
Normal file
218
styles/bulma/sass/components/panel.scss
Normal file
@ -0,0 +1,218 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
273
styles/bulma/sass/components/tabs.scss
Normal file
273
styles/bulma/sass/components/tabs.scss
Normal file
@ -0,0 +1,273 @@
|
||||
@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;
|
||||
|
||||
$tabs-border-bottom-color: cv.getVar("border") !default;
|
||||
$tabs-border-bottom-style: solid !default;
|
||||
$tabs-border-bottom-width: 1px !default;
|
||||
$tabs-link-color: cv.getVar("text") !default;
|
||||
$tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default;
|
||||
$tabs-link-hover-color: cv.getVar("text-strong") !default;
|
||||
$tabs-link-active-border-bottom-color: cv.getVar("link-text") !default;
|
||||
$tabs-link-active-color: cv.getVar("link-text") !default;
|
||||
$tabs-link-padding: 0.5em 1em !default;
|
||||
|
||||
$tabs-boxed-link-radius: cv.getVar("radius") !default;
|
||||
$tabs-boxed-link-hover-background-color: cv.getVar("background") !default;
|
||||
$tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default;
|
||||
|
||||
$tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default;
|
||||
$tabs-boxed-link-active-border-color: cv.getVar("border") !default;
|
||||
$tabs-boxed-link-active-border-bottom-color: transparent !default;
|
||||
|
||||
$tabs-toggle-link-border-color: cv.getVar("border") !default;
|
||||
$tabs-toggle-link-border-style: solid !default;
|
||||
$tabs-toggle-link-border-width: 1px !default;
|
||||
$tabs-toggle-link-hover-background-color: cv.getVar("background") !default;
|
||||
$tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default;
|
||||
$tabs-toggle-link-radius: cv.getVar("radius") !default;
|
||||
$tabs-toggle-link-active-background-color: cv.getVar("link") !default;
|
||||
$tabs-toggle-link-active-border-color: cv.getVar("link") !default;
|
||||
$tabs-toggle-link-active-color: cv.getVar("link-invert") !default;
|
||||
|
||||
.#{iv.$class-prefix}tabs {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"tabs-border-bottom-color": #{$tabs-border-bottom-color},
|
||||
"tabs-border-bottom-style": #{$tabs-border-bottom-style},
|
||||
"tabs-border-bottom-width": #{$tabs-border-bottom-width},
|
||||
"tabs-link-color": #{$tabs-link-color},
|
||||
"tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color},
|
||||
"tabs-link-hover-color": #{$tabs-link-hover-color},
|
||||
"tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color},
|
||||
"tabs-link-active-color": #{$tabs-link-active-color},
|
||||
"tabs-link-padding": #{$tabs-link-padding},
|
||||
"tabs-boxed-link-radius": #{$tabs-boxed-link-radius},
|
||||
"tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color},
|
||||
"tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color},
|
||||
"tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color},
|
||||
"tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color},
|
||||
"tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color},
|
||||
"tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color},
|
||||
"tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style},
|
||||
"tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width},
|
||||
"tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color},
|
||||
"tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color},
|
||||
"tabs-toggle-link-radius": #{$tabs-toggle-link-radius},
|
||||
"tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color},
|
||||
"tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color},
|
||||
"tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}tabs {
|
||||
@extend %block;
|
||||
@extend %unselectable;
|
||||
@include mx.overflow-touch;
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
font-size: cv.getVar("size-normal");
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
border-bottom-color: cv.getVar("tabs-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("tabs-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("tabs-border-bottom-width");
|
||||
color: cv.getVar("tabs-link-color");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")});
|
||||
padding: cv.getVar("tabs-link-padding");
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, color;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color");
|
||||
color: cv.getVar("tabs-link-hover-color");
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color");
|
||||
color: cv.getVar("tabs-link-active-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
align-items: center;
|
||||
border-bottom-color: cv.getVar("tabs-border-bottom-color");
|
||||
border-bottom-style: cv.getVar("tabs-border-bottom-style");
|
||||
border-bottom-width: cv.getVar("tabs-border-bottom-width");
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.#{iv.$class-prefix}is-left {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-center {
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
justify-content: flex-end;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.#{iv.$class-prefix}icon {
|
||||
&:first-child {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
&.#{iv.$class-prefix}is-centered {
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-right {
|
||||
ul {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.#{iv.$class-prefix}is-boxed {
|
||||
a {
|
||||
border: 1px solid transparent;
|
||||
border-start-start-radius: cv.getVar("tabs-boxed-link-radius");
|
||||
border-start-end-radius: cv.getVar("tabs-boxed-link-radius");
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar("tabs-boxed-link-hover-background-color");
|
||||
border-bottom-color: cv.getVar(
|
||||
"tabs-boxed-link-hover-border-bottom-color"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
background-color: cv.getVar(
|
||||
"tabs-boxed-link-active-background-color"
|
||||
);
|
||||
border-color: cv.getVar("tabs-boxed-link-active-border-color");
|
||||
border-bottom-color: cv.getVar(
|
||||
"tabs-boxed-link-active-border-bottom-color"
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullwidth {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-toggle {
|
||||
a {
|
||||
border-color: cv.getVar("tabs-toggle-link-border-color");
|
||||
border-style: cv.getVar("tabs-toggle-link-border-style");
|
||||
border-width: cv.getVar("tabs-toggle-link-border-width");
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: cv.getVar("tabs-toggle-link-hover-background-color");
|
||||
border-color: cv.getVar("tabs-toggle-link-hover-border-color");
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
& + li {
|
||||
margin-inline-start: calc(
|
||||
-1 * #{cv.getVar("tabs-toggle-link-border-width")}
|
||||
);
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
border-start-start-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
border-end-start-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-start-end-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
border-end-end-radius: cv.getVar("tabs-toggle-link-radius");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
a {
|
||||
background-color: cv.getVar(
|
||||
"tabs-toggle-link-active-background-color"
|
||||
);
|
||||
border-color: cv.getVar("tabs-toggle-link-active-border-color");
|
||||
color: cv.getVar("tabs-toggle-link-active-color");
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-toggle-rounded {
|
||||
li {
|
||||
&:first-child a {
|
||||
border-start-start-radius: cv.getVar("radius-rounded");
|
||||
border-end-start-radius: cv.getVar("radius-rounded");
|
||||
padding-inline-start: 1.25em;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
border-start-end-radius: cv.getVar("radius-rounded");
|
||||
border-end-end-radius: cv.getVar("radius-rounded");
|
||||
padding-inline-end: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user