diff options
Diffstat (limited to 'components/checkbox')
-rw-r--r-- | components/checkbox/_checkbox.scss | 66 | ||||
-rw-r--r-- | components/checkbox/checkbox-checked.html | 6 | ||||
-rw-r--r-- | components/checkbox/checkbox-disabled-checked.html | 6 | ||||
-rw-r--r-- | components/checkbox/checkbox-disabled.html | 6 | ||||
-rw-r--r-- | components/checkbox/checkbox-unchecked.html | 6 |
5 files changed, 0 insertions, 90 deletions
diff --git a/components/checkbox/_checkbox.scss b/components/checkbox/_checkbox.scss deleted file mode 100644 index c35c8e0..0000000 --- a/components/checkbox/_checkbox.scss +++ /dev/null @@ -1,66 +0,0 @@ -.sdc-checkbox { - line-height: 14px; - - label { - position: relative; - display: block; - padding-left: 14px; - } - - .sdc-checkbox__input { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - position: absolute; - z-index: -1; - opacity: 0; - - // Checkbox not checked - + .sdc-checkbox__label:before { - display: inline-block; - position: absolute; - left: 0; - top: 0; - content: ""; - width: 14px; - height: 14px; - box-sizing: content-box; - background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23FFFFFF%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); - } - - // Checkbox disabled and not checked - &:disabled { - + .sdc-checkbox__label { - color: $gray; - &:before { - background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22disabled-a%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%22%2F%3E%20%3C%2Fdefs%3E%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%3Cuse%20fill%3D%22%23F2F2F2%22%20xlink%3Ahref%3D%22%23disabled-a%22%2F%3E%20%3Cpath%20stroke%3D%22%23D2D2D2%22%20d%3D%22M2%2C0.5%20C1.17157288%2C0.5%200.5%2C1.17157288%200.5%2C2%20L0.5%2C12%20C0.5%2C12.8284271%201.17157288%2C13.5%202%2C13.5%20L12%2C13.5%20C12.8284271%2C13.5%2013.5%2C12.8284271%2013.5%2C12%20L13.5%2C2%20C13.5%2C1.17157288%2012.8284271%2C0.5%2012%2C0.5%20L2%2C0.5%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E'); - } - } - } - - &:checked { - // Checkbox checked - + .sdc-checkbox__label:before { - background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22%23009fdb%22%3E%3Cpath%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E'); - } - - // Checkbox disabled and checked - &:disabled { - + .sdc-checkbox__label:before { - background: no-repeat url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%2C0%20L12%2C-2.22044605e-16%20C13.1045695%2C5.56104062e-16%2014%2C0.8954305%2014%2C2%20L14%2C12%20C14%2C13.1045695%2013.1045695%2C14%2012%2C14%20L2%2C14%20C0.8954305%2C14%208.94280938e-16%2C13.1045695%20-2.22044605e-16%2C12%20L-2.22044605e-16%2C2%20C-3.57315355e-16%2C0.8954305%200.8954305%2C-1.91384796e-17%202%2C-2.22044605e-16%20Z%20M3.85355339%2C7.54977605%20C3.65829124%2C7.35451391%203.34170876%2C7.35451391%203.14644661%2C7.54977605%20C2.95118446%2C7.7450382%202.95118446%2C8.06162069%203.14644661%2C8.25688283%20L5.71469032%2C10.8251265%20C5.93114093%2C11.0415771%206.28952386%2C11.0144698%206.47095446%2C10.7679244%20L10.8653572%2C4.79638422%20C11.0290275%2C4.57397322%2010.9814087%2C4.26099251%2010.7589977%2C4.09732224%20C10.5365867%2C3.93365198%2010.223606%2C3.98127076%2010.0599357%2C4.20368177%20L6.01038326%2C9.70660592%20L3.85355339%2C7.54977605%20Z%22%2F%3E%3C%2Fsvg%3E'); - } - } - } - - &:not(:disabled) { - + .sdc-checkbox__label { - cursor: pointer; - } - } - } - - .sdc-checkbox__label:not(:empty) { - padding-left: 14px; - @include body-1; - } -} diff --git a/components/checkbox/checkbox-checked.html b/components/checkbox/checkbox-checked.html deleted file mode 100644 index de0c0d8..0000000 --- a/components/checkbox/checkbox-checked.html +++ /dev/null @@ -1,6 +0,0 @@ -<div class="sdc-checkbox"> - <label> - <input type="checkbox" class="sdc-checkbox__input" checked> - <span class="sdc-checkbox__label">This is the checkbox label</span> - </label> -</div> diff --git a/components/checkbox/checkbox-disabled-checked.html b/components/checkbox/checkbox-disabled-checked.html deleted file mode 100644 index 53e77ec..0000000 --- a/components/checkbox/checkbox-disabled-checked.html +++ /dev/null @@ -1,6 +0,0 @@ -<div class="sdc-checkbox"> - <label> - <input type="checkbox" class="sdc-checkbox__input" checked disabled> - <span class="sdc-checkbox__label">This is the checkbox label</span> - </label> -</div> diff --git a/components/checkbox/checkbox-disabled.html b/components/checkbox/checkbox-disabled.html deleted file mode 100644 index 2425218..0000000 --- a/components/checkbox/checkbox-disabled.html +++ /dev/null @@ -1,6 +0,0 @@ -<div class="sdc-checkbox"> - <label> - <input type="checkbox" class="sdc-checkbox__input" disabled> - <span class="sdc-checkbox__label">This is the checkbox label</span> - </label> -</div> diff --git a/components/checkbox/checkbox-unchecked.html b/components/checkbox/checkbox-unchecked.html deleted file mode 100644 index 9cc3d1c..0000000 --- a/components/checkbox/checkbox-unchecked.html +++ /dev/null @@ -1,6 +0,0 @@ -<div class="sdc-checkbox"> - <label> - <input type="checkbox" class="sdc-checkbox__input"> - <span class="sdc-checkbox__label">This is the checkbox label</span> - </label> -</div> |