Skip to content

Commit 4b272e8

Browse files
author
Ivan Demidov
committed
Update offsets example
1 parent c434ba0 commit 4b272e8

3 files changed

Lines changed: 149 additions & 105 deletions

File tree

‎docs/dist/css/slims.css‎

Lines changed: 140 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -26,102 +26,146 @@
2626
.sl-offset-inside-35 { padding: 35px; }
2727
.sl-offset-40 { margin: 40px; }
2828
.sl-offset-inside-40 { padding: 40px; }
29-
.sl-offset-5-v { margin-right: 5px; margin-left: 5px; }
30-
.sl-offset-inside-5-v { padding-right: 5px; padding-left: 5px; }
31-
.sl-offset-10-v { margin-right: 10px; margin-left: 10px; }
32-
.sl-offset-inside-10-v { padding-right: 10px; padding-left: 10px; }
33-
.sl-offset-15-v { margin-right: 15px; margin-left: 15px; }
34-
.sl-offset-inside-15-v { padding-right: 15px; padding-left: 15px; }
35-
.sl-offset-20-v { margin-right: 20px; margin-left: 20px; }
36-
.sl-offset-inside-20-v { padding-right: 20px; padding-left: 20px; }
37-
.sl-offset-25-v { margin-right: 25px; margin-left: 25px; }
38-
.sl-offset-inside-25-v { padding-right: 25px; padding-left: 25px; }
39-
.sl-offset-30-v { margin-right: 30px; margin-left: 30px; }
40-
.sl-offset-inside-30-v { padding-right: 30px; padding-left: 30px; }
41-
.sl-offset-35-v { margin-right: 35px; margin-left: 35px; }
42-
.sl-offset-inside-35-v { padding-right: 35px; padding-left: 35px; }
43-
.sl-offset-40-v { margin-right: 40px; margin-left: 40px; }
44-
.sl-offset-inside-40-v { padding-right: 40px; padding-left: 40px; }
45-
.sl-offset-5-h { margin-top: 5px; margin-bottom: 5px; }
46-
.sl-offset-inside-5-h { padding-top: 5px; padding-bottom: 5px; }
47-
.sl-offset-10-h { margin-top: 10px; margin-bottom: 10px; }
48-
.sl-offset-inside-10-h { padding-top: 10px; padding-bottom: 10px; }
49-
.sl-offset-15-h { margin-top: 15px; margin-bottom: 15px; }
50-
.sl-offset-inside-15-h { padding-top: 15px; padding-bottom: 15px; }
51-
.sl-offset-20-h { margin-top: 20px; margin-bottom: 20px; }
52-
.sl-offset-inside-20-h { padding-top: 20px; padding-bottom: 20px; }
53-
.sl-offset-25-h { margin-top: 25px; margin-bottom: 25px; }
54-
.sl-offset-inside-25-h { padding-top: 25px; padding-bottom: 25px; }
55-
.sl-offset-30-h { margin-top: 30px; margin-bottom: 30px; }
56-
.sl-offset-inside-30-h { padding-top: 30px; padding-bottom: 30px; }
57-
.sl-offset-35-h { margin-top: 35px; margin-bottom: 35px; }
58-
.sl-offset-inside-35-h { padding-top: 35px; padding-bottom: 35px; }
59-
.sl-offset-40-h { margin-top: 40px; margin-bottom: 40px; }
60-
.sl-offset-inside-40-h { padding-top: 40px; padding-bottom: 40px; }
61-
.sl-offset-5-top { margin-top: 5px; }
62-
.sl-offset-inside-5-top { padding-top: 5px; }
63-
.sl-offset-10-top { margin-top: 10px; }
64-
.sl-offset-inside-10-top { padding-top: 10px; }
65-
.sl-offset-15-top { margin-top: 15px; }
66-
.sl-offset-inside-15-top { padding-top: 15px; }
67-
.sl-offset-20-top { margin-top: 20px; }
68-
.sl-offset-inside-20-top { padding-top: 20px; }
69-
.sl-offset-25-top { margin-top: 25px; }
70-
.sl-offset-inside-25-top { padding-top: 25px; }
71-
.sl-offset-30-top { margin-top: 30px; }
72-
.sl-offset-inside-30-top { padding-top: 30px; }
73-
.sl-offset-35-top { margin-top: 35px; }
74-
.sl-offset-inside-35-top { padding-top: 35px; }
75-
.sl-offset-40-top { margin-top: 40px; }
76-
.sl-offset-inside-40-top { padding-top: 40px; }
77-
.sl-offset-5-bottom { margin-bottom: 5px; }
78-
.sl-offset-inside-5-bottom { padding-bottom: 5px; }
79-
.sl-offset-10-bottom { margin-bottom: 10px; }
80-
.sl-offset-inside-10-bottom { padding-bottom: 10px; }
81-
.sl-offset-15-bottom { margin-bottom: 15px; }
82-
.sl-offset-inside-15-bottom { padding-bottom: 15px; }
83-
.sl-offset-20-bottom { margin-bottom: 20px; }
84-
.sl-offset-inside-20-bottom { padding-bottom: 20px; }
85-
.sl-offset-25-bottom { margin-bottom: 25px; }
86-
.sl-offset-inside-25-bottom { padding-bottom: 25px; }
87-
.sl-offset-30-bottom { margin-bottom: 30px; }
88-
.sl-offset-inside-30-bottom { padding-bottom: 30px; }
89-
.sl-offset-35-bottom { margin-bottom: 35px; }
90-
.sl-offset-inside-35-bottom { padding-bottom: 35px; }
91-
.sl-offset-40-bottom { margin-bottom: 40px; }
92-
.sl-offset-inside-40-bottom { padding-bottom: 40px; }
93-
.sl-offset-5-left { margin-left: 5px; }
94-
.sl-offset-inside-5-left { padding-left: 5px; }
95-
.sl-offset-10-left { margin-left: 10px; }
96-
.sl-offset-inside-10-left { padding-left: 10px; }
97-
.sl-offset-15-left { margin-left: 15px; }
98-
.sl-offset-inside-15-left { padding-left: 15px; }
99-
.sl-offset-20-left { margin-left: 20px; }
100-
.sl-offset-inside-20-left { padding-left: 20px; }
101-
.sl-offset-25-left { margin-left: 25px; }
102-
.sl-offset-inside-25-left { padding-left: 25px; }
103-
.sl-offset-30-left { margin-left: 30px; }
104-
.sl-offset-inside-30-left { padding-left: 30px; }
105-
.sl-offset-35-left { margin-left: 35px; }
106-
.sl-offset-inside-35-left { padding-left: 35px; }
107-
.sl-offset-40-left { margin-left: 40px; }
108-
.sl-offset-inside-40-left { padding-left: 40px; }
109-
.sl-offset-5-right { margin-right: 5px; }
110-
.sl-offset-inside-5-right { padding-right: 5px; }
111-
.sl-offset-10-right { margin-right: 10px; }
112-
.sl-offset-inside-10-right { padding-right: 10px; }
113-
.sl-offset-15-right { margin-right: 15px; }
114-
.sl-offset-inside-15-right { padding-right: 15px; }
115-
.sl-offset-20-right { margin-right: 20px; }
116-
.sl-offset-inside-20-right { padding-right: 20px; }
117-
.sl-offset-25-right { margin-right: 25px; }
118-
.sl-offset-inside-25-right { padding-right: 25px; }
119-
.sl-offset-30-right { margin-right: 30px; }
120-
.sl-offset-inside-30-right { padding-right: 30px; }
121-
.sl-offset-35-right { margin-right: 35px; }
122-
.sl-offset-inside-35-right { padding-right: 35px; }
123-
.sl-offset-40-right { margin-right: 40px; }
124-
.sl-offset-inside-40-right { padding-right: 40px; }
29+
.sl-offset-v-5 { margin-right: 5px; margin-left: 5px; }
30+
.sl-offset-inside-v-5 { padding-right: 5px; padding-left: 5px; }
31+
.sl-offset-v-10 { margin-right: 10px; margin-left: 10px; }
32+
.sl-offset-inside-v-10 { padding-right: 10px; padding-left: 10px; }
33+
.sl-offset-v-15 { margin-right: 15px; margin-left: 15px; }
34+
.sl-offset-inside-v-15 { padding-right: 15px; padding-left: 15px; }
35+
.sl-offset-v-20 { margin-right: 20px; margin-left: 20px; }
36+
.sl-offset-inside-v-20 { padding-right: 20px; padding-left: 20px; }
37+
.sl-offset-v-25 { margin-right: 25px; margin-left: 25px; }
38+
.sl-offset-inside-v-25 { padding-right: 25px; padding-left: 25px; }
39+
.sl-offset-v-30 { margin-right: 30px; margin-left: 30px; }
40+
.sl-offset-inside-v-30 { padding-right: 30px; padding-left: 30px; }
41+
.sl-offset-v-35 { margin-right: 35px; margin-left: 35px; }
42+
.sl-offset-inside-v-35 { padding-right: 35px; padding-left: 35px; }
43+
.sl-offset-v-40 { margin-right: 40px; margin-left: 40px; }
44+
.sl-offset-inside-v-40 { padding-right: 40px; padding-left: 40px; }
45+
.sl-offset-h-5 { margin-top: 5px; margin-bottom: 5px; }
46+
.sl-offset-inside-h-5 { padding-top: 5px; padding-bottom: 5px; }
47+
.sl-offset-h-10 { margin-top: 10px; margin-bottom: 10px; }
48+
.sl-offset-inside-h-10 { padding-top: 10px; padding-bottom: 10px; }
49+
.sl-offset-h-15 { margin-top: 15px; margin-bottom: 15px; }
50+
.sl-offset-inside-h-15 { padding-top: 15px; padding-bottom: 15px; }
51+
.sl-offset-h-20 { margin-top: 20px; margin-bottom: 20px; }
52+
.sl-offset-inside-h-20 { padding-top: 20px; padding-bottom: 20px; }
53+
.sl-offset-h-25 { margin-top: 25px; margin-bottom: 25px; }
54+
.sl-offset-inside-h-25 { padding-top: 25px; padding-bottom: 25px; }
55+
.sl-offset-h-30 { margin-top: 30px; margin-bottom: 30px; }
56+
.sl-offset-inside-h-30 { padding-top: 30px; padding-bottom: 30px; }
57+
.sl-offset-h-35 { margin-top: 35px; margin-bottom: 35px; }
58+
.sl-offset-inside-h-35 { padding-top: 35px; padding-bottom: 35px; }
59+
.sl-offset-h-40 { margin-top: 40px; margin-bottom: 40px; }
60+
.sl-offset-inside-h-40 { padding-top: 40px; padding-bottom: 40px; }
61+
.sl-offset-top-5 { margin-top: 5px; }
62+
.sl-offset-inside-top-5 { padding-top: 5px; }
63+
.sl-offset-top-10 { margin-top: 10px; }
64+
.sl-offset-inside-top-10 { padding-top: 10px; }
65+
.sl-offset-top-15 { margin-top: 15px; }
66+
.sl-offset-inside-top-15 { padding-top: 15px; }
67+
.sl-offset-top-20 { margin-top: 20px; }
68+
.sl-offset-inside-top-20 { padding-top: 20px; }
69+
.sl-offset-top-25 { margin-top: 25px; }
70+
.sl-offset-inside-top-25 { padding-top: 25px; }
71+
.sl-offset-top-30 { margin-top: 30px; }
72+
.sl-offset-inside-top-30 { padding-top: 30px; }
73+
.sl-offset-top-35 { margin-top: 35px; }
74+
.sl-offset-inside-top-35 { padding-top: 35px; }
75+
.sl-offset-top-40 { margin-top: 40px; }
76+
.sl-offset-inside-top-40 { padding-top: 40px; }
77+
.sl-offset-bottom-5 { margin-bottom: 5px; }
78+
.sl-offset-inside-bottom-5 { padding-bottom: 5px; }
79+
.sl-offset-bottom-10 { margin-bottom: 10px; }
80+
.sl-offset-inside-bottom-10 { padding-bottom: 10px; }
81+
.sl-offset-bottom-15 { margin-bottom: 15px; }
82+
.sl-offset-inside-bottom-15 { padding-bottom: 15px; }
83+
.sl-offset-bottom-20 { margin-bottom: 20px; }
84+
.sl-offset-inside-bottom-20 { padding-bottom: 20px; }
85+
.sl-offset-bottom-25 { margin-bottom: 25px; }
86+
.sl-offset-inside-bottom-25 { padding-bottom: 25px; }
87+
.sl-offset-bottom-30 { margin-bottom: 30px; }
88+
.sl-offset-inside-bottom-30 { padding-bottom: 30px; }
89+
.sl-offset-bottom-35 { margin-bottom: 35px; }
90+
.sl-offset-inside-bottom-35 { padding-bottom: 35px; }
91+
.sl-offset-bottom-40 { margin-bottom: 40px; }
92+
.sl-offset-inside-bottom-40 { padding-bottom: 40px; }
93+
.sl-offset-left-5 { margin-left: 5px; }
94+
.sl-offset-inside-left-5 { padding-left: 5px; }
95+
.sl-offset-left-10 { margin-left: 10px; }
96+
.sl-offset-inside-left-10 { padding-left: 10px; }
97+
.sl-offset-left-15 { margin-left: 15px; }
98+
.sl-offset-inside-left-15 { padding-left: 15px; }
99+
.sl-offset-left-20 { margin-left: 20px; }
100+
.sl-offset-inside-left-20 { padding-left: 20px; }
101+
.sl-offset-left-25 { margin-left: 25px; }
102+
.sl-offset-inside-left-25 { padding-left: 25px; }
103+
.sl-offset-left-30 { margin-left: 30px; }
104+
.sl-offset-inside-left-30 { padding-left: 30px; }
105+
.sl-offset-left-35 { margin-left: 35px; }
106+
.sl-offset-inside-left-35 { padding-left: 35px; }
107+
.sl-offset-left-40 { margin-left: 40px; }
108+
.sl-offset-inside-left-40 { padding-left: 40px; }
109+
.sl-offset-right-5 { margin-right: 5px; }
110+
.sl-offset-inside-right-5 { padding-right: 5px; }
111+
.sl-offset-right-10 { margin-right: 10px; }
112+
.sl-offset-inside-right-10 { padding-right: 10px; }
113+
.sl-offset-right-15 { margin-right: 15px; }
114+
.sl-offset-inside-right-15 { padding-right: 15px; }
115+
.sl-offset-right-20 { margin-right: 20px; }
116+
.sl-offset-inside-right-20 { padding-right: 20px; }
117+
.sl-offset-right-25 { margin-right: 25px; }
118+
.sl-offset-inside-right-25 { padding-right: 25px; }
119+
.sl-offset-right-30 { margin-right: 30px; }
120+
.sl-offset-inside-right-30 { padding-right: 30px; }
121+
.sl-offset-right-35 { margin-right: 35px; }
122+
.sl-offset-inside-right-35 { padding-right: 35px; }
123+
.sl-offset-right-40 { margin-right: 40px; }
124+
.sl-offset-inside-right-40 { padding-right: 40px; }
125+
.sl-box-left {
126+
float: left;
127+
}
128+
.sl-box-right {
129+
float: right;
130+
}
131+
.sl-box-relative {
132+
position: relative;
133+
}
134+
.sl-box-absolute {
135+
position: absolute;
136+
}
137+
.sl-box-top-5 { top: 5px; }
138+
.sl-box-top-10 { top: 10px; }
139+
.sl-box-top-15 { top: 15px; }
140+
.sl-box-top-20 { top: 20px; }
141+
.sl-box-top-25 { top: 25px; }
142+
.sl-box-top-30 { top: 30px; }
143+
.sl-box-top-35 { top: 35px; }
144+
.sl-box-top-40 { top: 40px; }
145+
.sl-box-bottom-5 { bottom: 5px; }
146+
.sl-box-bottom-10 { bottom: 10px; }
147+
.sl-box-bottom-15 { bottom: 15px; }
148+
.sl-box-bottom-20 { bottom: 20px; }
149+
.sl-box-bottom-25 { bottom: 25px; }
150+
.sl-box-bottom-30 { bottom: 30px; }
151+
.sl-box-bottom-35 { bottom: 35px; }
152+
.sl-box-bottom-40 { bottom: 40px; }
153+
.sl-box-left-5 { left: 5px; }
154+
.sl-box-left-10 { left: 10px; }
155+
.sl-box-left-15 { left: 15px; }
156+
.sl-box-left-20 { left: 20px; }
157+
.sl-box-left-25 { left: 25px; }
158+
.sl-box-left-30 { left: 30px; }
159+
.sl-box-left-35 { left: 35px; }
160+
.sl-box-left-40 { left: 40px; }
161+
.sl-box-right-5 { right: 5px; }
162+
.sl-box-right-10 { right: 10px; }
163+
.sl-box-right-15 { right: 15px; }
164+
.sl-box-right-20 { right: 20px; }
165+
.sl-box-right-25 { right: 25px; }
166+
.sl-box-right-30 { right: 30px; }
167+
.sl-box-right-35 { right: 35px; }
168+
.sl-box-right-40 { right: 40px; }
125169
[class*="sl-col"],
126170
[class*="sl-row"] { box-sizing: border-box; }
127171
.sl-container-row:after,

0 commit comments

Comments
 (0)