aboutsummaryrefslogtreecommitdiffstats
path: root/components/radio
diff options
context:
space:
mode:
Diffstat (limited to 'components/radio')
-rw-r--r--components/radio/_radio.scss69
-rw-r--r--components/radio/radio-checked.html4
-rw-r--r--components/radio/radio-disabled-checked.html4
-rw-r--r--components/radio/radio-disabled.html4
-rw-r--r--components/radio/radio-unchecked.html4
5 files changed, 85 insertions, 0 deletions
diff --git a/components/radio/_radio.scss b/components/radio/_radio.scss
new file mode 100644
index 0000000..9c51846
--- /dev/null
+++ b/components/radio/_radio.scss
@@ -0,0 +1,69 @@
+.sdc-radio {
+ line-height: 14px;
+
+ label {
+ position: relative;
+ display: block;
+ padding-left: 14px;
+ }
+
+ .sdc-radio__input {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ position: absolute;
+ z-index: -1;
+ opacity: 0;
+
+ // Radio not checked
+ + .sdc-radio__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%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+
+ // Radio disabled and not checked
+ &:disabled:not(:checked) {
+ + .sdc-radio__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%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C8.35813029%2C0%209.62592397%2C0.386776975%2010.699241%2C1.0561909%20C12.6811805%2C2.29230086%2014%2C4.49213704%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%22%2F%3E%3Cpath%20fill%3D%22%23F2F2F2%22%20d%3D%22M7%2C13%20C10.3137085%2C13%2013%2C10.3137085%2013%2C7%20C13%2C3.6862915%2010.3137085%2C1%207%2C1%20C3.6862915%2C1%201%2C3.6862915%201%2C7%20C1%2C10.3137085%203.6862915%2C13%207%2C13%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+ }
+
+ &:checked {
+ // Radio checked
+ + .sdc-radio__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%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23009fdb%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23009fdb%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+
+ // Radio disabled and checked
+ &:disabled {
+ + .sdc-radio__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%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23d2d2d2%22%20fill-rule%3D%22nonzero%22%20d%3D%22M7%2C14%20C3.13400675%2C14%200%2C10.8659932%200%2C7%20C0%2C3.13400675%203.13400675%2C0%207%2C0%20C10.8659932%2C0%2014%2C3.13400675%2014%2C7%20C14%2C10.8659932%2010.8659932%2C14%207%2C14%20Z%20M7%2C13.1764706%20C10.4111705%2C13.1764706%2013.1764706%2C10.4111705%2013.1764706%2C7%20C13.1764706%2C3.58882949%2010.4111705%2C0.823529412%207%2C0.823529412%20C3.58882949%2C0.823529412%200.823529412%2C3.58882949%200.823529412%2C7%20C0.823529412%2C10.4111705%203.58882949%2C13.1764706%207%2C13.1764706%20Z%22%2F%3E%3Ccircle%20fill%3D%22%23d2d2d2%22%20cx%3D%227%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+ }
+ }
+ }
+
+ &:not(:disabled) {
+ + .sdc-radio__label {
+ cursor: pointer;
+ }
+ }
+
+ &:disabled {
+ + .sdc-radio__label {
+ color: $gray;
+ }
+ }
+ }
+
+ .sdc-radio__label:not(:empty) {
+ padding-left: 14px;
+ @include body-1;
+ }
+}
diff --git a/components/radio/radio-checked.html b/components/radio/radio-checked.html
new file mode 100644
index 0000000..78283b3
--- /dev/null
+++ b/components/radio/radio-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp1" checked class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled-checked.html b/components/radio/radio-disabled-checked.html
new file mode 100644
index 0000000..9ba6f0c
--- /dev/null
+++ b/components/radio/radio-disabled-checked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp3" checked class="sdc-radio__input" value="1" disabled>
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-disabled.html b/components/radio/radio-disabled.html
new file mode 100644
index 0000000..332435f
--- /dev/null
+++ b/components/radio/radio-disabled.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp2" class="sdc-radio__input" value="1" disabled>
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>
diff --git a/components/radio/radio-unchecked.html b/components/radio/radio-unchecked.html
new file mode 100644
index 0000000..6f6a00d
--- /dev/null
+++ b/components/radio/radio-unchecked.html
@@ -0,0 +1,4 @@
+<div class="sdc-radio">
+ <input type="radio" name="grp4" class="sdc-radio__input" value="1">
+ <label class="sdc-radio__label">This is the radio label</label>
+</div>