mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
33ccbc23e3
* Set up CSS testing using sass-true and mocha Use mocha to handle the heavy lifting of finding tests and running them. Mocha is made to look directly for SCSS files which are compiled thanks to Node's require.extensions mechanism. * Add CSS tests to workflow * Add tests for the generate-utility mixin * Add tests for utilities generation * Fix linting issues * Fix test contents Don't know why the whole utilities.test.scss ended up copied in the api.test.scss * Remove unnecessary entry in package.json * Move to Jasmine for running the tests * Move running of CSS tests before CSS build * Update linting set up Add exceptions for test files in stylelint * Remove irrelevant option for sass-true * Fix linting issues after rebase * Add color mode tests * Fix linter Co-authored-by: Mark Otto <markdotto@gmail.com>
98 lines
3.3 KiB
SCSS
98 lines
3.3 KiB
SCSS
// Utility generator
|
|
// Used to generate utilities & print utilities
|
|
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
|
|
$values: map-get($utility, values);
|
|
|
|
// If the values are a list or string, convert it into a map
|
|
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
|
$values: zip($values, $values);
|
|
}
|
|
|
|
@each $key, $value in $values {
|
|
$properties: map-get($utility, property);
|
|
|
|
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
|
@if type-of($properties) == "string" {
|
|
$properties: append((), $properties);
|
|
}
|
|
|
|
// Use custom class if present
|
|
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
|
$property-class: if($property-class == null, "", $property-class);
|
|
|
|
// Use custom CSS variable name if present, otherwise default to `class`
|
|
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
|
|
|
// State params to generate pseudo-classes
|
|
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
|
|
|
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
|
|
|
// Don't prefix if value key is null (e.g. with shadow class)
|
|
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
|
|
|
@if map-get($utility, rfs) {
|
|
// Inside the media query
|
|
@if $is-rfs-media-query {
|
|
$val: rfs-value($value);
|
|
|
|
// Do not render anything if fluid and non fluid values are the same
|
|
$value: if($val == rfs-fluid-value($value), null, $val);
|
|
}
|
|
@else {
|
|
$value: rfs-fluid-value($value);
|
|
}
|
|
}
|
|
|
|
$is-css-var: map-get($utility, css-var);
|
|
$is-local-vars: map-get($utility, local-vars);
|
|
$is-rtl: map-get($utility, rtl);
|
|
|
|
@if $value != null {
|
|
@if $is-rtl == false {
|
|
/* rtl:begin:remove */
|
|
}
|
|
|
|
@if $is-css-var {
|
|
.#{$property-class + $infix + $property-class-modifier} {
|
|
--#{$prefix}#{$css-variable-name}: #{$value};
|
|
}
|
|
|
|
@each $pseudo in $state {
|
|
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
|
--#{$prefix}#{$css-variable-name}: #{$value};
|
|
}
|
|
}
|
|
} @else {
|
|
.#{$property-class + $infix + $property-class-modifier} {
|
|
@each $property in $properties {
|
|
@if $is-local-vars {
|
|
@each $local-var, $variable in $is-local-vars {
|
|
--#{$prefix}#{$local-var}: #{$variable};
|
|
}
|
|
}
|
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
}
|
|
}
|
|
|
|
@each $pseudo in $state {
|
|
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
|
@each $property in $properties {
|
|
@if $is-local-vars {
|
|
@each $local-var, $variable in $is-local-vars {
|
|
--#{$prefix}#{$local-var}: #{$variable};
|
|
}
|
|
}
|
|
#{$property}: $value if($enable-important-utilities, !important, null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $is-rtl == false {
|
|
/* rtl:end:remove */
|
|
}
|
|
}
|
|
}
|
|
}
|