Skip to content

Commit 879a498

Browse files
moyusmoyus
committed
Clean code
1 parent 6108351 commit 879a498

19 files changed

Lines changed: 67 additions & 220 deletions

‎scss/_badges.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
/*
2-
Markup:
3-
<span class="badge {{modifier}}">Administrator</span>
4-
*/
5-
1+
/* ## Badge
2+
---------------------------------*/
63
.badge {
74
display: inline-block;
85
padding: $badge-padding-y-base $badge-padding-x-base;
96
font-size: $font-size-sm;
10-
line-height: 1;
7+
line-height: 1.15;
118
text-align: center;
129
white-space: nowrap;
1310
border-radius: 1993px;
@@ -20,7 +17,7 @@ Markup:
2017
}
2118
}
2219

23-
// modifiers
20+
// Modifiers
2421
@each $modifier, $value in $master-palette {
2522
.badge--#{$modifier} {
2623
@include badge-variant($color-white, $value)

‎scss/_box.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
/*
2-
Markup:
3-
<div class="box {{modifier}}">
4-
<header class="box__header">Box Title</header>
5-
<div class="box__body">
6-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, nisi?
7-
</div>
8-
</div>
9-
*/
10-
1+
/* ## Box
2+
---------------------------------*/
113
// Block
124
.box {
135
margin-bottom: $box-margin-bottom;

‎scss/_breadcrumb.scss‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
1-
/*
2-
Markup:
3-
<ul class="breadcrumb">
4-
<li class="breadcrumb__item">
5-
<a href="#" class="breadcrumb__link">Home</a>
6-
</li>
7-
<li class="breadcrumb__item">
8-
<a href="#" class="breadcrumb__link">Posts</a>
9-
</li>
10-
<li class="breadcrumb__item">Add</li>
11-
</ul>
12-
*/
13-
1+
/* ## Breadcrumb
2+
---------------------------------*/
143
// Block
154
.breadcrumb {
165
margin: 0;

‎scss/_buttons.scss‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
/*
2-
Button Markup:
3-
<button class="btn {{modifier}}">Save</button>
4-
5-
Button Group Markup:
6-
<div class="btn-group">
7-
<button class="btn {{modifier}}">Stop</button>
8-
<button class="btn {{modifier}}">Play</button>
9-
<button class="btn {{modifier}}">Pause</button>
10-
</div>
11-
*/
12-
1+
/* ## Button
2+
---------------------------------*/
133
.btn {
144
position: relative;
155
display: inline-block;
@@ -110,7 +100,8 @@ Button Group Markup:
110100
width: 100%;
111101
}
112102

113-
// Button Group
103+
/* ## Button Group
104+
---------------------------------*/
114105
.btn-group {
115106
display: inline-flex;
116107
.btn {

‎scss/_dropmenu.scss‎

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,5 @@
1-
/*
2-
Markup:
3-
<div class="dropdown {{modifier}}">
4-
<div class="btn-group">
5-
<button class="btn btn--primary">Actions</button>
6-
<button class="btn btn--primary dropdown__toggle">
7-
<i class="i-caret"></i>
8-
</button>
9-
<ul class="dropmenu">
10-
<li class="dropmenu__item">
11-
<a href="#" class="dropmenu__link">Save as draft</a>
12-
</li>
13-
<li class="dropmenu__item">
14-
<a href="#" class="dropmenu__link">Publish</a>
15-
</li>
16-
<li class="dropmenu__item has-submenu">
17-
<a href="#" class="dropmenu__link">Scheduled</a>
18-
<ul class="dropmenu">
19-
<li class="dropmenu__item">
20-
<a href="#" class="dropmenu__link">Tomorrow</a>
21-
</li>
22-
<li class="dropmenu__item">
23-
<a href="#" class="dropmenu__link">Saturday</a>
24-
</li>
25-
<li class="dropmenu__item">
26-
<a href="#" class="dropmenu__link">Next Monday</a>
27-
</li>
28-
</ul>
29-
</li>
30-
<li class="dropmenu__divider"></li>
31-
<li class="dropmenu__item">
32-
<a href="#" class="dropmenu__link">Delete</a>
33-
</li>
34-
</ul>
35-
</div>
36-
</div>
37-
38-
*/
39-
1+
/* ## Dropmenu
2+
---------------------------------*/
403
// Block
414
.dropmenu {
425
position: relative;
@@ -92,7 +55,8 @@ Markup:
9255
}
9356
}
9457

95-
// container
58+
/* ## Dropdown
59+
---------------------------------*/
9660
.dropdown {
9761
position: relative;
9862
display: inline-flex;

‎scss/_form.scss‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
// Controls
2-
// -----------------------------------------------------------------------------
1+
/* ## Form
2+
---------------------------------*/
33
.form-input,
44
.form-select,
55
.form-textarea {
@@ -179,17 +179,22 @@ select.form-select {
179179
}
180180

181181
.form-checkbox input[type="checkbox"] {
182-
&:disabled {
182+
&:focus {
183183
+ .form-checkbox__indicator {
184-
opacity: 0.75;
185-
background-color: $form-input-bg-disabled;
184+
border-color: $form-input-active-border-color;
186185
}
187186
}
188187
&:checked {
189188
+ .form-checkbox__indicator::after {
190189
background-color: map-get($master-palette, 'primary');
191190
}
192191
}
192+
&:disabled {
193+
+ .form-checkbox__indicator {
194+
opacity: 0.75;
195+
background-color: $form-input-bg-disabled;
196+
}
197+
}
193198
}
194199

195200
// radio
@@ -231,17 +236,22 @@ select.form-select {
231236
}
232237

233238
.form-radio input[type="radio"] {
234-
&:disabled {
239+
&:focus {
235240
+ .form-radio__indicator {
236-
opacity: 0.75;
237-
background-color: $form-input-bg-disabled;
241+
border-color: $form-input-active-border-color;
238242
}
239243
}
240244
&:checked {
241245
+ .form-radio__indicator:after {
242246
background-color: map-get($master-palette, 'primary');
243247
}
244248
}
249+
&:disabled {
250+
+ .form-radio__indicator {
251+
opacity: 0.75;
252+
background-color: $form-input-bg-disabled;
253+
}
254+
}
245255
}
246256

247257
// switch
@@ -289,12 +299,6 @@ select.form-select {
289299
}
290300

291301
.form-switch input[type="checkbox"] {
292-
&:disabled {
293-
~ .form-switch__indicator {
294-
opacity: .75;
295-
cursor: not-allowed;
296-
}
297-
}
298302
&:checked {
299303
~ .form-switch__indicator {
300304
background-color: $form-switch-active-color;
@@ -303,6 +307,12 @@ select.form-select {
303307
}
304308
}
305309
}
310+
&:disabled {
311+
~ .form-switch__indicator {
312+
opacity: .75;
313+
cursor: not-allowed;
314+
}
315+
}
306316
}
307317

308318
// wrapper

‎scss/_grid.scss‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
/*
2-
Markup:
3-
<div class="l-row">
4-
<div class="l-col-3"></div>
5-
</div>
6-
*/
7-
1+
/* ## Grid
2+
---------------------------------*/
83
.l-container {
94
@include make-container();
105
@include make-container-max-widths();

‎scss/_hint.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
/*
2-
Markup:
3-
<button class="btn hint {{modifier}}" data-hint="Are you sure?">Save</button>
4-
*/
5-
1+
/* ## Hint
2+
---------------------------------*/
63
.hint {
74
position: relative; // absolute or fixed
85
overflow: visible;

‎scss/_icons.scss‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
1-
// .i-sort, .i-sort--light, .i-sort.is-up, .i-sort.is-down
2-
// .i-arrowup, .i-arrow-up--light
3-
// .i-arrow-right, .i-arrow-right--light
4-
// .i-arrow-down, .i-arrow-down--light
5-
// .i-arrow-left, .i-arrow-left--light
6-
// .i-caret, .i-caret--light
7-
// .i-remove, .i-remove--light
8-
// .i-plus, .i-plus--light
9-
// .i-menu, .i-menu--light
10-
// .i-spinner, .i-spinner--light
11-
1+
/* ## Icon
2+
---------------------------------*/
123
.i-sort {
134
position: relative;
145
display: inline-block;

‎scss/_list.scss‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,5 @@
1-
/*
2-
Markup:
3-
<ul class="list">
4-
<li class="list__item">
5-
<a href="#" class="list__link">Profile</a>
6-
</li>
7-
<li class="list__item">
8-
<a href="#" class="list__link">Likes</a>
9-
</li>
10-
<li class="list__item">
11-
<a href="#" class="list__link">Bills</a>
12-
</li>
13-
<li class="list__item">
14-
<a href="#" class="list__link">Logout</a>
15-
</li>
16-
</ul>
17-
*/
18-
1+
/* ## List
2+
---------------------------------*/
193
// Block
204
.list {
215
margin: 0;

0 commit comments

Comments
 (0)