Skip to content

Commit

Permalink
feat(button): create theme mixin for button (#1244)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yeelan0319
yeelan0319 committed Sep 8, 2017
1 parent deb887a commit 5266776
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 107 deletions.
123 changes: 110 additions & 13 deletions packages/mdc-button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,122 @@
@import "@material/ripple/mixins";
@import "@material/theme/mixins";
@import "@material/theme/variables";
@import "./variables";

@mixin mdc-button-filled_() {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .32));
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .32));
@include mdc-theme-prop(color, text-primary-on-dark);
@mixin mdc-button-base_() {
@include mdc-typography(button);

background-color: black;
display: inline-block;
position: relative;
box-sizing: border-box;
min-width: 88px;
height: $mdc-button-height;
padding: 0 16px;
border: none;
outline: none;
text-align: center;
user-select: none;
-webkit-appearance: none;
overflow: hidden;
vertical-align: middle;

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
@include mdc-ripple-fg((pseudo: "::after", base-color: black, opacity: .32));
@include mdc-theme-prop(color, text-primary-on-light);
// postcss-bem-linter: ignore
&:active {
outline: none;
}

&:hover {
cursor: pointer;
}

&::-moz-focus-inner {
padding: 0;
border: 0;
}

&:disabled {
cursor: default;
pointer-events: none;
}
}

@mixin mdc-button--raised_() {
@include mdc-elevation(2);
@include mdc-elevation-transition;

&:hover,
&:focus {
@include mdc-elevation(4);
}

&:active {
@include mdc-elevation(8);
}

&:disabled {
@include mdc-elevation(0);
}
}

@mixin mdc-button--compact_() {
padding: 0 8px;
}

@mixin mdc-button--dense_() {
height: $mdc-dense-button-height;
font-size: .8125rem; // 13sp
line-height: $mdc-dense-button-height;
}

@mixin mdc-button-container-fill-color($color) {
// :not(:disabled) is used to support link styled as button
// as link does not support :enabled style
&:not(:disabled) {
@include mdc-theme-prop(background-color, $color);
}
}

@mixin mdc-button-stroke-color($color) {
&:not(:disabled) {
@include mdc-theme-prop(border-color, $color);
}
}

@mixin mdc-button-ink-color($color) {
&:not(:disabled) {
@include mdc-theme-prop(color, $color);
}
}

background-color: white;
@mixin mdc-button-ripple($ripple-config) {
&:not(:disabled) {
@include mdc-ripple-base;
@include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
@include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));

&:not(.mdc-ripple-upgraded) {
-webkit-tap-highlight-color: rgba(black, .18);
$tap-highlight-color: rgba(map-get($ripple-config, base-color), map-get($ripple-config, opacity));

@include mdc-theme-prop(-webkit-tap-highlight-color, $tap-highlight-color);
}
}
}

@mixin mdc-button-corner-radius($corner-radius) {
border-radius: $corner-radius;
}

@mixin mdc-button-stroke-width($stroke-width) {
border-width: $stroke-width;
line-height: $mdc-button-height - $stroke-width * 2;

// postcss-bem-linter: ignore
&.mdc-button--dense {
// Minus extra 1 to accommodate odd font size of dense button
line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
}
}

@mixin mdc-button-stroke-style($stroke-style) {
border-style: $stroke-style;
}
18 changes: 18 additions & 0 deletions packages/mdc-button/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
//
// Copyright 2017 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.
//

$mdc-button-height: 36px;
$mdc-dense-button-height: 32px;
138 changes: 44 additions & 94 deletions packages/mdc-button/mdc-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,102 +23,51 @@

// postcss-bem-linter: define button
.mdc-button {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before"));
@include mdc-ripple-fg((pseudo: "::after"));
@include mdc-typography(button);
@include mdc-theme-prop(color, text-primary-on-light);

display: inline-block;
position: relative;
box-sizing: border-box;
min-width: 88px;
height: 36px;
padding: 0 16px;
border: none;
border-radius: 4px;
outline: none;
background: transparent;
text-align: center;
user-select: none;
-webkit-appearance: none;
overflow: hidden;
vertical-align: middle;

// postcss-bem-linter: ignore
&:active {
outline: none;
}

&:hover {
cursor: pointer;
}

&::-moz-focus-inner {
padding: 0;
border: 0;
}

&:not(.mdc-ripple-upgraded) {
-webkit-tap-highlight-color: rgba(black, .3);
}
@include mdc-button-base_;
@include mdc-button-corner-radius(4px);
@include mdc-button-container-fill-color(transparent);
@include mdc-button-ink-color(text-primary-on-light);
@include mdc-button-ripple((base-color: black, opacity: .16));

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
@include mdc-theme-prop(color, text-primary-on-dark);

&:not(.mdc-ripple-upgraded) {
-webkit-tap-highlight-color: rgba(white, .18);
}
@include mdc-button-ink-color(text-primary-on-dark);
@include mdc-button-ripple((base-color: white, opacity: .16));
}
}

.mdc-button--raised,
.mdc-button--unelevated {
@include mdc-button-filled_;
}
@include mdc-button-container-fill-color(black);
@include mdc-button-ink-color(text-primary-on-dark);
@include mdc-button-ripple((base-color: white, opacity: .32));

.mdc-button--raised {
@include mdc-elevation(2);
@include mdc-elevation-transition;

&:hover,
&:focus {
@include mdc-elevation(4);
@include mdc-theme-dark(".mdc-button") {
@include mdc-button-container-fill-color(white);
@include mdc-button-ink-color(text-primary-on-light);
@include mdc-button-ripple((base-color: black, opacity: .32));
}
}

&:active {
@include mdc-elevation(8);
}
.mdc-button--raised {
@include mdc-button--raised_;
}

.mdc-button--stroked {
@include mdc-theme-prop(border-color, text-primary-on-light);

border-width: 2px;
border-style: solid;
line-height: 32px;
@include mdc-button-stroke-width(2px);
@include mdc-button-stroke-style(solid);
@include mdc-button-stroke-color(text-primary-on-light);

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(border-color, text-primary-on-dark);
}

// postcss-bem-linter: ignore
&.mdc-button--dense {
line-height: 27px; // To accommodate odd font size of dense button
@include mdc-button-stroke-color(text-primary-on-dark);
}
}

.mdc-button--compact {
padding: 0 8px;
@include mdc-button--compact_;
}

.mdc-button--dense {
height: 32px;
font-size: .8125rem; // 13sp
line-height: 32px;
@include mdc-button--dense_;
}

@each $theme-style in (primary, secondary) {
Expand All @@ -129,34 +78,40 @@
.mdc-button--#{$modifier} {
$theme-value: map-get($mdc-theme-property-values, $theme-style);

@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
@include mdc-theme-prop(color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
&:not(:disabled) {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
@include mdc-theme-prop(color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .16));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .16));
@include mdc-theme-prop(color, $theme-style);
}
}
// postcss-bem-linter: ignore
&.mdc-button--raised,
&.mdc-button--unelevated {
$theme-value: map-get($mdc-theme-property-values, text-primary-on-#{$theme-style});

@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
@include mdc-theme-prop(background-color, $theme-style);
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
&:not(:disabled) {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: $theme-value, opacity: .32));
@include mdc-ripple-fg((pseudo: "::after", base-color: $theme-value, opacity: .32));
@include mdc-theme-prop(background-color, $theme-style);
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
}
}
// postcss-bem-linter: ignore
&.mdc-button--stroked {
@include mdc-theme-prop(border-color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
&:not(:disabled) {
@include mdc-theme-prop(border-color, $theme-style);

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(border-color, $theme-style);
}
}
}
}
Expand All @@ -165,11 +120,9 @@
// Disabled button styles need to be last to ensure they override other primary/accent/dark styles

.mdc-button {
fieldset:disabled &,
&:disabled {
background-color: transparent;
color: rgba(black, .38);
cursor: default;
pointer-events: none;

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, text-disabled-on-dark);
Expand All @@ -179,9 +132,7 @@

.mdc-button--raised,
.mdc-button--unelevated {
fieldset:disabled &,
&:disabled {
@include mdc-elevation(0);
@include mdc-theme-prop(color, text-primary-on-dark);

background-color: rgba(black, .15);
Expand All @@ -195,7 +146,6 @@
}

.mdc-button--stroked {
fieldset:disabled &,
&:disabled {
border-color: rgba(black, .38);

Expand Down

0 comments on commit 5266776

Please sign in to comment.