Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add elements CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-06 10:46:03 +00:00
parent 8508af010a
commit 89a8b8f208
15 changed files with 868 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

570
docs/css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

41
docs/cyp/elements/progress.html
View File

@@ -8,8 +8,41 @@ title: Elements/Progress
</div> </div>
<div class="block"> <div class="block">
<progress id="progress-small" class="progress is-small" value="15" max="100">15%</progress> <progress id="progress-small" class="progress is-small" value="15" max="100">
<progress id="progress-normal" class="progress" value="15" max="100">30%</progress> 15%
<progress id="progress-medium" class="progress is-medium" value="15" max="100">45%</progress> </progress>
<progress id="progress-large" class="progress is-large" value="15" max="100">60%</progress> <progress id="progress-normal" class="progress" value="15" max="100">
30%
</progress>
<progress
id="progress-medium"
class="progress is-medium"
value="15"
max="100"
>
45%
</progress>
<progress id="progress-large" class="progress is-large" value="15" max="100">
60%
</progress>
</div>
<div class="block">
{% for color in site.data.colors.justColors %}
<progress
id="progress-{{ color }}"
class="progress is-{{ color }}"
value="15"
max="100"
>
15%
</progress>
<progress
id="progress-{{ color }}-indeterminate"
class="progress is-{{ color }}"
max="100"
>
15%
</progress>
{% endfor %}
</div> </div>

40
sass/elements/box.scss
View File

@@ -1,34 +1,48 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$box-color: $text !default; $box-color: getVar("text") !default;
$box-background-color: $scheme-main !default; $box-background-color: getVar("scheme-main") !default;
$box-radius: $radius-large !default; $box-radius: getVar("radius-large") !default;
$box-shadow: $shadow !default; $box-shadow: getVar("shadow") !default;
$box-padding: 1.25rem !default; $box-padding: 1.25rem !default;
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), $box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
0 0 0 1px $link !default; 0 0 0 1px getVar("link") !default;
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), $box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2),
0 0 0 1px $link !default; 0 0 0 1px getVar("link") !default;
:root {
@include register-vars(
(
box-color: #{$box-color},
box-background-color: #{$box-background-color},
box-radius: #{$box-radius},
box-shadow: #{$box-shadow},
box-padding: #{$box-padding},
box-link-hover-shadow: #{$box-link-hover-shadow},
box-link-active-shadow: #{$box-link-active-shadow},
)
);
}
.#{$class-prefix}box { .#{$class-prefix}box {
@extend %block; @extend %block;
background-color: $box-background-color; background-color: getVar("box-background-color");
border-radius: $box-radius; border-radius: getVar("box-radius");
box-shadow: $box-shadow; box-shadow: getVar("box-shadow");
color: $box-color; color: getVar("box-color");
display: block; display: block;
padding: $box-padding; padding: getVar("box-padding");
} }
a.#{$class-prefix}box { a.#{$class-prefix}box {
&:hover, &:hover,
&:focus { &:focus {
box-shadow: $box-link-hover-shadow; box-shadow: getVar("box-link-hover-shadow");
} }
&:active { &:active {
box-shadow: $box-link-active-shadow; box-shadow: getVar("box-link-active-shadow");
} }
} }

227
sass/elements/button.scss
View File

@@ -1,105 +1,145 @@
@import "../utilities/controls"; @import "../utilities/controls";
@import "../utilities/mixins"; @import "../utilities/mixins";
$button-color: $text-strong !default; $button-color: getVar("text-strong") !default;
$button-background-color: $scheme-main !default; $button-background-color: getVar("scheme-main") !default;
$button-family: false !default; $button-family: false !default;
$button-border-color: $border !default; $button-border-color: getVar("border") !default;
$button-border-width: $control-border-width !default; $button-border-width: $control-border-width !default; // TODO
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default; $button-padding-vertical: calc(
0.5em - #{getVar("button-border-width")}
) !default;
$button-padding-horizontal: 1em !default; $button-padding-horizontal: 1em !default;
$button-hover-color: $link-hover !default; $button-hover-color: getVar("link-hover") !default;
$button-hover-border-color: $link-hover-border !default; $button-hover-border-color: getVar("link-hover-border") !default;
$button-focus-color: $link-focus !default; $button-focus-color: getVar("link-focus") !default;
$button-focus-border-color: $link-focus-border !default; $button-focus-border-color: getVar("link-focus-border") !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default; $button-focus-box-shadow-size: 0 0 0 0.125em !default;
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default; $button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
$button-active-color: $link-active !default; $button-active-color: getVar("link-active") !default;
$button-active-border-color: $link-active-border !default; $button-active-border-color: getVar("link-active-border") !default;
$button-text-color: $text !default; $button-text-color: getVar("text") !default;
$button-text-decoration: underline !default; $button-text-decoration: underline !default;
$button-text-hover-background-color: $background !default; $button-text-hover-background-color: getVar("background") !default;
$button-text-hover-color: $text-strong !default; $button-text-hover-color: getVar("text-strong") !default;
$button-ghost-background: none !default; $button-ghost-background: none !default;
$button-ghost-border-color: transparent !default; $button-ghost-border-color: transparent !default;
$button-ghost-color: $link !default; $button-ghost-color: getVar("link") !default;
$button-ghost-decoration: none !default; $button-ghost-decoration: none !default;
$button-ghost-hover-color: $link !default; $button-ghost-hover-color: getVar("link") !default;
$button-ghost-hover-decoration: underline !default; $button-ghost-hover-decoration: underline !default;
$button-disabled-background-color: $scheme-main !default; $button-disabled-background-color: getVar("scheme-main") !default;
$button-disabled-border-color: $border !default; $button-disabled-border-color: getVar("border") !default;
$button-disabled-shadow: none !default; $button-disabled-shadow: none !default;
$button-disabled-opacity: 0.5 !default; $button-disabled-opacity: 0.5 !default;
$button-static-color: $text-light !default; $button-static-color: getVar("text-light") !default;
$button-static-background-color: $scheme-main-ter !default; $button-static-background-color: getVar("scheme-main-ter") !default;
$button-static-border-color: $border !default; $button-static-border-color: getVar("border") !default;
$button-colors: $colors !default; $button-colors: $colors !default;
$button-responsive-sizes: ( $button-responsive-sizes: (
"mobile": ( "mobile": (
"small": $size-small * 0.75, "small": calc(#{getVar("size-small")} * 0.75),
"normal": $size-small * 0.875, "normal": calc(#{getVar("size-small")} * 0.875),
"medium": $size-small, "medium": getVar("size-small"),
"large": $size-normal, "large": getVar("size-normal"),
), ),
"tablet-only": ( "tablet-only": (
"small": $size-small * 0.875, "small": calc(#{getVar("size-small")} * 0.875),
"normal": $size-small, "normal": getVar("size-small"),
"medium": $size-normal, "medium": getVar("size-normal"),
"large": $size-medium, "large": getVar("size-medium"),
), ),
) !default; ) !default;
// The button sizes use mixins so they can be used at different breakpoints // The button sizes use mixins so they can be used at different breakpoints
@mixin button-small { @mixin button-small {
&:not(.is-rounded) { &:not(.is-rounded) {
border-radius: $radius-small; border-radius: getVar("radius-small");
} }
font-size: $size-small; font-size: getVar("size-small");
} }
@mixin button-normal { @mixin button-normal {
font-size: $size-normal; font-size: getVar("size-normal");
} }
@mixin button-medium { @mixin button-medium {
font-size: $size-medium; font-size: getVar("size-medium");
} }
@mixin button-large { @mixin button-large {
font-size: $size-large; font-size: getVar("size-large");
}
:root {
@include register-vars(
(
button-color: #{$button-color},
button-background-color: #{$button-background-color},
button-family: #{$button-family},
button-border-color: #{$button-border-color},
button-border-width: #{$button-border-width},
button-padding-vertical: #{$button-padding-vertical},
button-padding-horizontal: #{$button-padding-horizontal},
button-hover-color: #{$button-hover-color},
button-hover-border-color: #{$button-hover-border-color},
button-focus-color: #{$button-focus-color},
button-focus-border-color: #{$button-focus-border-color},
button-focus-box-shadow-size: #{$button-focus-box-shadow-size},
button-focus-box-shadow-color: #{$button-focus-box-shadow-color},
button-active-color: #{$button-active-color},
button-active-border-color: #{$button-active-border-color},
button-text-color: #{$button-text-color},
button-text-decoration: #{$button-text-decoration},
button-text-hover-background-color: #{$button-text-hover-background-color},
button-text-hover-color: #{$button-text-hover-color},
button-ghost-background: #{$button-ghost-background},
button-ghost-border-color: #{$button-ghost-border-color},
button-ghost-color: #{$button-ghost-color},
button-ghost-decoration: #{$button-ghost-decoration},
button-ghost-hover-color: #{$button-ghost-hover-color},
button-ghost-hover-decoration: #{$button-ghost-hover-decoration},
button-disabled-background-color: #{$button-disabled-background-color},
button-disabled-border-color: #{$button-disabled-border-color},
button-disabled-shadow: #{$button-disabled-shadow},
button-disabled-opacity: #{$button-disabled-opacity},
button-static-color: #{$button-static-color},
button-static-background-color: #{$button-static-background-color},
button-static-border-color: #{$button-static-border-color},
)
);
} }
.#{$class-prefix}button { .#{$class-prefix}button {
@extend %control; @extend %control;
@extend %unselectable; @extend %unselectable;
background-color: $button-background-color; background-color: getVar("button-background-color");
border-color: $button-border-color; border-color: getVar("button-border-color");
border-width: $button-border-width; border-width: getVar("button-border-width");
color: $button-color; color: getVar("button-color");
cursor: pointer; cursor: pointer;
@if $button-family { @if $button-family {
font-family: $button-family; font-family: getVar("button-family");
} }
justify-content: center; justify-content: center;
padding-bottom: $button-padding-vertical; padding-bottom: getVar("button-padding-vertical");
padding-left: $button-padding-horizontal; padding-left: getVar("button-padding-horizontal");
padding-right: $button-padding-horizontal; padding-right: getVar("button-padding-horizontal");
padding-top: $button-padding-vertical; padding-top: getVar("button-padding-vertical");
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
@@ -119,26 +159,45 @@ $button-responsive-sizes: (
&:first-child:not(:last-child) { &:first-child:not(:last-child) {
@include ltr-property( @include ltr-property(
"margin", "margin",
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), calc(
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
"button-border-width"
)}
),
false false
); );
@include ltr-property("margin", $button-padding-horizontal * 0.25); @include ltr-property(
"margin",
calc(#{getVar("button-padding-horizontal")} * 0.25)
);
} }
&:last-child:not(:first-child) { &:last-child:not(:first-child) {
@include ltr-property("margin", $button-padding-horizontal * 0.25, false);
@include ltr-property( @include ltr-property(
"margin", "margin",
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) calc(#{getVar("button-padding-horizontal")} * 0.25),
false
);
@include ltr-property(
"margin",
calc(
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
"button-border-width"
)}
)
); );
} }
&:first-child:last-child { &:first-child:last-child {
margin-left: calc( margin-left: calc(
#{-0.5 * $button-padding-horizontal} - #{$button-border-width} calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
"button-border-width"
)}
); );
margin-right: calc( margin-right: calc(
#{-0.5 * $button-padding-horizontal} - #{$button-border-width} calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
"button-border-width"
)}
); );
} }
} }
@@ -146,45 +205,46 @@ $button-responsive-sizes: (
// States // States
&:hover, &:hover,
&.is-hovered { &.is-hovered {
border-color: $button-hover-border-color; border-color: getVar("button-hover-border-color");
color: $button-hover-color; color: getVar("button-hover-color");
} }
&:focus, &:focus,
&.is-focused { &.is-focused {
border-color: $button-focus-border-color; border-color: getVar("button-focus-border-color");
color: $button-focus-color; color: getVar("button-focus-color");
&:not(:active) { &:not(:active) {
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; box-shadow: getVar("button-focus-box-shadow-size")
getVar("button-focus-box-shadow-color");
} }
} }
&:active, &:active,
&.is-active { &.is-active {
border-color: $button-active-border-color; border-color: getVar("button-active-border-color");
color: $button-active-color; color: getVar("button-active-color");
} }
// Colors // Colors
&.is-text { &.is-text {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
color: $button-text-color; color: getVar("button-text-color");
text-decoration: $button-text-decoration; text-decoration: getVar("button-text-decoration");
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus,
&.is-focused { &.is-focused {
background-color: $button-text-hover-background-color; background-color: getVar("button-text-hover-background-color");
color: $button-text-hover-color; color: getVar("button-text-hover-color");
} }
&:active, &:active,
&.is-active { &.is-active {
background-color: bulmaDarken($button-text-hover-background-color, 5%); // background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
color: $button-text-hover-color; color: getVar("button-text-hover-color");
} }
&[disabled], &[disabled],
@@ -196,15 +256,15 @@ $button-responsive-sizes: (
} }
&.is-ghost { &.is-ghost {
background: $button-ghost-background; background: getVar("button-ghost-background");
border-color: $button-ghost-border-color; border-color: getVar("button-ghost-border-color");
color: $button-ghost-color; color: getVar("button-ghost-color");
text-decoration: $button-ghost-decoration; text-decoration: getVar("button-ghost-decoration");
&:hover, &:hover,
&.is-hovered { &.is-hovered {
color: $button-ghost-hover-color; color: getVar("button-ghost-hover-color");
text-decoration: $button-ghost-hover-decoration; text-decoration: getVar("button-ghost-hover-decoration");
} }
} }
@@ -230,7 +290,8 @@ $button-responsive-sizes: (
color: $color-invert; color: $color-invert;
&:not(:active) { &:not(:active) {
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25); box-shadow: getVar("button-focus-box-shadow-size")
bulmaRgba($color, 0.25);
} }
} }
@@ -396,10 +457,10 @@ $button-responsive-sizes: (
// Modifiers // Modifiers
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: $button-disabled-background-color; background-color: getVar("button-disabled-background-color");
border-color: $button-disabled-border-color; border-color: getVar("button-disabled-border-color");
box-shadow: $button-disabled-shadow; box-shadow: getVar("button-disabled-shadow");
opacity: $button-disabled-opacity; opacity: getVar("button-disabled-opacity");
} }
&.is-fullwidth { &.is-fullwidth {
@@ -413,25 +474,23 @@ $button-responsive-sizes: (
&::after { &::after {
@extend %loader; @extend %loader;
@include center(1em); @include center(1em);
position: absolute !important; position: absolute !important;
} }
} }
&.is-static { &.is-static {
background-color: $button-static-background-color; background-color: getVar("button-static-background-color");
border-color: $button-static-border-color; border-color: getVar("button-static-border-color");
color: $button-static-color; color: getVar("button-static-color");
box-shadow: none; box-shadow: none;
pointer-events: none; pointer-events: none;
} }
&.is-rounded { &.is-rounded {
border-radius: $radius-rounded; border-radius: getVar("radius-rounded");
padding-left: calc(#{$button-padding-horizontal} + 0.25em); padding-left: calc(#{getVar("button-padding-horizontal")} + 0.25em);
padding-right: calc(#{$button-padding-horizontal} + 0.25em); padding-right: calc(#{getVar("button-padding-horizontal")} + 0.25em);
} }
} }
@@ -546,12 +605,12 @@ $button-responsive-sizes: (
@each $size, $value in $bp-sizes { @each $size, $value in $bp-sizes {
@if $size != "normal" { @if $size != "normal" {
.#{$class-prefix}button.is-responsive.is-#{$size} { .#{$class-prefix}button.is-responsive.is-#{$size} {
font-size: $value; font-size: getVar("value");
} }
} @else { } @else {
.#{$class-prefix}button.is-responsive, .#{$class-prefix}button.is-responsive,
.#{$class-prefix}button.is-responsive.is-normal { .#{$class-prefix}button.is-responsive.is-normal {
font-size: $value; font-size: getVar("value");
} }
} }
} }

36
sass/elements/container.scss
View File

@@ -1,8 +1,16 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$container-offset: 2 * $gap !default; $container-offset: calc(2 * #{getVar("gap")}) !default;
$container-max-width: $fullhd !default; $container-max-width: $fullhd !default;
:root {
@include register-vars(
(
container-offset: #{$container-offset},
)
);
}
.#{$class-prefix}container { .#{$class-prefix}container {
flex-grow: 1; flex-grow: 1;
margin: 0 auto; margin: 0 auto;
@@ -11,36 +19,48 @@ $container-max-width: $fullhd !default;
&.is-fluid { &.is-fluid {
max-width: none !important; max-width: none !important;
padding-left: $gap; padding-left: getVar("gap");
padding-right: $gap; padding-right: getVar("gap");
width: 100%; width: 100%;
} }
@include desktop { @include desktop {
max-width: $desktop - $container-offset; max-width: calc(#{$desktop} - #{getVar("container-offset")});
} }
@include until-widescreen { @include until-widescreen {
&.is-widescreen:not(.is-max-desktop) { &.is-widescreen:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset; max-width: calc(
#{min($widescreen, $container-max-width)} - #{getVar(
"container-offset"
)}
);
} }
} }
@include until-fullhd { @include until-fullhd {
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) { &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset; max-width: calc(
#{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
);
} }
} }
@include widescreen { @include widescreen {
&:not(.is-max-desktop) { &:not(.is-max-desktop) {
max-width: min($widescreen, $container-max-width) - $container-offset; max-width: calc(
#{min($widescreen, $container-max-width)} - #{getVar(
"container-offset"
)}
);
} }
} }
@include fullhd { @include fullhd {
&:not(.is-max-desktop):not(.is-max-widescreen) { &:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: min($fullhd, $container-max-width) - $container-offset; max-width: calc(
#{min($fullhd, $container-max-width)} - #{getVar("container-offset")}
);
} }
} }
} }

95
sass/elements/content.scss
View File

@@ -1,26 +1,50 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$content-heading-color: $text-strong !default; $content-heading-color: getVar("text-strong") !default;
$content-heading-weight: $weight-semibold !default; $content-heading-weight: getVar("weight-semibold") !default;
$content-heading-line-height: 1.125 !default; $content-heading-line-height: 1.125 !default;
$content-block-margin-bottom: 1em !default; $content-block-margin-bottom: 1em !default;
$content-blockquote-background-color: $background !default; $content-blockquote-background-color: getVar("background") !default;
$content-blockquote-border-left: 5px solid $border !default; $content-blockquote-border-left: 5px solid getVar("border") !default;
$content-blockquote-padding: 1.25em 1.5em !default; $content-blockquote-padding: 1.25em 1.5em !default;
$content-pre-padding: 1.25em 1.5em !default; $content-pre-padding: 1.25em 1.5em !default;
$content-table-cell-border: 1px solid $border !default; $content-table-cell-border: 1px solid getVar("border") !default;
$content-table-cell-border-width: 0 0 1px !default; $content-table-cell-border-width: 0 0 1px !default;
$content-table-cell-padding: 0.5em 0.75em !default; $content-table-cell-padding: 0.5em 0.75em !default;
$content-table-cell-heading-color: $text-strong !default; $content-table-cell-heading-color: getVar("text-strong") !default;
$content-table-head-cell-border-width: 0 0 2px !default; $content-table-head-cell-border-width: 0 0 2px !default;
$content-table-head-cell-color: $text-strong !default; $content-table-head-cell-color: getVar("text-strong") !default;
$content-table-body-last-row-cell-border-bottom-width: 0 !default; $content-table-body-last-row-cell-border-bottom-width: 0 !default;
$content-table-foot-cell-border-width: 2px 0 0 !default; $content-table-foot-cell-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: $text-strong !default; $content-table-foot-cell-color: getVar("text-strong") !default;
:root {
@include register-vars(
(
content-heading-color: #{$content-heading-color},
content-heading-weight: #{$content-heading-weight},
content-heading-line-height: #{$content-heading-line-height},
content-block-margin-bottom: #{$content-block-margin-bottom},
content-blockquote-background-color: #{$content-blockquote-background-color},
content-blockquote-border-left: #{$content-blockquote-border-left},
content-blockquote-padding: #{$content-blockquote-padding},
content-pre-padding: #{$content-pre-padding},
content-table-cell-border: #{$content-table-cell-border},
content-table-cell-border-width: #{$content-table-cell-border-width},
content-table-cell-padding: #{$content-table-cell-padding},
content-table-cell-heading-color: #{$content-table-cell-heading-color},
content-table-head-cell-border-width: #{$content-table-head-cell-border-width},
content-table-head-cell-color: #{$content-table-head-cell-color},
content-table-body-last-row-cell-border-bottom-width: #{$content-table-body-last-row-cell-border-bottom-width},
content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width},
content-table-foot-cell-color: #{$content-table-foot-cell-color},
)
);
}
.#{$class-prefix}content { .#{$class-prefix}content {
@extend %block; @extend %block;
@@ -39,7 +63,7 @@ $content-table-foot-cell-color: $text-strong !default;
pre, pre,
table { table {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: $content-block-margin-bottom; margin-bottom: getVar("content-block-margin-bottom");
} }
} }
@@ -49,9 +73,9 @@ $content-table-foot-cell-color: $text-strong !default;
h4, h4,
h5, h5,
h6 { h6 {
color: $content-heading-color; color: getVar("content-heading-color");
font-weight: $content-heading-weight; font-weight: getVar("content-heading-weight");
line-height: $content-heading-line-height; line-height: getVar("content-heading-line-height");
} }
h1 { h1 {
@@ -97,18 +121,18 @@ $content-table-foot-cell-color: $text-strong !default;
} }
blockquote { blockquote {
background-color: $content-blockquote-background-color; background-color: getVar("content-blockquote-background-color");
@include ltr-property(
@include ltr-property("border", $content-blockquote-border-left, false); "border",
getVar("content-blockquote-border-left"),
padding: $content-blockquote-padding; false
);
padding: getVar("content-blockquote-padding");
} }
ol { ol {
list-style-position: outside; list-style-position: outside;
@include ltr-property("margin", 2em, false); @include ltr-property("margin", 2em, false);
margin-top: 1em; margin-top: 1em;
&:not([type]) { &:not([type]) {
@@ -134,9 +158,7 @@ $content-table-foot-cell-color: $text-strong !default;
ul { ul {
list-style: disc outside; list-style: disc outside;
@include ltr-property("margin", 2em, false); @include ltr-property("margin", 2em, false);
margin-top: 1em; margin-top: 1em;
ul { ul {
@@ -177,9 +199,8 @@ $content-table-foot-cell-color: $text-strong !default;
pre { pre {
@include overflow-touch; @include overflow-touch;
overflow-x: auto; overflow-x: auto;
padding: $content-pre-padding; padding: getVar("content-pre-padding");
white-space: pre; white-space: pre;
word-wrap: normal; word-wrap: normal;
} }
@@ -194,14 +215,14 @@ $content-table-foot-cell-color: $text-strong !default;
td, td,
th { th {
border: $content-table-cell-border; border: getVar("content-table-cell-border");
border-width: $content-table-cell-border-width; border-width: getVar("content-table-cell-border-width");
padding: $content-table-cell-padding; padding: getVar("content-table-cell-padding");
vertical-align: top; vertical-align: top;
} }
th { th {
color: $content-table-cell-heading-color; color: getVar("content-table-cell-heading-color");
&:not([align]) { &:not([align]) {
text-align: inherit; text-align: inherit;
@@ -211,16 +232,16 @@ $content-table-foot-cell-color: $text-strong !default;
thead { thead {
td, td,
th { th {
border-width: $content-table-head-cell-border-width; border-width: getVar("content-table-head-cell-border-width");
color: $content-table-head-cell-color; color: getVar("content-table-head-cell-color");
} }
} }
tfoot { tfoot {
td, td,
th { th {
border-width: $content-table-foot-cell-border-width; border-width: getVar("content-table-foot-cell-border-width");
color: $content-table-foot-cell-color; color: getVar("content-table-foot-cell-color");
} }
} }
@@ -229,7 +250,9 @@ $content-table-foot-cell-color: $text-strong !default;
&:last-child { &:last-child {
td, td,
th { th {
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width; border-bottom-width: getVar(
"content-table-body-last-row-cell-border-bottom-width"
);
} }
} }
} }
@@ -244,18 +267,18 @@ $content-table-foot-cell-color: $text-strong !default;
// Sizes // Sizes
&.is-small { &.is-small {
font-size: $size-small; font-size: getVar("size-small");
} }
&.is-normal { &.is-normal {
font-size: $size-normal; font-size: getVar("size-normal");
} }
&.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");
} }
} }

38
sass/elements/icon.scss
View File

@@ -4,27 +4,39 @@ $icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default; $icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default; $icon-text-spacing: 0.25em !default;
:root {
@include register-vars(
(
icon-dimensions: #{$icon-dimensions},
icon-dimensions-small: #{$icon-dimensions-small},
icon-dimensions-medium: #{$icon-dimensions-medium},
icon-dimensions-large: #{$icon-dimensions-large},
icon-text-spacing: #{$icon-text-spacing},
)
);
}
.#{$class-prefix}icon { .#{$class-prefix}icon {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
height: $icon-dimensions; height: getVar("icon-dimensions");
width: $icon-dimensions; width: getVar("icon-dimensions");
// Sizes // Sizes
&.is-small { &.is-small {
height: $icon-dimensions-small; height: getVar("icon-dimensions-small");
width: $icon-dimensions-small; width: getVar("icon-dimensions-small");
} }
&.is-medium { &.is-medium {
height: $icon-dimensions-medium; height: getVar("icon-dimensions-medium");
width: $icon-dimensions-medium; width: getVar("icon-dimensions-medium");
} }
&.is-large { &.is-large {
height: $icon-dimensions-large; height: getVar("icon-dimensions-large");
width: $icon-dimensions-large; width: getVar("icon-dimensions-large");
} }
} }
@@ -33,7 +45,7 @@ $icon-text-spacing: 0.25em !default;
color: inherit; color: inherit;
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
line-height: $icon-dimensions; line-height: getVar("icon-dimensions");
vertical-align: top; vertical-align: top;
.#{$class-prefix}icon { .#{$class-prefix}icon {
@@ -42,21 +54,21 @@ $icon-text-spacing: 0.25em !default;
&:not(:last-child) { &:not(:last-child) {
@include ltr { @include ltr {
margin-right: $icon-text-spacing; margin-right: getVar("icon-text-spacing");
} }
@include rtl { @include rtl {
margin-left: $icon-text-spacing; margin-left: getVar("icon-text-spacing");
} }
} }
&:not(:first-child) { &:not(:first-child) {
@include ltr { @include ltr {
margin-left: $icon-text-spacing; margin-left: getVar("icon-text-spacing");
} }
@include rtl { @include rtl {
margin-right: $icon-text-spacing; margin-right: getVar("icon-text-spacing");
} }
} }
} }

2
sass/elements/image.scss
View File

@@ -12,7 +12,7 @@ $dimensions: 16 24 32 48 64 96 128 !default;
width: 100%; width: 100%;
&.is-rounded { &.is-rounded {
border-radius: $radius-rounded; border-radius: getVar("radius-rounded");
} }
} }

30
sass/elements/notification.scss
View File

@@ -1,27 +1,40 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$notification-background-color: $background !default; $notification-background-color: getVar("background") !default;
$notification-code-background-color: $scheme-main !default; $notification-code-background-color: getVar("scheme-main") !default;
$notification-radius: $radius !default; $notification-radius: getVar("radius") !default;
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default; $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default; $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default;
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default; $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
$notification-colors: $colors !default; $notification-colors: $colors !default;
:root {
@include register-vars(
(
notification-background-color: #{$notification-background-color},
notification-code-background-color: #{$notification-code-background-color},
notification-radius: #{$notification-radius},
notification-padding: #{$notification-padding},
notification-padding-ltr: #{$notification-padding-ltr},
notification-padding-rtl: #{$notification-padding-rtl},
)
);
}
.#{$class-prefix}notification { .#{$class-prefix}notification {
@extend %block; @extend %block;
background-color: $notification-background-color; background-color: getVar("notification-background-color");
border-radius: $notification-radius; border-radius: getVar("notification-radius");
position: relative; position: relative;
@include ltr { @include ltr {
padding: $notification-padding-ltr; padding: getVar("notification-padding-ltr");
} }
@include rtl { @include rtl {
padding: $notification-padding-rtl; padding: getVar("notification-padding-rtl");
} }
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) { a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
@@ -35,7 +48,7 @@ $notification-colors: $colors !default;
code, code,
pre { pre {
background: $notification-code-background-color; background: getVar("notification-code-background-color");
} }
pre code { pre code {
@@ -44,7 +57,6 @@ $notification-colors: $colors !default;
& > .#{$class-prefix}delete { & > .#{$class-prefix}delete {
@include ltr-position(0.5rem); @include ltr-position(0.5rem);
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
} }

6
sass/elements/other.scss
View File

@@ -22,10 +22,10 @@
.#{$class-prefix}number { .#{$class-prefix}number {
align-items: center; align-items: center;
background-color: $background; background-color: getVar("background");
border-radius: $radius-rounded; border-radius: getVar("radius-rounded");
display: inline-flex; display: inline-flex;
font-size: $size-medium; font-size: getVar("size-medium");
height: 2em; height: 2em;
justify-content: center; justify-content: center;
margin-right: 1.5rem; margin-right: 1.5rem;

45
sass/elements/progress.scss
View File

@@ -1,40 +1,51 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$progress-bar-background-color: $border-light !default; $progress-bar-background-color: getVar("border-light") !default;
$progress-value-background-color: $text !default; $progress-value-background-color: getVar("text") !default;
$progress-border-radius: $radius-rounded !default; $progress-border-radius: getVar("radius-rounded") !default;
$progress-indeterminate-duration: 1.5s !default; $progress-indeterminate-duration: 1.5s !default;
$progress-colors: $colors !default; $progress-colors: $colors !default;
:root {
@include register-vars(
(
progress-bar-background-color: #{$progress-bar-background-color},
progress-value-background-color: #{$progress-value-background-color},
progress-border-radius: #{$progress-border-radius},
progress-indeterminate-duration: #{$progress-indeterminate-duration},
)
);
}
.#{$class-prefix}progress { .#{$class-prefix}progress {
@extend %block; @extend %block;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
border: none; border: none;
border-radius: $progress-border-radius; border-radius: getVar("progress-border-radius");
display: block; display: block;
height: $size-normal; height: getVar("size-normal");
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
width: 100%; width: 100%;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: $progress-bar-background-color; background-color: getVar("progress-bar-background-color");
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $progress-value-background-color; background-color: getVar("progress-value-background-color");
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: $progress-value-background-color; background-color: getVar("progress-value-background-color");
} }
&::-ms-fill { &::-ms-fill {
background-color: $progress-value-background-color; background-color: getVar("progress-value-background-color");
border: none; border: none;
} }
@@ -59,22 +70,22 @@ $progress-colors: $colors !default;
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
$color 30%, $color 30%,
$progress-bar-background-color 30% #{getVar("progress-bar-background-color")} 30%
); );
} }
} }
} }
&:indeterminate { &:indeterminate {
animation-duration: $progress-indeterminate-duration; animation-duration: getVar("progress-indeterminate-duration");
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-name: moveIndeterminate; animation-name: moveIndeterminate;
animation-timing-function: linear; animation-timing-function: linear;
background-color: $progress-bar-background-color; background-color: getVar("progress-bar-background-color");
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
$text 30%, #{getVar("text")} 30%,
$progress-bar-background-color 30% #{getVar("progress-bar-background-color")} 30%
); );
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -95,15 +106,15 @@ $progress-colors: $colors !default;
// Sizes // Sizes
&.is-small { &.is-small {
height: $size-small; height: getVar("size-small");
} }
&.is-medium { &.is-medium {
height: $size-medium; height: getVar("size-medium");
} }
&.is-large { &.is-large {
height: $size-large; height: getVar("size-large");
} }
} }

100
sass/elements/table.scss
View File

@@ -1,44 +1,72 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$table-color: $text-strong !default; $table-color: getVar("text-strong") !default;
$table-background-color: $scheme-main !default; $table-background-color: getVar("scheme-main") !default;
$table-cell-border: 1px solid $border !default; $table-cell-border: 1px solid getVar("border") !default;
$table-cell-border-width: 0 0 1px !default; $table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default; $table-cell-padding: 0.5em 0.75em !default;
$table-cell-heading-color: $text-strong !default; $table-cell-heading-color: getVar("text-strong") !default;
$table-cell-text-align: left !default; $table-cell-text-align: left !default;
$table-head-cell-border-width: 0 0 2px !default; $table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: $text-strong !default; $table-head-cell-color: getVar("text-strong") !default;
$table-foot-cell-border-width: 2px 0 0 !default; $table-foot-cell-border-width: 2px 0 0 !default;
$table-foot-cell-color: $text-strong !default; $table-foot-cell-color: getVar("text-strong") !default;
$table-head-background-color: transparent !default; $table-head-background-color: transparent !default;
$table-body-background-color: transparent !default; $table-body-background-color: transparent !default;
$table-foot-background-color: transparent !default; $table-foot-background-color: transparent !default;
$table-row-hover-background-color: $scheme-main-bis !default; $table-row-hover-background-color: getVar("scheme-main-bis") !default;
$table-row-active-background-color: $primary !default; $table-row-active-background-color: getVar("primary") !default;
$table-row-active-color: $primary-invert !default; $table-row-active-color: getVar("primary-invert") !default;
$table-striped-row-even-background-color: $scheme-main-bis !default; $table-striped-row-even-background-color: getVar("scheme-main-bis") !default;
$table-striped-row-even-hover-background-color: $scheme-main-ter !default; $table-striped-row-even-hover-background-color: getVar(
"scheme-main-ter"
) !default;
$table-colors: $colors !default; $table-colors: $colors !default;
:root {
@include register-vars(
(
table-color: #{$table-color},
table-background-color: #{$table-background-color},
table-cell-border: #{$table-cell-border},
table-cell-border-width: #{$table-cell-border-width},
table-cell-padding: #{$table-cell-padding},
table-cell-heading-color: #{$table-cell-heading-color},
table-cell-text-align: #{$table-cell-text-align},
table-head-cell-border-width: #{$table-head-cell-border-width},
table-head-cell-color: #{$table-head-cell-color},
table-foot-cell-border-width: #{$table-foot-cell-border-width},
table-foot-cell-color: #{$table-foot-cell-color},
table-head-background-color: #{$table-head-background-color},
table-body-background-color: #{$table-body-background-color},
table-foot-background-color: #{$table-foot-background-color},
table-row-hover-background-color: #{$table-row-hover-background-color},
table-row-active-background-color: #{$table-row-active-background-color},
table-row-active-color: #{$table-row-active-color},
table-striped-row-even-background-color: #{$table-striped-row-even-background-color},
table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color},
)
);
}
.#{$class-prefix}table { .#{$class-prefix}table {
@extend %block; @extend %block;
background-color: $table-background-color; background-color: getVar("table-background-color");
color: $table-color; color: getVar("table-color");
td, td,
th { th {
border: $table-cell-border; border: getVar("table-cell-border");
border-width: $table-cell-border-width; border-width: getVar("table-cell-border-width");
padding: $table-cell-padding; padding: getVar("table-cell-padding");
vertical-align: top; vertical-align: top;
// Colors // Colors
@@ -60,8 +88,8 @@ $table-colors: $colors !default;
} }
&.is-selected { &.is-selected {
background-color: $table-row-active-background-color; background-color: getVar("table-row-active-background-color");
color: $table-row-active-color; color: getVar("table-row-active-color");
a, a,
strong { strong {
@@ -75,17 +103,17 @@ $table-colors: $colors !default;
} }
th { th {
color: $table-cell-heading-color; color: getVar("table-cell-heading-color");
&:not([align]) { &:not([align]) {
text-align: $table-cell-text-align; text-align: getVar("table-cell-text-align");
} }
} }
tr { tr {
&.is-selected { &.is-selected {
background-color: $table-row-active-background-color; background-color: getVar("table-row-active-background-color");
color: $table-row-active-color; color: getVar("table-row-active-color");
a, a,
strong { strong {
@@ -94,34 +122,34 @@ $table-colors: $colors !default;
td, td,
th { th {
border-color: $table-row-active-color; border-color: getVar("table-row-active-color");
color: currentColor; color: currentColor;
} }
} }
} }
thead { thead {
background-color: $table-head-background-color; background-color: getVar("table-head-background-color");
td, td,
th { th {
border-width: $table-head-cell-border-width; border-width: getVar("table-head-cell-border-width");
color: $table-head-cell-color; color: getVar("table-head-cell-color");
} }
} }
tfoot { tfoot {
background-color: $table-foot-background-color; background-color: getVar("table-foot-background-color");
td, td,
th { th {
border-width: $table-foot-cell-border-width; border-width: getVar("table-foot-cell-border-width");
color: $table-foot-cell-color; color: getVar("table-foot-cell-color");
} }
} }
tbody { tbody {
background-color: $table-body-background-color; background-color: getVar("table-body-background-color");
tr { tr {
&:last-child { &:last-child {
@@ -158,7 +186,7 @@ $table-colors: $colors !default;
tbody { tbody {
tr:not(.is-selected) { tr:not(.is-selected) {
&:hover { &:hover {
background-color: $table-row-hover-background-color; background-color: getVar("table-row-hover-background-color");
} }
} }
} }
@@ -167,10 +195,12 @@ $table-colors: $colors !default;
tbody { tbody {
tr:not(.is-selected) { tr:not(.is-selected) {
&:hover { &:hover {
background-color: $table-row-hover-background-color; background-color: getVar("table-row-hover-background-color");
&:nth-child(even) { &:nth-child(even) {
background-color: $table-striped-row-even-hover-background-color; background-color: getVar(
"table-striped-row-even-hover-background-color"
);
} }
} }
} }
@@ -189,7 +219,7 @@ $table-colors: $colors !default;
tbody { tbody {
tr:not(.is-selected) { tr:not(.is-selected) {
&:nth-child(even) { &:nth-child(even) {
background-color: $table-striped-row-even-background-color; background-color: getVar("table-striped-row-even-background-color");
} }
} }
} }
@@ -198,9 +228,7 @@ $table-colors: $colors !default;
.#{$class-prefix}table-container { .#{$class-prefix}table-container {
@extend %block; @extend %block;
@include overflow-touch; @include overflow-touch;
overflow: auto; overflow: auto;
overflow-y: hidden; overflow-y: hidden;
max-width: 100%; max-width: 100%;

44
sass/elements/tag.scss
View File

@@ -1,12 +1,23 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$tag-background-color: $background !default; $tag-background-color: getVar("background") !default;
$tag-color: $text !default; $tag-color: getVar("text") !default;
$tag-radius: $radius !default; $tag-radius: getVar("radius") !default;
$tag-delete-margin: 1px !default; $tag-delete-margin: 1px !default;
$tag-colors: $colors !default; $tag-colors: $colors !default;
:root {
@include register-vars(
(
tag-background-color: #{$tag-background-color},
tag-color: #{$tag-color},
tag-radius: #{$tag-radius},
tag-delete-margin: #{$tag-delete-margin},
)
);
}
.#{$class-prefix}tags { .#{$class-prefix}tags {
align-items: center; align-items: center;
display: flex; display: flex;
@@ -32,13 +43,13 @@ $tag-colors: $colors !default;
// Sizes // Sizes
&.are-medium { &.are-medium {
.#{$class-prefix}tag:not(.is-normal):not(.is-large) { .#{$class-prefix}tag:not(.is-normal):not(.is-large) {
font-size: $size-normal; font-size: getVar("size-normal");
} }
} }
&.are-large { &.are-large {
.#{$class-prefix}tag:not(.is-normal):not(.is-medium) { .#{$class-prefix}tag:not(.is-normal):not(.is-medium) {
font-size: $size-medium; font-size: getVar("size-medium");
} }
} }
@@ -99,11 +110,11 @@ $tag-colors: $colors !default;
.#{$class-prefix}tag:not(body) { .#{$class-prefix}tag:not(body) {
align-items: center; align-items: center;
background-color: $tag-background-color; background-color: getVar("tag-background-color");
border-radius: $tag-radius; border-radius: getVar("tag-radius");
color: $tag-color; color: getVar("tag-color");
display: inline-flex; display: inline-flex;
font-size: $size-small; font-size: getVar("size-small");
height: 2em; height: 2em;
justify-content: center; justify-content: center;
line-height: 1.5; line-height: 1.5;
@@ -140,15 +151,15 @@ $tag-colors: $colors !default;
// Sizes // Sizes
&.is-normal { &.is-normal {
font-size: $size-small; font-size: getVar("size-small");
} }
&.is-medium { &.is-medium {
font-size: $size-normal; font-size: getVar("size-normal");
} }
&.is-large { &.is-large {
font-size: $size-medium; font-size: getVar("size-medium");
} }
.#{$class-prefix}icon { .#{$class-prefix}icon {
@@ -170,8 +181,7 @@ $tag-colors: $colors !default;
// Modifiers // Modifiers
&.is-delete { &.is-delete {
@include ltr-property("margin", $tag-delete-margin, false); @include ltr-property("margin", getVar("tag-delete-margin"), false);
padding: 0; padding: 0;
position: relative; position: relative;
width: 2em; width: 2em;
@@ -200,16 +210,16 @@ $tag-colors: $colors !default;
&:hover, &:hover,
&:focus { &:focus {
background-color: darken($tag-background-color, 5%); // background-color: darken($tag-background-color, 5%); // TODO
} }
&:active { &:active {
background-color: darken($tag-background-color, 10%); // background-color: darken($tag-background-color, 10%); // TODO
} }
} }
&.is-rounded { &.is-rounded {
border-radius: $radius-rounded; border-radius: getVar("radius-rounded");
} }
} }

80
sass/elements/title.scss
View File

@@ -1,24 +1,48 @@
@import "../utilities/mixins"; @import "../utilities/mixins";
$title-color: $text-strong !default; $title-color: getVar("text-strong") !default;
$title-family: false !default; $title-family: false !default;
$title-size: $size-3 !default; $title-size: getVar("size-3") !default;
$title-weight: $weight-semibold !default; $title-weight: getVar("weight-semibold") !default;
$title-line-height: 1.125 !default; $title-line-height: 1.125 !default;
$title-strong-color: inherit !default; $title-strong-color: inherit !default;
$title-strong-weight: inherit !default; $title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default; $title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default; $title-sup-size: 0.75em !default;
$subtitle-color: $text !default; $subtitle-color: getVar("text") !default;
$subtitle-family: false !default; $subtitle-family: false !default;
$subtitle-size: $size-5 !default; $subtitle-size: getVar("size-5") !default;
$subtitle-weight: $weight-normal !default; $subtitle-weight: getVar("weight-normal") !default;
$subtitle-line-height: 1.25 !default; $subtitle-line-height: 1.25 !default;
$subtitle-strong-color: $text-strong !default; $subtitle-strong-color: getVar("text-strong") !default;
$subtitle-strong-weight: $weight-semibold !default; $subtitle-strong-weight: getVar("weight-semibold") !default;
$subtitle-negative-margin: -1.25rem !default; $subtitle-negative-margin: -1.25rem !default;
:root {
@include register-vars(
(
title-color: #{$title-color},
title-family: #{$title-family},
title-size: #{$title-size},
title-weight: #{$title-weight},
title-line-height: #{$title-line-height},
title-strong-color: #{$title-strong-color},
title-strong-weight: #{$title-strong-weight},
title-sub-size: #{$title-sub-size},
title-sup-size: #{$title-sup-size},
subtitle-color: #{$subtitle-color},
subtitle-family: #{$subtitle-family},
subtitle-size: #{$subtitle-size},
subtitle-weight: #{$subtitle-weight},
subtitle-line-height: #{$subtitle-line-height},
subtitle-strong-color: #{$subtitle-strong-color},
subtitle-strong-weight: #{$subtitle-strong-weight},
subtitle-negative-margin: #{$subtitle-negative-margin},
)
);
}
.#{$class-prefix}title, .#{$class-prefix}title,
.#{$class-prefix}subtitle { .#{$class-prefix}subtitle {
@extend %block; @extend %block;
@@ -31,11 +55,11 @@ $subtitle-negative-margin: -1.25rem !default;
} }
sub { sub {
font-size: $title-sub-size; font-size: getVar("title-sub-size");
} }
sup { sup {
font-size: $title-sup-size; font-size: getVar("title-sup-size");
} }
.#{$class-prefix}tag { .#{$class-prefix}tag {
@@ -44,23 +68,23 @@ $subtitle-negative-margin: -1.25rem !default;
} }
.#{$class-prefix}title { .#{$class-prefix}title {
color: $title-color; color: getVar("title-color");
@if $title-family { @if $title-family {
font-family: $title-family; font-family: getVar("title-family");
} }
font-size: $title-size; font-size: getVar("title-size");
font-weight: $title-weight; font-weight: getVar("title-weight");
line-height: $title-line-height; line-height: getVar("title-line-height");
strong { strong {
color: $title-strong-color; color: getVar("title-strong-color");
font-weight: $title-strong-weight; font-weight: getVar("title-strong-weight");
} }
&:not(.is-spaced) + .#{$class-prefix}subtitle { &:not(.is-spaced) + .#{$class-prefix}subtitle {
margin-top: $subtitle-negative-margin; margin-top: getVar("subtitle-negative-margin");
} }
// Sizes // Sizes
@@ -68,29 +92,29 @@ $subtitle-negative-margin: -1.25rem !default;
$i: index($sizes, $size); $i: index($sizes, $size);
&.is-#{$i} { &.is-#{$i} {
font-size: $size; font-size: getVar("size-", "", $i);
} }
} }
} }
.#{$class-prefix}subtitle { .#{$class-prefix}subtitle {
color: $subtitle-color; color: getVar("subtitle-color");
@if $subtitle-family { @if $subtitle-family {
font-family: $subtitle-family; font-family: getVar("subtitle-family");
} }
font-size: $subtitle-size; font-size: getVar("subtitle-size");
font-weight: $subtitle-weight; font-weight: getVar("subtitle-weight");
line-height: $subtitle-line-height; line-height: getVar("subtitle-line-height");
strong { strong {
color: $subtitle-strong-color; color: getVar("subtitle-strong-color");
font-weight: $subtitle-strong-weight; font-weight: getVar("subtitle-strong-weight");
} }
&:not(.is-spaced) + .#{$class-prefix}title { &:not(.is-spaced) + .#{$class-prefix}title {
margin-top: $subtitle-negative-margin; margin-top: getVar("subtitle-negative-margin");
} }
// Sizes // Sizes
@@ -98,7 +122,7 @@ $subtitle-negative-margin: -1.25rem !default;
$i: index($sizes, $size); $i: index($sizes, $size);
&.is-#{$i} { &.is-#{$i} {
font-size: $size; font-size: getVar("size-", "", $i);
} }
} }
} }

1
sass/themes/default.scss
View File

@@ -16,6 +16,7 @@
weight-semibold: #{$weight-semibold}, weight-semibold: #{$weight-semibold},
weight-bold: #{$weight-bold}, weight-bold: #{$weight-bold},
block-spacing: #{$block-spacing}, block-spacing: #{$block-spacing},
gap: #{$gap},
easing: #{$easing}, easing: #{$easing},
radius-small: #{$radius-small}, radius-small: #{$radius-small},
radius: #{$radius}, radius: #{$radius},