@use 'sass:math';
+@use 'sass:color';
+
@use '_variables' as *;
@import '_bootstrap-mixins';
}
@mixin danger-button {
- $color: lighten($color: #c54130, $amount: 10);
+ $color: color.adjust($color: #c54130, $lightness: 10%);
$text: #fff6f5;
@include button-focus(scale-color($color, $alpha: -95%));
&:focus,
&[disabled],
&.disabled {
- background-color: lighten($color: $color, $amount: 10);
+ background-color: color.adjust($color: $color, $lightness: 10%);
}
&[disabled],
transition: width 0.6s ease;
&.red {
- background-color: lighten($color: #c54130, $amount: 10);
+ background-color: color.adjust($color: #c54130, $lightness: 10%);
}
}
}
> div {
box-sizing: border-box;
- flex: 0 0 percentage(math.div(1, 3));
+ flex: 0 0 math.percentage(math.div(1, 3));
padding: 0 5px;
margin-bottom: 10px;
// an immediate's parent size. This allows to set a ratio without explicit
// dimensions, as width/height cannot be computed from each other.
@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
- $padding-percent: percentage($inverted-ratio);
+ $padding-percent: math.percentage($inverted-ratio);
position: relative;
height: 0;
@mixin on-small-main-col () {
:host-context(.main-col:not(.expanded)) {
- @media screen and (max-width: $small-view + $menu-width) {
+ @media screen and (max-width: #{$small-view + $menu-width}) {
@content;
}
}
@mixin on-mobile-main-col () {
:host-context(.main-col:not(.expanded)) {
- @media screen and (max-width: $mobile-view + $menu-width) {
+ @media screen and (max-width: #{$mobile-view + $menu-width}) {
@content;
}
}