diff --git a/.gitignore b/.gitignore
index c7c30a07e..eb68a1220 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ Documentation/*.pdf
.idea
doc
UI/WebServerResources/scss/.sass-cache
+.scss-lint-config.yml_
+.dat3015.0b5
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input-theme.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input-theme.scss
new file mode 100644
index 000000000..f1828a1ca
--- /dev/null
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input-theme.scss
@@ -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%);
+ }
+}
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
new file mode 100644
index 000000000..05e829b56
--- /dev/null
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -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:
+///
+///
+/// ----------------------------------------------------------------------------
+
+// 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;
+ }
+}
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 7bab9690b..ae228d0c0 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -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
// ------------------------------------------------------------------------------
-@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
// ------------------------------------------------------------------------------
@@ -32,66 +32,67 @@
// Original angular-material components
// ------------------------------------------------------------------------------
-@import 'components/backdrop/backdrop.scss';
-@import 'components/bottomSheet/bottomSheet.scss';
+@import 'components/backdrop/backdrop';
+@import 'components/bottomSheet/bottomSheet';
@import 'components/button/button';
-@import 'components/card/card.scss';
-@import 'components/checkbox/checkbox.scss';
-@import 'components/content/content.scss';
-@import 'components/dialog/dialog.scss';
-@import 'components/divider/divider.scss';
-@import 'components/icon/icon.scss';
-@import 'components/input/input.scss';
-@import 'components/list/list.scss';
-@import 'components/autoScrollList/autoScrollList.scss';
-@import 'components/progressCircular/progressCircular.scss';
-@import 'components/progressLinear/progressLinear.scss';
-@import 'components/radioButton/radio-button.scss';
-@import 'components/select/select.scss';
-@import 'components/sidenav/sidenav.scss';
-@import 'components/slider/slider.scss';
-@import 'components/sticky/sticky.scss';
-@import 'components/subheader/subheader.scss';
-@import 'components/switch/switch.scss';
-@import 'components/tabs/tabs.scss';
-@import 'components/textField/textField.scss';
-@import 'components/toast/toast.scss';
-@import 'components/toolbar/toolbar.scss';
-@import 'components/bottombar/bottombar.scss';
-@import 'components/tooltip/tooltip.scss';
-@import 'components/whiteframe/whiteframe.scss';
+@import 'components/card/card';
+@import 'components/checkbox/checkbox';
+@import 'components/content/content';
+@import 'components/dialog/dialog';
+@import 'components/divider/divider';
+@import 'components/icon/icon';
+@import 'components/input/input';
+@import 'components/list/list';
+@import 'components/autoScrollList/autoScrollList';
+@import 'components/progressCircular/progressCircular';
+@import 'components/progressLinear/progressLinear';
+@import 'components/radioButton/radio-button';
+@import 'components/select/select';
+@import 'components/sidenav/sidenav';
+@import 'components/slider/slider';
+@import 'components/sticky/sticky';
+@import 'components/subheader/subheader';
+@import 'components/switch/switch';
+@import 'components/tabs/tabs';
+@import 'components/textField/textField';
+@import 'components/toast/toast';
+@import 'components/toolbar/toolbar';
+@import 'components/bottombar/bottombar';
+@import 'components/tooltip/tooltip';
+@import 'components/whiteframe/whiteframe';
// Theme
-//@import '../angular-material/src/components/bottomSheet/bottomSheet-theme.scss';
-//@import '../angular-material/src/components/button/button-theme.scss';
-//@import '../angular-material/src/components/card/card-theme.scss';
-//@import '../angular-material/src/components/checkbox/checkbox-theme.scss';
-//@import '../angular-material/src/components/content/content-theme.scss';
-//@import '../angular-material/src/components/dialog/dialog-theme.scss';
-//@import '../angular-material/src/components/divider/divider-theme.scss';
-//@import '../angular-material/src/components/input/input-theme.scss';
-//@import '../angular-material/src/components/progressCircular/progressCircular-theme.scss';
-//@import '../angular-material/src/components/progressLinear/progressLinear-theme.scss';
-//@import '../angular-material/src/components/radioButton/radio-button-theme.scss';
-//@import '../angular-material/src/components/sidenav/sidenav-theme.scss';
-//@import '../angular-material/src/components/slider/slider-theme.scss';
-//@import '../angular-material/src/components/subheader/subheader-theme.scss';
-//@import '../angular-material/src/components/switch/switch-theme.scss';
-//@import '../angular-material/src/components/tabs/tabs-theme.scss';
-//@import '../angular-material/src/components/textField/textField-theme.scss';
-//@import '../angular-material/src/components/toast/toast-theme.scss';
-//@import '../angular-material/src/components/toolbar/toolbar-theme.scss';
-//@import '../angular-material/src/components/tooltip/tooltip-theme.scss';
+//@import '../angular-material/src/components/bottomSheet/bottomSheet-theme';
+//@import '../angular-material/src/components/button/button-theme';
+//@import '../angular-material/src/components/card/card-theme';
+//@import '../angular-material/src/components/checkbox/checkbox-theme';
+//@import '../angular-material/src/components/content/content-theme';
+//@import '../angular-material/src/components/dialog/dialog-theme';
+//@import '../angular-material/src/components/divider/divider-theme';
+//@import '../angular-material/src/components/input/input-theme';
+//@import '../angular-material/src/components/progressCircular/progressCircular-theme';
+//@import '../angular-material/src/components/progressLinear/progressLinear-theme';
+//@import '../angular-material/src/components/radioButton/radio-button-theme';
+//@import '../angular-material/src/components/sidenav/sidenav-theme';
+//@import '../angular-material/src/components/slider/slider-theme';
+//@import '../angular-material/src/components/subheader/subheader-theme';
+//@import '../angular-material/src/components/switch/switch-theme';
+//@import '../angular-material/src/components/tabs/tabs-theme';
+//@import '../angular-material/src/components/textField/textField-theme';
+//@import '../angular-material/src/components/toast/toast-theme';
+//@import '../angular-material/src/components/toolbar/toolbar-theme';
+//@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
// todo : configure manual and glob imports
+@import 'components/pseudo-input/pseudo-input';
@import 'views/view';
// 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
// ------------------------------------------------------------------------------
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index a895fe06d..cf51fc370 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -45,71 +45,6 @@
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:
-//
-//
-// ----------------------------------------------------------------------------
-
-.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 {
@extend .sg-md-body-multi;
}