diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 06fea834dbf..eaab2ceaa6b 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -97,7 +97,7 @@ $icon-button-margin: rem(0.600) !default; &.md-raised { &:not([disabled]) { - @extend .md-shadow-bottom-z-1; + @include md-shadow-bottom-z-1(); } } @@ -136,7 +136,7 @@ $icon-button-margin: rem(0.600) !default; flex-grow: 0; flex-shrink: 0; - @extend .md-shadow-bottom-z-1; + @include md-shadow-bottom-z-1(); border-radius: 50%; background-clip: padding-box; overflow: hidden; @@ -163,10 +163,10 @@ $icon-button-margin: rem(0.600) !default; &.md-raised, &.md-fab { &.md-focused { - @extend .md-shadow-bottom-z-1; + @include md-shadow-bottom-z-1(); } &:active { - @extend .md-shadow-bottom-z-2; + @include md-shadow-bottom-z-2(); } } } diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 955df78d32e..028ba444f91 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -30,7 +30,7 @@ md-list { padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left; .md-subheader { - @extend .md-body-2; + @include md-body-2(); line-height: $list-header-line-height; } } @@ -177,18 +177,18 @@ md-list-item.md-3-line > .md-no-style { } h3 { - @extend .md-subhead; + @include md-subhead(); margin: $list-h3-margin; line-height: $list-header-line-height; } h4 { - @extend .md-body-2; + @include md-body-2(); font-weight: $list-h4-font-weight; margin: $list-h4-margin; line-height: $list-header-line-height; } p { - @extend .md-body-2; + @include md-body-2(); margin: $list-p-margin; line-height: $list-p-line-height; } diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index fecb842aeb4..075b0ea4d30 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -64,7 +64,7 @@ md-toolbar { } .md-toolbar-tools { - @extend .md-title; + @include md-title(); font-weight: 400; display: flex; align-items: center; diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss index c9f2e5b9eb0..8dd5a6ab2c9 100644 --- a/src/core/style/mixins.scss +++ b/src/core/style/mixins.scss @@ -31,6 +31,43 @@ } } +@mixin md-shadow-bottom-z-1() { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); +} + +@mixin md-shadow-bottom-z-2() { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); +} + +// Typography mixins + +@mixin md-title() { + font-size: $title-font-size-base; + font-weight: 500; + letter-spacing: 0.005em; +} + +@mixin md-body-1() { + font-size: $body-font-size-base; + font-weight: 400; + letter-spacing: 0.010em; + line-height: rem(2); +} + +@mixin md-body-2() { + font-size: $body-font-size-base; + font-weight: 500; + letter-spacing: 0.010em; + line-height: rem(2.4); +} + +@mixin md-subhead() { + font-size: $subhead-font-size-base; + font-weight: 400; + letter-spacing: 0.010em; + line-height: rem(2.4); +} + @function map-to-string($map) { $map-str: '{'; $keys: map-keys($map); diff --git a/src/core/style/structure.scss b/src/core/style/structure.scss index c3415c97d4f..17e48fac158 100644 --- a/src/core/style/structure.scss +++ b/src/core/style/structure.scss @@ -87,10 +87,10 @@ input { } .md-shadow-bottom-z-1 { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + @include md-shadow-bottom-z-1(); } .md-shadow-bottom-z-2 { - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); + @include md-shadow-bottom-z-2(); } .md-shadow-animated.md-shadow { diff --git a/src/core/style/typography.scss b/src/core/style/typography.scss index 43c42d2b94f..1069f11a44e 100644 --- a/src/core/style/typography.scss +++ b/src/core/style/typography.scss @@ -41,30 +41,19 @@ ul, ol, p, h1, h2, h3, h4, h5, h6 { line-height: rem(3.2); } .md-title { - font-size: $title-font-size-base; - font-weight: 500; - letter-spacing: 0.005em; + @include md-title(); } .md-subhead { - font-size: $subhead-font-size-base; - font-weight: 400; - letter-spacing: 0.010em; - line-height: rem(2.4); + @include md-subhead(); } /************ * Body Copy ************/ .md-body-1 { - font-size: $body-font-size-base; - font-weight: 400; - letter-spacing: 0.010em; - line-height: rem(2); + @include md-body-1(); } .md-body-2 { - font-size: $body-font-size-base; - font-weight: 500; - letter-spacing: 0.010em; - line-height: rem(2.4); + @include md-body-2(); } .md-caption { font-size: $caption-font-size-base;