diff options
Diffstat (limited to 'components/radioGroup')
| -rw-r--r-- | components/radioGroup/_radioGroup.scss | 20 | ||||
| -rw-r--r-- | components/radioGroup/radio-group-disabled.html | 13 | ||||
| -rw-r--r-- | components/radioGroup/radio-group-no-title.html | 12 | ||||
| -rw-r--r-- | components/radioGroup/radio-group-value.html | 13 | ||||
| -rw-r--r-- | components/radioGroup/radio-group.html | 13 |
5 files changed, 71 insertions, 0 deletions
diff --git a/components/radioGroup/_radioGroup.scss b/components/radioGroup/_radioGroup.scss new file mode 100644 index 0000000..6b33a79 --- /dev/null +++ b/components/radioGroup/_radioGroup.scss @@ -0,0 +1,20 @@ +.sdc-radio-group { + .sdc-radio-group__radios { + display: flex; + } + .sdc-radio-group__legend { + @include body-2-emphasis; + display: inline-block; + margin-bottom: 5px; + } + .sdc-radio__label { + @include body-1; + margin-right: 20px; + } + .vertical{ + flex-direction: column; + .sdc-radio{ + margin-bottom: 15px; + } + } +} diff --git a/components/radioGroup/radio-group-disabled.html b/components/radioGroup/radio-group-disabled.html new file mode 100644 index 0000000..3cdedc0 --- /dev/null +++ b/components/radioGroup/radio-group-disabled.html @@ -0,0 +1,13 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group D</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp4" class="sdc-radio__input" value="1" disabled> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp4" class="sdc-radio__input" value="2" disabled> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> diff --git a/components/radioGroup/radio-group-no-title.html b/components/radioGroup/radio-group-no-title.html new file mode 100644 index 0000000..76217fe --- /dev/null +++ b/components/radioGroup/radio-group-no-title.html @@ -0,0 +1,12 @@ +<div class='sdc-radio-group'> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp5" class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp5" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> diff --git a/components/radioGroup/radio-group-value.html b/components/radioGroup/radio-group-value.html new file mode 100644 index 0000000..ac604a6 --- /dev/null +++ b/components/radioGroup/radio-group-value.html @@ -0,0 +1,13 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group B</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp2" checked class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp2" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> diff --git a/components/radioGroup/radio-group.html b/components/radioGroup/radio-group.html new file mode 100644 index 0000000..baa1444 --- /dev/null +++ b/components/radioGroup/radio-group.html @@ -0,0 +1,13 @@ +<div class='sdc-radio-group'> + <label class='sdc-radio-group__legend'>Group C</label> + <div class='sdc-radio-group__radios'> + <div class="sdc-radio"> + <input type="radio" name="grp3" class="sdc-radio__input" value="1"> + <label class="sdc-radio__label">option 1</label> + </div> + <div class="sdc-radio"> + <input type="radio" name="grp3" class="sdc-radio__input" value="2"> + <label class="sdc-radio__label">option 2</label> + </div> + </div> +</div> |