Permalink
Browse files

feat(textarea): added basic styles for textarea component

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Aug 23, 2016
1 parent b27480c commit 7913cc11890b651c1ba9304a759f7f46c56c3fc8
View
@@ -22,6 +22,8 @@
@import "tile/tile";
@import "tag/tag";
@import "radiobutton/radiobutton";
@import "textarea/textarea";
/** Trumps **/
@import "trumps/hide-mq";
View
No changes.
@@ -0,0 +1,2 @@
<label for="i0" class="textarea__label">Textarea</label>
<textarea rows="4" cols="50" class="textarea"></textarea>
@@ -0,0 +1,2 @@
<label for="i0" class="textarea__label">Textarea</label>
<textarea rows="4" cols="50" class="textarea" placeholder="Start typing..."></textarea>
@@ -0,0 +1,2 @@
<label for="i0" class="textarea__label">Textarea</label>
<textarea disabled rows="4" cols="50" class="textarea"></textarea>
@@ -0,0 +1,3 @@
<label for="i0" class="textarea__label">Textarea</label>
<textarea rows="4" cols="50" class="textarea"></textarea>
<p class="textarea__hint">Inputfield with hint text</p>
View
@@ -0,0 +1,64 @@
@import "../common/variables";
.textarea {
font-family: $mainfont;
appearance: none;
position: relative;
display: inline-block;
box-sizing: border-box;
text-decoration: none;
border: 1px solid $disabledcolor;
border-radius: 3px;
padding-top: 0;
padding-left: 11px;
padding-right: 11px;
font-size: 14px;
line-height: 32px;
line-height: -moz-block-height;
vertical-align: middle;
text-align: left;
overflow: hidden;
color: $gray-700;
resize: none;
}
.textarea__label {
position: relative;
font-size: 12px;
font-weight: normal;
display: block;
padding-bottom: 6px;
}
.textarea::placeholder {
color: $gray-500;
}
.textarea__hint {
font-size: 10px;
color: $gray-500;
padding-top: 6px;
padding-left: 12px;
font-weight: normal;
}
.textarea:hover {
border-color: $gray-460;
cursor: text;
}
.textarea[disabled]:hover {
border-color: $gray-300;
cursor: default;
}
.textarea[disabled] {
background-color: $gray-130;
color: $disabledcolor;
}
.textarea:focus {
outline: none;
box-shadow: 0 0 0 1px $focuscolor;
border-color: $focuscolor;
}

0 comments on commit 7913cc1

Please sign in to comment.