Skip to content

Commit 91194fd

Browse files
WrathChaosWrathChaos
committed
Three CHModCheckbox with scss is integrated
1 parent 8637e45 commit 91194fd

File tree

5 files changed

+206
-22
lines changed

5 files changed

+206
-22
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,8 @@
2525
"@stencil/core": "^1.3.3",
2626
"@stencil/sass": "^1.0.1"
2727
},
28-
"license": "MIT"
28+
"license": "MIT",
29+
"dependencies": {
30+
"bootstrap": "^4.3.1"
31+
}
2932
}

‎src/components/chmod-checkbox/chmod-checkbox.scss‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,3 +136,156 @@ input[type="checkbox"] {
136136
}
137137
}
138138
}
139+
140+
.wrapper {
141+
display: grid;
142+
grid-template-columns: repeat(3, 1fr);
143+
grid-gap: 10px;
144+
grid-auto-rows: minmax(100px, auto);
145+
}
146+
147+
.column1 {
148+
grid-column: 1;
149+
grid-row: 3;
150+
}
151+
.column2 {
152+
grid-column: 2;
153+
grid-row: 3;
154+
}
155+
.column3 {
156+
grid-column: 3;
157+
grid-row: 3;
158+
}
159+
160+
/**
161+
* Bootstrap CSS
162+
*/
163+
164+
// .col-xl-1,
165+
// .col-xxl-1,
166+
// .col-xxxl-1,
167+
// .col-xl-2,
168+
// .col-xxl-2,
169+
// .col-md-2,
170+
// .col-xxxl-2,
171+
// .col-xl-3,
172+
// .col-xxl-3,
173+
// .col-md-3,
174+
// .col-xxxl-3,
175+
// .col-xl-4,
176+
// .col-xxl-4,
177+
// .col-md-4,
178+
// .col-xxxl-4,
179+
// .col-xl-5,
180+
// .col-xxl-5,
181+
// .col-md-5,
182+
// .col-xxxl-5,
183+
// .col-xl-6,
184+
// .col-xxl-6,
185+
// .col-md-6,
186+
// .col-xxxl-6,
187+
// .col-xl-7,
188+
// .col-xxl-7,
189+
// .col-md-7,
190+
// .col-xxxl-7,
191+
// .col-xl-8,
192+
// .col-xxl-8,
193+
// .col-md-8,
194+
// .col-xxxl-8,
195+
// .col-xl-9,
196+
// .col-xxl-9,
197+
// .col-md-9,
198+
// .col-xxxl-9,
199+
// .col-xl-10,
200+
// .col-xxl-100,
201+
// .col-xxxl-10,
202+
// .col-xl-11,
203+
// .col-xxl-111,
204+
// .col-xxxl-11,
205+
// .col-xl-12,
206+
// .col-xxl-122,
207+
// .col-xxxl-12 {
208+
// position: relative;
209+
// min-height: 1px;
210+
// padding-right: 15px;
211+
// padding-left: 15px;
212+
// }
213+
// @media (min-width: 992px) {
214+
// .col-md-4 {
215+
// width: 33.33333333%;
216+
// }
217+
// }
218+
// @media (min-width: 992px) {
219+
// .col-md-1,
220+
// .col-md-10,
221+
// .col-md-11,
222+
// .col-md-12,
223+
// .col-md-2,
224+
// .col-md-3,
225+
// .col-md-4,
226+
// .col-md-5,
227+
// .col-md-6,
228+
// .col-md-7,
229+
// .col-md-8,
230+
// .col-md-9 {
231+
// float: left;
232+
// }
233+
// }
234+
// .col-lg-1,
235+
// .col-lg-10,
236+
// .col-lg-11,
237+
// .col-lg-12,
238+
// .col-lg-2,
239+
// .col-lg-3,
240+
// .col-lg-4,
241+
// .col-lg-5,
242+
// .col-lg-6,
243+
// .col-lg-7,
244+
// .col-lg-8,
245+
// .col-lg-9,
246+
// .col-md-1,
247+
// .col-md-10,
248+
// .col-md-11,
249+
// .col-md-12,
250+
// .col-md-2,
251+
// .col-md-3,
252+
// .col-md-4,
253+
// .col-md-5,
254+
// .col-md-6,
255+
// .col-md-7,
256+
// .col-md-8,
257+
// .col-md-9,
258+
// .col-sm-1,
259+
// .col-sm-10,
260+
// .col-sm-11,
261+
// .col-sm-12,
262+
// .col-sm-2,
263+
// .col-sm-3,
264+
// .col-sm-4,
265+
// .col-sm-5,
266+
// .col-sm-6,
267+
// .col-sm-7,
268+
// .col-sm-8,
269+
// .col-sm-9,
270+
// .col-xs-1,
271+
// .col-xs-10,
272+
// .col-xs-11,
273+
// .col-xs-12,
274+
// .col-xs-2,
275+
// .col-xs-3,
276+
// .col-xs-4,
277+
// .col-xs-5,
278+
// .col-xs-6,
279+
// .col-xs-7,
280+
// .col-xs-8,
281+
// .col-xs-9 {
282+
// position: relative;
283+
// min-height: 1px;
284+
// padding-right: 15px;
285+
// padding-left: 15px;
286+
// }
287+
288+
// .row {
289+
// margin-right: -15px;
290+
// margin-left: -15px;
291+
// }

‎src/components/chmod-checkbox/chmod-checkbox.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,40 @@ export class CHModCheckbox {
2727

2828
render() {
2929
return (
30-
<div class="animated-checkbox">
31-
<form>
32-
<div class="flex-center-vertically">
33-
<input name="check" type="checkbox" id="hello" />
34-
<label htmlFor="hello">
35-
<span></span>
36-
</label>
37-
<span class="content-text-style"> </span>
38-
</div>
39-
</form>
30+
<div class="wrapper">
31+
<div class="column1 animated-checkbox">
32+
<form>
33+
<div class="flex-center-vertically">
34+
<input name="check" type="checkbox" id="read" />
35+
<label htmlFor="read">
36+
<span></span>
37+
</label>
38+
<span class="content-text-style">READ</span>
39+
</div>
40+
</form>
41+
</div>
42+
<div class="column2 animated-checkbox">
43+
<form>
44+
<div class="flex-center-vertically">
45+
<input name="check" type="checkbox" id="write" />
46+
<label htmlFor="write">
47+
<span></span>
48+
</label>
49+
<span class="content-text-style">WRITE</span>
50+
</div>
51+
</form>
52+
</div>
53+
<div class="column3 animated-checkbox">
54+
<form>
55+
<div class="flex-center-vertically">
56+
<input name="check" type="checkbox" id="execute" />
57+
<label htmlFor="execute">
58+
<span></span>
59+
</label>
60+
<span class="content-text-style">EXECUTE</span>
61+
</div>
62+
</form>
63+
</div>
4064
</div>
4165
);
4266
}

‎src/index.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
<!DOCTYPE html>
22
<html dir="ltr" lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
8-
/>
9-
<title>Stencil Component Starter</title>
10-
11-
<script type="module" src="/build/chmod-checkbox.esm.js"></script>
12-
<script nomodule src="/build/chmod-checkbox.js"></script>
13-
</head>
14-
<body>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
8+
/>
9+
<title>Stencil Component Starter</title>
10+
<script type="module" src="/build/chmod-checkbox.esm.js"></script>
11+
<script nomodule src="/build/chmod-checkbox.js"></script>
12+
</head>
13+
<body>
1514
<chmod-checkbox />
1615
</body>
1716
</html>

0 commit comments

Comments
 (0)