summaryrefslogtreecommitdiffstats
path: root/components/input
diff options
context:
space:
mode:
Diffstat (limited to 'components/input')
-rw-r--r--components/input/_input.scss78
-rw-r--r--components/input/input-disabled.html4
-rw-r--r--components/input/input-error.html17
-rw-r--r--components/input/input-number.html6
-rw-r--r--components/input/input-placeholder.html4
-rw-r--r--components/input/input-required.html4
-rw-r--r--components/input/input-view-only.html4
-rw-r--r--components/input/input.html8
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