diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html index dedeb51962c..54601cc9fb9 100644 --- a/demos/top-app-bar.html +++ b/demos/top-app-bar.html @@ -161,7 +161,7 @@

Demo Controls

-

Common Options

+ Common Options
@@ -172,14 +172,14 @@

Common Opt

-

Top App Bar Specific Options

+ Top App Bar Specific Options
-

Short Top App Bar Specific Options

+ Short Top App Bar Specific Options
diff --git a/demos/top-app-bar.scss b/demos/top-app-bar.scss index e77d9a41ea2..b9814d5949e 100644 --- a/demos/top-app-bar.scss +++ b/demos/top-app-bar.scss @@ -69,3 +69,7 @@ input[type="checkbox"]:disabled + label { flex: 1 1 auto; flex-direction: row; } + +.demo-options-heading { + margin-bottom: 20px; +} diff --git a/demos/typography.html b/demos/typography.html index 5b3877cee25..155e6e16d29 100644 --- a/demos/typography.html +++ b/demos/typography.html @@ -65,25 +65,6 @@

Subheading 1

in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

- -
-

Styles with margin adjustments

-

Display 4

-

Display 3

-

Display 2

-

Display 1

-

Headline

-

- Title Caption. -

-

Subheading 2

-

Subheading 1

-

Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit - in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

- -
diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md index f116dc51785..038793f1bf2 100644 --- a/packages/mdc-typography/README.md +++ b/packages/mdc-typography/README.md @@ -90,9 +90,6 @@ CSS Class | Description `mdc-typography--body1` | Sets font properties as Body 1 `mdc-typography--caption` | Sets font properties as Caption `mdc-typography--button` | Sets font properties as Button -`mdc-typography--adjust-margin` | Positions text, used in conjunction with font classes above - -> **A note about `mdc-typography--adjust-margin`**, `mdc-typography--adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography--adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly. ### Sass Variables and Mixins @@ -100,16 +97,13 @@ Mixin | Description --- | --- `mdc-typography-base` | Sets the font to Roboto `mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto -`mdc-typography-adjust-margin($style)` | Positions text `mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis -> **A note about `mdc-typography-adjust-margin`**, `mdc-typography-adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography-adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly. - > **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`. #### `$style` Values -These styles can be used as the `$style` argument for `mdc-typography` and `mdc-typography-adjust-margin` mixins. +These styles can be used as the `$style` argument for `mdc-typography` mixin. * `display4` * `display3` diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss index 1315383d34d..ed8dd6eae89 100644 --- a/packages/mdc-typography/_mixins.scss +++ b/packages/mdc-typography/_mixins.scss @@ -31,17 +31,11 @@ @include mdc-typography-base; - $style-props: map-remove($style-props, margin); - @each $key, $value in $style-props { #{$key}: $value; } } -@mixin mdc-typography-adjust-margin($style) { - margin: map-get(map-get($mdc-typography-styles, $style), margin); -} - // Element must be `display: block` or `display: inline-block` for this to work. @mixin mdc-typography-overflow-ellipsis { text-overflow: ellipsis; diff --git a/packages/mdc-typography/_variables.scss b/packages/mdc-typography/_variables.scss index 402c0b49486..fce46e95d91 100644 --- a/packages/mdc-typography/_variables.scss +++ b/packages/mdc-typography/_variables.scss @@ -35,7 +35,6 @@ $mdc-typography-styles: ( line-height: 7rem, /* 112sp */ font-weight: map-get($mdc-typography-font-weight-values, light), letter-spacing: -.04em, - margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */, text-decoration: inherit, text-transform: inherit ), @@ -44,7 +43,6 @@ $mdc-typography-styles: ( line-height: 3.5rem, /* 56px */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: -.02em, - margin: -8px 0 64px -.07em, text-decoration: inherit, text-transform: inherit ), @@ -53,7 +51,6 @@ $mdc-typography-styles: ( line-height: 3rem, /* 48px */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */, text-decoration: inherit, text-transform: inherit ), @@ -62,7 +59,6 @@ $mdc-typography-styles: ( line-height: 2.5rem, /* 40sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */, text-decoration: inherit, text-transform: inherit ), @@ -71,7 +67,6 @@ $mdc-typography-styles: ( line-height: 2rem, /* 32sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: normal, - margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */, text-decoration: inherit, text-transform: inherit ), @@ -80,7 +75,6 @@ $mdc-typography-styles: ( line-height: 2rem, /* 32sp */ font-weight: map-get($mdc-typography-font-weight-values, medium), letter-spacing: .02em, - margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */, text-decoration: inherit, text-transform: inherit ), @@ -89,7 +83,6 @@ $mdc-typography-styles: ( line-height: 1.75rem, /* 28sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */, text-decoration: inherit, text-transform: inherit ), @@ -98,7 +91,6 @@ $mdc-typography-styles: ( line-height: 1.5rem, /* 24sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */, text-decoration: inherit, text-transform: inherit ), @@ -107,7 +99,6 @@ $mdc-typography-styles: ( line-height: 1.5rem, /* 24sp */ font-weight: map-get($mdc-typography-font-weight-values, medium), letter-spacing: .04em, - margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */, text-decoration: inherit, text-transform: inherit ), @@ -116,7 +107,6 @@ $mdc-typography-styles: ( line-height: 1.25rem, /* 20sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .04em, - margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */, text-decoration: inherit, text-transform: inherit ), @@ -125,7 +115,6 @@ $mdc-typography-styles: ( line-height: 1.25rem, /* 20sp */ font-weight: map-get($mdc-typography-font-weight-values, regular), letter-spacing: .08em, - margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */, text-decoration: inherit, text-transform: inherit ), @@ -134,7 +123,6 @@ $mdc-typography-styles: ( line-height: 2.25rem, /* 36sp */ font-weight: map-get($mdc-typography-font-weight-values, medium), letter-spacing: .04em, - margin: inherit /* We do not have adjust margin for button */, text-decoration: none, text-transform: uppercase ) diff --git a/packages/mdc-typography/mdc-typography.scss b/packages/mdc-typography/mdc-typography.scss index 048bd5728ae..4d8fbd62ef2 100644 --- a/packages/mdc-typography/mdc-typography.scss +++ b/packages/mdc-typography/mdc-typography.scss @@ -25,8 +25,4 @@ .mdc-typography--#{$style} { @include mdc-typography($style); } - - .mdc-typography--adjust-margin.mdc-typography--#{$style} { - @include mdc-typography-adjust-margin($style); - } }