diff options
Diffstat (limited to 'components/textarea')
| -rw-r--r-- | components/textarea/_textarea.scss | 77 | ||||
| -rw-r--r-- | components/textarea/textarea-disabled.html | 3 | ||||
| -rw-r--r-- | components/textarea/textarea-error.html | 3 | ||||
| -rw-r--r-- | components/textarea/textarea-maxlength.html | 3 | ||||
| -rw-r--r-- | components/textarea/textarea-placeholder.html | 3 | ||||
| -rw-r--r-- | components/textarea/textarea-required.html | 4 | ||||
| -rw-r--r-- | components/textarea/textarea.html | 4 |
7 files changed, 97 insertions, 0 deletions
diff --git a/components/textarea/_textarea.scss b/components/textarea/_textarea.scss new file mode 100644 index 0000000..a666d54 --- /dev/null +++ b/components/textarea/_textarea.scss @@ -0,0 +1,77 @@ +.sdc-textarea { + margin-bottom: 10px; + + .sdc-textarea__label { + margin-bottom: 5px; + display: block; + @include body-3-emphasis; + + &.required::before { + content: '*'; + color: $red; + margin: 0 4px 0 0; + } + } + + .sdc-textarea__textarea { + @include box-sizing; + padding: 0 10px; + width: 100%; + 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; + } + +} diff --git a/components/textarea/textarea-disabled.html b/components/textarea/textarea-disabled.html new file mode 100644 index 0000000..fb040f9 --- /dev/null +++ b/components/textarea/textarea-disabled.html @@ -0,0 +1,3 @@ +<div class="sdc-textarea"> + <textarea class="sdc-textarea__textarea disabled" disabled="disabled"></textarea> +</div> diff --git a/components/textarea/textarea-error.html b/components/textarea/textarea-error.html new file mode 100644 index 0000000..4ac5dae --- /dev/null +++ b/components/textarea/textarea-error.html @@ -0,0 +1,3 @@ +<div class="sdc-textarea"> + <textarea class="sdc-textarea__textarea error"></textarea> +</div> diff --git a/components/textarea/textarea-maxlength.html b/components/textarea/textarea-maxlength.html new file mode 100644 index 0000000..f432838 --- /dev/null +++ b/components/textarea/textarea-maxlength.html @@ -0,0 +1,3 @@ +<div class="sdc-textarea"> + <textarea class="sdc-textarea__textarea" maxlength="5"></textarea> +</div> diff --git a/components/textarea/textarea-placeholder.html b/components/textarea/textarea-placeholder.html new file mode 100644 index 0000000..89dcdc5 --- /dev/null +++ b/components/textarea/textarea-placeholder.html @@ -0,0 +1,3 @@ +<div class="sdc-textarea"> + <textarea class="sdc-textarea__textarea" placeholder="Text..." data-tests-id="customTestId"></textarea> +</div> diff --git a/components/textarea/textarea-required.html b/components/textarea/textarea-required.html new file mode 100644 index 0000000..0f7ed47 --- /dev/null +++ b/components/textarea/textarea-required.html @@ -0,0 +1,4 @@ +<div class="sdc-textarea"> + <label class="sdc-textarea__label required">Please Enter Value</label> + <textarea class="sdc-textarea__textarea"> </textarea> +</div> diff --git a/components/textarea/textarea.html b/components/textarea/textarea.html new file mode 100644 index 0000000..b455dd4 --- /dev/null +++ b/components/textarea/textarea.html @@ -0,0 +1,4 @@ +<div class="sdc-textarea"> + <label class="sdc-textarea__label">Enter text:</label> + <textarea class="sdc-textarea__textarea"></textarea> +</div> |