From 5980f8e90ec61755df240ed9247074779cb77d7f Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Mon, 23 Feb 2015 16:37:05 -0500
Subject: [PATCH] Create new Sass component: pseudo-input

---
 .gitignore                                    |   2 +
 .../pseudo-input/pseudo-input-theme.scss      |  50 +++++
 .../components/pseudo-input/pseudo-input.scss | 192 ++++++++++++++++++
 UI/WebServerResources/scss/styles.scss        | 103 +++++-----
 .../scss/views/MailerUI.scss                  |  65 ------
 5 files changed, 296 insertions(+), 116 deletions(-)
 create mode 100644 UI/WebServerResources/scss/components/pseudo-input/pseudo-input-theme.scss
 create mode 100644 UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss

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:
+/// <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;
+  }
+}
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:
-// <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 {
   @extend .sg-md-body-multi;
 }