Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP

8 files changed, 125 insertions, 0 deletions

diff --git a/components/input/_input.scss b/components/input/_input.scss
new file mode 100644
index 0000000..a84d312
--- /dev/null
+++ b/components/input/_input.scss
@@ -0,0 +1,78 @@
+.sdc-input {
+  margin-bottom: 10px;
+
+  .sdc-input__label {
+    margin-bottom: 5px;
+    display: block;
+    @include body-3-emphasis;
+
+    &.required::before {
+      content: '*';
+      color: $red;
+      margin: 0 4px 0 0;
+    }
+  }
+
+  .sdc-input__input {
+    @include box-sizing;
+    padding: 0 10px;
+    height: 38px;
+    width: 100%;//415px;
+    border: solid 1px $light-gray;
+    border-radius:2px;
+    color: $dark-gray;
+
+    &.error, &.error:focus, &.error:disabled  {
+      border: solid 1px $red;
+      color: $red;
+      outline: none;
+    }
+
+    &:read-only{
+      border: none;
+      outline: none;
+      color: $text-black
+    }
+    &:-moz-read-only { /* For Firefox */
+      border: none;
+      outline: none;
+      color: $text-black
+    }
+
+    &:focus {
+      border-color: $blue;
+      outline: 0 none;
+      color: $text-black;
+    }
+
+    &:disabled {
+      background: $light-silver;
+      color: $gray;
+    }
+
+    &::-webkit-input-placeholder /* Chrome/Opera/Safari */  {
+      color: $gray;
+      @include base-font-italic;
+    }
+    &::-moz-placeholder  /* Firefox 19+ */  {
+      color: $gray;
+      @include base-font-italic;
+    }
+    &:-moz-placeholder  /* Firefox 18- */  {
+      color: $gray;
+      @include base-font-italic;
+    }
+    &:-ms-input-placeholder  /* IE 10+ */
+    {
+      color: $gray;
+      @include base-font-italic;
+    }
+  }
+
+  .sdc-label__error{
+    margin-top: 2px;
+    margin-left: 2px;
+    @include body-3;
+  }
+
+}
\ No newline at end of file
diff --git a/components/input/input-disabled.html b/components/input/input-disabled.html
new file mode 100644
index 0000000..bea21b4
--- /dev/null
+++ b/components/input/input-disabled.html
@@ -0,0 +1,4 @@
+<div class="sdc-input __disabled">
+    <label class="sdc-input__label">I am a label</label>
+    <input class="sdc-input__input" type="text" disabled value="Default"/>
+</div>
diff --git a/components/input/input-error.html b/components/input/input-error.html
new file mode 100644
index 0000000..aafee55
--- /dev/null
+++ b/components/input/input-error.html
@@ -0,0 +1,17 @@
+<div class="sdc-input">
+    <label class="sdc-input__label">I am a label</label>
+    <input class="sdc-input__input error" type="text" value="Default"/>
+    <div class="sdc-label__error ">
+        <div class="svg-icon-wrapper __negative">
+            <svg class="svg-icon __exclamationTriangleFull __negative" version="1.1" id="exclamation-triangle-full_icon" x="0px" y="0px" viewBox="0 0 19.9 18" style="enable-background:new 0 0 19.9 18;" xml:space="preserve">
+                <path d="M19.6,14.3L12,1.3c-0.3-0.6-0.8-1-1.4-1.2C10-0.1,9.3,0,8.7,0.3c-0.4,0.3-0.6,0.6-0.9,1l-7.6,13c-0.3,0.5-0.4,1.2-0.2,1.8
+                c0.2,0.6,0.6,1.1,1.1,1.4C1.6,17.8,1.9,18,2.4,18h15.1c1.3,0,2.4-1.1,2.4-2.4C19.9,15.1,19.8,14.7,19.6,14.3z M10.5,14.2
+                c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,14.2z M10.5,9.9c0,0.3-0.2,0.5-0.5,0.5
+                s-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5L10.5,9.9z">
+                </path>
+              </svg>
+            <span class="svg-icon-label __negative">This is the error message.
+             </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/components/input/input-number.html b/components/input/input-number.html
new file mode 100644
index 0000000..59ef93c
--- /dev/null
+++ b/components/input/input-number.html
@@ -0,0 +1,6 @@
+<div class="sdc-input">
+    <label class="sdc-input__label">I am a label</label>
+    <div>
+        <input class="sdc-input__input" type="number"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/components/input/input-placeholder.html b/components/input/input-placeholder.html
new file mode 100644
index 0000000..b07d75d
--- /dev/null
+++ b/components/input/input-placeholder.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+    <label class="sdc-input__label">I am a label</label>
+    <input class="sdc-input__input" placeholder="Write Here..." type="text"/>
+</div>
diff --git a/components/input/input-required.html b/components/input/input-required.html
new file mode 100644
index 0000000..f9dbb16
--- /dev/null
+++ b/components/input/input-required.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+    <label class="sdc-input__label required">I am a label</label>
+    <input class="sdc-input__input" value="Default" type="text"/>
+</div>
diff --git a/components/input/input-view-only.html b/components/input/input-view-only.html
new file mode 100644
index 0000000..4381b22
--- /dev/null
+++ b/components/input/input-view-only.html
@@ -0,0 +1,4 @@
+<div class="sdc-input">
+    <label class="sdc-input__label">I am a label</label>
+    <input class="sdc-input__input view-only" type="text" value="Default"/>
+</div>
\ No newline at end of file
diff --git a/components/input/input.html b/components/input/input.html
new file mode 100644
index 0000000..ef2ba61
--- /dev/null
+++ b/components/input/input.html
@@ -0,0 +1,8 @@
+<div class="sdc-input">
+    <label class="sdc-input__label">I am a label</label>
+    <input
+            class="sdc-input__input"
+            value="Default"
+            type="text"
+    />
+</div>
\ No newline at end of file