-
Notifications
You must be signed in to change notification settings - Fork 66
/
_variables.scss
151 lines (133 loc) · 5.25 KB
/
_variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// Chip
/// Width of the border around the button.
/// @group chip
$kendo-chip-border-width: 1px !default;
/// The spacing between the text and the icons of the chip.
/// @group chip
$kendo-chip-spacing: k-map-get( $spacing, 1 ) !default;
/// Horizontal padding of the chip.
/// @group chip
$kendo-chip-padding-x: k-map-get( $spacing, 1 ) !default;
$kendo-chip-padding-x-sm: k-map-get( $spacing, 1 ) !default;
$kendo-chip-padding-x-md: k-map-get( $spacing, 1 ) !default;
$kendo-chip-padding-x-lg: k-map-get( $spacing, 1 ) !default;
/// Vertical padding of the chip.
/// @group chip
$kendo-chip-padding-y: k-map-get( $spacing, 1 ) !default;
$kendo-chip-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin ) !default;
$kendo-chip-padding-y-md: k-map-get( $spacing, 1 ) !default;
$kendo-chip-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
/// Font sizes of the chip.
/// @group chip
$kendo-chip-font-size: $font-size-md !default;
$kendo-chip-font-size-sm: $font-size-md !default;
$kendo-chip-font-size-md: $font-size-md !default;
$kendo-chip-font-size-lg: $font-size-md !default;
/// Line heights of the chip that are connected to the $font-size.
/// @group chip
$kendo-chip-line-height: 1 !default;
$kendo-chip-line-height-sm: $kendo-chip-line-height !default;
$kendo-chip-line-height-md: $kendo-chip-line-height !default;
$kendo-chip-line-height-lg: $kendo-chip-line-height !default;
/// Calculated height of the chip.
/// @group chip
$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
/// Sizes map for the chip.
/// @group chip
$kendo-chip-sizes: (
sm: (
padding-x: $kendo-chip-padding-x-sm,
padding-y: $kendo-chip-padding-y-sm,
font-size: $kendo-chip-font-size-sm,
line-height: $kendo-chip-line-height-sm
),
md: (
padding-x: $kendo-chip-padding-x-md,
padding-y: $kendo-chip-padding-y-md,
font-size: $kendo-chip-font-size-md,
line-height: $kendo-chip-line-height-md
),
lg: (
padding-x: $kendo-chip-padding-x-lg,
padding-y: $kendo-chip-padding-y-lg,
font-size: $kendo-chip-font-size-lg,
line-height: $kendo-chip-line-height-lg
)
) !default;
/// The base background of the chip.
/// @group chip
$kendo-chip-base-bg: $kendo-button-bg !default;
/// Theme colors map for the chip.
/// @group chip
$kendo-chip-theme-colors: (
"base": $kendo-chip-base-bg,
"error": k-map-get( $kendo-theme-colors, "error" ),
"info": k-map-get( $kendo-theme-colors, "info" ),
"warning": k-map-get( $kendo-theme-colors, "warning" ),
"success": k-map-get( $kendo-theme-colors, "success" )
) !default;
/// The base background color of solid chip.
/// @group chip
$kendo-chip-solid-bg: $kendo-chip-base-bg !default;
/// The base text color of solid chip.
/// @group chip
$kendo-chip-solid-text: $kendo-button-text !default;
/// The base border color of solid chip.
/// @group chip
$kendo-chip-solid-border: $kendo-button-border !default;
/// The base shadow of solid chip.
/// @group chip
$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
/// The base gradient of solid chip.
/// @group chip
$kendo-chip-solid-gradient: $kendo-button-gradient !default;
/// The base background color of focused solid chip.
/// @group chip
$kendo-chip-solid-focus-bg: null !default;
/// The base text color of focused solid chip.
/// @group chip
$kendo-chip-solid-focus-text: null !default;
/// The base background color of hovered solid chip.
/// @group chip
$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
/// The base text color of hovered solid chip.
/// @group chip
$kendo-chip-solid-hover-text: null !default;
/// The base background color of selected solid chip.
/// @group chip
$kendo-chip-solid-selected-bg: $kendo-button-active-bg !default;
/// The base text color of selected solid chip.
/// @group chip
$kendo-chip-solid-selected-text: null !default;
/// The base background color of outline chip.
/// @group chip
$kendo-chip-outline-bg: $component-bg !default;
/// The base text color of outline chip.
/// @group chip
$kendo-chip-outline-text: $kendo-chip-solid-text !default;
/// The base border color of outline chip.
/// @group chip
$kendo-chip-outline-border: $kendo-chip-outline-text !default;
/// The base shadow of outline chip.
/// @group chip
$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
/// The base background color of hovered outline chip.
/// @group chip
$kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
/// The base text color of hovered outline chip.
/// @group chip
$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
/// The base background color of selected outline chip.
/// @group chip
$kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
/// The base text color of selected outline chip.
/// @group chip
$kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
// Chip List
/// The sizes of the chip list.
/// @group chip
$kendo-chip-list-sizes: (
sm: k-map-get( $spacing, 1 ),
md: k-map-get( $spacing, 1 ),
lg: k-map-get( $spacing, 1 )
) !default;