Skip to content

Commit

Permalink
feat(base): Add mdc-emit-once utility mixin; deduplicate styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Kenneth G. Franqueiro committed Apr 17, 2018
1 parent 60c0204 commit c9f1dcb
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 90 deletions.
27 changes: 27 additions & 0 deletions packages/mdc-base/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

// This variable is not intended to be overridden externally; it uses !default to avoid being reset
// every time this file is imported.
$mdc-base-styles-emitted_: () !default;

@mixin mdc-base-emit-once($key) {
@debug $mdc-base-styles-emitted_;
@if not index($mdc-base-styles-emitted_, $key) {
$mdc-base-styles-emitted_: append($mdc-base-styles-emitted_, $key, comma) !global;
@content;
}
}
50 changes: 27 additions & 23 deletions packages/mdc-floating-label/mdc-floating-label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
// limitations under the License.
//

@import "@material/base/mixins";
@import "@material/rtl/mixins";
@import "@material/theme/variables";
@import "@material/theme/mixins";
Expand All @@ -22,32 +23,35 @@
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define floating-label
.mdc-floating-label {
@include mdc-typography(subtitle1);
// Floating Label is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-floating-label") {
// postcss-bem-linter: define floating-label
.mdc-floating-label {
@include mdc-typography(subtitle1);

position: absolute;
bottom: 8px;
left: 0;
transform-origin: left top;
transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
line-height: 1.15rem;
cursor: text;
position: absolute;
bottom: 8px;
left: 0;
transform-origin: left top;
transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
line-height: 1.15rem;
cursor: text;

@include mdc-rtl {
right: 0;
left: auto;
transform-origin: right top;
@include mdc-rtl {
right: 0;
left: auto;
transform-origin: right top;
}
}
}

.mdc-floating-label--float-above {
cursor: auto;
}
.mdc-floating-label--float-above {
cursor: auto;
}

@at-root {
@include mdc-floating-label-float-position($mdc-floating-label-position-y);
@include mdc-floating-label-shake-animation(standard);
}
@at-root {
@include mdc-floating-label-float-position($mdc-floating-label-position-y);
@include mdc-floating-label-shake-animation(standard);
}

@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
}
42 changes: 23 additions & 19 deletions packages/mdc-line-ripple/mdc-line-ripple.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,32 @@
// limitations under the License.
//

@import "@material/base/mixins";
@import "@material/theme/mixins";
@import "./functions";
@import "./mixins";
@import "@material/theme/mixins";

// postcss-bem-linter: define line-ripple
.mdc-line-ripple {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity);
opacity: 0;
z-index: 2;
}
// Line Ripple is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-line-ripple") {
// postcss-bem-linter: define line-ripple
.mdc-line-ripple {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity);
opacity: 0;
z-index: 2;
}

.mdc-line-ripple--active {
transform: scaleX(1);
opacity: 1;
}
.mdc-line-ripple--active {
transform: scaleX(1);
opacity: 1;
}

.mdc-line-ripple--deactivating {
opacity: 0;
.mdc-line-ripple--deactivating {
opacity: 0;
}
}
84 changes: 44 additions & 40 deletions packages/mdc-notched-outline/mdc-notched-outline.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,57 +14,61 @@
// limitations under the License.
//

@import "@material/base/mixins";
@import "@material/ripple/mixins";
@import "@material/ripple/variables";
@import "@material/textfield/functions";
@import "@material/theme/mixins";
@import "./mixins";

.mdc-notched-outline {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 1px);
height: calc(100% - 2px);
transition: mdc-text-field-transition(opacity);
opacity: 0;
overflow: hidden;

// stylelint-disable selector-max-type
svg {
// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
@include mdc-base-emit-once("mdc-notched-outline") {
.mdc-notched-outline {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
width: calc(100% - 1px);
height: calc(100% - 2px);
transition: mdc-text-field-transition(opacity);
opacity: 0;
overflow: hidden;

// stylelint-disable selector-max-type
svg {
position: absolute;
width: 100%;
height: 100%;
}
// stylelint-enable selector-max-type
}
// stylelint-enable selector-max-type
}

.mdc-notched-outline__idle {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
transition: opacity 100ms ease;
border: 1px solid;
opacity: 1;
}
.mdc-notched-outline__idle {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 4px);
height: calc(100% - 4px);
transition: opacity 100ms ease;
border: 1px solid;
opacity: 1;
}

.mdc-notched-outline__path {
stroke-width: 1px;
.mdc-notched-outline__path {
stroke-width: 1px;

// TODO(mattgoo): remove this text-field dep from notched-outline
transition:
mdc-text-field-transition(stroke),
mdc-text-field-transition(stroke-width),
mdc-text-field-transition(opacity);
fill: transparent;
}
// TODO(mattgoo): remove this text-field dep from notched-outline
transition:
mdc-text-field-transition(stroke),
mdc-text-field-transition(stroke-width),
mdc-text-field-transition(opacity);
fill: transparent;
}

.mdc-notched-outline--notched {
opacity: 1;
}
.mdc-notched-outline--notched {
opacity: 1;
}

.mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
opacity: 0;
.mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
opacity: 0;
}
}
10 changes: 2 additions & 8 deletions packages/mdc-ripple/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,11 @@
//

@import "./keyframes";
@import "@material/base/mixins";

// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)

// This variable is not intended to be overridden externally; it uses !default to avoid being reset
// every time this file is imported.
$mdc-ripple-common-styles-emitted_: false !default;

@if not $mdc-ripple-common-styles-emitted_ {
$mdc-ripple-common-styles-emitted_: true;

@include mdc-base-emit-once("mdc-ripple/common") {
@include mdc-ripple-keyframes_;

// Styles used to detect buggy behavior of CSS custom properties in Edge.
Expand Down

0 comments on commit c9f1dcb

Please sign in to comment.