Skip to content

Commit 4c07948

Browse files
haubekhaubek
committed
Bootstrap upgrade + accessibility styling
1 parent 879351c commit 4c07948

File tree

11 files changed

+205
-101
lines changed

11 files changed

+205
-101
lines changed

‎HISTORY.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Release History
22

3+
## 1.0.12
4+
5+
* Upgraded to Bootstrap 4.3.1
6+
* Added `box-shadow` styling for accessibility
7+
* Added `text-hide` styling for accessibility
8+
39
## 1.0.11
410

511
* Added `custom-switch-sm` and `custom-switch-xs` sizes

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ yarn add bootstrap4c-custom-switch
2020

2121
### HTML5 markup
2222

23+
See `example.html` for all markup examples.
24+
2325
```
2426
<div class="custom-switch">
2527
<input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox">

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap4c-custom-switch",
33
"description": "Bootstrap 4 Component - Custom switch",
4-
"version": "1.0.11",
4+
"version": "1.0.12",
55
"license": "MIT",
66
"authors": [
77
{ "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

‎dist/css/component-custom-switch.css‎

Lines changed: 33 additions & 29 deletions
Large diffs are not rendered by default.

‎dist/css/component-custom-switch.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.html‎

Lines changed: 66 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,79 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<title>Example</title>
7-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
88
<link href="dist/css/component-custom-switch.css" rel="stylesheet">
99
</head>
1010
<body class="h-100">
1111
<div class="container h-100">
1212
<div class="d-flex align-items-start flex-column h-100">
1313
<div class="w-100 m-auto py-5 text-center">
1414

15-
<div class="custom-switch custom-switch-label">
16-
<input class="custom-switch-input" id="example_01" type="checkbox">
17-
<label class="custom-switch-btn" for="example_01"></label>
18-
</div>
19-
<hr>
20-
<div class="custom-switch custom-switch-label-io">
21-
<input class="custom-switch-input" id="example_02" type="checkbox">
22-
<label class="custom-switch-btn" for="example_02"></label>
23-
</div>
24-
<hr>
25-
<div class="custom-switch custom-switch-label-onoff">
26-
<input class="custom-switch-input" id="example_03" type="checkbox">
27-
<label class="custom-switch-btn" for="example_03"></label>
28-
</div>
29-
<hr>
30-
<div class="custom-switch custom-switch-label-yesno">
31-
<input class="custom-switch-input" id="example_04" type="checkbox">
32-
<label class="custom-switch-btn" for="example_04"></label>
33-
</div>
34-
<hr>
35-
<div class="custom-switch custom-switch-label-status">
36-
<input class="custom-switch-input" id="example_05" type="checkbox">
37-
<label class="custom-switch-btn" for="example_05"></label>
38-
</div>
39-
<hr>
40-
<div class="custom-switch custom-switch-label-onoff custom-switch-sm">
41-
<input class="custom-switch-input" id="example_06" type="checkbox">
42-
<label class="custom-switch-btn" for="example_06"></label>
43-
</div>
44-
<p>I'm <code>sm</code></p>
45-
<hr>
46-
<div class="custom-switch custom-switch-label-onoff custom-switch-xs">
47-
<input class="custom-switch-input" id="example_07" type="checkbox">
48-
<label class="custom-switch-btn" for="example_07"></label>
49-
</div>
50-
<p>I'm <code>xs</code></p>
51-
<hr>
52-
<div class="custom-switch custom-switch-label-yesno">
53-
<input class="custom-switch-input" id="example_08" type="checkbox">
54-
<label class="custom-switch-btn" for="example_08"></label>
55-
<div class="custom-switch-content-checked">
56-
<span class="text-success">I'm checked</span>
57-
</div>
58-
<div class="custom-switch-content-unchecked">
59-
<span class="text-danger">I'm unchecked (click me!)</span>
60-
</div>
61-
</div>
62-
<hr>
63-
<div class="custom-switch custom-switch-label-io">
64-
<input class="custom-switch-input" id="example_09" type="checkbox" disabled>
65-
<label class="custom-switch-btn" for="example_09"></label>
66-
</div>
67-
<div class="custom-switch custom-switch-label-io">
68-
<input class="custom-switch-input" id="example_10" type="checkbox" checked disabled>
69-
<label class="custom-switch-btn" for="example_10"></label>
70-
</div>
71-
<p>I'm disabled</p>
15+
<div class="custom-switch">
16+
<input class="custom-switch-input" id="example_01" type="checkbox">
17+
<label class="custom-switch-btn" for="example_01"></label>
18+
</div>
19+
<hr>
20+
<div class="custom-switch custom-switch-label-io">
21+
<input class="custom-switch-input" id="example_02" type="checkbox">
22+
<label class="custom-switch-btn" for="example_02"></label>
23+
</div>
24+
<hr>
25+
<div class="custom-switch custom-switch-label-onoff">
26+
<input class="custom-switch-input" id="example_03" type="checkbox">
27+
<label class="custom-switch-btn" for="example_03"></label>
28+
</div>
29+
<hr>
30+
<div class="custom-switch custom-switch-label-yesno">
31+
<input class="custom-switch-input" id="example_04" type="checkbox">
32+
<label class="custom-switch-btn" for="example_04"></label>
33+
</div>
34+
<hr>
35+
<div class="custom-switch custom-switch-label-status">
36+
<input class="custom-switch-input" id="example_05" type="checkbox">
37+
<label class="custom-switch-btn" for="example_05"></label>
38+
</div>
39+
<hr>
40+
<div class="custom-switch custom-switch-label-onoff custom-switch-sm">
41+
<input class="custom-switch-input" id="example_06" type="checkbox">
42+
<label class="custom-switch-btn" for="example_06"></label>
43+
</div>
44+
<p>I'm <code>sm</code></p>
45+
<hr>
46+
<div class="custom-switch custom-switch-label-onoff custom-switch-xs">
47+
<input class="custom-switch-input" id="example_07" type="checkbox">
48+
<label class="custom-switch-btn" for="example_07"></label>
49+
</div>
50+
<p>I'm <code>xs</code></p>
51+
<hr>
52+
<div class="custom-switch custom-switch-label-yesno">
53+
<input class="custom-switch-input" id="example_08" type="checkbox">
54+
<label class="custom-switch-btn" for="example_08"></label>
55+
<div class="custom-switch-content-checked">
56+
<span class="text-success">I'm checked</span>
57+
</div>
58+
<div class="custom-switch-content-unchecked">
59+
<span class="text-danger">I'm unchecked (click me!)</span>
60+
</div>
61+
</div>
62+
<hr>
63+
<div class="custom-switch custom-switch-label-io">
64+
<input class="custom-switch-input" id="example_09" type="checkbox" disabled>
65+
<label class="custom-switch-btn" for="example_09"></label>
66+
</div>
67+
<div class="custom-switch custom-switch-label-io">
68+
<input class="custom-switch-input" id="example_10" type="checkbox" checked disabled>
69+
<label class="custom-switch-btn" for="example_10"></label>
70+
</div>
71+
<p>I'm disabled</p>
72+
<hr>
73+
<div class="form-group">
74+
<div for="example_11">I'm a form label:</div>
75+
<div class="custom-switch">
76+
<input type="checkbox" class="custom-switch-input" id="example_11" checked>
77+
<label class="custom-switch-btn text-hide" for="example_11">{value}</label>
78+
</div>
79+
</div>
7280

7381
</div>
7482
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "bootstrap4c-custom-switch",
33
"description": "Bootstrap 4 Component - Custom switch",
4-
"version": "1.0.11",
4+
"version": "1.0.12",
55
"license": "MIT",
66
"author": {
77
"name": "Martin Haubek",

‎src/scss/_component-custom-switch.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@
4343
&:before {
4444
display: none;
4545
}
46+
&.text-hide {
47+
top: -.80rem;
48+
}
4649
}
4750
&:checked + .custom-switch-btn {
4851
background: $switch-checked-bg;
@@ -79,6 +82,15 @@
7982
background: rgba($switch-checked-bg, $switch-checked-disabled-opacity);
8083
}
8184
}
85+
&:not([disabled]) {
86+
&:active,
87+
&:focus,
88+
&:hover {
89+
~ .custom-switch-btn {
90+
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 .25rem rgba(56,123,189,.25);
91+
}
92+
}
93+
}
8294
}
8395
.custom-switch-form-text {
8496
display: inline-block;

‎src/scss/_component-variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $switch-font-size: 12;
1212
$switch-font-size-sm: 11;
1313
$switch-font-size-xs: 10;
1414
$switch-font-family: $font-family-sans-serif;
15-
$switch-duration: 300ms;
15+
$switch-duration: 200ms;
1616

1717
$switch-checked-color: $white;
1818
$switch-checked-bg: $green;
@@ -23,7 +23,7 @@ $switch-checked-text-yesno: "Yes";
2323
$switch-checked-text-status: "Enabled";
2424

2525
$switch-unchecked-color: $white;
26-
$switch-unchecked-bg: $gray-400;
26+
$switch-unchecked-bg: $gray-500;
2727
$switch-unchecked-disabled-opacity: .6;
2828
$switch-unchecked-text-io: "O";
2929
$switch-unchecked-text-onoff: "Off";

‎src/scss/build.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
*
55
* Bootstrap 4 Component - Custom switch
6-
* Version: 1.0.11
6+
* Version: 1.0.12
77
* Copyright (c) 2017-18 Martin Haubek
88
*
99
*

0 commit comments

Comments
 (0)