-
Notifications
You must be signed in to change notification settings - Fork 66
/
_position.scss
182 lines (153 loc) · 6.18 KB
/
_position.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
182
@include exports( "utils/position" ) {
// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
/// @name k-pos-static
/// @description 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.
/// @group position
/// @name k-pos-relative
/// @description This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
/// @group position
/// @name k-pos-absolute
/// @description This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
/// @group position
/// @name k-pos-fixed
/// @description This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
/// @group position
/// @name k-pos-sticky
/// @description This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
/// @group position
@each $pos in (static, relative, absolute, fixed, sticky) {
.k-#{$pos},
.k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
.\!k-#{$pos},
.\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
}
/// @name k-pos-top
/// @description This is equivalent to `top: 0;`.
/// @group position
/// @name k-pos-right
/// @description This is equivalent to `right: 0;`.
/// @group position
/// @name k-pos-bottom
/// @description This is equivalent to `bottom: 0;`.
/// @group position
/// @name k-pos-left
/// @description This is equivalent to `left: 0;`.
/// @group position
@each $side in (top, right, bottom, left) {
.k-#{$side},
.k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
}
/// @name k-pos-top-start
/// @description This is equivalent to `top: 0; left: 0;`.
/// @group position
.k-top-start,
.k-pos-top-start {
top: 0;
left: 0;
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
left: auto;
right: 0;
}
}
/// @name k-pos-top-center
/// @description This is equivalent to `top: 0; left: 50%; transform: translateX(-50%);`.
/// @group position
.k-top-center,
.k-pos-top-center {
top: 0;
left: 50%;
transform: translateX(-50%);
}
/// @name k-pos-top-end
/// @description This is equivalent to `top: 0; right: 0;`.
/// @group position
.k-top-end,
.k-pos-top-end {
top: 0;
right: 0;
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
right: auto;
left: 0;
}
}
/// @name k-pos-middle-start
/// @description This is equivalent to `top: 50%; left: 0; transform: translateY(-50%);`.
/// @group position
.k-middle-start,
.k-pos-middle-start {
top: 50%;
left: 0;
transform: translateY(-50%);
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
left: auto;
right: 0;
}
}
/// @name k-pos-middle-center
/// @description This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
/// @group position
.k-middle-center,
.k-pos-middle-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/// @name k-pos-middle-end
/// @description This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`.
/// @group position
.k-middle-end,
.k-pos-middle-end {
top: 50%;
right: 0;
transform: translateY(-50%);
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
right: auto;
left: 0;
}
}
/// @name k-pos-bottom-start
/// @description This is equivalent to `bottom: 0; left: 0;`.
/// @group position
.k-bottom-start,
.k-pos-bottom-start {
bottom: 0;
left: 0;
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
left: auto;
right: 0;
}
}
/// @name k-pos-bottom-center
/// @description This is equivalent to `bottom: 0; left: 50%; translateX(-50%);`.
/// @group position
.k-bottom-center,
.k-pos-bottom-center {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/// @name k-pos-bottom-end
/// @description This is equivalent to `bottom: 0; right: 0;`.
/// @group position
.k-bottom-end,
.k-pos-bottom-end {
bottom: 0;
right: 0;
.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
right: auto;
left: 0;
}
}
}