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

41
sass/components/breadcrumb.scss
View File

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

88
sass/components/card.scss
View File

@ -1,62 +1,84 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$card-color: $text !default; $card-color: getVar("text") !default;
$card-background-color: $scheme-main !default; $card-background-color: getVar("scheme-main") !default;
$card-shadow: $shadow !default; $card-shadow: getVar("shadow") !default;
$card-radius: 0.25rem !default; $card-radius: 0.25rem !default;
$card-header-background-color: transparent !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-padding: 0.75rem 1rem !default;
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; $card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; // TODO
$card-header-weight: $weight-bold !default; $card-header-weight: getVar("weight-bold") !default;
$card-content-background-color: transparent !default; $card-content-background-color: transparent !default;
$card-content-padding: 1.5rem !default; $card-content-padding: 1.5rem !default;
$card-footer-background-color: transparent !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-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 { .#{$class-prefix}card {
background-color: $card-background-color; background-color: getVar("card-background-color");
border-radius: $card-radius; border-radius: getVar("card-radius");
box-shadow: $card-shadow; box-shadow: getVar("card-shadow");
color: $card-color; color: getVar("card-color");
max-width: 100%; max-width: 100%;
position: relative; position: relative;
} }
%card-item { %card-item {
&:first-child { &:first-child {
border-top-left-radius: $card-radius; border-top-left-radius: getVar("card-radius");
border-top-right-radius: $card-radius; border-top-right-radius: getVar("card-radius");
} }
&:last-child { &:last-child {
border-bottom-left-radius: $card-radius; border-bottom-left-radius: getVar("card-radius");
border-bottom-right-radius: $card-radius; border-bottom-right-radius: getVar("card-radius");
} }
} }
.#{$class-prefix}card-header { .#{$class-prefix}card-header {
@extend %card-item; @extend %card-item;
background-color: $card-header-background-color; background-color: getVar("card-header-background-color");
align-items: stretch; align-items: stretch;
box-shadow: $card-header-shadow; box-shadow: getVar("card-header-shadow");
display: flex; display: flex;
} }
.#{$class-prefix}card-header-title { .#{$class-prefix}card-header-title {
align-items: center; align-items: center;
color: $card-header-color; color: getVar("card-header-color");
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
font-weight: $card-header-weight; font-weight: getVar("card-header-weight");
padding: $card-header-padding; padding: getVar("card-header-padding");
&.is-centered { &.is-centered {
justify-content: center; justify-content: center;
@ -70,7 +92,7 @@ $card-media-margin: $block-spacing !default;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $card-header-padding; padding: getVar("card-header-padding");
} }
.#{$class-prefix}card-image { .#{$class-prefix}card-image {
@ -79,15 +101,15 @@ $card-media-margin: $block-spacing !default;
&:first-child { &:first-child {
img { img {
border-top-left-radius: $card-radius; border-top-left-radius: getVar("card-radius");
border-top-right-radius: $card-radius; border-top-right-radius: getVar("card-radius");
} }
} }
&:last-child { &:last-child {
img { img {
border-bottom-left-radius: $card-radius; border-bottom-left-radius: getVar("card-radius");
border-bottom-right-radius: $card-radius; border-bottom-right-radius: getVar("card-radius");
} }
} }
} }
@ -95,15 +117,15 @@ $card-media-margin: $block-spacing !default;
.#{$class-prefix}card-content { .#{$class-prefix}card-content {
@extend %card-item; @extend %card-item;
background-color: $card-content-background-color; background-color: getVar("card-content-background-color");
padding: $card-content-padding; padding: getVar("card-content-padding");
} }
.#{$class-prefix}card-footer { .#{$class-prefix}card-footer {
@extend %card-item; @extend %card-item;
background-color: $card-footer-background-color; background-color: getVar("card-footer-background-color");
border-top: $card-footer-border-top; border-top: getVar("card-footer-border-top");
align-items: stretch; align-items: stretch;
display: flex; display: flex;
} }
@ -115,10 +137,10 @@ $card-media-margin: $block-spacing !default;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
padding: $card-footer-padding; padding: getVar("card-footer-padding");
&:not(:last-child) { &: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}card {
.#{$class-prefix}media:not(:last-child) { .#{$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-menu-min-width: 12rem !default;
$dropdown-content-background-color: $scheme-main !default; $dropdown-content-background-color: getVar("scheme-main") !default;
$dropdown-content-arrow: $link !default; $dropdown-content-arrow: getVar("link") !default;
$dropdown-content-offset: 4px !default; $dropdown-content-offset: 4px !default;
$dropdown-content-padding-bottom: 0.5rem !default; $dropdown-content-padding-bottom: 0.5rem !default;
$dropdown-content-padding-top: 0.5rem !default; $dropdown-content-padding-top: 0.5rem !default;
$dropdown-content-radius: $radius !default; $dropdown-content-radius: getVar("radius") !default;
$dropdown-content-shadow: $shadow !default; $dropdown-content-shadow: getVar("shadow") !default;
$dropdown-content-z: 20 !default; $dropdown-content-z: 20 !default;
$dropdown-item-color: $text !default; $dropdown-item-color: getVar("text") !default;
$dropdown-item-hover-color: $scheme-invert !default; $dropdown-item-hover-color: getVar("scheme-invert") !default;
$dropdown-item-hover-background-color: $background !default; $dropdown-item-hover-background-color: getVar("background") !default;
$dropdown-item-active-color: $link-invert !default; $dropdown-item-active-color: getVar("link-invert") !default;
$dropdown-item-active-background-color: $link !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 { .#{$class-prefix}dropdown {
display: inline-flex; display: inline-flex;
@ -41,7 +63,7 @@ $dropdown-divider-background-color: $border-light !default;
&.is-up { &.is-up {
.#{$class-prefix}dropdown-menu { .#{$class-prefix}dropdown-menu {
bottom: 100%; bottom: 100%;
padding-bottom: $dropdown-content-offset; padding-bottom: getVar("dropdown-content-offset");
padding-top: initial; padding-top: initial;
top: auto; top: auto;
} }
@ -53,23 +75,23 @@ $dropdown-divider-background-color: $border-light !default;
@include ltr-position(0, false); @include ltr-position(0, false);
min-width: $dropdown-menu-min-width; min-width: getVar("dropdown-menu-min-width");
padding-top: $dropdown-content-offset; padding-top: getVar("dropdown-content-offset");
position: absolute; position: absolute;
top: 100%; top: 100%;
z-index: $dropdown-content-z; z-index: getVar("dropdown-content-z");
} }
.#{$class-prefix}dropdown-content { .#{$class-prefix}dropdown-content {
background-color: $dropdown-content-background-color; background-color: getVar("dropdown-content-background-color");
border-radius: $dropdown-content-radius; border-radius: getVar("dropdown-content-radius");
box-shadow: $dropdown-content-shadow; box-shadow: getVar("dropdown-content-shadow");
padding-bottom: $dropdown-content-padding-bottom; padding-bottom: getVar("dropdown-content-padding-bottom");
padding-top: $dropdown-content-padding-top; padding-top: getVar("dropdown-content-padding-top");
} }
.#{$class-prefix}dropdown-item { .#{$class-prefix}dropdown-item {
color: $dropdown-item-color; color: getVar("dropdown-item-color");
display: block; display: block;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
@ -86,18 +108,18 @@ button.#{$class-prefix}dropdown-item {
width: 100%; width: 100%;
&:hover { &:hover {
background-color: $dropdown-item-hover-background-color; background-color: getVar("dropdown-item-hover-background-color");
color: $dropdown-item-hover-color; color: getVar("dropdown-item-hover-color");
} }
&.is-active { &.is-active {
background-color: $dropdown-item-active-background-color; background-color: getVar("dropdown-item-active-background-color");
color: $dropdown-item-active-color; color: getVar("dropdown-item-active-color");
} }
} }
.#{$class-prefix}dropdown-divider { .#{$class-prefix}dropdown-divider {
background-color: $dropdown-divider-background-color; background-color: getVar("dropdown-divider-background-color");
border: none; border: none;
display: block; display: block;
height: 1px; height: 1px;

10
sass/components/level.scss
View File

@ -1,7 +1,5 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$level-item-spacing: $block-spacing * 0.5 !default;
.#{$class-prefix}level { .#{$class-prefix}level {
@extend %block; @extend %block;
@ -9,7 +7,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
justify-content: space-between; justify-content: space-between;
code { code {
border-radius: $radius; border-radius: getVar("radius");
} }
img { img {
@ -34,7 +32,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 0; margin-bottom: 0;
@include ltr-property("margin", $level-item-spacing); @include ltr-property("margin", getVar("level-item-spacing"));
} }
&:not(.is-narrow) { &:not(.is-narrow) {
@ -71,7 +69,7 @@ $level-item-spacing: $block-spacing * 0.5 !default;
// Responsiveness // Responsiveness
@include mobile { @include mobile {
&:not(:last-child) { &: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 // Responsiveness
@include tablet { @include tablet {
&:not(:last-child) { &: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"; @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-border-size: 1px !default;
$media-spacing: 1rem !default; $media-spacing: 1rem !default;
$media-spacing-large: 1.5rem !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-1-content-spacing: 0.5rem !default;
$media-level-2-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 { .#{$class-prefix}media {
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
text-align: inherit; text-align: inherit;
.#{$class-prefix}content:not(:last-child) { .#{$class-prefix}content:not(:last-child) {
margin-bottom: $media-content-spacing; margin-bottom: getVar("media-content-spacing");
} }
.#{$class-prefix}media { .#{$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; display: flex;
padding-top: $media-level-1-spacing; padding-top: getVar("media-level-1-spacing");
.#{$class-prefix}content:not(:last-child), .#{$class-prefix}content:not(:last-child),
.#{$class-prefix}control: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 { .#{$class-prefix}media {
padding-top: $media-level-2-spacing; padding-top: getVar("media-level-2-spacing");
& + .#{$class-prefix}media { & + .#{$class-prefix}media {
margin-top: $media-level-2-spacing; margin-top: getVar("media-level-2-spacing");
} }
} }
} }
& + .#{$class-prefix}media { & + .#{$class-prefix}media {
border-top: $media-border-size solid $media-border-color; border-top-color: getVar("media-border-color");
margin-top: $media-spacing; border-top-style: solid;
padding-top: $media-spacing; border-top-width: getVar("media-border-size");
margin-top: getVar("media-spacing");
padding-top: getVar("media-spacing");
} }
// Sizes // Sizes
&.is-large { &.is-large {
& + .#{$class-prefix}media { & + .#{$class-prefix}media {
margin-top: $media-spacing-large; margin-top: getVar("media-spacing-large");
padding-top: $media-spacing-large; padding-top: getVar("media-spacing-large");
} }
} }
} }
@ -60,11 +79,11 @@ $media-level-2-spacing: 0.5rem !default;
} }
.#{$class-prefix}media-left { .#{$class-prefix}media-left {
@include ltr-property("margin", $media-spacing); @include ltr-property("margin", getVar("media-spacing"));
} }
.#{$class-prefix}media-right { .#{$class-prefix}media-right {
@include ltr-property("margin", $media-spacing, false); @include ltr-property("margin", getVar("media-spacing"), false);
} }
.#{$class-prefix}media-content { .#{$class-prefix}media-content {

84
sass/components/menu.scss
View File

@ -1,83 +1,107 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$menu-item-color: $text !default; $menu-item-color: getVar("text") !default;
$menu-item-radius: $radius-small !default; $menu-item-radius: getVar("radius-small") !default;
$menu-item-hover-color: $text-strong !default; $menu-item-hover-color: getVar("text-strong") !default;
$menu-item-hover-background-color: $background !default; $menu-item-hover-background-color: getVar("background") !default;
$menu-item-active-color: $link-invert !default; $menu-item-active-color: getVar("link-invert") !default;
$menu-item-active-background-color: $link !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-line-height: 1.25 !default;
$menu-list-link-padding: 0.5em 0.75em !default; $menu-list-link-padding: 0.5em 0.75em !default;
$menu-nested-list-margin: 0.75em !default; $menu-nested-list-margin: 0.75em !default;
$menu-nested-list-padding-left: 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-font-size: 0.75em !default;
$menu-label-letter-spacing: 0.1em !default; $menu-label-letter-spacing: 0.1em !default;
$menu-label-spacing: 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 { .#{$class-prefix}menu {
font-size: $size-normal; font-size: getVar("size-normal");
// Sizes // Sizes
&.is-small { &.is-small {
font-size: $size-small; font-size: getVar("size-small");
} }
&.is-medium { &.is-medium {
font-size: $size-medium; font-size: getVar("size-medium");
} }
&.is-large { &.is-large {
font-size: $size-large; font-size: getVar("size-large");
} }
} }
.#{$class-prefix}menu-list { .#{$class-prefix}menu-list {
line-height: $menu-list-line-height; line-height: getVar("menu-list-line-height");
a { a {
border-radius: $menu-item-radius; border-radius: getVar("menu-item-radius");
color: $menu-item-color; color: getVar("menu-item-color");
display: block; display: block;
padding: $menu-list-link-padding; padding: getVar("menu-list-link-padding");
&:hover { &:hover {
background-color: $menu-item-hover-background-color; background-color: getVar("menu-item-hover-background-color");
color: $menu-item-hover-color; color: getVar("menu-item-hover-color");
} }
// Modifiers // Modifiers
&.is-active { &.is-active {
background-color: $menu-item-active-background-color; background-color: getVar("menu-item-active-background-color");
color: $menu-item-active-color; color: getVar("menu-item-active-color");
} }
} }
li { li {
ul { ul {
@include ltr-property("border", $menu-list-border-left, false); @include ltr-property("border", getVar("menu-list-border-left"), false);
margin: getVar("menu-nested-list-margin");
margin: $menu-nested-list-margin; @include ltr-property(
"padding",
@include ltr-property("padding", $menu-nested-list-padding-left, false); getVar("menu-nested-list-padding-left"),
false
);
} }
} }
} }
.#{$class-prefix}menu-label { .#{$class-prefix}menu-label {
color: $menu-label-color; color: getVar("menu-label-color");
font-size: $menu-label-font-size; font-size: getVar("menu-label-font-size");
letter-spacing: $menu-label-letter-spacing; letter-spacing: getVar("menu-label-letter-spacing");
text-transform: uppercase; text-transform: uppercase;
&:not(:first-child) { &:not(:first-child) {
margin-top: $menu-label-spacing; margin-top: getVar("menu-label-spacing");
} }
&:not(:last-child) { &: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"; @import "../utilities/mixins";
$message-background-color: $background !default; $message-background-color: getVar("background") !default;
$message-radius: $radius !default; $message-radius: getVar("radius") !default;
$message-header-background-color: $text !default; $message-header-background-color: getVar("text") !default;
$message-header-color: $text-invert !default; $message-header-color: getVar("text-invert") !default;
$message-header-weight: $weight-bold !default; $message-header-weight: getVar("weight-bold") !default;
$message-header-padding: 0.75em 1em !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-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-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-body-pre-code-background-color: transparent !default;
$message-header-body-border-width: 0 !default; $message-header-body-border-width: 0 !default;
$message-colors: $colors !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 { .#{$class-prefix}message {
@extend %block; @extend %block;
background-color: $message-background-color; background-color: getVar("message-background-color");
border-radius: $message-radius; border-radius: getVar("message-radius");
font-size: $size-normal; font-size: getVar("size-normal");
strong { strong {
color: currentColor; color: currentColor;
@ -39,18 +61,19 @@ $message-colors: $colors !default;
// Sizes // Sizes
&.is-small { &.is-small {
font-size: $size-small; font-size: getVar("size-small");
} }
&.is-medium { &.is-medium {
font-size: $size-medium; font-size: getVar("size-medium");
} }
&.is-large { &.is-large {
font-size: $size-large; font-size: getVar("size-large");
} }
// Colors // Colors
// TODO
@each $name, $components in $message-colors { @each $name, $components in $message-colors {
$color: nth($components, 1); $color: nth($components, 1);
$color-invert: nth($components, 2); $color-invert: nth($components, 2);
@ -94,14 +117,15 @@ $message-colors: $colors !default;
.#{$class-prefix}message-header { .#{$class-prefix}message-header {
align-items: center; align-items: center;
background-color: $message-header-background-color; background-color: getVar("message-header-background-color");
border-radius: $message-header-radius $message-header-radius 0 0; border-radius: getVar("message-header-radius") getVar("message-header-radius")
color: $message-header-color; 0 0;
color: getVar("message-header-color");
display: flex; display: flex;
font-weight: $message-header-weight; font-weight: getVar("message-header-weight");
justify-content: space-between; justify-content: space-between;
line-height: 1.25; line-height: 1.25;
padding: $message-header-padding; padding: getVar("message-header-padding");
position: relative; position: relative;
.#{$class-prefix}delete { .#{$class-prefix}delete {
@ -112,26 +136,26 @@ $message-colors: $colors !default;
} }
& + .#{$class-prefix}message-body { & + .#{$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-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
} }
.#{$class-prefix}message-body { .#{$class-prefix}message-body {
border-color: $message-body-border-color; border-color: getVar("message-body-border-color");
border-radius: $message-body-radius; border-radius: getVar("message-body-radius");
border-style: solid; border-style: solid;
border-width: $message-body-border-width; border-width: getVar("message-body-border-width");
color: $message-body-color; color: getVar("message-body-color");
padding: $message-body-padding; padding: getVar("message-body-padding");
code, code,
pre { pre {
background-color: $message-body-pre-background-color; background-color: getVar("message-body-pre-background-color");
} }
pre code { 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-spacing: 40px !default;
$modal-card-head-background-color: $background !default; $modal-card-head-background-color: getVar("background") !default;
$modal-card-head-border-bottom: 1px solid $border !default; $modal-card-head-border-bottom: 1px solid getVar("border") !default;
$modal-card-head-padding: 20px !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-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-radius: getVar("radius-large") !default;
$modal-card-foot-border-top: 1px solid $border !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-card-body-padding: 20px !default;
$modal-breakpoint: $tablet !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 { .#{$class-prefix}modal {
@extend %overlay; @extend %overlay;
@ -41,7 +69,7 @@ $modal-breakpoint: $tablet !default;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
z-index: $modal-z; z-index: getVar("modal-z");
// Modifiers // Modifiers
&.is-active { &.is-active {
@ -52,13 +80,13 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-background { .#{$class-prefix}modal-background {
@extend %overlay; @extend %overlay;
background-color: $modal-background-background-color; background-color: getVar("modal-background-background-color");
} }
.#{$class-prefix}modal-content, .#{$class-prefix}modal-content,
.#{$class-prefix}modal-card { .#{$class-prefix}modal-card {
margin: 0 $modal-content-margin-mobile; margin: 0 getVar("modal-content-margin-mobile");
max-height: calc(100vh - #{$modal-content-spacing-mobile}); max-height: calc(100vh - #{getVar("modal-content-spacing-mobile")});
overflow: auto; overflow: auto;
position: relative; position: relative;
width: 100%; width: 100%;
@ -66,8 +94,8 @@ $modal-breakpoint: $tablet !default;
// Responsiveness // Responsiveness
@include from($modal-breakpoint) { @include from($modal-breakpoint) {
margin: 0 auto; margin: 0 auto;
max-height: calc(100vh - #{$modal-content-spacing-tablet}); max-height: calc(100vh - #{getVar("modal-content-spacing-tablet")});
width: $modal-content-width; width: getVar("modal-content-width");
} }
} }
@ -75,19 +103,17 @@ $modal-breakpoint: $tablet !default;
@extend %delete; @extend %delete;
background: none; background: none;
height: $modal-close-dimensions; height: getVar("modal-close-dimensions");
position: fixed; position: fixed;
@include ltr-position(getVar("modal-close-right"));
@include ltr-position($modal-close-right); top: getVar("modal-close-top");
width: getVar("modal-close-dimensions");
top: $modal-close-top;
width: $modal-close-dimensions;
} }
.#{$class-prefix}modal-card { .#{$class-prefix}modal-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100vh - #{$modal-card-spacing}); max-height: calc(100vh - #{getVar("modal-card-spacing")});
overflow: hidden; overflow: hidden;
-ms-overflow-y: visible; -ms-overflow-y: visible;
} }
@ -95,32 +121,32 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-card-head, .#{$class-prefix}modal-card-head,
.#{$class-prefix}modal-card-foot { .#{$class-prefix}modal-card-foot {
align-items: center; align-items: center;
background-color: $modal-card-head-background-color; background-color: getVar("modal-card-head-background-color");
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
padding: $modal-card-head-padding; padding: getVar("modal-card-head-padding");
position: relative; position: relative;
} }
.#{$class-prefix}modal-card-head { .#{$class-prefix}modal-card-head {
border-bottom: $modal-card-head-border-bottom; border-bottom: getVar("modal-card-head-border-bottom");
border-top-left-radius: $modal-card-head-radius; border-top-left-radius: getVar("modal-card-head-radius");
border-top-right-radius: $modal-card-head-radius; border-top-right-radius: getVar("modal-card-head-radius");
} }
.#{$class-prefix}modal-card-title { .#{$class-prefix}modal-card-title {
color: $modal-card-title-color; color: getVar("modal-card-title-color");
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
font-size: $modal-card-title-size; font-size: getVar("modal-card-title-size");
line-height: $modal-card-title-line-height; line-height: getVar("modal-card-title-line-height");
} }
.#{$class-prefix}modal-card-foot { .#{$class-prefix}modal-card-foot {
border-bottom-left-radius: $modal-card-foot-radius; border-bottom-left-radius: getVar("modal-card-foot-radius");
border-bottom-right-radius: $modal-card-foot-radius; border-bottom-right-radius: getVar("modal-card-foot-radius");
border-top: $modal-card-foot-border-top; border-top: getVar("modal-card-foot-border-top");
.#{$class-prefix}button { .#{$class-prefix}button {
&:not(:last-child) { &:not(:last-child) {
@ -132,9 +158,9 @@ $modal-breakpoint: $tablet !default;
.#{$class-prefix}modal-card-body { .#{$class-prefix}modal-card-body {
@include overflow-touch; @include overflow-touch;
background-color: $modal-card-body-background-color; background-color: getVar("modal-card-body-background-color");
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
overflow: auto; 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"; @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-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-height: 3.25rem !default;
$navbar-padding-vertical: 1rem !default; $navbar-padding-vertical: 1rem !default;
$navbar-padding-horizontal: 2rem !default; $navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default; $navbar-z: 30 !default;
$navbar-fixed-z: 30 !default; $navbar-fixed-z: 30 !default;
$navbar-item-color: $text !default; $navbar-item-color: getVar("text") !default;
$navbar-item-hover-color: $link !default; $navbar-item-hover-color: getVar("link") !default;
$navbar-item-hover-background-color: $scheme-main-bis !default; $navbar-item-hover-background-color: getVar("scheme-main-bis") !default;
$navbar-item-active-color: $scheme-invert !default; $navbar-item-active-color: getVar("scheme-invert") !default;
$navbar-item-active-background-color: transparent !default; $navbar-item-active-background-color: transparent !default;
$navbar-item-img-max-height: 1.75rem !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-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: $link !default; $navbar-tab-hover-border-bottom-color: getVar("link") !default;
$navbar-tab-active-color: $link !default; $navbar-tab-active-color: getVar("link") !default;
$navbar-tab-active-background-color: transparent !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-style: solid !default;
$navbar-tab-active-border-bottom-width: 3px !default; $navbar-tab-active-border-bottom-width: 3px !default;
$navbar-dropdown-background-color: $scheme-main !default; $navbar-dropdown-background-color: getVar("scheme-main") !default;
$navbar-dropdown-border-top: 2px solid $border !default; $navbar-dropdown-border-top: 2px solid getVar("border") !default;
$navbar-dropdown-offset: -4px !default; $navbar-dropdown-offset: -4px !default;
$navbar-dropdown-arrow: $link !default; $navbar-dropdown-arrow: getVar("link") !default;
$navbar-dropdown-radius: $radius-large !default; $navbar-dropdown-radius: getVar("radius-large") !default;
$navbar-dropdown-z: 20 !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), $navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1),
0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default; 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
$navbar-dropdown-item-hover-color: $scheme-invert !default; $navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: $background !default; $navbar-dropdown-item-hover-background-color: getVar("background") !default;
$navbar-dropdown-item-active-color: $link !default; $navbar-dropdown-item-active-color: getVar("link") !default;
$navbar-dropdown-item-active-background-color: $background !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-divider-height: 2px !default;
$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default; $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
@ -51,18 +51,62 @@ $navbar-breakpoint: $desktop !default;
$navbar-colors: $colors !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 { @mixin navbar-fixed {
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: $navbar-fixed-z; z-index: getVar("navbar-fixed-z");
} }
.#{$class-prefix}navbar { .#{$class-prefix}navbar {
background-color: $navbar-background-color; background-color: getVar("navbar-background-color");
min-height: $navbar-height; min-height: getVar("navbar-height");
position: relative; position: relative;
z-index: $navbar-z; z-index: getVar("navbar-z");
@each $name, $pair in $navbar-colors { @each $name, $pair in $navbar-colors {
$color: nth($pair, 1); $color: nth($pair, 1);
@ -149,12 +193,13 @@ $navbar-colors: $colors !default;
& > .#{$class-prefix}container { & > .#{$class-prefix}container {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
min-height: $navbar-height; min-height: getVar("navbar-height");
width: 100%; width: 100%;
} }
&.has-shadow { &.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, &.is-fixed-bottom,
@ -166,7 +211,8 @@ $navbar-colors: $colors !default;
bottom: 0; bottom: 0;
&.has-shadow { &.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, html,
body { body {
&.has-navbar-fixed-top { &.has-navbar-fixed-top {
padding-top: $navbar-height; padding-top: getVar("navbar-height");
} }
&.has-navbar-fixed-bottom { &.has-navbar-fixed-bottom {
padding-bottom: $navbar-height; padding-bottom: getVar("navbar-height");
} }
} }
@ -191,7 +237,7 @@ body {
align-items: stretch; align-items: stretch;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
min-height: $navbar-height; min-height: getVar("navbar-height");
} }
.#{$class-prefix}navbar-brand { .#{$class-prefix}navbar-brand {
@ -214,9 +260,9 @@ body {
.#{$class-prefix}navbar-burger { .#{$class-prefix}navbar-burger {
@extend %reset; @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); @include ltr-property("margin", auto, false);
} }
@ -226,7 +272,7 @@ body {
.#{$class-prefix}navbar-item, .#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link { .#{$class-prefix}navbar-link {
color: $navbar-item-color; color: getVar("navbar-item-color");
display: block; display: block;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@ -248,8 +294,8 @@ a.#{$class-prefix}navbar-item,
&:focus-within, &:focus-within,
&:hover, &:hover,
&.is-active { &.is-active {
background-color: $navbar-item-hover-background-color; background-color: getVar("navbar-item-hover-background-color");
color: $navbar-item-hover-color; color: getVar("navbar-item-hover-color");
} }
} }
@ -258,7 +304,7 @@ a.#{$class-prefix}navbar-item,
flex-shrink: 0; flex-shrink: 0;
img { img {
max-height: $navbar-item-img-max-height; max-height: getVar("navbar-item-img-max-height");
} }
&.has-dropdown { &.has-dropdown {
@ -272,22 +318,24 @@ a.#{$class-prefix}navbar-item,
&.is-tab { &.is-tab {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
min-height: $navbar-height; min-height: getVar("navbar-height");
padding-bottom: calc(0.5rem - 1px); padding-bottom: calc(0.5rem - 1px);
&:focus, &:focus,
&:hover { &:hover {
background-color: $navbar-tab-hover-background-color; background-color: getVar("navbar-tab-hover-background-color");
border-bottom-color: $navbar-tab-hover-border-bottom-color; border-bottom-color: getVar("navbar-tab-hover-border-bottom-color");
} }
&.is-active { &.is-active {
background-color: $navbar-tab-active-background-color; background-color: getVar("navbar-tab-active-background-color");
border-bottom-color: $navbar-tab-active-border-bottom-color; border-bottom-color: getVar("navbar-tab-active-border-bottom-color");
border-bottom-style: $navbar-tab-active-border-bottom-style; border-bottom-style: getVar("navbar-tab-active-border-bottom-style");
border-bottom-width: $navbar-tab-active-border-bottom-width; border-bottom-width: getVar("navbar-tab-active-border-bottom-width");
color: $navbar-tab-active-color; color: getVar("navbar-tab-active-color");
padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}); padding-bottom: calc(
0.5rem - #{getVar("navbar-tab-active-border-bottom-width")}
);
} }
} }
} }
@ -302,10 +350,8 @@ a.#{$class-prefix}navbar-item,
&::after { &::after {
@extend %arrow; @extend %arrow;
border-color: getVar("navbar-dropdown-arrow");
border-color: $navbar-dropdown-arrow;
margin-top: -0.375em; margin-top: -0.375em;
@include ltr-position(1.125em); @include ltr-position(1.125em);
} }
} }
@ -322,10 +368,10 @@ a.#{$class-prefix}navbar-item,
} }
.#{$class-prefix}navbar-divider { .#{$class-prefix}navbar-divider {
background-color: $navbar-divider-background-color; background-color: getVar("navbar-divider-background-color");
border: none; border: none;
display: none; display: none;
height: $navbar-divider-height; height: getVar("navbar-divider-height");
margin: 0.5rem 0; margin: 0.5rem 0;
} }
@ -349,7 +395,7 @@ a.#{$class-prefix}navbar-item,
} }
.#{$class-prefix}navbar-menu { .#{$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); box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
padding: 0.5rem 0; padding: 0.5rem 0;
@ -382,7 +428,7 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-menu { .#{$class-prefix}navbar-menu {
@include overflow-touch; @include overflow-touch;
max-height: calc(100vh - #{$navbar-height}); max-height: calc(100vh - #{getVar("navbar-height")});
overflow: auto; overflow: auto;
} }
} }
@ -391,11 +437,11 @@ a.#{$class-prefix}navbar-item,
html, html,
body { body {
&.has-navbar-fixed-top-touch { &.has-navbar-fixed-top-touch {
padding-top: $navbar-height; padding-top: getVar("navbar-height");
} }
&.has-navbar-fixed-bottom-touch { &.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 { .#{$class-prefix}navbar {
min-height: $navbar-height; min-height: getVar("navbar-height");
&.is-spaced { &.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-start,
.#{$class-prefix}navbar-end { .#{$class-prefix}navbar-end {
@ -422,7 +469,7 @@ a.#{$class-prefix}navbar-item,
a.#{$class-prefix}navbar-item, a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link { .#{$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 { a.#{$class-prefix}navbar-item {
&:focus, &:focus,
&:hover { &:hover {
background-color: $navbar-dropdown-item-hover-background-color; background-color: getVar(
color: $navbar-dropdown-item-hover-color; "navbar-dropdown-item-hover-background-color"
);
color: getVar("navbar-dropdown-item-hover-color");
} }
&.is-active { &.is-active {
background-color: $navbar-dropdown-item-active-background-color; background-color: getVar(
color: $navbar-dropdown-item-active-color; "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 { .#{$class-prefix}navbar-dropdown {
border-bottom: $navbar-dropdown-border-top; border-bottom: getVar("navbar-dropdown-border-top");
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0; border-radius: getVar("navbar-dropdown-radius")
getVar("navbar-dropdown-radius") 0 0;
border-top: none; border-top: none;
bottom: 100%; bottom: 100%;
box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1); box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
@ -529,20 +581,18 @@ a.#{$class-prefix}navbar-item,
} }
.#{$class-prefix}navbar-dropdown { .#{$class-prefix}navbar-dropdown {
background-color: $navbar-dropdown-background-color; background-color: getVar("navbar-dropdown-background-color");
border-bottom-left-radius: $navbar-dropdown-radius; border-bottom-left-radius: getVar("navbar-dropdown-radius");
border-bottom-right-radius: $navbar-dropdown-radius; border-bottom-right-radius: getVar("navbar-dropdown-radius");
border-top: $navbar-dropdown-border-top; border-top: getVar("navbar-dropdown-border-top");
box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
display: none; display: none;
font-size: 0.875rem; font-size: 0.875rem;
@include ltr-position(0, false); @include ltr-position(0, false);
min-width: 100%; min-width: 100%;
position: absolute; position: absolute;
top: 100%; top: 100%;
z-index: $navbar-dropdown-z; z-index: getVar("navbar-dropdown-z");
.#{$class-prefix}navbar-item { .#{$class-prefix}navbar-item {
padding: 0.375rem 1rem; padding: 0.375rem 1rem;
@ -554,27 +604,29 @@ a.#{$class-prefix}navbar-item,
&:focus, &:focus,
&:hover { &:hover {
background-color: $navbar-dropdown-item-hover-background-color; background-color: getVar("navbar-dropdown-item-hover-background-color");
color: $navbar-dropdown-item-hover-color; color: getVar("navbar-dropdown-item-hover-color");
} }
&.is-active { &.is-active {
background-color: $navbar-dropdown-item-active-background-color; background-color: getVar(
color: $navbar-dropdown-item-active-color; "navbar-dropdown-item-active-background-color"
);
color: getVar("navbar-dropdown-item-active-color");
} }
} }
.#{$class-prefix}navbar.is-spaced &, .#{$class-prefix}navbar.is-spaced &,
&.is-boxed { &.is-boxed {
border-radius: $navbar-dropdown-boxed-radius; border-radius: getVar("navbar-dropdown-boxed-radius");
border-top: none; border-top: none;
box-shadow: $navbar-dropdown-boxed-shadow; box-shadow: getVar("navbar-dropdown-boxed-shadow");
display: block; display: block;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
top: calc(100% + (#{$navbar-dropdown-offset})); top: calc(100% + (#{getVar("navbar-dropdown-offset")}));
transform: translateY(-5px); transform: translateY(-5px);
transition-duration: $speed; transition-duration: getVar("speed");
transition-property: opacity, transform; transition-property: opacity, transform;
} }
@ -622,19 +674,25 @@ a.#{$class-prefix}navbar-item,
html, html,
body { body {
&.has-navbar-fixed-top-desktop { &.has-navbar-fixed-top-desktop {
padding-top: $navbar-height; padding-top: getVar("navbar-height");
} }
&.has-navbar-fixed-bottom-desktop { &.has-navbar-fixed-bottom-desktop {
padding-bottom: $navbar-height; padding-bottom: getVar("navbar-height");
} }
&.has-spaced-navbar-fixed-top { &.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 { &.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, a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-link { .#{$class-prefix}navbar-link {
&.is-active { &.is-active {
color: $navbar-item-active-color; color: getVar("navbar-item-active-color");
} }
&.is-active:not(:focus):not(:hover) { &.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, &:hover,
&.is-active { &.is-active {
.#{$class-prefix}navbar-link { .#{$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 { .#{$class-prefix}hero {
&.is-fullheight-with-navbar { &.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/controls";
@import "../utilities/mixins"; @import "../utilities/mixins";
$pagination-color: $text-strong !default; $pagination-color: getVar("text-strong") !default;
$pagination-border-color: $border !default; $pagination-border-color: getVar("border") !default;
$pagination-margin: -0.25rem !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-font-size: 1em !default;
$pagination-item-margin: 0.25rem !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-left: 0.75em !default;
$pagination-nav-padding-right: 0.75em !default; $pagination-nav-padding-right: 0.75em !default;
$pagination-hover-color: $link-hover !default; $pagination-hover-color: getVar("link-hover") !default;
$pagination-hover-border-color: $link-hover-border !default; $pagination-hover-border-color: getVar("link-hover-border") !default;
$pagination-focus-color: $link-focus !default; $pagination-focus-color: getVar("link-focus") !default;
$pagination-focus-border-color: $link-focus-border !default; $pagination-focus-border-color: getVar("link-focus-border") !default;
$pagination-active-color: $link-active !default; $pagination-active-color: getVar("link-active") !default;
$pagination-active-border-color: $link-active-border !default; $pagination-active-border-color: getVar("link-active-border") !default;
$pagination-disabled-color: $text-light !default; $pagination-disabled-color: getVar("text-light") !default;
$pagination-disabled-background-color: $border !default; $pagination-disabled-background-color: getVar("border") !default;
$pagination-disabled-border-color: $border !default; $pagination-disabled-border-color: getVar("border") !default;
$pagination-current-color: $link-invert !default; $pagination-current-color: getVar("link-invert") !default;
$pagination-current-background-color: $link !default; $pagination-current-background-color: getVar("link") !default;
$pagination-current-border-color: $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; $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 { .#{$class-prefix}pagination {
@extend %block; @extend %block;
font-size: $size-normal; font-size: getVar("size-normal");
margin: $pagination-margin; margin: getVar("pagination-margin");
// Sizes // Sizes
&.is-small { &.is-small {
font-size: $size-small; font-size: getVar("size-small");
} }
&.is-medium { &.is-medium {
font-size: $size-medium; font-size: getVar("size-medium");
} }
&.is-large { &.is-large {
font-size: $size-large; font-size: getVar("size-large");
} }
&.is-rounded { &.is-rounded {
@ -59,11 +90,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
.#{$class-prefix}pagination-next { .#{$class-prefix}pagination-next {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
border-radius: $radius-rounded; border-radius: getVar("radius-rounded");
} }
.#{$class-prefix}pagination-link { .#{$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-link,
.#{$class-prefix}pagination-ellipsis { .#{$class-prefix}pagination-ellipsis {
@extend %control; @extend %control;
@extend %unselectable; @extend %unselectable;
font-size: $pagination-item-font-size; font-size: getVar("pagination-item-font-size");
justify-content: center; justify-content: center;
margin: $pagination-item-margin; margin: getVar("pagination-item-margin");
padding-left: $pagination-item-padding-left; padding-left: getVar("pagination-item-padding-left");
padding-right: $pagination-item-padding-right; padding-right: getVar("pagination-item-padding-right");
text-align: center; text-align: center;
} }
.#{$class-prefix}pagination-previous, .#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next, .#{$class-prefix}pagination-next,
.#{$class-prefix}pagination-link { .#{$class-prefix}pagination-link {
border-color: $pagination-border-color; border-color: getVar("pagination-border-color");
color: $pagination-color; color: getVar("pagination-color");
min-width: $pagination-min-width; min-width: getVar("pagination-min-width");
&:hover { &:hover {
border-color: $pagination-hover-border-color; border-color: getVar("pagination-hover-border-color");
color: $pagination-hover-color; color: getVar("pagination-hover-color");
} }
&:focus { &:focus {
border-color: $pagination-focus-border-color; border-color: getVar("pagination-focus-border-color");
} }
&:active { &:active {
box-shadow: $pagination-shadow-inset; box-shadow: getVar("pagination-shadow-inset");
} }
&[disabled], &[disabled],
&.is-disabled { &.is-disabled {
background-color: $pagination-disabled-background-color; background-color: getVar("pagination-disabled-background-color");
border-color: $pagination-disabled-border-color; border-color: getVar("pagination-disabled-border-color");
box-shadow: none; box-shadow: none;
color: $pagination-disabled-color; color: getVar("pagination-disabled-color");
opacity: 0.5; opacity: 0.5;
} }
} }
.#{$class-prefix}pagination-previous, .#{$class-prefix}pagination-previous,
.#{$class-prefix}pagination-next { .#{$class-prefix}pagination-next {
padding-left: $pagination-nav-padding-left; padding-left: getVar("pagination-nav-padding-left");
padding-right: $pagination-nav-padding-right; padding-right: getVar("pagination-nav-padding-right");
white-space: nowrap; white-space: nowrap;
} }
.#{$class-prefix}pagination-link { .#{$class-prefix}pagination-link {
&.is-current { &.is-current {
background-color: $pagination-current-background-color; background-color: getVar("pagination-current-background-color");
border-color: $pagination-current-border-color; border-color: getVar("pagination-current-border-color");
color: $pagination-current-color; color: getVar("pagination-current-color");
} }
} }
.#{$class-prefix}pagination-ellipsis { .#{$class-prefix}pagination-ellipsis {
color: $pagination-ellipsis-color; color: getVar("pagination-ellipsis-color");
pointer-events: none; pointer-events: none;
} }

118
sass/components/panel.scss
View File

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

173
sass/components/tabs.scss
View File

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