Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-05 19:03:18 +04:00
Code Issues Projects Releases Wiki Activity

Fix invalid Sass if() syntax breaking the core build

Browse Source 
The syntax `if(sass(cond): a; else: b)` is not valid Sass — it broke
compilation of core/scss entirely. Restored the correct
`if(cond, a, b)` call form across all 22 affected files.
This commit is contained in:
codecalm
2026-07-31 00:28:23 +02:00
parent ad2ed849dd
commit 4ef2bae0a3
23 changed files with 84 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/fix-sass-if-function-syntax.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed invalid Sass `if(sass(cond): a; else: b)` syntax back to the correct `if(cond, a, b)` form across `core/scss`, which was breaking the Sass build.
core/scss/_maps.scss
+1 -1
View File
@@ -154,6 +154,6 @@ $utilities-border-subtle: (
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
$negative-spacers: if(sass($enable-negative-margins): negativify-map($spacers); else: null) !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
$gutters: $spacers !default;
core/scss/_props.scss
+3 -3
View File
@@ -34,7 +34,7 @@
@each $name, $color in map.merge($theme-colors, $social-colors) {
--#{$prefix}#{$name}: #{$color};
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
--#{$prefix}#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--#{$prefix}light); else: var(--#{$prefix}dark))};
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
@@ -68,7 +68,7 @@
/** Shadows */
@each $name, $value in $box-shadows {
--#{$prefix}shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
--#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
}
/** Border radiuses */
@@ -85,7 +85,7 @@
--#{$prefix}backdrop-opacity: #{$backdrop-opacity};
--#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
@each $name, $value in $backdrops {
--#{$prefix}backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
--#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
}
--#{$prefix}backdrop-blur: #{$backdrop-blur};
--#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
core/scss/_utilities-marketing.scss
+1 -1
View File
@@ -2,7 +2,7 @@
@use 'config' as *;
$negative-spacers-extra: if(sass($enable-negative-margins): negativify-map(map.merge($spacers, $spacers-extra)); else: null);
$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
// Named differently from config's `$utilities`: with `@use 'config' as *`,
// assigning to `$utilities` would overwrite the config module's variable
core/scss/bootstrap/_buttons.scss
+5 -5
View File
@@ -31,10 +31,10 @@
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
text-align: center;
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
white-space: $btn-white-space;
vertical-align: middle;
cursor: if(sass($enable-button-pointers): pointer; else: null);
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include border-radius(var(--#{$prefix}btn-border-radius));
@@ -44,7 +44,7 @@
&:hover {
color: var(--#{$prefix}btn-hover-color);
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
}
@@ -88,7 +88,7 @@
color: var(--#{$prefix}btn-active-color);
background-color: var(--#{$prefix}btn-active-bg);
// Remove CSS gradients if they're enabled
background-image: if(sass($enable-gradients): none; else: null);
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-active-border-color);
@include box-shadow(var(--#{$prefix}btn-active-shadow));
@@ -117,7 +117,7 @@
color: var(--#{$prefix}btn-disabled-color);
pointer-events: none;
background-color: var(--#{$prefix}btn-disabled-bg);
background-image: if(sass($enable-gradients): none; else: null);
background-image: if($enable-gradients, none, null);
border-color: var(--#{$prefix}btn-disabled-border-color);
opacity: var(--#{$prefix}btn-disabled-opacity);
@include box-shadow(none);
core/scss/bootstrap/_card.scss
+1 -1
View File
@@ -93,7 +93,7 @@
.card-link {
&:hover {
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
}
+ .card-link {
core/scss/bootstrap/_carousel.scss
+2 -2
View File
@@ -115,11 +115,11 @@
}
.carousel-control-prev {
left: 0;
background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)), null);
}
.carousel-control-next {
right: 0;
background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)), null);
}
// Icons for within
core/scss/bootstrap/_dropdown.scss
+3 -3
View File
@@ -188,7 +188,7 @@
font-weight: $font-weight-normal;
color: var(--#{$prefix}dropdown-link-color);
text-align: inherit; // For `<button>`s
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
@@ -197,7 +197,7 @@
&:hover,
&:focus {
color: var(--#{$prefix}dropdown-link-hover-color);
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
}
@@ -214,7 +214,7 @@
pointer-events: none;
background-color: transparent;
// Remove CSS gradients if they're enabled
background-image: if(sass($enable-gradients): none; else: null);
background-image: if($enable-gradients, none, null);
}
}
core/scss/bootstrap/_list-group.scss
+1 -1
View File
@@ -56,7 +56,7 @@
display: block;
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
color: var(--#{$prefix}list-group-color);
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}list-group-bg);
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
core/scss/bootstrap/_modal.scss
+1 -1
View File
@@ -214,7 +214,7 @@
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if(sass($infix != ''): $infix + '-down'; else: '');
$postfix: if($infix != '', $infix + '-down', '');
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
core/scss/bootstrap/_nav.scss
+2 -2
View File
@@ -29,7 +29,7 @@
@include font-size(var(--#{$prefix}nav-link-font-size));
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color);
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition);
@@ -37,7 +37,7 @@
&:hover,
&:focus {
color: var(--#{$prefix}nav-link-hover-color);
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
}
&:focus-visible {
core/scss/bootstrap/_navbar.scss
+3 -3
View File
@@ -9,7 +9,7 @@
.navbar {
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -71,13 +71,13 @@
margin-right: var(--#{$prefix}navbar-brand-margin-end);
@include font-size(var(--#{$prefix}navbar-brand-font-size));
color: var(--#{$prefix}navbar-brand-color);
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
&:hover,
&:focus {
color: var(--#{$prefix}navbar-brand-hover-color);
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
}
}
core/scss/bootstrap/_pagination.scss
+2 -2
View File
@@ -34,7 +34,7 @@
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
@include font-size(var(--#{$prefix}pagination-font-size));
color: var(--#{$prefix}pagination-color);
text-decoration: if(sass($link-decoration == none): null; else: none);
text-decoration: if($link-decoration == none, null, none);
background-color: var(--#{$prefix}pagination-bg);
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
@include transition($pagination-transition);
@@ -42,7 +42,7 @@
&:hover {
z-index: 2;
color: var(--#{$prefix}pagination-hover-color);
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--#{$prefix}pagination-hover-bg);
border-color: var(--#{$prefix}pagination-hover-border-color);
}
core/scss/bootstrap/forms/_form-control.scss
+1 -1
View File
@@ -61,7 +61,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(sass(math.unit($input-line-height) == ''): $input-line-height * 1em; else: $input-line-height);
height: if(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
core/scss/mixins/_functions.scss
+9 -9
View File
@@ -41,7 +41,7 @@
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if(sass($n > 1): list.nth($breakpoint-names, $n - 1); else: null);
@return if($n > 1, list.nth($breakpoint-names, $n - 1), null);
}
// escape-svg was defined here twice — the canonical copy lives in the
@@ -54,7 +54,7 @@
* @return {String} - The percentage representation of the value.
*/
@function to-percentage($value) {
@return if(sass(math.is-unitless($value)): math.percentage($value); else: $value);
@return if(math.is-unitless($value), math.percentage($value), $value);
}
/**
@@ -137,7 +137,7 @@
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: list.append($_args, if(sass($arg == '$key'): $key; else: if(sass($arg == '$value'): $value; else: $arg)));
$_args: list.append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
}
$_map: map.merge(
@@ -271,7 +271,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if(sass($l1 > $l2): divide($l1 + 0.05, $l2 + 0.05); else: divide($l2 + 0.05, $l1 + 0.05));
@return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
}
// Return WCAG2.2 relative luminance
@@ -285,7 +285,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
);
@each $name, $value in $rgb {
$value: if(sass(divide($value, 255) < 0.04045): divide(divide($value, 255), 12.92); else: list.nth($_luminance-list, $value + 1));
$value: if(divide($value, 255) < 0.04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
$rgb: map.merge(
$rgb,
(
@@ -315,7 +315,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if(sass($weight > 0): shade-color($color, $weight); else: tint-color($color, -$weight));
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// Return valid calc
@@ -332,7 +332,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
@return $value1 + $value2;
}
@return if(sass($return-calc == true): calc(#{$value1} + #{$value2}); else: $value1 + string.unquote(' + ') + $value2);
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(' + ') + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@@ -356,11 +356,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
$value2: string.unquote('(') + $value2 + string.unquote(')');
}
@return if(sass($return-calc == true): calc(#{$value1} - #{$value2}); else: $value1 + string.unquote(' - ') + $value2);
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(' - ') + $value2);
}
@function divide($dividend, $divisor, $precision: 10) {
$sign: if(sass($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0): 1; else: -1);
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 {
core/scss/mixins/_mixins.scss
+1 -1
View File
@@ -21,7 +21,7 @@
}
@mixin scrollbar {
$selector: if(sass(meta.type-of(&) != 'null'): '&'; else: '*');
$selector: if(meta.type-of(&) != 'null', '&', '*');
#{$selector} {
scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2) transparent;
}
core/scss/mixins/bootstrap/_breakpoints.scss
+4 -4
View File
@@ -16,13 +16,13 @@
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if(sass($n < list.length($breakpoint-names)): list.nth($breakpoint-names, $n + 1); else: null);
@return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map.get($breakpoints, $name);
@return if(sass($min != 0): $min; else: null);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width.
@@ -30,12 +30,12 @@
// `min-` and `max-` prefixes and viewports with fractional widths.
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map.get($breakpoints, $name);
@return if(sass($max and $max > 0): $max - .02; else: null);
@return if($max and $max > 0, $max - .02, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(sass(breakpoint-min($name, $breakpoints) == null): ''; else: '-#{$name}');
@return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
core/scss/mixins/bootstrap/_forms.scss
+3 -3
View File
@@ -10,12 +10,12 @@
@mixin form-validation-state-selector($state) {
@if ($state == 'valid' or $state == 'invalid') {
.was-validated #{if(sass(&): "&"; else: "")}:#{$state},
#{if(sass(&): "&"; else: "")}.is-#{$state} {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(sass(&): "&"; else: "")}.is-#{$state} {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
core/scss/mixins/bootstrap/_grid.scss
+2 -2
View File
@@ -22,7 +22,7 @@
}
@mixin make-col-ready() {
box-sizing: if(sass(meta.global-variable-exists('include-column-box-sizing') and $include-column-box-sizing): border-box; else: null);
box-sizing: if(meta.global-variable-exists('include-column-box-sizing') and $include-column-box-sizing, border-box, null);
flex-shrink: 0;
width: 100%;
max-width: 100%;
@@ -48,7 +48,7 @@
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns);
margin-left: if(sass($num == 0): 0; else: math.percentage($num));
margin-left: if($num == 0, 0, math.percentage($num));
}
@mixin row-cols($count) {
core/scss/mixins/bootstrap/_rfs.scss
+18 -18
View File
@@ -58,7 +58,7 @@ $enable-rfs: true !default;
$rfs-base-value-unit: math.unit($rfs-base-value);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if(sass($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0): 1; else: -1);
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
@if $dividend == 0 {
@@ -117,9 +117,9 @@ $rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
}
// Calculate the media query value
$rfs-mq-value: if(sass($rfs-breakpoint-unit == px): #{$rfs-breakpoint}px; else: #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if(sass($rfs-mode == max-media-query): max-width; else: min-width);
$rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else: min-height);
$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
// Internal mixin used to determine which media query needs to be used
@mixin _rfs-media-query {
@@ -188,7 +188,7 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
$values: if(sass(meta.type-of($values) != list): ($values); else: $values);
$values: if(meta.type-of($values) != list, ($values), $values);
$val: '';
@@ -198,14 +198,14 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
$val: $val + ' 0';
} @else {
// Cache $value unit
$unit: if(sass(meta.type-of($value) == 'number'): math.unit($value); else: false);
$unit: if(meta.type-of($value) == 'number', math.unit($value), false);
@if $unit == px {
// Convert to rem if needed
$val: $val + ' ' + if(sass($rfs-unit == rem): #{divide($value, $value * 0 + $rfs-rem-value)}rem; else: $value);
$val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
} @else if $unit == rem {
// Convert to px if needed
$val: $val + ' ' + if(sass($rfs-unit == px): #{divide($value, $value * 0 + 1) * $rfs-rem-value}px; else: $value);
$val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
} @else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
$val: $val + ' ' + $value;
@@ -220,7 +220,7 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
// Convert to list
$values: if(sass(meta.type-of($values) != list): ($values); else: $values);
$values: if(meta.type-of($values) != list, ($values), $values);
$val: '';
@@ -230,18 +230,18 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
$val: $val + ' 0';
} @else {
// Cache $value unit
$unit: if(sass(meta.type-of($value) == 'number'): math.unit($value); else: false);
$unit: if(meta.type-of($value) == 'number', math.unit($value), false);
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@if not $unit or $unit != px and $unit != rem {
$val: $val + ' ' + $value;
} @else {
// Remove unit from $value for calculations
$value: divide($value, $value * 0 + if(sass($unit == px): 1; else: divide(1, $rfs-rem-value)));
$value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if math.abs($value) <= $rfs-base-value or not $enable-rfs {
$val: $val + ' ' + if(sass($rfs-unit == rem): #{divide($value, $rfs-rem-value)}rem; else: #{$value}px);
$val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
} @else {
// Calculate the minimum value
$value-min: $rfs-base-value + divide(math.abs($value) - $rfs-base-value, $rfs-factor);
@@ -250,19 +250,19 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
$value-diff: math.abs($value) - $value-min;
// Base value formatting
$min-width: if(sass($rfs-unit == rem): #{divide($value-min, $rfs-rem-value)}rem; else: #{$value-min}px);
$min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if(sass($value < 0): -$min-width; else: $min-width);
$min-width: if($value < 0, -$min-width, $min-width);
// Use `vmin` if two-dimensional is enabled
$variable-unit: if(sass($rfs-two-dimensional): vmin; else: vw);
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + ' calc(' + $min-width + if(sass($value < 0): ' - '; else: ' + ') + $variable-width + ')';
$val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
}
}
}
@@ -283,7 +283,7 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
#{$property}: $val;
} @else {
@include _rfs-rule() {
#{$property}: if(sass($rfs-mode == max-media-query): $val; else: $fluid-val);
#{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
// Include safari iframe resize fix if needed
min-width: if(
@@ -295,7 +295,7 @@ $rfs-mq-property-height: if(sass($rfs-mode == max-media-query): max-height; else
}
@include _rfs-media-query-rule() {
#{$property}: if(sass($rfs-mode == max-media-query): $fluid-val; else: $val);
#{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
}
}
}
core/scss/mixins/bootstrap/_utilities.scss
+9 -9
View File
@@ -27,19 +27,19 @@
}
// Use custom class if present
$property-class: if(sass(map.has-key($utility, class)): map.get($utility, class); else: list.nth($properties, 1));
$property-class: if(sass($property-class == null): ''; else: $property-class);
$property-class: if(map.has-key($utility, class), map.get($utility, class), list.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(sass(map.has-key($utility, css-variable-name)): map.get($utility, css-variable-name); else: map.get($utility, 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(sass(map.has-key($utility, state)): map.get($utility, state); else: ());
$state: if(map.has-key($utility, state), map.get($utility, state), ());
$infix: if(sass($property-class == '' and string.slice($infix, 1, 1) == '-'): string.slice($infix, 2); else: $infix);
$infix: if($property-class == '' and string.slice($infix, 1, 1) == '-', string.slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if(sass($key): if(sass($property-class == '' and $infix == ''): ''; else: '-') + $key; else: '');
$property-class-modifier: if($key, if($property-class == '' and $infix == '', '', '-') + $key, '');
@if map.get($utility, rfs) {
// Inside the media query
@@ -47,7 +47,7 @@
$val: rfs-value($value);
// Do not render anything if fluid and non fluid values are the same
$value: if(sass($val == rfs-fluid-value($value)): null; else: $val);
$value: if($val == rfs-fluid-value($value), null, $val);
} @else {
$value: rfs-fluid-value($value);
}
@@ -80,7 +80,7 @@
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if(sass($enable-important-utilities): !important; else: null);
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
@@ -92,7 +92,7 @@
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if(sass($enable-important-utilities): !important; else: null);
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
}
core/scss/ui/_grid.scss
+2 -2
View File
@@ -67,7 +67,7 @@
$spacers
)
{
$name-prefixed: if(sass($name == null): null; else: '-#{$name}');
$name-prefixed: if($name == null, null, '-#{$name}');
.space-y#{$name-prefixed} {
display: flex;
@@ -90,7 +90,7 @@
$spacers
)
{
$name-prefixed: if(sass($name == null): null; else: '-#{$name}');
$name-prefixed: if($name == null, null, '-#{$name}');
.divide-y#{$name-prefixed} {
> :not(template) ~ :not(template) {
core/scss/utils/_colors.scss
+5 -5
View File
@@ -39,8 +39,8 @@
}
.text-bg-#{'' + $color} {
color: color-contrast($value) if(sass($enable-important-utilities): !important; else: null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
.link-#{'' + $color} {
@@ -50,9 +50,9 @@
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
}