build(select): handle sharing input variables between input and select

- update `buildModuleStyles()` to support building separate module styles
- update `config.scssBaseFiles` to support building the single styles file
- add underscore in front of Sass partial file names

gulp/config.js

@@ -85,33 +85,35 @@ module.exports = {
     'src/components/virtualRepeat',
     'src/components/whiteframe'
   ],
+  inputVariables: 'src/components/input/_input-variables.scss',
   mockFiles: [
     'test/angular-material-mocks.js'
   ],
   themeBaseFiles: [
-    'src/core/style/variables.scss',
-    'src/core/style/mixins.scss'
+    'src/core/style/_variables.scss',
+    'src/core/style/_mixins.scss'
   ],
   themeCore: 'src/core/style/core-theme.scss',
   scssBaseFiles: [
     'src/core/style/color-palette.scss',
-    'src/core/style/variables.scss',
-    'src/core/style/mixins.scss',
+    'src/core/style/_variables.scss',
+    'src/components/input/_input-variables.scss',
+    'src/core/style/_mixins.scss',
     'src/core/style/structure.scss',
     'src/core/style/typography.scss',
     'src/core/style/layout.scss',
     'src/components/panel/*.scss'
   ],
   scssServicesLayout: 'src/core/services/layout/layout.scss',
   scssLayoutFiles: [
-    'src/core/style/variables.scss',
-    'src/core/style/mixins.scss',
+    'src/core/style/_variables.scss',
+    'src/core/style/_mixins.scss',
     'src/core/style/layout.scss',
     'src/core/services/layout/layout.scss'
   ],
   scssLayoutAttributeFiles: [
-    'src/core/style/variables.scss',
-    'src/core/style/mixins.scss',
+    'src/core/style/_variables.scss',
+    'src/core/style/_mixins.scss',
     'src/core/services/layout/layout-attributes.scss'
   ],
   scssComponentPaths: [

gulp/util.js

@@ -174,7 +174,7 @@ function buildModule(module, opts) {
   }
 
   /**
-   * @param {string} name module name
+   * @param {string} name module name. I.e. 'select', 'dialog', etc.
    * @returns {*}
    */
   function buildModuleStyles(name) {
@@ -183,6 +183,13 @@ function buildModule(module, opts) {
       files = files.concat(glob(fileGlob, {cwd: ROOT}));
     });
 
+    // Handle md-input and md-input-container variables that need to be shared with md-select
+    // in order to orchestrate identical layouts and alignments. In the future, it may be necessary
+    // to also use these variables with md-datepicker and md-autocomplete.
+    if (name === 'input' || name === 'select') {
+      files = files.concat(glob(config.inputVariables, {cwd: ROOT}));
+    }
+
     const baseStyles = files.map(function(fileName) {
       return fs.readFileSync(fileName, 'utf8').toString();
     }).join('\n');

src/components/bottomSheet/bottom-sheet.scss

@@ -132,7 +132,7 @@ md-bottom-sheet {
         @include grid-items-per-row(7);
       }
 
-      // Override of the IE11 fix from @mixin ie11-min-height-flexbug, line 109 mixins.scss
+      // Override of the IE11 fix from @mixin ie11-min-height-flexbug, line 109 _mixins.scss
       &::before {
         display: none;
       }

src/components/checkbox/checkbox.scss

@@ -3,7 +3,7 @@
 //$checkbox-border-radius: 2px !default;
 //$checkbox-border-width: 2px !default;
 //
-// ^^ defined in variables.scss
+// ^^ defined in _variables.scss
 //
 $checkbox-margin: 16px !default;
 $checkbox-text-margin: 10px !default;

src/components/input/_input-variables.scss

@@ -0,0 +1,27 @@
+$input-container-padding: 2px !default;
+
+$input-label-default-offset: 24px !default;
+$input-label-default-scale: 1.0 !default;
+$input-label-float-offset: 6px !default;
+$input-label-float-scale: 0.75 !default;
+$input-label-float-width: $input-container-padding + 16px !default;
+
+$input-placeholder-offset: $input-label-default-offset !default;
+
+$input-border-width-default: 1px !default;
+$input-border-width-focused: 2px !default;
+$input-line-height: 26px !default;
+$input-padding-top: 2px !default;
+
+$input-error-font-size: 12px !default;
+$input-error-height: 24px !default;
+$input-error-line-height: $input-error-font-size + 2px !default;
+$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
+
+$icon-offset: 36px !default;
+
+$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4 !default;
+
+$icon-float-focused-top: -8px !default;
+
+$input-resize-handle-height: 10px !default;

src/components/input/input.scss

@@ -1,31 +1,3 @@
-$input-container-padding: 2px !default;
-
-$input-label-default-offset: 24px !default;
-$input-label-default-scale: 1.0 !default;
-$input-label-float-offset: 6px !default;
-$input-label-float-scale: 0.75 !default;
-$input-label-float-width: $input-container-padding + 16px !default;
-
-$input-placeholder-offset: $input-label-default-offset !default;
-
-$input-border-width-default: 1px !default;
-$input-border-width-focused: 2px !default;
-$input-line-height: 26px !default;
-$input-padding-top: 2px !default;
-
-$input-error-font-size: 12px !default;
-$input-error-height: 24px !default;
-$input-error-line-height: $input-error-font-size + 2px !default;
-$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
-
-$icon-offset: 36px !default;
-
-$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4 !default;
-
-$icon-float-focused-top: -8px !default;
-
-$input-resize-handle-height: 10px !default;
-
 md-input-container {
   @include pie-clearfix();
   display: inline-block;

src/core/util/constant.js

@@ -113,7 +113,7 @@ function MdConstantFactory() {
     },
 
     /**
-     * As defined in core/style/variables.scss
+     * As defined in core/style/_variables.scss
      *
      * $layout-breakpoint-xs:     600px !default;
      * $layout-breakpoint-sm:     960px !default;