diff options
Diffstat (limited to 'components/input')
| -rw-r--r-- | components/input/_input.scss | 78 | ||||
| -rw-r--r-- | components/input/input-disabled.html | 4 | ||||
| -rw-r--r-- | components/input/input-error.html | 17 | ||||
| -rw-r--r-- | components/input/input-number.html | 6 | ||||
| -rw-r--r-- | components/input/input-placeholder.html | 4 | ||||
| -rw-r--r-- | components/input/input-required.html | 4 | ||||
| -rw-r--r-- | components/input/input-view-only.html | 4 | ||||
| -rw-r--r-- | components/input/input.html | 8 |
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 |