Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2acaf0a

Browse files
committed
Select Multi optgroup variant [initial#559,#563]
1 parente3a4a97 commit2acaf0a

File tree

2 files changed

+247
-19
lines changed

2 files changed

+247
-19
lines changed
Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
3+
<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
4+
<!--[if gt IE 8]><!--><htmllang="en"><!--<![endif]-->
5+
<head>
6+
<metacharset="utf-8">
7+
<metahttp-equiv="x-ua-compatible"content="ie=edge">
8+
<title>Page Title</title>
9+
<metaname="description"content="">
10+
<metaname="viewport"content="width=device-width, initial-scale=1">
11+
<linkrel="stylesheet"href="css/fsa-style.min.css"media="all">
12+
</head>
13+
<body>
14+
15+
<divclass="fsa-p--xl">
16+
<divclass="fsa-grid">
17+
<divclass="fsa-grid__1/1 fsa-grid__1/2@m">
18+
<divclass="fsa-field fsa-field--fill">
19+
<divclass="fsa-select-multi">
20+
<ulclass="fsa-select-multi__list">
21+
<liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">
22+
First Group
23+
</li>
24+
<liclass="fsa-select-multi__item">
25+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_one"type="checkbox"name="opt-group-example_one"value="One"checked="">
26+
<labelclass="fsa-select-multi__label"for="opt-group-example_one">One</label>
27+
</li>
28+
<liclass="fsa-select-multi__item">
29+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_two"type="checkbox"name="opt-group-example_two"value="Two">
30+
<labelclass="fsa-select-multi__label"for="opt-group-example_two">Two</label>
31+
</li>
32+
<liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">
33+
Second Group
34+
</li>
35+
<liclass="fsa-select-multi__item">
36+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplehree"type="checkbox"name="opt-group-examplehree"value="Three"checked="">
37+
<labelclass="fsa-select-multi__label"for="opt-group-examplehree">Three</label>
38+
</li>
39+
<liclass="fsa-select-multi__item">
40+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefour"type="checkbox"name="opt-group-examplefour"value="Four"checked="">
41+
<labelclass="fsa-select-multi__label"for="opt-group-examplefour">Four</label>
42+
</li>
43+
<liclass="fsa-select-multi__item">
44+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefive"type="checkbox"name="opt-group-examplefive"value="Five">
45+
<labelclass="fsa-select-multi__label"for="opt-group-examplefive">Five</label>
46+
</li>
47+
<liclass="fsa-select-multi__item">
48+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_six"type="checkbox"name="opt-group-example_six"value="Six">
49+
<labelclass="fsa-select-multi__label"for="opt-group-example_six">Six</label>
50+
</li>
51+
<liclass="fsa-select-multi__item">
52+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleeven"type="checkbox"name="opt-group-exampleeven"value="Seven">
53+
<labelclass="fsa-select-multi__label"for="opt-group-exampleeven">Seven</label>
54+
</li>
55+
<liclass="fsa-select-multi__item">
56+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleight"type="checkbox"name="opt-group-exampleight"value="Eight">
57+
<labelclass="fsa-select-multi__label"for="opt-group-exampleight">Eight</label>
58+
</li>
59+
<liclass="fsa-select-multi__item">
60+
<inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplenine"type="checkbox"name="opt-group-examplenine"value="Nine">
61+
<labelclass="fsa-select-multi__label"for="opt-group-examplenine">Nine</label>
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
66+
<divclass="fsa-field fsa-field--fill">
67+
<divclass="fsa-select-multi">
68+
<ulclass="fsa-select-multi__list">
69+
<liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">
70+
First Group
71+
</li>
72+
<liclass="fsa-select-multi__item">
73+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_one"type="radio"name="select_radio_example"value="One">
74+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_one">One</label>
75+
</li>
76+
<liclass="fsa-select-multi__item">
77+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_two"type="radio"name="select_radio_example"value="Two"checked="">
78+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_two">Two</label>
79+
</li>
80+
<liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4">
81+
Second Group
82+
</li>
83+
<liclass="fsa-select-multi__item">
84+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_three"type="radio"name="select_radio_example"value="Three">
85+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_three">Three</label>
86+
</li>
87+
<liclass="fsa-select-multi__item">
88+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_four"type="radio"name="select_radio_example"value="Four">
89+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_four">Four</label>
90+
</li>
91+
<liclass="fsa-select-multi__item">
92+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_five"type="radio"name="select_radio_example"value="Five">
93+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_five">Five</label>
94+
</li>
95+
<liclass="fsa-select-multi__item">
96+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_six"type="radio"name="select_radio_example"value="Six">
97+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_six">Six</label>
98+
</li>
99+
<liclass="fsa-select-multi__item">
100+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_seven"type="radio"name="select_radio_example"value="Seven">
101+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_seven">Seven</label>
102+
</li>
103+
<liclass="fsa-select-multi__item">
104+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_eight"type="radio"name="select_radio_example"value="Eight">
105+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_eight">Eight</label>
106+
</li>
107+
<liclass="fsa-select-multi__item">
108+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_optgroup-example_nine"type="radio"name="select_radio_example"value="Nine">
109+
<labelclass="fsa-select-multi__label"for="radio_optgroup-example_nine">Nine</label>
110+
</li>
111+
</ul>
112+
</div>
113+
</div>
114+
</div>
115+
<divclass="fsa-grid__1/1 fsa-grid__1/2@m">
116+
<divclass="fsa-field fsa-field--fill">
117+
<divclass="fsa-select-multi">
118+
<ulclass="fsa-select-multi__list">
119+
<liclass="fsa-select-multi__item">
120+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_one"type="checkbox"name="default_one"value="One"checked="">
121+
<labelclass="fsa-select-multi__label"for="default_one">One</label>
122+
</li>
123+
<liclass="fsa-select-multi__item">
124+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_two"type="checkbox"name="default_two"value="Two">
125+
<labelclass="fsa-select-multi__label"for="default_two">Two</label>
126+
</li>
127+
<liclass="fsa-select-multi__item">
128+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_three"type="checkbox"name="default_three"value="Three"checked="">
129+
<labelclass="fsa-select-multi__label"for="default_three">Three</label>
130+
</li>
131+
<liclass="fsa-select-multi__item">
132+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_four"type="checkbox"name="default_four"value="Four"checked="">
133+
<labelclass="fsa-select-multi__label"for="default_four">Four</label>
134+
</li>
135+
<liclass="fsa-select-multi__item">
136+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_five"type="checkbox"name="default_five"value="Five">
137+
<labelclass="fsa-select-multi__label"for="default_five">Five</label>
138+
</li>
139+
<liclass="fsa-select-multi__item">
140+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_six"type="checkbox"name="default_six"value="Six">
141+
<labelclass="fsa-select-multi__label"for="default_six">Six</label>
142+
</li>
143+
<liclass="fsa-select-multi__item">
144+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_seven"type="checkbox"name="default_seven"value="Seven">
145+
<labelclass="fsa-select-multi__label"for="default_seven">Seven</label>
146+
</li>
147+
<liclass="fsa-select-multi__item">
148+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_eight"type="checkbox"name="default_eight"value="Eight">
149+
<labelclass="fsa-select-multi__label"for="default_eight">Eight</label>
150+
</li>
151+
<liclass="fsa-select-multi__item">
152+
<inputclass="fsa-checkbox fsa-select-multi__check"id="default_nine"type="checkbox"name="default_nine"value="Nine">
153+
<labelclass="fsa-select-multi__label"for="default_nine">Nine</label>
154+
</li>
155+
</ul>
156+
</div>
157+
</div>
158+
<divclass="fsa-field fsa-field--fill">
159+
<divclass="fsa-select-multi">
160+
<ulclass="fsa-select-multi__list">
161+
<liclass="fsa-select-multi__item">
162+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_one"type="radio"name="select_radio_example"value="One">
163+
<labelclass="fsa-select-multi__label"for="radio_default_one">One</label>
164+
</li>
165+
<liclass="fsa-select-multi__item">
166+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_two"type="radio"name="select_radio_example"value="Two"checked="">
167+
<labelclass="fsa-select-multi__label"for="radio_default_two">Two</label>
168+
</li>
169+
<liclass="fsa-select-multi__item">
170+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_three"type="radio"name="select_radio_example"value="Three">
171+
<labelclass="fsa-select-multi__label"for="radio_default_three">Three</label>
172+
</li>
173+
<liclass="fsa-select-multi__item">
174+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_four"type="radio"name="select_radio_example"value="Four">
175+
<labelclass="fsa-select-multi__label"for="radio_default_four">Four</label>
176+
</li>
177+
<liclass="fsa-select-multi__item">
178+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_five"type="radio"name="select_radio_example"value="Five">
179+
<labelclass="fsa-select-multi__label"for="radio_default_five">Five</label>
180+
</li>
181+
<liclass="fsa-select-multi__item">
182+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_six"type="radio"name="select_radio_example"value="Six">
183+
<labelclass="fsa-select-multi__label"for="radio_default_six">Six</label>
184+
</li>
185+
<liclass="fsa-select-multi__item">
186+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_seven"type="radio"name="select_radio_example"value="Seven">
187+
<labelclass="fsa-select-multi__label"for="radio_default_seven">Seven</label>
188+
</li>
189+
<liclass="fsa-select-multi__item">
190+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_eight"type="radio"name="select_radio_example"value="Eight">
191+
<labelclass="fsa-select-multi__label"for="radio_default_eight">Eight</label>
192+
</li>
193+
<liclass="fsa-select-multi__item">
194+
<inputclass="fsa-radio fsa-select-multi__check"id="radio_default_nine"type="radio"name="select_radio_example"value="Nine">
195+
<labelclass="fsa-select-multi__label"for="radio_default_nine">Nine</label>
196+
</li>
197+
</ul>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
204+
</body>
205+
</html>

‎src/stylesheets/components/_fsa.select-multi.scss‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
.fsa-select-multi {
22

3+
& {
4+
position:relative;
5+
}
6+
37
&__list {
48

5-
@includereset-ul();
6-
overflow:auto;
7-
scroll-behavior:smooth;
8-
max-height:190px;
9-
padding:$size-base0;
10-
border:1pxsolid$form-outline-color;
11-
border-radius:$form-border-radius;
12-
background-color:$color-fsa-white;
9+
& {
10+
@includereset-ul();
11+
resize:vertical;
12+
overflow:auto;
13+
scroll-behavior:smooth;
14+
height:190px;
15+
border:1pxsolid$form-outline-color;
16+
border-radius:$form-border-radius;
17+
background-color:$color-fsa-white;
18+
}
1319

1420
// scss-lint:disable SelectorFormat
1521
.fsa-select-multi--disabled& {
@@ -32,25 +38,42 @@
3238
max-height:190px;
3339
padding:$size-base00 ($size-base*2);
3440
background-color:$color-fsa-white;
35-
3641
}
3742

3843
&__item {
3944

40-
@includereset-li();
41-
position:relative;
42-
padding:0$size-small;
45+
& {
46+
@includereset-li();
47+
position:relative;
48+
padding:0$size-small;
49+
}
50+
51+
&:first-child:not(.fsa-select-multi__item--group) {
52+
margin-top:$size-base;
53+
}
54+
55+
&--group {
56+
@includefont-size(2);
57+
padding-top:$size-base;
58+
padding-bottom:$size-base;
59+
font-weight:$font-bold;
60+
text-transform:uppercase;
61+
background-color:$color-fsa-tertiary-100;
62+
position:sticky;
63+
top:0;
64+
z-index:1;
65+
}
4366

44-
&:hover {
67+
//&:hover:not(.fsa-select-multi__item--group) {
4568

46-
background-color:tint($color-fsa-tertiary,94%);
69+
// background-color: tint($color-fsa-tertiary, 94%);
4770

48-
// scss-lint:disable SelectorFormat
49-
.fsa-select-multi--disabled& {
50-
background-color:$form-disabled-bg-color;
51-
}
71+
// // scss-lint:disable SelectorFormat
72+
// .fsa-select-multi--disabled & {
73+
// background-color: $form-disabled-bg-color;
74+
// }
5275

53-
}
76+
//}
5477

5578
&:active {
5679
background-color:white;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp