Addy Osmani
commit
f3508e74a6
|
|
@ -2,46 +2,58 @@
|
|||
@import "../animation/animation";
|
||||
@import "../ripple/ripple";
|
||||
|
||||
$textfieldBackgroundColor: transparent;
|
||||
$textfieldLabelColor: rgba(0, 0, 0, 0.26);
|
||||
$textfieldBottomBorderColor: rgba(0, 0, 0, 0.12);
|
||||
$textfieldHighlightColor: nth($primaryPalette, 6);
|
||||
$textfieldErrorColor: nth($paletteRed, 7);
|
||||
$textfieldDisabledColor: $textfieldBottomBorderColor;
|
||||
$input-text-font-size: 16px;
|
||||
$input-text-width: 100%;
|
||||
$input-text-padding: 4px;
|
||||
$input-text-ripple-size: 32px;
|
||||
|
||||
$textfieldFontSize: 16px;
|
||||
$textfieldWidth: 100%;
|
||||
$input-text-background-color: transparent;
|
||||
$input-text-label-color: rgba(0, 0, 0, 0.26);
|
||||
$input-text-bottom-border-color: rgba(0, 0, 0, 0.12);
|
||||
$input-text-highlight-color: nth($primaryPalette, 6);
|
||||
$input-text-disabled-color: $input-text-bottom-border-color;
|
||||
$input-text-error-color: nth($paletteRed, 7);
|
||||
|
||||
$inputPadding: 4px;
|
||||
$floatingLabelFontSize: 12px;
|
||||
$input-text-floating-label-fontsize: 12px;
|
||||
$input-text-expandable-icon-dim: 24px;
|
||||
$input-text-expandable-search-icon-color: rgba(0, 0, 0, 0.45);
|
||||
$input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
|
||||
|
||||
$expandableIconDim: 24px;
|
||||
$expandableSearchIconColor: rgba(0, 0, 0, 0.45);
|
||||
$expandableSearchIconHighlightColor: $textfieldHighlightColor;
|
||||
.wsk-input {
|
||||
margin : 20px 0;
|
||||
position: relative;
|
||||
width : 300px;
|
||||
}
|
||||
|
||||
$rippleSize: 32px;
|
||||
.wsk-input--right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.TextField {
|
||||
.wsk-input--large {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wsk-textfield {
|
||||
border : none;
|
||||
border-bottom: 1px solid $textfieldBottomBorderColor;
|
||||
border-bottom: 1px solid $input-text-bottom-border-color;
|
||||
display : block;
|
||||
font-size : $textfieldFontSize;
|
||||
font-size : $input-text-font-size;
|
||||
margin : 0;
|
||||
padding : $inputPadding 0;
|
||||
width : $textfieldWidth;
|
||||
background : $textfieldBackgroundColor;
|
||||
padding : $input-text-padding 0;
|
||||
width : $input-text-width;
|
||||
background : $input-text-font-size;
|
||||
text-align : left;
|
||||
}
|
||||
|
||||
.TextField ~ label {
|
||||
.wsk-textfield ~ .wsk-label {
|
||||
bottom : 0;
|
||||
color : $textfieldLabelColor;
|
||||
font-size : $textfieldFontSize;
|
||||
color : $input-text-label-color;
|
||||
font-size : $input-text-font-size;
|
||||
left : 0;
|
||||
right : 0;
|
||||
pointer-events: none;
|
||||
position : absolute;
|
||||
top : $inputPadding;
|
||||
top : $input-text-padding;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
white-space : nowrap;
|
||||
|
|
@ -49,8 +61,8 @@ $rippleSize: 32px;
|
|||
}
|
||||
|
||||
/** The after label is the colored underline for the TextField **/
|
||||
.TextField ~ label:after {
|
||||
background-color : $textfieldHighlightColor;
|
||||
.wsk-textfield ~ .wsk-label:after {
|
||||
background-color : $input-text-highlight-color;
|
||||
bottom : 0;
|
||||
content : '';
|
||||
height : 2px;
|
||||
|
|
@ -62,147 +74,148 @@ $rippleSize: 32px;
|
|||
}
|
||||
|
||||
/** TextField Focus Styles **/
|
||||
.TextField:focus {
|
||||
.wsk-textfield:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.TextField:focus ~ label:after {
|
||||
.wsk-textfield:focus ~ .wsk-label:after {
|
||||
left : 0;
|
||||
visibility: visible;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
/** TextField Invalid Styles **/
|
||||
.TextField:invalid {
|
||||
border-color: $textfieldErrorColor;
|
||||
.wsk-textfield:invalid {
|
||||
border-color: $input-text-error-color;
|
||||
box-shadow : none;
|
||||
}
|
||||
|
||||
.TextField:invalid ~label:after {
|
||||
background-color: $textfieldErrorColor;
|
||||
.wsk-textfield:invalid ~ .wsk-label:after {
|
||||
background-color: $input-text-error-color;
|
||||
}
|
||||
|
||||
/** TextField Error **/
|
||||
.TextField ~ .error {
|
||||
color : $textfieldErrorColor;
|
||||
.wsk-textfield ~ .wsk-input__error {
|
||||
color : $input-text-error-color;
|
||||
position : absolute;
|
||||
font-size : 12px;
|
||||
margin-top: 3px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.TextField:invalid ~ .error {
|
||||
.wsk-textfield:invalid ~ .wsk-input__error {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.TextField.dirty ~ label {
|
||||
.wsk-textfield.is-dirty ~ .wsk-label {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/** Floating Label */
|
||||
.TextField-floatingLabel ~label {
|
||||
.wsk-textfield--floating-label ~ .wsk-label {
|
||||
@include material-animation-default();
|
||||
}
|
||||
|
||||
.TextField-floatingLabel:focus ~ label,
|
||||
.TextField-floatingLabel.dirty ~ label {
|
||||
color : $textfieldHighlightColor;
|
||||
font-size : $floatingLabelFontSize;
|
||||
top : -($floatingLabelFontSize+$inputPadding);
|
||||
.wsk-textfield--floating-label:focus ~ .wsk-label,
|
||||
.wsk-textfield--floating-label.is-dirty ~ .wsk-label {
|
||||
color : $input-text-highlight-color;
|
||||
font-size : $input-text-floating-label-fontsize;
|
||||
top : -($input-text-floating-label-fontsize+$input-text-padding);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.TextField-floatingLabel:invalid ~ label {
|
||||
color : $textfieldErrorColor;
|
||||
.wsk-textfield--floating-label:invalid ~ .wsk-label {
|
||||
color : $input-text-error-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/** Expandable Icon/Holder */
|
||||
.ExpandableHolder {
|
||||
.wsk-input__expandable-holder{
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
|
||||
.TextField {
|
||||
@include material-animation-default();
|
||||
display : inline-block;
|
||||
|
||||
// Safari (possibly others) need to be convinced that this field is actually
|
||||
// visible, otherwise it cannot be tabbed to nor focused via a <label>.
|
||||
// TODO: In some cases (Retina displays), this is big enough to render the
|
||||
// inner element :(
|
||||
max-width: 0.1px;
|
||||
|
||||
&:focus,
|
||||
&.dirty {
|
||||
// This is an unforunate hack. Animating between widths in percent (%)
|
||||
// in many browsers (Chrome, Firefox) only animates the inner visual style
|
||||
// of the input - the outer bounding box still 'jumps'.
|
||||
// Thus assume a sensible maximum, and animate to/from that value.
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ExpandableIcon {
|
||||
.wsk-input__expandable-holder .wsk-textfield {
|
||||
@include material-animation-default();
|
||||
display : inline-block;
|
||||
|
||||
// Safari (possibly others) need to be convinced that this field is actually
|
||||
// visible, otherwise it cannot be tabbed to nor focused via a <label>.
|
||||
// TODO: In some cases (Retina displays), this is big enough to render the
|
||||
// inner element :(
|
||||
max-width: 0.1px;
|
||||
}
|
||||
|
||||
.wsk-input__expandable-holder .wsk-textfield:focus,
|
||||
.wsk-input__expandable-holder .wsk-textfield .is-dirty {
|
||||
// This is an unforunate hack. Animating between widths in percent (%)
|
||||
// in many browsers (Chrome, Firefox) only animates the inner visual style
|
||||
// of the input - the outer bounding box still 'jumps'.
|
||||
// Thus assume a sensible maximum, and animate to/from that value.
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.wsk-textfield-expandable-icon {
|
||||
display : inline-block;
|
||||
width : $expandableIconDim;
|
||||
height : $expandableIconDim;
|
||||
width : $input-text-expandable-icon-dim;
|
||||
height : $input-text-expandable-icon-dim;
|
||||
text-align : center;
|
||||
border-color: $expandableSearchIconColor; // inherits to .IconSearch
|
||||
border-color: $input-text-expandable-search-icon-color; // inherits to .wsk-textfield-expandable-icon-search
|
||||
position : relative;
|
||||
|
||||
&:hover {
|
||||
border-color: $expandableSearchIconHighlightColor;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.IconSearch {
|
||||
border : 2px solid #000;
|
||||
border-color : inherit;
|
||||
border-radius : 100px;
|
||||
position : relative;
|
||||
box-sizing : border-box;
|
||||
width : 10px;
|
||||
height : 10px;
|
||||
display : inline-block;
|
||||
margin : 1px 4px 4px 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.IconSearch::after {
|
||||
content : '';
|
||||
transform : rotate(-45deg);
|
||||
width : 0;
|
||||
border-left : 2px solid #000;
|
||||
border-color: inherit;
|
||||
height : 5px;
|
||||
position : absolute;
|
||||
display : inline-block;
|
||||
bottom : -5px;
|
||||
right : -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.ExpandableIcon-rippleContainer {
|
||||
.wsk-textfield-expandable-icon:hover {
|
||||
border-color: $input-text-expandable-search-icon-highlight-color;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.wsk-textfield-expandable-icon .wsk-textfield-expandable-icon-search {
|
||||
border : 2px solid #000;
|
||||
border-color : inherit;
|
||||
border-radius : 100px;
|
||||
position : relative;
|
||||
box-sizing : border-box;
|
||||
width : 10px;
|
||||
height : 10px;
|
||||
display : inline-block;
|
||||
margin : 1px 4px 4px 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wsk-textfield-expandable-icon .wsk-textfield-expandable-icon-search::after {
|
||||
content : '';
|
||||
transform : rotate(-45deg);
|
||||
width : 0;
|
||||
border-left : 2px solid #000;
|
||||
border-color: inherit;
|
||||
height : 5px;
|
||||
position : absolute;
|
||||
display : inline-block;
|
||||
bottom : -5px;
|
||||
right : -3px;
|
||||
}
|
||||
|
||||
.wsk-textfield-expandable-icon__ripple__container {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: -((($rippleSize - $expandableIconDim) / 2) - 0px);
|
||||
left: -(($rippleSize - $expandableIconDim) / 2);
|
||||
top: -((($input-text-ripple-size - $input-text-expandable-icon-dim) / 2) - 0px);
|
||||
left: -(($input-text-ripple-size - $input-text-expandable-icon-dim) / 2);
|
||||
|
||||
box-sizing: border-box;
|
||||
width: $rippleSize;
|
||||
height: $rippleSize;
|
||||
width: $input-text-ripple-size;
|
||||
height: $input-text-ripple-size;
|
||||
border-radius: 50%;
|
||||
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
}
|
||||
|
||||
.ExpandableIcon-rippleContainer .Ripple {
|
||||
background: $expandableSearchIconHighlightColor;
|
||||
.wsk-textfield-expandable-icon__ripple__container .Ripple {
|
||||
background: $input-text-expandable-search-icon-highlight-color;
|
||||
}
|
||||
|
||||
/** Disabled Styling **/
|
||||
.TextField[disabled] {
|
||||
.wsk-textfield[disabled] {
|
||||
background-color: transparent;
|
||||
border-bottom : 1px dashed $textfieldDisabledColor;
|
||||
border-bottom : 1px dashed $input-text-disabled-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Textfield</title>
|
||||
<title>wsk-textfield</title>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
|
|
@ -16,80 +16,80 @@
|
|||
|
||||
<div class="preview-block">
|
||||
<form action="#">
|
||||
<div class="input-container">
|
||||
<input class="TextField" type="text" name="sample" />
|
||||
<label for="sample">Type Something...</label>
|
||||
<div class="wsk-input">
|
||||
<input class="wsk-textfield wsk-js-textfield" type="text" name="sample" />
|
||||
<label class="wsk-label" for="sample">Type Something...</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<input class="TextField" type="text" pattern="[0-9]*" name="sample" />
|
||||
<label for="sample">Numbers Only</label>
|
||||
<span class="error">Input is not a number!</span>
|
||||
<div class="wsk-input">
|
||||
<input class="wsk-textfield wsk-js-textfield" type="text" pattern="[0-9]*" name="sample" />
|
||||
<label class="wsk-label" for="sample">Numbers Only</label>
|
||||
<span class="wsk-input__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<input class="TextField" type="text" disabled name="sample" />
|
||||
<label for="sample">I'm Disabled</label>
|
||||
<div class="wsk-input">
|
||||
<input class="wsk-textfield wsk-js-textfield" type="text" disabled name="sample" />
|
||||
<label class="wsk-label" class="wsk-label" for="sample">I'm Disabled</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<input class="TextField TextField-floatingLabel" type="text" name="sample" />
|
||||
<div class="wsk-input">
|
||||
<input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" name="sample" />
|
||||
<label for="sample">Text Input</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<input class="TextField TextField-floatingLabel" type="text" pattern="[0-9]*" name="sample" />
|
||||
<label for="sample">Numbers Only</label>
|
||||
<span class="error">Input is not a number!</span>
|
||||
<div class="wsk-input">
|
||||
<input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" pattern="[0-9]*" name="sample" />
|
||||
<label class="wsk-label" for="sample">Numbers Only</label>
|
||||
<span class="wsk-input__error">Input is not a number!</span>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<textarea class="TextField" type="text" rows= "1" name="sample" ></textarea>
|
||||
<label for="sample">Type multiple lines here...</label>
|
||||
<div class="wsk-input">
|
||||
<textarea class="wsk-textfield wsk-js-textfield" type="text" rows= "1" name="sample" ></textarea>
|
||||
<label class="wsk-label" for="sample">Type multiple lines here...</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<textarea class="TextField" type="text" rows="3" name="sample" ></textarea>
|
||||
<label for="sample">This input is 3 rows high</label>
|
||||
<div class="wsk-input">
|
||||
<textarea class="wsk-textfield wsk-js-textfield" type="text" rows="3" name="sample" ></textarea>
|
||||
<label class="wsk-label" for="sample">This input is 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<textarea class="TextField" type="text" maxrows="3" rows="1" name="sample" ></textarea>
|
||||
<label for="sample">This input is at most 3 rows high</label>
|
||||
<div class="wsk-input">
|
||||
<textarea class="wsk-textfield wsk-js-textfield" type="text" maxrows="3" rows="1" name="sample" ></textarea>
|
||||
<label class="wsk-label" for="sample">This input is at most 3 rows high</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<textarea class="TextField TextField-floatingLabel" type="text" rows= "1" name="sample" ></textarea>
|
||||
<label for="sample">Multiple lines and a floating label</label>
|
||||
<div class="wsk-input">
|
||||
<textarea class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" rows= "1" name="sample" ></textarea>
|
||||
<label class="wsk-label" for="sample">Multiple lines and a floating label</label>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<label class="ExpandableIcon" for="sample-expandable">
|
||||
<span class="IconSearch"></span>
|
||||
<div class="wsk-input">
|
||||
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expandable">
|
||||
<span class="wsk-textfield-expandable-icon-search"></span>
|
||||
</label>
|
||||
<div class="ExpandableHolder">
|
||||
<input class="TextField TextField-expandable" type="text" name="sample" id="sample-expandable" />
|
||||
<label for="sample">Expandable Input</label>
|
||||
<div class="wsk-input__expandable-holder">
|
||||
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable" type="text" name="sample" id="sample-expandable" />
|
||||
<label class="wsk-label" for="sample">Expandable Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<label class="ExpandableIcon" for="sample-expandable-floating">
|
||||
<span class="IconSearch"></span>
|
||||
<div class="wsk-input">
|
||||
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expandable-floating">
|
||||
<span class="wsk-textfield-expandable-icon-search"></span>
|
||||
</label>
|
||||
<div class="ExpandableHolder">
|
||||
<input class="TextField TextField-expandable TextField-floatingLabel" type="text" name="sample" id="sample-expandable-floating" />
|
||||
<label for="sample">Expandable & Floating Input</label>
|
||||
<div class="wsk-input__expandable-holder">
|
||||
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label" type="text" name="sample" id="sample-expandable-floating" />
|
||||
<label class="wsk-label" for="sample">Expandable & Floating Input</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-container right large">
|
||||
<div class="wsk-input wsk-input--right wsk-input--large">
|
||||
Right/No Label:
|
||||
<label class="ExpandableIcon" for="sample-expclean">
|
||||
<span class="IconSearch"></span>
|
||||
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expclean">
|
||||
<span class="wsk-textfield-expandable-icon-search"></span>
|
||||
</label>
|
||||
<div class="ExpandableHolder">
|
||||
<input class="TextField TextField-expandable" type="text" name="sample" id="sample-expclean" />
|
||||
<div class="wsk-input__expandable-holder">
|
||||
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable" type="text" name="sample" id="sample-expclean" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,7 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "_textfield";
|
||||
|
||||
form div.input-container {
|
||||
margin : 20px 0;
|
||||
position: relative;
|
||||
width : 300px;
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
&.large {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ function TextField(element) {
|
|||
|
||||
this.onInputChange = function(evt) {
|
||||
if (evt.target.value && evt.target.value.length > 0) {
|
||||
evt.target.classList.add('dirty');
|
||||
evt.target.classList.add('is-dirty');
|
||||
} else {
|
||||
evt.target.classList.remove('dirty');
|
||||
evt.target.classList.remove('is-dirty');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ function ExpandableIcon(iconElement) {
|
|||
var container = document.createElement('span');
|
||||
iconElement.appendChild(container);
|
||||
|
||||
container.classList.add('ExpandableIcon-rippleContainer');
|
||||
container.classList.add('input__expandable__icon__ripple__container');
|
||||
container.classList.add('RippleEffect');
|
||||
container.classList.add('RippleEffect--recentering');
|
||||
|
||||
|
|
@ -55,12 +55,12 @@ function ExpandableIcon(iconElement) {
|
|||
|
||||
window.addEventListener('load', function() {
|
||||
var i;
|
||||
var inputs = document.querySelectorAll('.TextField');
|
||||
var inputs = document.querySelectorAll('.wsk-js-textfield');
|
||||
for (i = 0; i < inputs.length; i++) {
|
||||
var input = inputs[i];
|
||||
new TextField(input);
|
||||
}
|
||||
var expandableIcons = document.querySelectorAll('.ExpandableIcon');
|
||||
var expandableIcons = document.querySelectorAll('.wsk-textfield-expandable-icon');
|
||||
for (i = 0; i < expandableIcons.length; ++i) {
|
||||
var expandableIcon = expandableIcons[i];
|
||||
new ExpandableIcon(expandableIcon);
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ gulp.task('serve', ['styles'], function() {
|
|||
|
||||
gulp.watch(['app/**/**/**/*.html'], reload);
|
||||
gulp.watch(['app/**/**/**/*.{scss,css}'], ['styles', reload]);
|
||||
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
|
||||
gulp.watch(['app/scripts/**/*.js','app/styleguide/**/*.js'], ['jshint']);
|
||||
gulp.watch(['app/images/**/*'], reload);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue