Skip to content

Commit 173b239

Browse files
xJuvixJuvi
authored
chore: scss: fix sass deprecations (#989)
1 parent 639362b commit 173b239

9 files changed

Lines changed: 37 additions & 20 deletions

File tree

‎doc_src/css/variables.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
// colors
24
$min-contrast-ratio: 1.5 !default;
35
$text-muted-opacity: .7 !default;
@@ -76,8 +78,8 @@ $danger: $red !default;
7678

7779

7880
// Dark mode
79-
$dark-mode-darken: darken($dark, 2%) !default;
80-
$dark-mode-lighten: lighten($dark, 2%) !default;
81+
$dark-mode-darken: color.adjust($dark, $lightness: -2%) !default;
82+
$dark-mode-lighten: color.adjust($dark, $lightness: 2%) !default;
8183
$dark-mode-text: $light;
8284

8385
// Borders

‎src/plugins/clear_button/plugin.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* stylelint-disable function-name-case */
2+
@use "sass:meta";
23

34
.plugin-clear_button {
45
--ts-pr-clear-button: 1em;
@@ -18,7 +19,7 @@
1819
&.form-select .clear-button,
1920
&.single .clear-button {
2021

21-
@if variable-exists(select-padding-dropdown-item-x) {
22+
@if meta.variable-exists("select-padding-dropdown-item-x") {
2223
right: Max(var(--ts-pr-caret), #{$select-padding-dropdown-item-x});
2324
}
2425
@else{

‎src/plugins/dropdown_header/plugin.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
.#{$select-ns}-wrapper{
24
.dropdown-header {
35
position: relative;
@@ -19,6 +21,6 @@
1921
}
2022

2123
.dropdown-header-close:hover {
22-
color: darken($select-color-text, 25%);
24+
color: color.adjust($select-color-text, $lightness: -25%)
2325
}
2426
}

‎src/plugins/dropdown_input/plugin.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
@use "sass:meta";
2+
13
.plugin-dropdown_input{
24

35
&.focus.dropdown-active .#{$select-ns}-control{
46
box-shadow: none;
57
border: $select-border;
6-
@if variable-exists(input-box-shadow) {
8+
@if meta.variable-exists("input-box-shadow") {
79
box-shadow: $input-box-shadow;
810
}
911
}
@@ -19,7 +21,7 @@
1921
}
2022

2123
&.focus .#{$select-ns}-dropdown .dropdown-input{
22-
@if variable-exists(input-focus-border-color) {
24+
@if meta.variable-exists("input-focus-border-color") {
2325
border-color: $input-focus-border-color;
2426
outline: 0;
2527
@if $enable-shadows {

‎src/plugins/remove_button/plugin.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
.#{$select-ns}-wrapper.plugin-remove_button{
24
.item {
35
display: inline-flex;
@@ -46,7 +48,7 @@
4648
}
4749

4850
&.disabled .item .remove {
49-
border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
51+
border-left-color: color.adjust($select-color-item-border, $saturation: -100%, $lightness: $select-lighten-disabled-item-border);
5052
}
5153
}
5254

@@ -65,6 +67,6 @@
6567
}
6668

6769
&.disabled .item .remove {
68-
border-right-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
70+
border-right-color: color.adjust($select-color-item-border, $saturation: -100%, $lightness: $select-lighten-disabled-item-border);
6971
}
7072
}

‎src/scss/_items.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
.#{$select-ns}-control {
24
border: $select-border;
35
padding: $select-padding-y $select-padding-x;
@@ -55,9 +57,10 @@
5557

5658
.#{$select-ns}-wrapper.multi.disabled & > div {
5759
&, &.active {
58-
color: lighten(desaturate($select-color-item-text, 100%), $select-lighten-disabled-item-text);
59-
background: lighten(desaturate($select-color-item, 100%), $select-lighten-disabled-item);
60-
border: $select-width-item-border solid lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
60+
color: color.adjust($select-color-item-text, $saturation: -100%, $lightness: $select-lighten-disabled-item-text);
61+
background: color.adjust($select-color-item, $saturation: -100%, $lightness: $select-lighten-disabled-item);
62+
border: $select-width-item-border solid color.adjust($select-color-item-border, $saturation: -100%, $lightness: $select-lighten-disabled-item-border);
63+
6164
}
6265
}
6366

‎src/scss/tom-select.bootstrap4.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
* Tom Select Bootstrap 4
33
*/
44

5+
@use "sass:color";
6+
57
// Import Bootstrap 4 functions and variables
68
$state-valid: map-get($form-validation-states,'valid') !default;
79
$state-invalid: map-get($form-validation-states,'invalid') !default;
@@ -15,7 +17,7 @@ $select-color-highlight: rgba(255, 237, 40, 40%) !default;
1517
$select-color-input: $input-bg !default;
1618
$select-color-input-full: $input-bg !default;
1719
$select-color-input-error: map-get($state-invalid,'color') !default;
18-
$select-color-input-error-focus: darken($select-color-input-error, 10%) !default;
20+
$select-color-input-error-focus: color.adjust($select-color-input-error, $lightness: -10%) !default;
1921
$select-color-disabled: $input-disabled-bg !default;
2022
$select-color-item: #efefef !default;
2123
$select-color-item-border: $border-color !default;
@@ -97,12 +99,12 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
9799

98100
.#{$select-ns}-control {
99101
min-height: $input-height;
100-
@include box-shadow($input-box-shadow);
101-
@include transition($input-transition);
102-
103102
display:flex;
104103
align-items: center;
105104

105+
@include box-shadow($input-box-shadow);
106+
@include transition($input-transition);
107+
106108
.focus & {
107109
border-color: $input-focus-border-color;
108110
outline: 0;

‎src/scss/tom-select.bootstrap5.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,12 +122,12 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default;
122122
}
123123

124124
.#{$select-ns}-control {
125-
@include box-shadow($input-box-shadow);
126-
@include transition($input-transition);
127-
128125
display:flex;
129126
align-items: center;
130127

128+
@include box-shadow($input-box-shadow);
129+
@include transition($input-transition);
130+
131131
.focus & {
132132
border-color: $input-focus-border-color;
133133
outline: 0;

‎src/scss/tom-select.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
*
1414
*/
1515

16+
@use "sass:color";
17+
@use "sass:math";
18+
1619
// base styles
1720
$select-ns: 'ts' !default;
1821
$select-font-family: inherit !default;
@@ -35,7 +38,7 @@ $select-color-dropdown-border: $select-color-border !default;
3538
$select-color-dropdown-border-top: #f0f0f0 !default;
3639
$select-color-dropdown-item-active: #f5fafd !default;
3740
$select-color-dropdown-item-active-text: #495c68 !default;
38-
$select-color-dropdown-item-create-text: rgba(red($select-color-text), green($select-color-text), blue($select-color-text), 50%) !default;
41+
$select-color-dropdown-item-create-text: color.change($select-color-text, $alpha: 0.5) !default;
3942
$select-color-dropdown-item-create-active-text: $select-color-dropdown-item-active-text !default;
4043
$select-color-optgroup: $select-color-dropdown !default;
4144
$select-color-optgroup-text: $select-color-text !default;
@@ -118,7 +121,7 @@ $select-spinner-border-color: $select-color-border !default;
118121
display: block;
119122
position: absolute;
120123
top: 50%;
121-
margin-top: round(-0.5 * $select-arrow-size);
124+
margin-top: math.round(-0.5 * $select-arrow-size);
122125
width: 0;
123126
height: 0;
124127
border-style: solid;

0 commit comments

Comments
 (0)