Permalink
Browse files

fix(hint for inputfield and textarea): fixed hint styles and added ic…

…on for input field
  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Sep 2, 2016
1 parent f6440f5 commit 143cc477c2f6ab69a67f891b6e34f37544e3ea2e
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.Drop_x0020_Shadow{fill:none;}
.Outer_x0020_Glow_x0020_5_x0020_pt{fill:none;}
.Blue_x0020_Neon{fill:none;stroke:#8AACDA;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.Chrome_x0020_Highlight{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.3629;stroke-miterlimit:1;}
.Jive_GS{fill:#FFDD00;}
.Alyssa_GS{fill:#A6D0E4;}
.st0{fill:#FFFFFF;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="4.489659e-011" y2="-1">
<stop offset="0" style="stop-color:#656565"/>
<stop offset="0.618" style="stop-color:#1B1B1B"/>
<stop offset="0.6292" style="stop-color:#545454"/>
<stop offset="0.9831" style="stop-color:#3E3E3E"/>
</linearGradient>
<g>
<g>
<path class="st0" d="M75.8,327.8h37.7V185.2H75.8c-5.4,0-9.8,7.7-9.8,12.5v127C66,329.6,70.4,327.8,75.8,327.8z"/>
<path class="st0" d="M436.2,185.2h-204v142.5h204c5.4,0,9.8,1.8,9.8-3v-127C446.1,192.9,441.7,185.2,436.2,185.2z"/>
</g>
<polygon class="st0" points="184.8,146.6 184.8,146.2 185.8,137.7 232.3,137.7 232.3,114 178.7,114 169.9,114 160.6,114 151.8,114
89.7,114 89.7,137.7 144.7,137.7 161,145.8 161,146.6 161,375.9 161,376.3 144.7,375.3 89.7,375.3 89.7,399 151.8,399 160.6,399
169.9,399 178.7,399 232.3,399 232.3,375.3 185.8,375.3 184.8,376.8 184.8,375.9 "/>
</g>
</svg>
View
@@ -1,9 +1,16 @@
@import "../common/variables";
.hint {
font-size: 10px;
color: $gray-500;
font-family: $mainfont;
text-decoration: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
white-space: normal;
padding-top: 6px;
padding-left: 12px;
font-size: 12px;
color: $gray-500;
font-weight: normal;
width: 100%;
}
@@ -22,10 +22,14 @@
white-space: nowrap;
text-align: left;
overflow: hidden;
width: 500px;
width: 600px;
color: $gray-700;
}
.inputfield--hint {
width: 600px;
}
.inputfield__label {
position: relative;
font-size: 12px;
@@ -1,3 +1,5 @@
<label for="i9" class="inputfield__label">Inputfield with hint text</label>
<input type="text" class="inputfield" id="i9"/>
<p class="inputfield__hint">Inputfield with hint text</p>
<div class=inputfield--hint>
<label for="i9" class="inputfield__label">Inputfield with hint text</label>
<input type="text" class="inputfield" id="i9"/>
<p class="hint">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
@@ -1,3 +1,6 @@
<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>
<div class="textarea--hint">
<label for="i0" class="textarea__label">Textarea</label>
<textarea rows="4" cols="50" class="textarea"></textarea>
<p class="hint">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
@@ -1,4 +1,5 @@
@import "../common/variables";
@import "../common/hint";
.textarea {
font-family: $mainfont;
@@ -15,11 +16,16 @@
font-size: 14px;
line-height: 32px;
line-height: -moz-block-height;
vertical-align: middle;
vertical-align: top;
text-align: left;
overflow: hidden;
color: $gray-700;
resize: none;
width: 600px;
}
.textarea--hint {
width: 600px;
}
.textarea__label {

0 comments on commit 143cc47

Please sign in to comment.