Fix textfield padding to accomodate for errors
* textbox-padding: Add padding to textfield to accomodate floating labels and errorsmaster
commit
2b7ec699eb
|
@ -286,6 +286,7 @@ $input-text-font-size: 16px;
|
|||
$input-text-width: 100%;
|
||||
$input-text-padding: 4px;
|
||||
$input-text-ripple-size: 32px;
|
||||
$input-text-vertical-spacing: 20px;
|
||||
|
||||
$input-text-button-size: 32px;
|
||||
$input-text-floating-label-fontsize: 12px;
|
||||
|
|
|
@ -27,11 +27,12 @@
|
|||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
margin: 0;
|
||||
padding: $input-text-vertical-spacing 0;
|
||||
|
||||
// Align buttons, if used.
|
||||
& .mdl-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: $input-text-vertical-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -64,7 +65,7 @@
|
|||
background: $input-text-font-size;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
|
||||
|
||||
.mdl-textfield.is-focused & {
|
||||
outline: none;
|
||||
}
|
||||
|
@ -89,7 +90,7 @@
|
|||
right: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: $input-text-padding;
|
||||
top: ($input-text-padding + $input-text-vertical-spacing);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
@ -108,7 +109,7 @@
|
|||
.mdl-textfield--floating-label.is-dirty & {
|
||||
color: $input-text-highlight-color;
|
||||
font-size : $input-text-floating-label-fontsize;
|
||||
top: -($input-text-floating-label-fontsize + $input-text-padding);
|
||||
top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
@ -120,7 +121,7 @@
|
|||
// The after label is the colored underline for the TextField.
|
||||
&:after {
|
||||
background-color: $input-text-highlight-color;
|
||||
bottom: 0;
|
||||
bottom: $input-text-vertical-spacing;
|
||||
content: '';
|
||||
height: 2px;
|
||||
left: 45%;
|
||||
|
@ -176,5 +177,7 @@
|
|||
// Thus assume a sensible maximum, and animate to/from that value.
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.mdl-textfield__label:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,17 +32,17 @@
|
|||
<label class="mdl-textfield__label" for="sample3">I'm Disabled</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="sample4" />
|
||||
<label class="mdl-textfield__label" for="sample4">Text Input</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="sample5" />
|
||||
<label class="mdl-textfield__label" for="sample5">Numbers Only</label>
|
||||
<span class="mdl-textfield__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="sample4" />
|
||||
<label class="mdl-textfield__label" for="sample4">Text Input</label>
|
||||
</div>
|
||||
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows= "1" id="sample6" ></textarea>
|
||||
<label class="mdl-textfield__label" for="sample6">Type multiple lines here...</label>
|
||||
|
|
|
@ -23,5 +23,4 @@
|
|||
|
||||
.demo-page--textfield .mdl-textfield {
|
||||
display: block;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue