Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 13:04:29 -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

80
sass/elements/title.scss
View File

@@ -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);
}
}
}