@epam/uui 5.9.3 → 5.9.5
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/assets/styles/buttonLayout.scss +70 -70
- package/assets/styles/clickable.scss +26 -26
- package/assets/styles/controlLayout.scss +28 -28
- package/assets/styles/dnd.scss +9 -9
- package/assets/styles/effects.scss +7 -7
- package/assets/styles/icons.scss +54 -54
- package/assets/styles/index.scss +9 -9
- package/assets/styles/inputs.scss +70 -70
- package/assets/styles/text-size.scss +42 -42
- package/assets/styles/typography.scss +180 -180
- package/index.esm.js +100 -100
- package/index.esm.js.map +1 -1
- package/index.js +100 -100
- package/index.js.map +1 -1
- package/package.json +5 -5
- package/readme.md +9 -9
- package/stats.html +1 -1
- package/styles.css +2660 -2660
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
@use './text-size' as *;
|
|
2
|
-
@use './icons' as *;
|
|
3
|
-
|
|
4
|
-
@mixin button-layout($size, $borderWidth) {
|
|
5
|
-
@include button-horizontal-layout($size, $borderWidth);
|
|
6
|
-
@include button-vertical-layout($size, $borderWidth);
|
|
7
|
-
@include scalable-icon-size($size);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@mixin link-button-layout($size) {
|
|
11
|
-
@include link-button-horizontal-layout($size);
|
|
12
|
-
@include button-vertical-layout($size, 0);
|
|
13
|
-
@include scalable-icon-size($size);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@mixin button-vertical-layout($size, $borderWidth) {
|
|
17
|
-
&:global(.uui-button-box) {
|
|
18
|
-
min-height: $size;
|
|
19
|
-
border-width: $borderWidth;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:global(.uui-caption) {
|
|
23
|
-
@include text-size($size, $borderWidth);
|
|
24
|
-
|
|
25
|
-
@if ($size == 42px or $size == 48px) {
|
|
26
|
-
font-size: 16px;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@mixin button-horizontal-layout($size, $borderWidth) {
|
|
32
|
-
min-width: $size;
|
|
33
|
-
|
|
34
|
-
@if ($size == 18px) {
|
|
35
|
-
@include button-padding(3px, 3px, $borderWidth);
|
|
36
|
-
} @else if ($size == 24px) {
|
|
37
|
-
@include button-padding(6px, 6px, $borderWidth);
|
|
38
|
-
} @else if ($size == 30px) {
|
|
39
|
-
@include button-padding(6px, 6px, $borderWidth);
|
|
40
|
-
} @else if ($size == 36px) {
|
|
41
|
-
@include button-padding(6px, 6px, $borderWidth);
|
|
42
|
-
} @else if ($size == 42px) {
|
|
43
|
-
@include button-padding(12px, 6px, $borderWidth);
|
|
44
|
-
} @else if ($size == 48px) {
|
|
45
|
-
@include button-padding(12px, 6px, $borderWidth);
|
|
46
|
-
} @else {
|
|
47
|
-
@include button-padding(6px, 6px, $borderWidth); }
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
|
|
51
|
-
padding-left: $controlPadding - $borderWidth;
|
|
52
|
-
padding-right: $controlPadding - $borderWidth;
|
|
53
|
-
|
|
54
|
-
:global(.uui-caption) {
|
|
55
|
-
padding-left: $captionPadding;
|
|
56
|
-
padding-right: $captionPadding;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@mixin link-button-horizontal-layout($size) {
|
|
61
|
-
min-width: $size;
|
|
62
|
-
|
|
63
|
-
&:global(.uui-has-left-icon) :global(.uui-caption) {
|
|
64
|
-
padding-left: 6px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&:global(.uui-has-right-icon) :global(.uui-caption) {
|
|
68
|
-
padding-right: 6px;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
1
|
+
@use './text-size' as *;
|
|
2
|
+
@use './icons' as *;
|
|
3
|
+
|
|
4
|
+
@mixin button-layout($size, $borderWidth) {
|
|
5
|
+
@include button-horizontal-layout($size, $borderWidth);
|
|
6
|
+
@include button-vertical-layout($size, $borderWidth);
|
|
7
|
+
@include scalable-icon-size($size);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin link-button-layout($size) {
|
|
11
|
+
@include link-button-horizontal-layout($size);
|
|
12
|
+
@include button-vertical-layout($size, 0);
|
|
13
|
+
@include scalable-icon-size($size);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@mixin button-vertical-layout($size, $borderWidth) {
|
|
17
|
+
&:global(.uui-button-box) {
|
|
18
|
+
min-height: $size;
|
|
19
|
+
border-width: $borderWidth;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:global(.uui-caption) {
|
|
23
|
+
@include text-size($size, $borderWidth);
|
|
24
|
+
|
|
25
|
+
@if ($size == 42px or $size == 48px) {
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@mixin button-horizontal-layout($size, $borderWidth) {
|
|
32
|
+
min-width: $size;
|
|
33
|
+
|
|
34
|
+
@if ($size == 18px) {
|
|
35
|
+
@include button-padding(3px, 3px, $borderWidth);
|
|
36
|
+
} @else if ($size == 24px) {
|
|
37
|
+
@include button-padding(6px, 6px, $borderWidth);
|
|
38
|
+
} @else if ($size == 30px) {
|
|
39
|
+
@include button-padding(6px, 6px, $borderWidth);
|
|
40
|
+
} @else if ($size == 36px) {
|
|
41
|
+
@include button-padding(6px, 6px, $borderWidth);
|
|
42
|
+
} @else if ($size == 42px) {
|
|
43
|
+
@include button-padding(12px, 6px, $borderWidth);
|
|
44
|
+
} @else if ($size == 48px) {
|
|
45
|
+
@include button-padding(12px, 6px, $borderWidth);
|
|
46
|
+
} @else {
|
|
47
|
+
@include button-padding(6px, 6px, $borderWidth); }
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
|
|
51
|
+
padding-left: $controlPadding - $borderWidth;
|
|
52
|
+
padding-right: $controlPadding - $borderWidth;
|
|
53
|
+
|
|
54
|
+
:global(.uui-caption) {
|
|
55
|
+
padding-left: $captionPadding;
|
|
56
|
+
padding-right: $captionPadding;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin link-button-horizontal-layout($size) {
|
|
61
|
+
min-width: $size;
|
|
62
|
+
|
|
63
|
+
&:global(.uui-has-left-icon) :global(.uui-caption) {
|
|
64
|
+
padding-left: 6px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:global(.uui-has-right-icon) :global(.uui-caption) {
|
|
68
|
+
padding-right: 6px;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@mixin clickable-styles() {
|
|
2
|
-
text-decoration: none;
|
|
3
|
-
outline: none;
|
|
4
|
-
border: 0;
|
|
5
|
-
background: none;
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
appearance: none;
|
|
8
|
-
align-items: unset;
|
|
9
|
-
padding: unset;
|
|
10
|
-
margin: unset;
|
|
11
|
-
justify-content: unset;
|
|
12
|
-
overflow: hidden;
|
|
13
|
-
display: flex;
|
|
14
|
-
position: relative;
|
|
15
|
-
|
|
16
|
-
&:hover {
|
|
17
|
-
text-decoration: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&:global(.-clickable) {
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&:global(.uui-disabled) {
|
|
25
|
-
cursor: default;
|
|
26
|
-
}
|
|
1
|
+
@mixin clickable-styles() {
|
|
2
|
+
text-decoration: none;
|
|
3
|
+
outline: none;
|
|
4
|
+
border: 0;
|
|
5
|
+
background: none;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
appearance: none;
|
|
8
|
+
align-items: unset;
|
|
9
|
+
padding: unset;
|
|
10
|
+
margin: unset;
|
|
11
|
+
justify-content: unset;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
display: flex;
|
|
14
|
+
position: relative;
|
|
15
|
+
|
|
16
|
+
&:hover {
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:global(.-clickable) {
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:global(.uui-disabled) {
|
|
25
|
+
cursor: default;
|
|
26
|
+
}
|
|
27
27
|
}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
@use 'text-size' as *;
|
|
2
|
-
|
|
3
|
-
@mixin control-vertical-layout($size, $borderWidth) {
|
|
4
|
-
:global(.uui-caption), :global(.uui-input) {
|
|
5
|
-
@include text-size($size, $borderWidth);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
&:global(.uui-button-box), &:global(.uui-input-box) {
|
|
9
|
-
min-height: $size;
|
|
10
|
-
border-width: $borderWidth;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@mixin control-box-layout($size, $borderWidth) {
|
|
15
|
-
min-width: $size;
|
|
16
|
-
padding-left: 5px;
|
|
17
|
-
padding-right: 5px;
|
|
18
|
-
|
|
19
|
-
:global(.uui-caption), :global(.uui-input) {
|
|
20
|
-
padding-left: 6px;
|
|
21
|
-
padding-right: 6px;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&:global(.uui-button-box), &:global(.uui-input-box) {
|
|
25
|
-
min-height: $size;
|
|
26
|
-
border-width: $borderWidth;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
@use 'text-size' as *;
|
|
2
|
+
|
|
3
|
+
@mixin control-vertical-layout($size, $borderWidth) {
|
|
4
|
+
:global(.uui-caption), :global(.uui-input) {
|
|
5
|
+
@include text-size($size, $borderWidth);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&:global(.uui-button-box), &:global(.uui-input-box) {
|
|
9
|
+
min-height: $size;
|
|
10
|
+
border-width: $borderWidth;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin control-box-layout($size, $borderWidth) {
|
|
15
|
+
min-width: $size;
|
|
16
|
+
padding-left: 5px;
|
|
17
|
+
padding-right: 5px;
|
|
18
|
+
|
|
19
|
+
:global(.uui-caption), :global(.uui-input) {
|
|
20
|
+
padding-left: 6px;
|
|
21
|
+
padding-right: 6px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:global(.uui-button-box), &:global(.uui-input-box) {
|
|
25
|
+
min-height: $size;
|
|
26
|
+
border-width: $borderWidth;
|
|
27
|
+
}
|
|
28
|
+
}
|
package/assets/styles/dnd.scss
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
@mixin dnd-cursor-style {
|
|
2
|
-
&:hover {
|
|
3
|
-
cursor: grab;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
&:active {
|
|
7
|
-
cursor: grabbing;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
1
|
+
@mixin dnd-cursor-style {
|
|
2
|
+
&:hover {
|
|
3
|
+
cursor: grab;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&:active {
|
|
7
|
+
cursor: grabbing;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05); }
|
|
2
|
-
|
|
3
|
-
@mixin focus-visible-effect($offset: var(--uui-focus-outline-offset), $radius: var(--uui-focus-radius)) {
|
|
4
|
-
outline: var(--uui-focus-outline-width) solid var(--uui-outline-focus);
|
|
5
|
-
outline-offset: $offset;
|
|
6
|
-
border-radius: $radius;
|
|
7
|
-
}
|
|
1
|
+
@mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05); }
|
|
2
|
+
|
|
3
|
+
@mixin focus-visible-effect($offset: var(--uui-focus-outline-offset), $radius: var(--uui-focus-radius)) {
|
|
4
|
+
outline: var(--uui-focus-outline-width) solid var(--uui-outline-focus);
|
|
5
|
+
outline-offset: $offset;
|
|
6
|
+
border-radius: $radius;
|
|
7
|
+
}
|
package/assets/styles/icons.scss
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
@use 'sass:math';
|
|
2
|
-
@use 'sass:meta';
|
|
3
|
-
|
|
4
|
-
@mixin icon-layout($size) {
|
|
5
|
-
:global(.uui-icon) {
|
|
6
|
-
svg {
|
|
7
|
-
height: math.div($size, 36) * 24;
|
|
8
|
-
max-width: math.div($size, 36) * 24;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@mixin icon-size($size) {
|
|
14
|
-
$striped-size: strip-unit($size);
|
|
15
|
-
|
|
16
|
-
:global(.uui-icon) {
|
|
17
|
-
svg {
|
|
18
|
-
height: #{$striped-size}px;
|
|
19
|
-
width: #{$striped-size}px;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@function strip-unit($number) {
|
|
25
|
-
@if meta.type-of($number) == 'number' and not math.is-unitless($number) {
|
|
26
|
-
@return math.div($number, $number * 0 + 1);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@return $number;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@mixin scalable-icon-size($size, $additionalClass: '') {
|
|
33
|
-
$striped-size: strip-unit($size);
|
|
34
|
-
|
|
35
|
-
#{$additionalClass}:global(.uui-icon) {
|
|
36
|
-
svg {
|
|
37
|
-
@if ($striped-size == 18) {
|
|
38
|
-
height: 12px;
|
|
39
|
-
} @else if ($striped-size == 24) {
|
|
40
|
-
height: 12px;
|
|
41
|
-
} @else if ($striped-size == 30) {
|
|
42
|
-
height: 18px;
|
|
43
|
-
} @else if ($striped-size == 36) {
|
|
44
|
-
height: 18px;
|
|
45
|
-
} @else if ($striped-size == 42) {
|
|
46
|
-
height: 18px;
|
|
47
|
-
} @else if ($striped-size == 48) {
|
|
48
|
-
height: 24px;
|
|
49
|
-
} @else if ($striped-size == 60) {
|
|
50
|
-
height: 24px;
|
|
51
|
-
}
|
|
52
|
-
width: inherit;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use 'sass:meta';
|
|
3
|
+
|
|
4
|
+
@mixin icon-layout($size) {
|
|
5
|
+
:global(.uui-icon) {
|
|
6
|
+
svg {
|
|
7
|
+
height: math.div($size, 36) * 24;
|
|
8
|
+
max-width: math.div($size, 36) * 24;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin icon-size($size) {
|
|
14
|
+
$striped-size: strip-unit($size);
|
|
15
|
+
|
|
16
|
+
:global(.uui-icon) {
|
|
17
|
+
svg {
|
|
18
|
+
height: #{$striped-size}px;
|
|
19
|
+
width: #{$striped-size}px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@function strip-unit($number) {
|
|
25
|
+
@if meta.type-of($number) == 'number' and not math.is-unitless($number) {
|
|
26
|
+
@return math.div($number, $number * 0 + 1);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@return $number;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin scalable-icon-size($size, $additionalClass: '') {
|
|
33
|
+
$striped-size: strip-unit($size);
|
|
34
|
+
|
|
35
|
+
#{$additionalClass}:global(.uui-icon) {
|
|
36
|
+
svg {
|
|
37
|
+
@if ($striped-size == 18) {
|
|
38
|
+
height: 12px;
|
|
39
|
+
} @else if ($striped-size == 24) {
|
|
40
|
+
height: 12px;
|
|
41
|
+
} @else if ($striped-size == 30) {
|
|
42
|
+
height: 18px;
|
|
43
|
+
} @else if ($striped-size == 36) {
|
|
44
|
+
height: 18px;
|
|
45
|
+
} @else if ($striped-size == 42) {
|
|
46
|
+
height: 18px;
|
|
47
|
+
} @else if ($striped-size == 48) {
|
|
48
|
+
height: 24px;
|
|
49
|
+
} @else if ($striped-size == 60) {
|
|
50
|
+
height: 24px;
|
|
51
|
+
}
|
|
52
|
+
width: inherit;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
55
|
}
|
package/assets/styles/index.scss
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
@forward 'buttonLayout';
|
|
2
|
-
@forward 'clickable';
|
|
3
|
-
@forward 'controlLayout';
|
|
4
|
-
@forward 'effects';
|
|
5
|
-
@forward 'icons';
|
|
6
|
-
@forward 'inputs';
|
|
7
|
-
@forward 'text-size';
|
|
8
|
-
@forward 'typography';
|
|
9
|
-
@forward 'dnd';
|
|
1
|
+
@forward 'buttonLayout';
|
|
2
|
+
@forward 'clickable';
|
|
3
|
+
@forward 'controlLayout';
|
|
4
|
+
@forward 'effects';
|
|
5
|
+
@forward 'icons';
|
|
6
|
+
@forward 'inputs';
|
|
7
|
+
@forward 'text-size';
|
|
8
|
+
@forward 'typography';
|
|
9
|
+
@forward 'dnd';
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
@mixin disabled-input() {
|
|
2
|
-
&.mode-form {
|
|
3
|
-
@include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
|
|
4
|
-
cursor: default;
|
|
5
|
-
|
|
6
|
-
&:hover, &:active, &:focus {
|
|
7
|
-
@include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
|
|
8
|
-
box-shadow: none;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&.mode-cell {
|
|
13
|
-
@include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
|
|
14
|
-
cursor: default;
|
|
15
|
-
|
|
16
|
-
&:hover, &:active, &:focus {
|
|
17
|
-
@include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
|
|
18
|
-
box-shadow: none;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@mixin readonly-input() {
|
|
24
|
-
&.mode-form {
|
|
25
|
-
background-color: var(--uui-control-bg-disabled);
|
|
26
|
-
border-color: var(--uui-control-border-disabled);
|
|
27
|
-
|
|
28
|
-
&:hover {
|
|
29
|
-
border-color: var(--uui-control-border-disabled);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:global(.uui-input) {
|
|
33
|
-
&::placeholder {
|
|
34
|
-
color: var(--uui-control-placeholder-disabled);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&.mode-cell {
|
|
40
|
-
background-color: transparent;
|
|
41
|
-
border-color: transparent;
|
|
42
|
-
|
|
43
|
-
&:hover {
|
|
44
|
-
background-color: transparent;
|
|
45
|
-
border-color: transparent;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
:global(.uui-input) {
|
|
49
|
-
&::placeholder {
|
|
50
|
-
color: var(--uui-control-placeholder-disabled);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
@mixin input-colors($bg, $color, $border, $placeholder) {
|
|
57
|
-
background-color: $bg;
|
|
58
|
-
color: $color;
|
|
59
|
-
fill: $color;
|
|
60
|
-
border-color: $border;
|
|
61
|
-
|
|
62
|
-
// override more selective selector on input tag in browsers stylesheets
|
|
63
|
-
:global(.uui-input) {
|
|
64
|
-
color: $color;
|
|
65
|
-
|
|
66
|
-
&::placeholder {
|
|
67
|
-
color: $placeholder;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
1
|
+
@mixin disabled-input() {
|
|
2
|
+
&.mode-form {
|
|
3
|
+
@include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
|
|
4
|
+
cursor: default;
|
|
5
|
+
|
|
6
|
+
&:hover, &:active, &:focus {
|
|
7
|
+
@include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
|
|
8
|
+
box-shadow: none;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.mode-cell {
|
|
13
|
+
@include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
|
|
14
|
+
cursor: default;
|
|
15
|
+
|
|
16
|
+
&:hover, &:active, &:focus {
|
|
17
|
+
@include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
|
|
18
|
+
box-shadow: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin readonly-input() {
|
|
24
|
+
&.mode-form {
|
|
25
|
+
background-color: var(--uui-control-bg-disabled);
|
|
26
|
+
border-color: var(--uui-control-border-disabled);
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
border-color: var(--uui-control-border-disabled);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:global(.uui-input) {
|
|
33
|
+
&::placeholder {
|
|
34
|
+
color: var(--uui-control-placeholder-disabled);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.mode-cell {
|
|
40
|
+
background-color: transparent;
|
|
41
|
+
border-color: transparent;
|
|
42
|
+
|
|
43
|
+
&:hover {
|
|
44
|
+
background-color: transparent;
|
|
45
|
+
border-color: transparent;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:global(.uui-input) {
|
|
49
|
+
&::placeholder {
|
|
50
|
+
color: var(--uui-control-placeholder-disabled);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@mixin input-colors($bg, $color, $border, $placeholder) {
|
|
57
|
+
background-color: $bg;
|
|
58
|
+
color: $color;
|
|
59
|
+
fill: $color;
|
|
60
|
+
border-color: $border;
|
|
61
|
+
|
|
62
|
+
// override more selective selector on input tag in browsers stylesheets
|
|
63
|
+
:global(.uui-input) {
|
|
64
|
+
color: $color;
|
|
65
|
+
|
|
66
|
+
&::placeholder {
|
|
67
|
+
color: $placeholder;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
@function vpadding($size, $border-width) {
|
|
2
|
-
@if ($size == 18px or $size == 24px) {
|
|
3
|
-
@return (3px - $border-width);
|
|
4
|
-
} @else if ($size == 30px) {
|
|
5
|
-
@return (6px - $border-width);
|
|
6
|
-
} @else if ($size == 36px or $size == 42px) {
|
|
7
|
-
@return (9px - $border-width);
|
|
8
|
-
} @else if ($size == 48px) {
|
|
9
|
-
@return (12px - $border-width);
|
|
10
|
-
} @else if ($size == 60px) {
|
|
11
|
-
@return (15px - $border-width);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@return (null);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@mixin text-size($size, $border-width: 0) {
|
|
18
|
-
@if ($size == 18px) {
|
|
19
|
-
line-height: 12px;
|
|
20
|
-
font-size: 10px;
|
|
21
|
-
} @else if ($size == 24px) {
|
|
22
|
-
line-height: 18px;
|
|
23
|
-
font-size: 12px;
|
|
24
|
-
} @else if ($size == 30px) {
|
|
25
|
-
line-height: 18px;
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
} @else if ($size == 36px) {
|
|
28
|
-
line-height: 18px;
|
|
29
|
-
font-size: 14px;
|
|
30
|
-
} @else if ($size == 42px) {
|
|
31
|
-
line-height: 24px;
|
|
32
|
-
font-size: 16px;
|
|
33
|
-
} @else if ($size == 48px) {
|
|
34
|
-
line-height: 24px;
|
|
35
|
-
font-size: 16px;
|
|
36
|
-
} @else if ($size == 60px) {
|
|
37
|
-
line-height: 24px;
|
|
38
|
-
font-size: 20px;
|
|
39
|
-
}
|
|
40
|
-
padding-top: vpadding($size, $border-width);
|
|
41
|
-
padding-bottom: vpadding($size, $border-width);
|
|
42
|
-
}
|
|
1
|
+
@function vpadding($size, $border-width) {
|
|
2
|
+
@if ($size == 18px or $size == 24px) {
|
|
3
|
+
@return (3px - $border-width);
|
|
4
|
+
} @else if ($size == 30px) {
|
|
5
|
+
@return (6px - $border-width);
|
|
6
|
+
} @else if ($size == 36px or $size == 42px) {
|
|
7
|
+
@return (9px - $border-width);
|
|
8
|
+
} @else if ($size == 48px) {
|
|
9
|
+
@return (12px - $border-width);
|
|
10
|
+
} @else if ($size == 60px) {
|
|
11
|
+
@return (15px - $border-width);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@return (null);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin text-size($size, $border-width: 0) {
|
|
18
|
+
@if ($size == 18px) {
|
|
19
|
+
line-height: 12px;
|
|
20
|
+
font-size: 10px;
|
|
21
|
+
} @else if ($size == 24px) {
|
|
22
|
+
line-height: 18px;
|
|
23
|
+
font-size: 12px;
|
|
24
|
+
} @else if ($size == 30px) {
|
|
25
|
+
line-height: 18px;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
} @else if ($size == 36px) {
|
|
28
|
+
line-height: 18px;
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
} @else if ($size == 42px) {
|
|
31
|
+
line-height: 24px;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
} @else if ($size == 48px) {
|
|
34
|
+
line-height: 24px;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
} @else if ($size == 60px) {
|
|
37
|
+
line-height: 24px;
|
|
38
|
+
font-size: 20px;
|
|
39
|
+
}
|
|
40
|
+
padding-top: vpadding($size, $border-width);
|
|
41
|
+
padding-bottom: vpadding($size, $border-width);
|
|
42
|
+
}
|