mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 01:47:35 +03:00
normalized placeholder size variants
This commit is contained in:
Kevin Ross
parent
04aee4062e
commit
dab4a87ee7
61
index.html
61
index.html
|
|
@ -385,36 +385,69 @@
|
|||
<h2>Input - floating labels
|
||||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
<div class="form-group form-group-sm has-error">
|
||||
<label for="i4" class="control-label floating-label">Floating label form-group-sm has-error</label>
|
||||
<input type="email" class="form-control input-sm" id="i4">
|
||||
<span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="i4" class="control-label floating-label">Email address form-group-sm</label>
|
||||
<input type="email" class="form-control" id="i4">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i5i" class="control-label floating-label">Email address default size</label>
|
||||
<input type="email" class="form-control" id="i5i">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<label for="i6" class="control-label floating-label">Floating label form-group-lg</label>
|
||||
<label for="i6" class="control-label floating-label">Email address form-group-lg</label>
|
||||
<input type="email" class="form-control" id="i6">
|
||||
<span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<h2>Input - static labels
|
||||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
|
||||
<div class="form-group form-group-sm has-error">
|
||||
<label for="i1" class="control-label">Static label form-group-sm has-error</label>
|
||||
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="si4" class="control-label">Email address form-group-sm</label>
|
||||
<input type="email" class="form-control" id="si4" placeholder="Placeholder">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
||||
<div class="form-group">
|
||||
<label for="si5i" class="control-label">Email address default size</label>
|
||||
<input type="email" class="form-control" id="si5i" placeholder="Placeholder">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<label for="i3" class="control-label">Static label form-group-lg</label>
|
||||
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
|
||||
|
||||
<p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
|
||||
<label for="si6" class="control-label">Email address form-group-lg</label>
|
||||
<input type="email" class="form-control" id="si6" placeholder="Placeholder">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Input -
|
||||
<small>floating label feedback variants</small>
|
||||
</h2>
|
||||
<div class="form-group has-success">
|
||||
<label for="f1" class="control-label floating-label">Email address has-success</label>
|
||||
<input type="email" class="form-control" id="f1">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group has-warning">
|
||||
<label for="f2" class="control-label floating-label">Email address has-warning</label>
|
||||
<input type="email" class="form-control" id="f2">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group has-error">
|
||||
<label for="f3" class="control-label floating-label">Email address has-error</label>
|
||||
<input type="email" class="form-control" id="f3">
|
||||
<span class="help-block hint">Please enter a valid email address</span>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Input - Legacy</h2>
|
||||
<!-- Exercise backwards compatibility without form-group -->
|
||||
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
|
||||
|
|
|
|||
|
|
@ -75,31 +75,82 @@
|
|||
.form-group {
|
||||
position: relative;
|
||||
|
||||
// -----
|
||||
// Labels
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
|
||||
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
|
||||
label.control-label { // static label
|
||||
|
||||
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
|
||||
color: @input-placeholder-color;
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-base; // same as focused size of floating
|
||||
font-weight: normal;
|
||||
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
|
||||
&.floating-label {
|
||||
font-size: @md-input-font-size-base; // as placeholder
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
|
||||
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
|
||||
|
||||
&.is-focused {
|
||||
label.control-label{
|
||||
&.floating-label{
|
||||
font-size: @md-input-label-font-size-base; // 12px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sizing of focused/open/labels
|
||||
&.is-focused,
|
||||
&:not(.is-empty) {
|
||||
label.control-label{
|
||||
&.floating-label {
|
||||
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
||||
font-size: @md-input-label-font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sm
|
||||
&.form-group-sm {
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @md-input-font-size-small;
|
||||
});
|
||||
}
|
||||
|
||||
label.control-label { // static label
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
|
||||
margin: 12px 0 0 0; // sm only
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-small; // static
|
||||
//margin: 12px 0 0 0; // sm only
|
||||
&.floating-label {
|
||||
font-size: @md-input-font-size-small; // as placeholder
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// lg
|
||||
&.form-group-lg {
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @md-input-font-size-large;
|
||||
});
|
||||
}
|
||||
|
||||
label.control-label { // static label
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
|
||||
&.floating-label {
|
||||
font-size: @md-input-font-size-large; // as placeholder (never larger than size-base)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,33 +213,6 @@ select.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
|
||||
label.control-label.floating-label {
|
||||
@label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
|
||||
|
||||
font-size: @md-input-font-size-base; // Input sizes
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
transition: 0.3s ease all;
|
||||
|
||||
.form-group.is-focused & {
|
||||
label.control-label {
|
||||
font-size: @md-input-label-font-size-base; // 12px
|
||||
}
|
||||
}
|
||||
|
||||
// sizing
|
||||
.form-group.is-focused &,
|
||||
.form-group:not(.is-empty) & {
|
||||
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
||||
font-size: @md-input-label-font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-group {
|
||||
.form-control {
|
||||
|
|
|
|||
28
test.html
28
test.html
|
|
@ -31,9 +31,31 @@
|
|||
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2>Input - Legacy</h2>
|
||||
<!-- Exercise backwards compatibility without form-group -->
|
||||
<input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy data-hint attribute on the input">
|
||||
<h2>Input - static labels
|
||||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="i1" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i2" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<label for="i3" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user