@progress/kendo-theme-utils 6.1.1-dev.1 → 6.1.1-dev.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.scss +818 -129
- package/dist/meta/sassdoc-data.json +3033 -0
- package/dist/meta/sassdoc-raw-data.json +3022 -0
- package/dist/meta/variables.json +58 -0
- package/dist/meta/variables.scss +10 -0
- package/package.json +3 -3
- package/scss/flex-grid/_order.scss +0 -5
package/dist/all.scss
CHANGED
|
@@ -1,83 +1,188 @@
|
|
|
1
1
|
// This file is auto-generated. Do not edit!
|
|
2
|
-
// baka:source
|
|
2
|
+
// baka:source scss/all.scss
|
|
3
3
|
|
|
4
|
-
// #region @import "./index.import.scss"; ->
|
|
5
|
-
// #region @import "./_functions.scss"; ->
|
|
6
|
-
// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; ->
|
|
7
|
-
// #region @import "../_variables.scss"; ->
|
|
4
|
+
// #region @import "./index.import.scss"; -> scss/index.import.scss
|
|
5
|
+
// #region @import "./_functions.scss"; -> scss/_functions.scss
|
|
6
|
+
// #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
|
|
7
|
+
// #region @import "../_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
|
|
8
8
|
// Equilateral triangle variables
|
|
9
9
|
$equilateral-index: 1.7320508076 !default;
|
|
10
10
|
$equilateral-height: .8660254038 !default;
|
|
11
11
|
|
|
12
12
|
// #endregion
|
|
13
13
|
|
|
14
|
-
// #region @import "./_color.import.scss"; ->
|
|
14
|
+
// #region @import "./_color.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
|
|
15
|
+
/// Returns the alpha channel of a color.
|
|
16
|
+
/// @param {Color} $color - The color to get the alpha channel for.
|
|
17
|
+
/// @return {Number} - The alpha channel of the color.
|
|
18
|
+
///
|
|
19
|
+
/// @example scss - Usage
|
|
20
|
+
/// @debug k-color-alpha( rgba( 0, 0, 0, 0.5 ) ); // => 0.5
|
|
21
|
+
/// @debug k-color-alpha( #000 ); // => 1
|
|
15
22
|
@function k-color-alpha( $color ) {
|
|
16
23
|
@return alpha( $color );
|
|
17
24
|
}
|
|
18
25
|
|
|
26
|
+
/// Returns the red channel of a color.
|
|
27
|
+
/// @param {Color} $color - The color to get the red channel for.
|
|
28
|
+
/// @return {Number} - The red channel of the color.
|
|
29
|
+
///
|
|
30
|
+
/// @example scss - Usage
|
|
31
|
+
/// @debug k-color-red( #ff0000 ); // => 255
|
|
19
32
|
@function k-color-red( $color ) {
|
|
20
33
|
@return red( $color );
|
|
21
34
|
}
|
|
22
35
|
|
|
36
|
+
/// Returns the green channel of a color.
|
|
37
|
+
/// @param {Color} $color - The color to get the green channel for.
|
|
38
|
+
/// @return {Number} - The green channel of the color.
|
|
39
|
+
///
|
|
40
|
+
/// @example scss - Usage
|
|
41
|
+
/// @debug k-color-green( #00ff00 ); // => 255
|
|
23
42
|
@function k-color-green( $color ) {
|
|
24
43
|
@return green( $color );
|
|
25
44
|
}
|
|
26
45
|
|
|
46
|
+
/// Returns the blue channel of a color.
|
|
47
|
+
/// @param {Color} $color - The color to get the blue channel for.
|
|
48
|
+
/// @return {Number} - The blue channel of the color.
|
|
49
|
+
///
|
|
50
|
+
/// @example scss - Usage
|
|
51
|
+
/// @debug k-color-blue( #0000ff ); // => 255
|
|
27
52
|
@function k-color-blue( $color ) {
|
|
28
53
|
@return blue( $color );
|
|
29
54
|
}
|
|
30
55
|
|
|
56
|
+
/// Returns the hue of a color.
|
|
57
|
+
/// @param {Color} $color - The color to get the hue for.
|
|
58
|
+
/// @return {Number} - The hue of the color.
|
|
59
|
+
///
|
|
60
|
+
/// @example scss - Usage
|
|
61
|
+
/// @debug k-color-hue( #e1d7d2 ); // => 20deg
|
|
31
62
|
@function k-color-hue( $color ) {
|
|
32
63
|
@return hue( $color );
|
|
33
64
|
}
|
|
34
65
|
|
|
66
|
+
/// Returns the saturation of a color.
|
|
67
|
+
/// @param {Color} $color - The color to get the saturation for.
|
|
68
|
+
/// @return {Number} - The saturation of the color.
|
|
69
|
+
///
|
|
70
|
+
/// @example scss - Usage
|
|
71
|
+
/// @debug k-color-saturation( #e1d7d2 ); // => 20%
|
|
35
72
|
@function k-color-saturation( $color ) {
|
|
36
73
|
@return saturation( $color );
|
|
37
74
|
}
|
|
38
75
|
|
|
76
|
+
/// Returns the lightness of a color.
|
|
77
|
+
/// @param {Color} $color - The color to get the lightness for.
|
|
78
|
+
/// @return {Number} - The lightness of the color.
|
|
79
|
+
///
|
|
80
|
+
/// @example scss - Usage
|
|
81
|
+
/// @debug k-color-lightness( #e1d7d2 ); // => 80%
|
|
39
82
|
@function k-color-lightness( $color ) {
|
|
40
83
|
@return lightness( $color );
|
|
41
84
|
}
|
|
42
85
|
|
|
86
|
+
/// Returns a color that is a mix of two colors.
|
|
87
|
+
/// @param {Color} $color1 - The first color.
|
|
88
|
+
/// @param {Color} $color2 - The second color.
|
|
89
|
+
/// @param {Number} $weight - The weight of the first color in the mix.
|
|
90
|
+
/// @return {Color} - The mixed color.
|
|
91
|
+
///
|
|
92
|
+
/// @example scss - Usage
|
|
93
|
+
/// @debug k-color-mix( #f00, #00f ); // => #800080
|
|
43
94
|
@function k-color-mix( $color1, $color2, $weight: 50% ) {
|
|
44
95
|
@return mix( $color1, $color2, $weight );
|
|
45
96
|
}
|
|
46
97
|
|
|
98
|
+
/// Makes a color darker by decreasing its lightness.
|
|
99
|
+
/// @param {Color} $color - The color to darken.
|
|
100
|
+
/// @param {Number} $amount - The amount to darken the color.
|
|
101
|
+
/// @return {Color} - The darkened color.
|
|
102
|
+
///
|
|
103
|
+
/// @example scss - Usage
|
|
104
|
+
/// @debug k-color-darken( #f00, 10% ); // => #e60000
|
|
47
105
|
@function k-color-darken( $color, $amount) {
|
|
48
106
|
@return darken( $color, $amount );
|
|
49
107
|
}
|
|
50
108
|
|
|
109
|
+
/// Makes a color lighter by increasing its lightness.
|
|
110
|
+
/// @param {Color} $color - The color to lighten.
|
|
111
|
+
/// @param {Number} $amount - The amount to lighten the color.
|
|
112
|
+
/// @return {Color} - The lightened color.
|
|
113
|
+
///
|
|
114
|
+
/// @example scss - Usage
|
|
115
|
+
/// @debug k-color-lighten( #f00, 10% ); // => #ff1a1a
|
|
51
116
|
@function k-color-lighten( $color, $amount) {
|
|
52
117
|
@return lighten( $color, $amount );
|
|
53
118
|
}
|
|
54
119
|
|
|
120
|
+
/// Increases or decreases the hue of a color.
|
|
121
|
+
/// @param {Color} $color - The color to adjust the hue for.
|
|
122
|
+
/// @param {Number} $degrees - The amount to adjust the hue.
|
|
123
|
+
/// @return {Color} - The adjusted color.
|
|
124
|
+
///
|
|
125
|
+
/// @example scss - Usage
|
|
126
|
+
/// @debug k-color-adjust-hue( #f00, 10deg ); // => #ff1a00
|
|
55
127
|
@function k-color-adjust-hue( $color, $degrees ) {
|
|
56
128
|
@return adjust-hue( $color, $degrees );
|
|
57
129
|
}
|
|
58
130
|
|
|
131
|
+
/// Increases the saturation of a color.
|
|
132
|
+
/// @param {Color} $color - The color to saturate.
|
|
133
|
+
/// @param {Number} $amount - The amount to saturate the color.
|
|
134
|
+
/// @return {Color} - The saturated color.
|
|
135
|
+
///
|
|
136
|
+
/// @example scss - Usage
|
|
137
|
+
/// @debug k-color-saturate( #f00, 10% ); // => #ff3333
|
|
59
138
|
@function k-color-saturate( $color, $amount ) {
|
|
60
139
|
@return saturate( $color, $amount );
|
|
61
140
|
}
|
|
62
141
|
|
|
142
|
+
/// Decreases the saturation of a color.
|
|
143
|
+
/// @param {Color} $color - The color to desaturate.
|
|
144
|
+
/// @param {Number} $amount - The amount to desaturate the color.
|
|
145
|
+
/// @return {Color} - The desaturated color.
|
|
146
|
+
///
|
|
147
|
+
/// @example scss - Usage
|
|
148
|
+
/// @debug k-color-desaturate( #f00, 10% ); // => #e60000
|
|
63
149
|
@function k-color-desaturate( $color, $amount ) {
|
|
64
150
|
@return desaturate( $color, $amount );
|
|
65
151
|
}
|
|
66
152
|
|
|
153
|
+
/// Returns a gray color with the same lightness as the input color.
|
|
154
|
+
/// @param {Color} $color - The color to convert to grayscale.
|
|
155
|
+
/// @return {Color} - The grayscale color.
|
|
156
|
+
///
|
|
157
|
+
/// @example scss - Usage
|
|
158
|
+
/// @debug k-color-grayscale( #f00 ); // => #808080
|
|
67
159
|
@function k-color-grayscale( $color ) {
|
|
68
160
|
@return grayscale( $color );
|
|
69
161
|
}
|
|
70
162
|
|
|
163
|
+
/// Returns the RGB complement of a color. This identical to adjusting the hue
|
|
164
|
+
/// by 180 degrees.
|
|
165
|
+
/// @param {Color} $color - The color to get the complement for.
|
|
166
|
+
/// @return {Color} - The complement color.
|
|
167
|
+
///
|
|
168
|
+
/// @example scss - Usage
|
|
169
|
+
/// @debug k-color-complement( #f00 ); // => #00ffff
|
|
71
170
|
@function k-color-complement( $color ) {
|
|
72
171
|
@return complement( $color );
|
|
73
172
|
}
|
|
74
173
|
|
|
174
|
+
/// Returns the inverse of a color.
|
|
175
|
+
/// @param {Color} $color - The color to invert.
|
|
176
|
+
/// @return {Color} - The inverted color.
|
|
177
|
+
///
|
|
178
|
+
/// @example scss - Usage
|
|
179
|
+
/// @debug k-color-invert( #f00 ); // => #00ffff
|
|
75
180
|
@function k-color-invert( $color ) {
|
|
76
181
|
@return invert( $color );
|
|
77
182
|
}
|
|
78
183
|
|
|
79
184
|
// #endregion
|
|
80
|
-
// #region @import "./_color-contrast.import.scss"; ->
|
|
185
|
+
// #region @import "./_color-contrast.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color-contrast.import.scss
|
|
81
186
|
// Adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
|
|
82
187
|
// Adapted from https://github.com/twbs/bootstrap/commit/03908ea37a55eaa44c12ce5694dddc1630c980b3
|
|
83
188
|
|
|
@@ -351,17 +456,31 @@ $_linear-channel-values: (
|
|
|
351
456
|
1
|
|
352
457
|
);
|
|
353
458
|
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
459
|
+
/// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
|
|
460
|
+
/// Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
|
461
|
+
/// @type Number
|
|
462
|
+
/// @group accessibility
|
|
463
|
+
///
|
|
464
|
+
/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
|
465
|
+
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
358
466
|
$wcag-min-contrast-ratio: 7 !default;
|
|
467
|
+
/// Default dark color for WCAG 2.0.
|
|
468
|
+
/// @type Color
|
|
469
|
+
/// @group accessibility
|
|
359
470
|
$wcag-dark: black !default;
|
|
471
|
+
/// Default light color for WCAG 2.0.
|
|
472
|
+
/// @type Color
|
|
473
|
+
/// @group accessibility
|
|
360
474
|
$wcag-light: white !default;
|
|
361
475
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
476
|
+
/// Calculate the relative luminance for a color.
|
|
477
|
+
/// @param {Color} $color - The color to calculate the relative luminance for.
|
|
478
|
+
/// @return {Number} - The relative luminance for the color.
|
|
479
|
+
///
|
|
480
|
+
/// @group accessibility
|
|
481
|
+
///
|
|
482
|
+
/// @link https://www.w3.org/TR/WCAG/#dfn-relative-luminance
|
|
483
|
+
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
365
484
|
@function k-color-luminance( $color ) {
|
|
366
485
|
$red: k-list-nth( $_linear-channel-values, k-color-red( $color ) + 1 );
|
|
367
486
|
$green: k-list-nth( $_linear-channel-values, k-color-green( $color ) + 1 );
|
|
@@ -370,9 +489,15 @@ $wcag-light: white !default;
|
|
|
370
489
|
@return .2126 * $red + .7152 * $green + .0722 * $blue;
|
|
371
490
|
}
|
|
372
491
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
492
|
+
/// Calculates contrast ratio between two colors
|
|
493
|
+
/// @param {Color} $background - The background color
|
|
494
|
+
/// @param {Color} $foreground - The foreground color
|
|
495
|
+
/// @return {Number} - The contrast ratio between the two colors
|
|
496
|
+
///
|
|
497
|
+
/// @group accessibility
|
|
498
|
+
///
|
|
499
|
+
/// @link https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
|
|
500
|
+
/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
|
376
501
|
@function k-color-contrast-ratio( $background, $foreground ) {
|
|
377
502
|
// sass-lint:disable-block variable-name-format
|
|
378
503
|
$backLum: k-color-luminance( $background ) + .05;
|
|
@@ -381,15 +506,34 @@ $wcag-light: white !default;
|
|
|
381
506
|
@return k-math-div( k-math-max( $backLum, $foreLum ), k-math-min( $backLum, $foreLum ) );
|
|
382
507
|
}
|
|
383
508
|
|
|
509
|
+
/// Checks if a color is dark
|
|
510
|
+
/// @param {Color} $color - The color to check
|
|
511
|
+
/// @return {Boolean} - True if the color is dark, false otherwise
|
|
512
|
+
///
|
|
513
|
+
/// @group accessibility
|
|
384
514
|
@function k-is-dark( $color ) {
|
|
385
515
|
@return if( k-color-luminance( $color ) < .5, true, false );
|
|
386
516
|
}
|
|
517
|
+
|
|
518
|
+
/// Checks if a color is light
|
|
519
|
+
/// @param {Color} $color - The color to check
|
|
520
|
+
/// @return {Boolean} - True if the color is light, false otherwise
|
|
521
|
+
///
|
|
522
|
+
/// @group accessibility
|
|
387
523
|
@function k-is-light( $color ) {
|
|
388
524
|
@return if( k-color-luminance( $color ) < .5, false, true );
|
|
389
525
|
}
|
|
390
526
|
|
|
391
527
|
|
|
392
|
-
|
|
528
|
+
/// Calculates the contrast ratio between a background color and a foreground color.
|
|
529
|
+
/// If the contrast ratio is not high enough, it will return the color with the highest contrast ratio.
|
|
530
|
+
/// @param {Color} $background - The background color
|
|
531
|
+
/// @param {Color} $dark - The dark color to use as a fallback
|
|
532
|
+
/// @param {Color} $light - The light color to use as a fallback
|
|
533
|
+
/// @param {Number} $min-ratio - The minimum contrast ratio to reach
|
|
534
|
+
/// @return {Color} - The color with the highest contrast ratio
|
|
535
|
+
///
|
|
536
|
+
/// @group accessibility
|
|
393
537
|
@function k-contrast-color( $background, $dark: $wcag-dark, $light: $wcag-light, $min-ratio: $wcag-min-contrast-ratio ) {
|
|
394
538
|
$foregrounds: $light, $dark, #ffffff, #000000;
|
|
395
539
|
$max-ratio: 0;
|
|
@@ -437,7 +581,7 @@ $wcag-light: white !default;
|
|
|
437
581
|
}
|
|
438
582
|
|
|
439
583
|
// #endregion
|
|
440
|
-
// #region @import "./_color-manipulation.import.scss"; ->
|
|
584
|
+
// #region @import "./_color-manipulation.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
|
|
441
585
|
/// Set a specific jump point for requesting color jumps
|
|
442
586
|
/// @group color-system
|
|
443
587
|
/// @access private
|
|
@@ -460,13 +604,38 @@ $kendo-color-level-step: 8% !default;
|
|
|
460
604
|
@return k-color-mix( $base, $color, $level * $kendo-color-level-step );
|
|
461
605
|
}
|
|
462
606
|
|
|
607
|
+
/// Makes a color lighter by mixing it with white
|
|
608
|
+
/// @param {Color} $color - The color to lighten
|
|
609
|
+
/// @param {Number} $level - The amount to lighten the color
|
|
610
|
+
/// @return {Color} - The lightened color
|
|
611
|
+
///
|
|
612
|
+
/// @group color-system
|
|
613
|
+
///
|
|
614
|
+
/// @example scss - Usage
|
|
615
|
+
/// @debug k-color-tint( #f00, 1 ); // => #ff1a1a
|
|
463
616
|
@function k-color-tint( $color, $level: 1 ) {
|
|
464
617
|
@return k-color-level( $color, -$level );
|
|
465
618
|
}
|
|
619
|
+
|
|
620
|
+
/// Makes a color darker by mixing it with black
|
|
621
|
+
/// @param {Color} $color - The color to darken
|
|
622
|
+
/// @param {Number} $level - The amount to darken the color
|
|
623
|
+
/// @return {Color} - The darkened color
|
|
624
|
+
///
|
|
625
|
+
/// @group color-system
|
|
626
|
+
///
|
|
627
|
+
/// @example scss - Usage
|
|
628
|
+
/// @debug k-color-shade( #f00, 1 ); // => #e60000
|
|
466
629
|
@function k-color-shade( $color, $level: 1 ) {
|
|
467
630
|
@return k-color-level( $color, $level );
|
|
468
631
|
}
|
|
469
632
|
|
|
633
|
+
/// Shades the color in light themes and tints it in dark themes
|
|
634
|
+
/// @param {Color} $color - The color to shade or tint
|
|
635
|
+
/// @param {Number} $level - The amount to shade or tint the color
|
|
636
|
+
/// @return {Color} - The shaded or tinted color
|
|
637
|
+
///
|
|
638
|
+
/// @group color-system
|
|
470
639
|
@function k-try-shade( $color, $level: 1 ) {
|
|
471
640
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
472
641
|
|
|
@@ -476,6 +645,13 @@ $kendo-color-level-step: 8% !default;
|
|
|
476
645
|
|
|
477
646
|
@return k-color-shade( $color, $level );
|
|
478
647
|
}
|
|
648
|
+
|
|
649
|
+
/// Tints the color in light themes and shades it in dark themes
|
|
650
|
+
/// @param {Color} $color - The color to tint or shade
|
|
651
|
+
/// @param {Number} $level - The amount to tint or shade the color
|
|
652
|
+
/// @return {Color} - The tinted or shaded color
|
|
653
|
+
///
|
|
654
|
+
/// @group color-system
|
|
479
655
|
@function k-try-tint( $color, $level: 1 ) {
|
|
480
656
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
481
657
|
|
|
@@ -486,7 +662,12 @@ $kendo-color-level-step: 8% !default;
|
|
|
486
662
|
@return k-color-tint( $color, $level );
|
|
487
663
|
}
|
|
488
664
|
|
|
489
|
-
|
|
665
|
+
/// Darkens the color in light themes and lightens it in dark themes
|
|
666
|
+
/// @param {Color} $color - The color to darken or lighten
|
|
667
|
+
/// @param {Number} $level - The amount to darken or lighten the color
|
|
668
|
+
/// @return {Color} - The darkened or lightened color
|
|
669
|
+
///
|
|
670
|
+
/// @group color-system
|
|
490
671
|
@function k-try-darken( $color, $amount ) {
|
|
491
672
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
492
673
|
|
|
@@ -496,6 +677,12 @@ $kendo-color-level-step: 8% !default;
|
|
|
496
677
|
@return k-color-darken( $color, $amount );
|
|
497
678
|
}
|
|
498
679
|
|
|
680
|
+
/// Lightens the color in light themes and darkens it in dark themes
|
|
681
|
+
/// @param {Color} $color - The color to lighten or darken
|
|
682
|
+
/// @param {Number} $level - The amount to lighten or darken the color
|
|
683
|
+
/// @return {Color} - The lightened or darkened color
|
|
684
|
+
///
|
|
685
|
+
/// @group color-system
|
|
499
686
|
@function k-try-lighten( $color, $amount ) {
|
|
500
687
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
501
688
|
|
|
@@ -505,6 +692,15 @@ $kendo-color-level-step: 8% !default;
|
|
|
505
692
|
@return k-color-lighten( $color, $amount );
|
|
506
693
|
}
|
|
507
694
|
|
|
695
|
+
/// Converts a color with alpha to solid color mixed with a background color
|
|
696
|
+
/// @param {Color} $color - The color to convert
|
|
697
|
+
/// @param {Color} $bg - The background color
|
|
698
|
+
/// @return {Color} - The converted color
|
|
699
|
+
///
|
|
700
|
+
/// @group color-system
|
|
701
|
+
///
|
|
702
|
+
/// @example scss - Usage
|
|
703
|
+
/// @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
|
|
508
704
|
@function k-rgba-to-mix( $color, $bg ) {
|
|
509
705
|
$percent: k-color-alpha( $color ) * 100%;
|
|
510
706
|
|
|
@@ -517,7 +713,7 @@ $kendo-color-level-step: 8% !default;
|
|
|
517
713
|
}
|
|
518
714
|
|
|
519
715
|
// #endregion
|
|
520
|
-
// #region @import "./_custom-properties.import.scss"; ->
|
|
716
|
+
// #region @import "./_custom-properties.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
|
|
521
717
|
@function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
|
|
522
718
|
$_prefix: $prefix;
|
|
523
719
|
$_var: $var;
|
|
@@ -557,7 +753,7 @@ $kendo-color-level-step: 8% !default;
|
|
|
557
753
|
}
|
|
558
754
|
|
|
559
755
|
// #endregion
|
|
560
|
-
// #region @import "./_escape-string.import.scss"; ->
|
|
756
|
+
// #region @import "./_escape-string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
|
|
561
757
|
$_kendo-svg-escaped-characters: (
|
|
562
758
|
("%", "%25"),
|
|
563
759
|
("<", "%3c"),
|
|
@@ -567,7 +763,11 @@ $_kendo-svg-escaped-characters: (
|
|
|
567
763
|
(")", "%29")
|
|
568
764
|
) !default;
|
|
569
765
|
|
|
570
|
-
|
|
766
|
+
/// Escapes SVG characters in a string
|
|
767
|
+
/// @param {String} $string - The string to escape
|
|
768
|
+
/// @return {String} - The escaped string
|
|
769
|
+
///
|
|
770
|
+
/// @link https://codepen.io/kevinweber/pen/dXWoRw
|
|
571
771
|
@function k-escape-svg($string) {
|
|
572
772
|
@if k-string-index($string, "data:image/svg+xml") {
|
|
573
773
|
@each $char, $encoded in $_kendo-svg-escaped-characters {
|
|
@@ -590,6 +790,9 @@ $_kendo-escape-class-name: (
|
|
|
590
790
|
"/": "\\/"
|
|
591
791
|
);
|
|
592
792
|
|
|
793
|
+
/// Escapes special characters in a class name
|
|
794
|
+
/// @param {String} $text - The string to escape
|
|
795
|
+
/// @return {String} - The escaped string
|
|
593
796
|
@function k-escape-class-name( $text ) {
|
|
594
797
|
$_text: $text;
|
|
595
798
|
|
|
@@ -601,41 +804,111 @@ $_kendo-escape-class-name: (
|
|
|
601
804
|
}
|
|
602
805
|
|
|
603
806
|
// #endregion
|
|
604
|
-
// #region @import "./_lang.import.scss"; ->
|
|
807
|
+
// #region @import "./_lang.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
|
|
808
|
+
/// Returns the value of a variable if it is not null,
|
|
809
|
+
/// otherwise returns the fallback value.
|
|
810
|
+
/// @param {Any} $var - The variable to check.
|
|
811
|
+
/// @param {Any} $fallback - The fallback value.
|
|
812
|
+
/// @return {Any} - The value of the variable or the fallback value.
|
|
813
|
+
///
|
|
814
|
+
/// @example scss - Usage
|
|
815
|
+
/// $foo: null;
|
|
816
|
+
/// @debug k-if-var( $foo, "bar" ); // => "bar"
|
|
817
|
+
/// $foo: "baz";
|
|
818
|
+
/// @debug k-if-var( $foo, "bar" ); // => "baz"
|
|
605
819
|
@function k-if-var( $var, $fallback ) {
|
|
606
820
|
@return if( $var != null, $var, $fallback );
|
|
607
821
|
}
|
|
608
822
|
|
|
609
823
|
// #endregion
|
|
610
|
-
// #region @import "./_list.import.scss"; ->
|
|
824
|
+
// #region @import "./_list.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
|
|
825
|
+
/// Returns a copy of `$list` with `$val` appended to the end.
|
|
826
|
+
/// @param {List} $list - The list to process.
|
|
827
|
+
/// @param {Any} $val - The value to append to `$list`.
|
|
828
|
+
/// @param {String} $separator - The separator to use between `$list` and `$val`.
|
|
829
|
+
/// @return {List} - A copy of `$list` with `$val` appended to the end.
|
|
830
|
+
///
|
|
831
|
+
/// @example scss - Usage
|
|
832
|
+
/// @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
|
|
611
833
|
@function k-list-append( $list, $val, $separator: auto ) {
|
|
612
834
|
@return append( $list, $val, $separator );
|
|
613
835
|
}
|
|
614
836
|
|
|
837
|
+
/// Checks whether `$list` contains `$value`.
|
|
838
|
+
/// @param {List} $list - The list to check.
|
|
839
|
+
/// @param {Any} $value - The value to check for.
|
|
840
|
+
/// @return {Boolean} - Whether `$list` contains `$value`.
|
|
841
|
+
///
|
|
842
|
+
/// @example scss - Usage
|
|
843
|
+
/// @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
|
|
844
|
+
/// @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
|
|
615
845
|
@function k-list-includes( $list, $value ) {
|
|
616
846
|
@return k-list-index( $list, $value ) != null;
|
|
617
847
|
}
|
|
618
848
|
|
|
849
|
+
/// Returns the index of `$value` in `$list`.
|
|
850
|
+
/// @param {List} $list - The list to check.
|
|
851
|
+
/// @param {Any} $value - The value to check for.
|
|
852
|
+
/// @return {Number} - The index of `$value` in `$list`.
|
|
853
|
+
///
|
|
854
|
+
/// @example scss - Usage
|
|
855
|
+
/// @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
|
|
619
856
|
@function k-list-index( $list, $value ) {
|
|
620
857
|
@return index( $list, $value );
|
|
621
858
|
}
|
|
622
859
|
|
|
860
|
+
/// Returns whether `$list` is bracketed.
|
|
861
|
+
/// @param {List} $list - The list to check.
|
|
862
|
+
/// @return {Boolean} - Whether `$list` is bracketed.
|
|
863
|
+
///
|
|
864
|
+
/// @example scss - Usage
|
|
865
|
+
/// @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
|
|
866
|
+
/// @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
|
|
623
867
|
@function k-list-is-bracketed( $list ) {
|
|
624
868
|
@return is-bracketed( $list );
|
|
625
869
|
}
|
|
626
870
|
|
|
871
|
+
/// Joins two lists together.
|
|
872
|
+
/// @param {List} $list1 - The first list to join.
|
|
873
|
+
/// @param {List} $list2 - The second list to join.
|
|
874
|
+
/// @param {String} $separator - The separator to use between `$list1` and `$list2`.
|
|
875
|
+
/// @param {Boolean} $bracketed - Whether the result should be bracketed.
|
|
876
|
+
/// @return {List} - The joined list.
|
|
877
|
+
///
|
|
878
|
+
/// @example scss - Usage
|
|
879
|
+
/// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
|
|
880
|
+
/// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
|
|
627
881
|
@function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
|
|
628
882
|
@return join( $list1, $list2, $separator, $bracketed );
|
|
629
883
|
}
|
|
630
884
|
|
|
885
|
+
/// Returns the length of `$list`.
|
|
886
|
+
/// @param {List} $list - The list to check.
|
|
887
|
+
/// @return {Number} - The length of `$list`.
|
|
888
|
+
///
|
|
889
|
+
/// @example scss - Usage
|
|
890
|
+
/// @debug k-list-length( ( "foo", "bar" ) ); // => 2
|
|
631
891
|
@function k-list-length( $list ) {
|
|
632
892
|
@return length( $list );
|
|
633
893
|
}
|
|
634
894
|
|
|
895
|
+
/// Returns the nth item in `$list`.
|
|
896
|
+
/// @param {List} $list - The list to check.
|
|
897
|
+
/// @param {Number} $n - The index of the item to return.
|
|
898
|
+
/// @return {Any} - The nth item in `$list`.
|
|
899
|
+
///
|
|
900
|
+
/// @example scss - Usage
|
|
901
|
+
/// @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
|
|
635
902
|
@function k-list-nth( $list, $n ) {
|
|
636
903
|
@return nth( $list, $n );
|
|
637
904
|
}
|
|
638
905
|
|
|
906
|
+
/// Reverse the order of items in `$list`.
|
|
907
|
+
/// @param {List} $list - The list to reverse.
|
|
908
|
+
/// @return {List} - The reversed list.
|
|
909
|
+
///
|
|
910
|
+
/// @example scss - Usage
|
|
911
|
+
/// @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
|
|
639
912
|
@function k-list-reverse( $list: null ) {
|
|
640
913
|
$result: ();
|
|
641
914
|
|
|
@@ -654,64 +927,185 @@ $_kendo-escape-class-name: (
|
|
|
654
927
|
@return $result;
|
|
655
928
|
}
|
|
656
929
|
|
|
930
|
+
/// Returns the separator of `$list`.
|
|
931
|
+
/// @param {List} $list - The list to check.
|
|
932
|
+
/// @return {String} - The separator of `$list`.
|
|
933
|
+
///
|
|
934
|
+
/// @example scss - Usage
|
|
935
|
+
/// @debug k-list-separator( ( "foo", "bar" ) ); // => ","
|
|
657
936
|
@function k-list-separator( $list ) {
|
|
658
937
|
@return list-separator( $list );
|
|
659
938
|
}
|
|
660
939
|
|
|
940
|
+
/// Returns a copy of `$list` with `$val` inserted at `$n`.
|
|
941
|
+
/// @param {List} $list - The list to process.
|
|
942
|
+
/// @param {Number} $n - The index at which to insert `$val`.
|
|
943
|
+
/// @param {Any} $val - The value to insert.
|
|
944
|
+
/// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
|
|
945
|
+
///
|
|
946
|
+
/// @example scss - Usage
|
|
947
|
+
/// @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
|
|
661
948
|
@function k-list-set-nth( $list, $n, $value ) {
|
|
662
949
|
@return set-nth( $list, $n, $value );
|
|
663
950
|
}
|
|
664
951
|
|
|
952
|
+
/// Combines two lists into a single list of two-item lists.
|
|
953
|
+
/// @param {List} $list1 - The first list to combine.
|
|
954
|
+
/// @param {List} $list2 - The second list to combine.
|
|
955
|
+
/// @return {List} - A list of two-item lists.
|
|
956
|
+
///
|
|
957
|
+
/// @example scss - Usage
|
|
958
|
+
/// @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
|
|
665
959
|
@function k-list-zip( $lists... ) {
|
|
666
960
|
@return zip( $lists... );
|
|
667
961
|
}
|
|
668
962
|
|
|
669
963
|
// #endregion
|
|
670
|
-
// #region @import "./_math.import.scss"; ->
|
|
964
|
+
// #region @import "./_math.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
|
|
965
|
+
/// Returns the absolute value of a number.
|
|
966
|
+
/// @param {Number} $number - The number to get the absolute value of.
|
|
967
|
+
/// @return {Number} - The absolute value of `$number`.
|
|
968
|
+
///
|
|
969
|
+
/// @example scss - Usage
|
|
970
|
+
/// @debug k-math-abs( -10 ); // => 10
|
|
671
971
|
@function k-math-abs( $number ) {
|
|
672
972
|
@return abs( $number );
|
|
673
973
|
}
|
|
674
974
|
|
|
975
|
+
/// Returns the smallest integer greater than or equal to a number.
|
|
976
|
+
/// @param {Number} $number - The number to get the ceiling of.
|
|
977
|
+
/// @return {Number} - The ceiling of `$number`.
|
|
978
|
+
///
|
|
979
|
+
/// @example scss - Usage
|
|
980
|
+
/// @debug k-math-ceil( 10.1 ); // => 11
|
|
675
981
|
@function k-math-ceil( $number ) {
|
|
676
982
|
@return ceil( $number );
|
|
677
983
|
}
|
|
678
984
|
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
}
|
|
682
|
-
|
|
985
|
+
/// Returns the largest integer less than or equal to a number.
|
|
986
|
+
/// @param {Number} $number - The number to get the floor of.
|
|
987
|
+
/// @return {Number} - The floor of `$number`.
|
|
988
|
+
///
|
|
989
|
+
/// @example scss - Usage
|
|
990
|
+
/// @debug k-math-floor( 10.9 ); // => 10
|
|
991
|
+
@function k-math-floor( $number ) {
|
|
992
|
+
@return floor( $number );
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
|
|
996
|
+
/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
|
|
997
|
+
/// `$max` is returned. Otherwise, `$number` is returned.
|
|
998
|
+
/// @param {Number} $number - The number to clamp.
|
|
999
|
+
/// @param {Number} $min - The minimum value.
|
|
1000
|
+
/// @param {Number} $max - The maximum value.
|
|
1001
|
+
/// @return {Number} - The clamped number.
|
|
1002
|
+
///
|
|
1003
|
+
/// @example scss - Usage
|
|
1004
|
+
/// @debug k-math-clamp( 10, 0, 5 ); // => 5
|
|
1005
|
+
@function k-math-clamp( $number, $min, $max ) {
|
|
1006
|
+
@return k-math-max( $min, k-math-min( $max, $number ) );
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
/// Returns whether two numbers have compatible units.
|
|
1010
|
+
/// @param {Number} $a - The first number.
|
|
1011
|
+
/// @param {Number} $b - The second number.
|
|
1012
|
+
/// @return {Boolean} - Whether the numbers have compatible units.
|
|
1013
|
+
///
|
|
1014
|
+
/// @example scss - Usage
|
|
1015
|
+
/// @debug k-math-compatible( 10px, 10px ); // => true
|
|
1016
|
+
/// @debug k-math-compatible( 10px, 10em ); // => false
|
|
683
1017
|
@function k-math-compatible( $a, $b ) {
|
|
684
1018
|
@return comparable( $a, $b );
|
|
685
1019
|
}
|
|
686
1020
|
|
|
1021
|
+
/// Returns the quotient of two numbers.
|
|
1022
|
+
/// @param {Number} $a - The dividend.
|
|
1023
|
+
/// @param {Number} $b - The divisor.
|
|
1024
|
+
/// @return {Number} - The quotient of `$a` and `$b`.
|
|
1025
|
+
///
|
|
1026
|
+
/// @example scss - Usage
|
|
1027
|
+
/// @debug k-math-div( 10, 2 ); // => 5
|
|
1028
|
+
/// @debug k-math-div( 10px, 2 ); // => 5px
|
|
687
1029
|
@function k-math-div( $a, $b ) {
|
|
688
1030
|
@return ( $a / $b );
|
|
689
1031
|
}
|
|
690
1032
|
|
|
1033
|
+
/// Returns whether `$number` has no units.
|
|
1034
|
+
/// @param {Number} $number - The number to check.
|
|
1035
|
+
/// @return {Boolean} - Whether `$number` has no units.
|
|
1036
|
+
///
|
|
1037
|
+
/// @example scss - Usage
|
|
1038
|
+
/// @debug k-math-is-unitless( 10 ); // => true
|
|
1039
|
+
/// @debug k-math-is-unitless( 10px ); // => false
|
|
691
1040
|
@function k-math-is-unitless( $number ) {
|
|
692
1041
|
@return unitless( $number );
|
|
693
1042
|
}
|
|
694
1043
|
|
|
1044
|
+
/// Returns the larger of two numbers.
|
|
1045
|
+
/// @param {Number} $a - The first number.
|
|
1046
|
+
/// @param {Number} $b - The second number.
|
|
1047
|
+
/// @return {Number} - The larger of `$a` and `$b`.
|
|
1048
|
+
///
|
|
1049
|
+
/// @example scss - Usage
|
|
1050
|
+
/// @debug k-math-max( 10, 20 ); // => 20
|
|
1051
|
+
/// @debug k-math-max( 10px, 20px ); // => 20px
|
|
695
1052
|
@function k-math-max( $a, $b ) {
|
|
696
1053
|
@return max( $a, $b );
|
|
697
1054
|
}
|
|
698
1055
|
|
|
1056
|
+
/// Returns the smaller of two numbers.
|
|
1057
|
+
/// @param {Number} $a - The first number.
|
|
1058
|
+
/// @param {Number} $b - The second number.
|
|
1059
|
+
/// @return {Number} - The smaller of `$a` and `$b`.
|
|
1060
|
+
///
|
|
1061
|
+
/// @example scss - Usage
|
|
1062
|
+
/// @debug k-math-min( 10, 20 ); // => 10
|
|
1063
|
+
/// @debug k-math-min( 10px, 20px ); // => 10px
|
|
699
1064
|
@function k-math-min( $a, $b ) {
|
|
700
1065
|
@return min( $a, $b );
|
|
701
1066
|
}
|
|
702
1067
|
|
|
1068
|
+
/// Returns the remainder of two numbers.
|
|
1069
|
+
/// @param {Number} $a - The dividend.
|
|
1070
|
+
/// @param {Number} $b - The divisor.
|
|
1071
|
+
/// @return {Number} - The remainder of `$a` and `$b`.
|
|
1072
|
+
///
|
|
1073
|
+
/// @example scss - Usage
|
|
1074
|
+
/// @debug k-math-mod( 10, 3 ); // => 1
|
|
1075
|
+
/// @debug k-math-mod( 10px, 3 ); // => 1px
|
|
703
1076
|
@function k-math-mod( $a, $b ) {
|
|
704
1077
|
@return ( $a % $b );
|
|
705
1078
|
}
|
|
706
1079
|
|
|
1080
|
+
/// Returns the product of two numbers.
|
|
1081
|
+
/// @param {Number} $a - The first number.
|
|
1082
|
+
/// @param {Number} $b - The second number.
|
|
1083
|
+
/// @return {Number} - The product of `$a` and `$b`.
|
|
1084
|
+
///
|
|
1085
|
+
/// @example scss - Usage
|
|
1086
|
+
/// @debug k-math-mul( 10, 2 ); // => 20
|
|
1087
|
+
/// @debug k-math-mul( 10px, 2 ); // => 20px
|
|
707
1088
|
@function k-math-mul( $a, $b ) {
|
|
708
1089
|
@return ( $a * $b );
|
|
709
1090
|
}
|
|
710
1091
|
|
|
1092
|
+
/// Converts a unitless number to a percentage.
|
|
1093
|
+
/// @param {Number} $number - The number to convert.
|
|
1094
|
+
/// @return {Number} - The percentage.
|
|
1095
|
+
///
|
|
1096
|
+
/// @example scss - Usage
|
|
1097
|
+
/// @debug k-math-percentage( 0.5 ); // => 50%
|
|
711
1098
|
@function k-math-percentage( $number ) {
|
|
712
|
-
@return ( $number
|
|
1099
|
+
@return percentage( $number );
|
|
713
1100
|
}
|
|
714
1101
|
|
|
1102
|
+
/// Returns the result of raising `$x` to the power of `$n`.
|
|
1103
|
+
/// @param {Number} $x - The base.
|
|
1104
|
+
/// @param {Number} $n - The exponent.
|
|
1105
|
+
/// @return {Number} - The result of raising `$x` to the power of `$n`.
|
|
1106
|
+
///
|
|
1107
|
+
/// @example scss - Usage
|
|
1108
|
+
/// @debug k-math-pow( 2, 3 ); // => 8
|
|
715
1109
|
@function k-math-pow( $x, $n ) {
|
|
716
1110
|
$ret: 1;
|
|
717
1111
|
|
|
@@ -733,10 +1127,12 @@ $_kendo-escape-class-name: (
|
|
|
733
1127
|
|
|
734
1128
|
}
|
|
735
1129
|
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
}
|
|
739
|
-
|
|
1130
|
+
/// Returns a random number between 0 and 1.
|
|
1131
|
+
/// @param {Number} $limit - The upper limit of the random number.
|
|
1132
|
+
/// @return {Number} - A random number between 0 and 1.
|
|
1133
|
+
///
|
|
1134
|
+
/// @example scss - Usage
|
|
1135
|
+
/// @debug k-math-random(); // => 0.123456789
|
|
740
1136
|
@function k-math-random( $limit: null ) {
|
|
741
1137
|
@if ( $limit == null ) {
|
|
742
1138
|
@return random();
|
|
@@ -745,6 +1141,14 @@ $_kendo-escape-class-name: (
|
|
|
745
1141
|
@return random( $limit );
|
|
746
1142
|
}
|
|
747
1143
|
|
|
1144
|
+
/// Returns the result of rounding `$number` to the nearest integer
|
|
1145
|
+
/// using the specified `$precision`.
|
|
1146
|
+
/// @param {Number} $number - The number to round.
|
|
1147
|
+
/// @param {Number} $precision - The number of decimal places to round to.
|
|
1148
|
+
/// @return {Number} - The rounded number.
|
|
1149
|
+
///
|
|
1150
|
+
/// @example scss - Usage
|
|
1151
|
+
/// @debug k-math-round( 10.123456789, 3 ); // => 10.123
|
|
748
1152
|
@function k-math-round( $number, $precision: 0 ) {
|
|
749
1153
|
|
|
750
1154
|
@if ( $precision == 0 ) {
|
|
@@ -756,10 +1160,22 @@ $_kendo-escape-class-name: (
|
|
|
756
1160
|
@return k-math-div( round( $number * $pow ), $pow );
|
|
757
1161
|
}
|
|
758
1162
|
|
|
1163
|
+
/// Returns a string representation of `$number`'s unit.
|
|
1164
|
+
/// @param {Number} $number - The number to get the unit of.
|
|
1165
|
+
/// @return {String} - The unit of `$number`.
|
|
1166
|
+
///
|
|
1167
|
+
/// @example scss - Usage
|
|
1168
|
+
/// @debug k-math-unit( 10px ); // => px
|
|
759
1169
|
@function k-math-unit( $number ) {
|
|
760
1170
|
@return unit( $number );
|
|
761
1171
|
}
|
|
762
1172
|
|
|
1173
|
+
/// Remove the unit from a number.
|
|
1174
|
+
/// @param {Number} $number - The number to remove the unit from.
|
|
1175
|
+
/// @return {Number} - The unitless number.
|
|
1176
|
+
///
|
|
1177
|
+
/// @example scss - Usage
|
|
1178
|
+
/// @debug k-math-strip-unit( 10px ); // => 10
|
|
763
1179
|
@function k-math-strip-unit($number) {
|
|
764
1180
|
@if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
|
|
765
1181
|
@return k-math-div( $number, 1 * k-math-unit( $number) );
|
|
@@ -769,7 +1185,13 @@ $_kendo-escape-class-name: (
|
|
|
769
1185
|
}
|
|
770
1186
|
|
|
771
1187
|
// #endregion
|
|
772
|
-
// #region @import "./_map.import.scss"; ->
|
|
1188
|
+
// #region @import "./_map.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
|
|
1189
|
+
/// Returns the value at `$key` in `$map`.
|
|
1190
|
+
/// @param {Map} $map - The map to get the value from.
|
|
1191
|
+
/// @param {Any} $key - The key to get the value for.
|
|
1192
|
+
///
|
|
1193
|
+
/// @example scss - Usage
|
|
1194
|
+
/// @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
|
|
773
1195
|
@function k-map-get( $map, $keys... ) {
|
|
774
1196
|
@each $key in $keys {
|
|
775
1197
|
$map: map-get( $map, $key );
|
|
@@ -777,14 +1199,35 @@ $_kendo-escape-class-name: (
|
|
|
777
1199
|
@return $map;
|
|
778
1200
|
}
|
|
779
1201
|
|
|
1202
|
+
/// Returns whether `$map` has a value at `$key`.
|
|
1203
|
+
/// @param {Map} $map - The map to check.
|
|
1204
|
+
/// @param {Any} $key - The key to check.
|
|
1205
|
+
/// @return {Boolean} - Whether `$map` has a value at `$key`.
|
|
1206
|
+
///
|
|
1207
|
+
/// @example scss - Usage
|
|
1208
|
+
/// @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
|
|
1209
|
+
/// @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
|
|
780
1210
|
@function k-map-has-key( $map, $key ) {
|
|
781
1211
|
@return map-has-key( $map, $key );
|
|
782
1212
|
}
|
|
783
1213
|
|
|
1214
|
+
/// Returns a comma separated list of the keys in `$map`.
|
|
1215
|
+
/// @param {Map} $map - The map to get the keys from.
|
|
1216
|
+
/// @return {List} - A comma separated list of the keys in `$map`.
|
|
1217
|
+
///
|
|
1218
|
+
/// @example scss - Usage
|
|
1219
|
+
/// @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
|
|
784
1220
|
@function k-map-keys( $map ) {
|
|
785
1221
|
@return map-keys( $map );
|
|
786
1222
|
}
|
|
787
1223
|
|
|
1224
|
+
/// Returns a map with the keys and values from `$map` and `$args`.
|
|
1225
|
+
/// @param {Map} $map - The map to merge.
|
|
1226
|
+
/// @param {Map} $args - The map to merge into `$map`.
|
|
1227
|
+
/// @return {Map} - A map with the keys and values from `$map` and `$args`.
|
|
1228
|
+
///
|
|
1229
|
+
/// @example scss - Usage
|
|
1230
|
+
/// @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
|
|
788
1231
|
@function k-map-merge( $map, $args... ) {
|
|
789
1232
|
@each $arg in $args {
|
|
790
1233
|
$map: map-merge( $map, $arg );
|
|
@@ -792,117 +1235,337 @@ $_kendo-escape-class-name: (
|
|
|
792
1235
|
@return $map;
|
|
793
1236
|
}
|
|
794
1237
|
|
|
1238
|
+
/// Returns a map with the keys and values from `$map` except for `$keys`.
|
|
1239
|
+
/// @param {Map} $map - The map to remove keys from.
|
|
1240
|
+
/// @param {Any} $keys - The keys to remove from `$map`.
|
|
1241
|
+
/// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
|
|
1242
|
+
///
|
|
1243
|
+
/// @example scss - Usage
|
|
1244
|
+
/// @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
|
|
795
1245
|
@function k-map-remove( $map, $keys... ) {
|
|
796
1246
|
@return map-remove( $map, $keys... );
|
|
797
1247
|
}
|
|
798
1248
|
|
|
1249
|
+
/// Sets a single key and value in `$map`.
|
|
1250
|
+
/// @param {Map} $map - The map to set the value in.
|
|
1251
|
+
/// @param {Any} $key - The key to set the value for.
|
|
1252
|
+
/// @param {Any} $value - The value to set.
|
|
1253
|
+
/// @return {Map} - A map with the key and value set.
|
|
1254
|
+
///
|
|
1255
|
+
/// @example scss - Usage
|
|
1256
|
+
/// @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
|
|
799
1257
|
@function k-map-set( $map, $key, $value ) {
|
|
800
1258
|
@return k-map-merge( $map, ( $key: $value ) );
|
|
801
1259
|
}
|
|
802
1260
|
|
|
1261
|
+
/// Returns a comma separated list of the values in `$map`.
|
|
1262
|
+
/// @param {Map} $map - The map to get the values from.
|
|
1263
|
+
/// @return {List} - A comma separated list of the values in `$map`.
|
|
1264
|
+
///
|
|
1265
|
+
/// @example scss - Usage
|
|
1266
|
+
/// @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
|
|
803
1267
|
@function k-map-values( $map ) {
|
|
804
1268
|
@return map-values( $map );
|
|
805
1269
|
}
|
|
806
1270
|
|
|
807
1271
|
// #endregion
|
|
808
|
-
// #region @import "./_meta.import.scss"; ->
|
|
1272
|
+
// #region @import "./_meta.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
|
|
809
1273
|
// Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
|
|
810
1274
|
|
|
1275
|
+
/// A wrapper around the `call()` function.
|
|
1276
|
+
/// Calls the function `$function` with the arguments `$args`.
|
|
1277
|
+
/// @param {Function} $function - The function to call.
|
|
1278
|
+
/// @param {List} $args - The arguments to pass to `$function`.
|
|
1279
|
+
/// @return {Any} - The result of calling `$function` with `$args`.
|
|
1280
|
+
///
|
|
1281
|
+
/// @example scss - Usage
|
|
1282
|
+
/// @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
|
|
811
1283
|
@function k-meta-call( $function, $args... ) {
|
|
812
1284
|
@return call( $function, $args... );
|
|
813
1285
|
}
|
|
814
1286
|
|
|
1287
|
+
/// A wrapper around the `function-exists()` function.
|
|
1288
|
+
/// Returns whether a function with the name `$name` exists.
|
|
1289
|
+
/// @param {String} $name - The name of the function to check.
|
|
1290
|
+
/// @return {Boolean} - Whether a function with the name `$name` exists.
|
|
1291
|
+
///
|
|
1292
|
+
/// @example scss - Usage
|
|
1293
|
+
/// @debug k-meta-function-exists( "k-string-replace" ); // => true
|
|
815
1294
|
@function k-meta-function-exists( $name ) {
|
|
816
1295
|
@return function-exists( $name );
|
|
817
1296
|
}
|
|
818
1297
|
|
|
1298
|
+
/// A wrapper around the `get-function()` function.
|
|
1299
|
+
/// Returns the function with the name `$name`.
|
|
1300
|
+
/// @param {String} $name - The name of the function to get.
|
|
1301
|
+
/// @param {Boolean} $css - Whether to return the CSS representation of the function.
|
|
1302
|
+
/// @param {Module} $module - The module to get the function from.
|
|
1303
|
+
/// @return {Function} - The function with the name `$name`.
|
|
1304
|
+
///
|
|
1305
|
+
/// @example scss - Usage
|
|
1306
|
+
/// @debug k-meta-get-function( "k-string-replace" ); // => Function
|
|
819
1307
|
@function k-meta-get-function( $name, $args... ) {
|
|
820
1308
|
@return get-function( $name, $args... );
|
|
821
1309
|
}
|
|
822
1310
|
|
|
1311
|
+
/// A wrapper around the `inspect()` function.
|
|
1312
|
+
/// Returns a string representation of `$value`.
|
|
1313
|
+
/// @param {Any} $value - The value to inspect.
|
|
1314
|
+
/// @return {String} - A string representation of `$value`.
|
|
1315
|
+
///
|
|
1316
|
+
/// @example scss - Usage
|
|
1317
|
+
/// @debug k-meta-inspect( "foo bar" ); // => "foo bar"
|
|
823
1318
|
@function k-meta-inspect( $value ) {
|
|
824
1319
|
@return inspect( $value );
|
|
825
1320
|
}
|
|
826
1321
|
|
|
1322
|
+
/// A wrapper around the `keywords()` function.
|
|
1323
|
+
/// Returns a map of the keywords in `$args`.
|
|
1324
|
+
/// @param {List} $args - The arguments to process.
|
|
1325
|
+
/// @return {Map} - A map of the keywords in `$args`.
|
|
1326
|
+
///
|
|
1327
|
+
/// @example scss - Usage
|
|
1328
|
+
/// @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
|
|
827
1329
|
@function k-meta-keywords( $args ) {
|
|
828
1330
|
@return keywords( $args );
|
|
829
1331
|
}
|
|
830
1332
|
|
|
1333
|
+
/// A wrapper around the `type-of()` function.
|
|
1334
|
+
/// Returns the type of `$value`.
|
|
1335
|
+
/// @param {Any} $value - The value to get the type of.
|
|
1336
|
+
/// @return {String} - The type of `$value`.
|
|
1337
|
+
///
|
|
1338
|
+
/// @example scss - Usage
|
|
1339
|
+
/// @debug k-meta-type-of( "foo bar" ); // => "string"
|
|
831
1340
|
@function k-meta-type-of( $value ) {
|
|
832
1341
|
@return type-of( $value );
|
|
833
1342
|
}
|
|
834
1343
|
|
|
1344
|
+
/// A wrapper around the `variable-exists()` function.
|
|
1345
|
+
/// Returns whether a variable with the name `$name` exists.
|
|
1346
|
+
/// @param {String} $name - The name of the variable to check.
|
|
1347
|
+
/// @return {Boolean} - Whether a variable with the name `$name` exists.
|
|
1348
|
+
///
|
|
1349
|
+
/// @example scss - Usage
|
|
1350
|
+
/// @debug k-meta-variable-exists( "foo" ); // => true
|
|
835
1351
|
@function k-meta-variable-exists( $name ) {
|
|
836
1352
|
@return variable-exists( $name );
|
|
837
1353
|
}
|
|
838
1354
|
|
|
1355
|
+
/// Checks whether `$value` is a <number> CSS data type.
|
|
1356
|
+
/// @param {Any} $value - The value to check.
|
|
1357
|
+
/// @return {Boolean} - Whether `$value` is a number.
|
|
1358
|
+
///
|
|
1359
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
|
|
1360
|
+
///
|
|
1361
|
+
/// @example scss - Usage
|
|
1362
|
+
/// @debug k-meta-is-number( 1 ); // => true
|
|
1363
|
+
/// @debug k-meta-is-number( "foo" ); // => false
|
|
839
1364
|
@function k-meta-is-number( $value ) {
|
|
840
1365
|
@return k-meta-type-of( $value ) == "number";
|
|
841
1366
|
}
|
|
842
1367
|
|
|
1368
|
+
/// Checks whether `$value` is a <integer> CSS data type.
|
|
1369
|
+
/// @param {Any} $value - The value to check.
|
|
1370
|
+
/// @return {Boolean} - Whether `$value` is a integer.
|
|
1371
|
+
///
|
|
1372
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
|
|
1373
|
+
///
|
|
1374
|
+
/// @example scss - Usage
|
|
1375
|
+
/// @debug k-meta-is-integer( 1 ); // => true
|
|
1376
|
+
/// @debug k-meta-is-integer( 1.5 ); // => false
|
|
843
1377
|
@function k-meta-is-integer( $value ) {
|
|
844
1378
|
@return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
|
|
845
1379
|
}
|
|
846
1380
|
|
|
1381
|
+
/// Checks whether `$value` is a <time> CSS data type.
|
|
1382
|
+
/// @param {Any} $value - The value to check.
|
|
1383
|
+
/// @return {Boolean} - Whether `$value` is a time.
|
|
1384
|
+
///
|
|
1385
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
|
|
1386
|
+
///
|
|
1387
|
+
/// @example scss - Usage
|
|
1388
|
+
/// @debug k-meta-is-time( 1s ); // => true
|
|
1389
|
+
/// @debug k-meta-is-time( 1 ); // => false
|
|
847
1390
|
@function k-meta-is-time( $value ) {
|
|
848
1391
|
@return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
|
|
849
1392
|
}
|
|
850
1393
|
|
|
1394
|
+
/// Checks whether `$value` is a valid duration period.
|
|
1395
|
+
/// @param {Any} $value - The value to check.
|
|
1396
|
+
/// @return {Boolean} - Whether `$value` is a duration.
|
|
1397
|
+
///
|
|
1398
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
|
|
1399
|
+
///
|
|
1400
|
+
/// @example scss - Usage
|
|
1401
|
+
/// @debug k-meta-is-duration( 1s ); // => true
|
|
1402
|
+
/// @debug k-meta-is-duration( 1 ); // => false
|
|
851
1403
|
@function k-meta-is-duration( $value ) {
|
|
852
1404
|
@return k-meta-is-time( $value );
|
|
853
1405
|
}
|
|
854
1406
|
|
|
1407
|
+
/// Checks whether `$value` is a <angle> CSS data type.
|
|
1408
|
+
/// @param {Any} $value - The value to check.
|
|
1409
|
+
/// @return {Boolean} - Whether `$value` is a angle.
|
|
1410
|
+
///
|
|
1411
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
|
|
1412
|
+
///
|
|
1413
|
+
/// @example scss - Usage
|
|
1414
|
+
/// @debug k-meta-is-angle( 1deg ); // => true
|
|
1415
|
+
/// @debug k-meta-is-angle( 1 ); // => false
|
|
855
1416
|
@function k-meta-is-angle( $value ) {
|
|
856
1417
|
@return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
|
|
857
1418
|
}
|
|
858
1419
|
|
|
1420
|
+
/// Checks whether `$value` is a <frequency> CSS data type.
|
|
1421
|
+
/// @param {Any} $value - The value to check.
|
|
1422
|
+
/// @return {Boolean} - Whether `$value` is a frequency.
|
|
1423
|
+
///
|
|
1424
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
|
|
1425
|
+
///
|
|
1426
|
+
/// @example scss - Usage
|
|
1427
|
+
/// @debug k-meta-is-frequency( 1Hz ); // => true
|
|
1428
|
+
/// @debug k-meta-is-frequency( 1 ); // => false
|
|
859
1429
|
@function k-meta-is-frequency( $value ) {
|
|
860
1430
|
@return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
|
|
861
1431
|
}
|
|
862
1432
|
|
|
1433
|
+
/// Checks whether `$value` is a relative <length> CSS data type.
|
|
1434
|
+
/// @param {Any} $value - The value to check.
|
|
1435
|
+
/// @return {Boolean} - Whether `$value` is a relative length.
|
|
1436
|
+
///
|
|
1437
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
|
|
1438
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
|
|
1439
|
+
///
|
|
1440
|
+
/// @example scss - Usage
|
|
1441
|
+
/// @debug k-meta-is-relative-length( 1em ); // => true
|
|
1442
|
+
/// @debug k-meta-is-relative-length( 1ch ); // => true
|
|
1443
|
+
/// @debug k-meta-is-relative-length( 1 ); // => false
|
|
863
1444
|
@function k-meta-is-relative-length( $value ) {
|
|
864
1445
|
@return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
|
|
865
1446
|
}
|
|
866
1447
|
|
|
1448
|
+
/// Checks whether `$value` is an absolute <length> CSS data type.
|
|
1449
|
+
/// @param {Any} $value - The value to check.
|
|
1450
|
+
/// @return {Boolean} - Whether `$value` is an absolute length.
|
|
1451
|
+
///
|
|
1452
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
|
|
1453
|
+
///
|
|
1454
|
+
/// @example scss - Usage
|
|
1455
|
+
/// @debug k-meta-is-absolute-length( 1cm ); // => true
|
|
1456
|
+
/// @debug k-meta-is-absolute-length( 1 ); // => false
|
|
867
1457
|
@function k-meta-is-absolute-length( $value ) {
|
|
868
1458
|
@return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
|
|
869
1459
|
}
|
|
870
1460
|
|
|
1461
|
+
/// Checks whether `$value` is a <percentage> CSS data type.
|
|
1462
|
+
/// @param {Any} $value - The value to check.
|
|
1463
|
+
/// @return {Boolean} - Whether `$value` is a percentage.
|
|
1464
|
+
///
|
|
1465
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
|
|
1466
|
+
///
|
|
1467
|
+
/// @example scss - Usage
|
|
1468
|
+
/// @debug k-meta-is-percentage( 1% ); // => true
|
|
1469
|
+
/// @debug k-meta-is-percentage( 1 ); // => false
|
|
871
1470
|
@function k-meta-is-percentage( $value ) {
|
|
872
1471
|
@return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
|
|
873
1472
|
}
|
|
874
1473
|
|
|
1474
|
+
/// Checks whether `$value` is a <length> CSS data type.
|
|
1475
|
+
/// @param {Any} $value - The value to check.
|
|
1476
|
+
/// @return {Boolean} - Whether `$value` is a length.
|
|
1477
|
+
///
|
|
1478
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
|
|
1479
|
+
///
|
|
1480
|
+
/// @example scss - Usage
|
|
1481
|
+
/// @debug k-meta-is-length( 1em ); // => true
|
|
1482
|
+
/// @debug k-meta-is-length( 1cm ); // => true
|
|
1483
|
+
/// @debug k-meta-is-length( 1 ); // => false
|
|
875
1484
|
@function k-meta-is-length( $value ) {
|
|
876
1485
|
@return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
|
|
877
1486
|
}
|
|
878
1487
|
|
|
1488
|
+
/// Checks whether `$value` is a <resolution> CSS data type.
|
|
1489
|
+
/// @param {Any} $value - The value to check.
|
|
1490
|
+
/// @return {Boolean} - Whether `$value` is a resolution.
|
|
1491
|
+
///
|
|
1492
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
|
|
1493
|
+
///
|
|
1494
|
+
/// @example scss - Usage
|
|
1495
|
+
/// @debug k-meta-is-resolution( 1dpi ); // => true
|
|
1496
|
+
/// @debug k-meta-is-resolution( 1 ); // => false
|
|
879
1497
|
@function k-meta-is-resolution( $value ) {
|
|
880
1498
|
@return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
|
|
881
1499
|
}
|
|
882
1500
|
|
|
1501
|
+
/// Checks whether `$value` is a <position> CSS data type.
|
|
1502
|
+
/// @param {Any} $value - The value to check.
|
|
1503
|
+
/// @return {Boolean} - Whether `$value` is a position.
|
|
1504
|
+
///
|
|
1505
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
|
|
1506
|
+
///
|
|
1507
|
+
/// @example scss - Usage
|
|
1508
|
+
/// @debug k-meta-is-position( center ); // => true
|
|
883
1509
|
@function k-meta-is-position( $value ) {
|
|
884
1510
|
@return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
|
|
885
1511
|
}
|
|
886
1512
|
|
|
887
1513
|
// #endregion
|
|
888
|
-
// #region @import "./_string.import.scss"; ->
|
|
1514
|
+
// #region @import "./_string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
|
|
1515
|
+
/// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
|
|
1516
|
+
/// @param {String} $string - The string to process.
|
|
1517
|
+
/// @param {String} $substring - The substring to look for.
|
|
1518
|
+
/// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
|
|
1519
|
+
///
|
|
1520
|
+
/// @example scss - Usage
|
|
1521
|
+
/// @debug k-string-index( "foo bar", "bar" ); // => 5
|
|
889
1522
|
@function k-string-index( $string, $substring ) {
|
|
890
1523
|
@return str-index( $string, $substring );
|
|
891
1524
|
}
|
|
892
1525
|
|
|
1526
|
+
/// Returns a copy of `$string` with `$insert` inserted at `$index`.
|
|
1527
|
+
/// @param {String} $string - The string to process.
|
|
1528
|
+
/// @param {String} $insert - The string to insert.
|
|
1529
|
+
/// @param {Number} $index - The index at which to insert `$insert`.
|
|
1530
|
+
/// @return {String} - The resulting string.
|
|
1531
|
+
///
|
|
1532
|
+
/// @example scss - Usage
|
|
1533
|
+
/// @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
|
|
893
1534
|
@function k-string-insert( $string, $insert, $index ) {
|
|
894
1535
|
@return str-insert( $string, $insert, $index );
|
|
895
1536
|
}
|
|
896
1537
|
|
|
1538
|
+
/// Returns the length of `$string`.
|
|
1539
|
+
/// @param {String} $string - The string to process.
|
|
1540
|
+
/// @return {Number} - The length of `$string`.
|
|
1541
|
+
///
|
|
1542
|
+
/// @example scss - Usage
|
|
1543
|
+
/// @debug k-string-length( "foo bar" ); // => 7
|
|
897
1544
|
@function k-string-length( $string ) {
|
|
898
1545
|
@return str-length( $string );
|
|
899
1546
|
}
|
|
900
1547
|
|
|
1548
|
+
/// Returns a copy of `$string` with quotes added.
|
|
1549
|
+
/// @param {String} $string - The string to process.
|
|
1550
|
+
/// @return {String} - The resulting string.
|
|
1551
|
+
///
|
|
1552
|
+
/// @example scss - Usage
|
|
1553
|
+
/// @debug k-string-quote( "foo bar" ); // => "foo bar"
|
|
901
1554
|
@function k-string-quote( $string ) {
|
|
902
1555
|
@return quote( $string );
|
|
903
1556
|
}
|
|
904
1557
|
|
|
905
|
-
|
|
1558
|
+
/// Returns a copy of `$string` with all occurrences of `$search`
|
|
1559
|
+
/// replaced by `$replace`.
|
|
1560
|
+
/// @param {String} $string - The string to process.
|
|
1561
|
+
/// @param {String} $search - The substring to look for.
|
|
1562
|
+
/// @param {String} $replace - The replacement string.
|
|
1563
|
+
/// @return {String} - The resulting string.
|
|
1564
|
+
///
|
|
1565
|
+
/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
|
|
1566
|
+
///
|
|
1567
|
+
/// @example scss - Usage
|
|
1568
|
+
/// @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
|
|
906
1569
|
@function k-string-replace( $string, $search, $replace: "" ) {
|
|
907
1570
|
@if k-meta-type-of( $string ) == number {
|
|
908
1571
|
$string: $string + "";
|
|
@@ -917,22 +1580,53 @@ $_kendo-escape-class-name: (
|
|
|
917
1580
|
@return $string;
|
|
918
1581
|
}
|
|
919
1582
|
|
|
1583
|
+
/// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
|
|
1584
|
+
/// @param {String} $string - The string to process.
|
|
1585
|
+
/// @param {Number} $start-at - The index at which to start the substring.
|
|
1586
|
+
/// @param {Number} $end-at - The index at which to end the substring.
|
|
1587
|
+
/// @return {String} - The resulting string.
|
|
1588
|
+
///
|
|
1589
|
+
/// @example scss - Usage
|
|
1590
|
+
/// @debug k-string-slice( "foo bar", 5 ); // => "bar"
|
|
920
1591
|
@function k-string-slice( $string, $start-at, $end-at: -1 ) {
|
|
921
1592
|
@return str-slice( $string, $start-at, $end-at );
|
|
922
1593
|
}
|
|
923
1594
|
|
|
1595
|
+
/// Returns a copy of `$string` with all uppercase letters converted to lowercase.
|
|
1596
|
+
/// @param {String} $string - The string to process.
|
|
1597
|
+
/// @return {String} - The resulting string.
|
|
1598
|
+
///
|
|
1599
|
+
/// @example scss - Usage
|
|
1600
|
+
/// @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
|
|
924
1601
|
@function k-string-to-lower-case( $string ) {
|
|
925
1602
|
@return to-lower-case( $string );
|
|
926
1603
|
}
|
|
927
1604
|
|
|
1605
|
+
/// Returns a copy of `$string` with all lowercase letters converted to uppercase.
|
|
1606
|
+
/// @param {String} $string - The string to process.
|
|
1607
|
+
/// @return {String} - The resulting string.
|
|
1608
|
+
///
|
|
1609
|
+
/// @example scss - Usage
|
|
1610
|
+
/// @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
|
|
928
1611
|
@function k-string-to-upper-case( $string ) {
|
|
929
1612
|
@return to-upper-case( $string );
|
|
930
1613
|
}
|
|
931
1614
|
|
|
1615
|
+
/// Returns a unique identifier.
|
|
1616
|
+
/// @return {String} - The unique identifier.
|
|
1617
|
+
///
|
|
1618
|
+
/// @example scss - Usage
|
|
1619
|
+
/// @debug k-string-unique-id(); // => UNIQUE_ID
|
|
932
1620
|
@function k-string-unique-id() {
|
|
933
1621
|
@return unique-id();
|
|
934
1622
|
}
|
|
935
1623
|
|
|
1624
|
+
/// Returns a copy of `$string` with quotes removed.
|
|
1625
|
+
/// @param {String} $string - The string to process.
|
|
1626
|
+
/// @return {String} - The resulting string.
|
|
1627
|
+
///
|
|
1628
|
+
/// @example scss - Usage
|
|
1629
|
+
/// @debug k-string-unquote( "foo bar" ); // => foo bar
|
|
936
1630
|
@function k-string-unquote( $string ) {
|
|
937
1631
|
@return unquote( $string );
|
|
938
1632
|
}
|
|
@@ -942,7 +1636,7 @@ $_kendo-escape-class-name: (
|
|
|
942
1636
|
// #endregion
|
|
943
1637
|
|
|
944
1638
|
// #endregion
|
|
945
|
-
// #region @import "./_variables.scss"; ->
|
|
1639
|
+
// #region @import "./_variables.scss"; -> scss/_variables.scss
|
|
946
1640
|
$kendo-prefix: k- !default;
|
|
947
1641
|
$kendo-important: true !default;
|
|
948
1642
|
|
|
@@ -1765,7 +2459,7 @@ $kendo-utils: (
|
|
|
1765
2459
|
) !default;
|
|
1766
2460
|
|
|
1767
2461
|
// #endregion
|
|
1768
|
-
// #region @import "./_mixins.scss"; ->
|
|
2462
|
+
// #region @import "./_mixins.scss"; -> scss/_mixins.scss
|
|
1769
2463
|
@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
|
|
1770
2464
|
@if $values {
|
|
1771
2465
|
$_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
|
|
@@ -1797,8 +2491,8 @@ $kendo-utils: (
|
|
|
1797
2491
|
|
|
1798
2492
|
// #endregion
|
|
1799
2493
|
|
|
1800
|
-
// #region @import "./accessibility/index.import.scss"; ->
|
|
1801
|
-
// #region @import "./_screen-readers.scss"; ->
|
|
2494
|
+
// #region @import "./accessibility/index.import.scss"; -> scss/accessibility/index.import.scss
|
|
2495
|
+
// #region @import "./_screen-readers.scss"; -> scss/accessibility/_screen-readers.scss
|
|
1802
2496
|
@mixin kendo-utils--accessibility--screen-readers() {
|
|
1803
2497
|
|
|
1804
2498
|
// Screen readers utility classes
|
|
@@ -1840,8 +2534,8 @@ $kendo-utils: (
|
|
|
1840
2534
|
}
|
|
1841
2535
|
|
|
1842
2536
|
// #endregion
|
|
1843
|
-
// #region @import "./layout/index.import.scss"; ->
|
|
1844
|
-
// #region @import "./_aspect-ratio.scss"; ->
|
|
2537
|
+
// #region @import "./layout/index.import.scss"; -> scss/layout/index.import.scss
|
|
2538
|
+
// #region @import "./_aspect-ratio.scss"; -> scss/layout/_aspect-ratio.scss
|
|
1845
2539
|
// Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
|
|
1846
2540
|
|
|
1847
2541
|
/// This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
|
|
@@ -1877,7 +2571,7 @@ $kendo-utils: (
|
|
|
1877
2571
|
}
|
|
1878
2572
|
|
|
1879
2573
|
// #endregion
|
|
1880
|
-
// #region @import "./_clear.scss"; ->
|
|
2574
|
+
// #region @import "./_clear.scss"; -> scss/layout/_clear.scss
|
|
1881
2575
|
// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
|
|
1882
2576
|
|
|
1883
2577
|
/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
|
|
@@ -1909,7 +2603,7 @@ $kendo-utils: (
|
|
|
1909
2603
|
}
|
|
1910
2604
|
|
|
1911
2605
|
// #endregion
|
|
1912
|
-
// #region @import "./_display.scss"; ->
|
|
2606
|
+
// #region @import "./_display.scss"; -> scss/layout/_display.scss
|
|
1913
2607
|
/// This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
|
|
1914
2608
|
/// @name .k-d-none
|
|
1915
2609
|
/// @group display
|
|
@@ -1982,7 +2676,7 @@ $kendo-utils: (
|
|
|
1982
2676
|
}
|
|
1983
2677
|
|
|
1984
2678
|
// #endregion
|
|
1985
|
-
// #region @import "./_float.scss"; ->
|
|
2679
|
+
// #region @import "./_float.scss"; -> scss/layout/_float.scss
|
|
1986
2680
|
// Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float.
|
|
1987
2681
|
|
|
1988
2682
|
/// This is equivalent to `float: left;`. The element must float on the left side of its containing block.
|
|
@@ -2009,7 +2703,7 @@ $kendo-utils: (
|
|
|
2009
2703
|
}
|
|
2010
2704
|
|
|
2011
2705
|
// #endregion
|
|
2012
|
-
// #region @import "./_overflow.scss"; ->
|
|
2706
|
+
// #region @import "./_overflow.scss"; -> scss/layout/_overflow.scss
|
|
2013
2707
|
/// This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
|
|
2014
2708
|
/// @name .k-overflow-auto
|
|
2015
2709
|
/// @group overflow
|
|
@@ -2094,7 +2788,7 @@ $kendo-utils: (
|
|
|
2094
2788
|
}
|
|
2095
2789
|
|
|
2096
2790
|
// #endregion
|
|
2097
|
-
// #region @import "./_position.scss"; ->
|
|
2791
|
+
// #region @import "./_position.scss"; -> scss/layout/_position.scss
|
|
2098
2792
|
// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
|
|
2099
2793
|
|
|
2100
2794
|
/// This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
|
|
@@ -2248,7 +2942,7 @@ $kendo-utils: (
|
|
|
2248
2942
|
}
|
|
2249
2943
|
|
|
2250
2944
|
// #endregion
|
|
2251
|
-
// #region @import "./_visibility.scss"; ->
|
|
2945
|
+
// #region @import "./_visibility.scss"; -> scss/layout/_visibility.scss
|
|
2252
2946
|
// TODO: docs
|
|
2253
2947
|
// TODO: consider visible and invisible vs visibility-visible and visibility-hidden
|
|
2254
2948
|
|
|
@@ -2267,7 +2961,7 @@ $kendo-utils: (
|
|
|
2267
2961
|
}
|
|
2268
2962
|
|
|
2269
2963
|
// #endregion
|
|
2270
|
-
// #region @import "./_zindex.scss"; ->
|
|
2964
|
+
// #region @import "./_zindex.scss"; -> scss/layout/_zindex.scss
|
|
2271
2965
|
// TODO: docs
|
|
2272
2966
|
|
|
2273
2967
|
@mixin kendo-utils--layout--zindex() {
|
|
@@ -2293,8 +2987,8 @@ $kendo-utils: (
|
|
|
2293
2987
|
}
|
|
2294
2988
|
|
|
2295
2989
|
// #endregion
|
|
2296
|
-
// #region @import "./flex-grid/index.import.scss"; ->
|
|
2297
|
-
// #region @import "./_align-content.scss"; ->
|
|
2990
|
+
// #region @import "./flex-grid/index.import.scss"; -> scss/flex-grid/index.import.scss
|
|
2991
|
+
// #region @import "./_align-content.scss"; -> scss/flex-grid/_align-content.scss
|
|
2298
2992
|
// TODO: docs
|
|
2299
2993
|
|
|
2300
2994
|
@mixin kendo-utils--flex-grid--align-content() {
|
|
@@ -2306,7 +3000,7 @@ $kendo-utils: (
|
|
|
2306
3000
|
}
|
|
2307
3001
|
|
|
2308
3002
|
// #endregion
|
|
2309
|
-
// #region @import "./_align-items.scss"; ->
|
|
3003
|
+
// #region @import "./_align-items.scss"; -> scss/flex-grid/_align-items.scss
|
|
2310
3004
|
// TODO: docs
|
|
2311
3005
|
|
|
2312
3006
|
@mixin kendo-utils--flex-grid--align-items() {
|
|
@@ -2318,7 +3012,7 @@ $kendo-utils: (
|
|
|
2318
3012
|
}
|
|
2319
3013
|
|
|
2320
3014
|
// #endregion
|
|
2321
|
-
// #region @import "./_align-self.scss"; ->
|
|
3015
|
+
// #region @import "./_align-self.scss"; -> scss/flex-grid/_align-self.scss
|
|
2322
3016
|
// TODO: docs
|
|
2323
3017
|
|
|
2324
3018
|
@mixin kendo-utils--flex-grid--align-self() {
|
|
@@ -2330,7 +3024,7 @@ $kendo-utils: (
|
|
|
2330
3024
|
}
|
|
2331
3025
|
|
|
2332
3026
|
// #endregion
|
|
2333
|
-
// #region @import "./_flex-basis.scss"; ->
|
|
3027
|
+
// #region @import "./_flex-basis.scss"; -> scss/flex-grid/_flex-basis.scss
|
|
2334
3028
|
/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
|
|
2335
3029
|
/// @name .k-flex-basis-auto
|
|
2336
3030
|
/// @group flex-basis
|
|
@@ -2351,7 +3045,7 @@ $kendo-utils: (
|
|
|
2351
3045
|
}
|
|
2352
3046
|
|
|
2353
3047
|
// #endregion
|
|
2354
|
-
// #region @import "./_flex-direction.scss"; ->
|
|
3048
|
+
// #region @import "./_flex-direction.scss"; -> scss/flex-grid/_flex-direction.scss
|
|
2355
3049
|
/// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
|
|
2356
3050
|
/// @name .k-flex-row
|
|
2357
3051
|
/// @group flex-direction
|
|
@@ -2386,7 +3080,7 @@ $kendo-utils: (
|
|
|
2386
3080
|
}
|
|
2387
3081
|
|
|
2388
3082
|
// #endregion
|
|
2389
|
-
// #region @import "./_flex-grow.scss"; ->
|
|
3083
|
+
// #region @import "./_flex-grow.scss"; -> scss/flex-grid/_flex-grow.scss
|
|
2390
3084
|
/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
|
|
2391
3085
|
/// @name .k-flex-grow
|
|
2392
3086
|
/// @group flex-grow
|
|
@@ -2407,7 +3101,7 @@ $kendo-utils: (
|
|
|
2407
3101
|
}
|
|
2408
3102
|
|
|
2409
3103
|
// #endregion
|
|
2410
|
-
// #region @import "./_flex-shrink.scss"; ->
|
|
3104
|
+
// #region @import "./_flex-shrink.scss"; -> scss/flex-grid/_flex-shrink.scss
|
|
2411
3105
|
/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
|
|
2412
3106
|
/// @name .k-flex-shrink
|
|
2413
3107
|
/// @group flex-shrink
|
|
@@ -2428,7 +3122,7 @@ $kendo-utils: (
|
|
|
2428
3122
|
}
|
|
2429
3123
|
|
|
2430
3124
|
// #endregion
|
|
2431
|
-
// #region @import "./_flex-wrap.scss"; ->
|
|
3125
|
+
// #region @import "./_flex-wrap.scss"; -> scss/flex-grid/_flex-wrap.scss
|
|
2432
3126
|
/// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
|
|
2433
3127
|
/// @name .k-flex-wrap
|
|
2434
3128
|
/// @group flex-wrap
|
|
@@ -2453,7 +3147,7 @@ $kendo-utils: (
|
|
|
2453
3147
|
}
|
|
2454
3148
|
|
|
2455
3149
|
// #endregion
|
|
2456
|
-
// #region @import "./_flex.scss"; ->
|
|
3150
|
+
// #region @import "./_flex.scss"; -> scss/flex-grid/_flex.scss
|
|
2457
3151
|
/// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
|
|
2458
3152
|
/// @name .k-flex-1
|
|
2459
3153
|
/// @group flex
|
|
@@ -2483,7 +3177,7 @@ $kendo-utils: (
|
|
|
2483
3177
|
}
|
|
2484
3178
|
|
|
2485
3179
|
// #endregion
|
|
2486
|
-
// #region @import "./_gap.scss"; ->
|
|
3180
|
+
// #region @import "./_gap.scss"; -> scss/flex-grid/_gap.scss
|
|
2487
3181
|
// TODO: docs
|
|
2488
3182
|
|
|
2489
3183
|
@mixin kendo-utils--flex-grid--gap() {
|
|
@@ -2497,7 +3191,7 @@ $kendo-utils: (
|
|
|
2497
3191
|
}
|
|
2498
3192
|
|
|
2499
3193
|
// #endregion
|
|
2500
|
-
// #region @import "./_grid-auto-columns.scss"; ->
|
|
3194
|
+
// #region @import "./_grid-auto-columns.scss"; -> scss/flex-grid/_grid-auto-columns.scss
|
|
2501
3195
|
// TODO: docs
|
|
2502
3196
|
|
|
2503
3197
|
@mixin kendo-utils--flex-grid--grid-auto-columns() {
|
|
@@ -2509,7 +3203,7 @@ $kendo-utils: (
|
|
|
2509
3203
|
}
|
|
2510
3204
|
|
|
2511
3205
|
// #endregion
|
|
2512
|
-
// #region @import "./_grid-auto-flow.scss"; ->
|
|
3206
|
+
// #region @import "./_grid-auto-flow.scss"; -> scss/flex-grid/_grid-auto-flow.scss
|
|
2513
3207
|
// TODO: docs
|
|
2514
3208
|
|
|
2515
3209
|
@mixin kendo-utils--flex-grid--grid-auto-flow() {
|
|
@@ -2521,7 +3215,7 @@ $kendo-utils: (
|
|
|
2521
3215
|
}
|
|
2522
3216
|
|
|
2523
3217
|
// #endregion
|
|
2524
|
-
// #region @import "./_grid-auto-rows.scss"; ->
|
|
3218
|
+
// #region @import "./_grid-auto-rows.scss"; -> scss/flex-grid/_grid-auto-rows.scss
|
|
2525
3219
|
// TODO: docs
|
|
2526
3220
|
|
|
2527
3221
|
@mixin kendo-utils--flex-grid--grid-auto-rows() {
|
|
@@ -2533,7 +3227,7 @@ $kendo-utils: (
|
|
|
2533
3227
|
}
|
|
2534
3228
|
|
|
2535
3229
|
// #endregion
|
|
2536
|
-
// #region @import "./_grid-column-start-end.scss"; ->
|
|
3230
|
+
// #region @import "./_grid-column-start-end.scss"; -> scss/flex-grid/_grid-column-start-end.scss
|
|
2537
3231
|
// TODO: docs
|
|
2538
3232
|
|
|
2539
3233
|
@mixin kendo-utils--flex-grid--grid-column-start-end() {
|
|
@@ -2561,7 +3255,7 @@ $kendo-utils: (
|
|
|
2561
3255
|
}
|
|
2562
3256
|
|
|
2563
3257
|
// #endregion
|
|
2564
|
-
// #region @import "./_grid-row-start-end.scss"; ->
|
|
3258
|
+
// #region @import "./_grid-row-start-end.scss"; -> scss/flex-grid/_grid-row-start-end.scss
|
|
2565
3259
|
// TODO: docs
|
|
2566
3260
|
|
|
2567
3261
|
@mixin kendo-utils--flex-grid--grid-row-start-end() {
|
|
@@ -2589,7 +3283,7 @@ $kendo-utils: (
|
|
|
2589
3283
|
}
|
|
2590
3284
|
|
|
2591
3285
|
// #endregion
|
|
2592
|
-
// #region @import "./_grid-template-columns.scss"; ->
|
|
3286
|
+
// #region @import "./_grid-template-columns.scss"; -> scss/flex-grid/_grid-template-columns.scss
|
|
2593
3287
|
// TODO: docs
|
|
2594
3288
|
|
|
2595
3289
|
@mixin kendo-utils--flex-grid--grid-template-columns() {
|
|
@@ -2601,7 +3295,7 @@ $kendo-utils: (
|
|
|
2601
3295
|
}
|
|
2602
3296
|
|
|
2603
3297
|
// #endregion
|
|
2604
|
-
// #region @import "./_grid-template-rows.scss"; ->
|
|
3298
|
+
// #region @import "./_grid-template-rows.scss"; -> scss/flex-grid/_grid-template-rows.scss
|
|
2605
3299
|
// TODO: docs
|
|
2606
3300
|
|
|
2607
3301
|
@mixin kendo-utils--flex-grid--grid-template-rows() {
|
|
@@ -2613,7 +3307,7 @@ $kendo-utils: (
|
|
|
2613
3307
|
}
|
|
2614
3308
|
|
|
2615
3309
|
// #endregion
|
|
2616
|
-
// #region @import "./_justify-content.scss"; ->
|
|
3310
|
+
// #region @import "./_justify-content.scss"; -> scss/flex-grid/_justify-content.scss
|
|
2617
3311
|
// TODO: docs
|
|
2618
3312
|
|
|
2619
3313
|
@mixin kendo-utils--flex-grid--justify-content() {
|
|
@@ -2630,7 +3324,7 @@ $kendo-utils: (
|
|
|
2630
3324
|
}
|
|
2631
3325
|
|
|
2632
3326
|
// #endregion
|
|
2633
|
-
// #region @import "./_justify-items.scss"; ->
|
|
3327
|
+
// #region @import "./_justify-items.scss"; -> scss/flex-grid/_justify-items.scss
|
|
2634
3328
|
// TODO: docs
|
|
2635
3329
|
|
|
2636
3330
|
@mixin kendo-utils--flex-grid--justify-items() {
|
|
@@ -2642,7 +3336,7 @@ $kendo-utils: (
|
|
|
2642
3336
|
}
|
|
2643
3337
|
|
|
2644
3338
|
// #endregion
|
|
2645
|
-
// #region @import "./_justify-self.scss"; ->
|
|
3339
|
+
// #region @import "./_justify-self.scss"; -> scss/flex-grid/_justify-self.scss
|
|
2646
3340
|
// TODO: docs
|
|
2647
3341
|
|
|
2648
3342
|
@mixin kendo-utils--flex-grid--justify-self() {
|
|
@@ -2654,7 +3348,7 @@ $kendo-utils: (
|
|
|
2654
3348
|
}
|
|
2655
3349
|
|
|
2656
3350
|
// #endregion
|
|
2657
|
-
// #region @import "./_order.scss"; ->
|
|
3351
|
+
// #region @import "./_order.scss"; -> scss/flex-grid/_order.scss
|
|
2658
3352
|
/// This is equivalent to `order: -9999;`.
|
|
2659
3353
|
/// @name .k-order-first
|
|
2660
3354
|
/// @group order
|
|
@@ -2670,11 +3364,6 @@ $kendo-utils: (
|
|
|
2670
3364
|
/// @group order
|
|
2671
3365
|
/// @contextType css
|
|
2672
3366
|
|
|
2673
|
-
/// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc.
|
|
2674
|
-
/// @name .from k-order-1 to k-order-12
|
|
2675
|
-
/// @group order
|
|
2676
|
-
/// @contextType css
|
|
2677
|
-
|
|
2678
3367
|
@mixin kendo-utils--flex-grid--order() {
|
|
2679
3368
|
|
|
2680
3369
|
// Order utility classes
|
|
@@ -2684,7 +3373,7 @@ $kendo-utils: (
|
|
|
2684
3373
|
}
|
|
2685
3374
|
|
|
2686
3375
|
// #endregion
|
|
2687
|
-
// #region @import "./_place-content.scss"; ->
|
|
3376
|
+
// #region @import "./_place-content.scss"; -> scss/flex-grid/_place-content.scss
|
|
2688
3377
|
// TODO: docs
|
|
2689
3378
|
|
|
2690
3379
|
@mixin kendo-utils--flex-grid--place-content() {
|
|
@@ -2696,7 +3385,7 @@ $kendo-utils: (
|
|
|
2696
3385
|
}
|
|
2697
3386
|
|
|
2698
3387
|
// #endregion
|
|
2699
|
-
// #region @import "./_place-items.scss"; ->
|
|
3388
|
+
// #region @import "./_place-items.scss"; -> scss/flex-grid/_place-items.scss
|
|
2700
3389
|
// TODO: docs
|
|
2701
3390
|
|
|
2702
3391
|
@mixin kendo-utils--flex-grid--place-items() {
|
|
@@ -2708,7 +3397,7 @@ $kendo-utils: (
|
|
|
2708
3397
|
}
|
|
2709
3398
|
|
|
2710
3399
|
// #endregion
|
|
2711
|
-
// #region @import "./_place-self.scss"; ->
|
|
3400
|
+
// #region @import "./_place-self.scss"; -> scss/flex-grid/_place-self.scss
|
|
2712
3401
|
// TODO: docs
|
|
2713
3402
|
|
|
2714
3403
|
@mixin kendo-utils--flex-grid--place-self() {
|
|
@@ -2750,8 +3439,8 @@ $kendo-utils: (
|
|
|
2750
3439
|
}
|
|
2751
3440
|
|
|
2752
3441
|
// #endregion
|
|
2753
|
-
// #region @import "./spacing/index.import.scss"; ->
|
|
2754
|
-
// #region @import "./_margin.scss"; ->
|
|
3442
|
+
// #region @import "./spacing/index.import.scss"; -> scss/spacing/index.import.scss
|
|
3443
|
+
// #region @import "./_margin.scss"; -> scss/spacing/_margin.scss
|
|
2755
3444
|
// TODO: docs
|
|
2756
3445
|
|
|
2757
3446
|
@mixin kendo-utils--spacing--margin() {
|
|
@@ -2769,7 +3458,7 @@ $kendo-utils: (
|
|
|
2769
3458
|
}
|
|
2770
3459
|
|
|
2771
3460
|
// #endregion
|
|
2772
|
-
// #region @import "./_padding.scss"; ->
|
|
3461
|
+
// #region @import "./_padding.scss"; -> scss/spacing/_padding.scss
|
|
2773
3462
|
// TODO: docs
|
|
2774
3463
|
|
|
2775
3464
|
@mixin kendo-utils--spacing--padding() {
|
|
@@ -2787,7 +3476,7 @@ $kendo-utils: (
|
|
|
2787
3476
|
}
|
|
2788
3477
|
|
|
2789
3478
|
// #endregion
|
|
2790
|
-
// #region @import "./_space-between.scss"; ->
|
|
3479
|
+
// #region @import "./_space-between.scss"; -> scss/spacing/_space-between.scss
|
|
2791
3480
|
// TODO: docs
|
|
2792
3481
|
|
|
2793
3482
|
@mixin kendo-utils--spacing--space-between() {
|
|
@@ -2817,8 +3506,8 @@ $kendo-utils: (
|
|
|
2817
3506
|
}
|
|
2818
3507
|
|
|
2819
3508
|
// #endregion
|
|
2820
|
-
// #region @import "./sizing/index.import.scss"; ->
|
|
2821
|
-
// #region @import "./_height.scss"; ->
|
|
3509
|
+
// #region @import "./sizing/index.import.scss"; -> scss/sizing/index.import.scss
|
|
3510
|
+
// #region @import "./_height.scss"; -> scss/sizing/_height.scss
|
|
2822
3511
|
// TODO: docs
|
|
2823
3512
|
|
|
2824
3513
|
@mixin kendo-utils--sizing--height() {
|
|
@@ -2838,7 +3527,7 @@ $kendo-utils: (
|
|
|
2838
3527
|
}
|
|
2839
3528
|
|
|
2840
3529
|
// #endregion
|
|
2841
|
-
// #region @import "./_width.scss"; ->
|
|
3530
|
+
// #region @import "./_width.scss"; -> scss/sizing/_width.scss
|
|
2842
3531
|
// TODO: docs
|
|
2843
3532
|
|
|
2844
3533
|
@mixin kendo-utils--sizing--width() {
|
|
@@ -2866,9 +3555,9 @@ $kendo-utils: (
|
|
|
2866
3555
|
}
|
|
2867
3556
|
|
|
2868
3557
|
// #endregion
|
|
2869
|
-
// #region @import "./typography/index.import.scss"; ->
|
|
3558
|
+
// #region @import "./typography/index.import.scss"; -> scss/typography/index.import.scss
|
|
2870
3559
|
// font family
|
|
2871
|
-
// #region @import "./_font-size.scss"; ->
|
|
3560
|
+
// #region @import "./_font-size.scss"; -> scss/typography/_font-size.scss
|
|
2872
3561
|
// TODO: docs
|
|
2873
3562
|
|
|
2874
3563
|
@mixin kendo-utils--typography--font-size() {
|
|
@@ -2884,7 +3573,7 @@ $kendo-utils: (
|
|
|
2884
3573
|
|
|
2885
3574
|
// #endregion
|
|
2886
3575
|
// font smoothing
|
|
2887
|
-
// #region @import "./_font-style.scss"; ->
|
|
3576
|
+
// #region @import "./_font-style.scss"; -> scss/typography/_font-style.scss
|
|
2888
3577
|
// TODO: docs
|
|
2889
3578
|
|
|
2890
3579
|
@mixin kendo-utils--typography--font-style() {
|
|
@@ -2896,7 +3585,7 @@ $kendo-utils: (
|
|
|
2896
3585
|
}
|
|
2897
3586
|
|
|
2898
3587
|
// #endregion
|
|
2899
|
-
// #region @import "./_font-weight.scss"; ->
|
|
3588
|
+
// #region @import "./_font-weight.scss"; -> scss/typography/_font-weight.scss
|
|
2900
3589
|
// TODO: docs
|
|
2901
3590
|
|
|
2902
3591
|
@mixin kendo-utils--typography--font-weight() {
|
|
@@ -2916,7 +3605,7 @@ $kendo-utils: (
|
|
|
2916
3605
|
// letter spacing
|
|
2917
3606
|
// line height
|
|
2918
3607
|
// list style
|
|
2919
|
-
// #region @import "./_text-align.scss"; ->
|
|
3608
|
+
// #region @import "./_text-align.scss"; -> scss/typography/_text-align.scss
|
|
2920
3609
|
// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
|
|
2921
3610
|
|
|
2922
3611
|
/// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
|
|
@@ -2949,7 +3638,7 @@ $kendo-utils: (
|
|
|
2949
3638
|
}
|
|
2950
3639
|
|
|
2951
3640
|
// #endregion
|
|
2952
|
-
// #region @import "./_text-color.scss"; ->
|
|
3641
|
+
// #region @import "./_text-color.scss"; -> scss/typography/_text-color.scss
|
|
2953
3642
|
// TODO: docs
|
|
2954
3643
|
|
|
2955
3644
|
@mixin kendo-utils--typography--text-color() {
|
|
@@ -2966,7 +3655,7 @@ $kendo-utils: (
|
|
|
2966
3655
|
|
|
2967
3656
|
// #endregion
|
|
2968
3657
|
// text decoration
|
|
2969
|
-
// #region @import "./_text-transform.scss"; ->
|
|
3658
|
+
// #region @import "./_text-transform.scss"; -> scss/typography/_text-transform.scss
|
|
2970
3659
|
// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
|
|
2971
3660
|
|
|
2972
3661
|
/// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
|
|
@@ -2996,7 +3685,7 @@ $kendo-utils: (
|
|
|
2996
3685
|
// text overflow
|
|
2997
3686
|
// text indent
|
|
2998
3687
|
// vertical align
|
|
2999
|
-
// #region @import "./_white-space.scss"; ->
|
|
3688
|
+
// #region @import "./_white-space.scss"; -> scss/typography/_white-space.scss
|
|
3000
3689
|
// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
|
|
3001
3690
|
|
|
3002
3691
|
/// This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
|
|
@@ -3062,8 +3751,8 @@ $kendo-utils: (
|
|
|
3062
3751
|
}
|
|
3063
3752
|
|
|
3064
3753
|
// #endregion
|
|
3065
|
-
// #region @import "./background/index.import.scss"; ->
|
|
3066
|
-
// #region @import "./_background-color.scss"; ->
|
|
3754
|
+
// #region @import "./background/index.import.scss"; -> scss/background/index.import.scss
|
|
3755
|
+
// #region @import "./_background-color.scss"; -> scss/background/_background-color.scss
|
|
3067
3756
|
// TODO: docs
|
|
3068
3757
|
|
|
3069
3758
|
@mixin kendo-utils--background--background-color() {
|
|
@@ -3082,8 +3771,8 @@ $kendo-utils: (
|
|
|
3082
3771
|
}
|
|
3083
3772
|
|
|
3084
3773
|
// #endregion
|
|
3085
|
-
// #region @import "./border/index.import.scss"; ->
|
|
3086
|
-
// #region @import "./_border-color.scss"; ->
|
|
3774
|
+
// #region @import "./border/index.import.scss"; -> scss/border/index.import.scss
|
|
3775
|
+
// #region @import "./_border-color.scss"; -> scss/border/_border-color.scss
|
|
3087
3776
|
// TODO: docs
|
|
3088
3777
|
|
|
3089
3778
|
@mixin kendo-utils--border--border-color() {
|
|
@@ -3101,7 +3790,7 @@ $kendo-utils: (
|
|
|
3101
3790
|
}
|
|
3102
3791
|
|
|
3103
3792
|
// #endregion
|
|
3104
|
-
// #region @import "./_border-radius.scss"; ->
|
|
3793
|
+
// #region @import "./_border-radius.scss"; -> scss/border/_border-radius.scss
|
|
3105
3794
|
// TODO: docs
|
|
3106
3795
|
|
|
3107
3796
|
@mixin kendo-utils--border--border-radius() {
|
|
@@ -3121,7 +3810,7 @@ $kendo-utils: (
|
|
|
3121
3810
|
}
|
|
3122
3811
|
|
|
3123
3812
|
// #endregion
|
|
3124
|
-
// #region @import "./_border-style.scss"; ->
|
|
3813
|
+
// #region @import "./_border-style.scss"; -> scss/border/_border-style.scss
|
|
3125
3814
|
// TODO: docs
|
|
3126
3815
|
|
|
3127
3816
|
@mixin kendo-utils--border--border-style() {
|
|
@@ -3139,7 +3828,7 @@ $kendo-utils: (
|
|
|
3139
3828
|
}
|
|
3140
3829
|
|
|
3141
3830
|
// #endregion
|
|
3142
|
-
// #region @import "./_border-width.scss"; ->
|
|
3831
|
+
// #region @import "./_border-width.scss"; -> scss/border/_border-width.scss
|
|
3143
3832
|
// TODO: docs
|
|
3144
3833
|
|
|
3145
3834
|
@mixin kendo-utils--border--border-width() {
|
|
@@ -3164,7 +3853,7 @@ $kendo-utils: (
|
|
|
3164
3853
|
}
|
|
3165
3854
|
|
|
3166
3855
|
// #endregion
|
|
3167
|
-
// #region @import "./_outline-color.scss"; ->
|
|
3856
|
+
// #region @import "./_outline-color.scss"; -> scss/border/_outline-color.scss
|
|
3168
3857
|
// TODO: docs
|
|
3169
3858
|
|
|
3170
3859
|
@mixin kendo-utils--border--outline-color() {
|
|
@@ -3176,7 +3865,7 @@ $kendo-utils: (
|
|
|
3176
3865
|
}
|
|
3177
3866
|
|
|
3178
3867
|
// #endregion
|
|
3179
|
-
// #region @import "./_outline-offset.scss"; ->
|
|
3868
|
+
// #region @import "./_outline-offset.scss"; -> scss/border/_outline-offset.scss
|
|
3180
3869
|
// TODO: docs
|
|
3181
3870
|
|
|
3182
3871
|
@mixin kendo-utils--border--outline-offset() {
|
|
@@ -3188,7 +3877,7 @@ $kendo-utils: (
|
|
|
3188
3877
|
}
|
|
3189
3878
|
|
|
3190
3879
|
// #endregion
|
|
3191
|
-
// #region @import "./_outline-style.scss"; ->
|
|
3880
|
+
// #region @import "./_outline-style.scss"; -> scss/border/_outline-style.scss
|
|
3192
3881
|
// TODO: docs
|
|
3193
3882
|
|
|
3194
3883
|
@mixin kendo-utils--border--outline-style() {
|
|
@@ -3200,7 +3889,7 @@ $kendo-utils: (
|
|
|
3200
3889
|
}
|
|
3201
3890
|
|
|
3202
3891
|
// #endregion
|
|
3203
|
-
// #region @import "./_outline-width.scss"; ->
|
|
3892
|
+
// #region @import "./_outline-width.scss"; -> scss/border/_outline-width.scss
|
|
3204
3893
|
// TODO: docs
|
|
3205
3894
|
|
|
3206
3895
|
@mixin kendo-utils--border--outline-width() {
|
|
@@ -3228,8 +3917,8 @@ $kendo-utils: (
|
|
|
3228
3917
|
// #endregion
|
|
3229
3918
|
// effects
|
|
3230
3919
|
// filter
|
|
3231
|
-
// #region @import "./table/index.import.scss"; ->
|
|
3232
|
-
// #region @import "./_border-collapse.scss"; ->
|
|
3920
|
+
// #region @import "./table/index.import.scss"; -> scss/table/index.import.scss
|
|
3921
|
+
// #region @import "./_border-collapse.scss"; -> scss/table/_border-collapse.scss
|
|
3233
3922
|
// TODO: docs
|
|
3234
3923
|
|
|
3235
3924
|
@mixin kendo-utils--table--border-collapse() {
|
|
@@ -3241,7 +3930,7 @@ $kendo-utils: (
|
|
|
3241
3930
|
}
|
|
3242
3931
|
|
|
3243
3932
|
// #endregion
|
|
3244
|
-
// #region @import "./_table-layout.scss"; ->
|
|
3933
|
+
// #region @import "./_table-layout.scss"; -> scss/table/_table-layout.scss
|
|
3245
3934
|
// Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
|
|
3246
3935
|
|
|
3247
3936
|
/// This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
|
|
@@ -3273,8 +3962,8 @@ $kendo-utils: (
|
|
|
3273
3962
|
|
|
3274
3963
|
// #endregion
|
|
3275
3964
|
// transition
|
|
3276
|
-
// #region @import "./transform/index.import.scss"; ->
|
|
3277
|
-
// #region @import "./_flip.scss"; ->
|
|
3965
|
+
// #region @import "./transform/index.import.scss"; -> scss/transform/index.import.scss
|
|
3966
|
+
// #region @import "./_flip.scss"; -> scss/transform/_flip.scss
|
|
3278
3967
|
/// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
|
|
3279
3968
|
/// @name .k-flip-h
|
|
3280
3969
|
/// @group transform
|
|
@@ -3309,7 +3998,7 @@ $kendo-utils: (
|
|
|
3309
3998
|
}
|
|
3310
3999
|
|
|
3311
4000
|
// #endregion
|
|
3312
|
-
// #region @import "./_origin.scss"; ->
|
|
4001
|
+
// #region @import "./_origin.scss"; -> scss/transform/_origin.scss
|
|
3313
4002
|
// TODO: docs
|
|
3314
4003
|
|
|
3315
4004
|
@mixin kendo-utils--transform--origin() {
|
|
@@ -3321,7 +4010,7 @@ $kendo-utils: (
|
|
|
3321
4010
|
}
|
|
3322
4011
|
|
|
3323
4012
|
// #endregion
|
|
3324
|
-
// #region @import "./_rotate.scss"; ->
|
|
4013
|
+
// #region @import "./_rotate.scss"; -> scss/transform/_rotate.scss
|
|
3325
4014
|
/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
|
|
3326
4015
|
/// @name .k-rotate-0
|
|
3327
4016
|
/// @group transform
|
|
@@ -3377,7 +4066,7 @@ $kendo-utils: (
|
|
|
3377
4066
|
}
|
|
3378
4067
|
|
|
3379
4068
|
// #endregion
|
|
3380
|
-
// #region @import "./_scale.scss"; ->
|
|
4069
|
+
// #region @import "./_scale.scss"; -> scss/transform/_scale.scss
|
|
3381
4070
|
/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
|
|
3382
4071
|
/// @name .k-scale-0
|
|
3383
4072
|
/// @group transform
|
|
@@ -3416,7 +4105,7 @@ $kendo-utils: (
|
|
|
3416
4105
|
}
|
|
3417
4106
|
|
|
3418
4107
|
// #endregion
|
|
3419
|
-
// #region @import "./_skew.scss"; ->
|
|
4108
|
+
// #region @import "./_skew.scss"; -> scss/transform/_skew.scss
|
|
3420
4109
|
// TODO: docs
|
|
3421
4110
|
|
|
3422
4111
|
// sass-lint:disable function-name-format
|
|
@@ -3438,7 +4127,7 @@ $kendo-utils: (
|
|
|
3438
4127
|
}
|
|
3439
4128
|
|
|
3440
4129
|
// #endregion
|
|
3441
|
-
// #region @import "./_translate.scss"; ->
|
|
4130
|
+
// #region @import "./_translate.scss"; -> scss/transform/_translate.scss
|
|
3442
4131
|
/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
|
|
3443
4132
|
/// @name .k-translate-0
|
|
3444
4133
|
/// @group transform
|
|
@@ -3530,8 +4219,8 @@ $kendo-utils: (
|
|
|
3530
4219
|
}
|
|
3531
4220
|
|
|
3532
4221
|
// #endregion
|
|
3533
|
-
// #region @import "./interactivity/index.import.scss"; ->
|
|
3534
|
-
// #region @import "./_accent-color.scss"; ->
|
|
4222
|
+
// #region @import "./interactivity/index.import.scss"; -> scss/interactivity/index.import.scss
|
|
4223
|
+
// #region @import "./_accent-color.scss"; -> scss/interactivity/_accent-color.scss
|
|
3535
4224
|
// TODO: docs
|
|
3536
4225
|
|
|
3537
4226
|
@mixin kendo-utils--interactivity--accent-color() {
|
|
@@ -3543,7 +4232,7 @@ $kendo-utils: (
|
|
|
3543
4232
|
}
|
|
3544
4233
|
|
|
3545
4234
|
// #endregion
|
|
3546
|
-
// #region @import "./_appearance.scss"; ->
|
|
4235
|
+
// #region @import "./_appearance.scss"; -> scss/interactivity/_appearance.scss
|
|
3547
4236
|
/// This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
|
|
3548
4237
|
/// @name .k-appearance-none
|
|
3549
4238
|
/// @group appearance
|
|
@@ -3563,7 +4252,7 @@ $kendo-utils: (
|
|
|
3563
4252
|
}
|
|
3564
4253
|
|
|
3565
4254
|
// #endregion
|
|
3566
|
-
// #region @import "./_caret-color.scss"; ->
|
|
4255
|
+
// #region @import "./_caret-color.scss"; -> scss/interactivity/_caret-color.scss
|
|
3567
4256
|
// TODO: docs
|
|
3568
4257
|
|
|
3569
4258
|
@mixin kendo-utils--interactivity--caret-color() {
|
|
@@ -3575,7 +4264,7 @@ $kendo-utils: (
|
|
|
3575
4264
|
}
|
|
3576
4265
|
|
|
3577
4266
|
// #endregion
|
|
3578
|
-
// #region @import "./_cursor.scss"; ->
|
|
4267
|
+
// #region @import "./_cursor.scss"; -> scss/interactivity/_cursor.scss
|
|
3579
4268
|
// TODO: docs
|
|
3580
4269
|
|
|
3581
4270
|
@mixin kendo-utils--interactivity--cursor() {
|
|
@@ -3587,7 +4276,7 @@ $kendo-utils: (
|
|
|
3587
4276
|
}
|
|
3588
4277
|
|
|
3589
4278
|
// #endregion
|
|
3590
|
-
// #region @import "./_pointer-events.scss"; ->
|
|
4279
|
+
// #region @import "./_pointer-events.scss"; -> scss/interactivity/_pointer-events.scss
|
|
3591
4280
|
// Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
|
|
3592
4281
|
|
|
3593
4282
|
/// This is equivalent to `pointer-events: none;`. The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
|
|
@@ -3609,7 +4298,7 @@ $kendo-utils: (
|
|
|
3609
4298
|
}
|
|
3610
4299
|
|
|
3611
4300
|
// #endregion
|
|
3612
|
-
// #region @import "./_resize.scss"; ->
|
|
4301
|
+
// #region @import "./_resize.scss"; -> scss/interactivity/_resize.scss
|
|
3613
4302
|
// Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
|
|
3614
4303
|
|
|
3615
4304
|
/// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
|
|
@@ -3641,7 +4330,7 @@ $kendo-utils: (
|
|
|
3641
4330
|
}
|
|
3642
4331
|
|
|
3643
4332
|
// #endregion
|
|
3644
|
-
// #region @import "./_scroll.scss"; ->
|
|
4333
|
+
// #region @import "./_scroll.scss"; -> scss/interactivity/_scroll.scss
|
|
3645
4334
|
// TODO: docs
|
|
3646
4335
|
|
|
3647
4336
|
@mixin kendo-utils--interactivity--scroll() {
|
|
@@ -3694,7 +4383,7 @@ $kendo-utils: (
|
|
|
3694
4383
|
}
|
|
3695
4384
|
|
|
3696
4385
|
// #endregion
|
|
3697
|
-
// #region @import "./_touch-action.scss"; ->
|
|
4386
|
+
// #region @import "./_touch-action.scss"; -> scss/interactivity/_touch-action.scss
|
|
3698
4387
|
// TODO: docs
|
|
3699
4388
|
|
|
3700
4389
|
/// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
|
|
@@ -3716,7 +4405,7 @@ $kendo-utils: (
|
|
|
3716
4405
|
}
|
|
3717
4406
|
|
|
3718
4407
|
// #endregion
|
|
3719
|
-
// #region @import "./_user-select.scss"; ->
|
|
4408
|
+
// #region @import "./_user-select.scss"; -> scss/interactivity/_user-select.scss
|
|
3720
4409
|
// User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
|
|
3721
4410
|
|
|
3722
4411
|
/// This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
|
|
@@ -3753,7 +4442,7 @@ $kendo-utils: (
|
|
|
3753
4442
|
}
|
|
3754
4443
|
|
|
3755
4444
|
// #endregion
|
|
3756
|
-
// #region @import "./_will-change.scss"; ->
|
|
4445
|
+
// #region @import "./_will-change.scss"; -> scss/interactivity/_will-change.scss
|
|
3757
4446
|
// TODO: docs
|
|
3758
4447
|
|
|
3759
4448
|
@mixin kendo-utils--interactivity--will-change() {
|