init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>

5 files changed, 144 insertions, 0 deletions

diff --git a/components/checklist/_checklist.scss b/components/checklist/_checklist.scss
new file mode 100644
index 0000000..248993d
--- /dev/null
+++ b/components/checklist/_checklist.scss
@@ -0,0 +1,21 @@
+$space-lines: 14px;
+$padding-for-sub-level: 28px;
+.checkbox-item{
+  margin: $space-lines 0;
+ .sdc-checkbox__label{
+    @include body-2-emphasis;
+  }
+  .semi-checked{
+    .sdc-checkbox__label:before{
+      background: no-repeat url('data:image/svg+xml;utf8,<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M2,0 L12,-2.22044605e-16 C13.1045695,5.56104062e-16 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 8.94280938e-16,13.1045695 -2.22044605e-16,12 L-2.22044605e-16,2 C-3.57315355e-16,0.8954305 0.8954305,-1.91384796e-17 2,-2.22044605e-16 Z" id="path-1"></path><rect id="path-2" x="3" y="6" width="8" height="2" rx="1"></rect></defs><g id="Symbols-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="icons/checkbox/semiselected"><g id="form/checkbox_checked-copy-3"><g id="Rectangle-Copy-2"><use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use><path stroke="#D2D2D2" stroke-width="1" d="M2,0.5 C1.17157288,0.5 0.5,1.17157288 0.5,2 L0.5,12 C0.5,12.8284271 1.17157288,13.5 2,13.5 L12,13.5 C12.8284271,13.5 13.5,12.8284271 13.5,12 L13.5,2 C13.5,1.17157288 12.8284271,0.5 12,0.5 L2,0.5 Z"></path></g></g><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Mask" fill="#009FDB" xlink:href="#path-2"></use></g></g></svg>');
+    }
+  }
+}
+.checkbox-sublist{
+  padding-left: $padding-for-sub-level;
+  .checkbox-item{
+    .sdc-checkbox__label{
+      @include body-2;
+    }
+  }
+}
diff --git a/components/checklist/checklist-with-checked-items.html b/components/checklist/checklist-with-checked-items.html
new file mode 100644
index 0000000..e1adbd7
--- /dev/null
+++ b/components/checklist/checklist-with-checked-items.html
@@ -0,0 +1,24 @@
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox" checked>
+            <label class="sdc-checkbox__label">apple</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">banana</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox" checked>
+            <label class="sdc-checkbox__label">orange</label>
+        </div>
+    </div>
+</div>
diff --git a/components/checklist/checklist-with-disabled-items.html b/components/checklist/checklist-with-disabled-items.html
new file mode 100644
index 0000000..f001ec1
--- /dev/null
+++ b/components/checklist/checklist-with-disabled-items.html
@@ -0,0 +1,25 @@
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox" disabled>
+            <label class="sdc-checkbox__label">apple</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox" disabled>
+            <label class="sdc-checkbox__label">banana</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">orange</label>
+        </div>
+    </div>
+</div>
+
diff --git a/components/checklist/multi-levels-checklist.html b/components/checklist/multi-levels-checklist.html
new file mode 100644
index 0000000..9aa136e
--- /dev/null
+++ b/components/checklist/multi-levels-checklist.html
@@ -0,0 +1,50 @@
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">apple</label>
+        </div>
+    </div>
+    <div class="checkbox-sublist">
+        <div>
+            <div class="checkbox-item">
+                <div class="sdc-checkbox">
+                    <input class="sdc-checkbox__input" type="checkbox">
+                    <label class="sdc-checkbox__label">red</label>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="checkbox-item">
+                <div class="sdc-checkbox">
+                    <input class="sdc-checkbox__input" type="checkbox">
+                    <label class="sdc-checkbox__label">green</label>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="checkbox-item">
+                <div class="sdc-checkbox">
+                    <input class="sdc-checkbox__input" type="checkbox">
+                    <label class="sdc-checkbox__label">yellow</label>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">banana</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">orange</label>
+        </div>
+    </div>
+</div>
diff --git a/components/checklist/simple-checklist.html b/components/checklist/simple-checklist.html
new file mode 100644
index 0000000..1fe55da
--- /dev/null
+++ b/components/checklist/simple-checklist.html
@@ -0,0 +1,24 @@
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">apple</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">banana</label>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="checkbox-item">
+        <div class="sdc-checkbox">
+            <input class="sdc-checkbox__input" type="checkbox">
+            <label class="sdc-checkbox__label">orange</label>
+        </div>
+    </div>
+</div>