222 lines
5.2 KiB
SCSS
222 lines
5.2 KiB
SCSS
/// pseudo-input.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
|
|
/// Component: pseudo-input
|
|
/// This component mimics the presentation of form fields according to Google's
|
|
/// Material Design specs (www.google.com/design/spec/components/text-fields.html)
|
|
/// It's used in message headers but could --and should-- be reused
|
|
/// The pseudo-input-container element serves as a... container for it's two children:
|
|
/// -label and -input-field
|
|
///
|
|
/// Typical use:
|
|
/// <div class="pseudo-input-container">
|
|
/// <label class="pseudo-input-label">Some text</label>
|
|
/// <p class="pseudo-input-field">Other input-like text</p>
|
|
/// </div>
|
|
///
|
|
/// ----------------------------------------------------------------------------
|
|
|
|
// md-input variables we might use
|
|
// ----------------------------------------------------------------------------
|
|
$input-container-padding: 2px !default;
|
|
|
|
$input-label-default-offset: 24px !default;
|
|
$input-label-default-scale: 1.0 !default;
|
|
$input-label-float-offset: 4px !default;
|
|
$input-label-float-scale: 0.75 !default;
|
|
|
|
$input-border-width-default: 1px !default;
|
|
$input-border-width-focused: 2px !default;
|
|
$input-line-height: 26px !default;
|
|
$input-padding-top: 2px !default;
|
|
|
|
.pseudo-input-container {
|
|
display: block; // Should be (reset to ?) a plain block element
|
|
padding: 0 2px;
|
|
}
|
|
.sg-search-field-container {
|
|
margin-bottom: 12px;
|
|
color: white;
|
|
label {
|
|
color: inherit;
|
|
}
|
|
input {
|
|
color: inherit;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.pseudo-input-label,
|
|
.button-label {
|
|
display: inline-block;
|
|
margin-top: $mg;
|
|
color: $colorGray;
|
|
font-weight: $sg-font-regular;
|
|
font-size: sg-size(caption);
|
|
line-height: $sg-line-height-1;
|
|
}
|
|
|
|
.pseudo-input-label--no-margin,
|
|
.button-label {
|
|
margin-top: 0;
|
|
}
|
|
// md overqualifies so we are
|
|
.md-input-focused label.pseudo-input-label,
|
|
.md-input-has-value label.pseudo-input-label {
|
|
transform: translate3d(0, 4px, 0) scale(1);
|
|
margin-top: $mg;
|
|
}
|
|
|
|
.pseudo-input-field {
|
|
display: block;
|
|
}
|
|
|
|
.pseudo-input-field--underline {
|
|
@extend .pseudo-input-field;
|
|
border-bottom: 1px solid $colorGrayLighter;
|
|
&:focus,
|
|
&:active,
|
|
&:hover {
|
|
margin-bottom: ($line - 1);
|
|
border-bottom: 2px solid sg-color($sogoBlue, 500);
|
|
}
|
|
}
|
|
|
|
// The specs dimensions are too large to fit with angular-material
|
|
// Here's a modifier
|
|
.pseudo-input-container--compact {
|
|
.pseudo-input-label {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
input #inner-editor {
|
|
color: $colorGrayLight;
|
|
line-height: inherit;
|
|
}
|
|
|
|
:root #placeholder,
|
|
:root [pseudo="-webkit-input-placeholder"] {
|
|
padding: 0;
|
|
height: $mg;
|
|
color: $colorGrayLight;
|
|
font: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
input::-webkit-datetime-edit,
|
|
:root div#date-time-edit {
|
|
opacity: 0;
|
|
}
|
|
|
|
.md-input-focused input::-webkit-datetime-edit,
|
|
.md-input-focused div#date-time-edit,
|
|
.md-input-has-value input::-webkit-datetime-edit {
|
|
opacity: 1;
|
|
}
|
|
|
|
md-input-container {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
flex: 1 1 auto;
|
|
padding: $input-container-padding;
|
|
|
|
textarea,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="date"],
|
|
input[type="month"],
|
|
input[type="time"],
|
|
input[type="week"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="color"] {
|
|
/* remove default appearance from all input/textarea */
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
label {
|
|
order: 1;
|
|
pointer-events: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
z-index: 1;
|
|
transform: translate3d(0, $input-label-default-offset, 0) scale($input-label-default-scale);
|
|
transform-origin: left top;
|
|
transition: all $swift-ease-out-timing-function 0.2s;
|
|
}
|
|
|
|
/*
|
|
* The .md-input class is added to the input/textarea
|
|
*/
|
|
.md-input {
|
|
flex: 1;
|
|
order: 2;
|
|
display: block;
|
|
|
|
background: none;
|
|
padding-top: $input-padding-top;
|
|
padding-bottom: $input-border-width-focused - $input-border-width-default;
|
|
border-width: 0 0 $input-border-width-default 0;
|
|
line-height: $input-line-height;
|
|
-ms-flex-preferred-size: $input-line-height; //IE fix
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&.md-input-focused,
|
|
&.md-input-has-value {
|
|
label {
|
|
transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
|
|
}
|
|
}
|
|
&.md-input-focused {
|
|
.md-input {
|
|
padding-bottom: 0px; // Increase border width by 1px, decrease padding by 1
|
|
border-width: 0 0 $input-border-width-focused 0;
|
|
}
|
|
}
|
|
|
|
.md-input[disabled] {
|
|
background-position: 0 bottom;
|
|
// This background-size is coordinated with a linear-gradient set in input-theme.scss
|
|
// to create a dotted line under the input.
|
|
background-size: 3px 1px;
|
|
background-repeat: repeat-x;
|
|
}
|
|
}
|
|
md-input-container .bgroup {
|
|
display: block;
|
|
}
|
|
.bgroup b {
|
|
left-margin: -1.25em;
|
|
}
|
|
|
|
.PseudoField input {
|
|
flex: 1;
|
|
order: 2;
|
|
display: block;
|
|
|
|
background: none;
|
|
padding-top: $input-padding-top;
|
|
padding-bottom: 0;
|
|
border-width: 0 0 $input-border-width-default 0;
|
|
line-height: $input-line-height;
|
|
-ms-flex-preferred-size: $input-line-height; //IE fix
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|