Skip to content

Commit 5a20187

Browse files
VasilyStrelyaevVasilyStrelyaev
committed
migrate to latest sass
1 parent 066f97f commit 5a20187

137 files changed

Lines changed: 1737 additions & 1644 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/devextreme-scss/build/gulp-data-uri.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,12 @@ const handler = (_, svgEncoding, fileName) => {
2727
};
2828

2929
const sassFunction = (args) => {
30-
const hasEncoding = args.getLength() === 2;
31-
const encoding = hasEncoding ? args.getValue(0).getValue() : null;
32-
const url = hasEncoding ? args.getValue(1).getValue() : args.getValue(0).getValue();
30+
debugger;
31+
const getTextFromSass = (sassValue) => sassValue.assertString().text;
32+
const argList = args[0].asList;
33+
const hasEncoding = argList.size === 2;
34+
const encoding = hasEncoding ? getTextFromSass(argList.get(0)) : null;
35+
const url = getTextFromSass(argList.get(hasEncoding ? 1 : 0));
3336

3437
return new sass.SassString(handler(null, encoding, url), { quotes: false });
3538
};

‎packages/devextreme-scss/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
"gulp-cache": "1.1.3",
99
"gulp-plumber": "1.2.1",
1010
"gulp-replace": "0.6.1",
11-
"gulp-sass": "5.1.0",
11+
"gulp-sass": "6.0.1",
1212
"gulp-shell": "0.8.0",
1313
"minimist": "1.2.8",
14-
"sass-embedded": "1.59.2",
14+
"sass-embedded": "1.93.2",
1515
"stylelint": "15.11.0",
1616
"stylelint-config-standard-scss": "9.0.0",
1717
"stylelint-scss": "6.10.0",

‎packages/devextreme-scss/scss/widgets/base/_gridBase.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:math';
12
@use "./mixins" as *;
23

34
// adduse
@@ -662,7 +663,7 @@
662663

663664
.dx-sort-indicator,
664665
.dx-header-filter-indicator {
665-
max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin)});
666+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)});
666667

667668
&.dx-text-content-alignment-left {
668669
margin-right: $grid-text-content-margin;
@@ -673,31 +674,31 @@
673674
}
674675

675676
&.dx-text-content-alignment-left.dx-text-content-alignment-right {
676-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
677+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
677678
}
678679
}
679680

680681
.dx-sort-indicator.dx-header-filter-indicator {
681-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
682+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
682683
}
683684

684685
.dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
685-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
686+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
686687
}
687688

688689
.dx-sort-indicator.dx-sort-index-indicator {
689-
max-width: calc(100% - #{round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
690+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
690691

691692
&.dx-header-filter-indicator {
692-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
693+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
693694
}
694695

695696
&.dx-text-content-alignment-left.dx-text-content-alignment-right {
696-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
697+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
697698
}
698699

699700
&.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
700-
max-width: calc(100% - #{round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
701+
max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
701702
}
702703
}
703704
}

‎packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
@use "sass:list";
12
@use "sass:math";
3+
@use "sass:selector";
24

35
// adduse
46

@@ -52,7 +54,7 @@ $transparent-border: 1px solid transparent;
5254
counter-increment: list-#{$counter};
5355

5456
&::before {
55-
content: counter(list-#{$counter}, nth($list-style, ($counter % 3) + 1)) ". ";
57+
content: counter(list-#{$counter}, list.nth($list-style, ($counter % 3) + 1)) ". ";
5658
}
5759
}
5860

@@ -242,7 +244,7 @@ $transparent-border: 1px solid transparent;
242244
counter-increment: list-0;
243245

244246
&::before {
245-
content: counter(list-0, nth($list-style, 1)) ". ";
247+
content: counter(list-0, list.nth($list-style, 1)) ". ";
246248
}
247249
}
248250

@@ -430,7 +432,7 @@ $transparent-border: 1px solid transparent;
430432
height: $resize-handle-size;
431433
border-radius: 0;
432434

433-
@at-root #{selector-append(".dx-touch-device", &)} {
435+
@at-root #{selector.append(".dx-touch-device", &)} {
434436
width: $touch-resize-handle-size;
435437
height: $touch-resize-handle-size;
436438
}
@@ -440,7 +442,7 @@ $transparent-border: 1px solid transparent;
440442
.dx-resizable-handle-corner-bottom-right {
441443
right: -$half-resize-handle-size;
442444

443-
@at-root #{selector-append(".dx-touch-device", &)} {
445+
@at-root #{selector.append(".dx-touch-device", &)} {
444446
right: -$half-touch-resize-handle-size;
445447
}
446448
}
@@ -449,7 +451,7 @@ $transparent-border: 1px solid transparent;
449451
.dx-resizable-handle-corner-bottom-left {
450452
left: -$half-resize-handle-size;
451453

452-
@at-root #{selector-append(".dx-touch-device", &)} {
454+
@at-root #{selector.append(".dx-touch-device", &)} {
453455
left: -$half-touch-resize-handle-size;
454456
}
455457
}
@@ -458,7 +460,7 @@ $transparent-border: 1px solid transparent;
458460
.dx-resizable-handle-corner-top-left {
459461
top: -$half-resize-handle-size;
460462

461-
@at-root #{selector-append(".dx-touch-device", &)} {
463+
@at-root #{selector.append(".dx-touch-device", &)} {
462464
top: -$half-touch-resize-handle-size;
463465
}
464466
}
@@ -467,7 +469,7 @@ $transparent-border: 1px solid transparent;
467469
.dx-resizable-handle-corner-bottom-left {
468470
bottom: -$half-resize-handle-size;
469471

470-
@at-root #{selector-append(".dx-touch-device", &)} {
472+
@at-root #{selector.append(".dx-touch-device", &)} {
471473
bottom: -$half-touch-resize-handle-size;
472474
}
473475
}
@@ -483,7 +485,7 @@ $transparent-border: 1px solid transparent;
483485
height: $resize-handle-size;
484486
border: 1px solid white;
485487

486-
@at-root #{selector-append(".dx-touch-device", &)} {
488+
@at-root #{selector.append(".dx-touch-device", &)} {
487489
width: $touch-resize-handle-size;
488490
height: $touch-resize-handle-size;
489491
}
@@ -495,7 +497,7 @@ $transparent-border: 1px solid transparent;
495497
&::after {
496498
top: calc(50% - #{$half-resize-handle-size});
497499

498-
@at-root #{selector-append(".dx-touch-device", &)} {
500+
@at-root #{selector.append(".dx-touch-device", &)} {
499501
top: calc(50% - #{$half-touch-resize-handle-size});
500502
}
501503
}
@@ -506,7 +508,7 @@ $transparent-border: 1px solid transparent;
506508
&::after {
507509
left: calc(50% - #{$half-resize-handle-size});
508510

509-
@at-root #{selector-append(".dx-touch-device", &)} {
511+
@at-root #{selector.append(".dx-touch-device", &)} {
510512
left: calc(50% - #{$half-touch-resize-handle-size});
511513
}
512514
}
@@ -515,31 +517,31 @@ $transparent-border: 1px solid transparent;
515517
.dx-resizable-handle-right::after {
516518
right: -$half-resize-handle-size;
517519

518-
@at-root #{selector-append(".dx-touch-device", &)} {
520+
@at-root #{selector.append(".dx-touch-device", &)} {
519521
right: -$half-touch-resize-handle-size;
520522
}
521523
}
522524

523525
.dx-resizable-handle-left::after {
524526
left: -$half-resize-handle-size;
525527

526-
@at-root #{selector-append(".dx-touch-device", &)} {
528+
@at-root #{selector.append(".dx-touch-device", &)} {
527529
left: -$half-touch-resize-handle-size;
528530
}
529531
}
530532

531533
.dx-resizable-handle-top::after {
532534
top: -$half-resize-handle-size;
533535

534-
@at-root #{selector-append(".dx-touch-device", &)} {
536+
@at-root #{selector.append(".dx-touch-device", &)} {
535537
top: -$half-touch-resize-handle-size;
536538
}
537539
}
538540

539541
.dx-resizable-handle-bottom::after {
540542
bottom: -$half-resize-handle-size;
541543

542-
@at-root #{selector-append(".dx-touch-device", &)} {
544+
@at-root #{selector.append(".dx-touch-device", &)} {
543545
bottom: -$half-touch-resize-handle-size;
544546
}
545547
}

‎packages/devextreme-scss/scss/widgets/base/_icons.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "sass:math";
22
@use "sass:map";
3+
@use "sass:selector";
34

45
.dx-icon-plus,
56
.dx-icon-overflow,
@@ -178,7 +179,7 @@
178179
@mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) {
179180
$icon-paddings-dirty: $container-size - $icon-size;
180181
$icon-paddings: $icon-paddings-dirty - $borders-size;
181-
$icon-padding: floor(math.div($icon-paddings, 2));
182+
$icon-padding: math.floor(math.div($icon-paddings, 2));
182183

183184
// Geometry
184185
width: $container-size;
@@ -213,7 +214,7 @@
213214
}
214215

215216
@if $position == relative {
216-
@at-root #{selector-append(".dx-rtl", &)},
217+
@at-root #{selector.append(".dx-rtl", &)},
217218
.dx-rtl & {
218219
&::before {
219220
left: 0;

‎packages/devextreme-scss/scss/widgets/base/_popup.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:selector";
12
@use "./mixins" as *;
23

34
// adduse
@@ -56,7 +57,7 @@
5657
display: flex;
5758
flex-wrap: wrap;
5859

59-
@at-root #{selector-append(".dx-overlay-wrapper .dx-overlay-content", &)} {
60+
@at-root #{selector.append(".dx-overlay-wrapper .dx-overlay-content", &)} {
6061
> .dx-popup-title,
6162
> .dx-popup-bottom {
6263
width: 100%;

‎packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:math";
2+
@use "sass:color";
23

34
.dx-fa-button .dx-overlay-content {
45
border-radius: 50%;
@@ -38,15 +39,15 @@
3839
box-shadow: $speed-dial-action-shadow;
3940

4041
&.dx-state-hover {
41-
background-color: darken($button-default-bg, 10%);
42+
background-color: color.adjust($button-default-bg, $lightness: -10%, $space: hsl);
4243

4344
.dx-fa-button-icon {
4445
background-color: transparent;
4546
}
4647
}
4748

4849
&.dx-state-active {
49-
background-color: darken($button-default-bg, 15%);
50+
background-color: color.adjust($button-default-bg, $lightness: -15%, $space: hsl);
5051

5152
.dx-fa-button-icon {
5253
background-color: transparent;

‎packages/devextreme-scss/scss/widgets/base/_tagBox.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "./mixins" as *;
2+
@use "sass:selector";
23

34
// adduse
45

@@ -57,7 +58,7 @@
5758
}
5859
}
5960

60-
@at-root #{selector-append(".dx-texteditor-container", &)} {
61+
@at-root #{selector.append(".dx-texteditor-container", &)} {
6162
white-space: normal;
6263
}
6364
}

‎packages/devextreme-scss/scss/widgets/base/chat/_mixins.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
@import 'layout/chat/mixins';
2-
@import 'layout/chat-avatar/mixins';
3-
@import 'layout/chat-alertlist/mixins';
4-
@import 'layout/chat-header/mixins';
5-
@import 'layout/chat-messagebox/mixins';
6-
@import 'layout/chat-messagebox-editing-preview/mixins';
7-
@import 'layout/chat-messagebubble/mixins';
8-
@import 'layout/chat-messagegroup/mixins';
9-
@import 'layout/chat-messagelist/mixins';
10-
@import 'layout/chat-typingindicator/mixins';
11-
@import 'layout/chat-confirmationpopup/mixins';
1+
@forward 'layout/chat/mixins';
2+
@forward 'layout/chat-avatar/mixins';
3+
@forward 'layout/chat-alertlist/mixins';
4+
@forward 'layout/chat-header/mixins';
5+
@forward 'layout/chat-messagebox/mixins';
6+
@forward 'layout/chat-messagebox-editing-preview/mixins';
7+
@forward 'layout/chat-messagebubble/mixins';
8+
@forward 'layout/chat-messagegroup/mixins';
9+
@forward 'layout/chat-messagelist/mixins';
10+
@forward 'layout/chat-typingindicator/mixins';
11+
@forward 'layout/chat-confirmationpopup/mixins';

‎packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:selector";
12
@use "../mixins" as *;
23
@use "./mixins" as *;
34
@use "../textEditor/mixins" as *;
@@ -76,7 +77,7 @@
7677
white-space: nowrap;
7778
}
7879

79-
@at-root #{selector-append(".dx-rtl", &)},
80+
@at-root #{selector.append(".dx-rtl", &)},
8081
.dx-rtl & {
8182
float: left;
8283
}

0 commit comments

Comments
 (0)