diff --git a/gulp/config.js b/gulp/config.js index 3e8656c22b3..46da04b2eb5 100644 --- a/gulp/config.js +++ b/gulp/config.js @@ -85,18 +85,20 @@ 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', @@ -104,14 +106,14 @@ module.exports = { ], 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: [ diff --git a/gulp/util.js b/gulp/util.js index 5d5d9ba050a..2780d54240b 100644 --- a/gulp/util.js +++ b/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'); diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss index fa2f1b9ab93..5bb871e9815 100644 --- a/src/components/bottomSheet/bottom-sheet.scss +++ b/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; } diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss index 34591161558..ecf48ae3ac2 100644 --- a/src/components/checkbox/checkbox.scss +++ b/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; diff --git a/src/components/input/_input-variables.scss b/src/components/input/_input-variables.scss new file mode 100644 index 00000000000..5ea9a3199a2 --- /dev/null +++ b/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; diff --git a/src/components/input/input.scss b/src/components/input/input.scss index bb3d765f1a7..1b8968c07ab 100644 --- a/src/components/input/input.scss +++ b/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; diff --git a/src/core/style/mixins.scss b/src/core/style/_mixins.scss similarity index 100% rename from src/core/style/mixins.scss rename to src/core/style/_mixins.scss diff --git a/src/core/style/variables.scss b/src/core/style/_variables.scss similarity index 100% rename from src/core/style/variables.scss rename to src/core/style/_variables.scss diff --git a/src/core/util/constant.js b/src/core/util/constant.js index 62c560a8f81..533620653a6 100755 --- a/src/core/util/constant.js +++ b/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;