summaryrefslogtreecommitdiffstats
path: root/components/radioGroup
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /components/radioGroup
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'components/radioGroup')
-rw-r--r--components/radioGroup/_radioGroup.scss20
-rw-r--r--components/radioGroup/radio-group-disabled.html13
-rw-r--r--components/radioGroup/radio-group-no-title.html12
-rw-r--r--components/radioGroup/radio-group-value.html13
-rw-r--r--components/radioGroup/radio-group.html13
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>