From 87fd3f24cf4657e471aabfd4828262afe99d7a9a Mon Sep 17 00:00:00 2001 From: ivankal Date: Tue, 27 Oct 2020 13:07:44 +0200 Subject: [PATCH] Callouts And Switch --- README.md | 14 +- lib/bootstrap-extended.css | 319 +++++++++++++++++++++++++-------- lib/bootstrap-extended.css.map | 2 +- lib/bootstrap-extended.scss | 191 ++++++++++++++++++-- lib/theme.scss | 35 ++++ screenshots/Callouts.png | Bin 0 -> 18032 bytes screenshots/Switch-Off.png | Bin 0 -> 831 bytes screenshots/Switch-On.png | Bin 0 -> 1029 bytes showcase/testing.html | 67 +++++-- 9 files changed, 523 insertions(+), 105 deletions(-) create mode 100644 screenshots/Callouts.png create mode 100644 screenshots/Switch-Off.png create mode 100644 screenshots/Switch-On.png diff --git a/README.md b/README.md index adf4140..4a3144d 100644 --- a/README.md +++ b/README.md @@ -14,17 +14,27 @@ It's an extension! **BootstrapExtended** is a library that contains certain HTML ![Combobox-expanded](./screenshots/Select-Expanded.png?raw=true) - ✔️ Checkboxes - Testing + ✔️ Checkboxes - Ready ![Checkboxes](./screenshots/Checkboxes-NotChecked.png?raw=true) - ✔️ Radio buttons - To be started + ✔️ Radio buttons - Ready ![Radio](./screenshots/Radio.png?raw=true) ![Radio2](./screenshots/Radio-NoText.png?raw=true) ![Radio3](./screenshots/Radio-Block.png?raw=true) + + ✔️ Switch - Ready + + ![Radio](./screenshots/Switch-On.png?raw=true) + + ![Radio2](./screenshots/Switch-Off.png?raw=true) + + ✔️ Callouts - Ready + + ![Radio](./screenshots/Callouts.png?raw=true) ## Development diff --git a/lib/bootstrap-extended.css b/lib/bootstrap-extended.css index b0395e0..2bbeff9 100644 --- a/lib/bootstrap-extended.css +++ b/lib/bootstrap-extended.css @@ -17,7 +17,7 @@ width: 0; } -.checkmark-primary { +.checkmark { position: absolute; top: 0; left: 0; @@ -28,25 +28,25 @@ outline: 0; } -.be-ch-countainer-primary:hover input ~ .checkmark-primary { +.be-ch-countainer-primary:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-primary input:checked ~ .checkmark-primary { +.be-ch-countainer-primary input:checked ~ .checkmark { background-color: #007bff; } -.checkmark-primary:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-primary input:checked ~ .checkmark-primary:after { +.be-ch-countainer-primary input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-primary .checkmark-primary:after { +.be-ch-countainer-primary .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -77,7 +77,7 @@ width: 0; } -.checkmark-danger { +.checkmark { position: absolute; top: 0; left: 0; @@ -88,25 +88,25 @@ outline: 0; } -.be-ch-countainer-danger:hover input ~ .checkmark-danger { +.be-ch-countainer-danger:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-danger input:checked ~ .checkmark-danger { +.be-ch-countainer-danger input:checked ~ .checkmark { background-color: #dc3545; } -.checkmark-danger:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-danger input:checked ~ .checkmark-danger:after { +.be-ch-countainer-danger input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-danger .checkmark-danger:after { +.be-ch-countainer-danger .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -137,7 +137,7 @@ width: 0; } -.checkmark-warning { +.checkmark { position: absolute; top: 0; left: 0; @@ -148,25 +148,25 @@ outline: 0; } -.be-ch-countainer-warning:hover input ~ .checkmark-warning { +.be-ch-countainer-warning:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-warning input:checked ~ .checkmark-warning { +.be-ch-countainer-warning input:checked ~ .checkmark { background-color: #ffc107; } -.checkmark-warning:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-warning input:checked ~ .checkmark-warning:after { +.be-ch-countainer-warning input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-warning .checkmark-warning:after { +.be-ch-countainer-warning .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -197,7 +197,7 @@ width: 0; } -.checkmark-info { +.checkmark { position: absolute; top: 0; left: 0; @@ -208,25 +208,25 @@ outline: 0; } -.be-ch-countainer-info:hover input ~ .checkmark-info { +.be-ch-countainer-info:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-info input:checked ~ .checkmark-info { +.be-ch-countainer-info input:checked ~ .checkmark { background-color: #17a2b8; } -.checkmark-info:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-info input:checked ~ .checkmark-info:after { +.be-ch-countainer-info input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-info .checkmark-info:after { +.be-ch-countainer-info .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -257,7 +257,7 @@ width: 0; } -.checkmark-success { +.checkmark { position: absolute; top: 0; left: 0; @@ -268,25 +268,25 @@ outline: 0; } -.be-ch-countainer-success:hover input ~ .checkmark-success { +.be-ch-countainer-success:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-success input:checked ~ .checkmark-success { +.be-ch-countainer-success input:checked ~ .checkmark { background-color: #28a745; } -.checkmark-success:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-success input:checked ~ .checkmark-success:after { +.be-ch-countainer-success input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-success .checkmark-success:after { +.be-ch-countainer-success .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -317,7 +317,7 @@ width: 0; } -.checkmark-secondary { +.checkmark { position: absolute; top: 0; left: 0; @@ -328,25 +328,25 @@ outline: 0; } -.be-ch-countainer-secondary:hover input ~ .checkmark-secondary { +.be-ch-countainer-secondary:hover input ~ .checkmark { background-color: #ccc; } -.be-ch-countainer-secondary input:checked ~ .checkmark-secondary { +.be-ch-countainer-secondary input:checked ~ .checkmark { background-color: #6c757d; } -.checkmark-secondary:after { +.checkmark:after { content: ""; position: absolute; display: none; } -.be-ch-countainer-secondary input:checked ~ .checkmark-secondary:after { +.be-ch-countainer-secondary input:checked ~ .checkmark:after { display: block; } -.be-ch-countainer-secondary .checkmark-secondary:after { +.be-ch-countainer-secondary .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -376,7 +376,7 @@ cursor: pointer; } -.be-ra-checkmark-primary { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -386,25 +386,25 @@ border-radius: 50%; } -.be-ra-container-primary:hover input ~ .be-ra-checkmark-primary { +.be-ra-container-primary:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-primary input:checked ~ .be-ra-checkmark-primary { +.be-ra-container-primary input:checked ~ .be-ra-checkmark { background-color: #007bff; } -.be-ra-checkmark-primary:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-primary input:checked ~ .be-ra-checkmark-primary:after { +.be-ra-container-primary input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-primary .be-ra-checkmark-primary:after { +.be-ra-container-primary .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -431,7 +431,7 @@ cursor: pointer; } -.be-ra-checkmark-danger { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -441,25 +441,25 @@ border-radius: 50%; } -.be-ra-container-danger:hover input ~ .be-ra-checkmark-danger { +.be-ra-container-danger:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-danger input:checked ~ .be-ra-checkmark-danger { +.be-ra-container-danger input:checked ~ .be-ra-checkmark { background-color: #dc3545; } -.be-ra-checkmark-danger:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-danger input:checked ~ .be-ra-checkmark-danger:after { +.be-ra-container-danger input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-danger .be-ra-checkmark-danger:after { +.be-ra-container-danger .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -486,7 +486,7 @@ cursor: pointer; } -.be-ra-checkmark-warning { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -496,25 +496,25 @@ border-radius: 50%; } -.be-ra-container-warning:hover input ~ .be-ra-checkmark-warning { +.be-ra-container-warning:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-warning input:checked ~ .be-ra-checkmark-warning { +.be-ra-container-warning input:checked ~ .be-ra-checkmark { background-color: #ffc107; } -.be-ra-checkmark-warning:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-warning input:checked ~ .be-ra-checkmark-warning:after { +.be-ra-container-warning input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-warning .be-ra-checkmark-warning:after { +.be-ra-container-warning .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -541,7 +541,7 @@ cursor: pointer; } -.be-ra-checkmark-info { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -551,25 +551,25 @@ border-radius: 50%; } -.be-ra-container-info:hover input ~ .be-ra-checkmark-info { +.be-ra-container-info:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-info input:checked ~ .be-ra-checkmark-info { +.be-ra-container-info input:checked ~ .be-ra-checkmark { background-color: #17a2b8; } -.be-ra-checkmark-info:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-info input:checked ~ .be-ra-checkmark-info:after { +.be-ra-container-info input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-info .be-ra-checkmark-info:after { +.be-ra-container-info .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -596,7 +596,7 @@ cursor: pointer; } -.be-ra-checkmark-success { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -606,25 +606,25 @@ border-radius: 50%; } -.be-ra-container-success:hover input ~ .be-ra-checkmark-success { +.be-ra-container-success:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-success input:checked ~ .be-ra-checkmark-success { +.be-ra-container-success input:checked ~ .be-ra-checkmark { background-color: #28a745; } -.be-ra-checkmark-success:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-success input:checked ~ .be-ra-checkmark-success:after { +.be-ra-container-success input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-success .be-ra-checkmark-success:after { +.be-ra-container-success .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -651,7 +651,7 @@ cursor: pointer; } -.be-ra-checkmark-secondary { +.be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -661,25 +661,25 @@ border-radius: 50%; } -.be-ra-container-secondary:hover input ~ .be-ra-checkmark-secondary { +.be-ra-container-secondary:hover input ~ .be-ra-checkmark { background-color: #ccc; } -.be-ra-container-secondary input:checked ~ .be-ra-checkmark-secondary { +.be-ra-container-secondary input:checked ~ .be-ra-checkmark { background-color: #6c757d; } -.be-ra-checkmark-secondary:after { +.be-ra-checkmark:after { content: ""; position: absolute; display: none; } -.be-ra-container-secondary input:checked ~ .be-ra-checkmark-secondary:after { +.be-ra-container-secondary input:checked ~ .be-ra-checkmark:after { display: block; } -.be-ra-container-secondary .be-ra-checkmark-secondary:after { +.be-ra-container-secondary .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -763,4 +763,179 @@ display: block; } +.switch { + font-size: 0.8rem; + position: relative; +} +.switch input { + position: absolute; + height: 1px; + width: 1px; + background: none; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; +} +.switch input + label { + position: relative; + min-width: calc(calc(2.375rem * .6) * 2); + border-radius: calc(2.375rem * .6); + height: calc(2.375rem * .6); + line-height: calc(2.375rem * .6); + display: inline-block; + cursor: pointer; + outline: none; + user-select: none; + vertical-align: middle; + text-indent: calc(calc(calc(2.375rem * .6) * 2) + .5rem); +} +.switch input + label::before, +.switch input + label::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: calc(calc(2.375rem * .6) * 2); + bottom: 0; + display: block; +} +.switch input + label::before { + right: 0; + background-color: #dee2e6; + border-radius: calc(2.375rem * .6); + transition: 0.2s all; +} +.switch input + label::after { + top: 2px; + left: 2px; + width: calc(calc(2.375rem * .6) - calc(2px * 2)); + height: calc(calc(2.375rem * .6) - calc(2px * 2)); + border-radius: 50%; + background-color: white; + transition: 0.2s all; +} +.switch input:checked + label::before { + background-color: #007bff; +} +.switch input:checked + label::after { + margin-left: calc(2.375rem * .6); +} +.switch input:focus + label::before { + outline: none; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +.switch input:disabled + label { + color: #868e96; + cursor: not-allowed; +} +.switch input:disabled + label::before { + background-color: #e9ecef; +} +.switch.switch-sm { + font-size: 0.7rem; +} +.switch.switch-sm input + label { + min-width: calc(calc(1.9375rem * .6) * 2); + height: calc(1.9375rem * .6); + line-height: calc(1.9375rem * .6); + text-indent: calc(calc(calc(1.9375rem * .6) * 2) + .5rem); +} +.switch.switch-sm input + label::before { + width: calc(calc(1.9375rem * .6) * 2); +} +.switch.switch-sm input + label::after { + width: calc(calc(1.9375rem * .6) - calc(2px * 2)); + height: calc(calc(1.9375rem * .6) - calc(2px * 2)); +} +.switch.switch-sm input:checked + label::after { + margin-left: calc(1.9375rem * .6); +} +.switch.switch-lg { + font-size: 1rem; +} +.switch.switch-lg input + label { + min-width: calc(calc(3rem * .6) * 2); + height: calc(3rem * .6); + line-height: calc(3rem * .6); + text-indent: calc(calc(calc(3rem * .6) * 2) + .5rem); +} +.switch.switch-lg input + label::before { + width: calc(calc(3rem * .6) * 2); +} +.switch.switch-lg input + label::after { + width: calc(calc(3rem * .6) - calc(2px * 2)); + height: calc(calc(3rem * .6) - calc(2px * 2)); +} +.switch.switch-lg input:checked + label::after { + margin-left: calc(3rem * .6); +} +.switch + .switch { + margin-left: 1rem; +} + +.callout { + padding: 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; +} +.callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.callout p:last-child { + margin-bottom: 0; +} +.callout code { + border-radius: 3px; +} +.callout + .bs-callout { + margin-top: -5px; +} + +.callout-primary { + border-left-color: #007bff; +} +.callout-primary h4 { + color: #007bff; +} + +.callout-danger { + border-left-color: #dc3545; +} +.callout-danger h4 { + color: #dc3545; +} + +.callout-warning { + border-left-color: #ffc107; +} +.callout-warning h4 { + color: #ffc107; +} + +.callout-info { + border-left-color: #17a2b8; +} +.callout-info h4 { + color: #17a2b8; +} + +.callout-success { + border-left-color: #28a745; +} +.callout-success h4 { + color: #28a745; +} + +.callout-secondary { + border-left-color: #6c757d; +} +.callout-secondary h4 { + color: #6c757d; +} + /*# sourceMappingURL=bootstrap-extended.css.map */ diff --git a/lib/bootstrap-extended.css.map b/lib/bootstrap-extended.css.map index c373f1b..153c614 100644 --- a/lib/bootstrap-extended.css.map +++ b/lib/bootstrap-extended.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["bootstrap-extended.scss","theme.scss"],"names":[],"mappings":"AAII;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBClBN;;;ADqBE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBChFN;;;ADmFE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AAOZ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAKJ;EACI","file":"bootstrap-extended.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["bootstrap-extended.scss","theme.scss"],"names":[],"mappings":"AAII;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AA7DJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;;;AAGJ;EACI,kBCiBN;;;ADdE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AApDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBC7CN;;;ADgDE;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACQ;EACA;EACA;EACA;EACA;EACA;;;AAOZ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAKJ;EACI;;;AAIJ;EACE,WCzLe;ED0Lf;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,eCtLU;EDuLV,QCvLU;EDwLV,aCxLU;EDyLV;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA,kBC3NwB;ED4NxB,eC/MU;EDgNV,YCpMc;;ADuMhB;EACE,KC1MiB;ED2MjB,MC3MiB;ED4MjB;EACA;EACA,eC/MuB;EDgNvB,kBCnOE;EDoOF,YC9Mc;;ADiNhB;EACE,kBCzNc;;AD4NhB;EACE,aClOU;;ADqOZ;EACE;EACA,YC5NoB;;AD+NtB;EACE,OCtPsC;EDuPtC;;AAGF;EACE,kBC5PiC;;ADgQrC;EACE,WCvQW;;AD0QT;EACE;EACA,QCzPW;ED0PX,aC1PW;ED2PX;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE,aCxQW;;AD6QjB;EACE,WClSW;;ADqST;EACE;EACA,QClRW;EDmRX,aCnRW;EDoRX;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE,aCjSW;;ADsSjB;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ;;;ADoTA;EACE,mBCrTF;;ADsTE;EACE,OCvTJ","file":"bootstrap-extended.css"} \ No newline at end of file diff --git a/lib/bootstrap-extended.scss b/lib/bootstrap-extended.scss index 1a06a98..d1b46ef 100644 --- a/lib/bootstrap-extended.scss +++ b/lib/bootstrap-extended.scss @@ -21,7 +21,7 @@ width: 0; } - .checkmark-#{$name} { + .checkmark { position: absolute; top: 0; left: 0; @@ -36,25 +36,25 @@ // } } - .be-ch-countainer-#{$name}:hover input ~ .checkmark-#{$name} { + .be-ch-countainer-#{$name}:hover input ~ .checkmark { background-color: #ccc; } - .be-ch-countainer-#{$name} input:checked ~ .checkmark-#{$name} { + .be-ch-countainer-#{$name} input:checked ~ .checkmark { background-color: $color; } - .checkmark-#{$name}:after { + .checkmark:after { content: ""; position: absolute; display: none; } - .be-ch-countainer-#{$name} input:checked ~ .checkmark-#{$name}:after { + .be-ch-countainer-#{$name} input:checked ~ .checkmark:after { display: block; } - .be-ch-countainer-#{$name} .checkmark-#{$name}:after { + .be-ch-countainer-#{$name} .checkmark:after { left: 7px; top: 4px; width: 3px; @@ -88,7 +88,7 @@ cursor: pointer; } - .be-ra-checkmark-#{$name} { + .be-ra-checkmark { position: absolute; top: 0; left: 0; @@ -98,25 +98,25 @@ border-radius: 50%; } - .be-ra-container-#{$name}:hover input ~ .be-ra-checkmark-#{$name} { + .be-ra-container-#{$name}:hover input ~ .be-ra-checkmark { background-color: #ccc; } - .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark-#{$name} { + .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark { background-color: $color; } - .be-ra-checkmark-#{$name}:after { + .be-ra-checkmark:after { content: ""; position: absolute; display: none; } - .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark-#{$name}:after { + .be-ra-container-#{$name} input:checked ~ .be-ra-checkmark:after { display: block; } - .be-ra-container-#{$name} .be-ra-checkmark-#{$name}:after { + .be-ra-container-#{$name} .be-ra-checkmark:after { top: 7px; left: 7px; width: 6px; @@ -206,3 +206,170 @@ display: block; } +//switch - credits to kemie +.switch { + font-size: $font-size-base; + position: relative; + + input { + position: absolute; + height: 1px; + width: 1px; + background: none; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; + + + label { + position: relative; + min-width: calc(#{$switch-height} * 2); + border-radius: $switch-border-radius; + height: $switch-height; + line-height: $switch-height; + display: inline-block; + cursor: pointer; + outline: none; + user-select: none; + vertical-align: middle; + text-indent: calc(calc(#{$switch-height} * 2) + .5rem); + } + + + label::before, + + label::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: calc(#{$switch-height} * 2); + bottom: 0; + display: block; + } + + + label::before { + right: 0; + background-color: $switch-bg; + border-radius: $switch-border-radius; + transition: $switch-transition; + } + + + label::after { + top: $switch-thumb-padding; + left: $switch-thumb-padding; + width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + border-radius: $switch-thumb-border-radius; + background-color: $switch-thumb-bg; + transition: $switch-transition; + } + + &:checked + label::before { + background-color: $switch-checked-bg; + } + + &:checked + label::after { + margin-left: $switch-height; + } + + &:focus + label::before { + outline: none; + box-shadow: $switch-focus-box-shadow; + } + + &:disabled + label { + color: $switch-disabled-color; + cursor: not-allowed; + } + + &:disabled + label::before { + background-color: $switch-disabled-bg; + } + } + + &.switch-sm { + font-size: $font-size-sm; + + input { + + label { + min-width: calc(#{$switch-height-sm} * 2); + height: $switch-height-sm; + line-height: $switch-height-sm; + text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-sm} * 2); + } + + + label::after { + width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-sm; + } + } + } + + &.switch-lg { + font-size: $font-size-lg; + + input { + + label { + min-width: calc(#{$switch-height-lg} * 2); + height: $switch-height-lg; + line-height: $switch-height-lg; + text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-lg} * 2); + } + + + label::after { + width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-lg; + } + } + } + + + .switch { + margin-left: 1rem; + } +} + +// Callout +.callout { + padding: 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; + h4 { + margin-top: 0; + margin-bottom: 5px; + } + p:last-child { + margin-bottom: 0; + } + code { + border-radius: 3px; + } + & + .bs-callout { + margin-top: -5px; + } +} +@each $name,$color in $colors { + .callout-#{$name} { + border-left-color: $color; + h4 { + color: $color; + } + } +} \ No newline at end of file diff --git a/lib/theme.scss b/lib/theme.scss index d9038de..b7fe22a 100644 --- a/lib/theme.scss +++ b/lib/theme.scss @@ -22,6 +22,41 @@ $light: #f8f9fa; $combo-border: #000000; $dark: #343a40; +//Switch +$font-size-base: .8rem; +$font-size-lg: ($font-size-base * 1.25); +$font-size-sm: ($font-size-base * .875); +$input-height: 2.375rem; +$input-height-sm: 1.9375rem; +$input-height-lg: 3rem; +$input-btn-focus-width: .2rem; +$custom-control-indicator-bg: #dee2e6; +$custom-control-indicator-disabled-bg: #e9ecef; +$custom-control-description-disabled-color: #868e96; +$white: white; +$theme-colors: ( + "primary": $primary, + "danger": $danger, + "warning": $warning, + "info": $info, + "success": $success, + "secondary": $secondary +); + +$switch-height: calc(#{$input-height} * .6) !default; +$switch-height-sm: calc(#{$input-height-sm} * .6) !default; +$switch-height-lg: calc(#{$input-height-lg} * .6) !default; +$switch-border-radius: $switch-height !default; +$switch-bg: $custom-control-indicator-bg !default; +$switch-checked-bg: map-get($theme-colors, 'primary') !default; +$switch-disabled-bg: $custom-control-indicator-disabled-bg !default; +$switch-disabled-color: $custom-control-description-disabled-color !default; +$switch-thumb-bg: $white !default; +$switch-thumb-border-radius: 50% !default; +$switch-thumb-padding: 2px !default; +$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25); +$switch-transition: .2s all !default; + $colors: "primary" $primary, "danger" $danger, diff --git a/screenshots/Callouts.png b/screenshots/Callouts.png new file mode 100644 index 0000000000000000000000000000000000000000..4458802ea257262ff1244b19ad8e82cd7bd36778 GIT binary patch literal 18032 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
    <3uCfx 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 literal 0 HcmV?d00001 diff --git a/screenshots/Switch-On.png b/screenshots/Switch-On.png new file mode 100644 index 0000000000000000000000000000000000000000..f54118fb59b2271a2ff11fd0f83a49f107832a09 GIT binary patch literal 1029 zcmV+g1p51lP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1DZ)hK~!i%?U=u7 z6hRcn7Zxl$NUAH2R36v_QlvL{mCZFN;tBo%HtDaiibW6=K_VOq+C(r|oQ0i@UlhsD?Z-pzP(v%BQ>?#(7}^MOa$&ECxSeVKW0b^~}u#+xXBH&Fm@ zq5$4R0lbLp@M70(a1PGJIXO2q z?Fx6P~1ap5bQz{SVF+1tRxwP=E? zZi91hF3!ohZ9UZJdW#QbB1N$dnPP9e1kT)wCz*Fp1GSjisMV#BLz!r=!1+h!O{PX_c130r?HYLQeowfo;Ff*3r34%SpVMW8+Dxsk zYGfu8+3`$Kd8|Ng&$r)|fC1t2y0q9U(nZ(KWTJVDVcoG4mJY6{tOjcMJG~;!8p#}_ ziJRDNqE-knv(!>Iy09>7A&fkl$e>#|4gQ|vP^+n3y2->$+;3D67KlFnE-PuPjRJKK&{#P zwYimfCbN^44t84!I1b07X01PMOLt5x*Ri9n+j~!NsT5##`J=j%Ouvb(CCr2sH1>gw z#S+5mDzuH}xsZojJ89|Qu|)!o!||wD>t`-W*d~(IYJhNlOGY&S?gymN!TX--o1zF z!%o;mNTSCyb4Vgq6Qh_~Si|n1HL<-~MQ9Ds3Dsc6aV17e5qB>XFnRge|FV{ZGI1Y` zN{B+O+5d2B8M9#ti;;`tS`(w97{6!HHIWS^D5D;GvW;e~&@p#w9J}++ZCs!0=0Ctn zJesjQCx)jnb-s@0-_!#s3~Zu*V@YRV6N!I!P9~Fy{wq#0nM@@9dt#i-CKCT;yPu&< zWMMYXjSSYEJeti>K@DaNWKgSgGcg&;L_$&aie&I8!7~{Tw|ZN-49>y1IH!4x(Ls$a z4J1RGsIhD0NeWjr&}L*42|J#7{5kHR78hMO4G|MH+%|k0U=plD=0^)x!8te==j7b3 zw{8-mCXOrKL;<{s0(cVz@Foi2O%%YJI5NOLb|oUDR~Ut_00000NkvXXu0mjf>Qc^g literal 0 HcmV?d00001 diff --git a/showcase/testing.html b/showcase/testing.html index 8cc177c..bbbbe27 100644 --- a/showcase/testing.html +++ b/showcase/testing.html @@ -12,78 +12,78 @@
    @@ -104,5 +104,36 @@
    + + + + + +
    +
    +

    Primary Callout

    + This is a default callout. +
    +
    +

    Success Callout

    + This is a default callout. +
    +
    +

    Danger Callout

    + This is a default callout. +
    +
    +

    Warning Callout

    + This is a default callout. +
    +
    +

    Info Callout

    + This is a default callout. +
    +
    +

    Secoundary Callout

    + This is a default callout. +
    + \ No newline at end of file