@progress/kendo-theme-utils 6.1.1-dev.8 → 6.2.0
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.css +564 -102
- package/dist/all.scss +938 -164
- package/dist/meta/sassdoc-data.json +3009 -0
- package/dist/meta/sassdoc-raw-data.json +2998 -0
- package/dist/meta/variables.json +66 -0
- package/dist/meta/variables.scss +10 -0
- package/package.json +3 -3
- package/scss/_variables.scss +86 -28
- package/scss/flex-grid/_order.scss +0 -5
- package/scss/typography/_text-overflow.scss +24 -0
- package/scss/typography/index.import.scss +2 -6
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,13 +581,18 @@ $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
|
|
585
|
+
$kendo-light-color-level-step: 8% !default;
|
|
586
|
+
$kendo-dark-color-level-step: 16% !default;
|
|
587
|
+
|
|
441
588
|
/// Set a specific jump point for requesting color jumps
|
|
442
589
|
/// @group color-system
|
|
443
590
|
/// @access private
|
|
444
591
|
$kendo-color-level-step: 8% !default;
|
|
445
592
|
|
|
446
593
|
@function k-color-level( $color, $level: 0 ) {
|
|
594
|
+
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
595
|
+
$_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
|
|
447
596
|
|
|
448
597
|
@if ( $level == 0 ) or ( $level == 0% ) {
|
|
449
598
|
@return $color;
|
|
@@ -457,16 +606,41 @@ $kendo-color-level-step: 8% !default;
|
|
|
457
606
|
@return k-color-mix( $base, $color, $level );
|
|
458
607
|
}
|
|
459
608
|
|
|
460
|
-
@return k-color-mix( $base, $color, $level * $
|
|
609
|
+
@return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
|
|
461
610
|
}
|
|
462
611
|
|
|
612
|
+
/// Makes a color lighter by mixing it with white
|
|
613
|
+
/// @param {Color} $color - The color to lighten
|
|
614
|
+
/// @param {Number} $level - The amount to lighten the color
|
|
615
|
+
/// @return {Color} - The lightened color
|
|
616
|
+
///
|
|
617
|
+
/// @group color-system
|
|
618
|
+
///
|
|
619
|
+
/// @example scss - Usage
|
|
620
|
+
/// @debug k-color-tint( #f00, 1 ); // => #ff1a1a
|
|
463
621
|
@function k-color-tint( $color, $level: 1 ) {
|
|
464
622
|
@return k-color-level( $color, -$level );
|
|
465
623
|
}
|
|
624
|
+
|
|
625
|
+
/// Makes a color darker by mixing it with black
|
|
626
|
+
/// @param {Color} $color - The color to darken
|
|
627
|
+
/// @param {Number} $level - The amount to darken the color
|
|
628
|
+
/// @return {Color} - The darkened color
|
|
629
|
+
///
|
|
630
|
+
/// @group color-system
|
|
631
|
+
///
|
|
632
|
+
/// @example scss - Usage
|
|
633
|
+
/// @debug k-color-shade( #f00, 1 ); // => #e60000
|
|
466
634
|
@function k-color-shade( $color, $level: 1 ) {
|
|
467
635
|
@return k-color-level( $color, $level );
|
|
468
636
|
}
|
|
469
637
|
|
|
638
|
+
/// Shades the color in light themes and tints it in dark themes
|
|
639
|
+
/// @param {Color} $color - The color to shade or tint
|
|
640
|
+
/// @param {Number} $level - The amount to shade or tint the color
|
|
641
|
+
/// @return {Color} - The shaded or tinted color
|
|
642
|
+
///
|
|
643
|
+
/// @group color-system
|
|
470
644
|
@function k-try-shade( $color, $level: 1 ) {
|
|
471
645
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
472
646
|
|
|
@@ -476,6 +650,13 @@ $kendo-color-level-step: 8% !default;
|
|
|
476
650
|
|
|
477
651
|
@return k-color-shade( $color, $level );
|
|
478
652
|
}
|
|
653
|
+
|
|
654
|
+
/// Tints the color in light themes and shades it in dark themes
|
|
655
|
+
/// @param {Color} $color - The color to tint or shade
|
|
656
|
+
/// @param {Number} $level - The amount to tint or shade the color
|
|
657
|
+
/// @return {Color} - The tinted or shaded color
|
|
658
|
+
///
|
|
659
|
+
/// @group color-system
|
|
479
660
|
@function k-try-tint( $color, $level: 1 ) {
|
|
480
661
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
481
662
|
|
|
@@ -486,7 +667,12 @@ $kendo-color-level-step: 8% !default;
|
|
|
486
667
|
@return k-color-tint( $color, $level );
|
|
487
668
|
}
|
|
488
669
|
|
|
489
|
-
|
|
670
|
+
/// Darkens the color in light themes and lightens it in dark themes
|
|
671
|
+
/// @param {Color} $color - The color to darken or lighten
|
|
672
|
+
/// @param {Number} $level - The amount to darken or lighten the color
|
|
673
|
+
/// @return {Color} - The darkened or lightened color
|
|
674
|
+
///
|
|
675
|
+
/// @group color-system
|
|
490
676
|
@function k-try-darken( $color, $amount ) {
|
|
491
677
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
492
678
|
|
|
@@ -496,6 +682,12 @@ $kendo-color-level-step: 8% !default;
|
|
|
496
682
|
@return k-color-darken( $color, $amount );
|
|
497
683
|
}
|
|
498
684
|
|
|
685
|
+
/// Lightens the color in light themes and darkens it in dark themes
|
|
686
|
+
/// @param {Color} $color - The color to lighten or darken
|
|
687
|
+
/// @param {Number} $level - The amount to lighten or darken the color
|
|
688
|
+
/// @return {Color} - The lightened or darkened color
|
|
689
|
+
///
|
|
690
|
+
/// @group color-system
|
|
499
691
|
@function k-try-lighten( $color, $amount ) {
|
|
500
692
|
$_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
|
|
501
693
|
|
|
@@ -505,6 +697,15 @@ $kendo-color-level-step: 8% !default;
|
|
|
505
697
|
@return k-color-lighten( $color, $amount );
|
|
506
698
|
}
|
|
507
699
|
|
|
700
|
+
/// Converts a color with alpha to solid color mixed with a background color
|
|
701
|
+
/// @param {Color} $color - The color to convert
|
|
702
|
+
/// @param {Color} $bg - The background color
|
|
703
|
+
/// @return {Color} - The converted color
|
|
704
|
+
///
|
|
705
|
+
/// @group color-system
|
|
706
|
+
///
|
|
707
|
+
/// @example scss - Usage
|
|
708
|
+
/// @debug k-rgba-to-mix( rgba( #f00, 0.5 ), #fff ); // => #ff8080
|
|
508
709
|
@function k-rgba-to-mix( $color, $bg ) {
|
|
509
710
|
$percent: k-color-alpha( $color ) * 100%;
|
|
510
711
|
|
|
@@ -517,7 +718,7 @@ $kendo-color-level-step: 8% !default;
|
|
|
517
718
|
}
|
|
518
719
|
|
|
519
720
|
// #endregion
|
|
520
|
-
// #region @import "./_custom-properties.import.scss"; ->
|
|
721
|
+
// #region @import "./_custom-properties.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
|
|
521
722
|
@function k-var( $prefix: kendo-, $var: null, $fallback: null ) {
|
|
522
723
|
$_prefix: $prefix;
|
|
523
724
|
$_var: $var;
|
|
@@ -557,7 +758,7 @@ $kendo-color-level-step: 8% !default;
|
|
|
557
758
|
}
|
|
558
759
|
|
|
559
760
|
// #endregion
|
|
560
|
-
// #region @import "./_escape-string.import.scss"; ->
|
|
761
|
+
// #region @import "./_escape-string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_escape-string.import.scss
|
|
561
762
|
$_kendo-svg-escaped-characters: (
|
|
562
763
|
("%", "%25"),
|
|
563
764
|
("<", "%3c"),
|
|
@@ -567,7 +768,11 @@ $_kendo-svg-escaped-characters: (
|
|
|
567
768
|
(")", "%29")
|
|
568
769
|
) !default;
|
|
569
770
|
|
|
570
|
-
|
|
771
|
+
/// Escapes SVG characters in a string
|
|
772
|
+
/// @param {String} $string - The string to escape
|
|
773
|
+
/// @return {String} - The escaped string
|
|
774
|
+
///
|
|
775
|
+
/// @link https://codepen.io/kevinweber/pen/dXWoRw
|
|
571
776
|
@function k-escape-svg($string) {
|
|
572
777
|
@if k-string-index($string, "data:image/svg+xml") {
|
|
573
778
|
@each $char, $encoded in $_kendo-svg-escaped-characters {
|
|
@@ -590,6 +795,9 @@ $_kendo-escape-class-name: (
|
|
|
590
795
|
"/": "\\/"
|
|
591
796
|
);
|
|
592
797
|
|
|
798
|
+
/// Escapes special characters in a class name
|
|
799
|
+
/// @param {String} $text - The string to escape
|
|
800
|
+
/// @return {String} - The escaped string
|
|
593
801
|
@function k-escape-class-name( $text ) {
|
|
594
802
|
$_text: $text;
|
|
595
803
|
|
|
@@ -601,41 +809,111 @@ $_kendo-escape-class-name: (
|
|
|
601
809
|
}
|
|
602
810
|
|
|
603
811
|
// #endregion
|
|
604
|
-
// #region @import "./_lang.import.scss"; ->
|
|
812
|
+
// #region @import "./_lang.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_lang.import.scss
|
|
813
|
+
/// Returns the value of a variable if it is not null,
|
|
814
|
+
/// otherwise returns the fallback value.
|
|
815
|
+
/// @param {Any} $var - The variable to check.
|
|
816
|
+
/// @param {Any} $fallback - The fallback value.
|
|
817
|
+
/// @return {Any} - The value of the variable or the fallback value.
|
|
818
|
+
///
|
|
819
|
+
/// @example scss - Usage
|
|
820
|
+
/// $foo: null;
|
|
821
|
+
/// @debug k-if-var( $foo, "bar" ); // => "bar"
|
|
822
|
+
/// $foo: "baz";
|
|
823
|
+
/// @debug k-if-var( $foo, "bar" ); // => "baz"
|
|
605
824
|
@function k-if-var( $var, $fallback ) {
|
|
606
825
|
@return if( $var != null, $var, $fallback );
|
|
607
826
|
}
|
|
608
827
|
|
|
609
828
|
// #endregion
|
|
610
|
-
// #region @import "./_list.import.scss"; ->
|
|
829
|
+
// #region @import "./_list.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_list.import.scss
|
|
830
|
+
/// Returns a copy of `$list` with `$val` appended to the end.
|
|
831
|
+
/// @param {List} $list - The list to process.
|
|
832
|
+
/// @param {Any} $val - The value to append to `$list`.
|
|
833
|
+
/// @param {String} $separator - The separator to use between `$list` and `$val`.
|
|
834
|
+
/// @return {List} - A copy of `$list` with `$val` appended to the end.
|
|
835
|
+
///
|
|
836
|
+
/// @example scss - Usage
|
|
837
|
+
/// @debug k-list-append( ( "foo", "bar" ), "baz" ); // => "foo, bar, baz"
|
|
611
838
|
@function k-list-append( $list, $val, $separator: auto ) {
|
|
612
839
|
@return append( $list, $val, $separator );
|
|
613
840
|
}
|
|
614
841
|
|
|
842
|
+
/// Checks whether `$list` contains `$value`.
|
|
843
|
+
/// @param {List} $list - The list to check.
|
|
844
|
+
/// @param {Any} $value - The value to check for.
|
|
845
|
+
/// @return {Boolean} - Whether `$list` contains `$value`.
|
|
846
|
+
///
|
|
847
|
+
/// @example scss - Usage
|
|
848
|
+
/// @debug k-list-includes( ( "foo", "bar" ), "foo" ); // => true
|
|
849
|
+
/// @debug k-list-includes( ( "foo", "bar" ), "baz" ); // => false
|
|
615
850
|
@function k-list-includes( $list, $value ) {
|
|
616
851
|
@return k-list-index( $list, $value ) != null;
|
|
617
852
|
}
|
|
618
853
|
|
|
854
|
+
/// Returns the index of `$value` in `$list`.
|
|
855
|
+
/// @param {List} $list - The list to check.
|
|
856
|
+
/// @param {Any} $value - The value to check for.
|
|
857
|
+
/// @return {Number} - The index of `$value` in `$list`.
|
|
858
|
+
///
|
|
859
|
+
/// @example scss - Usage
|
|
860
|
+
/// @debug k-list-index( ( "foo", "bar" ), "foo" ); // => 1
|
|
619
861
|
@function k-list-index( $list, $value ) {
|
|
620
862
|
@return index( $list, $value );
|
|
621
863
|
}
|
|
622
864
|
|
|
865
|
+
/// Returns whether `$list` is bracketed.
|
|
866
|
+
/// @param {List} $list - The list to check.
|
|
867
|
+
/// @return {Boolean} - Whether `$list` is bracketed.
|
|
868
|
+
///
|
|
869
|
+
/// @example scss - Usage
|
|
870
|
+
/// @debug k-list-is-bracketed( ( "foo", "bar" ) ); // => false
|
|
871
|
+
/// @debug k-list-is-bracketed( [ "foo", "bar" ] ); // => true
|
|
623
872
|
@function k-list-is-bracketed( $list ) {
|
|
624
873
|
@return is-bracketed( $list );
|
|
625
874
|
}
|
|
626
875
|
|
|
876
|
+
/// Joins two lists together.
|
|
877
|
+
/// @param {List} $list1 - The first list to join.
|
|
878
|
+
/// @param {List} $list2 - The second list to join.
|
|
879
|
+
/// @param {String} $separator - The separator to use between `$list1` and `$list2`.
|
|
880
|
+
/// @param {Boolean} $bracketed - Whether the result should be bracketed.
|
|
881
|
+
/// @return {List} - The joined list.
|
|
882
|
+
///
|
|
883
|
+
/// @example scss - Usage
|
|
884
|
+
/// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ) ); // => "foo, bar, baz, qux"
|
|
885
|
+
/// @debug k-list-join( ( "foo", "bar" ), ( "baz", "qux" ), " " ); // => "foo bar baz qux"
|
|
627
886
|
@function k-list-join( $list1, $list2, $separator: auto, $bracketed: auto ) {
|
|
628
887
|
@return join( $list1, $list2, $separator, $bracketed );
|
|
629
888
|
}
|
|
630
889
|
|
|
890
|
+
/// Returns the length of `$list`.
|
|
891
|
+
/// @param {List} $list - The list to check.
|
|
892
|
+
/// @return {Number} - The length of `$list`.
|
|
893
|
+
///
|
|
894
|
+
/// @example scss - Usage
|
|
895
|
+
/// @debug k-list-length( ( "foo", "bar" ) ); // => 2
|
|
631
896
|
@function k-list-length( $list ) {
|
|
632
897
|
@return length( $list );
|
|
633
898
|
}
|
|
634
899
|
|
|
900
|
+
/// Returns the nth item in `$list`.
|
|
901
|
+
/// @param {List} $list - The list to check.
|
|
902
|
+
/// @param {Number} $n - The index of the item to return.
|
|
903
|
+
/// @return {Any} - The nth item in `$list`.
|
|
904
|
+
///
|
|
905
|
+
/// @example scss - Usage
|
|
906
|
+
/// @debug k-list-nth( ( "foo", "bar" ), 1 ); // => "foo"
|
|
635
907
|
@function k-list-nth( $list, $n ) {
|
|
636
908
|
@return nth( $list, $n );
|
|
637
909
|
}
|
|
638
910
|
|
|
911
|
+
/// Reverse the order of items in `$list`.
|
|
912
|
+
/// @param {List} $list - The list to reverse.
|
|
913
|
+
/// @return {List} - The reversed list.
|
|
914
|
+
///
|
|
915
|
+
/// @example scss - Usage
|
|
916
|
+
/// @debug k-list-reverse( ( "foo", "bar" ) ); // => "bar, foo"
|
|
639
917
|
@function k-list-reverse( $list: null ) {
|
|
640
918
|
$result: ();
|
|
641
919
|
|
|
@@ -654,64 +932,185 @@ $_kendo-escape-class-name: (
|
|
|
654
932
|
@return $result;
|
|
655
933
|
}
|
|
656
934
|
|
|
935
|
+
/// Returns the separator of `$list`.
|
|
936
|
+
/// @param {List} $list - The list to check.
|
|
937
|
+
/// @return {String} - The separator of `$list`.
|
|
938
|
+
///
|
|
939
|
+
/// @example scss - Usage
|
|
940
|
+
/// @debug k-list-separator( ( "foo", "bar" ) ); // => ","
|
|
657
941
|
@function k-list-separator( $list ) {
|
|
658
942
|
@return list-separator( $list );
|
|
659
943
|
}
|
|
660
944
|
|
|
945
|
+
/// Returns a copy of `$list` with `$val` inserted at `$n`.
|
|
946
|
+
/// @param {List} $list - The list to process.
|
|
947
|
+
/// @param {Number} $n - The index at which to insert `$val`.
|
|
948
|
+
/// @param {Any} $val - The value to insert.
|
|
949
|
+
/// @return {List} - A copy of `$list` with `$val` inserted at `$n`.
|
|
950
|
+
///
|
|
951
|
+
/// @example scss - Usage
|
|
952
|
+
/// @debug k-list-set-nth( ( "foo", "bar" ), 1, "baz" ); // => "baz, bar"
|
|
661
953
|
@function k-list-set-nth( $list, $n, $value ) {
|
|
662
954
|
@return set-nth( $list, $n, $value );
|
|
663
955
|
}
|
|
664
956
|
|
|
957
|
+
/// Combines two lists into a single list of two-item lists.
|
|
958
|
+
/// @param {List} $list1 - The first list to combine.
|
|
959
|
+
/// @param {List} $list2 - The second list to combine.
|
|
960
|
+
/// @return {List} - A list of two-item lists.
|
|
961
|
+
///
|
|
962
|
+
/// @example scss - Usage
|
|
963
|
+
/// @debug k-list-zip( ( "foo", "bar" ), ( "baz", "qux" ) ); // => ((foo, baz), (bar, qux))
|
|
665
964
|
@function k-list-zip( $lists... ) {
|
|
666
965
|
@return zip( $lists... );
|
|
667
966
|
}
|
|
668
967
|
|
|
669
968
|
// #endregion
|
|
670
|
-
// #region @import "./_math.import.scss"; ->
|
|
969
|
+
// #region @import "./_math.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_math.import.scss
|
|
970
|
+
/// Returns the absolute value of a number.
|
|
971
|
+
/// @param {Number} $number - The number to get the absolute value of.
|
|
972
|
+
/// @return {Number} - The absolute value of `$number`.
|
|
973
|
+
///
|
|
974
|
+
/// @example scss - Usage
|
|
975
|
+
/// @debug k-math-abs( -10 ); // => 10
|
|
671
976
|
@function k-math-abs( $number ) {
|
|
672
977
|
@return abs( $number );
|
|
673
978
|
}
|
|
674
979
|
|
|
980
|
+
/// Returns the smallest integer greater than or equal to a number.
|
|
981
|
+
/// @param {Number} $number - The number to get the ceiling of.
|
|
982
|
+
/// @return {Number} - The ceiling of `$number`.
|
|
983
|
+
///
|
|
984
|
+
/// @example scss - Usage
|
|
985
|
+
/// @debug k-math-ceil( 10.1 ); // => 11
|
|
675
986
|
@function k-math-ceil( $number ) {
|
|
676
987
|
@return ceil( $number );
|
|
677
988
|
}
|
|
678
989
|
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
}
|
|
682
|
-
|
|
990
|
+
/// Returns the largest integer less than or equal to a number.
|
|
991
|
+
/// @param {Number} $number - The number to get the floor of.
|
|
992
|
+
/// @return {Number} - The floor of `$number`.
|
|
993
|
+
///
|
|
994
|
+
/// @example scss - Usage
|
|
995
|
+
/// @debug k-math-floor( 10.9 ); // => 10
|
|
996
|
+
@function k-math-floor( $number ) {
|
|
997
|
+
@return floor( $number );
|
|
998
|
+
}
|
|
999
|
+
|
|
1000
|
+
/// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
|
|
1001
|
+
/// less than `$min`, `$min` is returned. If `$number` is greater than `$max`,
|
|
1002
|
+
/// `$max` is returned. Otherwise, `$number` is returned.
|
|
1003
|
+
/// @param {Number} $number - The number to clamp.
|
|
1004
|
+
/// @param {Number} $min - The minimum value.
|
|
1005
|
+
/// @param {Number} $max - The maximum value.
|
|
1006
|
+
/// @return {Number} - The clamped number.
|
|
1007
|
+
///
|
|
1008
|
+
/// @example scss - Usage
|
|
1009
|
+
/// @debug k-math-clamp( 10, 0, 5 ); // => 5
|
|
1010
|
+
@function k-math-clamp( $number, $min, $max ) {
|
|
1011
|
+
@return k-math-max( $min, k-math-min( $max, $number ) );
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
/// Returns whether two numbers have compatible units.
|
|
1015
|
+
/// @param {Number} $a - The first number.
|
|
1016
|
+
/// @param {Number} $b - The second number.
|
|
1017
|
+
/// @return {Boolean} - Whether the numbers have compatible units.
|
|
1018
|
+
///
|
|
1019
|
+
/// @example scss - Usage
|
|
1020
|
+
/// @debug k-math-compatible( 10px, 10px ); // => true
|
|
1021
|
+
/// @debug k-math-compatible( 10px, 10em ); // => false
|
|
683
1022
|
@function k-math-compatible( $a, $b ) {
|
|
684
1023
|
@return comparable( $a, $b );
|
|
685
1024
|
}
|
|
686
1025
|
|
|
1026
|
+
/// Returns the quotient of two numbers.
|
|
1027
|
+
/// @param {Number} $a - The dividend.
|
|
1028
|
+
/// @param {Number} $b - The divisor.
|
|
1029
|
+
/// @return {Number} - The quotient of `$a` and `$b`.
|
|
1030
|
+
///
|
|
1031
|
+
/// @example scss - Usage
|
|
1032
|
+
/// @debug k-math-div( 10, 2 ); // => 5
|
|
1033
|
+
/// @debug k-math-div( 10px, 2 ); // => 5px
|
|
687
1034
|
@function k-math-div( $a, $b ) {
|
|
688
1035
|
@return ( $a / $b );
|
|
689
1036
|
}
|
|
690
1037
|
|
|
1038
|
+
/// Returns whether `$number` has no units.
|
|
1039
|
+
/// @param {Number} $number - The number to check.
|
|
1040
|
+
/// @return {Boolean} - Whether `$number` has no units.
|
|
1041
|
+
///
|
|
1042
|
+
/// @example scss - Usage
|
|
1043
|
+
/// @debug k-math-is-unitless( 10 ); // => true
|
|
1044
|
+
/// @debug k-math-is-unitless( 10px ); // => false
|
|
691
1045
|
@function k-math-is-unitless( $number ) {
|
|
692
1046
|
@return unitless( $number );
|
|
693
1047
|
}
|
|
694
1048
|
|
|
1049
|
+
/// Returns the larger of two numbers.
|
|
1050
|
+
/// @param {Number} $a - The first number.
|
|
1051
|
+
/// @param {Number} $b - The second number.
|
|
1052
|
+
/// @return {Number} - The larger of `$a` and `$b`.
|
|
1053
|
+
///
|
|
1054
|
+
/// @example scss - Usage
|
|
1055
|
+
/// @debug k-math-max( 10, 20 ); // => 20
|
|
1056
|
+
/// @debug k-math-max( 10px, 20px ); // => 20px
|
|
695
1057
|
@function k-math-max( $a, $b ) {
|
|
696
1058
|
@return max( $a, $b );
|
|
697
1059
|
}
|
|
698
1060
|
|
|
1061
|
+
/// Returns the smaller of two numbers.
|
|
1062
|
+
/// @param {Number} $a - The first number.
|
|
1063
|
+
/// @param {Number} $b - The second number.
|
|
1064
|
+
/// @return {Number} - The smaller of `$a` and `$b`.
|
|
1065
|
+
///
|
|
1066
|
+
/// @example scss - Usage
|
|
1067
|
+
/// @debug k-math-min( 10, 20 ); // => 10
|
|
1068
|
+
/// @debug k-math-min( 10px, 20px ); // => 10px
|
|
699
1069
|
@function k-math-min( $a, $b ) {
|
|
700
1070
|
@return min( $a, $b );
|
|
701
1071
|
}
|
|
702
1072
|
|
|
1073
|
+
/// Returns the remainder of two numbers.
|
|
1074
|
+
/// @param {Number} $a - The dividend.
|
|
1075
|
+
/// @param {Number} $b - The divisor.
|
|
1076
|
+
/// @return {Number} - The remainder of `$a` and `$b`.
|
|
1077
|
+
///
|
|
1078
|
+
/// @example scss - Usage
|
|
1079
|
+
/// @debug k-math-mod( 10, 3 ); // => 1
|
|
1080
|
+
/// @debug k-math-mod( 10px, 3 ); // => 1px
|
|
703
1081
|
@function k-math-mod( $a, $b ) {
|
|
704
1082
|
@return ( $a % $b );
|
|
705
1083
|
}
|
|
706
1084
|
|
|
1085
|
+
/// Returns the product of two numbers.
|
|
1086
|
+
/// @param {Number} $a - The first number.
|
|
1087
|
+
/// @param {Number} $b - The second number.
|
|
1088
|
+
/// @return {Number} - The product of `$a` and `$b`.
|
|
1089
|
+
///
|
|
1090
|
+
/// @example scss - Usage
|
|
1091
|
+
/// @debug k-math-mul( 10, 2 ); // => 20
|
|
1092
|
+
/// @debug k-math-mul( 10px, 2 ); // => 20px
|
|
707
1093
|
@function k-math-mul( $a, $b ) {
|
|
708
1094
|
@return ( $a * $b );
|
|
709
1095
|
}
|
|
710
1096
|
|
|
1097
|
+
/// Converts a unitless number to a percentage.
|
|
1098
|
+
/// @param {Number} $number - The number to convert.
|
|
1099
|
+
/// @return {Number} - The percentage.
|
|
1100
|
+
///
|
|
1101
|
+
/// @example scss - Usage
|
|
1102
|
+
/// @debug k-math-percentage( 0.5 ); // => 50%
|
|
711
1103
|
@function k-math-percentage( $number ) {
|
|
712
|
-
@return ( $number
|
|
1104
|
+
@return percentage( $number );
|
|
713
1105
|
}
|
|
714
1106
|
|
|
1107
|
+
/// Returns the result of raising `$x` to the power of `$n`.
|
|
1108
|
+
/// @param {Number} $x - The base.
|
|
1109
|
+
/// @param {Number} $n - The exponent.
|
|
1110
|
+
/// @return {Number} - The result of raising `$x` to the power of `$n`.
|
|
1111
|
+
///
|
|
1112
|
+
/// @example scss - Usage
|
|
1113
|
+
/// @debug k-math-pow( 2, 3 ); // => 8
|
|
715
1114
|
@function k-math-pow( $x, $n ) {
|
|
716
1115
|
$ret: 1;
|
|
717
1116
|
|
|
@@ -733,10 +1132,12 @@ $_kendo-escape-class-name: (
|
|
|
733
1132
|
|
|
734
1133
|
}
|
|
735
1134
|
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
}
|
|
739
|
-
|
|
1135
|
+
/// Returns a random number between 0 and 1.
|
|
1136
|
+
/// @param {Number} $limit - The upper limit of the random number.
|
|
1137
|
+
/// @return {Number} - A random number between 0 and 1.
|
|
1138
|
+
///
|
|
1139
|
+
/// @example scss - Usage
|
|
1140
|
+
/// @debug k-math-random(); // => 0.123456789
|
|
740
1141
|
@function k-math-random( $limit: null ) {
|
|
741
1142
|
@if ( $limit == null ) {
|
|
742
1143
|
@return random();
|
|
@@ -745,6 +1146,14 @@ $_kendo-escape-class-name: (
|
|
|
745
1146
|
@return random( $limit );
|
|
746
1147
|
}
|
|
747
1148
|
|
|
1149
|
+
/// Returns the result of rounding `$number` to the nearest integer
|
|
1150
|
+
/// using the specified `$precision`.
|
|
1151
|
+
/// @param {Number} $number - The number to round.
|
|
1152
|
+
/// @param {Number} $precision - The number of decimal places to round to.
|
|
1153
|
+
/// @return {Number} - The rounded number.
|
|
1154
|
+
///
|
|
1155
|
+
/// @example scss - Usage
|
|
1156
|
+
/// @debug k-math-round( 10.123456789, 3 ); // => 10.123
|
|
748
1157
|
@function k-math-round( $number, $precision: 0 ) {
|
|
749
1158
|
|
|
750
1159
|
@if ( $precision == 0 ) {
|
|
@@ -756,10 +1165,22 @@ $_kendo-escape-class-name: (
|
|
|
756
1165
|
@return k-math-div( round( $number * $pow ), $pow );
|
|
757
1166
|
}
|
|
758
1167
|
|
|
1168
|
+
/// Returns a string representation of `$number`'s unit.
|
|
1169
|
+
/// @param {Number} $number - The number to get the unit of.
|
|
1170
|
+
/// @return {String} - The unit of `$number`.
|
|
1171
|
+
///
|
|
1172
|
+
/// @example scss - Usage
|
|
1173
|
+
/// @debug k-math-unit( 10px ); // => px
|
|
759
1174
|
@function k-math-unit( $number ) {
|
|
760
1175
|
@return unit( $number );
|
|
761
1176
|
}
|
|
762
1177
|
|
|
1178
|
+
/// Remove the unit from a number.
|
|
1179
|
+
/// @param {Number} $number - The number to remove the unit from.
|
|
1180
|
+
/// @return {Number} - The unitless number.
|
|
1181
|
+
///
|
|
1182
|
+
/// @example scss - Usage
|
|
1183
|
+
/// @debug k-math-strip-unit( 10px ); // => 10
|
|
763
1184
|
@function k-math-strip-unit($number) {
|
|
764
1185
|
@if ( k-meta-type-of( $number ) == "number" ) and not k-math-is-unitless( $number ) {
|
|
765
1186
|
@return k-math-div( $number, 1 * k-math-unit( $number) );
|
|
@@ -769,7 +1190,13 @@ $_kendo-escape-class-name: (
|
|
|
769
1190
|
}
|
|
770
1191
|
|
|
771
1192
|
// #endregion
|
|
772
|
-
// #region @import "./_map.import.scss"; ->
|
|
1193
|
+
// #region @import "./_map.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_map.import.scss
|
|
1194
|
+
/// Returns the value at `$key` in `$map`.
|
|
1195
|
+
/// @param {Map} $map - The map to get the value from.
|
|
1196
|
+
/// @param {Any} $key - The key to get the value for.
|
|
1197
|
+
///
|
|
1198
|
+
/// @example scss - Usage
|
|
1199
|
+
/// @debug k-map-get( ( "foo": "bar" ), "foo" ); // => "bar"
|
|
773
1200
|
@function k-map-get( $map, $keys... ) {
|
|
774
1201
|
@each $key in $keys {
|
|
775
1202
|
$map: map-get( $map, $key );
|
|
@@ -777,14 +1204,35 @@ $_kendo-escape-class-name: (
|
|
|
777
1204
|
@return $map;
|
|
778
1205
|
}
|
|
779
1206
|
|
|
1207
|
+
/// Returns whether `$map` has a value at `$key`.
|
|
1208
|
+
/// @param {Map} $map - The map to check.
|
|
1209
|
+
/// @param {Any} $key - The key to check.
|
|
1210
|
+
/// @return {Boolean} - Whether `$map` has a value at `$key`.
|
|
1211
|
+
///
|
|
1212
|
+
/// @example scss - Usage
|
|
1213
|
+
/// @debug k-map-has( ( "foo": "bar" ), "foo" ); // => true
|
|
1214
|
+
/// @debug k-map-has( ( "foo": "bar" ), "bar" ); // => false
|
|
780
1215
|
@function k-map-has-key( $map, $key ) {
|
|
781
1216
|
@return map-has-key( $map, $key );
|
|
782
1217
|
}
|
|
783
1218
|
|
|
1219
|
+
/// Returns a comma separated list of the keys in `$map`.
|
|
1220
|
+
/// @param {Map} $map - The map to get the keys from.
|
|
1221
|
+
/// @return {List} - A comma separated list of the keys in `$map`.
|
|
1222
|
+
///
|
|
1223
|
+
/// @example scss - Usage
|
|
1224
|
+
/// @debug k-map-keys( ( "foo": "bar", "baz": "qux" ) ); // => "foo, baz"
|
|
784
1225
|
@function k-map-keys( $map ) {
|
|
785
1226
|
@return map-keys( $map );
|
|
786
1227
|
}
|
|
787
1228
|
|
|
1229
|
+
/// Returns a map with the keys and values from `$map` and `$args`.
|
|
1230
|
+
/// @param {Map} $map - The map to merge.
|
|
1231
|
+
/// @param {Map} $args - The map to merge into `$map`.
|
|
1232
|
+
/// @return {Map} - A map with the keys and values from `$map` and `$args`.
|
|
1233
|
+
///
|
|
1234
|
+
/// @example scss - Usage
|
|
1235
|
+
/// @debug k-map-merge( ( "foo": "bar" ), ( "baz": "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
|
|
788
1236
|
@function k-map-merge( $map, $args... ) {
|
|
789
1237
|
@each $arg in $args {
|
|
790
1238
|
$map: map-merge( $map, $arg );
|
|
@@ -792,117 +1240,337 @@ $_kendo-escape-class-name: (
|
|
|
792
1240
|
@return $map;
|
|
793
1241
|
}
|
|
794
1242
|
|
|
1243
|
+
/// Returns a map with the keys and values from `$map` except for `$keys`.
|
|
1244
|
+
/// @param {Map} $map - The map to remove keys from.
|
|
1245
|
+
/// @param {Any} $keys - The keys to remove from `$map`.
|
|
1246
|
+
/// @return {Map} - A map with the keys and values from `$map` except for `$keys`.
|
|
1247
|
+
///
|
|
1248
|
+
/// @example scss - Usage
|
|
1249
|
+
/// @debug k-map-remove( ( "foo": "bar", "baz": "qux" ), "foo" ); // => ( "baz": "qux" )
|
|
795
1250
|
@function k-map-remove( $map, $keys... ) {
|
|
796
1251
|
@return map-remove( $map, $keys... );
|
|
797
1252
|
}
|
|
798
1253
|
|
|
1254
|
+
/// Sets a single key and value in `$map`.
|
|
1255
|
+
/// @param {Map} $map - The map to set the value in.
|
|
1256
|
+
/// @param {Any} $key - The key to set the value for.
|
|
1257
|
+
/// @param {Any} $value - The value to set.
|
|
1258
|
+
/// @return {Map} - A map with the key and value set.
|
|
1259
|
+
///
|
|
1260
|
+
/// @example scss - Usage
|
|
1261
|
+
/// @debug k-map-set( ( "foo": "bar" ), "baz", "qux" ); // => ( "foo": "bar", "baz": "qux" )
|
|
799
1262
|
@function k-map-set( $map, $key, $value ) {
|
|
800
1263
|
@return k-map-merge( $map, ( $key: $value ) );
|
|
801
1264
|
}
|
|
802
1265
|
|
|
1266
|
+
/// Returns a comma separated list of the values in `$map`.
|
|
1267
|
+
/// @param {Map} $map - The map to get the values from.
|
|
1268
|
+
/// @return {List} - A comma separated list of the values in `$map`.
|
|
1269
|
+
///
|
|
1270
|
+
/// @example scss - Usage
|
|
1271
|
+
/// @debug k-map-values( ( "foo": "bar", "baz": "qux" ) ); // => "bar, qux"
|
|
803
1272
|
@function k-map-values( $map ) {
|
|
804
1273
|
@return map-values( $map );
|
|
805
1274
|
}
|
|
806
1275
|
|
|
807
1276
|
// #endregion
|
|
808
|
-
// #region @import "./_meta.import.scss"; ->
|
|
1277
|
+
// #region @import "./_meta.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
|
|
809
1278
|
// Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
|
|
810
1279
|
|
|
1280
|
+
/// A wrapper around the `call()` function.
|
|
1281
|
+
/// Calls the function `$function` with the arguments `$args`.
|
|
1282
|
+
/// @param {Function} $function - The function to call.
|
|
1283
|
+
/// @param {List} $args - The arguments to pass to `$function`.
|
|
1284
|
+
/// @return {Any} - The result of calling `$function` with `$args`.
|
|
1285
|
+
///
|
|
1286
|
+
/// @example scss - Usage
|
|
1287
|
+
/// @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
|
|
811
1288
|
@function k-meta-call( $function, $args... ) {
|
|
812
1289
|
@return call( $function, $args... );
|
|
813
1290
|
}
|
|
814
1291
|
|
|
1292
|
+
/// A wrapper around the `function-exists()` function.
|
|
1293
|
+
/// Returns whether a function with the name `$name` exists.
|
|
1294
|
+
/// @param {String} $name - The name of the function to check.
|
|
1295
|
+
/// @return {Boolean} - Whether a function with the name `$name` exists.
|
|
1296
|
+
///
|
|
1297
|
+
/// @example scss - Usage
|
|
1298
|
+
/// @debug k-meta-function-exists( "k-string-replace" ); // => true
|
|
815
1299
|
@function k-meta-function-exists( $name ) {
|
|
816
1300
|
@return function-exists( $name );
|
|
817
1301
|
}
|
|
818
1302
|
|
|
1303
|
+
/// A wrapper around the `get-function()` function.
|
|
1304
|
+
/// Returns the function with the name `$name`.
|
|
1305
|
+
/// @param {String} $name - The name of the function to get.
|
|
1306
|
+
/// @param {Boolean} $css - Whether to return the CSS representation of the function.
|
|
1307
|
+
/// @param {Module} $module - The module to get the function from.
|
|
1308
|
+
/// @return {Function} - The function with the name `$name`.
|
|
1309
|
+
///
|
|
1310
|
+
/// @example scss - Usage
|
|
1311
|
+
/// @debug k-meta-get-function( "k-string-replace" ); // => Function
|
|
819
1312
|
@function k-meta-get-function( $name, $args... ) {
|
|
820
1313
|
@return get-function( $name, $args... );
|
|
821
1314
|
}
|
|
822
1315
|
|
|
1316
|
+
/// A wrapper around the `inspect()` function.
|
|
1317
|
+
/// Returns a string representation of `$value`.
|
|
1318
|
+
/// @param {Any} $value - The value to inspect.
|
|
1319
|
+
/// @return {String} - A string representation of `$value`.
|
|
1320
|
+
///
|
|
1321
|
+
/// @example scss - Usage
|
|
1322
|
+
/// @debug k-meta-inspect( "foo bar" ); // => "foo bar"
|
|
823
1323
|
@function k-meta-inspect( $value ) {
|
|
824
1324
|
@return inspect( $value );
|
|
825
1325
|
}
|
|
826
1326
|
|
|
1327
|
+
/// A wrapper around the `keywords()` function.
|
|
1328
|
+
/// Returns a map of the keywords in `$args`.
|
|
1329
|
+
/// @param {List} $args - The arguments to process.
|
|
1330
|
+
/// @return {Map} - A map of the keywords in `$args`.
|
|
1331
|
+
///
|
|
1332
|
+
/// @example scss - Usage
|
|
1333
|
+
/// @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
|
|
827
1334
|
@function k-meta-keywords( $args ) {
|
|
828
1335
|
@return keywords( $args );
|
|
829
1336
|
}
|
|
830
1337
|
|
|
1338
|
+
/// A wrapper around the `type-of()` function.
|
|
1339
|
+
/// Returns the type of `$value`.
|
|
1340
|
+
/// @param {Any} $value - The value to get the type of.
|
|
1341
|
+
/// @return {String} - The type of `$value`.
|
|
1342
|
+
///
|
|
1343
|
+
/// @example scss - Usage
|
|
1344
|
+
/// @debug k-meta-type-of( "foo bar" ); // => "string"
|
|
831
1345
|
@function k-meta-type-of( $value ) {
|
|
832
1346
|
@return type-of( $value );
|
|
833
1347
|
}
|
|
834
1348
|
|
|
1349
|
+
/// A wrapper around the `variable-exists()` function.
|
|
1350
|
+
/// Returns whether a variable with the name `$name` exists.
|
|
1351
|
+
/// @param {String} $name - The name of the variable to check.
|
|
1352
|
+
/// @return {Boolean} - Whether a variable with the name `$name` exists.
|
|
1353
|
+
///
|
|
1354
|
+
/// @example scss - Usage
|
|
1355
|
+
/// @debug k-meta-variable-exists( "foo" ); // => true
|
|
835
1356
|
@function k-meta-variable-exists( $name ) {
|
|
836
1357
|
@return variable-exists( $name );
|
|
837
1358
|
}
|
|
838
1359
|
|
|
1360
|
+
/// Checks whether `$value` is a <number> CSS data type.
|
|
1361
|
+
/// @param {Any} $value - The value to check.
|
|
1362
|
+
/// @return {Boolean} - Whether `$value` is a number.
|
|
1363
|
+
///
|
|
1364
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
|
|
1365
|
+
///
|
|
1366
|
+
/// @example scss - Usage
|
|
1367
|
+
/// @debug k-meta-is-number( 1 ); // => true
|
|
1368
|
+
/// @debug k-meta-is-number( "foo" ); // => false
|
|
839
1369
|
@function k-meta-is-number( $value ) {
|
|
840
1370
|
@return k-meta-type-of( $value ) == "number";
|
|
841
1371
|
}
|
|
842
1372
|
|
|
1373
|
+
/// Checks whether `$value` is a <integer> CSS data type.
|
|
1374
|
+
/// @param {Any} $value - The value to check.
|
|
1375
|
+
/// @return {Boolean} - Whether `$value` is a integer.
|
|
1376
|
+
///
|
|
1377
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
|
|
1378
|
+
///
|
|
1379
|
+
/// @example scss - Usage
|
|
1380
|
+
/// @debug k-meta-is-integer( 1 ); // => true
|
|
1381
|
+
/// @debug k-meta-is-integer( 1.5 ); // => false
|
|
843
1382
|
@function k-meta-is-integer( $value ) {
|
|
844
1383
|
@return k-meta-is-number( $value ) and k-math-round( $value ) == $value;
|
|
845
1384
|
}
|
|
846
1385
|
|
|
1386
|
+
/// Checks whether `$value` is a <time> CSS data type.
|
|
1387
|
+
/// @param {Any} $value - The value to check.
|
|
1388
|
+
/// @return {Boolean} - Whether `$value` is a time.
|
|
1389
|
+
///
|
|
1390
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
|
|
1391
|
+
///
|
|
1392
|
+
/// @example scss - Usage
|
|
1393
|
+
/// @debug k-meta-is-time( 1s ); // => true
|
|
1394
|
+
/// @debug k-meta-is-time( 1 ); // => false
|
|
847
1395
|
@function k-meta-is-time( $value ) {
|
|
848
1396
|
@return k-meta-is-number( $value ) and k-string-index( "ms" "s", k-math-unit( $value ) ) != null;
|
|
849
1397
|
}
|
|
850
1398
|
|
|
1399
|
+
/// Checks whether `$value` is a valid duration period.
|
|
1400
|
+
/// @param {Any} $value - The value to check.
|
|
1401
|
+
/// @return {Boolean} - Whether `$value` is a duration.
|
|
1402
|
+
///
|
|
1403
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
|
|
1404
|
+
///
|
|
1405
|
+
/// @example scss - Usage
|
|
1406
|
+
/// @debug k-meta-is-duration( 1s ); // => true
|
|
1407
|
+
/// @debug k-meta-is-duration( 1 ); // => false
|
|
851
1408
|
@function k-meta-is-duration( $value ) {
|
|
852
1409
|
@return k-meta-is-time( $value );
|
|
853
1410
|
}
|
|
854
1411
|
|
|
1412
|
+
/// Checks whether `$value` is a <angle> CSS data type.
|
|
1413
|
+
/// @param {Any} $value - The value to check.
|
|
1414
|
+
/// @return {Boolean} - Whether `$value` is a angle.
|
|
1415
|
+
///
|
|
1416
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
|
|
1417
|
+
///
|
|
1418
|
+
/// @example scss - Usage
|
|
1419
|
+
/// @debug k-meta-is-angle( 1deg ); // => true
|
|
1420
|
+
/// @debug k-meta-is-angle( 1 ); // => false
|
|
855
1421
|
@function k-meta-is-angle( $value ) {
|
|
856
1422
|
@return k-meta-is-number( $value ) and k-string-index( "deg" "rad" "grad" "turn", k-math-unit( $value ) ) != null;
|
|
857
1423
|
}
|
|
858
1424
|
|
|
1425
|
+
/// Checks whether `$value` is a <frequency> CSS data type.
|
|
1426
|
+
/// @param {Any} $value - The value to check.
|
|
1427
|
+
/// @return {Boolean} - Whether `$value` is a frequency.
|
|
1428
|
+
///
|
|
1429
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
|
|
1430
|
+
///
|
|
1431
|
+
/// @example scss - Usage
|
|
1432
|
+
/// @debug k-meta-is-frequency( 1Hz ); // => true
|
|
1433
|
+
/// @debug k-meta-is-frequency( 1 ); // => false
|
|
859
1434
|
@function k-meta-is-frequency( $value ) {
|
|
860
1435
|
@return k-meta-is-number( $value ) and k-string-index( "Hz" "kHz", k-math-unit( $value ) ) != null;
|
|
861
1436
|
}
|
|
862
1437
|
|
|
1438
|
+
/// Checks whether `$value` is a relative <length> CSS data type.
|
|
1439
|
+
/// @param {Any} $value - The value to check.
|
|
1440
|
+
/// @return {Boolean} - Whether `$value` is a relative length.
|
|
1441
|
+
///
|
|
1442
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
|
|
1443
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
|
|
1444
|
+
///
|
|
1445
|
+
/// @example scss - Usage
|
|
1446
|
+
/// @debug k-meta-is-relative-length( 1em ); // => true
|
|
1447
|
+
/// @debug k-meta-is-relative-length( 1ch ); // => true
|
|
1448
|
+
/// @debug k-meta-is-relative-length( 1 ); // => false
|
|
863
1449
|
@function k-meta-is-relative-length( $value ) {
|
|
864
1450
|
@return k-meta-is-number( $value ) and k-string-index( "em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", k-math-unit( $value ) ) != null;
|
|
865
1451
|
}
|
|
866
1452
|
|
|
1453
|
+
/// Checks whether `$value` is an absolute <length> CSS data type.
|
|
1454
|
+
/// @param {Any} $value - The value to check.
|
|
1455
|
+
/// @return {Boolean} - Whether `$value` is an absolute length.
|
|
1456
|
+
///
|
|
1457
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
|
|
1458
|
+
///
|
|
1459
|
+
/// @example scss - Usage
|
|
1460
|
+
/// @debug k-meta-is-absolute-length( 1cm ); // => true
|
|
1461
|
+
/// @debug k-meta-is-absolute-length( 1 ); // => false
|
|
867
1462
|
@function k-meta-is-absolute-length( $value ) {
|
|
868
1463
|
@return k-meta-is-number( $value ) and k-string-index( "cm" "mm" "in" "px" "pt" "pc", k-math-unit( $value ) ) != null;
|
|
869
1464
|
}
|
|
870
1465
|
|
|
1466
|
+
/// Checks whether `$value` is a <percentage> CSS data type.
|
|
1467
|
+
/// @param {Any} $value - The value to check.
|
|
1468
|
+
/// @return {Boolean} - Whether `$value` is a percentage.
|
|
1469
|
+
///
|
|
1470
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
|
|
1471
|
+
///
|
|
1472
|
+
/// @example scss - Usage
|
|
1473
|
+
/// @debug k-meta-is-percentage( 1% ); // => true
|
|
1474
|
+
/// @debug k-meta-is-percentage( 1 ); // => false
|
|
871
1475
|
@function k-meta-is-percentage( $value ) {
|
|
872
1476
|
@return k-meta-is-number( $value ) and k-math-unit( $value ) == "%";
|
|
873
1477
|
}
|
|
874
1478
|
|
|
1479
|
+
/// Checks whether `$value` is a <length> CSS data type.
|
|
1480
|
+
/// @param {Any} $value - The value to check.
|
|
1481
|
+
/// @return {Boolean} - Whether `$value` is a length.
|
|
1482
|
+
///
|
|
1483
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
|
|
1484
|
+
///
|
|
1485
|
+
/// @example scss - Usage
|
|
1486
|
+
/// @debug k-meta-is-length( 1em ); // => true
|
|
1487
|
+
/// @debug k-meta-is-length( 1cm ); // => true
|
|
1488
|
+
/// @debug k-meta-is-length( 1 ); // => false
|
|
875
1489
|
@function k-meta-is-length( $value ) {
|
|
876
1490
|
@return k-meta-is-relative-length( $value ) or k-meta-is-absolute-length( $value );
|
|
877
1491
|
}
|
|
878
1492
|
|
|
1493
|
+
/// Checks whether `$value` is a <resolution> CSS data type.
|
|
1494
|
+
/// @param {Any} $value - The value to check.
|
|
1495
|
+
/// @return {Boolean} - Whether `$value` is a resolution.
|
|
1496
|
+
///
|
|
1497
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
|
|
1498
|
+
///
|
|
1499
|
+
/// @example scss - Usage
|
|
1500
|
+
/// @debug k-meta-is-resolution( 1dpi ); // => true
|
|
1501
|
+
/// @debug k-meta-is-resolution( 1 ); // => false
|
|
879
1502
|
@function k-meta-is-resolution( $value ) {
|
|
880
1503
|
@return k-meta-is-number( $value ) and k-string-index( "dpi" "dpcm" "dppx", k-math-unit( $value ) ) != null;
|
|
881
1504
|
}
|
|
882
1505
|
|
|
1506
|
+
/// Checks whether `$value` is a <position> CSS data type.
|
|
1507
|
+
/// @param {Any} $value - The value to check.
|
|
1508
|
+
/// @return {Boolean} - Whether `$value` is a position.
|
|
1509
|
+
///
|
|
1510
|
+
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
|
|
1511
|
+
///
|
|
1512
|
+
/// @example scss - Usage
|
|
1513
|
+
/// @debug k-meta-is-position( center ); // => true
|
|
883
1514
|
@function k-meta-is-position( $value ) {
|
|
884
1515
|
@return k-meta-is-length( $value ) or k-meta-is-percentage( $value ) or k-string-index( "top" "right" "bottom" "left" "center", $value ) != null;
|
|
885
1516
|
}
|
|
886
1517
|
|
|
887
1518
|
// #endregion
|
|
888
|
-
// #region @import "./_string.import.scss"; ->
|
|
1519
|
+
// #region @import "./_string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
|
|
1520
|
+
/// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
|
|
1521
|
+
/// @param {String} $string - The string to process.
|
|
1522
|
+
/// @param {String} $substring - The substring to look for.
|
|
1523
|
+
/// @return {Number} - The first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
|
|
1524
|
+
///
|
|
1525
|
+
/// @example scss - Usage
|
|
1526
|
+
/// @debug k-string-index( "foo bar", "bar" ); // => 5
|
|
889
1527
|
@function k-string-index( $string, $substring ) {
|
|
890
1528
|
@return str-index( $string, $substring );
|
|
891
1529
|
}
|
|
892
1530
|
|
|
1531
|
+
/// Returns a copy of `$string` with `$insert` inserted at `$index`.
|
|
1532
|
+
/// @param {String} $string - The string to process.
|
|
1533
|
+
/// @param {String} $insert - The string to insert.
|
|
1534
|
+
/// @param {Number} $index - The index at which to insert `$insert`.
|
|
1535
|
+
/// @return {String} - The resulting string.
|
|
1536
|
+
///
|
|
1537
|
+
/// @example scss - Usage
|
|
1538
|
+
/// @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
|
|
893
1539
|
@function k-string-insert( $string, $insert, $index ) {
|
|
894
1540
|
@return str-insert( $string, $insert, $index );
|
|
895
1541
|
}
|
|
896
1542
|
|
|
1543
|
+
/// Returns the length of `$string`.
|
|
1544
|
+
/// @param {String} $string - The string to process.
|
|
1545
|
+
/// @return {Number} - The length of `$string`.
|
|
1546
|
+
///
|
|
1547
|
+
/// @example scss - Usage
|
|
1548
|
+
/// @debug k-string-length( "foo bar" ); // => 7
|
|
897
1549
|
@function k-string-length( $string ) {
|
|
898
1550
|
@return str-length( $string );
|
|
899
1551
|
}
|
|
900
1552
|
|
|
1553
|
+
/// Returns a copy of `$string` with quotes added.
|
|
1554
|
+
/// @param {String} $string - The string to process.
|
|
1555
|
+
/// @return {String} - The resulting string.
|
|
1556
|
+
///
|
|
1557
|
+
/// @example scss - Usage
|
|
1558
|
+
/// @debug k-string-quote( "foo bar" ); // => "foo bar"
|
|
901
1559
|
@function k-string-quote( $string ) {
|
|
902
1560
|
@return quote( $string );
|
|
903
1561
|
}
|
|
904
1562
|
|
|
905
|
-
|
|
1563
|
+
/// Returns a copy of `$string` with all occurrences of `$search`
|
|
1564
|
+
/// replaced by `$replace`.
|
|
1565
|
+
/// @param {String} $string - The string to process.
|
|
1566
|
+
/// @param {String} $search - The substring to look for.
|
|
1567
|
+
/// @param {String} $replace - The replacement string.
|
|
1568
|
+
/// @return {String} - The resulting string.
|
|
1569
|
+
///
|
|
1570
|
+
/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
|
|
1571
|
+
///
|
|
1572
|
+
/// @example scss - Usage
|
|
1573
|
+
/// @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
|
|
906
1574
|
@function k-string-replace( $string, $search, $replace: "" ) {
|
|
907
1575
|
@if k-meta-type-of( $string ) == number {
|
|
908
1576
|
$string: $string + "";
|
|
@@ -917,22 +1585,53 @@ $_kendo-escape-class-name: (
|
|
|
917
1585
|
@return $string;
|
|
918
1586
|
}
|
|
919
1587
|
|
|
1588
|
+
/// Returns a substring of `$string` starting at `$start-at` and ending at `$end-at`.
|
|
1589
|
+
/// @param {String} $string - The string to process.
|
|
1590
|
+
/// @param {Number} $start-at - The index at which to start the substring.
|
|
1591
|
+
/// @param {Number} $end-at - The index at which to end the substring.
|
|
1592
|
+
/// @return {String} - The resulting string.
|
|
1593
|
+
///
|
|
1594
|
+
/// @example scss - Usage
|
|
1595
|
+
/// @debug k-string-slice( "foo bar", 5 ); // => "bar"
|
|
920
1596
|
@function k-string-slice( $string, $start-at, $end-at: -1 ) {
|
|
921
1597
|
@return str-slice( $string, $start-at, $end-at );
|
|
922
1598
|
}
|
|
923
1599
|
|
|
1600
|
+
/// Returns a copy of `$string` with all uppercase letters converted to lowercase.
|
|
1601
|
+
/// @param {String} $string - The string to process.
|
|
1602
|
+
/// @return {String} - The resulting string.
|
|
1603
|
+
///
|
|
1604
|
+
/// @example scss - Usage
|
|
1605
|
+
/// @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
|
|
924
1606
|
@function k-string-to-lower-case( $string ) {
|
|
925
1607
|
@return to-lower-case( $string );
|
|
926
1608
|
}
|
|
927
1609
|
|
|
1610
|
+
/// Returns a copy of `$string` with all lowercase letters converted to uppercase.
|
|
1611
|
+
/// @param {String} $string - The string to process.
|
|
1612
|
+
/// @return {String} - The resulting string.
|
|
1613
|
+
///
|
|
1614
|
+
/// @example scss - Usage
|
|
1615
|
+
/// @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
|
|
928
1616
|
@function k-string-to-upper-case( $string ) {
|
|
929
1617
|
@return to-upper-case( $string );
|
|
930
1618
|
}
|
|
931
1619
|
|
|
1620
|
+
/// Returns a unique identifier.
|
|
1621
|
+
/// @return {String} - The unique identifier.
|
|
1622
|
+
///
|
|
1623
|
+
/// @example scss - Usage
|
|
1624
|
+
/// @debug k-string-unique-id(); // => UNIQUE_ID
|
|
932
1625
|
@function k-string-unique-id() {
|
|
933
1626
|
@return unique-id();
|
|
934
1627
|
}
|
|
935
1628
|
|
|
1629
|
+
/// Returns a copy of `$string` with quotes removed.
|
|
1630
|
+
/// @param {String} $string - The string to process.
|
|
1631
|
+
/// @return {String} - The resulting string.
|
|
1632
|
+
///
|
|
1633
|
+
/// @example scss - Usage
|
|
1634
|
+
/// @debug k-string-unquote( "foo bar" ); // => foo bar
|
|
936
1635
|
@function k-string-unquote( $string ) {
|
|
937
1636
|
@return unquote( $string );
|
|
938
1637
|
}
|
|
@@ -942,7 +1641,7 @@ $_kendo-escape-class-name: (
|
|
|
942
1641
|
// #endregion
|
|
943
1642
|
|
|
944
1643
|
// #endregion
|
|
945
|
-
// #region @import "./_variables.scss"; ->
|
|
1644
|
+
// #region @import "./_variables.scss"; -> scss/_variables.scss
|
|
946
1645
|
$kendo-prefix: k- !default;
|
|
947
1646
|
$kendo-important: true !default;
|
|
948
1647
|
|
|
@@ -1327,77 +2026,132 @@ $kendo-utils: (
|
|
|
1327
2026
|
"align-content": (
|
|
1328
2027
|
normal: normal,
|
|
1329
2028
|
stretch: stretch,
|
|
1330
|
-
start: flex-start,
|
|
1331
|
-
end: flex-end,
|
|
1332
2029
|
center: center,
|
|
2030
|
+
start: start,
|
|
2031
|
+
end: end,
|
|
2032
|
+
flex-start: flex-start,
|
|
2033
|
+
flex-end: flex-end,
|
|
2034
|
+
baseline: baseline,
|
|
2035
|
+
first-baseline: first baseline,
|
|
2036
|
+
last-baseline: last baseline,
|
|
1333
2037
|
between: space-between,
|
|
1334
2038
|
around: space-around,
|
|
1335
2039
|
evenly: space-evenly
|
|
1336
2040
|
),
|
|
1337
2041
|
"align-items": (
|
|
1338
2042
|
normal: normal,
|
|
1339
|
-
|
|
1340
|
-
end: flex-end,
|
|
2043
|
+
stretch: stretch,
|
|
1341
2044
|
center: center,
|
|
1342
|
-
|
|
2045
|
+
start: start,
|
|
2046
|
+
end: end,
|
|
2047
|
+
flex-start: flex-start,
|
|
2048
|
+
flex-end: flex-end,
|
|
2049
|
+
baseline: baseline,
|
|
2050
|
+
first-baseline: first baseline,
|
|
2051
|
+
last-baseline: last baseline,
|
|
2052
|
+
self-start: self-start,
|
|
2053
|
+
self-end: self-end
|
|
1343
2054
|
),
|
|
1344
2055
|
"align-self": (
|
|
1345
2056
|
auto: auto,
|
|
1346
2057
|
normal: normal,
|
|
1347
2058
|
stretch: stretch,
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
2059
|
+
center: center,
|
|
2060
|
+
start: start,
|
|
2061
|
+
end: end,
|
|
2062
|
+
flex-start: flex-start,
|
|
2063
|
+
flex-end: flex-end,
|
|
2064
|
+
baseline: baseline,
|
|
2065
|
+
first-baseline: first baseline,
|
|
2066
|
+
last-baseline: last baseline,
|
|
2067
|
+
self-start: self-start,
|
|
2068
|
+
self-end: self-end
|
|
1351
2069
|
),
|
|
1352
2070
|
"justify-content": (
|
|
1353
2071
|
normal: normal,
|
|
1354
|
-
|
|
1355
|
-
end: flex-end,
|
|
2072
|
+
stretch: stretch,
|
|
1356
2073
|
center: center,
|
|
2074
|
+
start: start,
|
|
2075
|
+
end: end,
|
|
2076
|
+
flex-start: flex-start,
|
|
2077
|
+
flex-end: flex-end,
|
|
2078
|
+
left: left,
|
|
2079
|
+
right: right,
|
|
2080
|
+
baseline: baseline,
|
|
2081
|
+
first-baseline: first baseline,
|
|
2082
|
+
last-baseline: last baseline,
|
|
1357
2083
|
between: space-between,
|
|
1358
2084
|
around: space-around,
|
|
1359
|
-
evenly: space-evenly
|
|
1360
|
-
stretch: stretch
|
|
2085
|
+
evenly: space-evenly
|
|
1361
2086
|
),
|
|
1362
2087
|
"justify-items": (
|
|
1363
2088
|
normal: normal,
|
|
1364
|
-
|
|
1365
|
-
end: flex-end,
|
|
2089
|
+
stretch: stretch,
|
|
1366
2090
|
center: center,
|
|
1367
|
-
|
|
2091
|
+
start: start,
|
|
2092
|
+
end: end,
|
|
2093
|
+
flex-start: flex-start,
|
|
2094
|
+
flex-end: flex-end,
|
|
2095
|
+
self-start: self-start,
|
|
2096
|
+
self-end: self-end,
|
|
2097
|
+
left: left,
|
|
2098
|
+
right: right,
|
|
2099
|
+
baseline: baseline,
|
|
2100
|
+
first-baseline: first baseline,
|
|
2101
|
+
last-baseline: last baseline
|
|
1368
2102
|
),
|
|
1369
2103
|
"justify-self": (
|
|
1370
2104
|
auto: auto,
|
|
1371
2105
|
normal: normal,
|
|
1372
|
-
|
|
1373
|
-
end: flex-end,
|
|
2106
|
+
stretch: stretch,
|
|
1374
2107
|
center: center,
|
|
1375
|
-
|
|
2108
|
+
start: start,
|
|
2109
|
+
end: end,
|
|
2110
|
+
flex-start: flex-start,
|
|
2111
|
+
flex-end: flex-end,
|
|
2112
|
+
self-start: self-start,
|
|
2113
|
+
self-end: self-end,
|
|
2114
|
+
baseline: baseline,
|
|
2115
|
+
first-baseline: first baseline,
|
|
2116
|
+
last-baseline: last baseline
|
|
1376
2117
|
),
|
|
1377
2118
|
"place-content": (
|
|
1378
2119
|
normal: normal,
|
|
1379
|
-
|
|
1380
|
-
end: flex-end,
|
|
2120
|
+
stretch: stretch,
|
|
1381
2121
|
center: center,
|
|
2122
|
+
start: start,
|
|
2123
|
+
end: end,
|
|
2124
|
+
flex-start: flex-start,
|
|
2125
|
+
flex-end: flex-end,
|
|
2126
|
+
baseline: baseline,
|
|
1382
2127
|
between: space-between,
|
|
1383
2128
|
around: space-around,
|
|
1384
|
-
evenly: space-evenly
|
|
1385
|
-
stretch: stretch
|
|
2129
|
+
evenly: space-evenly
|
|
1386
2130
|
),
|
|
1387
2131
|
"place-items": (
|
|
1388
2132
|
normal: normal,
|
|
1389
|
-
|
|
1390
|
-
end: flex-end,
|
|
2133
|
+
stretch: stretch,
|
|
1391
2134
|
center: center,
|
|
1392
|
-
|
|
2135
|
+
start: start,
|
|
2136
|
+
end: end,
|
|
2137
|
+
flex-start: flex-start,
|
|
2138
|
+
flex-end: flex-end,
|
|
2139
|
+
self-start: flex-start,
|
|
2140
|
+
self-end: flex-end,
|
|
2141
|
+
baseline: baseline
|
|
1393
2142
|
),
|
|
1394
2143
|
"place-self": (
|
|
1395
2144
|
auto: auto,
|
|
1396
2145
|
normal: normal,
|
|
2146
|
+
stretch: stretch,
|
|
2147
|
+
center: center,
|
|
1397
2148
|
start: flex-start,
|
|
1398
2149
|
end: flex-end,
|
|
1399
|
-
|
|
1400
|
-
|
|
2150
|
+
flex-start: flex-start,
|
|
2151
|
+
flex-end: flex-end,
|
|
2152
|
+
self-start: flex-start,
|
|
2153
|
+
self-end: flex-end,
|
|
2154
|
+
baseline: baseline
|
|
1401
2155
|
),
|
|
1402
2156
|
|
|
1403
2157
|
// Spacing
|
|
@@ -1518,7 +2272,10 @@ $kendo-utils: (
|
|
|
1518
2272
|
capitalize: capitalize,
|
|
1519
2273
|
normal-case: none
|
|
1520
2274
|
),
|
|
1521
|
-
"text-overflow": (
|
|
2275
|
+
"text-overflow": (
|
|
2276
|
+
clip: clip,
|
|
2277
|
+
ellipsis: ellipsis
|
|
2278
|
+
),
|
|
1522
2279
|
"text-indent": (),
|
|
1523
2280
|
"vertical-align": (),
|
|
1524
2281
|
"white-space": (
|
|
@@ -1765,7 +2522,7 @@ $kendo-utils: (
|
|
|
1765
2522
|
) !default;
|
|
1766
2523
|
|
|
1767
2524
|
// #endregion
|
|
1768
|
-
// #region @import "./_mixins.scss"; ->
|
|
2525
|
+
// #region @import "./_mixins.scss"; -> scss/_mixins.scss
|
|
1769
2526
|
@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
|
|
1770
2527
|
@if $values {
|
|
1771
2528
|
$_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
|
|
@@ -1797,8 +2554,8 @@ $kendo-utils: (
|
|
|
1797
2554
|
|
|
1798
2555
|
// #endregion
|
|
1799
2556
|
|
|
1800
|
-
// #region @import "./accessibility/index.import.scss"; ->
|
|
1801
|
-
// #region @import "./_screen-readers.scss"; ->
|
|
2557
|
+
// #region @import "./accessibility/index.import.scss"; -> scss/accessibility/index.import.scss
|
|
2558
|
+
// #region @import "./_screen-readers.scss"; -> scss/accessibility/_screen-readers.scss
|
|
1802
2559
|
@mixin kendo-utils--accessibility--screen-readers() {
|
|
1803
2560
|
|
|
1804
2561
|
// Screen readers utility classes
|
|
@@ -1840,8 +2597,8 @@ $kendo-utils: (
|
|
|
1840
2597
|
}
|
|
1841
2598
|
|
|
1842
2599
|
// #endregion
|
|
1843
|
-
// #region @import "./layout/index.import.scss"; ->
|
|
1844
|
-
// #region @import "./_aspect-ratio.scss"; ->
|
|
2600
|
+
// #region @import "./layout/index.import.scss"; -> scss/layout/index.import.scss
|
|
2601
|
+
// #region @import "./_aspect-ratio.scss"; -> scss/layout/_aspect-ratio.scss
|
|
1845
2602
|
// Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
|
|
1846
2603
|
|
|
1847
2604
|
/// 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 +2634,7 @@ $kendo-utils: (
|
|
|
1877
2634
|
}
|
|
1878
2635
|
|
|
1879
2636
|
// #endregion
|
|
1880
|
-
// #region @import "./_clear.scss"; ->
|
|
2637
|
+
// #region @import "./_clear.scss"; -> scss/layout/_clear.scss
|
|
1881
2638
|
// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
|
|
1882
2639
|
|
|
1883
2640
|
/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
|
|
@@ -1909,7 +2666,7 @@ $kendo-utils: (
|
|
|
1909
2666
|
}
|
|
1910
2667
|
|
|
1911
2668
|
// #endregion
|
|
1912
|
-
// #region @import "./_display.scss"; ->
|
|
2669
|
+
// #region @import "./_display.scss"; -> scss/layout/_display.scss
|
|
1913
2670
|
/// 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
2671
|
/// @name .k-d-none
|
|
1915
2672
|
/// @group display
|
|
@@ -1982,7 +2739,7 @@ $kendo-utils: (
|
|
|
1982
2739
|
}
|
|
1983
2740
|
|
|
1984
2741
|
// #endregion
|
|
1985
|
-
// #region @import "./_float.scss"; ->
|
|
2742
|
+
// #region @import "./_float.scss"; -> scss/layout/_float.scss
|
|
1986
2743
|
// Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float.
|
|
1987
2744
|
|
|
1988
2745
|
/// This is equivalent to `float: left;`. The element must float on the left side of its containing block.
|
|
@@ -2009,7 +2766,7 @@ $kendo-utils: (
|
|
|
2009
2766
|
}
|
|
2010
2767
|
|
|
2011
2768
|
// #endregion
|
|
2012
|
-
// #region @import "./_overflow.scss"; ->
|
|
2769
|
+
// #region @import "./_overflow.scss"; -> scss/layout/_overflow.scss
|
|
2013
2770
|
/// 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
2771
|
/// @name .k-overflow-auto
|
|
2015
2772
|
/// @group overflow
|
|
@@ -2094,7 +2851,7 @@ $kendo-utils: (
|
|
|
2094
2851
|
}
|
|
2095
2852
|
|
|
2096
2853
|
// #endregion
|
|
2097
|
-
// #region @import "./_position.scss"; ->
|
|
2854
|
+
// #region @import "./_position.scss"; -> scss/layout/_position.scss
|
|
2098
2855
|
// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
|
|
2099
2856
|
|
|
2100
2857
|
/// 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 +3005,7 @@ $kendo-utils: (
|
|
|
2248
3005
|
}
|
|
2249
3006
|
|
|
2250
3007
|
// #endregion
|
|
2251
|
-
// #region @import "./_visibility.scss"; ->
|
|
3008
|
+
// #region @import "./_visibility.scss"; -> scss/layout/_visibility.scss
|
|
2252
3009
|
// TODO: docs
|
|
2253
3010
|
// TODO: consider visible and invisible vs visibility-visible and visibility-hidden
|
|
2254
3011
|
|
|
@@ -2267,7 +3024,7 @@ $kendo-utils: (
|
|
|
2267
3024
|
}
|
|
2268
3025
|
|
|
2269
3026
|
// #endregion
|
|
2270
|
-
// #region @import "./_zindex.scss"; ->
|
|
3027
|
+
// #region @import "./_zindex.scss"; -> scss/layout/_zindex.scss
|
|
2271
3028
|
// TODO: docs
|
|
2272
3029
|
|
|
2273
3030
|
@mixin kendo-utils--layout--zindex() {
|
|
@@ -2293,8 +3050,8 @@ $kendo-utils: (
|
|
|
2293
3050
|
}
|
|
2294
3051
|
|
|
2295
3052
|
// #endregion
|
|
2296
|
-
// #region @import "./flex-grid/index.import.scss"; ->
|
|
2297
|
-
// #region @import "./_align-content.scss"; ->
|
|
3053
|
+
// #region @import "./flex-grid/index.import.scss"; -> scss/flex-grid/index.import.scss
|
|
3054
|
+
// #region @import "./_align-content.scss"; -> scss/flex-grid/_align-content.scss
|
|
2298
3055
|
// TODO: docs
|
|
2299
3056
|
|
|
2300
3057
|
@mixin kendo-utils--flex-grid--align-content() {
|
|
@@ -2306,7 +3063,7 @@ $kendo-utils: (
|
|
|
2306
3063
|
}
|
|
2307
3064
|
|
|
2308
3065
|
// #endregion
|
|
2309
|
-
// #region @import "./_align-items.scss"; ->
|
|
3066
|
+
// #region @import "./_align-items.scss"; -> scss/flex-grid/_align-items.scss
|
|
2310
3067
|
// TODO: docs
|
|
2311
3068
|
|
|
2312
3069
|
@mixin kendo-utils--flex-grid--align-items() {
|
|
@@ -2318,7 +3075,7 @@ $kendo-utils: (
|
|
|
2318
3075
|
}
|
|
2319
3076
|
|
|
2320
3077
|
// #endregion
|
|
2321
|
-
// #region @import "./_align-self.scss"; ->
|
|
3078
|
+
// #region @import "./_align-self.scss"; -> scss/flex-grid/_align-self.scss
|
|
2322
3079
|
// TODO: docs
|
|
2323
3080
|
|
|
2324
3081
|
@mixin kendo-utils--flex-grid--align-self() {
|
|
@@ -2330,7 +3087,7 @@ $kendo-utils: (
|
|
|
2330
3087
|
}
|
|
2331
3088
|
|
|
2332
3089
|
// #endregion
|
|
2333
|
-
// #region @import "./_flex-basis.scss"; ->
|
|
3090
|
+
// #region @import "./_flex-basis.scss"; -> scss/flex-grid/_flex-basis.scss
|
|
2334
3091
|
/// 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
3092
|
/// @name .k-flex-basis-auto
|
|
2336
3093
|
/// @group flex-basis
|
|
@@ -2351,7 +3108,7 @@ $kendo-utils: (
|
|
|
2351
3108
|
}
|
|
2352
3109
|
|
|
2353
3110
|
// #endregion
|
|
2354
|
-
// #region @import "./_flex-direction.scss"; ->
|
|
3111
|
+
// #region @import "./_flex-direction.scss"; -> scss/flex-grid/_flex-direction.scss
|
|
2355
3112
|
/// 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
3113
|
/// @name .k-flex-row
|
|
2357
3114
|
/// @group flex-direction
|
|
@@ -2386,7 +3143,7 @@ $kendo-utils: (
|
|
|
2386
3143
|
}
|
|
2387
3144
|
|
|
2388
3145
|
// #endregion
|
|
2389
|
-
// #region @import "./_flex-grow.scss"; ->
|
|
3146
|
+
// #region @import "./_flex-grow.scss"; -> scss/flex-grid/_flex-grow.scss
|
|
2390
3147
|
/// 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
3148
|
/// @name .k-flex-grow
|
|
2392
3149
|
/// @group flex-grow
|
|
@@ -2407,7 +3164,7 @@ $kendo-utils: (
|
|
|
2407
3164
|
}
|
|
2408
3165
|
|
|
2409
3166
|
// #endregion
|
|
2410
|
-
// #region @import "./_flex-shrink.scss"; ->
|
|
3167
|
+
// #region @import "./_flex-shrink.scss"; -> scss/flex-grid/_flex-shrink.scss
|
|
2411
3168
|
/// 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
3169
|
/// @name .k-flex-shrink
|
|
2413
3170
|
/// @group flex-shrink
|
|
@@ -2428,7 +3185,7 @@ $kendo-utils: (
|
|
|
2428
3185
|
}
|
|
2429
3186
|
|
|
2430
3187
|
// #endregion
|
|
2431
|
-
// #region @import "./_flex-wrap.scss"; ->
|
|
3188
|
+
// #region @import "./_flex-wrap.scss"; -> scss/flex-grid/_flex-wrap.scss
|
|
2432
3189
|
/// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
|
|
2433
3190
|
/// @name .k-flex-wrap
|
|
2434
3191
|
/// @group flex-wrap
|
|
@@ -2453,7 +3210,7 @@ $kendo-utils: (
|
|
|
2453
3210
|
}
|
|
2454
3211
|
|
|
2455
3212
|
// #endregion
|
|
2456
|
-
// #region @import "./_flex.scss"; ->
|
|
3213
|
+
// #region @import "./_flex.scss"; -> scss/flex-grid/_flex.scss
|
|
2457
3214
|
/// 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
3215
|
/// @name .k-flex-1
|
|
2459
3216
|
/// @group flex
|
|
@@ -2483,7 +3240,7 @@ $kendo-utils: (
|
|
|
2483
3240
|
}
|
|
2484
3241
|
|
|
2485
3242
|
// #endregion
|
|
2486
|
-
// #region @import "./_gap.scss"; ->
|
|
3243
|
+
// #region @import "./_gap.scss"; -> scss/flex-grid/_gap.scss
|
|
2487
3244
|
// TODO: docs
|
|
2488
3245
|
|
|
2489
3246
|
@mixin kendo-utils--flex-grid--gap() {
|
|
@@ -2497,7 +3254,7 @@ $kendo-utils: (
|
|
|
2497
3254
|
}
|
|
2498
3255
|
|
|
2499
3256
|
// #endregion
|
|
2500
|
-
// #region @import "./_grid-auto-columns.scss"; ->
|
|
3257
|
+
// #region @import "./_grid-auto-columns.scss"; -> scss/flex-grid/_grid-auto-columns.scss
|
|
2501
3258
|
// TODO: docs
|
|
2502
3259
|
|
|
2503
3260
|
@mixin kendo-utils--flex-grid--grid-auto-columns() {
|
|
@@ -2509,7 +3266,7 @@ $kendo-utils: (
|
|
|
2509
3266
|
}
|
|
2510
3267
|
|
|
2511
3268
|
// #endregion
|
|
2512
|
-
// #region @import "./_grid-auto-flow.scss"; ->
|
|
3269
|
+
// #region @import "./_grid-auto-flow.scss"; -> scss/flex-grid/_grid-auto-flow.scss
|
|
2513
3270
|
// TODO: docs
|
|
2514
3271
|
|
|
2515
3272
|
@mixin kendo-utils--flex-grid--grid-auto-flow() {
|
|
@@ -2521,7 +3278,7 @@ $kendo-utils: (
|
|
|
2521
3278
|
}
|
|
2522
3279
|
|
|
2523
3280
|
// #endregion
|
|
2524
|
-
// #region @import "./_grid-auto-rows.scss"; ->
|
|
3281
|
+
// #region @import "./_grid-auto-rows.scss"; -> scss/flex-grid/_grid-auto-rows.scss
|
|
2525
3282
|
// TODO: docs
|
|
2526
3283
|
|
|
2527
3284
|
@mixin kendo-utils--flex-grid--grid-auto-rows() {
|
|
@@ -2533,7 +3290,7 @@ $kendo-utils: (
|
|
|
2533
3290
|
}
|
|
2534
3291
|
|
|
2535
3292
|
// #endregion
|
|
2536
|
-
// #region @import "./_grid-column-start-end.scss"; ->
|
|
3293
|
+
// #region @import "./_grid-column-start-end.scss"; -> scss/flex-grid/_grid-column-start-end.scss
|
|
2537
3294
|
// TODO: docs
|
|
2538
3295
|
|
|
2539
3296
|
@mixin kendo-utils--flex-grid--grid-column-start-end() {
|
|
@@ -2561,7 +3318,7 @@ $kendo-utils: (
|
|
|
2561
3318
|
}
|
|
2562
3319
|
|
|
2563
3320
|
// #endregion
|
|
2564
|
-
// #region @import "./_grid-row-start-end.scss"; ->
|
|
3321
|
+
// #region @import "./_grid-row-start-end.scss"; -> scss/flex-grid/_grid-row-start-end.scss
|
|
2565
3322
|
// TODO: docs
|
|
2566
3323
|
|
|
2567
3324
|
@mixin kendo-utils--flex-grid--grid-row-start-end() {
|
|
@@ -2589,7 +3346,7 @@ $kendo-utils: (
|
|
|
2589
3346
|
}
|
|
2590
3347
|
|
|
2591
3348
|
// #endregion
|
|
2592
|
-
// #region @import "./_grid-template-columns.scss"; ->
|
|
3349
|
+
// #region @import "./_grid-template-columns.scss"; -> scss/flex-grid/_grid-template-columns.scss
|
|
2593
3350
|
// TODO: docs
|
|
2594
3351
|
|
|
2595
3352
|
@mixin kendo-utils--flex-grid--grid-template-columns() {
|
|
@@ -2601,7 +3358,7 @@ $kendo-utils: (
|
|
|
2601
3358
|
}
|
|
2602
3359
|
|
|
2603
3360
|
// #endregion
|
|
2604
|
-
// #region @import "./_grid-template-rows.scss"; ->
|
|
3361
|
+
// #region @import "./_grid-template-rows.scss"; -> scss/flex-grid/_grid-template-rows.scss
|
|
2605
3362
|
// TODO: docs
|
|
2606
3363
|
|
|
2607
3364
|
@mixin kendo-utils--flex-grid--grid-template-rows() {
|
|
@@ -2613,7 +3370,7 @@ $kendo-utils: (
|
|
|
2613
3370
|
}
|
|
2614
3371
|
|
|
2615
3372
|
// #endregion
|
|
2616
|
-
// #region @import "./_justify-content.scss"; ->
|
|
3373
|
+
// #region @import "./_justify-content.scss"; -> scss/flex-grid/_justify-content.scss
|
|
2617
3374
|
// TODO: docs
|
|
2618
3375
|
|
|
2619
3376
|
@mixin kendo-utils--flex-grid--justify-content() {
|
|
@@ -2630,7 +3387,7 @@ $kendo-utils: (
|
|
|
2630
3387
|
}
|
|
2631
3388
|
|
|
2632
3389
|
// #endregion
|
|
2633
|
-
// #region @import "./_justify-items.scss"; ->
|
|
3390
|
+
// #region @import "./_justify-items.scss"; -> scss/flex-grid/_justify-items.scss
|
|
2634
3391
|
// TODO: docs
|
|
2635
3392
|
|
|
2636
3393
|
@mixin kendo-utils--flex-grid--justify-items() {
|
|
@@ -2642,7 +3399,7 @@ $kendo-utils: (
|
|
|
2642
3399
|
}
|
|
2643
3400
|
|
|
2644
3401
|
// #endregion
|
|
2645
|
-
// #region @import "./_justify-self.scss"; ->
|
|
3402
|
+
// #region @import "./_justify-self.scss"; -> scss/flex-grid/_justify-self.scss
|
|
2646
3403
|
// TODO: docs
|
|
2647
3404
|
|
|
2648
3405
|
@mixin kendo-utils--flex-grid--justify-self() {
|
|
@@ -2654,7 +3411,7 @@ $kendo-utils: (
|
|
|
2654
3411
|
}
|
|
2655
3412
|
|
|
2656
3413
|
// #endregion
|
|
2657
|
-
// #region @import "./_order.scss"; ->
|
|
3414
|
+
// #region @import "./_order.scss"; -> scss/flex-grid/_order.scss
|
|
2658
3415
|
/// This is equivalent to `order: -9999;`.
|
|
2659
3416
|
/// @name .k-order-first
|
|
2660
3417
|
/// @group order
|
|
@@ -2670,11 +3427,6 @@ $kendo-utils: (
|
|
|
2670
3427
|
/// @group order
|
|
2671
3428
|
/// @contextType css
|
|
2672
3429
|
|
|
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
3430
|
@mixin kendo-utils--flex-grid--order() {
|
|
2679
3431
|
|
|
2680
3432
|
// Order utility classes
|
|
@@ -2684,7 +3436,7 @@ $kendo-utils: (
|
|
|
2684
3436
|
}
|
|
2685
3437
|
|
|
2686
3438
|
// #endregion
|
|
2687
|
-
// #region @import "./_place-content.scss"; ->
|
|
3439
|
+
// #region @import "./_place-content.scss"; -> scss/flex-grid/_place-content.scss
|
|
2688
3440
|
// TODO: docs
|
|
2689
3441
|
|
|
2690
3442
|
@mixin kendo-utils--flex-grid--place-content() {
|
|
@@ -2696,7 +3448,7 @@ $kendo-utils: (
|
|
|
2696
3448
|
}
|
|
2697
3449
|
|
|
2698
3450
|
// #endregion
|
|
2699
|
-
// #region @import "./_place-items.scss"; ->
|
|
3451
|
+
// #region @import "./_place-items.scss"; -> scss/flex-grid/_place-items.scss
|
|
2700
3452
|
// TODO: docs
|
|
2701
3453
|
|
|
2702
3454
|
@mixin kendo-utils--flex-grid--place-items() {
|
|
@@ -2708,7 +3460,7 @@ $kendo-utils: (
|
|
|
2708
3460
|
}
|
|
2709
3461
|
|
|
2710
3462
|
// #endregion
|
|
2711
|
-
// #region @import "./_place-self.scss"; ->
|
|
3463
|
+
// #region @import "./_place-self.scss"; -> scss/flex-grid/_place-self.scss
|
|
2712
3464
|
// TODO: docs
|
|
2713
3465
|
|
|
2714
3466
|
@mixin kendo-utils--flex-grid--place-self() {
|
|
@@ -2750,8 +3502,8 @@ $kendo-utils: (
|
|
|
2750
3502
|
}
|
|
2751
3503
|
|
|
2752
3504
|
// #endregion
|
|
2753
|
-
// #region @import "./spacing/index.import.scss"; ->
|
|
2754
|
-
// #region @import "./_margin.scss"; ->
|
|
3505
|
+
// #region @import "./spacing/index.import.scss"; -> scss/spacing/index.import.scss
|
|
3506
|
+
// #region @import "./_margin.scss"; -> scss/spacing/_margin.scss
|
|
2755
3507
|
// TODO: docs
|
|
2756
3508
|
|
|
2757
3509
|
@mixin kendo-utils--spacing--margin() {
|
|
@@ -2769,7 +3521,7 @@ $kendo-utils: (
|
|
|
2769
3521
|
}
|
|
2770
3522
|
|
|
2771
3523
|
// #endregion
|
|
2772
|
-
// #region @import "./_padding.scss"; ->
|
|
3524
|
+
// #region @import "./_padding.scss"; -> scss/spacing/_padding.scss
|
|
2773
3525
|
// TODO: docs
|
|
2774
3526
|
|
|
2775
3527
|
@mixin kendo-utils--spacing--padding() {
|
|
@@ -2787,7 +3539,7 @@ $kendo-utils: (
|
|
|
2787
3539
|
}
|
|
2788
3540
|
|
|
2789
3541
|
// #endregion
|
|
2790
|
-
// #region @import "./_space-between.scss"; ->
|
|
3542
|
+
// #region @import "./_space-between.scss"; -> scss/spacing/_space-between.scss
|
|
2791
3543
|
// TODO: docs
|
|
2792
3544
|
|
|
2793
3545
|
@mixin kendo-utils--spacing--space-between() {
|
|
@@ -2817,8 +3569,8 @@ $kendo-utils: (
|
|
|
2817
3569
|
}
|
|
2818
3570
|
|
|
2819
3571
|
// #endregion
|
|
2820
|
-
// #region @import "./sizing/index.import.scss"; ->
|
|
2821
|
-
// #region @import "./_height.scss"; ->
|
|
3572
|
+
// #region @import "./sizing/index.import.scss"; -> scss/sizing/index.import.scss
|
|
3573
|
+
// #region @import "./_height.scss"; -> scss/sizing/_height.scss
|
|
2822
3574
|
// TODO: docs
|
|
2823
3575
|
|
|
2824
3576
|
@mixin kendo-utils--sizing--height() {
|
|
@@ -2838,7 +3590,7 @@ $kendo-utils: (
|
|
|
2838
3590
|
}
|
|
2839
3591
|
|
|
2840
3592
|
// #endregion
|
|
2841
|
-
// #region @import "./_width.scss"; ->
|
|
3593
|
+
// #region @import "./_width.scss"; -> scss/sizing/_width.scss
|
|
2842
3594
|
// TODO: docs
|
|
2843
3595
|
|
|
2844
3596
|
@mixin kendo-utils--sizing--width() {
|
|
@@ -2866,9 +3618,9 @@ $kendo-utils: (
|
|
|
2866
3618
|
}
|
|
2867
3619
|
|
|
2868
3620
|
// #endregion
|
|
2869
|
-
// #region @import "./typography/index.import.scss"; ->
|
|
3621
|
+
// #region @import "./typography/index.import.scss"; -> scss/typography/index.import.scss
|
|
2870
3622
|
// font family
|
|
2871
|
-
// #region @import "./_font-size.scss"; ->
|
|
3623
|
+
// #region @import "./_font-size.scss"; -> scss/typography/_font-size.scss
|
|
2872
3624
|
// TODO: docs
|
|
2873
3625
|
|
|
2874
3626
|
@mixin kendo-utils--typography--font-size() {
|
|
@@ -2884,7 +3636,7 @@ $kendo-utils: (
|
|
|
2884
3636
|
|
|
2885
3637
|
// #endregion
|
|
2886
3638
|
// font smoothing
|
|
2887
|
-
// #region @import "./_font-style.scss"; ->
|
|
3639
|
+
// #region @import "./_font-style.scss"; -> scss/typography/_font-style.scss
|
|
2888
3640
|
// TODO: docs
|
|
2889
3641
|
|
|
2890
3642
|
@mixin kendo-utils--typography--font-style() {
|
|
@@ -2896,7 +3648,7 @@ $kendo-utils: (
|
|
|
2896
3648
|
}
|
|
2897
3649
|
|
|
2898
3650
|
// #endregion
|
|
2899
|
-
// #region @import "./_font-weight.scss"; ->
|
|
3651
|
+
// #region @import "./_font-weight.scss"; -> scss/typography/_font-weight.scss
|
|
2900
3652
|
// TODO: docs
|
|
2901
3653
|
|
|
2902
3654
|
@mixin kendo-utils--typography--font-weight() {
|
|
@@ -2916,7 +3668,7 @@ $kendo-utils: (
|
|
|
2916
3668
|
// letter spacing
|
|
2917
3669
|
// line height
|
|
2918
3670
|
// list style
|
|
2919
|
-
// #region @import "./_text-align.scss"; ->
|
|
3671
|
+
// #region @import "./_text-align.scss"; -> scss/typography/_text-align.scss
|
|
2920
3672
|
// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
|
|
2921
3673
|
|
|
2922
3674
|
/// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
|
|
@@ -2949,7 +3701,7 @@ $kendo-utils: (
|
|
|
2949
3701
|
}
|
|
2950
3702
|
|
|
2951
3703
|
// #endregion
|
|
2952
|
-
// #region @import "./_text-color.scss"; ->
|
|
3704
|
+
// #region @import "./_text-color.scss"; -> scss/typography/_text-color.scss
|
|
2953
3705
|
// TODO: docs
|
|
2954
3706
|
|
|
2955
3707
|
@mixin kendo-utils--typography--text-color() {
|
|
@@ -2966,7 +3718,34 @@ $kendo-utils: (
|
|
|
2966
3718
|
|
|
2967
3719
|
// #endregion
|
|
2968
3720
|
// text decoration
|
|
2969
|
-
// #region @import "./_text-
|
|
3721
|
+
// #region @import "./_text-overflow.scss"; -> scss/typography/_text-overflow.scss
|
|
3722
|
+
@mixin kendo-utils--typography--text-overflow() {
|
|
3723
|
+
|
|
3724
|
+
// Text overflow utility classes
|
|
3725
|
+
$kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
|
|
3726
|
+
@include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
|
|
3727
|
+
|
|
3728
|
+
|
|
3729
|
+
// Text truncate utility classes
|
|
3730
|
+
.#{$kendo-prefix}text-truncate {
|
|
3731
|
+
white-space: nowrap;
|
|
3732
|
+
overflow: hidden;
|
|
3733
|
+
text-overflow: ellipsis;
|
|
3734
|
+
}
|
|
3735
|
+
.\!#{$kendo-prefix}text-truncate {
|
|
3736
|
+
white-space: nowrap !important; // sass-lint:disable-line no-important
|
|
3737
|
+
overflow: hidden !important; // sass-lint:disable-line no-important
|
|
3738
|
+
text-overflow: ellipsis !important; // sass-lint:disable-line no-important
|
|
3739
|
+
}
|
|
3740
|
+
|
|
3741
|
+
// Legacy aliases
|
|
3742
|
+
.#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
|
|
3743
|
+
.\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }
|
|
3744
|
+
|
|
3745
|
+
}
|
|
3746
|
+
|
|
3747
|
+
// #endregion
|
|
3748
|
+
// #region @import "./_text-transform.scss"; -> scss/typography/_text-transform.scss
|
|
2970
3749
|
// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
|
|
2971
3750
|
|
|
2972
3751
|
/// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
|
|
@@ -2993,10 +3772,9 @@ $kendo-utils: (
|
|
|
2993
3772
|
}
|
|
2994
3773
|
|
|
2995
3774
|
// #endregion
|
|
2996
|
-
// text overflow
|
|
2997
3775
|
// text indent
|
|
2998
3776
|
// vertical align
|
|
2999
|
-
// #region @import "./_white-space.scss"; ->
|
|
3777
|
+
// #region @import "./_white-space.scss"; -> scss/typography/_white-space.scss
|
|
3000
3778
|
// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
|
|
3001
3779
|
|
|
3002
3780
|
/// 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.
|
|
@@ -3047,23 +3825,19 @@ $kendo-utils: (
|
|
|
3047
3825
|
|
|
3048
3826
|
|
|
3049
3827
|
@mixin kendo-utils--typography() {
|
|
3050
|
-
/// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
|
|
3051
|
-
/// @name .k-text-ellipsis
|
|
3052
|
-
/// @group text
|
|
3053
|
-
.#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
|
|
3054
|
-
|
|
3055
3828
|
@include kendo-utils--typography--font-size();
|
|
3056
3829
|
@include kendo-utils--typography--font-style();
|
|
3057
3830
|
@include kendo-utils--typography--font-weight();
|
|
3058
3831
|
@include kendo-utils--typography--text-align();
|
|
3059
3832
|
@include kendo-utils--typography--text-color();
|
|
3833
|
+
@include kendo-utils--typography--text-overflow();
|
|
3060
3834
|
@include kendo-utils--typography--text-transform();
|
|
3061
3835
|
@include kendo-utils--typography--white-space();
|
|
3062
3836
|
}
|
|
3063
3837
|
|
|
3064
3838
|
// #endregion
|
|
3065
|
-
// #region @import "./background/index.import.scss"; ->
|
|
3066
|
-
// #region @import "./_background-color.scss"; ->
|
|
3839
|
+
// #region @import "./background/index.import.scss"; -> scss/background/index.import.scss
|
|
3840
|
+
// #region @import "./_background-color.scss"; -> scss/background/_background-color.scss
|
|
3067
3841
|
// TODO: docs
|
|
3068
3842
|
|
|
3069
3843
|
@mixin kendo-utils--background--background-color() {
|
|
@@ -3082,8 +3856,8 @@ $kendo-utils: (
|
|
|
3082
3856
|
}
|
|
3083
3857
|
|
|
3084
3858
|
// #endregion
|
|
3085
|
-
// #region @import "./border/index.import.scss"; ->
|
|
3086
|
-
// #region @import "./_border-color.scss"; ->
|
|
3859
|
+
// #region @import "./border/index.import.scss"; -> scss/border/index.import.scss
|
|
3860
|
+
// #region @import "./_border-color.scss"; -> scss/border/_border-color.scss
|
|
3087
3861
|
// TODO: docs
|
|
3088
3862
|
|
|
3089
3863
|
@mixin kendo-utils--border--border-color() {
|
|
@@ -3101,7 +3875,7 @@ $kendo-utils: (
|
|
|
3101
3875
|
}
|
|
3102
3876
|
|
|
3103
3877
|
// #endregion
|
|
3104
|
-
// #region @import "./_border-radius.scss"; ->
|
|
3878
|
+
// #region @import "./_border-radius.scss"; -> scss/border/_border-radius.scss
|
|
3105
3879
|
// TODO: docs
|
|
3106
3880
|
|
|
3107
3881
|
@mixin kendo-utils--border--border-radius() {
|
|
@@ -3121,7 +3895,7 @@ $kendo-utils: (
|
|
|
3121
3895
|
}
|
|
3122
3896
|
|
|
3123
3897
|
// #endregion
|
|
3124
|
-
// #region @import "./_border-style.scss"; ->
|
|
3898
|
+
// #region @import "./_border-style.scss"; -> scss/border/_border-style.scss
|
|
3125
3899
|
// TODO: docs
|
|
3126
3900
|
|
|
3127
3901
|
@mixin kendo-utils--border--border-style() {
|
|
@@ -3139,7 +3913,7 @@ $kendo-utils: (
|
|
|
3139
3913
|
}
|
|
3140
3914
|
|
|
3141
3915
|
// #endregion
|
|
3142
|
-
// #region @import "./_border-width.scss"; ->
|
|
3916
|
+
// #region @import "./_border-width.scss"; -> scss/border/_border-width.scss
|
|
3143
3917
|
// TODO: docs
|
|
3144
3918
|
|
|
3145
3919
|
@mixin kendo-utils--border--border-width() {
|
|
@@ -3164,7 +3938,7 @@ $kendo-utils: (
|
|
|
3164
3938
|
}
|
|
3165
3939
|
|
|
3166
3940
|
// #endregion
|
|
3167
|
-
// #region @import "./_outline-color.scss"; ->
|
|
3941
|
+
// #region @import "./_outline-color.scss"; -> scss/border/_outline-color.scss
|
|
3168
3942
|
// TODO: docs
|
|
3169
3943
|
|
|
3170
3944
|
@mixin kendo-utils--border--outline-color() {
|
|
@@ -3176,7 +3950,7 @@ $kendo-utils: (
|
|
|
3176
3950
|
}
|
|
3177
3951
|
|
|
3178
3952
|
// #endregion
|
|
3179
|
-
// #region @import "./_outline-offset.scss"; ->
|
|
3953
|
+
// #region @import "./_outline-offset.scss"; -> scss/border/_outline-offset.scss
|
|
3180
3954
|
// TODO: docs
|
|
3181
3955
|
|
|
3182
3956
|
@mixin kendo-utils--border--outline-offset() {
|
|
@@ -3188,7 +3962,7 @@ $kendo-utils: (
|
|
|
3188
3962
|
}
|
|
3189
3963
|
|
|
3190
3964
|
// #endregion
|
|
3191
|
-
// #region @import "./_outline-style.scss"; ->
|
|
3965
|
+
// #region @import "./_outline-style.scss"; -> scss/border/_outline-style.scss
|
|
3192
3966
|
// TODO: docs
|
|
3193
3967
|
|
|
3194
3968
|
@mixin kendo-utils--border--outline-style() {
|
|
@@ -3200,7 +3974,7 @@ $kendo-utils: (
|
|
|
3200
3974
|
}
|
|
3201
3975
|
|
|
3202
3976
|
// #endregion
|
|
3203
|
-
// #region @import "./_outline-width.scss"; ->
|
|
3977
|
+
// #region @import "./_outline-width.scss"; -> scss/border/_outline-width.scss
|
|
3204
3978
|
// TODO: docs
|
|
3205
3979
|
|
|
3206
3980
|
@mixin kendo-utils--border--outline-width() {
|
|
@@ -3228,8 +4002,8 @@ $kendo-utils: (
|
|
|
3228
4002
|
// #endregion
|
|
3229
4003
|
// effects
|
|
3230
4004
|
// filter
|
|
3231
|
-
// #region @import "./table/index.import.scss"; ->
|
|
3232
|
-
// #region @import "./_border-collapse.scss"; ->
|
|
4005
|
+
// #region @import "./table/index.import.scss"; -> scss/table/index.import.scss
|
|
4006
|
+
// #region @import "./_border-collapse.scss"; -> scss/table/_border-collapse.scss
|
|
3233
4007
|
// TODO: docs
|
|
3234
4008
|
|
|
3235
4009
|
@mixin kendo-utils--table--border-collapse() {
|
|
@@ -3241,7 +4015,7 @@ $kendo-utils: (
|
|
|
3241
4015
|
}
|
|
3242
4016
|
|
|
3243
4017
|
// #endregion
|
|
3244
|
-
// #region @import "./_table-layout.scss"; ->
|
|
4018
|
+
// #region @import "./_table-layout.scss"; -> scss/table/_table-layout.scss
|
|
3245
4019
|
// Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
|
|
3246
4020
|
|
|
3247
4021
|
/// 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 +4047,8 @@ $kendo-utils: (
|
|
|
3273
4047
|
|
|
3274
4048
|
// #endregion
|
|
3275
4049
|
// transition
|
|
3276
|
-
// #region @import "./transform/index.import.scss"; ->
|
|
3277
|
-
// #region @import "./_flip.scss"; ->
|
|
4050
|
+
// #region @import "./transform/index.import.scss"; -> scss/transform/index.import.scss
|
|
4051
|
+
// #region @import "./_flip.scss"; -> scss/transform/_flip.scss
|
|
3278
4052
|
/// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
|
|
3279
4053
|
/// @name .k-flip-h
|
|
3280
4054
|
/// @group transform
|
|
@@ -3309,7 +4083,7 @@ $kendo-utils: (
|
|
|
3309
4083
|
}
|
|
3310
4084
|
|
|
3311
4085
|
// #endregion
|
|
3312
|
-
// #region @import "./_origin.scss"; ->
|
|
4086
|
+
// #region @import "./_origin.scss"; -> scss/transform/_origin.scss
|
|
3313
4087
|
// TODO: docs
|
|
3314
4088
|
|
|
3315
4089
|
@mixin kendo-utils--transform--origin() {
|
|
@@ -3321,7 +4095,7 @@ $kendo-utils: (
|
|
|
3321
4095
|
}
|
|
3322
4096
|
|
|
3323
4097
|
// #endregion
|
|
3324
|
-
// #region @import "./_rotate.scss"; ->
|
|
4098
|
+
// #region @import "./_rotate.scss"; -> scss/transform/_rotate.scss
|
|
3325
4099
|
/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
|
|
3326
4100
|
/// @name .k-rotate-0
|
|
3327
4101
|
/// @group transform
|
|
@@ -3377,7 +4151,7 @@ $kendo-utils: (
|
|
|
3377
4151
|
}
|
|
3378
4152
|
|
|
3379
4153
|
// #endregion
|
|
3380
|
-
// #region @import "./_scale.scss"; ->
|
|
4154
|
+
// #region @import "./_scale.scss"; -> scss/transform/_scale.scss
|
|
3381
4155
|
/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
|
|
3382
4156
|
/// @name .k-scale-0
|
|
3383
4157
|
/// @group transform
|
|
@@ -3416,7 +4190,7 @@ $kendo-utils: (
|
|
|
3416
4190
|
}
|
|
3417
4191
|
|
|
3418
4192
|
// #endregion
|
|
3419
|
-
// #region @import "./_skew.scss"; ->
|
|
4193
|
+
// #region @import "./_skew.scss"; -> scss/transform/_skew.scss
|
|
3420
4194
|
// TODO: docs
|
|
3421
4195
|
|
|
3422
4196
|
// sass-lint:disable function-name-format
|
|
@@ -3438,7 +4212,7 @@ $kendo-utils: (
|
|
|
3438
4212
|
}
|
|
3439
4213
|
|
|
3440
4214
|
// #endregion
|
|
3441
|
-
// #region @import "./_translate.scss"; ->
|
|
4215
|
+
// #region @import "./_translate.scss"; -> scss/transform/_translate.scss
|
|
3442
4216
|
/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
|
|
3443
4217
|
/// @name .k-translate-0
|
|
3444
4218
|
/// @group transform
|
|
@@ -3530,8 +4304,8 @@ $kendo-utils: (
|
|
|
3530
4304
|
}
|
|
3531
4305
|
|
|
3532
4306
|
// #endregion
|
|
3533
|
-
// #region @import "./interactivity/index.import.scss"; ->
|
|
3534
|
-
// #region @import "./_accent-color.scss"; ->
|
|
4307
|
+
// #region @import "./interactivity/index.import.scss"; -> scss/interactivity/index.import.scss
|
|
4308
|
+
// #region @import "./_accent-color.scss"; -> scss/interactivity/_accent-color.scss
|
|
3535
4309
|
// TODO: docs
|
|
3536
4310
|
|
|
3537
4311
|
@mixin kendo-utils--interactivity--accent-color() {
|
|
@@ -3543,7 +4317,7 @@ $kendo-utils: (
|
|
|
3543
4317
|
}
|
|
3544
4318
|
|
|
3545
4319
|
// #endregion
|
|
3546
|
-
// #region @import "./_appearance.scss"; ->
|
|
4320
|
+
// #region @import "./_appearance.scss"; -> scss/interactivity/_appearance.scss
|
|
3547
4321
|
/// This is equivalent to `appearance: none;`. Resets any browser specific styling on an element.
|
|
3548
4322
|
/// @name .k-appearance-none
|
|
3549
4323
|
/// @group appearance
|
|
@@ -3563,7 +4337,7 @@ $kendo-utils: (
|
|
|
3563
4337
|
}
|
|
3564
4338
|
|
|
3565
4339
|
// #endregion
|
|
3566
|
-
// #region @import "./_caret-color.scss"; ->
|
|
4340
|
+
// #region @import "./_caret-color.scss"; -> scss/interactivity/_caret-color.scss
|
|
3567
4341
|
// TODO: docs
|
|
3568
4342
|
|
|
3569
4343
|
@mixin kendo-utils--interactivity--caret-color() {
|
|
@@ -3575,7 +4349,7 @@ $kendo-utils: (
|
|
|
3575
4349
|
}
|
|
3576
4350
|
|
|
3577
4351
|
// #endregion
|
|
3578
|
-
// #region @import "./_cursor.scss"; ->
|
|
4352
|
+
// #region @import "./_cursor.scss"; -> scss/interactivity/_cursor.scss
|
|
3579
4353
|
// TODO: docs
|
|
3580
4354
|
|
|
3581
4355
|
@mixin kendo-utils--interactivity--cursor() {
|
|
@@ -3587,7 +4361,7 @@ $kendo-utils: (
|
|
|
3587
4361
|
}
|
|
3588
4362
|
|
|
3589
4363
|
// #endregion
|
|
3590
|
-
// #region @import "./_pointer-events.scss"; ->
|
|
4364
|
+
// #region @import "./_pointer-events.scss"; -> scss/interactivity/_pointer-events.scss
|
|
3591
4365
|
// Pointer-events documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.
|
|
3592
4366
|
|
|
3593
4367
|
/// 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 +4383,7 @@ $kendo-utils: (
|
|
|
3609
4383
|
}
|
|
3610
4384
|
|
|
3611
4385
|
// #endregion
|
|
3612
|
-
// #region @import "./_resize.scss"; ->
|
|
4386
|
+
// #region @import "./_resize.scss"; -> scss/interactivity/_resize.scss
|
|
3613
4387
|
// Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
|
|
3614
4388
|
|
|
3615
4389
|
/// 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 +4415,7 @@ $kendo-utils: (
|
|
|
3641
4415
|
}
|
|
3642
4416
|
|
|
3643
4417
|
// #endregion
|
|
3644
|
-
// #region @import "./_scroll.scss"; ->
|
|
4418
|
+
// #region @import "./_scroll.scss"; -> scss/interactivity/_scroll.scss
|
|
3645
4419
|
// TODO: docs
|
|
3646
4420
|
|
|
3647
4421
|
@mixin kendo-utils--interactivity--scroll() {
|
|
@@ -3694,7 +4468,7 @@ $kendo-utils: (
|
|
|
3694
4468
|
}
|
|
3695
4469
|
|
|
3696
4470
|
// #endregion
|
|
3697
|
-
// #region @import "./_touch-action.scss"; ->
|
|
4471
|
+
// #region @import "./_touch-action.scss"; -> scss/interactivity/_touch-action.scss
|
|
3698
4472
|
// TODO: docs
|
|
3699
4473
|
|
|
3700
4474
|
/// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
|
|
@@ -3716,7 +4490,7 @@ $kendo-utils: (
|
|
|
3716
4490
|
}
|
|
3717
4491
|
|
|
3718
4492
|
// #endregion
|
|
3719
|
-
// #region @import "./_user-select.scss"; ->
|
|
4493
|
+
// #region @import "./_user-select.scss"; -> scss/interactivity/_user-select.scss
|
|
3720
4494
|
// User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
|
|
3721
4495
|
|
|
3722
4496
|
/// 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 +4527,7 @@ $kendo-utils: (
|
|
|
3753
4527
|
}
|
|
3754
4528
|
|
|
3755
4529
|
// #endregion
|
|
3756
|
-
// #region @import "./_will-change.scss"; ->
|
|
4530
|
+
// #region @import "./_will-change.scss"; -> scss/interactivity/_will-change.scss
|
|
3757
4531
|
// TODO: docs
|
|
3758
4532
|
|
|
3759
4533
|
@mixin kendo-utils--interactivity--will-change() {
|