mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add elements CSS variables
This commit is contained in:
Jeremy Thomas
parent
8508af010a
commit
89a8b8f208
570
docs/css/bulma.css
vendored
570
docs/css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
@ -8,8 +8,41 @@ title: Elements/Progress
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<progress id="progress-small" class="progress is-small" value="15" max="100">15%</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>
|
||||
<progress id="progress-small" class="progress is-small" value="15" max="100">
|
||||
15%
|
||||
</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>
|
||||
|
||||
@ -1,34 +1,48 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$box-color: $text !default;
|
||||
$box-background-color: $scheme-main !default;
|
||||
$box-radius: $radius-large !default;
|
||||
$box-shadow: $shadow !default;
|
||||
$box-color: getVar("text") !default;
|
||||
$box-background-color: getVar("scheme-main") !default;
|
||||
$box-radius: getVar("radius-large") !default;
|
||||
$box-shadow: getVar("shadow") !default;
|
||||
$box-padding: 1.25rem !default;
|
||||
|
||||
$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),
|
||||
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 {
|
||||
@extend %block;
|
||||
|
||||
background-color: $box-background-color;
|
||||
border-radius: $box-radius;
|
||||
box-shadow: $box-shadow;
|
||||
color: $box-color;
|
||||
background-color: getVar("box-background-color");
|
||||
border-radius: getVar("box-radius");
|
||||
box-shadow: getVar("box-shadow");
|
||||
color: getVar("box-color");
|
||||
display: block;
|
||||
padding: $box-padding;
|
||||
padding: getVar("box-padding");
|
||||
}
|
||||
|
||||
a.#{$class-prefix}box {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $box-link-hover-shadow;
|
||||
box-shadow: getVar("box-link-hover-shadow");
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $box-link-active-shadow;
|
||||
box-shadow: getVar("box-link-active-shadow");
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,105 +1,145 @@
|
||||
@import "../utilities/controls";
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$button-color: $text-strong !default;
|
||||
$button-background-color: $scheme-main !default;
|
||||
$button-color: getVar("text-strong") !default;
|
||||
$button-background-color: getVar("scheme-main") !default;
|
||||
$button-family: false !default;
|
||||
|
||||
$button-border-color: $border !default;
|
||||
$button-border-width: $control-border-width !default;
|
||||
$button-border-color: getVar("border") !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-hover-color: $link-hover !default;
|
||||
$button-hover-border-color: $link-hover-border !default;
|
||||
$button-hover-color: getVar("link-hover") !default;
|
||||
$button-hover-border-color: getVar("link-hover-border") !default;
|
||||
|
||||
$button-focus-color: $link-focus !default;
|
||||
$button-focus-border-color: $link-focus-border !default;
|
||||
$button-focus-color: getVar("link-focus") !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-color: bulmaRgba($link, 0.25) !default;
|
||||
|
||||
$button-active-color: $link-active !default;
|
||||
$button-active-border-color: $link-active-border !default;
|
||||
$button-active-color: getVar("link-active") !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-hover-background-color: $background !default;
|
||||
$button-text-hover-color: $text-strong !default;
|
||||
$button-text-hover-background-color: getVar("background") !default;
|
||||
$button-text-hover-color: getVar("text-strong") !default;
|
||||
|
||||
$button-ghost-background: none !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-hover-color: $link !default;
|
||||
$button-ghost-hover-color: getVar("link") !default;
|
||||
$button-ghost-hover-decoration: underline !default;
|
||||
|
||||
$button-disabled-background-color: $scheme-main !default;
|
||||
$button-disabled-border-color: $border !default;
|
||||
$button-disabled-background-color: getVar("scheme-main") !default;
|
||||
$button-disabled-border-color: getVar("border") !default;
|
||||
$button-disabled-shadow: none !default;
|
||||
$button-disabled-opacity: 0.5 !default;
|
||||
|
||||
$button-static-color: $text-light !default;
|
||||
$button-static-background-color: $scheme-main-ter !default;
|
||||
$button-static-border-color: $border !default;
|
||||
$button-static-color: getVar("text-light") !default;
|
||||
$button-static-background-color: getVar("scheme-main-ter") !default;
|
||||
$button-static-border-color: getVar("border") !default;
|
||||
|
||||
$button-colors: $colors !default;
|
||||
$button-responsive-sizes: (
|
||||
"mobile": (
|
||||
"small": $size-small * 0.75,
|
||||
"normal": $size-small * 0.875,
|
||||
"medium": $size-small,
|
||||
"large": $size-normal,
|
||||
"small": calc(#{getVar("size-small")} * 0.75),
|
||||
"normal": calc(#{getVar("size-small")} * 0.875),
|
||||
"medium": getVar("size-small"),
|
||||
"large": getVar("size-normal"),
|
||||
),
|
||||
"tablet-only": (
|
||||
"small": $size-small * 0.875,
|
||||
"normal": $size-small,
|
||||
"medium": $size-normal,
|
||||
"large": $size-medium,
|
||||
"small": calc(#{getVar("size-small")} * 0.875),
|
||||
"normal": getVar("size-small"),
|
||||
"medium": getVar("size-normal"),
|
||||
"large": getVar("size-medium"),
|
||||
),
|
||||
) !default;
|
||||
|
||||
// The button sizes use mixins so they can be used at different breakpoints
|
||||
@mixin button-small {
|
||||
&:not(.is-rounded) {
|
||||
border-radius: $radius-small;
|
||||
border-radius: getVar("radius-small");
|
||||
}
|
||||
|
||||
font-size: $size-small;
|
||||
font-size: getVar("size-small");
|
||||
}
|
||||
|
||||
@mixin button-normal {
|
||||
font-size: $size-normal;
|
||||
font-size: getVar("size-normal");
|
||||
}
|
||||
|
||||
@mixin button-medium {
|
||||
font-size: $size-medium;
|
||||
font-size: getVar("size-medium");
|
||||
}
|
||||
|
||||
@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 {
|
||||
@extend %control;
|
||||
|
||||
@extend %unselectable;
|
||||
|
||||
background-color: $button-background-color;
|
||||
border-color: $button-border-color;
|
||||
border-width: $button-border-width;
|
||||
color: $button-color;
|
||||
background-color: getVar("button-background-color");
|
||||
border-color: getVar("button-border-color");
|
||||
border-width: getVar("button-border-width");
|
||||
color: getVar("button-color");
|
||||
cursor: pointer;
|
||||
|
||||
@if $button-family {
|
||||
font-family: $button-family;
|
||||
font-family: getVar("button-family");
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
padding-bottom: $button-padding-vertical;
|
||||
padding-left: $button-padding-horizontal;
|
||||
padding-right: $button-padding-horizontal;
|
||||
padding-top: $button-padding-vertical;
|
||||
padding-bottom: getVar("button-padding-vertical");
|
||||
padding-left: getVar("button-padding-horizontal");
|
||||
padding-right: getVar("button-padding-horizontal");
|
||||
padding-top: getVar("button-padding-vertical");
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -119,26 +159,45 @@ $button-responsive-sizes: (
|
||||
&:first-child:not(:last-child) {
|
||||
@include ltr-property(
|
||||
"margin",
|
||||
calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}),
|
||||
calc(
|
||||
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
|
||||
"button-border-width"
|
||||
)}
|
||||
),
|
||||
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) {
|
||||
@include ltr-property("margin", $button-padding-horizontal * 0.25, false);
|
||||
@include ltr-property(
|
||||
"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 {
|
||||
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(
|
||||
#{-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
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
border-color: $button-hover-border-color;
|
||||
color: $button-hover-color;
|
||||
border-color: getVar("button-hover-border-color");
|
||||
color: getVar("button-hover-color");
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
border-color: $button-focus-border-color;
|
||||
color: $button-focus-color;
|
||||
border-color: getVar("button-focus-border-color");
|
||||
color: getVar("button-focus-color");
|
||||
|
||||
&: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,
|
||||
&.is-active {
|
||||
border-color: $button-active-border-color;
|
||||
color: $button-active-color;
|
||||
border-color: getVar("button-active-border-color");
|
||||
color: getVar("button-active-color");
|
||||
}
|
||||
|
||||
// Colors
|
||||
&.is-text {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $button-text-color;
|
||||
text-decoration: $button-text-decoration;
|
||||
color: getVar("button-text-color");
|
||||
text-decoration: getVar("button-text-decoration");
|
||||
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&.is-focused {
|
||||
background-color: $button-text-hover-background-color;
|
||||
color: $button-text-hover-color;
|
||||
background-color: getVar("button-text-hover-background-color");
|
||||
color: getVar("button-text-hover-color");
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: bulmaDarken($button-text-hover-background-color, 5%);
|
||||
color: $button-text-hover-color;
|
||||
// background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
|
||||
color: getVar("button-text-hover-color");
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@ -196,15 +256,15 @@ $button-responsive-sizes: (
|
||||
}
|
||||
|
||||
&.is-ghost {
|
||||
background: $button-ghost-background;
|
||||
border-color: $button-ghost-border-color;
|
||||
color: $button-ghost-color;
|
||||
text-decoration: $button-ghost-decoration;
|
||||
background: getVar("button-ghost-background");
|
||||
border-color: getVar("button-ghost-border-color");
|
||||
color: getVar("button-ghost-color");
|
||||
text-decoration: getVar("button-ghost-decoration");
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
color: $button-ghost-hover-color;
|
||||
text-decoration: $button-ghost-hover-decoration;
|
||||
color: getVar("button-ghost-hover-color");
|
||||
text-decoration: getVar("button-ghost-hover-decoration");
|
||||
}
|
||||
}
|
||||
|
||||
@ -230,7 +290,8 @@ $button-responsive-sizes: (
|
||||
color: $color-invert;
|
||||
|
||||
&: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
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: $button-disabled-background-color;
|
||||
border-color: $button-disabled-border-color;
|
||||
box-shadow: $button-disabled-shadow;
|
||||
opacity: $button-disabled-opacity;
|
||||
background-color: getVar("button-disabled-background-color");
|
||||
border-color: getVar("button-disabled-border-color");
|
||||
box-shadow: getVar("button-disabled-shadow");
|
||||
opacity: getVar("button-disabled-opacity");
|
||||
}
|
||||
|
||||
&.is-fullwidth {
|
||||
@ -413,25 +474,23 @@ $button-responsive-sizes: (
|
||||
|
||||
&::after {
|
||||
@extend %loader;
|
||||
|
||||
@include center(1em);
|
||||
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-static {
|
||||
background-color: $button-static-background-color;
|
||||
border-color: $button-static-border-color;
|
||||
color: $button-static-color;
|
||||
background-color: getVar("button-static-background-color");
|
||||
border-color: getVar("button-static-border-color");
|
||||
color: getVar("button-static-color");
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: $radius-rounded;
|
||||
padding-left: calc(#{$button-padding-horizontal} + 0.25em);
|
||||
padding-right: calc(#{$button-padding-horizontal} + 0.25em);
|
||||
border-radius: getVar("radius-rounded");
|
||||
padding-left: calc(#{getVar("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 {
|
||||
@if $size != "normal" {
|
||||
.#{$class-prefix}button.is-responsive.is-#{$size} {
|
||||
font-size: $value;
|
||||
font-size: getVar("value");
|
||||
}
|
||||
} @else {
|
||||
.#{$class-prefix}button.is-responsive,
|
||||
.#{$class-prefix}button.is-responsive.is-normal {
|
||||
font-size: $value;
|
||||
font-size: getVar("value");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$container-offset: 2 * $gap !default;
|
||||
$container-offset: calc(2 * #{getVar("gap")}) !default;
|
||||
$container-max-width: $fullhd !default;
|
||||
|
||||
:root {
|
||||
@include register-vars(
|
||||
(
|
||||
container-offset: #{$container-offset},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.#{$class-prefix}container {
|
||||
flex-grow: 1;
|
||||
margin: 0 auto;
|
||||
@ -11,36 +19,48 @@ $container-max-width: $fullhd !default;
|
||||
|
||||
&.is-fluid {
|
||||
max-width: none !important;
|
||||
padding-left: $gap;
|
||||
padding-right: $gap;
|
||||
padding-left: getVar("gap");
|
||||
padding-right: getVar("gap");
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
max-width: $desktop - $container-offset;
|
||||
max-width: calc(#{$desktop} - #{getVar("container-offset")});
|
||||
}
|
||||
|
||||
@include until-widescreen {
|
||||
&.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 {
|
||||
&.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 {
|
||||
&: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 {
|
||||
&: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")}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,50 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$content-heading-color: $text-strong !default;
|
||||
$content-heading-weight: $weight-semibold !default;
|
||||
$content-heading-color: getVar("text-strong") !default;
|
||||
$content-heading-weight: getVar("weight-semibold") !default;
|
||||
$content-heading-line-height: 1.125 !default;
|
||||
|
||||
$content-block-margin-bottom: 1em !default;
|
||||
|
||||
$content-blockquote-background-color: $background !default;
|
||||
$content-blockquote-border-left: 5px solid $border !default;
|
||||
$content-blockquote-background-color: getVar("background") !default;
|
||||
$content-blockquote-border-left: 5px solid getVar("border") !default;
|
||||
$content-blockquote-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-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-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-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 {
|
||||
@extend %block;
|
||||
@ -39,7 +63,7 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
pre,
|
||||
table {
|
||||
&: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,
|
||||
h5,
|
||||
h6 {
|
||||
color: $content-heading-color;
|
||||
font-weight: $content-heading-weight;
|
||||
line-height: $content-heading-line-height;
|
||||
color: getVar("content-heading-color");
|
||||
font-weight: getVar("content-heading-weight");
|
||||
line-height: getVar("content-heading-line-height");
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -97,18 +121,18 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: $content-blockquote-background-color;
|
||||
|
||||
@include ltr-property("border", $content-blockquote-border-left, false);
|
||||
|
||||
padding: $content-blockquote-padding;
|
||||
background-color: getVar("content-blockquote-background-color");
|
||||
@include ltr-property(
|
||||
"border",
|
||||
getVar("content-blockquote-border-left"),
|
||||
false
|
||||
);
|
||||
padding: getVar("content-blockquote-padding");
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: outside;
|
||||
|
||||
@include ltr-property("margin", 2em, false);
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
&:not([type]) {
|
||||
@ -134,9 +158,7 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
|
||||
@include ltr-property("margin", 2em, false);
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
ul {
|
||||
@ -177,9 +199,8 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
|
||||
pre {
|
||||
@include overflow-touch;
|
||||
|
||||
overflow-x: auto;
|
||||
padding: $content-pre-padding;
|
||||
padding: getVar("content-pre-padding");
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
@ -194,14 +215,14 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: $content-table-cell-border;
|
||||
border-width: $content-table-cell-border-width;
|
||||
padding: $content-table-cell-padding;
|
||||
border: getVar("content-table-cell-border");
|
||||
border-width: getVar("content-table-cell-border-width");
|
||||
padding: getVar("content-table-cell-padding");
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $content-table-cell-heading-color;
|
||||
color: getVar("content-table-cell-heading-color");
|
||||
|
||||
&:not([align]) {
|
||||
text-align: inherit;
|
||||
@ -211,16 +232,16 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
thead {
|
||||
td,
|
||||
th {
|
||||
border-width: $content-table-head-cell-border-width;
|
||||
color: $content-table-head-cell-color;
|
||||
border-width: getVar("content-table-head-cell-border-width");
|
||||
color: getVar("content-table-head-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td,
|
||||
th {
|
||||
border-width: $content-table-foot-cell-border-width;
|
||||
color: $content-table-foot-cell-color;
|
||||
border-width: getVar("content-table-foot-cell-border-width");
|
||||
color: getVar("content-table-foot-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
@ -229,7 +250,9 @@ $content-table-foot-cell-color: $text-strong !default;
|
||||
&:last-child {
|
||||
td,
|
||||
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
|
||||
&.is-small {
|
||||
font-size: $size-small;
|
||||
font-size: getVar("size-small");
|
||||
}
|
||||
|
||||
&.is-normal {
|
||||
font-size: $size-normal;
|
||||
font-size: getVar("size-normal");
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
font-size: $size-medium;
|
||||
font-size: getVar("size-medium");
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
font-size: $size-large;
|
||||
font-size: getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,27 +4,39 @@ $icon-dimensions-medium: 2rem !default;
|
||||
$icon-dimensions-large: 3rem !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 {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
height: $icon-dimensions;
|
||||
width: $icon-dimensions;
|
||||
height: getVar("icon-dimensions");
|
||||
width: getVar("icon-dimensions");
|
||||
|
||||
// Sizes
|
||||
&.is-small {
|
||||
height: $icon-dimensions-small;
|
||||
width: $icon-dimensions-small;
|
||||
height: getVar("icon-dimensions-small");
|
||||
width: getVar("icon-dimensions-small");
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
height: $icon-dimensions-medium;
|
||||
width: $icon-dimensions-medium;
|
||||
height: getVar("icon-dimensions-medium");
|
||||
width: getVar("icon-dimensions-medium");
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
height: $icon-dimensions-large;
|
||||
width: $icon-dimensions-large;
|
||||
height: getVar("icon-dimensions-large");
|
||||
width: getVar("icon-dimensions-large");
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +45,7 @@ $icon-text-spacing: 0.25em !default;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: $icon-dimensions;
|
||||
line-height: getVar("icon-dimensions");
|
||||
vertical-align: top;
|
||||
|
||||
.#{$class-prefix}icon {
|
||||
@ -42,21 +54,21 @@ $icon-text-spacing: 0.25em !default;
|
||||
|
||||
&:not(:last-child) {
|
||||
@include ltr {
|
||||
margin-right: $icon-text-spacing;
|
||||
margin-right: getVar("icon-text-spacing");
|
||||
}
|
||||
|
||||
@include rtl {
|
||||
margin-left: $icon-text-spacing;
|
||||
margin-left: getVar("icon-text-spacing");
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
@include ltr {
|
||||
margin-left: $icon-text-spacing;
|
||||
margin-left: getVar("icon-text-spacing");
|
||||
}
|
||||
|
||||
@include rtl {
|
||||
margin-right: $icon-text-spacing;
|
||||
margin-right: getVar("icon-text-spacing");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ $dimensions: 16 24 32 48 64 96 128 !default;
|
||||
width: 100%;
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: $radius-rounded;
|
||||
border-radius: getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,27 +1,40 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$notification-background-color: $background !default;
|
||||
$notification-code-background-color: $scheme-main !default;
|
||||
$notification-radius: $radius !default;
|
||||
$notification-background-color: getVar("background") !default;
|
||||
$notification-code-background-color: getVar("scheme-main") !default;
|
||||
$notification-radius: getVar("radius") !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-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !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 {
|
||||
@extend %block;
|
||||
|
||||
background-color: $notification-background-color;
|
||||
border-radius: $notification-radius;
|
||||
background-color: getVar("notification-background-color");
|
||||
border-radius: getVar("notification-radius");
|
||||
position: relative;
|
||||
|
||||
@include ltr {
|
||||
padding: $notification-padding-ltr;
|
||||
padding: getVar("notification-padding-ltr");
|
||||
}
|
||||
|
||||
@include rtl {
|
||||
padding: $notification-padding-rtl;
|
||||
padding: getVar("notification-padding-rtl");
|
||||
}
|
||||
|
||||
a:not(.#{$class-prefix}button):not(.#{$class-prefix}dropdown-item) {
|
||||
@ -35,7 +48,7 @@ $notification-colors: $colors !default;
|
||||
|
||||
code,
|
||||
pre {
|
||||
background: $notification-code-background-color;
|
||||
background: getVar("notification-code-background-color");
|
||||
}
|
||||
|
||||
pre code {
|
||||
@ -44,7 +57,6 @@ $notification-colors: $colors !default;
|
||||
|
||||
& > .#{$class-prefix}delete {
|
||||
@include ltr-position(0.5rem);
|
||||
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
|
||||
.#{$class-prefix}number {
|
||||
align-items: center;
|
||||
background-color: $background;
|
||||
border-radius: $radius-rounded;
|
||||
background-color: getVar("background");
|
||||
border-radius: getVar("radius-rounded");
|
||||
display: inline-flex;
|
||||
font-size: $size-medium;
|
||||
font-size: getVar("size-medium");
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
margin-right: 1.5rem;
|
||||
|
||||
@ -1,40 +1,51 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$progress-bar-background-color: $border-light !default;
|
||||
$progress-value-background-color: $text !default;
|
||||
$progress-border-radius: $radius-rounded !default;
|
||||
$progress-bar-background-color: getVar("border-light") !default;
|
||||
$progress-value-background-color: getVar("text") !default;
|
||||
$progress-border-radius: getVar("radius-rounded") !default;
|
||||
|
||||
$progress-indeterminate-duration: 1.5s !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 {
|
||||
@extend %block;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border-radius: $progress-border-radius;
|
||||
border-radius: getVar("progress-border-radius");
|
||||
display: block;
|
||||
height: $size-normal;
|
||||
height: getVar("size-normal");
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: $progress-bar-background-color;
|
||||
background-color: getVar("progress-bar-background-color");
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $progress-value-background-color;
|
||||
background-color: getVar("progress-value-background-color");
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: $progress-value-background-color;
|
||||
background-color: getVar("progress-value-background-color");
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
background-color: $progress-value-background-color;
|
||||
background-color: getVar("progress-value-background-color");
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -59,22 +70,22 @@ $progress-colors: $colors !default;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$color 30%,
|
||||
$progress-bar-background-color 30%
|
||||
#{getVar("progress-bar-background-color")} 30%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
animation-duration: $progress-indeterminate-duration;
|
||||
animation-duration: getVar("progress-indeterminate-duration");
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-timing-function: linear;
|
||||
background-color: $progress-bar-background-color;
|
||||
background-color: getVar("progress-bar-background-color");
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$text 30%,
|
||||
$progress-bar-background-color 30%
|
||||
#{getVar("text")} 30%,
|
||||
#{getVar("progress-bar-background-color")} 30%
|
||||
);
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
@ -95,15 +106,15 @@ $progress-colors: $colors !default;
|
||||
|
||||
// Sizes
|
||||
&.is-small {
|
||||
height: $size-small;
|
||||
height: getVar("size-small");
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
height: $size-medium;
|
||||
height: getVar("size-medium");
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
height: $size-large;
|
||||
height: getVar("size-large");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,44 +1,72 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$table-color: $text-strong !default;
|
||||
$table-background-color: $scheme-main !default;
|
||||
$table-color: getVar("text-strong") !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-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-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-color: $text-strong !default;
|
||||
$table-foot-cell-color: getVar("text-strong") !default;
|
||||
|
||||
$table-head-background-color: transparent !default;
|
||||
$table-body-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-color: $primary-invert !default;
|
||||
$table-row-active-background-color: getVar("primary") !default;
|
||||
$table-row-active-color: getVar("primary-invert") !default;
|
||||
|
||||
$table-striped-row-even-background-color: $scheme-main-bis !default;
|
||||
$table-striped-row-even-hover-background-color: $scheme-main-ter !default;
|
||||
$table-striped-row-even-background-color: getVar("scheme-main-bis") !default;
|
||||
$table-striped-row-even-hover-background-color: getVar(
|
||||
"scheme-main-ter"
|
||||
) !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 {
|
||||
@extend %block;
|
||||
|
||||
background-color: $table-background-color;
|
||||
color: $table-color;
|
||||
background-color: getVar("table-background-color");
|
||||
color: getVar("table-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
border: $table-cell-border;
|
||||
border-width: $table-cell-border-width;
|
||||
padding: $table-cell-padding;
|
||||
border: getVar("table-cell-border");
|
||||
border-width: getVar("table-cell-border-width");
|
||||
padding: getVar("table-cell-padding");
|
||||
vertical-align: top;
|
||||
|
||||
// Colors
|
||||
@ -60,8 +88,8 @@ $table-colors: $colors !default;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background-color: $table-row-active-background-color;
|
||||
color: $table-row-active-color;
|
||||
background-color: getVar("table-row-active-background-color");
|
||||
color: getVar("table-row-active-color");
|
||||
|
||||
a,
|
||||
strong {
|
||||
@ -75,17 +103,17 @@ $table-colors: $colors !default;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $table-cell-heading-color;
|
||||
color: getVar("table-cell-heading-color");
|
||||
|
||||
&:not([align]) {
|
||||
text-align: $table-cell-text-align;
|
||||
text-align: getVar("table-cell-text-align");
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.is-selected {
|
||||
background-color: $table-row-active-background-color;
|
||||
color: $table-row-active-color;
|
||||
background-color: getVar("table-row-active-background-color");
|
||||
color: getVar("table-row-active-color");
|
||||
|
||||
a,
|
||||
strong {
|
||||
@ -94,34 +122,34 @@ $table-colors: $colors !default;
|
||||
|
||||
td,
|
||||
th {
|
||||
border-color: $table-row-active-color;
|
||||
border-color: getVar("table-row-active-color");
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: $table-head-background-color;
|
||||
background-color: getVar("table-head-background-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
border-width: $table-head-cell-border-width;
|
||||
color: $table-head-cell-color;
|
||||
border-width: getVar("table-head-cell-border-width");
|
||||
color: getVar("table-head-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
background-color: $table-foot-background-color;
|
||||
background-color: getVar("table-foot-background-color");
|
||||
|
||||
td,
|
||||
th {
|
||||
border-width: $table-foot-cell-border-width;
|
||||
color: $table-foot-cell-color;
|
||||
border-width: getVar("table-foot-cell-border-width");
|
||||
color: getVar("table-foot-cell-color");
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
background-color: $table-body-background-color;
|
||||
background-color: getVar("table-body-background-color");
|
||||
|
||||
tr {
|
||||
&:last-child {
|
||||
@ -158,7 +186,7 @@ $table-colors: $colors !default;
|
||||
tbody {
|
||||
tr:not(.is-selected) {
|
||||
&: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 {
|
||||
tr:not(.is-selected) {
|
||||
&:hover {
|
||||
background-color: $table-row-hover-background-color;
|
||||
background-color: getVar("table-row-hover-background-color");
|
||||
|
||||
&: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 {
|
||||
tr:not(.is-selected) {
|
||||
&: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 {
|
||||
@extend %block;
|
||||
|
||||
@include overflow-touch;
|
||||
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
max-width: 100%;
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$tag-background-color: $background !default;
|
||||
$tag-color: $text !default;
|
||||
$tag-radius: $radius !default;
|
||||
$tag-background-color: getVar("background") !default;
|
||||
$tag-color: getVar("text") !default;
|
||||
$tag-radius: getVar("radius") !default;
|
||||
$tag-delete-margin: 1px !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 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -32,13 +43,13 @@ $tag-colors: $colors !default;
|
||||
// Sizes
|
||||
&.are-medium {
|
||||
.#{$class-prefix}tag:not(.is-normal):not(.is-large) {
|
||||
font-size: $size-normal;
|
||||
font-size: getVar("size-normal");
|
||||
}
|
||||
}
|
||||
|
||||
&.are-large {
|
||||
.#{$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) {
|
||||
align-items: center;
|
||||
background-color: $tag-background-color;
|
||||
border-radius: $tag-radius;
|
||||
color: $tag-color;
|
||||
background-color: getVar("tag-background-color");
|
||||
border-radius: getVar("tag-radius");
|
||||
color: getVar("tag-color");
|
||||
display: inline-flex;
|
||||
font-size: $size-small;
|
||||
font-size: getVar("size-small");
|
||||
height: 2em;
|
||||
justify-content: center;
|
||||
line-height: 1.5;
|
||||
@ -140,15 +151,15 @@ $tag-colors: $colors !default;
|
||||
|
||||
// Sizes
|
||||
&.is-normal {
|
||||
font-size: $size-small;
|
||||
font-size: getVar("size-small");
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
font-size: $size-normal;
|
||||
font-size: getVar("size-normal");
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
font-size: $size-medium;
|
||||
font-size: getVar("size-medium");
|
||||
}
|
||||
|
||||
.#{$class-prefix}icon {
|
||||
@ -170,8 +181,7 @@ $tag-colors: $colors !default;
|
||||
|
||||
// Modifiers
|
||||
&.is-delete {
|
||||
@include ltr-property("margin", $tag-delete-margin, false);
|
||||
|
||||
@include ltr-property("margin", getVar("tag-delete-margin"), false);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 2em;
|
||||
@ -200,16 +210,16 @@ $tag-colors: $colors !default;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($tag-background-color, 5%);
|
||||
// background-color: darken($tag-background-color, 5%); // TODO
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($tag-background-color, 10%);
|
||||
// background-color: darken($tag-background-color, 10%); // TODO
|
||||
}
|
||||
}
|
||||
|
||||
&.is-rounded {
|
||||
border-radius: $radius-rounded;
|
||||
border-radius: getVar("radius-rounded");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,48 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$title-color: $text-strong !default;
|
||||
$title-color: getVar("text-strong") !default;
|
||||
$title-family: false !default;
|
||||
$title-size: $size-3 !default;
|
||||
$title-weight: $weight-semibold !default;
|
||||
$title-size: getVar("size-3") !default;
|
||||
$title-weight: getVar("weight-semibold") !default;
|
||||
$title-line-height: 1.125 !default;
|
||||
$title-strong-color: inherit !default;
|
||||
$title-strong-weight: inherit !default;
|
||||
$title-sub-size: 0.75em !default;
|
||||
$title-sup-size: 0.75em !default;
|
||||
|
||||
$subtitle-color: $text !default;
|
||||
$subtitle-color: getVar("text") !default;
|
||||
$subtitle-family: false !default;
|
||||
$subtitle-size: $size-5 !default;
|
||||
$subtitle-weight: $weight-normal !default;
|
||||
$subtitle-size: getVar("size-5") !default;
|
||||
$subtitle-weight: getVar("weight-normal") !default;
|
||||
$subtitle-line-height: 1.25 !default;
|
||||
$subtitle-strong-color: $text-strong !default;
|
||||
$subtitle-strong-weight: $weight-semibold !default;
|
||||
$subtitle-strong-color: getVar("text-strong") !default;
|
||||
$subtitle-strong-weight: getVar("weight-semibold") !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}subtitle {
|
||||
@extend %block;
|
||||
@ -31,11 +55,11 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: $title-sub-size;
|
||||
font-size: getVar("title-sub-size");
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: $title-sup-size;
|
||||
font-size: getVar("title-sup-size");
|
||||
}
|
||||
|
||||
.#{$class-prefix}tag {
|
||||
@ -44,23 +68,23 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
}
|
||||
|
||||
.#{$class-prefix}title {
|
||||
color: $title-color;
|
||||
color: getVar("title-color");
|
||||
|
||||
@if $title-family {
|
||||
font-family: $title-family;
|
||||
font-family: getVar("title-family");
|
||||
}
|
||||
|
||||
font-size: $title-size;
|
||||
font-weight: $title-weight;
|
||||
line-height: $title-line-height;
|
||||
font-size: getVar("title-size");
|
||||
font-weight: getVar("title-weight");
|
||||
line-height: getVar("title-line-height");
|
||||
|
||||
strong {
|
||||
color: $title-strong-color;
|
||||
font-weight: $title-strong-weight;
|
||||
color: getVar("title-strong-color");
|
||||
font-weight: getVar("title-strong-weight");
|
||||
}
|
||||
|
||||
&:not(.is-spaced) + .#{$class-prefix}subtitle {
|
||||
margin-top: $subtitle-negative-margin;
|
||||
margin-top: getVar("subtitle-negative-margin");
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@ -68,29 +92,29 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
$i: index($sizes, $size);
|
||||
|
||||
&.is-#{$i} {
|
||||
font-size: $size;
|
||||
font-size: getVar("size-", "", $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$class-prefix}subtitle {
|
||||
color: $subtitle-color;
|
||||
color: getVar("subtitle-color");
|
||||
|
||||
@if $subtitle-family {
|
||||
font-family: $subtitle-family;
|
||||
font-family: getVar("subtitle-family");
|
||||
}
|
||||
|
||||
font-size: $subtitle-size;
|
||||
font-weight: $subtitle-weight;
|
||||
line-height: $subtitle-line-height;
|
||||
font-size: getVar("subtitle-size");
|
||||
font-weight: getVar("subtitle-weight");
|
||||
line-height: getVar("subtitle-line-height");
|
||||
|
||||
strong {
|
||||
color: $subtitle-strong-color;
|
||||
font-weight: $subtitle-strong-weight;
|
||||
color: getVar("subtitle-strong-color");
|
||||
font-weight: getVar("subtitle-strong-weight");
|
||||
}
|
||||
|
||||
&:not(.is-spaced) + .#{$class-prefix}title {
|
||||
margin-top: $subtitle-negative-margin;
|
||||
margin-top: getVar("subtitle-negative-margin");
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@ -98,7 +122,7 @@ $subtitle-negative-margin: -1.25rem !default;
|
||||
$i: index($sizes, $size);
|
||||
|
||||
&.is-#{$i} {
|
||||
font-size: $size;
|
||||
font-size: getVar("size-", "", $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
weight-semibold: #{$weight-semibold},
|
||||
weight-bold: #{$weight-bold},
|
||||
block-spacing: #{$block-spacing},
|
||||
gap: #{$gap},
|
||||
easing: #{$easing},
|
||||
radius-small: #{$radius-small},
|
||||
radius: #{$radius},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user