2015-05-04 19:36:04 +02:00
|
|
|
/// pseudo-input.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
2015-02-23 22:37:05 +01:00
|
|
|
|
2015-02-23 22:54:06 +01:00
|
|
|
/// Component: pseudo-input
|
2015-02-23 22:37:05 +01:00
|
|
|
/// 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
|
2015-02-23 22:54:06 +01:00
|
|
|
/// The pseudo-input-container element serves as a... container for it's two children:
|
2015-02-23 22:37:05 +01:00
|
|
|
/// -label and -input-field
|
|
|
|
///
|
|
|
|
/// Typical use:
|
2015-02-23 22:54:06 +01:00
|
|
|
/// <div class="pseudo-input-container">
|
|
|
|
/// <label class="pseudo-input-label">Some text</label>
|
|
|
|
/// <p class="pseudo-input-field">Other input-like text</p>
|
2015-02-23 22:37:05 +01:00
|
|
|
/// </div>
|
|
|
|
///
|
|
|
|
/// ----------------------------------------------------------------------------
|
|
|
|
|
2015-02-23 22:54:06 +01:00
|
|
|
.pseudo-input-container {
|
2015-02-23 22:37:05 +01:00
|
|
|
display: block; // Should be (reset to ?) a plain block element
|
|
|
|
padding: 0 2px;
|
2016-06-14 22:11:12 +02:00
|
|
|
vertical-align: middle;
|
2015-02-23 22:37:05 +01:00
|
|
|
}
|
2015-02-26 06:39:18 +01:00
|
|
|
.sg-search-field-container {
|
|
|
|
margin-bottom: 12px;
|
|
|
|
color: white;
|
|
|
|
label {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
input {
|
|
|
|
color: inherit;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
}
|
2015-02-23 22:37:05 +01:00
|
|
|
|
2015-02-25 01:40:57 +01:00
|
|
|
.pseudo-input-label,
|
|
|
|
.button-label {
|
2015-02-23 22:37:05 +01:00
|
|
|
display: inline-block;
|
2015-07-29 22:45:16 +02:00
|
|
|
color: $colorGray;
|
|
|
|
font-weight: $sg-font-regular;
|
2015-02-23 22:37:05 +01:00
|
|
|
line-height: $sg-line-height-1;
|
2016-06-14 17:39:51 +02:00
|
|
|
transform: scale($input-label-float-scale);
|
2016-07-25 20:39:26 +02:00
|
|
|
}
|
|
|
|
|
2018-01-09 21:22:04 +01:00
|
|
|
.pseudo-input-label {
|
|
|
|
margin-top: $mg;
|
|
|
|
}
|
|
|
|
|
2016-07-25 20:39:26 +02:00
|
|
|
.pseudo-input-label {
|
2016-06-14 17:39:51 +02:00
|
|
|
@include rtl(transform-origin, left top, right top);
|
2015-02-23 22:37:05 +01:00
|
|
|
}
|
2015-02-26 06:39:18 +01:00
|
|
|
|
2016-06-14 22:11:12 +02:00
|
|
|
.button-label {
|
|
|
|
@include rtl(transform-origin, left center, right center);
|
|
|
|
}
|
|
|
|
|
2016-07-25 20:39:26 +02:00
|
|
|
.button-label--right {
|
|
|
|
@include rtl(transform-origin, right center, left center);
|
|
|
|
}
|
|
|
|
|
2015-02-23 22:54:06 +01:00
|
|
|
.pseudo-input-field {
|
2015-02-23 22:37:05 +01:00
|
|
|
display: block;
|
2017-12-12 18:54:56 +01:00
|
|
|
margin: 0;
|
2016-06-14 22:11:12 +02:00
|
|
|
padding-top: $input-padding-top + 2;
|
|
|
|
padding-bottom: $input-border-width-focused - $input-border-width-default;
|
|
|
|
padding-left: 2px;
|
|
|
|
padding-right: 2px;
|
|
|
|
border-width: 0;
|
2015-02-23 22:37:05 +01:00
|
|
|
}
|
|
|
|
|
2018-01-09 21:22:04 +01:00
|
|
|
md-select.pseudo-input-field,
|
|
|
|
md-checkbox.pseudo-input-field {
|
2017-12-12 18:54:56 +01:00
|
|
|
margin-bottom: $mg;
|
|
|
|
padding: 0;
|
2015-02-23 22:37:05 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// The specs dimensions are too large to fit with angular-material
|
|
|
|
// Here's a modifier
|
2018-06-28 16:45:11 +02:00
|
|
|
.pseudo-input-container--compact {
|
|
|
|
.pseudo-input-label {
|
|
|
|
margin-top: 0;
|
|
|
|
line-height: $bl;
|
|
|
|
}
|
|
|
|
md-select.pseudo-input-field,
|
|
|
|
md-checkbox.pseudo-input-field {
|
|
|
|
margin-bottom: $bl;
|
|
|
|
}
|
|
|
|
}
|