Create new Sass component: pseudo-input
parent
cfed9c2058
commit
5980f8e90e
|
@ -27,3 +27,5 @@ Documentation/*.pdf
|
||||||
.idea
|
.idea
|
||||||
doc
|
doc
|
||||||
UI/WebServerResources/scss/.sass-cache
|
UI/WebServerResources/scss/.sass-cache
|
||||||
|
.scss-lint-config.yml_
|
||||||
|
.dat3015.0b5
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
md-input-container.md-THEME_NAME-theme {
|
||||||
|
.md-input {
|
||||||
|
@include input-placeholder-color('{{foreground-3}}');
|
||||||
|
color: '{{foreground-1}}';
|
||||||
|
border-color: '{{foreground-4}}';
|
||||||
|
text-shadow: '{{foreground-shadow}}';
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
text-shadow: '{{foreground-shadow}}';
|
||||||
|
color: '{{foreground-3}}';
|
||||||
|
}
|
||||||
|
|
||||||
|
&.md-input-focused {
|
||||||
|
.md-input {
|
||||||
|
border-color: '{{primary-500}}';
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
color: '{{primary-500}}';
|
||||||
|
}
|
||||||
|
&.md-accent {
|
||||||
|
.md-input {
|
||||||
|
border-color: '{{accent-500}}';
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
color: '{{accent-500}}';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-warn {
|
||||||
|
.md-input {
|
||||||
|
border-color: '{{warn-500}}';
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
color: '{{warn-500}}';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.md-input-has-value:not(.md-input-focused) {
|
||||||
|
label {
|
||||||
|
color: '{{foreground-2}}';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input[disabled] {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
color: '{{foreground-3}}';
|
||||||
|
background-image: linear-gradient(to right, '{{foreground-4}}' 0%, '{{foreground-4}}' 33%, transparent 0%);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,192 @@
|
||||||
|
/*! pseudo-input.scss */
|
||||||
|
|
||||||
|
|
||||||
|
/// 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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Pseudo-input-label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: $mg;
|
||||||
|
color: $colorGrayLight;
|
||||||
|
font-weight: $sg-font-regular; // 16px;
|
||||||
|
font-size: sg-size(caption);
|
||||||
|
line-height: $sg-line-height-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Pseudo-input-field {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: $line;
|
||||||
|
padding: $line 0 0 0;
|
||||||
|
font-size: sg-size(subhead);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 /deep/ #inner-editor {
|
||||||
|
color: $colorGrayLight;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root /deep/ #placeholder,
|
||||||
|
:root /deep/ [pseudo="-webkit-input-placeholder"] {
|
||||||
|
padding: 0;
|
||||||
|
height: $mg;
|
||||||
|
color: $colorGrayLight;
|
||||||
|
font: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
md-input-container {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -7,11 +7,11 @@
|
||||||
*
|
*
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import 'core/variables'; // Will be replace by a complete 'config.scss file
|
@import 'core/variables'; // Will be replace by a complete 'config file
|
||||||
|
|
||||||
// Compass import - comment-out if needed
|
// Compass import - comment-out if needed
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
@import '../bower_components/compass-mixins/lib/_compass.scss';
|
@import '../bower_components/compass-mixins/lib/_compass';
|
||||||
|
|
||||||
// Browser reset - most effective for applications. Generated by Compass in a non-regular way
|
// Browser reset - most effective for applications. Generated by Compass in a non-regular way
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
@ -32,66 +32,67 @@
|
||||||
|
|
||||||
// Original angular-material components
|
// Original angular-material components
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
@import 'components/backdrop/backdrop.scss';
|
@import 'components/backdrop/backdrop';
|
||||||
@import 'components/bottomSheet/bottomSheet.scss';
|
@import 'components/bottomSheet/bottomSheet';
|
||||||
@import 'components/button/button';
|
@import 'components/button/button';
|
||||||
@import 'components/card/card.scss';
|
@import 'components/card/card';
|
||||||
@import 'components/checkbox/checkbox.scss';
|
@import 'components/checkbox/checkbox';
|
||||||
@import 'components/content/content.scss';
|
@import 'components/content/content';
|
||||||
@import 'components/dialog/dialog.scss';
|
@import 'components/dialog/dialog';
|
||||||
@import 'components/divider/divider.scss';
|
@import 'components/divider/divider';
|
||||||
@import 'components/icon/icon.scss';
|
@import 'components/icon/icon';
|
||||||
@import 'components/input/input.scss';
|
@import 'components/input/input';
|
||||||
@import 'components/list/list.scss';
|
@import 'components/list/list';
|
||||||
@import 'components/autoScrollList/autoScrollList.scss';
|
@import 'components/autoScrollList/autoScrollList';
|
||||||
@import 'components/progressCircular/progressCircular.scss';
|
@import 'components/progressCircular/progressCircular';
|
||||||
@import 'components/progressLinear/progressLinear.scss';
|
@import 'components/progressLinear/progressLinear';
|
||||||
@import 'components/radioButton/radio-button.scss';
|
@import 'components/radioButton/radio-button';
|
||||||
@import 'components/select/select.scss';
|
@import 'components/select/select';
|
||||||
@import 'components/sidenav/sidenav.scss';
|
@import 'components/sidenav/sidenav';
|
||||||
@import 'components/slider/slider.scss';
|
@import 'components/slider/slider';
|
||||||
@import 'components/sticky/sticky.scss';
|
@import 'components/sticky/sticky';
|
||||||
@import 'components/subheader/subheader.scss';
|
@import 'components/subheader/subheader';
|
||||||
@import 'components/switch/switch.scss';
|
@import 'components/switch/switch';
|
||||||
@import 'components/tabs/tabs.scss';
|
@import 'components/tabs/tabs';
|
||||||
@import 'components/textField/textField.scss';
|
@import 'components/textField/textField';
|
||||||
@import 'components/toast/toast.scss';
|
@import 'components/toast/toast';
|
||||||
@import 'components/toolbar/toolbar.scss';
|
@import 'components/toolbar/toolbar';
|
||||||
@import 'components/bottombar/bottombar.scss';
|
@import 'components/bottombar/bottombar';
|
||||||
@import 'components/tooltip/tooltip.scss';
|
@import 'components/tooltip/tooltip';
|
||||||
@import 'components/whiteframe/whiteframe.scss';
|
@import 'components/whiteframe/whiteframe';
|
||||||
|
|
||||||
// Theme
|
// Theme
|
||||||
//@import '../angular-material/src/components/bottomSheet/bottomSheet-theme.scss';
|
//@import '../angular-material/src/components/bottomSheet/bottomSheet-theme';
|
||||||
//@import '../angular-material/src/components/button/button-theme.scss';
|
//@import '../angular-material/src/components/button/button-theme';
|
||||||
//@import '../angular-material/src/components/card/card-theme.scss';
|
//@import '../angular-material/src/components/card/card-theme';
|
||||||
//@import '../angular-material/src/components/checkbox/checkbox-theme.scss';
|
//@import '../angular-material/src/components/checkbox/checkbox-theme';
|
||||||
//@import '../angular-material/src/components/content/content-theme.scss';
|
//@import '../angular-material/src/components/content/content-theme';
|
||||||
//@import '../angular-material/src/components/dialog/dialog-theme.scss';
|
//@import '../angular-material/src/components/dialog/dialog-theme';
|
||||||
//@import '../angular-material/src/components/divider/divider-theme.scss';
|
//@import '../angular-material/src/components/divider/divider-theme';
|
||||||
//@import '../angular-material/src/components/input/input-theme.scss';
|
//@import '../angular-material/src/components/input/input-theme';
|
||||||
//@import '../angular-material/src/components/progressCircular/progressCircular-theme.scss';
|
//@import '../angular-material/src/components/progressCircular/progressCircular-theme';
|
||||||
//@import '../angular-material/src/components/progressLinear/progressLinear-theme.scss';
|
//@import '../angular-material/src/components/progressLinear/progressLinear-theme';
|
||||||
//@import '../angular-material/src/components/radioButton/radio-button-theme.scss';
|
//@import '../angular-material/src/components/radioButton/radio-button-theme';
|
||||||
//@import '../angular-material/src/components/sidenav/sidenav-theme.scss';
|
//@import '../angular-material/src/components/sidenav/sidenav-theme';
|
||||||
//@import '../angular-material/src/components/slider/slider-theme.scss';
|
//@import '../angular-material/src/components/slider/slider-theme';
|
||||||
//@import '../angular-material/src/components/subheader/subheader-theme.scss';
|
//@import '../angular-material/src/components/subheader/subheader-theme';
|
||||||
//@import '../angular-material/src/components/switch/switch-theme.scss';
|
//@import '../angular-material/src/components/switch/switch-theme';
|
||||||
//@import '../angular-material/src/components/tabs/tabs-theme.scss';
|
//@import '../angular-material/src/components/tabs/tabs-theme';
|
||||||
//@import '../angular-material/src/components/textField/textField-theme.scss';
|
//@import '../angular-material/src/components/textField/textField-theme';
|
||||||
//@import '../angular-material/src/components/toast/toast-theme.scss';
|
//@import '../angular-material/src/components/toast/toast-theme';
|
||||||
//@import '../angular-material/src/components/toolbar/toolbar-theme.scss';
|
//@import '../angular-material/src/components/toolbar/toolbar-theme';
|
||||||
//@import '../angular-material/src/components/tooltip/tooltip-theme.scss';
|
//@import '../angular-material/src/components/tooltip/tooltip-theme';
|
||||||
|
|
||||||
// @import '../angular-material/src/core/style/color-palette.scss';
|
// @import '../angular-material/src/core/style/color-palette';
|
||||||
|
|
||||||
// COMPONENTS
|
// COMPONENTS
|
||||||
// todo : configure manual and glob imports
|
// todo : configure manual and glob imports
|
||||||
|
@import 'components/pseudo-input/pseudo-input';
|
||||||
@import 'views/view';
|
@import 'views/view';
|
||||||
|
|
||||||
// Ng-tags styles for re-skinning
|
// Ng-tags styles for re-skinning
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
@import 'components/ngTags/ng-tags-input.scss';
|
@import 'components/ngTags/ng-tags-input';
|
||||||
|
|
||||||
// core styles - need to be after components till settings are correctly implemented
|
// core styles - need to be after components till settings are correctly implemented
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
|
@ -45,71 +45,6 @@
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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>
|
|
||||||
//
|
|
||||||
// ----------------------------------------------------------------------------
|
|
||||||
|
|
||||||
.Pseudo-input-container {
|
|
||||||
display: block; // Should be (reset to ?) a plain block element
|
|
||||||
padding: 0 2px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.Pseudo-input-label {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: $mg;
|
|
||||||
font-size: sg-size(caption);
|
|
||||||
line-height: $sg-line-height-1; // 16px;
|
|
||||||
font-weight: $sg-font-regular;
|
|
||||||
color: $colorGrayLight;
|
|
||||||
}
|
|
||||||
.Pseudo-input-field {
|
|
||||||
display: block;
|
|
||||||
padding: $line 0 0 0;
|
|
||||||
margin-bottom: $line;
|
|
||||||
font-size: sg-size(subhead);
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.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/deep/#inner-editor {
|
|
||||||
color: $colorGrayLight;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
:root/deep/#placeholder,
|
|
||||||
:root/deep/[pseudo="-webkit-input-placeholder"] {
|
|
||||||
color: $colorGrayLight;
|
|
||||||
height: $mg;
|
|
||||||
font: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.mailer_mailcontent {
|
.mailer_mailcontent {
|
||||||
@extend .sg-md-body-multi;
|
@extend .sg-md-body-multi;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue