library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add more CSS variables with fallback

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-27 09:57:33 +02:00
parent 42815a783d
commit 9f3adb4930
10 changed files with 63 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sass/form/input-textarea.sass
View File

@ -3,9 +3,6 @@ $textarea-max-height: 40em !default
$textarea-min-height: 8em !default
%input-textarea
--input-shadow: #{$input-shadow}
--input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
@extend %input
box-shadow: var(--input-shadow, #{$input-shadow})
max-width: 100%

16
sass/helpers/color.sass
View File

@ -1,37 +1,37 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
color: var(--#{$name}, #{$color}) !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
background-color: var(--#{$name}, #{$color}) !important
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
// Light
.has-text-#{$name}-light
color: $color-light !important
color: var(--#{$name}-light, #{$color-light}) !important
a.has-text-#{$name}-light
&:hover,
&:focus
color: bulmaDarken($color-light, 10%) !important
.has-background-#{$name}-light
background-color: $color-light !important
background-color: var(--#{$name}-light, #{$color-light}) !important
// Dark
.has-text-#{$name}-dark
color: $color-dark !important
color: var(--#{$name}-dark, #{$color-dark}) !important
a.has-text-#{$name}-dark
&:hover,
&:focus
color: bulmaLighten($color-dark, 10%) !important
.has-background-#{$name}-dark
background-color: $color-dark !important
background-color: var(--#{$name}-dark, #{$color-dark}) !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
color: var(--#{$name}, #{$shade}) !important
.has-background-#{$name}
background-color: $shade !important
background-color: var(--#{$name}, #{$shade}) !important

24
sass/helpers/typography.sass
View File

@ -72,27 +72,31 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
font-style: italic !important
.has-text-weight-light
font-weight: $weight-light !important
font-weight: var(--weight-light, #{$weight-light}) !important
.has-text-weight-normal
font-weight: $weight-normal !important
font-weight: var(--weight-normal, #{$weight-normal}) !important
.has-text-weight-medium
font-weight: $weight-medium !important
font-weight: var(--weight-medium, #{$weight-medium}) !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
font-weight: var(--weight-semibold, #{$weight-semibold}) !important
.has-text-weight-bold
font-weight: $weight-bold !important
font-weight: var(--weight-bold, #{$weight-bold}) !important
.is-family-primary
font-family: $family-primary !important
font-family: var(--family-primary, #{$family-primary}) !important
.is-family-secondary
font-family: $family-secondary !important
font-family: var(--family-secondary, #{$family-secondary}) !important
.is-family-sans-serif
font-family: $family-sans-serif !important
font-family: var(--family-sans-serif, #{$family-sans-serif}) !important
.is-family-monospace
font-family: $family-monospace !important
font-family: var(--family-monospace, #{$family-monospace}) !important
.is-family-code
font-family: $family-code !important
font-family: var(--family-code, #{$family-code}) !important

2
sass/helpers/visibility.sass
View File

@ -1,5 +1,3 @@
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays

12
sass/layout/footer.sass
View File

@ -1,9 +1,13 @@
$footer-background-color: $scheme-main-bis !default
$footer-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default
.footer
background-color: $footer-background-color
padding: $footer-padding
--footer-background-color: #{$footer-background-color}
--footer-padding: #{$footer-padding}
--footer-color: #{$footer-color}
background-color: var(--footer-background-color)
padding: var(--footer-padding)
@if $footer-color
color: $footer-color
color: var(--footer-color, #{$footer-color})

13
sass/layout/hero.sass
View File

@ -5,6 +5,11 @@ $hero-body-padding-large: 18rem 1.5rem !default
// Main container
.hero
--hero-body-padding: #{$hero-body-padding}
--hero-body-padding-small: #{$hero-body-padding-small}
--hero-body-padding-medium: #{$hero-body-padding-medium}
--hero-body-padding-large: #{$hero-body-padding-large}
align-items: stretch
display: flex
flex-direction: column
@ -76,15 +81,15 @@ $hero-body-padding-large: 18rem 1.5rem !default
// Sizes
&.is-small
.hero-body
padding: $hero-body-padding-small
--hero-body-padding: var(--hero-body-padding-small)
&.is-medium
+tablet
.hero-body
padding: $hero-body-padding-medium
--hero-body-padding: var(--hero-body-padding-medium)
&.is-large
+tablet
.hero-body
padding: $hero-body-padding-large
--hero-body-padding: var(--hero-body-padding-large)
&.is-halfheight,
&.is-fullheight,
&.is-fullheight-with-navbar
@ -142,4 +147,4 @@ $hero-body-padding-large: 18rem 1.5rem !default
.hero-body
flex-grow: 1
flex-shrink: 0
padding: $hero-body-padding
padding: var(--hero-body-padding)

10
sass/layout/section.sass
View File

@ -3,11 +3,15 @@ $section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default
.section
padding: $section-padding
--section-padding: #{$section-padding}
--section-padding-medium: #{$section-padding-medium}
--section-padding-large: #{$section-padding-large}
padding: var(--section-padding)
// Responsiveness
+desktop
// Sizes
&.is-medium
padding: $section-padding-medium
--section-padding: var(--section-padding-medium)
&.is-large
padding: $section-padding-large
--section-padding: var(--section-padding-large)

11
sass/themes/default.sass
View File

@ -45,6 +45,17 @@
--speed: #{$speed}
// Derived variables
--primary: #{$primary}
// bulmaDarken($color, 5%)
// bulmaDarken($color, 10%)
// bulmaDarken($color, 2.5%)
// bulmaRgba($color, 0.25)
// bulmaDarken($color-light, 10%)
// bulmaDarken($color-light, 2.5%)
// bulmaDarken($color-light, 5%)
// bulmaLighten($color-dark, 10%)
// bulmaDarken($color-invert, 5%)
// bulmaRgba($color-invert, 0.9)
// bulmaRgba($color-invert, 0.7)
--info: #{$info}
--success: #{$success}
--warning: #{$warning}

8
sass/utilities/derived-variables.scss
View File

@ -98,10 +98,10 @@ $family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-code : var(--family-monospace, #{$family-monospace}) !default;
$size-small : $size-7 !default;
$size-normal: $size-6 !default;
$size-medium: $size-5 !default;
$size-large : $size-4 !default;
$size-small : var(--size-7, #{size-7}) !default;
$size-normal: var(--size-6, #{size-6}) !default;
$size-medium: var(--size-5, #{size-5}) !default;
$size-large : var(--size-4, #{size-4}) !default;
// Lists and maps
$custom-colors: null !default;

3
test/plugins/check-css-variables-exist.js
View File

@ -3,7 +3,7 @@ module.exports = plugin;
const utils = require('./utils');
const fs = require('fs');
const regexAssign = /--[a-z-]*:/g;
const regexUsage = /var\(--[a-z-]*\)/g;
const regexUsage = /var\(--[a-z-]*(\, \#|\))/g;
const LOG_EVERYTHING = false;
function logThis(message) {
@ -51,6 +51,7 @@ function plugin() {
usages = usages.map(usage => {
usage = usage.replace('var(', '');
usage = usage.replace(')', '');
usage = usage.replace(', #', '');
return usage;
});