/
_layout.scss
181 lines (155 loc) · 6.18 KB
/
_layout.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
@use "sass:map";
@use "./_variables.scss" as *;
@mixin kendo-fab--layout() {
.k-fab {
padding-inline: var( --INTERNAL--kendo-fab-padding-x, 0 );
padding-block: var( --INTERNAL--kendo-fab-padding-y, 0 );
border-width: 0;
border-style: solid;
border-color: transparent;
box-sizing: border-box;
color: inherit;
background-color: transparent;
font-family: var( --kendo-fab-font-family, #{$kendo-fab-font-family} );
font-size:var( --kendo-fab-font-size, #{$kendo-fab-font-size} );
line-height: var( --kendo-fab-line-height, #{$kendo-fab-line-height} );
text-align: center;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
outline: none;
*,
*::before,
*::after {
box-sizing: border-box;
}
&:focus::after,
&.k-focus::after {
content: "";
position: absolute;
border: medium none;
inset: var( --kendo-fab-focus-offset, #{$kendo-fab-focus-offset} );
outline-width: var( --kendo-fab-focus-outline-width, #{$kendo-fab-focus-outline-width} );
outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-fab-focus-outline-style} );
z-index: 1;
}
// Fix for focused FAB with full roundness
&.k-rounded-full {
&:focus::after,
&.k-focus::after {
border-radius: inherit;
}
}
}
// FAB Icon
.k-fab-icon {
padding-inline: var( --kendo-fab-icon-padding-x, #{$kendo-fab-icon-padding-x} );
padding-block: var( --kendo-fab-icon-padding-y, #{$kendo-fab-icon-padding-y} );
box-sizing: content-box;
.k-icon-wrapper-host:not(:only-child) &,
&:not(:only-child) {
margin-inline-end: var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} );
margin-inline-start: calc( var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} ) * -1 );
}
}
// Sizes
@each $size, $size-props in $kendo-fab-sizes {
$_padding-x: map.get( $size-props, padding-x );
$_padding-y: map.get( $size-props, padding-y );
.k-fab-#{$size} {
--INTERNAL--kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
--INTERNAL--kendo-fab-padding-y: var( --kendo-fab-#{$size}-padding-y, #{$_padding-y} );
}
}
// Items
.k-fab-items {
margin: 0;
padding-inline: var( --kendo-fab-items-padding-x, #{$kendo-fab-items-padding-x} );
padding-block: var( --kendo-fab-items-padding-y, #{$kendo-fab-items-padding-y} );
display: flex;
}
.k-fab-items-bottom {
flex-direction: column;
}
.k-fab-items-bottom .k-fab-item:last-child {
margin-bottom: 0;
}
.k-fab-items-top {
flex-direction: column-reverse;
}
.k-fab-items-top .k-fab-item:first-child {
margin-bottom: 0;
}
.k-fab-item {
list-style-type: none;
margin-block-end: var( --kendo-fab-item-offset-y, #{$kendo-fab-item-offset-y} );
outline: none;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
&:focus .k-fab-item-text::after,
&:focus .k-fab-item-icon::after,
&.k-focus .k-fab-item-text::after,
&.k-focus .k-fab-item-icon::after {
content: "";
position: absolute;
border: medium none;
inset: var( --kendo-fab-item-focus-offset, #{$kendo-fab-item-focus-offset} );
outline-width: var( --kendo-fab-item-focus-outline-width, #{$kendo-fab-item-focus-outline-width} );
outline-style: var( --kendo-fab-item-focus-outline-style, #{$kendo-fab-item-focus-outline-style} );
z-index: 1;
}
&.k-text-right {
flex-direction: row;
.k-fab-item-text {
// Needed for fab item positioning in RTL
margin-right: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
}
}
&.k-text-left {
flex-direction: row-reverse;
.k-fab-item-text {
// Needed for fab item positioning in RTL
margin-left: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
}
}
}
.k-fab-item-text {
padding-inline: var( --kendo-fab-item-text-padding-x, #{$kendo-fab-item-text-padding-x} );
padding-block: var( --kendo-fab-item-text-padding-y, #{$kendo-fab-item-text-padding-y} );
border-width: var( --kendo-fab-item-text-border-width, #{$kendo-fab-item-text-border-width} );
border-style: var( --kendo-fab-item-text-border-style, #{$kendo-fab-item-text-border-style} );
border-radius: var( --kendo-fab-item-text-border-radius, #{$kendo-fab-item-text-border-radius} );
position: relative;
font-size: var( --kendo-fab-item-text-font-size, #{$kendo-fab-item-text-font-size} );
line-height: var( --kendo-fab-item-text-line-height, #{$kendo-fab-item-text-line-height} );
}
.k-fab-item-icon {
padding-inline: var( --kendo-fab-item-icon-padding-x, #{$kendo-fab-item-icon-padding-x} );
padding-block: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-y} );
border-width: var( --kendo-fab-item-icon-border-width, #{$kendo-fab-item-icon-border-width} );
border-style: var( --kendo-fab-item-icon-border-style, #{$kendo-fab-item-icon-border-style} );
border-radius: var( --kendo-fab-item-border-radius, #{$kendo-fab-item-icon-border-radius} );
box-sizing: content-box;
outline: none;
&::after {
border-radius: inherit;
}
}
.k-rtl .k-fab-popup,
[dir="rtl"] .k-fab-popup {
.k-fab-item.k-text-left {
flex-direction: row;
}
.k-fab-item.k-text-right {
flex-direction: row-reverse;
}
}
}