library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix components tests

Browse Source
This commit is contained in:
Jeremy Thomas 2022-12-06 00:47:43 +00:00
parent a03da2b801
commit 8508af010a
16 changed files with 2353 additions and 1361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1208
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

1250
docs/css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

93
sass/base/generic.scss
View File

@ -31,15 +31,46 @@ $pre-font-size: 0.875em !default;
$pre-padding: 1.25rem 1.5rem !default;
$pre-code-font-size: 1em !default;
:root {
@include register-vars(
(
body-background-color: #{$body-background-color},
body-size: #{$body-size},
body-min-width: #{$body-min-width},
body-rendering: #{$body-rendering},
body-family: #{$body-family},
body-overflow-x: #{$body-overflow-x},
body-overflow-y: #{$body-overflow-y},
body-color: #{$body-color},
body-font-size: #{$body-font-size},
body-weight: #{$body-weight},
body-line-height: #{$body-line-height},
code-family: #{$code-family},
code-padding: #{$code-padding},
code-weight: #{$code-weight},
code-size: #{$code-size},
small-font-size: #{$small-font-size},
hr-background-color: #{$hr-background-color},
hr-height: #{$hr-height},
hr-margin: #{$hr-margin},
strong-color: #{$strong-color},
strong-weight: #{$strong-weight},
pre-font-size: #{$pre-font-size},
pre-padding: #{$pre-padding},
pre-code-font-size: #{$pre-code-font-size},
)
);
}
html {
background-color: $body-background-color;
font-size: $body-size;
background-color: getVar("body-background-color");
font-size: getVar("body-size");
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: $body-min-width;
overflow-x: $body-overflow-x;
overflow-y: $body-overflow-y;
text-rendering: $body-rendering;
min-width: getVar("body-min-width");
overflow-x: getVar("body-overflow-x");
overflow-y: getVar("body-overflow-y");
text-rendering: getVar("body-rendering");
text-size-adjust: 100%;
}
@ -59,27 +90,27 @@ input,
optgroup,
select,
textarea {
font-family: $body-family;
font-family: getVar("body-family");
}
code,
pre {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: $code-family;
font-family: getVar("code-family");
}
body {
color: $body-color;
font-size: $body-font-size;
font-weight: $body-weight;
line-height: $body-line-height;
color: getVar("body-color");
font-size: getVar("body-font-size");
font-weight: getVar("body-weight");
line-height: getVar("body-line-height");
}
// Inline
a {
color: $link;
color: getVar("link");
cursor: pointer;
text-decoration: none;
@ -88,24 +119,24 @@ a {
}
&:hover {
color: $link-hover;
color: getVar("link-hover");
}
}
code {
background-color: $code-background;
color: $code;
font-size: $code-size;
font-weight: $code-weight;
padding: $code-padding;
background-color: getVar("code-background");
color: getVar("code");
font-size: getVar("code-size");
font-weight: getVar("code-weight");
padding: getVar("code-padding");
}
hr {
background-color: $hr-background-color;
background-color: getVar("hr-background-color");
border: none;
display: block;
height: $hr-height;
margin: $hr-margin;
height: getVar("hr-height");
margin: getVar("hr-margin");
}
img {
@ -119,7 +150,7 @@ input[type="radio"] {
}
small {
font-size: $small-font-size;
font-size: getVar("small-font-size");
}
span {
@ -128,8 +159,8 @@ span {
}
strong {
color: $strong-color;
font-weight: $strong-weight;
color: getVar("strong-color");
font-weight: getVar("strong-weight");
}
// Block
@ -141,18 +172,18 @@ fieldset {
pre {
@include overflow-touch;
background-color: $pre-background;
color: $pre;
font-size: $pre-font-size;
background-color: getVar("pre-background");
color: getVar("pre");
font-size: getVar("pre-font-size");
overflow-x: auto;
padding: $pre-padding;
padding: getVar("pre-padding");
white-space: pre;
word-wrap: normal;
code {
background-color: transparent;
color: currentColor;
font-size: $pre-code-font-size;
font-size: getVar("pre-code-font-size");
padding: 0;
}
}
@ -168,6 +199,6 @@ table {
}
th {
color: $text-strong;
color: getVar("text-strong");
}
}

41
sass/components/breadcrumb.scss
View File

@ -1,31 +1,44 @@
@import "../utilities/mixins";
$breadcrumb-item-color: $link !default;
$breadcrumb-item-hover-color: $link-hover !default;
$breadcrumb-item-active-color: $text-strong !default;
$breadcrumb-item-color: getVar("link") !default;
$breadcrumb-item-hover-color: getVar("link-hover") !default;
$breadcrumb-item-active-color: getVar("text-strong") !default;
$breadcrumb-item-padding-vertical: 0 !default;
$breadcrumb-item-padding-horizontal: 0.75em !default;
$breadcrumb-item-separator-color: $border-hover !default;
$breadcrumb-item-separator-color: getVar("border-hover") !default;
:root {
@include 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},
)
);
}
.#{$class-prefix}breadcrumb {
@extend %block;
@extend %unselectable;
font-size: $size-normal;
font-size: getVar("size-normal");
white-space: nowrap;
a {
align-items: center;
color: $breadcrumb-item-color;
color: getVar("breadcrumb-item-color");
display: flex;
justify-content: center;
padding: $breadcrumb-item-padding-vertical
$breadcrumb-item-padding-horizontal;
padding: getVar("breadcrumb-item-padding-vertical")
getVar("breadcrumb-item-padding-horizontal");
&:hover {
color: $breadcrumb-item-hover-color;
color: getVar("breadcrumb-item-hover-color");
}
}
@ -39,14 +52,14 @@ $breadcrumb-item-separator-color: $border-hover !default;
&.is-active {
a {
color: $breadcrumb-item-active-color;
color: getVar("breadcrumb-item-active-color");
cursor: default;
pointer-events: none;
}
}
& + li::before {
color: $breadcrumb-item-separator-color;
color: getVar("breadcrumb-item-separator-color");
content: "/";
}
}
@ -86,15 +99,15 @@ $breadcrumb-item-separator-color: $border-hover !default;
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
// Styles

88
sass/components/card.scss
View File

@ -1,62 +1,84 @@
@import "../utilities/mixins";
$card-color: $text !default;
$card-background-color: $scheme-main !default;
$card-shadow: $shadow !default;
$card-color: getVar("text") !default;
$card-background-color: getVar("scheme-main") !default;
$card-shadow: getVar("shadow") !default;
$card-radius: 0.25rem !default;
$card-header-background-color: transparent !default;
$card-header-color: $text-strong !default;
$card-header-color: getVar("text-strong") !default;
$card-header-padding: 0.75rem 1rem !default;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default;
$card-header-weight: $weight-bold !default;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; // TODO
$card-header-weight: 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 $border-light !default;
$card-footer-border-top: 1px solid getVar("border-light") !default;
$card-footer-padding: 0.75rem !default;
$card-media-margin: $block-spacing !default;
$card-media-margin: getVar("block-spacing") !default;
:root {
@include 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},
)
);
}
.#{$class-prefix}card {
background-color: $card-background-color;
border-radius: $card-radius;
box-shadow: $card-shadow;
color: $card-color;
background-color: getVar("card-background-color");
border-radius: getVar("card-radius");
box-shadow: getVar("card-shadow");
color: getVar("card-color");
max-width: 100%;
position: relative;
}
%card-item {
&:first-child {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
border-top-left-radius: getVar("card-radius");
border-top-right-radius: getVar("card-radius");
}
&:last-child {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
border-bottom-left-radius: getVar("card-radius");
border-bottom-right-radius: getVar("card-radius");
}
}
.#{$class-prefix}card-header {
@extend %card-item;
background-color: $card-header-background-color;
background-color: getVar("card-header-background-color");
align-items: stretch;
box-shadow: $card-header-shadow;
box-shadow: getVar("card-header-shadow");
display: flex;
}
.#{$class-prefix}card-header-title {
align-items: center;
color: $card-header-color;
color: getVar("card-header-color");
display: flex;
flex-grow: 1;
font-weight: $card-header-weight;
padding: $card-header-padding;
font-weight: getVar("card-header-weight");
padding: getVar("card-header-padding");
&.is-centered {
justify-content: center;
@ -70,7 +92,7 @@ $card-media-margin: $block-spacing !default;
cursor: pointer;
display: flex;
justify-content: center;
padding: $card-header-padding;
padding: getVar("card-header-padding");
}
.#{$class-prefix}card-image {
@ -79,15 +101,15 @@ $card-media-margin: $block-spacing !default;
&:first-child {
img {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
border-top-left-radius: getVar("card-radius");
border-top-right-radius: getVar("card-radius");
}
}
&:last-child {
img {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
border-bottom-left-radius: getVar("card-radius");
border-bottom-right-radius: getVar("card-radius");
}
}
}
@ -95,15 +117,15 @@ $card-media-margin: $block-spacing !default;
.#{$class-prefix}card-content {
@extend %card-item;
background-color: $card-content-background-color;
padding: $card-content-padding;
background-color: getVar("card-content-background-color");
padding: getVar("card-content-padding");
}
.#{$class-prefix}card-footer {
@extend %card-item;
background-color: $card-footer-background-color;
border-top: $card-footer-border-top;
background-color: getVar("card-footer-background-color");
border-top: getVar("card-footer-border-top");
align-items: stretch;
display: flex;
}
@ -115,10 +137,10 @@ $card-media-margin: $block-spacing !default;
flex-grow: 1;
flex-shrink: 0;
justify-content: center;
padding: $card-footer-padding;
padding: getVar("card-footer-padding");
&:not(:last-child) {
@include ltr-property("border", $card-footer-border-top);
@include ltr-property("border", getVar("card-footer-border-top"));
}
}
@ -126,6 +148,6 @@ $card-media-margin: $block-spacing !default;
.#{$class-prefix}card {
.#{$class-prefix}media:not(:last-child) {
margin-bottom: $card-media-margin;
margin-bottom: getVar("card-media-margin");
}
}

72
sass/components/dropdown.scss
View File

@ -2,22 +2,44 @@
$dropdown-menu-min-width: 12rem !default;
$dropdown-content-background-color: $scheme-main !default;
$dropdown-content-arrow: $link !default;
$dropdown-content-background-color: getVar("scheme-main") !default;
$dropdown-content-arrow: getVar("link") !default;
$dropdown-content-offset: 4px !default;
$dropdown-content-padding-bottom: 0.5rem !default;
$dropdown-content-padding-top: 0.5rem !default;
$dropdown-content-radius: $radius !default;
$dropdown-content-shadow: $shadow !default;
$dropdown-content-radius: getVar("radius") !default;
$dropdown-content-shadow: getVar("shadow") !default;
$dropdown-content-z: 20 !default;
$dropdown-item-color: $text !default;
$dropdown-item-hover-color: $scheme-invert !default;
$dropdown-item-hover-background-color: $background !default;
$dropdown-item-active-color: $link-invert !default;
$dropdown-item-active-background-color: $link !default;
$dropdown-item-color: getVar("text") !default;
$dropdown-item-hover-color: getVar("scheme-invert") !default;
$dropdown-item-hover-background-color: getVar("background") !default;
$dropdown-item-active-color: getVar("link-invert") !default;
$dropdown-item-active-background-color: getVar("link") !default;
$dropdown-divider-background-color: $border-light !default;
$dropdown-divider-background-color: getVar("border-light") !default;
:root {
@include register-vars(
(
dropdown-menu-min-width: #{$dropdown-menu-min-width},
dropdown-content-background-color: #{$dropdown-content-background-color},
dropdown-content-arrow: #{$dropdown-content-arrow},
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-color: #{$dropdown-item-color},
dropdown-item-hover-color: #{$dropdown-item-hover-color},
dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color},
dropdown-item-active-color: #{$dropdown-item-active-color},
dropdown-item-active-background-color: #{$dropdown-item-active-background-color},
dropdown-divider-background-color: #{$dropdown-divider-background-color},
)
);
}
.#{$class-prefix}dropdown {
display: inline-flex;
@ -41,7 +63,7 @@ $dropdown-divider-background-color: $border-light !default;
&.is-up {
.#{$class-prefix}dropdown-menu {
bottom: 100%;
padding-bottom: $dropdown-content-offset;
padding-bottom: getVar("dropdown-content-offset");
padding-top: initial;
top: auto;
}
@ -53,23 +75,23 @@ $dropdown-divider-background-color: $border-light !default;
@include ltr-position(0, false);
min-width: $dropdown-menu-min-width;
padding-top: $dropdown-content-offset;
min-width: getVar("dropdown-menu-min-width");
padding-top: getVar("dropdown-content-offset");
position: absolute;
top: 100%;
z-index: $dropdown-content-z;
z-index: getVar("dropdown-content-z");
}
.#{$class-prefix}dropdown-content {
background-color: $dropdown-content-background-color;
border-radius: $dropdown-content-radius;
box-shadow: $dropdown-content-shadow;
padding-bottom: $dropdown-content-padding-bottom;
padding-top: $dropdown-content-padding-top;
background-color: getVar("dropdown-content-background-color");
border-radius: getVar("dropdown-content-radius");
box-shadow: getVar("dropdown-content-shadow");
padding-bottom: getVar("dropdown-content-padding-bottom");
padding-top: getVar("dropdown-content-padding-top");
}
.#{$class-prefix}dropdown-item {
color: $dropdown-item-color;
color: getVar("dropdown-item-color");
display: block;
font-size: 0.875rem;
line-height: 1.5;
@ -86,18 +108,18 @@ button.#{$class-prefix}dropdown-item {
width: 100%;
&:hover {
background-color: $dropdown-item-hover-background-color;
color: $dropdown-item-hover-color;
background-color: getVar("dropdown-item-hover-background-color");
color: getVar("dropdown-item-hover-color");
}
&.is-active {
background-color: $dropdown-item-active-background-color;
color: $dropdown-item-active-color;
background-color: getVar("dropdown-item-active-background-color");
color: getVar("dropdown-item-active-color");
}
}
.#{$class-prefix}dropdown-divider {
background-color: $dropdown-divider-background-color;
background-color: getVar("dropdown-divider-background-color");
border: none;
display: block;
height: 1px;

10
sass/components/level.scss
View File

@ -1,7 +1,5 @@
@import "../utilities/mixins";
$level-item-spacing: $block-spacing * 0.5 !default;
.#{$class-prefix}level {
@extend %block;
@ -9,7 +7,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
justify-content: space-between;
code {
border-radius: $radius;
border-radius: getVar("radius");
}
img {
@ -34,7 +32,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
&:not(:last-child) {
margin-bottom: 0;
@include ltr-property("margin", $level-item-spacing);
@include ltr-property("margin", getVar("level-item-spacing"));
}
&:not(.is-narrow) {
@ -71,7 +69,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
// Responsiveness
@include mobile {
&:not(:last-child) {
margin-bottom: $level-item-spacing;
margin-bottom: getVar("level-item-spacing");
}
}
}
@ -91,7 +89,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
// Responsiveness
@include tablet {
&:not(:last-child) {
@include ltr-property("margin", $level-item-spacing);
@include ltr-property("margin", getVar("level-item-spacing"));
}
}
}

47
sass/components/media.scss
View File

@ -1,6 +1,6 @@
@import "../utilities/mixins";
$media-border-color: bulmaRgba($border, 0.5) !default;
$media-border-color: bulmaRgba($border, 0.5) !default; // TODO
$media-border-size: 1px !default;
$media-spacing: 1rem !default;
$media-spacing-large: 1.5rem !default;
@ -9,45 +9,64 @@ $media-level-1-spacing: 0.75rem !default;
$media-level-1-content-spacing: 0.5rem !default;
$media-level-2-spacing: 0.5rem !default;
:root {
@include register-vars(
(
media-border-color: #{$media-border-color},
media-border-size: #{$media-border-size},
media-spacing: #{$media-spacing},
media-spacing-large: #{$media-spacing-large},
media-content-spacing: #{$media-content-spacing},
media-level-1-spacing: #{$media-level-1-spacing},
media-level-1-content-spacing: #{$media-level-1-content-spacing},
media-level-2-spacing: #{$media-level-2-spacing},
)
);
}
.#{$class-prefix}media {
align-items: flex-start;
display: flex;
text-align: inherit;
.#{$class-prefix}content:not(:last-child) {
margin-bottom: $media-content-spacing;
margin-bottom: getVar("media-content-spacing");
}
.#{$class-prefix}media {
border-top: $media-border-size solid $media-border-color;
border-top-color: getVar("media-border-color");
border-top-style: solid;
border-top-width: getVar("media-border-size");
display: flex;
padding-top: $media-level-1-spacing;
padding-top: getVar("media-level-1-spacing");
.#{$class-prefix}content:not(:last-child),
.#{$class-prefix}control:not(:last-child) {
margin-bottom: $media-level-1-content-spacing;
margin-bottom: getVar("media-level-1-content-spacing");
}
.#{$class-prefix}media {
padding-top: $media-level-2-spacing;
padding-top: getVar("media-level-2-spacing");
& + .#{$class-prefix}media {
margin-top: $media-level-2-spacing;
margin-top: getVar("media-level-2-spacing");
}
}
}
& + .#{$class-prefix}media {
border-top: $media-border-size solid $media-border-color;
margin-top: $media-spacing;
padding-top: $media-spacing;
border-top-color: getVar("media-border-color");
border-top-style: solid;
border-top-width: getVar("media-border-size");
margin-top: getVar("media-spacing");
padding-top: getVar("media-spacing");
}
// Sizes
&.is-large {
& + .#{$class-prefix}media {
margin-top: $media-spacing-large;
padding-top: $media-spacing-large;
margin-top: getVar("media-spacing-large");
padding-top: getVar("media-spacing-large");
}
}
}
@ -60,11 +79,11 @@ $media-level-2-spacing: 0.5rem !default;
}
.#{$class-prefix}media-left {
@include ltr-property("margin", $media-spacing);
@include ltr-property("margin", getVar("media-spacing"));
}
.#{$class-prefix}media-right {
@include ltr-property("margin", $media-spacing, false);
@include ltr-property("margin", getVar("media-spacing"), false);
}
.#{$class-prefix}media-content {

84
sass/components/menu.scss
View File

@ -1,83 +1,107 @@
@import "../utilities/mixins";
$menu-item-color: $text !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $text-strong !default;
$menu-item-hover-background-color: $background !default;
$menu-item-active-color: $link-invert !default;
$menu-item-active-background-color: $link !default;
$menu-item-color: getVar("text") !default;
$menu-item-radius: getVar("radius-small") !default;
$menu-item-hover-color: getVar("text-strong") !default;
$menu-item-hover-background-color: getVar("background") !default;
$menu-item-active-color: getVar("link-invert") !default;
$menu-item-active-background-color: getVar("link") !default;
$menu-list-border-left: 1px solid $border !default;
$menu-list-border-left: 1px solid 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: $text-light !default;
$menu-label-color: getVar("text-light") !default;
$menu-label-font-size: 0.75em !default;
$menu-label-letter-spacing: 0.1em !default;
$menu-label-spacing: 1em !default;
:root {
@include register-vars(
(
menu-item-color: #{$menu-item-color},
menu-item-radius: #{$menu-item-radius},
menu-item-hover-color: #{$menu-item-hover-color},
menu-item-hover-background-color: #{$menu-item-hover-background-color},
menu-item-active-color: #{$menu-item-active-color},
menu-item-active-background-color: #{$menu-item-active-background-color},
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},
)
);
}
.#{$class-prefix}menu {
font-size: $size-normal;
font-size: getVar("size-normal");
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
}
.#{$class-prefix}menu-list {
line-height: $menu-list-line-height;
line-height: getVar("menu-list-line-height");
a {
border-radius: $menu-item-radius;
color: $menu-item-color;
border-radius: getVar("menu-item-radius");
color: getVar("menu-item-color");
display: block;
padding: $menu-list-link-padding;
padding: getVar("menu-list-link-padding");
&:hover {
background-color: $menu-item-hover-background-color;
color: $menu-item-hover-color;
background-color: getVar("menu-item-hover-background-color");
color: getVar("menu-item-hover-color");
}
// Modifiers
&.is-active {
background-color: $menu-item-active-background-color;
color: $menu-item-active-color;
background-color: getVar("menu-item-active-background-color");
color: getVar("menu-item-active-color");
}
}
li {
ul {
@include ltr-property("border", $menu-list-border-left, false);
margin: $menu-nested-list-margin;
@include ltr-property("padding", $menu-nested-list-padding-left, false);
@include ltr-property("border", getVar("menu-list-border-left"), false);
margin: getVar("menu-nested-list-margin");
@include ltr-property(
"padding",
getVar("menu-nested-list-padding-left"),
false
);
}
}
}
.#{$class-prefix}menu-label {
color: $menu-label-color;
font-size: $menu-label-font-size;
letter-spacing: $menu-label-letter-spacing;
color: getVar("menu-label-color");
font-size: getVar("menu-label-font-size");
letter-spacing: getVar("menu-label-letter-spacing");
text-transform: uppercase;
&:not(:first-child) {
margin-top: $menu-label-spacing;
margin-top: getVar("menu-label-spacing");
}
&:not(:last-child) {
margin-bottom: $menu-label-spacing;
margin-bottom: getVar("menu-label-spacing");
}
}

82
sass/components/message.scss
View File

@ -1,32 +1,54 @@
@import "../utilities/mixins";
$message-background-color: $background !default;
$message-radius: $radius !default;
$message-background-color: getVar("background") !default;
$message-radius: getVar("radius") !default;
$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-weight: $weight-bold !default;
$message-header-background-color: getVar("text") !default;
$message-header-color: getVar("text-invert") !default;
$message-header-weight: getVar("weight-bold") !default;
$message-header-padding: 0.75em 1em !default;
$message-header-radius: $radius !default;
$message-header-radius: getVar("radius") !default;
$message-body-border-color: $border !default;
$message-body-border-color: getVar("border") !default;
$message-body-border-width: 0 0 0 4px !default;
$message-body-color: $text !default;
$message-body-color: getVar("text") !default;
$message-body-padding: 1.25em 1.5em !default;
$message-body-radius: $radius !default;
$message-body-radius: getVar("radius") !default;
$message-body-pre-background-color: $scheme-main !default;
$message-body-pre-background-color: getVar("scheme-main") !default;
$message-body-pre-code-background-color: transparent !default;
$message-header-body-border-width: 0 !default;
$message-colors: $colors !default;
:root {
@include register-vars(
(
message-background-color: #{$message-background-color},
message-radius: #{$message-radius},
message-header-background-color: #{$message-header-background-color},
message-header-color: #{$message-header-color},
message-header-weight: #{$message-header-weight},
message-header-padding: #{$message-header-padding},
message-header-radius: #{$message-header-radius},
message-body-border-color: #{$message-body-border-color},
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-background-color: #{$message-body-pre-background-color},
message-body-pre-code-background-color: #{$message-body-pre-code-background-color},
message-header-body-border-width: #{$message-header-body-border-width},
)
);
}
.#{$class-prefix}message {
@extend %block;
background-color: $message-background-color;
border-radius: $message-radius;
font-size: $size-normal;
background-color: getVar("message-background-color");
border-radius: getVar("message-radius");
font-size: getVar("size-normal");
strong {
color: currentColor;
@ -39,18 +61,19 @@ $message-colors: $colors !default;
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
// Colors
// TODO
@each $name, $components in $message-colors {
$color: nth($components, 1);
$color-invert: nth($components, 2);
@ -94,14 +117,15 @@ $message-colors: $colors !default;
.#{$class-prefix}message-header {
align-items: center;
background-color: $message-header-background-color;
border-radius: $message-header-radius $message-header-radius 0 0;
color: $message-header-color;
background-color: getVar("message-header-background-color");
border-radius: getVar("message-header-radius") getVar("message-header-radius")
0 0;
color: getVar("message-header-color");
display: flex;
font-weight: $message-header-weight;
font-weight: getVar("message-header-weight");
justify-content: space-between;
line-height: 1.25;
padding: $message-header-padding;
padding: getVar("message-header-padding");
position: relative;
.#{$class-prefix}delete {
@ -112,26 +136,26 @@ $message-colors: $colors !default;
}
& + .#{$class-prefix}message-body {
border-width: $message-header-body-border-width;
border-width: getVar("message-header-body-border-width");
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.#{$class-prefix}message-body {
border-color: $message-body-border-color;
border-radius: $message-body-radius;
border-color: getVar("message-body-border-color");
border-radius: getVar("message-body-radius");
border-style: solid;
border-width: $message-body-border-width;
color: $message-body-color;
padding: $message-body-padding;
border-width: getVar("message-body-border-width");
color: getVar("message-body-color");
padding: getVar("message-body-padding");
code,
pre {
background-color: $message-body-pre-background-color;
background-color: getVar("message-body-pre-background-color");
}
pre code {
background-color: $message-body-pre-code-background-color;
background-color: getVar("message-body-pre-code-background-color");
}
}

94
sass/components/modal.scss
View File

@ -15,23 +15,51 @@ $modal-close-top: 20px !default;
$modal-card-spacing: 40px !default;
$modal-card-head-background-color: $background !default;
$modal-card-head-border-bottom: 1px solid $border !default;
$modal-card-head-background-color: getVar("background") !default;
$modal-card-head-border-bottom: 1px solid getVar("border") !default;
$modal-card-head-padding: 20px !default;
$modal-card-head-radius: $radius-large !default;
$modal-card-head-radius: getVar("radius-large") !default;
$modal-card-title-color: $text-strong !default;
$modal-card-title-color: getVar("text-strong") !default;
$modal-card-title-line-height: 1 !default;
$modal-card-title-size: $size-4 !default;
$modal-card-title-size: getVar("size-4") !default;
$modal-card-foot-radius: $radius-large !default;
$modal-card-foot-border-top: 1px solid $border !default;
$modal-card-foot-radius: getVar("radius-large") !default;
$modal-card-foot-border-top: 1px solid getVar("border") !default;
$modal-card-body-background-color: $scheme-main !default;
$modal-card-body-background-color: getVar("scheme-main") !default;
$modal-card-body-padding: 20px !default;
$modal-breakpoint: $tablet !default;
:root {
@include 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-border-bottom: #{$modal-card-head-border-bottom},
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-radius: #{$modal-card-foot-radius},
modal-card-foot-border-top: #{$modal-card-foot-border-top},
modal-card-body-background-color: #{$modal-card-body-background-color},
modal-card-body-padding: #{$modal-card-body-padding},
)
);
}
.#{$class-prefix}modal {
@extend %overlay;
@ -41,7 +69,7 @@ $modal-breakpoint: $tablet !default;
justify-content: center;
overflow: hidden;
position: fixed;
z-index: $modal-z;
z-index: getVar("modal-z");
// Modifiers
&.is-active {
@ -52,13 +80,13 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-background {
@extend %overlay;
background-color: $modal-background-background-color;
background-color: getVar("modal-background-background-color");
}
.#{$class-prefix}modal-content,
.#{$class-prefix}modal-card {
margin: 0 $modal-content-margin-mobile;
max-height: calc(100vh - #{$modal-content-spacing-mobile});
margin: 0 getVar("modal-content-margin-mobile");
max-height: calc(100vh - #{getVar("modal-content-spacing-mobile")});
overflow: auto;
position: relative;
width: 100%;
@ -66,8 +94,8 @@ $modal-breakpoint: $tablet !default;
// Responsiveness
@include from($modal-breakpoint) {
margin: 0 auto;
max-height: calc(100vh - #{$modal-content-spacing-tablet});
width: $modal-content-width;
max-height: calc(100vh - #{getVar("modal-content-spacing-tablet")});
width: getVar("modal-content-width");
}
}
@ -75,19 +103,17 @@ $modal-breakpoint: $tablet !default;
@extend %delete;
background: none;
height: $modal-close-dimensions;
height: getVar("modal-close-dimensions");
position: fixed;
@include ltr-position($modal-close-right);
top: $modal-close-top;
width: $modal-close-dimensions;
@include ltr-position(getVar("modal-close-right"));
top: getVar("modal-close-top");
width: getVar("modal-close-dimensions");
}
.#{$class-prefix}modal-card {
display: flex;
flex-direction: column;
max-height: calc(100vh - #{$modal-card-spacing});
max-height: calc(100vh - #{getVar("modal-card-spacing")});
overflow: hidden;
-ms-overflow-y: visible;
}
@ -95,32 +121,32 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-card-head,
.#{$class-prefix}modal-card-foot {
align-items: center;
background-color: $modal-card-head-background-color;
background-color: getVar("modal-card-head-background-color");
display: flex;
flex-shrink: 0;
justify-content: flex-start;
padding: $modal-card-head-padding;
padding: getVar("modal-card-head-padding");
position: relative;
}
.#{$class-prefix}modal-card-head {
border-bottom: $modal-card-head-border-bottom;
border-top-left-radius: $modal-card-head-radius;
border-top-right-radius: $modal-card-head-radius;
border-bottom: getVar("modal-card-head-border-bottom");
border-top-left-radius: getVar("modal-card-head-radius");
border-top-right-radius: getVar("modal-card-head-radius");
}
.#{$class-prefix}modal-card-title {
color: $modal-card-title-color;
color: getVar("modal-card-title-color");
flex-grow: 1;
flex-shrink: 0;
font-size: $modal-card-title-size;
line-height: $modal-card-title-line-height;
font-size: getVar("modal-card-title-size");
line-height: getVar("modal-card-title-line-height");
}
.#{$class-prefix}modal-card-foot {
border-bottom-left-radius: $modal-card-foot-radius;
border-bottom-right-radius: $modal-card-foot-radius;
border-top: $modal-card-foot-border-top;
border-bottom-left-radius: getVar("modal-card-foot-radius");
border-bottom-right-radius: getVar("modal-card-foot-radius");
border-top: getVar("modal-card-foot-border-top");
.#{$class-prefix}button {
&:not(:last-child) {
@ -132,9 +158,9 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-card-body {
@include overflow-touch;
background-color: $modal-card-body-background-color;
background-color: getVar("modal-card-body-background-color");
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: $modal-card-body-padding;
padding: getVar("modal-card-body-padding");
}

230
sass/components/navbar.scss
View File

@ -1,48 +1,48 @@
@import "../utilities/mixins";
$navbar-background-color: $scheme-main !default;
$navbar-background-color: getVar("scheme-main") !default;
$navbar-box-shadow-size: 0 2px 0 0 !default;
$navbar-box-shadow-color: $background !default;
$navbar-box-shadow-color: 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-color: $text !default;
$navbar-item-hover-color: $link !default;
$navbar-item-hover-background-color: $scheme-main-bis !default;
$navbar-item-active-color: $scheme-invert !default;
$navbar-item-color: getVar("text") !default;
$navbar-item-hover-color: getVar("link") !default;
$navbar-item-hover-background-color: getVar("scheme-main-bis") !default;
$navbar-item-active-color: getVar("scheme-invert") !default;
$navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !default;
$navbar-burger-color: $navbar-item-color !default;
$navbar-burger-color: getVar("navbar-item-color") !default;
$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default;
$navbar-tab-active-color: $link !default;
$navbar-tab-hover-border-bottom-color: getVar("link") !default;
$navbar-tab-active-color: getVar("link") !default;
$navbar-tab-active-background-color: transparent !default;
$navbar-tab-active-border-bottom-color: $link !default;
$navbar-tab-active-border-bottom-color: getVar("link") !default;
$navbar-tab-active-border-bottom-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default;
$navbar-dropdown-background-color: $scheme-main !default;
$navbar-dropdown-border-top: 2px solid $border !default;
$navbar-dropdown-background-color: getVar("scheme-main") !default;
$navbar-dropdown-border-top: 2px solid getVar("border") !default;
$navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default;
$navbar-dropdown-radius: $radius-large !default;
$navbar-dropdown-arrow: getVar("link") !default;
$navbar-dropdown-radius: getVar("radius-large") !default;
$navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: $radius-large !default;
$navbar-dropdown-boxed-radius: getVar("radius-large") !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1),
0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
$navbar-dropdown-item-hover-color: $scheme-invert !default;
$navbar-dropdown-item-hover-background-color: $background !default;
$navbar-dropdown-item-active-color: $link !default;
$navbar-dropdown-item-active-background-color: $background !default;
$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: getVar("background") !default;
$navbar-dropdown-item-active-color: getVar("link") !default;
$navbar-dropdown-item-active-background-color: getVar("background") !default;
$navbar-divider-background-color: $background !default;
$navbar-divider-background-color: getVar("background") !default;
$navbar-divider-height: 2px !default;
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
@ -51,18 +51,62 @@ $navbar-breakpoint: $desktop !default;
$navbar-colors: $colors !default;
:root {
@include register-vars(
(
navbar-background-color: #{$navbar-background-color},
navbar-box-shadow-size: #{$navbar-box-shadow-size},
navbar-box-shadow-color: #{$navbar-box-shadow-color},
navbar-height: #{$navbar-height},
navbar-padding-vertical: #{$navbar-padding-vertical},
navbar-padding-horizontal: #{$navbar-padding-horizontal},
navbar-z: #{$navbar-z},
navbar-fixed-z: #{$navbar-fixed-z},
navbar-item-color: #{$navbar-item-color},
navbar-item-hover-color: #{$navbar-item-hover-color},
navbar-item-hover-background-color: #{$navbar-item-hover-background-color},
navbar-item-active-color: #{$navbar-item-active-color},
navbar-item-active-background-color: #{$navbar-item-active-background-color},
navbar-item-img-max-height: #{$navbar-item-img-max-height},
navbar-burger-color: #{$navbar-burger-color},
navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color},
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-top: #{$navbar-dropdown-border-top},
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-hover-color: #{$navbar-dropdown-item-hover-color},
navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color},
navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color},
navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color},
navbar-divider-background-color: #{$navbar-divider-background-color},
navbar-divider-height: #{$navbar-divider-height},
navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size},
)
);
}
@mixin navbar-fixed {
left: 0;
position: fixed;
right: 0;
z-index: $navbar-fixed-z;
z-index: getVar("navbar-fixed-z");
}
.#{$class-prefix}navbar {
background-color: $navbar-background-color;
min-height: $navbar-height;
background-color: getVar("navbar-background-color");
min-height: getVar("navbar-height");
position: relative;
z-index: $navbar-z;
z-index: getVar("navbar-z");
@each $name, $pair in $navbar-colors {
$color: nth($pair, 1);
@ -149,12 +193,13 @@ $navbar-colors: $colors !default;
& > .#{$class-prefix}container {
align-items: stretch;
display: flex;
min-height: $navbar-height;
min-height: getVar("navbar-height");
width: 100%;
}
&.has-shadow {
box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color;
box-shadow: getVar("navbar-box-shadow-size")
getVar("navbar-box-shadow-color");
}
&.is-fixed-bottom,
@ -166,7 +211,8 @@ $navbar-colors: $colors !default;
bottom: 0;
&.has-shadow {
box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color;
box-shadow: getVar("navbar-bottom-box-shadow-size")
getVar("navbar-box-shadow-color");
}
}
@ -178,11 +224,11 @@ $navbar-colors: $colors !default;
html,
body {
&.has-navbar-fixed-top {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
}
@ -191,7 +237,7 @@ body {
align-items: stretch;
display: flex;
flex-shrink: 0;
min-height: $navbar-height;
min-height: getVar("navbar-height");
}
.#{$class-prefix}navbar-brand {
@ -214,9 +260,9 @@ body {
.#{$class-prefix}navbar-burger {
@extend %reset;
color: $navbar-burger-color;
color: getVar("navbar-burger-color");
@include hamburger($navbar-height);
@include hamburger(getVar("navbar-height"));
@include ltr-property("margin", auto, false);
}
@ -226,7 +272,7 @@ body {
.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
color: $navbar-item-color;
color: getVar("navbar-item-color");
display: block;
line-height: 1.5;
padding: 0.5rem 0.75rem;
@ -248,8 +294,8 @@ a.#{$class-prefix}navbar-item,
&:focus-within,
&:hover,
&.is-active {
background-color: $navbar-item-hover-background-color;
color: $navbar-item-hover-color;
background-color: getVar("navbar-item-hover-background-color");
color: getVar("navbar-item-hover-color");
}
}
@ -258,7 +304,7 @@ a.#{$class-prefix}navbar-item,
flex-shrink: 0;
img {
max-height: $navbar-item-img-max-height;
max-height: getVar("navbar-item-img-max-height");
}
&.has-dropdown {
@ -272,22 +318,24 @@ a.#{$class-prefix}navbar-item,
&.is-tab {
border-bottom: 1px solid transparent;
min-height: $navbar-height;
min-height: getVar("navbar-height");
padding-bottom: calc(0.5rem - 1px);
&:focus,
&:hover {
background-color: $navbar-tab-hover-background-color;
border-bottom-color: $navbar-tab-hover-border-bottom-color;
background-color: getVar("navbar-tab-hover-background-color");
border-bottom-color: getVar("navbar-tab-hover-border-bottom-color");
}
&.is-active {
background-color: $navbar-tab-active-background-color;
border-bottom-color: $navbar-tab-active-border-bottom-color;
border-bottom-style: $navbar-tab-active-border-bottom-style;
border-bottom-width: $navbar-tab-active-border-bottom-width;
color: $navbar-tab-active-color;
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width});
background-color: getVar("navbar-tab-active-background-color");
border-bottom-color: getVar("navbar-tab-active-border-bottom-color");
border-bottom-style: getVar("navbar-tab-active-border-bottom-style");
border-bottom-width: getVar("navbar-tab-active-border-bottom-width");
color: getVar("navbar-tab-active-color");
padding-bottom: calc(
0.5rem - #{getVar("navbar-tab-active-border-bottom-width")}
);
}
}
}
@ -302,10 +350,8 @@ a.#{$class-prefix}navbar-item,
&::after {
@extend %arrow;
border-color: $navbar-dropdown-arrow;
border-color: getVar("navbar-dropdown-arrow");
margin-top: -0.375em;
@include ltr-position(1.125em);
}
}
@ -322,10 +368,10 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-divider {
background-color: $navbar-divider-background-color;
background-color: getVar("navbar-divider-background-color");
border: none;
display: none;
height: $navbar-divider-height;
height: getVar("navbar-divider-height");
margin: 0.5rem 0;
}
@ -349,7 +395,7 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-menu {
background-color: $navbar-background-color;
background-color: getVar("navbar-background-color");
box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
padding: 0.5rem 0;
@ -382,7 +428,7 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-menu {
@include overflow-touch;
max-height: calc(100vh - #{$navbar-height});
max-height: calc(100vh - #{getVar("navbar-height")});
overflow: auto;
}
}
@ -391,11 +437,11 @@ a.#{$class-prefix}navbar-item,
html,
body {
&.has-navbar-fixed-top-touch {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom-touch {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
}
}
@ -410,10 +456,11 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar {
min-height: $navbar-height;
min-height: getVar("navbar-height");
&.is-spaced {
padding: $navbar-padding-vertical $navbar-padding-horizontal;
padding: getVar("navbar-padding-vertical")
getVar("navbar-padding-horizontal");
.#{$class-prefix}navbar-start,
.#{$class-prefix}navbar-end {
@ -422,7 +469,7 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
border-radius: $radius;
border-radius: getVar("radius");
}
}
@ -451,13 +498,17 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item {
&:focus,
&:hover {
background-color: $navbar-dropdown-item-hover-background-color;
color: $navbar-dropdown-item-hover-color;
background-color: getVar(
"navbar-dropdown-item-hover-background-color"
);
color: getVar("navbar-dropdown-item-hover-color");
}
&.is-active {
background-color: $navbar-dropdown-item-active-background-color;
color: $navbar-dropdown-item-active-color;
background-color: getVar(
"navbar-dropdown-item-active-background-color"
);
color: getVar("navbar-dropdown-item-active-color");
}
}
}
@ -485,8 +536,9 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-dropdown {
border-bottom: $navbar-dropdown-border-top;
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
border-bottom: getVar("navbar-dropdown-border-top");
border-radius: getVar("navbar-dropdown-radius")
getVar("navbar-dropdown-radius") 0 0;
border-top: none;
bottom: 100%;
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
@ -529,20 +581,18 @@ a.#{$class-prefix}navbar-item,
}
.#{$class-prefix}navbar-dropdown {
background-color: $navbar-dropdown-background-color;
border-bottom-left-radius: $navbar-dropdown-radius;
border-bottom-right-radius: $navbar-dropdown-radius;
border-top: $navbar-dropdown-border-top;
background-color: getVar("navbar-dropdown-background-color");
border-bottom-left-radius: getVar("navbar-dropdown-radius");
border-bottom-right-radius: getVar("navbar-dropdown-radius");
border-top: getVar("navbar-dropdown-border-top");
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
display: none;
font-size: 0.875rem;
@include ltr-position(0, false);
min-width: 100%;
position: absolute;
top: 100%;
z-index: $navbar-dropdown-z;
z-index: getVar("navbar-dropdown-z");
.#{$class-prefix}navbar-item {
padding: 0.375rem 1rem;
@ -554,27 +604,29 @@ a.#{$class-prefix}navbar-item,
&:focus,
&:hover {
background-color: $navbar-dropdown-item-hover-background-color;
color: $navbar-dropdown-item-hover-color;
background-color: getVar("navbar-dropdown-item-hover-background-color");
color: getVar("navbar-dropdown-item-hover-color");
}
&.is-active {
background-color: $navbar-dropdown-item-active-background-color;
color: $navbar-dropdown-item-active-color;
background-color: getVar(
"navbar-dropdown-item-active-background-color"
);
color: getVar("navbar-dropdown-item-active-color");
}
}
.#{$class-prefix}navbar.is-spaced &,
&.is-boxed {
border-radius: $navbar-dropdown-boxed-radius;
border-radius: getVar("navbar-dropdown-boxed-radius");
border-top: none;
box-shadow: $navbar-dropdown-boxed-shadow;
box-shadow: getVar("navbar-dropdown-boxed-shadow");
display: block;
opacity: 0;
pointer-events: none;
top: calc(100% + (#{$navbar-dropdown-offset}));
top: calc(100% + (#{getVar("navbar-dropdown-offset")}));
transform: translateY(-5px);
transition-duration: $speed;
transition-duration: getVar("speed");
transition-property: opacity, transform;
}
@ -622,19 +674,25 @@ a.#{$class-prefix}navbar-item,
html,
body {
&.has-navbar-fixed-top-desktop {
padding-top: $navbar-height;
padding-top: getVar("navbar-height");
}
&.has-navbar-fixed-bottom-desktop {
padding-bottom: $navbar-height;
padding-bottom: getVar("navbar-height");
}
&.has-spaced-navbar-fixed-top {
padding-top: $navbar-height + $navbar-padding-vertical * 2;
padding-top: calc(
#{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
2)
);
}
&.has-spaced-navbar-fixed-bottom {
padding-bottom: $navbar-height + $navbar-padding-vertical * 2;
padding-bottom: calc(
#{getVar("navbar-height")} + calc(#{getVar("navbar-padding-vertical")} *
2)
);
}
}
@ -642,11 +700,11 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link {
&.is-active {
color: $navbar-item-active-color;
color: getVar("navbar-item-active-color");
}
&.is-active:not(:focus):not(:hover) {
background-color: $navbar-item-active-background-color;
background-color: getVar("navbar-item-active-background-color");
}
}
@ -655,7 +713,7 @@ a.#{$class-prefix}navbar-item,
&:hover,
&.is-active {
.#{$class-prefix}navbar-link {
background-color: $navbar-item-hover-background-color;
background-color: getVar("navbar-item-hover-background-color");
}
}
}
@ -665,6 +723,6 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}hero {
&.is-fullheight-with-navbar {
min-height: calc(100vh - #{$navbar-height});
min-height: calc(100vh - #{getVar("navbar-height")});
}
}

118
sass/components/pagination.scss
View File

@ -1,10 +1,10 @@
@import "../utilities/controls";
@import "../utilities/mixins";
$pagination-color: $text-strong !default;
$pagination-border-color: $border !default;
$pagination-color: getVar("text-strong") !default;
$pagination-border-color: getVar("border") !default;
$pagination-margin: -0.25rem !default;
$pagination-min-width: $control-height !default;
$pagination-min-width: $control-height !default; // TODO
$pagination-item-font-size: 1em !default;
$pagination-item-margin: 0.25rem !default;
@ -14,44 +14,75 @@ $pagination-item-padding-right: 0.5em !default;
$pagination-nav-padding-left: 0.75em !default;
$pagination-nav-padding-right: 0.75em !default;
$pagination-hover-color: $link-hover !default;
$pagination-hover-border-color: $link-hover-border !default;
$pagination-hover-color: getVar("link-hover") !default;
$pagination-hover-border-color: getVar("link-hover-border") !default;
$pagination-focus-color: $link-focus !default;
$pagination-focus-border-color: $link-focus-border !default;
$pagination-focus-color: getVar("link-focus") !default;
$pagination-focus-border-color: getVar("link-focus-border") !default;
$pagination-active-color: $link-active !default;
$pagination-active-border-color: $link-active-border !default;
$pagination-active-color: getVar("link-active") !default;
$pagination-active-border-color: getVar("link-active-border") !default;
$pagination-disabled-color: $text-light !default;
$pagination-disabled-background-color: $border !default;
$pagination-disabled-border-color: $border !default;
$pagination-disabled-color: getVar("text-light") !default;
$pagination-disabled-background-color: getVar("border") !default;
$pagination-disabled-border-color: getVar("border") !default;
$pagination-current-color: $link-invert !default;
$pagination-current-background-color: $link !default;
$pagination-current-border-color: $link !default;
$pagination-current-color: getVar("link-invert") !default;
$pagination-current-background-color: getVar("link") !default;
$pagination-current-border-color: getVar("link") !default;
$pagination-ellipsis-color: $grey-light !default;
$pagination-ellipsis-color: getVar("grey-light") !default;
$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
:root {
@include register-vars(
(
pagination-color: #{$pagination-color},
pagination-border-color: #{$pagination-border-color},
pagination-margin: #{$pagination-margin},
pagination-min-width: #{$pagination-min-width},
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-nav-padding-left: #{$pagination-nav-padding-left},
pagination-nav-padding-right: #{$pagination-nav-padding-right},
pagination-hover-color: #{$pagination-hover-color},
pagination-hover-border-color: #{$pagination-hover-border-color},
pagination-focus-color: #{$pagination-focus-color},
pagination-focus-border-color: #{$pagination-focus-border-color},
pagination-active-color: #{$pagination-active-color},
pagination-active-border-color: #{$pagination-active-border-color},
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},
)
);
}
.#{$class-prefix}pagination {
@extend %block;
font-size: $size-normal;
margin: $pagination-margin;
font-size: getVar("size-normal");
margin: getVar("pagination-margin");
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
&.is-rounded {
@ -59,11 +90,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.#{$class-prefix}pagination-next {
padding-left: 1em;
padding-right: 1em;
border-radius: $radius-rounded;
border-radius: getVar("radius-rounded");
}
.#{$class-prefix}pagination-link {
border-radius: $radius-rounded;
border-radius: getVar("radius-rounded");
}
}
}
@ -81,64 +112,63 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.#{$class-prefix}pagination-link,
.#{$class-prefix}pagination-ellipsis {
@extend %control;
@extend %unselectable;
font-size: $pagination-item-font-size;
font-size: getVar("pagination-item-font-size");
justify-content: center;
margin: $pagination-item-margin;
padding-left: $pagination-item-padding-left;
padding-right: $pagination-item-padding-right;
margin: getVar("pagination-item-margin");
padding-left: getVar("pagination-item-padding-left");
padding-right: getVar("pagination-item-padding-right");
text-align: center;
}
.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next,
.#{$class-prefix}pagination-link {
border-color: $pagination-border-color;
color: $pagination-color;
min-width: $pagination-min-width;
border-color: getVar("pagination-border-color");
color: getVar("pagination-color");
min-width: getVar("pagination-min-width");
&:hover {
border-color: $pagination-hover-border-color;
color: $pagination-hover-color;
border-color: getVar("pagination-hover-border-color");
color: getVar("pagination-hover-color");
}
&:focus {
border-color: $pagination-focus-border-color;
border-color: getVar("pagination-focus-border-color");
}
&:active {
box-shadow: $pagination-shadow-inset;
box-shadow: getVar("pagination-shadow-inset");
}
&[disabled],
&.is-disabled {
background-color: $pagination-disabled-background-color;
border-color: $pagination-disabled-border-color;
background-color: getVar("pagination-disabled-background-color");
border-color: getVar("pagination-disabled-border-color");
box-shadow: none;
color: $pagination-disabled-color;
color: getVar("pagination-disabled-color");
opacity: 0.5;
}
}
.#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next {
padding-left: $pagination-nav-padding-left;
padding-right: $pagination-nav-padding-right;
padding-left: getVar("pagination-nav-padding-left");
padding-right: getVar("pagination-nav-padding-right");
white-space: nowrap;
}
.#{$class-prefix}pagination-link {
&.is-current {
background-color: $pagination-current-background-color;
border-color: $pagination-current-border-color;
color: $pagination-current-color;
background-color: getVar("pagination-current-background-color");
border-color: getVar("pagination-current-border-color");
color: getVar("pagination-current-color");
}
}
.#{$class-prefix}pagination-ellipsis {
color: $pagination-ellipsis-color;
color: getVar("pagination-ellipsis-color");
pointer-events: none;
}

118
sass/components/panel.scss
View File

@ -1,42 +1,72 @@
@import "../utilities/mixins";
$panel-margin: $block-spacing !default;
$panel-item-border: 1px solid $border-light !default;
$panel-radius: $radius-large !default;
$panel-shadow: $shadow !default;
$panel-margin: getVar("block-spacing") !default;
$panel-item-border: 1px solid getVar("border-light") !default;
$panel-radius: getVar("radius-large") !default;
$panel-shadow: getVar("shadow") !default;
$panel-heading-background-color: $border-light !default;
$panel-heading-color: $text-strong !default;
$panel-heading-background-color: getVar("border-light") !default;
$panel-heading-color: getVar("text-strong") !default;
$panel-heading-line-height: 1.25 !default;
$panel-heading-padding: 0.75em 1em !default;
$panel-heading-radius: $radius !default;
$panel-heading-radius: getVar("radius") !default;
$panel-heading-size: 1.25em !default;
$panel-heading-weight: $weight-bold !default;
$panel-heading-weight: getVar("weight-bold") !default;
$panel-tabs-font-size: 0.875em !default;
$panel-tab-border-bottom: 1px solid $border !default;
$panel-tab-active-border-bottom-color: $link-active-border !default;
$panel-tab-active-color: $link-active !default;
$panel-tab-border-bottom: 1px solid getVar("border") !default;
$panel-tab-active-border-bottom-color: getVar("link-active-border") !default;
$panel-tab-active-color: getVar("link-active") !default;
$panel-list-item-color: $text !default;
$panel-list-item-hover-color: $link !default;
$panel-list-item-color: getVar("text") !default;
$panel-list-item-hover-color: getVar("link") !default;
$panel-block-color: $text-strong !default;
$panel-block-hover-background-color: $background !default;
$panel-block-active-border-left-color: $link !default;
$panel-block-active-color: $link-active !default;
$panel-block-active-icon-color: $link !default;
$panel-block-color: getVar("text-strong") !default;
$panel-block-hover-background-color: getVar("background") !default;
$panel-block-active-border-left-color: getVar("link") !default;
$panel-block-active-color: getVar("link-active") !default;
$panel-block-active-icon-color: getVar("link") !default;
$panel-icon-color: $text-light !default;
$panel-icon-color: getVar("text-light") !default;
$panel-colors: $colors !default;
:root {
@include register-vars(
(
panel-margin: #{$panel-margin},
panel-item-border: #{$panel-item-border},
panel-radius: #{$panel-radius},
panel-shadow: #{$panel-shadow},
panel-heading-background-color: #{$panel-heading-background-color},
panel-heading-color: #{$panel-heading-color},
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: #{$panel-tab-border-bottom},
panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color},
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},
)
);
}
.#{$class-prefix}panel {
border-radius: $panel-radius;
box-shadow: $panel-shadow;
font-size: $size-normal;
border-radius: getVar("panel-radius");
box-shadow: getVar("panel-shadow");
font-size: getVar("size-normal");
&:not(:last-child) {
margin-bottom: $panel-margin;
margin-bottom: getVar("panel-margin");
}
// Colors
@ -64,52 +94,52 @@ $panel-colors: $colors !default;
.#{$class-prefix}panel-tabs,
.#{$class-prefix}panel-block {
&:not(:last-child) {
border-bottom: $panel-item-border;
border-bottom: getVar("panel-item-border");
}
}
.#{$class-prefix}panel-heading {
background-color: $panel-heading-background-color;
background-color: getVar("panel-heading-background-color");
border-radius: $panel-radius $panel-radius 0 0;
color: $panel-heading-color;
font-size: $panel-heading-size;
font-weight: $panel-heading-weight;
line-height: $panel-heading-line-height;
padding: $panel-heading-padding;
color: getVar("panel-heading-color");
font-size: getVar("panel-heading-size");
font-weight: getVar("panel-heading-weight");
line-height: getVar("panel-heading-line-height");
padding: getVar("panel-heading-padding");
}
.#{$class-prefix}panel-tabs {
align-items: flex-end;
display: flex;
font-size: $panel-tabs-font-size;
font-size: getVar("panel-tabs-font-size");
justify-content: center;
a {
border-bottom: $panel-tab-border-bottom;
border-bottom: getVar("panel-tab-border-bottom");
margin-bottom: -1px;
padding: 0.5em;
// Modifiers
&.is-active {
border-bottom-color: $panel-tab-active-border-bottom-color;
color: $panel-tab-active-color;
border-bottom-color: getVar("panel-tab-active-border-bottom-color");
color: getVar("panel-tab-active-color");
}
}
}
.#{$class-prefix}panel-list {
a {
color: $panel-list-item-color;
color: getVar("panel-list-item-color");
&:hover {
color: $panel-list-item-hover-color;
color: getVar("panel-list-item-hover-color");
}
}
}
.#{$class-prefix}panel-block {
align-items: center;
color: $panel-block-color;
color: getVar("panel-block-color");
display: flex;
justify-content: flex-start;
padding: 0.5em 0.75em;
@ -129,17 +159,17 @@ $panel-colors: $colors !default;
}
&.is-active {
border-left-color: $panel-block-active-border-left-color;
color: $panel-block-active-color;
border-left-color: getVar("panel-block-active-border-left-color");
color: getVar("panel-block-active-color");
.#{$class-prefix}panel-icon {
color: $panel-block-active-icon-color;
color: getVar("panel-block-active-icon-color");
}
}
&:last-child {
border-bottom-left-radius: $panel-radius;
border-bottom-right-radius: $panel-radius;
border-bottom-left-radius: getVar("panel-radius");
border-bottom-right-radius: getVar("panel-radius");
}
}
@ -148,14 +178,14 @@ label.#{$class-prefix}panel-block {
cursor: pointer;
&:hover {
background-color: $panel-block-hover-background-color;
background-color: getVar("panel-block-hover-background-color");
}
}
.#{$class-prefix}panel-icon {
@include fa(14px, 1em);
color: $panel-icon-color;
color: getVar("panel-icon-color");
@include ltr-property("margin", 0.75em);

173
sass/components/tabs.scss
View File

@ -1,43 +1,72 @@
@import "../utilities/mixins";
$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-color: getVar("border") !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: $text !default;
$tabs-link-hover-border-bottom-color: $text-strong !default;
$tabs-link-hover-color: $text-strong !default;
$tabs-link-active-border-bottom-color: $link !default;
$tabs-link-active-color: $link !default;
$tabs-link-color: getVar("text") !default;
$tabs-link-hover-border-bottom-color: getVar("text-strong") !default;
$tabs-link-hover-color: getVar("text-strong") !default;
$tabs-link-active-border-bottom-color: getVar("link") !default;
$tabs-link-active-color: getVar("link") !default;
$tabs-link-padding: 0.5em 1em !default;
$tabs-boxed-link-radius: $radius !default;
$tabs-boxed-link-hover-background-color: $background !default;
$tabs-boxed-link-hover-border-bottom-color: $border !default;
$tabs-boxed-link-radius: getVar("radius") !default;
$tabs-boxed-link-hover-background-color: getVar("background") !default;
$tabs-boxed-link-hover-border-bottom-color: getVar("border") !default;
$tabs-boxed-link-active-background-color: $scheme-main !default;
$tabs-boxed-link-active-border-color: $border !default;
$tabs-boxed-link-active-background-color: getVar("scheme-main") !default;
$tabs-boxed-link-active-border-color: getVar("border") !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;
$tabs-toggle-link-border-color: $border !default;
$tabs-toggle-link-border-color: getVar("border") !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: $background !default;
$tabs-toggle-link-hover-border-color: $border-hover !default;
$tabs-toggle-link-radius: $radius !default;
$tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default;
$tabs-toggle-link-hover-background-color: getVar("background") !default;
$tabs-toggle-link-hover-border-color: getVar("border-hover") !default;
$tabs-toggle-link-radius: getVar("radius") !default;
$tabs-toggle-link-active-background-color: getVar("link") !default;
$tabs-toggle-link-active-border-color: getVar("link") !default;
$tabs-toggle-link-active-color: getVar("link-invert") !default;
:root {
@include 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},
)
);
}
.#{$class-prefix}tabs {
@extend %block;
@include overflow-touch;
@extend %unselectable;
align-items: stretch;
display: flex;
font-size: $size-normal;
font-size: getVar("size-normal");
justify-content: space-between;
overflow: hidden;
overflow-x: auto;
@ -45,19 +74,19 @@ $tabs-toggle-link-active-color: $link-invert !default;
a {
align-items: center;
border-bottom-color: $tabs-border-bottom-color;
border-bottom-style: $tabs-border-bottom-style;
border-bottom-width: $tabs-border-bottom-width;
color: $tabs-link-color;
border-bottom-color: getVar("tabs-border-bottom-color");
border-bottom-style: getVar("tabs-border-bottom-style");
border-bottom-width: getVar("tabs-border-bottom-width");
color: getVar("tabs-link-color");
display: flex;
justify-content: center;
margin-bottom: -#{$tabs-border-bottom-width};
padding: $tabs-link-padding;
margin-bottom: calc(-1 * #{getVar("tabs-border-bottom-width")});
padding: getVar("tabs-link-padding");
vertical-align: top;
&:hover {
border-bottom-color: $tabs-link-hover-border-bottom-color;
color: $tabs-link-hover-color;
border-bottom-color: getVar("tabs-link-hover-border-bottom-color");
color: getVar("tabs-link-hover-color");
}
}
@ -66,17 +95,17 @@ $tabs-toggle-link-active-color: $link-invert !default;
&.is-active {
a {
border-bottom-color: $tabs-link-active-border-bottom-color;
color: $tabs-link-active-color;
border-bottom-color: getVar("tabs-link-active-border-bottom-color");
color: getVar("tabs-link-active-color");
}
}
}
ul {
align-items: center;
border-bottom-color: $tabs-border-bottom-color;
border-bottom-style: $tabs-border-bottom-style;
border-bottom-width: $tabs-border-bottom-width;
border-bottom-color: getVar("tabs-border-bottom-color");
border-bottom-style: getVar("tabs-border-bottom-style");
border-bottom-width: getVar("tabs-border-bottom-width");
display: flex;
flex-grow: 1;
flex-shrink: 0;
@ -128,25 +157,31 @@ $tabs-toggle-link-active-color: $link-invert !default;
border: 1px solid transparent;
@include ltr {
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
border-radius: getVar("tabs-boxed-link-radius")
getVar("tabs-boxed-link-radius") 0 0;
}
@include rtl {
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
border-radius: 0 0 getVar("tabs-boxed-link-radius")
getVar("tabs-boxed-link-radius");
}
&:hover {
background-color: $tabs-boxed-link-hover-background-color;
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
background-color: getVar("tabs-boxed-link-hover-background-color");
border-bottom-color: getVar(
"tabs-boxed-link-hover-border-bottom-color"
);
}
}
li {
&.is-active {
a {
background-color: $tabs-boxed-link-active-background-color;
border-color: $tabs-boxed-link-active-border-color;
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
background-color: getVar("tabs-boxed-link-active-background-color");
border-color: getVar("tabs-boxed-link-active-border-color");
border-bottom-color: getVar(
"tabs-boxed-link-active-border-bottom-color"
) !important;
}
}
}
@ -161,15 +196,15 @@ $tabs-toggle-link-active-color: $link-invert !default;
&.is-toggle {
a {
border-color: $tabs-toggle-link-border-color;
border-style: $tabs-toggle-link-border-style;
border-width: $tabs-toggle-link-border-width;
border-color: getVar("tabs-toggle-link-border-color");
border-style: getVar("tabs-toggle-link-border-style");
border-width: getVar("tabs-toggle-link-border-width");
margin-bottom: 0;
position: relative;
&:hover {
background-color: $tabs-toggle-link-hover-background-color;
border-color: $tabs-toggle-link-hover-border-color;
background-color: getVar("tabs-toggle-link-hover-background-color");
border-color: getVar("tabs-toggle-link-hover-border-color");
z-index: 2;
}
}
@ -178,40 +213,40 @@ $tabs-toggle-link-active-color: $link-invert !default;
& + li {
@include ltr-property(
"margin",
-#{$tabs-toggle-link-border-width},
calc(-1 * #{getVar("tabs-toggle-link-border-width")}),
false
);
}
&:first-child a {
@include ltr {
border-top-left-radius: $tabs-toggle-link-radius;
border-bottom-left-radius: $tabs-toggle-link-radius;
border-top-left-radius: getVar("tabs-toggle-link-radius");
border-bottom-left-radius: getVar("tabs-toggle-link-radius");
}
@include rtl {
border-top-right-radius: $tabs-toggle-link-radius;
border-bottom-right-radius: $tabs-toggle-link-radius;
border-top-right-radius: getVar("tabs-toggle-link-radius");
border-bottom-right-radius: getVar("tabs-toggle-link-radius");
}
}
&:last-child a {
@include ltr {
border-top-right-radius: $tabs-toggle-link-radius;
border-bottom-right-radius: $tabs-toggle-link-radius;
border-top-right-radius: getVar("tabs-toggle-link-radius");
border-bottom-right-radius: getVar("tabs-toggle-link-radius");
}
@include rtl {
border-top-left-radius: $tabs-toggle-link-radius;
border-bottom-left-radius: $tabs-toggle-link-radius;
border-top-left-radius: getVar("tabs-toggle-link-radius");
border-bottom-left-radius: getVar("tabs-toggle-link-radius");
}
}
&.is-active {
a {
background-color: $tabs-toggle-link-active-background-color;
border-color: $tabs-toggle-link-active-border-color;
color: $tabs-toggle-link-active-color;
background-color: getVar("tabs-toggle-link-active-background-color");
border-color: getVar("tabs-toggle-link-active-border-color");
color: getVar("tabs-toggle-link-active-color");
z-index: 1;
}
}
@ -225,28 +260,28 @@ $tabs-toggle-link-active-color: $link-invert !default;
li {
&:first-child a {
@include ltr {
border-bottom-left-radius: $radius-rounded;
border-top-left-radius: $radius-rounded;
border-bottom-left-radius: getVar("radius-rounded");
border-top-left-radius: getVar("radius-rounded");
padding-left: 1.25em;
}
@include rtl {
border-bottom-right-radius: $radius-rounded;
border-top-right-radius: $radius-rounded;
border-bottom-right-radius: getVar("radius-rounded");
border-top-right-radius: getVar("radius-rounded");
padding-right: 1.25em;
}
}
&:last-child a {
@include ltr {
border-bottom-right-radius: $radius-rounded;
border-top-right-radius: $radius-rounded;
border-bottom-right-radius: getVar("radius-rounded");
border-top-right-radius: getVar("radius-rounded");
padding-right: 1.25em;
}
@include rtl {
border-bottom-left-radius: $radius-rounded;
border-top-left-radius: $radius-rounded;
border-bottom-left-radius: getVar("radius-rounded");
border-top-left-radius: getVar("radius-rounded");
padding-left: 1.25em;
}
}
@ -256,14 +291,14 @@ $tabs-toggle-link-active-color: $link-invert !default;
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
}

6
sass/themes/default.scss
View File

@ -16,6 +16,12 @@
weight-semibold: #{$weight-semibold},
weight-bold: #{$weight-bold},
block-spacing: #{$block-spacing},
easing: #{$easing},
radius-small: #{$radius-small},
radius: #{$radius},
radius-large: #{$radius-large},
radius-rounded: #{$radius-rounded},
speed: #{$speed},
scheme-main: #{$white},
scheme-main-bis: #{$white-bis},