Skip to content

Commit 137ee64

Browse files
Joshua FishmanJoshua Fishman
Joshua Fishman
authored and
Joshua Fishman
committed
merged checkbox, grid-system & pagination
1 parent 4e1fbe4 commit 137ee64

File tree

10 files changed

+339
-170
lines changed

10 files changed

+339
-170
lines changed

‎docs/buttons.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ hide:
88
=== "Filled"
99
<div class="btn-grid-1">
1010
<div class="grid-items">
11-
<a href="#" class="btn btn-filled">Labelzz</a>
11+
<a href="#" class="btn btn-filled">Label</a>
1212
</div>
1313
</div>
1414
<br>

‎docs/checkbox.md‎

Lines changed: 68 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
git sa---
1+
---
22
hide:
33
- toc
44
---
@@ -8,47 +8,45 @@ hide:
88
=== "Checked"
99
<div class="btn-grid-1">
1010
<div class="grid-items">
11-
<label class="checkbox" aria-label="Checkbox">
12-
<div class="checkbox-container">
13-
<input type="checkbox" checked>
14-
<span class="checkbox-visual"></span>
15-
</div>
16-
</label>
11+
<div class="checkbox">
12+
<input type="checkbox" checked id="checkbox-checked-1">
13+
<span class="checkbox-visual"></span>
14+
</div>
1715
</div>
1816
</div>
1917
<br>
2018
## States
2119
=== "Enabled"
2220
<div class="btn-grid-1">
2321
<div class="grid-items">
24-
<label class="checkbox" aria-label="Enabled checkbox">
22+
<div class="checkbox">
2523
<div class="checkbox-container">
26-
<input type="checkbox" checked>
24+
<input type="checkbox" checked id="checkbox-enabled-1">
2725
<span class="checkbox-visual"></span>
2826
</div>
29-
</label>
27+
</div>
3028
</div>
3129
</div>
3230
=== "Hover"
3331
<div class="btn-grid-1">
3432
<div class="grid-items">
35-
<label class="checkbox checkbox-hover" aria-label="Hover checkbox">
33+
<div class="checkbox checkbox-hover">
3634
<div class="checkbox-container">
37-
<input type="checkbox" checked>
35+
<input type="checkbox" checked id="checkbox-hover-1">
3836
<span class="checkbox-visual"></span>
3937
</div>
40-
</label>
38+
</div>
4139
</div>
4240
</div>
4341
=== "Disabled"
4442
<div class="btn-grid-1">
4543
<div class="grid-items">
46-
<label class="checkbox" aria-label="Disabled checkbox">
44+
<div class="checkbox">
4745
<div class="checkbox-container">
48-
<input type="checkbox" checked disabled>
46+
<input type="checkbox" checked disabled id="checkbox-disabled-1">
4947
<span class="checkbox-visual"></span>
5048
</div>
51-
</label>
49+
</div>
5250
</div>
5351
</div>
5452
<br>
@@ -61,58 +59,58 @@ hide:
6159
```
6260
=== "HTML"
6361
``` html
64-
<label class="checkbox checkbox-hover" aria-label="Checkbox">
62+
<div class="checkbox checkbox-hover">
6563
<div class="checkbox-container">
6664
<input type="checkbox" checked>
6765
<span class="checkbox-visual"></span>
6866
</div>
69-
</label>
67+
</div>
7068
```
7169

7270
=== "Unchecked"
7371
<div class="btn-grid-1">
7472
<div class="grid-items">
75-
<label class="checkbox" aria-label="Checkbox">
73+
<div class="checkbox">
7674
<div class="checkbox-container">
77-
<input type="checkbox">
75+
<input type="checkbox" id="checkbox-unchecked-1">
7876
<span class="checkbox-visual"></span>
7977
</div>
80-
</label>
78+
</div>
8179
</div>
8280
</div>
8381
<br>
8482
## States
8583
=== "Enabled"
8684
<div class="btn-grid-1">
8785
<div class="grid-items">
88-
<label class="checkbox" aria-label="Enabled checkbox">
86+
<div class="checkbox">
8987
<div class="checkbox-container">
90-
<input type="checkbox">
88+
<input type="checkbox" id="checkbox-unchecked-enabled-1">
9189
<span class="checkbox-visual"></span>
9290
</div>
93-
</label>
91+
</div>
9492
</div>
9593
</div>
9694
=== "Hover"
9795
<div class="btn-grid-1">
9896
<div class="grid-items">
99-
<label class="checkbox checkbox-hover" aria-label="Hover checkbox">
97+
<div class="checkbox checkbox-hover">
10098
<div class="checkbox-container">
101-
<input type="checkbox">
99+
<input type="checkbox" id="checkbox-unchecked-hover-1">
102100
<span class="checkbox-visual"></span>
103101
</div>
104-
</label>
102+
</div>
105103
</div>
106104
</div>
107105
=== "Disabled"
108106
<div class="btn-grid-1">
109107
<div class="grid-items">
110-
<label class="checkbox" aria-label="Disabled checkbox">
108+
<div class="checkbox">
111109
<div class="checkbox-container">
112-
<input type="checkbox" disabled>
110+
<input type="checkbox" disabled id="checkbox-unchecked-disabled-1">
113111
<span class="checkbox-visual"></span>
114112
</div>
115-
</label>
113+
</div>
116114
</div>
117115
</div>
118116
<br>
@@ -125,62 +123,62 @@ hide:
125123
```
126124
=== "HTML"
127125
``` html
128-
<label class="checkbox checkbox-hover" aria-label="Checkbox">
126+
<div class="checkbox checkbox-hover">
129127
<div class="checkbox-container">
130128
<input type="checkbox">
131129
<span class="checkbox-visual"></span>
132130
</div>
133-
</label>
131+
</div>
134132
```
135133

136134
=== "Checked+Text"
137135
<div class="btn-grid-1">
138136
<div class="grid-items">
139-
<label class="checkbox">
137+
<div class="checkbox">
140138
<div class="checkbox-container">
141-
<input type="checkbox" checked>
139+
<input type="checkbox" checked id="checkbox-checked-text-1">
142140
<span class="checkbox-visual"></span>
143141
</div>
144-
<label class="checkbox-visual" for="name">Label</label>
145-
</label>
142+
<label for="checkbox-checked-text-1" class="checkbox-text">Label</label>
143+
</div>
146144
</div>
147145
</div>
148146
<br>
149147
## States
150148
=== "Enabled"
151149
<div class="btn-grid-1">
152150
<div class="grid-items">
153-
<label class="checkbox">
151+
<div class="checkbox">
154152
<div class="checkbox-container">
155-
<input type="checkbox" checked>
153+
<input type="checkbox" checked id="checkbox-checked-text-enabled-1">
156154
<span class="checkbox-visual"></span>
157155
</div>
158-
<label class="checkbox-visual" for="name">Label</label>
159-
</label>
156+
<label for="checkbox-checked-text-enabled-1" class="checkbox-text">Label</label>
157+
</div>
160158
</div>
161159
</div>
162160
=== "Hover"
163161
<div class="btn-grid-1">
164162
<div class="grid-items">
165163
<div class="checkbox checkbox-hover">
166164
<div class="checkbox-container">
167-
<input type="checkbox" checked>
165+
<input type="checkbox" checked id="checkbox-checked-text-hover-1">
168166
<span class="checkbox-visual"></span>
169167
</div>
170-
<label class="checkbox-visual" for="name">Label</label>
168+
<label for="checkbox-checked-text-hover-1" class="checkbox-text">Label</label>
171169
</div>
172170
</div>
173171
</div>
174172
=== "Disabled"
175173
<div class="btn-grid-1">
176174
<div class="grid-items">
177-
<label class="checkbox">
175+
<div class="checkbox">
178176
<div class="checkbox-container">
179-
<input type="checkbox" checked disabled>
177+
<input type="checkbox" checked disabled id="checkbox-checked-text-disabled-1">
180178
<span class="checkbox-visual"></span>
181179
</div>
182-
<label class="checkbox-visual" for="name">Label</label>
183-
</label>
180+
<label for="checkbox-checked-text-disabled-1" class="checkbox-text">Label</label>
181+
</div>
184182
</div>
185183
</div>
186184
<br>
@@ -195,63 +193,63 @@ hide:
195193
```
196194
=== "HTML"
197195
``` html
198-
<label class="checkbox checkbox-hover">
196+
<div class="checkbox checkbox-hover">
199197
<div class="checkbox-container">
200-
<input type="checkbox" checked>
198+
<input type="checkbox" checked id="checkbox-text-1">
201199
<span class="checkbox-visual"></span>
202200
</div>
203-
<label class="checkbox-visual" for="name">Label</label>
204-
</label>
201+
<label for="checkbox-text-1" class="checkbox-text">Label</label>
202+
</div>
205203
```
206204

207205
=== "Unchecked+Text"
208206
<div class="btn-grid-1">
209207
<div class="grid-items">
210-
<label class="checkbox">
208+
<div class="checkbox">
211209
<div class="checkbox-container">
212-
<input type="checkbox">
210+
<input type="checkbox" id="checkbox-unchecked-text-1">
213211
<span class="checkbox-visual"></span>
214212
</div>
215-
<label class="checkbox-visual" for="name">Label</label>
216-
</label>
213+
<label for="checkbox-unchecked-text-1" class="checkbox-text">Label</label>
214+
</div>
217215
</div>
218216
</div>
219217
<br>
220218
## States
221219
=== "Enabled"
222220
<div class="btn-grid-1">
223221
<div class="grid-items">
224-
<label class="checkbox">
222+
<div class="checkbox">
225223
<div class="checkbox-container">
226-
<input type="checkbox">
224+
<input type="checkbox" id="checkbox-unchecked-text-enabled-1">
227225
<span class="checkbox-visual"></span>
228226
</div>
229-
<label class="checkbox-visual" for="name">Label</label>
230-
</label>
227+
<label for="checkbox-unchecked-text-enabled-1" class="checkbox-text">Label</label>
228+
</div>
231229
</div>
232230
</div>
233231
=== "Hover"
234232
<div class="btn-grid-1">
235233
<div class="grid-items">
236-
<label class="checkbox checkbox-hover">
234+
<div class="checkbox checkbox-hover">
237235
<div class="checkbox-container">
238-
<input type="checkbox">
236+
<input type="checkbox" id="checkbox-unchecked-text-hover-1">
239237
<span class="checkbox-visual"></span>
240238
</div>
241-
<label class="checkbox-visual" for="name">Label</label>
242-
</label>
239+
<label for="checkbox-unchecked-text-hover-1" class="checkbox-text">Label</label>
240+
</div>
243241
</div>
244242
</div>
245243
=== "Disabled"
246244
<div class="btn-grid-1">
247245
<div class="grid-items">
248-
<label class="checkbox">
246+
<div class="checkbox">
249247
<div class="checkbox-container">
250-
<input type="checkbox" disabled>
248+
<input type="checkbox" disabled id="checkbox-unchecked-text-disabled-1">
251249
<span class="checkbox-visual"></span>
252250
</div>
253-
<label class="checkbox-visual" for="name">Label</label>
254-
</label>
251+
<label for="checkbox-unchecked-text-disabled-1" class="checkbox-text">Label</label>
252+
</div>
255253
</div>
256254
</div>
257255
<br>
@@ -266,11 +264,11 @@ hide:
266264
```
267265
=== "HTML"
268266
``` html
269-
<label class="checkbox checkbox-hover">
267+
<div class="checkbox checkbox-hover">
270268
<div class="checkbox-container">
271-
<input type="checkbox">
269+
<input type="checkbox" id="checkbox-text-2">
272270
<span class="checkbox-visual"></span>
273271
</div>
274-
<label class="checkbox-visual" for="name">Label</label>
275-
</label>
272+
<label for="checkbox-text-2" class="checkbox-text">Label</label>
273+
</div>
276274
```

‎docs/components/sass/abstracts/_variables.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ $color-old-green:#247984;
1919
$color-whitegreen: #E7F0F1;
2020

2121
$color-primary: #006973;
22+
$color-primary-hover: $color-whitegreen;
2223
$color-on-primary: #FFFFFF;
2324
$color-primary-container: #9FF0FA;
2425
$color-on-primary-container: #011F23;
@@ -41,7 +42,7 @@ $text-font-stack: (
4142
'Roboto',
4243
sans-serif
4344
);
44-
$text-color: $color-black;
45+
$text-color: $color-on-primary-container;
4546
$text-muted: $color-dark-grey;
4647

4748
$line-height-base: 1.5;

‎docs/components/sass/components/_accordion.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
.accordion-button {
1515
font-size: 24px;
16-
color: $color-black;
16+
color: $text-color;
1717
cursor: pointer;
1818
width: 100%;
1919
height: 64px;

0 commit comments

Comments
 (0)