Skip to content

Commit 68f97d1

Browse files
mikhailov-smikhailov-s
committed
Redefine options
1 parent 0360c92 commit 68f97d1

File tree

4 files changed

+92
-76
lines changed

4 files changed

+92
-76
lines changed

‎src/v2/scss/components/_forms/_checkbox.scss‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
.ui.option {
2+
3+
.control__indicator::after {
4+
top: 0;
5+
}
6+
27
&.checkbox {
38
.control__input {
4-
&:checked ~ .control__indicator {
5-
background: $control-checked-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center;
6-
}
7-
}
8-
9-
&.disabled {
10-
.control__input {
11-
&:checked ~ .control__indicator {
12-
background: $control-disabled-bg url("/static/v2/img/icons/checkmark.svg") no-repeat center;
13-
}
9+
&:checked ~ .control__indicator::after {
10+
background-image: url("/static/v2/img/icons/checkmark.svg");
11+
background-repeat: no-repeat;
12+
background-position: 50% 50%;
1413
}
1514
}
1615
}
17-
}
16+
}

‎src/v2/scss/components/_forms/_inputs.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,8 @@
103103
//Error
104104

105105
.ui.input.error > input,
106-
.ui.input.error > textarea,
107-
.error .ui.option.radio:not(.disabled) > .control__indicator,
108-
.error .ui.option.checkbox:not(.disabled) > .control__indicator {
106+
.ui.input.error > textarea
107+
{
109108
background-color: $form-feedback-color;
110109
border:$control-border-width solid $form-feedback-invalid-color;
111110
&:hover {

‎src/v2/scss/components/_forms/_options.scss‎

Lines changed: 69 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,82 +4,94 @@
44
// Default styles for checkbox and radio
55

66
.ui.option {
7-
display: flex;
8-
align-items: flex-start;
9-
margin: 0 0 spacer("4x") 0;
10-
cursor: pointer;
7+
display: block;
118
position: relative;
9+
margin-bottom: 1rem;
10+
padding-left: 26px;
11+
cursor: pointer;
1212
line-height: 1.2;
13-
font-size: $font-size-base;
13+
font-size: $font-size-content-base;
1414

15-
&:hover {
16-
.control__indicator {
17-
border-color: $control-bg-hover;
15+
.control__input {
16+
position: absolute;
17+
width: 1px;
18+
height: 1px;
19+
margin: -1px;
20+
padding: 0;
21+
overflow: hidden;
22+
border: 0;
23+
clip: rect(0 0 0 0);
24+
}
25+
26+
.control__indicator {
27+
line-height: 1.2;
28+
29+
&::after {
30+
content: "";
31+
position: absolute;
32+
z-index: 201;
33+
left: 0;
34+
width: $control-size;
35+
height: $control-size;
36+
opacity: 0;
1837
}
1938

20-
.control__description {
21-
color: $input-color;
39+
&::before {
40+
content: "";
41+
display: block;
42+
position: absolute;
43+
z-index: 200;
44+
width: $control-size;
45+
height: $control-size;
46+
top: 0;
47+
left: 0;
48+
border-radius: $border-radius;
49+
border: $control-border-width solid $control-border-color;
50+
background-color: $control-bg;
2251
}
2352
}
2453

25-
.control__input {
26-
position: absolute;
27-
top: 50%;
28-
left: 12px;
29-
transform: translate(-50%, -50%);
30-
opacity: 0;
31-
margin: 0;
32-
padding: 0;
33-
34-
&:checked {
35-
~ .control__indicator {
54+
.control__input:checked {
55+
~ .control__indicator {
56+
&::before {
3657
border: none;
37-
background: $control-checked-bg;
58+
background-color: $control-checked-bg;
59+
}
60+
61+
&::after {
62+
opacity: 1;
3863
}
3964
}
65+
}
4066

41-
&:focus {
42-
~ .control__indicator {
67+
.control__input:focus {
68+
~ .control__indicator {
69+
&::before {
4370
border: none;
4471
box-shadow: inset 0 0 2px 1px rgba($gray-darker, .5);
4572
}
4673
}
4774
}
4875

49-
.control__indicator {
50-
display: block;
51-
position: absolute;
52-
width: $control-size;
53-
height: $control-size;
54-
border: $control-border-width solid $control-border-color;
55-
border-radius: $border-radius;
56-
background-color: $control-bg;
57-
background-size: 135%;
58-
}
59-
60-
.control__description {
61-
margin: 0 0 0 26px;
62-
display: inline-block;
63-
color: $control-color;
76+
&:hover {
77+
.control__indicator::before {
78+
border: $control-border-width solid $gray-dark;
79+
}
6480
}
6581

6682
&.disabled {
6783
cursor: default;
84+
opacity: .5;
6885

69-
&:hover .control__indicator {
70-
border-color: $control-border-color;
86+
.control__indicator::before {
87+
border-color: $control-disabled-bg;
7188
}
7289

73-
.control__input {
74-
&:checked ~ .control__indicator {
75-
background: $control-disabled-bg;
76-
90+
&:hover {
91+
.control__indicator::before {
92+
border-color: $control-disabled-bg;
7793
}
7894
}
79-
80-
.control__description {
81-
color: $control-disabled-bg;
82-
}
8395
}
8496
}
8597

@@ -89,7 +101,7 @@
89101
display: block;
90102

91103
.option:last-child {
92-
margin-bottom: 0!important;
104+
margin-bottom: 0 !important;
93105
}
94106

95107
&.inline {
@@ -115,3 +127,10 @@
115127
}
116128
}
117129
}
130+
131+
//Error
132+
133+
.grouped.error .ui.option.radio:not(.disabled) > .control__indicator::before,
134+
.grouped.error .ui.option.checkbox:not(.disabled) > .control__indicator::before {
135+
border-color: $red;
136+
}

‎src/v2/scss/components/_forms/_radio.scss‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,21 @@
22
&.radio {
33
.control__input {
44
&:checked ~ .control__indicator::after {
5-
content: "";
6-
position: absolute;
7-
top: 0;
8-
bottom: 0;
9-
left: 0;
10-
right: 0;
11-
margin: auto;
12-
width: 10px;
13-
height: 10px;
5+
left: 6px;
6+
top: 6px;
7+
width: 8px;
8+
height: 8px;
9+
background-color: #fff;
1410
border-radius: 50%;
15-
background: $white;
1611
}
1712
}
1813

19-
.control__indicator {
14+
.control__indicator::before {
2015
border-radius: 50%;
2116
}
17+
18+
.control__indicator::after {
19+
background-image: none;
20+
}
2221
}
23-
}
22+
}

0 commit comments

Comments
 (0)