mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat: integrate typography api into all components (#4375)
* feat: integrate typography api into all components * Includes the base typography styles for headers, body text etc. * Adds mixins for typography next to the theme and moves out all of the component typography styles into them. * Switches all the hardcoded typography values to use the ones from the spec. * Adjusts the letter spacing on some of the headers to align them to the spec. **Note:** While going through the components, I haven't checked whether the styles are accurate in regards to the spec. I've left notes in the places where the font sizes weren't a part of the pre-defined ones. * fix: address feedback * fix: explicit toolbar header typography * chore: add comments about letter spacing * fix: theme error * chore: re-add $mat-font-family * fix: missing typography for mat-icon-button
This commit is contained in:
Kristiyan Kostadinov
committed by
mmalerba
mmalerba
parent
0c03946ac6
commit
e650b049af
@@ -40,6 +40,7 @@ import {StyleDemo} from './style/style-demo';
|
||||
import {DataTableDemo} from './data-table/data-table-demo';
|
||||
import {PeopleDatabase} from './data-table/people-database';
|
||||
import {DatepickerDemo} from './datepicker/datepicker-demo';
|
||||
import {TypographyDemo} from './typography/typography-demo';
|
||||
import {
|
||||
CdkDataTableModule,
|
||||
FullscreenOverlayContainer,
|
||||
@@ -168,6 +169,7 @@ export class DemoMaterialModule {}
|
||||
RainyTabContent,
|
||||
FoggyTabContent,
|
||||
PlatformDemo,
|
||||
TypographyDemo,
|
||||
],
|
||||
providers: [
|
||||
{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div>
|
||||
<md-toolbar color="primary">
|
||||
<button md-icon-button (click)="start.open()">
|
||||
<md-icon class="md-24" >menu</md-icon>
|
||||
<md-icon class="md-24">menu</md-icon>
|
||||
</button>
|
||||
<div class="demo-toolbar">
|
||||
<h1>Angular Material Demos</h1>
|
||||
@@ -30,9 +30,10 @@
|
||||
<button md-button (click)="toggleChangeDetection()" title="Toggle change detection">
|
||||
Change detection: {{changeDetectionStrategy}}
|
||||
</button>
|
||||
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
|
||||
Fullscreen
|
||||
<button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
|
||||
<md-icon class="md-24">fullscreen</md-icon>
|
||||
</button>
|
||||
<button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
|
||||
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
|
||||
{{root.dir.toUpperCase()}}
|
||||
</button>
|
||||
|
||||
@@ -65,7 +65,8 @@ export class DemoApp {
|
||||
{name: 'Toolbar', route: 'toolbar'},
|
||||
{name: 'Tooltip', route: 'tooltip'},
|
||||
{name: 'Platform', route: 'platform'},
|
||||
{name: 'Style', route: 'style'}
|
||||
{name: 'Style', route: 'style'},
|
||||
{name: 'Typography', route: 'typography'}
|
||||
];
|
||||
|
||||
constructor(private _element: ElementRef) {
|
||||
|
||||
@@ -34,6 +34,7 @@ import {InputDemo} from '../input/input-demo';
|
||||
import {StyleDemo} from '../style/style-demo';
|
||||
import {DatepickerDemo} from '../datepicker/datepicker-demo';
|
||||
import {DataTableDemo} from '../data-table/data-table-demo';
|
||||
import {TypographyDemo} from '../typography/typography-demo';
|
||||
|
||||
export const DEMO_APP_ROUTES: Routes = [
|
||||
{path: '', component: Home},
|
||||
@@ -70,4 +71,5 @@ export const DEMO_APP_ROUTES: Routes = [
|
||||
{path: 'snack-bar', component: SnackBarDemo},
|
||||
{path: 'platform', component: PlatformDemo},
|
||||
{path: 'style', component: StyleDemo},
|
||||
{path: 'typography', component: TypographyDemo}
|
||||
];
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="theme.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
|
||||
<!-- FontAwesome for md-icon demo. -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<!-- via https://en.wikipedia.org/wiki/Pangram -->
|
||||
<h1 class="mat-h0">How vexingly quick daft zebras jump!</h1>
|
||||
<h1 class="mat-h1">Jackdaws love my big sphinx of quartz.</h1>
|
||||
<h2 class="mat-h2">The five boxing wizards jump quickly.</h2>
|
||||
<h3 class="mat-h3">Pack my box with five dozen liquor jugs.</h3>
|
||||
<h4 class="mat-h4">Bright vixens jump; dozy fowl quack.</h4>
|
||||
<h5 class="mat-h5">Sphinx of black quartz, judge my vow.</h5>
|
||||
<h6 class="mat-h6">The quick brown fox jumps over the lazy dog.</h6>
|
||||
|
||||
<div class="mat-body">
|
||||
<p>
|
||||
Lucas ipsum dolor sit amet coruscant fisto hutt dantooine darth binks amidala kessel grievous
|
||||
mara. Ackbar mandalore skywalker calamari. Calrissian binks tusken raider kit. Darth binks
|
||||
chewbacca skywalker. Moff baba padmé antilles darth ponda twi'lek darth. Dagobah naboo mara
|
||||
jawa dagobah ackbar ackbar darth. Mara mace r2-d2 mon naboo darth dantooine leia. Droid
|
||||
chewbacca mace han. Wampa hutt qui-gon solo jango secura tusken raider yoda. Droid boba mon
|
||||
mandalore jinn han binks. Maul darth kit wedge mace utapau darth darth fett.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Antilles antilles secura yavin. Leia luke owen hutt baba yoda hoth obi-wan. Moff thrawn solo
|
||||
jango mon. Antilles lobot hutt tusken raider moff jade kessel binks. Moff ewok sidious naboo
|
||||
darth ventress tusken raider. Bothan yavin moff fett organa binks jade binks. Mara moff darth
|
||||
jade sidious. Darth binks obi-wan padmé dagobah hutt ponda antilles ackbar. Fett gamorrean
|
||||
obi-wan sidious hutt maul. Organa darth k-3po kessel aayla. Hoth c-3po amidala biggs kenobi
|
||||
twi'lek twi'lek ahsoka. Obi-wan ackbar windu wicket kit c-3po.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Hutt naboo greedo skywalker hutt luuke ben. Hutt chewbacca jabba solo calrissian jade yoda
|
||||
amidala zabrak. Solo luke antilles c-3p0. Sith darth skywalker fett solo hutt skywalker c-3p0
|
||||
skywalker. Skywalker skywalker solo kessel darth fett. Skywalker skywalker c-3po jango.
|
||||
Alderaan darth boba calamari. Wicket alderaan darth darth chewbacca jango. Darth darth
|
||||
chewbacca ponda solo grievous hutt calrissian lando. Darth mon watto vader chewbacca.
|
||||
Lando mace luke yavin darth wookiee c-3po. Moff kessel skywalker yoda c-3po yavin.
|
||||
</p>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
.mat-body {
|
||||
max-width: 800px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'typography-demo',
|
||||
templateUrl: 'typography-demo.html',
|
||||
styleUrls: ['typography-demo.css'],
|
||||
})
|
||||
export class TypographyDemo { }
|
||||
@@ -21,4 +21,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-autocomplete-typography($config) { }
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
// Applies a focus style to an md-button-toggle element for each of the supported palettes.
|
||||
@mixin _mat-button-toggle-focus-color($theme) {
|
||||
@@ -36,3 +37,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-button-toggle-typography($config) {
|
||||
.mat-button-toggle {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@import '../core/style/layout-common';
|
||||
|
||||
$mat-button-toggle-padding: 0 16px !default;
|
||||
$mat-button-toggle-line-height: 36px !default;
|
||||
$mat-button-toggle-height: 36px !default;
|
||||
$mat-button-toggle-border-radius: 2px !default;
|
||||
|
||||
.mat-button-toggle-group {
|
||||
@@ -36,7 +36,6 @@ $mat-button-toggle-border-radius: 2px !default;
|
||||
|
||||
.mat-button-toggle {
|
||||
white-space: nowrap;
|
||||
font-family: $mat-font-family;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -47,7 +46,7 @@ $mat-button-toggle-border-radius: 2px !default;
|
||||
.mat-button-toggle-label-content {
|
||||
@include user-select(none);
|
||||
display: inline-block;
|
||||
line-height: $mat-button-toggle-line-height;
|
||||
line-height: $mat-button-toggle-height;
|
||||
padding: $mat-button-toggle-padding;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -38,11 +38,6 @@ $mat-mini-fab-padding: 8px !default;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
|
||||
// Typography.
|
||||
font-size: $mat-body-font-size-base;
|
||||
font-family: $mat-font-family;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
||||
// Sizing.
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
// Applies a focus style to an md-button element for each of the supported palettes.
|
||||
@mixin _mat-button-focus-color($theme) {
|
||||
@@ -117,4 +118,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin mat-button-typography($config) {
|
||||
.mat-button, .mat-raised-button, .mat-icon-button {
|
||||
@include mat-typography-level-to-styles($config, button);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-card-theme($theme) {
|
||||
@@ -15,3 +16,22 @@
|
||||
color: mat-color($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-card-typography($config) {
|
||||
.mat-card {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
font: {
|
||||
size: mat-font-size($config, headline);
|
||||
weight: mat-font-weight($config, headline);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-card-subtitle,
|
||||
.mat-card-content,
|
||||
.mat-card-header .mat-card-title {
|
||||
font-size: mat-font-size($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-18
@@ -14,7 +14,6 @@ $mat-card-header-size: 40px !default;
|
||||
position: relative;
|
||||
padding: $mat-card-default-padding;
|
||||
border-radius: $mat-card-border-radius;
|
||||
font-family: $mat-font-family;
|
||||
|
||||
&:not([class*='mat-elevation-z']) {
|
||||
@include mat-elevation(2);
|
||||
@@ -35,20 +34,8 @@ $mat-card-header-size: 40px !default;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
.mat-card-title, .mat-card-subtitle, .mat-card-content {
|
||||
@extend %mat-card-section-base;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
@extend %mat-card-section-base;
|
||||
font-size: $mat-body-font-size-base;
|
||||
}
|
||||
|
||||
.mat-card-content {
|
||||
@extend %mat-card-section-base;
|
||||
font-size: $mat-body-font-size-base;
|
||||
}
|
||||
|
||||
.mat-card-actions {
|
||||
@@ -106,10 +93,6 @@ $mat-card-header-size: 40px !default;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mat-card-header .mat-card-title {
|
||||
font-size: $mat-body-font-size-base;
|
||||
}
|
||||
|
||||
// TITLE-GROUP STYLES
|
||||
|
||||
// images grouped with title in title-group layout
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-checkbox-theme($theme) {
|
||||
@@ -83,3 +84,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-checkbox-typography($config) {
|
||||
.mat-checkbox {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
|
||||
// TODO(kara): Remove this style when fixing vertical baseline
|
||||
.mat-checkbox-layout .mat-checkbox-label {
|
||||
line-height: mat-line-height($config, body-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,8 +187,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
|
||||
}
|
||||
|
||||
.mat-checkbox {
|
||||
font-family: $mat-font-family;
|
||||
|
||||
// Animation
|
||||
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
|
||||
mat-elevation-transition-property-value();
|
||||
@@ -233,11 +231,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO(kara): Remove this style when fixing vertical baseline
|
||||
.mat-checkbox-layout .mat-checkbox-label {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.mat-checkbox-frame {
|
||||
@extend %mat-checkbox-outer-box;
|
||||
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
|
||||
$mat-chip-font-size: 13px;
|
||||
$mat-chip-line-height: 16px;
|
||||
|
||||
|
||||
@mixin mat-chips-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
@@ -47,3 +53,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-chips-typography($config) {
|
||||
.mat-chip:not(.mat-basic-chip) {
|
||||
font-size: $mat-chip-font-size;
|
||||
line-height: $mat-chip-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
$mat-chip-vertical-padding: 8px;
|
||||
$mat-chip-horizontal-padding: 12px;
|
||||
$mat-chip-font-size: 13px;
|
||||
$mat-chip-line-height: 16px;
|
||||
|
||||
$mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
|
||||
|
||||
@@ -17,9 +15,6 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
|
||||
padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding $mat-chip-vertical-padding $mat-chip-horizontal-padding;
|
||||
border-radius: $mat-chip-horizontal-padding * 2;
|
||||
|
||||
font-size: $mat-chip-font-size;
|
||||
line-height: $mat-chip-line-height;
|
||||
|
||||
// Apply a margin to adjacent sibling chips.
|
||||
& + & {
|
||||
margin: 0 0 0 $mat-chips-chip-margin;
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
@import 'option/option';
|
||||
@import 'option/option-theme';
|
||||
@import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
|
||||
@import 'typography/all-typography';
|
||||
|
||||
// Mixin that renders all of the core styles that are not theme-dependent.
|
||||
@mixin mat-core() {
|
||||
@@ -18,6 +19,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include angular-material-typography();
|
||||
@include mat-ripple();
|
||||
@include mat-option();
|
||||
@include cdk-a11y();
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../theming/palette';
|
||||
@import '../theming/theming';
|
||||
@import '../typography/typography-utils';
|
||||
|
||||
@mixin mat-option-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
@@ -42,3 +43,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-option-typography($config) {
|
||||
.mat-option {
|
||||
font: {
|
||||
family: mat-font-family($config);
|
||||
size: mat-font-size($config, subheading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,10 +9,10 @@ $mat-menu-overlay-min-width: 112px !default; // 56 * 2
|
||||
$mat-menu-overlay-max-width: 280px !default; // 56 * 5
|
||||
|
||||
$mat-menu-item-height: 48px !default;
|
||||
$mat-menu-font-size: 16px !default;
|
||||
$mat-menu-side-padding: 16px !default;
|
||||
$mat-menu-icon-margin: 16px !default;
|
||||
|
||||
|
||||
@mixin mat-menu-base() {
|
||||
@include mat-elevation(8);
|
||||
min-width: $mat-menu-overlay-min-width;
|
||||
@@ -31,8 +31,6 @@ $mat-menu-icon-margin: 16px !default;
|
||||
height: $mat-menu-item-height;
|
||||
padding: 0 $mat-menu-side-padding;
|
||||
|
||||
font-size: $mat-menu-font-size;
|
||||
font-family: $mat-font-family;
|
||||
text-align: left;
|
||||
text-decoration: none; // necessary to reset anchor tags
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
// Typography
|
||||
$mat-body-font-size-base: 14px !default;
|
||||
$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
|
||||
|
||||
// Media queries
|
||||
// TODO: Find a way to respect media query ranges.
|
||||
// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
|
||||
$mat-xsmall: 'max-width: 600px';
|
||||
$mat-small: 'max-width: 960px';
|
||||
|
||||
// TODO(crisbeto): this isn't being used anywhere within Material. keeping for backwards compat.
|
||||
$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
|
||||
|
||||
// TODO: Revisit all z-indices before beta
|
||||
// z-index master list
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
@import '../../tabs/tabs-theme';
|
||||
@import '../../toolbar/toolbar-theme';
|
||||
@import '../../tooltip/tooltip-theme';
|
||||
@import '../../snack-bar/simple-snack-bar-theme';
|
||||
|
||||
|
||||
// Create a theme.
|
||||
@@ -51,4 +52,5 @@
|
||||
@include mat-tabs-theme($theme);
|
||||
@include mat-toolbar-theme($theme);
|
||||
@include mat-tooltip-theme($theme);
|
||||
@include mat-simple-snack-bar-theme($theme);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
@import './typography';
|
||||
@import '../../autocomplete/autocomplete-theme';
|
||||
@import '../../button/button-theme';
|
||||
@import '../../button-toggle/button-toggle-theme';
|
||||
@import '../../card/card-theme';
|
||||
@import '../../checkbox/checkbox-theme';
|
||||
@import '../../chips/chips-theme';
|
||||
@import '../../dialog/dialog-theme';
|
||||
@import '../../grid-list/grid-list-theme';
|
||||
@import '../../icon/icon-theme';
|
||||
@import '../../input/input-theme';
|
||||
@import '../../list/list-theme';
|
||||
@import '../../menu/menu-theme';
|
||||
@import '../../progress-bar/progress-bar-theme';
|
||||
@import '../../progress-spinner/progress-spinner-theme';
|
||||
@import '../../radio/radio-theme';
|
||||
@import '../../select/select-theme';
|
||||
@import '../../sidenav/sidenav-theme';
|
||||
@import '../../slide-toggle/slide-toggle-theme';
|
||||
@import '../../slider/slider-theme';
|
||||
@import '../../tabs/tabs-theme';
|
||||
@import '../../toolbar/toolbar-theme';
|
||||
@import '../../tooltip/tooltip-theme';
|
||||
@import '../../snack-bar/simple-snack-bar-theme';
|
||||
@import '../option/option-theme';
|
||||
|
||||
|
||||
// Includes all of the typographic styles.
|
||||
@mixin angular-material-typography($config: mat-typography-config()) {
|
||||
@include mat-base-typography($config);
|
||||
@include mat-autocomplete-typography($config);
|
||||
@include mat-button-typography($config);
|
||||
@include mat-button-toggle-typography($config);
|
||||
@include mat-card-typography($config);
|
||||
@include mat-checkbox-typography($config);
|
||||
@include mat-chips-typography($config);
|
||||
@include mat-dialog-typography($config);
|
||||
@include mat-grid-list-typography($config);
|
||||
@include mat-icon-typography($config);
|
||||
@include mat-input-typography($config);
|
||||
@include mat-menu-typography($config);
|
||||
@include mat-progress-bar-typography($config);
|
||||
@include mat-progress-spinner-typography($config);
|
||||
@include mat-radio-typography($config);
|
||||
@include mat-select-typography($config);
|
||||
@include mat-sidenav-typography($config);
|
||||
@include mat-slide-toggle-typography($config);
|
||||
@include mat-slider-typography($config);
|
||||
@include mat-tabs-typography($config);
|
||||
@include mat-toolbar-typography($config);
|
||||
@include mat-tooltip-typography($config);
|
||||
@include mat-list-typography($config);
|
||||
@include mat-option-typography($config);
|
||||
@include mat-simple-snack-bar-typography($config);
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
// Represents a collection of typography levels.
|
||||
// Defaults come from https://material.io/guidelines/style/typography.html
|
||||
@function mat-typography-config(
|
||||
$font-family: 'Roboto, sans-serif',
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat-typography-level(112px, 112px, 300),
|
||||
$display-3: mat-typography-level(56px, 56px, 400),
|
||||
$display-2: mat-typography-level(45px, 48px, 400),
|
||||
@@ -42,17 +42,30 @@
|
||||
}
|
||||
|
||||
// Adds the base typography styles, based on a config.
|
||||
@mixin mat-typography($config: mat-typography-config(), $selector: '.mat-typography') {
|
||||
// TODO(crisbeto): the headers need to handle margins as well.
|
||||
@mixin mat-base-typography($config, $selector: '.mat-typography') {
|
||||
.mat-h0, .mat-hero-header {
|
||||
@include mat-typography-level-to-styles($config, display-4);
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.mat-h1, #{$selector} h1 {
|
||||
@include mat-typography-level-to-styles($config, display-3);
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.mat-h2, #{$selector} h2 {
|
||||
@include mat-typography-level-to-styles($config, display-2);
|
||||
@include mat-typography-level-to-styles($config, display-2)
|
||||
|
||||
// Note: The spec doesn't mention letter spacing. The value comes from
|
||||
// eyeballing it until it looked exactly like the spec examples.;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.mat-h3, #{$selector} h3 {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-dialog-theme($theme) {
|
||||
@@ -9,3 +10,9 @@
|
||||
background: mat-color($background, dialog);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-dialog-typography($config) {
|
||||
.mat-dialog-title {
|
||||
@include mat-typography-level-to-styles($config, title);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,8 +36,6 @@ $mat-dialog-max-height: 65vh !default;
|
||||
}
|
||||
|
||||
.mat-dialog-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 0 0 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
@import '../core/style/list-common';
|
||||
|
||||
|
||||
// Include this empty mixin for consistency with the other components.
|
||||
@mixin mat-grid-list-theme($theme) { }
|
||||
|
||||
@mixin mat-grid-list-typography($config) {
|
||||
.mat-grid-tile-header,
|
||||
.mat-grid-tile-footer {
|
||||
@include mat-line-base(mat-font-size($config, caption));
|
||||
font-size: mat-font-size($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,10 +8,6 @@ $mat-grid-list-two-line-height: 68px;
|
||||
// side padding for text in tile headers and footers
|
||||
$mat-grid-list-text-padding: 16px;
|
||||
|
||||
// font styles for text in tile headers and footers
|
||||
$mat-grid-list-font-size: 16px;
|
||||
$mat-grid-list-secondary-font: 12px;
|
||||
|
||||
.mat-grid-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -42,7 +38,6 @@ $mat-grid-list-secondary-font: 12px;
|
||||
// Headers & footers
|
||||
.mat-grid-tile-header,
|
||||
.mat-grid-tile-footer {
|
||||
@include mat-line-base($mat-grid-list-secondary-font);
|
||||
@include mat-normalize-text();
|
||||
|
||||
display: flex;
|
||||
@@ -52,7 +47,6 @@ $mat-grid-list-secondary-font: 12px;
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
overflow: hidden;
|
||||
padding: 0 $mat-grid-list-text-padding;
|
||||
font-size: $mat-grid-list-font-size;
|
||||
|
||||
// Positioning
|
||||
position: absolute;
|
||||
|
||||
@@ -23,3 +23,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-icon-typography($config) { }
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-input-theme($theme) {
|
||||
@@ -88,3 +89,22 @@
|
||||
color: $input-underline-color-warn;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-input-typography($config) {
|
||||
.mat-input-container {
|
||||
font-family: mat-font-family($config);
|
||||
line-height: normal;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-input-placeholder {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.mat-input-subscript-wrapper {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,8 +21,6 @@ $mat-input-underline-disabled-background-image:
|
||||
.mat-input-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-family: $mat-font-family;
|
||||
line-height: normal;
|
||||
|
||||
// To avoid problems with text-align.
|
||||
text-align: left;
|
||||
@@ -36,7 +34,6 @@ $mat-input-underline-disabled-background-image:
|
||||
& .mat-datepicker-toggle {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
@@ -134,7 +131,6 @@ $mat-input-underline-disabled-background-image:
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
font-size: 100%;
|
||||
pointer-events: none; // We shouldn't catch mouse events (let them through).
|
||||
z-index: 1;
|
||||
padding-top: 1em;
|
||||
@@ -238,7 +234,6 @@ $mat-input-underline-disabled-background-image:
|
||||
$line-height: 1.2em;
|
||||
|
||||
position: absolute;
|
||||
font-size: 75%;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
margin-top: -$line-height;
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
@import '../core/style/list-common';
|
||||
|
||||
|
||||
@mixin mat-list-theme($theme) {
|
||||
@@ -28,3 +30,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-list-typography($config) {
|
||||
$font-family: mat-font-family($config);
|
||||
|
||||
.mat-list-item {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
// Default list
|
||||
.mat-list, .mat-nav-list {
|
||||
.mat-list-item {
|
||||
font-size: mat-font-size($config, subheading);
|
||||
@include mat-line-base(mat-font-size($config, body-1));
|
||||
}
|
||||
|
||||
.mat-subheader {
|
||||
@include mat-typography-level-to-styles($config, body-2);
|
||||
}
|
||||
}
|
||||
|
||||
// Dense list
|
||||
.mat-list[dense], .mat-nav-list[dense] {
|
||||
.mat-list-item {
|
||||
font-size: mat-font-size($config, caption);
|
||||
@include mat-line-base(mat-font-size($config, caption));
|
||||
}
|
||||
|
||||
.mat-subheader {
|
||||
font: mat-font-weight($config, body-2) mat-font-size($config, caption) $font-family;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+8
-30
@@ -7,8 +7,6 @@ $mat-list-avatar-size: 40px;
|
||||
|
||||
// Normal list variables
|
||||
$mat-list-top-padding: 8px;
|
||||
$mat-list-font-size: 16px;
|
||||
$mat-list-secondary-font: 14px;
|
||||
// height for single-line lists
|
||||
$mat-list-base-height: 48px;
|
||||
// height for single-line lists with avatars
|
||||
@@ -20,7 +18,6 @@ $mat-list-icon-size: 24px;
|
||||
|
||||
// Dense list variables
|
||||
$mat-dense-top-padding: 4px;
|
||||
$mat-dense-font-size: 13px;
|
||||
$mat-dense-base-height: 40px;
|
||||
$mat-dense-avatar-height: 48px;
|
||||
$mat-dense-two-line-height: 60px;
|
||||
@@ -29,7 +26,7 @@ $mat-dense-list-icon-size: 20px;
|
||||
|
||||
// This mixin provides all list-item styles, changing font size and height
|
||||
// based on whether the list is in dense mode.
|
||||
@mixin mat-list-item-base($font-size, $base-height, $avatar-height,
|
||||
@mixin mat-list-item-base($base-height, $avatar-height,
|
||||
$two-line-height, $three-line-height, $icon-size) {
|
||||
|
||||
// Prevents the wrapper `mat-list-item-content` from collapsing due to it
|
||||
@@ -40,9 +37,7 @@ $mat-dense-list-icon-size: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-family: $mat-font-family;
|
||||
box-sizing: border-box;
|
||||
font-size: $font-size;
|
||||
height: $base-height;
|
||||
padding: 0 $mat-list-side-padding;
|
||||
position: relative;
|
||||
@@ -111,18 +106,16 @@ $mat-dense-list-icon-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// This mixin provides all subheader styles, adjusting heights and padding
|
||||
// based on whether the list is in dense mode.
|
||||
@mixin mat-subheader-base($top-padding, $secondary-size, $base-height) {
|
||||
.mat-subheader {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: $base-height;
|
||||
padding: $mat-list-side-padding;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
font-family: $mat-font-family;
|
||||
font-size: $secondary-size;
|
||||
font-weight: 500;
|
||||
// This mixin adjusts the heights and padding based on whether the list is in dense mode.
|
||||
@mixin mat-subheader-spacing($top-padding, $base-height) {
|
||||
height: $base-height;
|
||||
|
||||
&:first-child {
|
||||
margin-top: -$top-padding;
|
||||
@@ -134,25 +127,17 @@ $mat-dense-list-icon-size: 20px;
|
||||
display: block;
|
||||
|
||||
.mat-subheader {
|
||||
@include mat-subheader-base(
|
||||
$mat-list-top-padding,
|
||||
$mat-list-secondary-font,
|
||||
$mat-list-base-height
|
||||
);
|
||||
@include mat-subheader-spacing($mat-list-top-padding, $mat-list-base-height);
|
||||
}
|
||||
|
||||
|
||||
.mat-list-item {
|
||||
@include mat-list-item-base(
|
||||
$mat-list-font-size,
|
||||
$mat-list-base-height,
|
||||
$mat-list-avatar-height,
|
||||
$mat-list-two-line-height,
|
||||
$mat-list-three-line-height,
|
||||
$mat-list-icon-size
|
||||
);
|
||||
|
||||
@include mat-line-base($mat-list-secondary-font);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -162,24 +147,17 @@ $mat-dense-list-icon-size: 20px;
|
||||
display: block;
|
||||
|
||||
.mat-subheader {
|
||||
@include mat-subheader-base(
|
||||
$mat-dense-top-padding,
|
||||
$mat-dense-font-size,
|
||||
$mat-dense-base-height
|
||||
);
|
||||
@include mat-subheader-spacing($mat-dense-top-padding, $mat-dense-base-height);
|
||||
}
|
||||
|
||||
.mat-list-item {
|
||||
@include mat-list-item-base(
|
||||
$mat-dense-font-size,
|
||||
$mat-dense-base-height,
|
||||
$mat-dense-avatar-height,
|
||||
$mat-dense-two-line-height,
|
||||
$mat-dense-three-line-height,
|
||||
$mat-dense-list-icon-size
|
||||
);
|
||||
|
||||
@include mat-line-base($mat-dense-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-menu-theme($theme) {
|
||||
@@ -28,3 +29,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-menu-typography($config) {
|
||||
.mat-menu-item {
|
||||
font: {
|
||||
family: mat-font-family($config);
|
||||
size: mat-font-size($config, subheading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,6 +48,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-progress-bar-typography($config) { }
|
||||
|
||||
// TODO(josephperrott): Find better way to inline svgs.
|
||||
// In buffer mode a repeated SVG object is used as a background.
|
||||
// Each of the following defines the SVG object for each of the class defined colors.
|
||||
|
||||
@@ -21,3 +21,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-progress-spinner-typography($config) { }
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin mat-radio-theme($theme) {
|
||||
@@ -39,3 +40,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-radio-typography($config) {
|
||||
.mat-radio-button {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
|
||||
// Top-level host container.
|
||||
.mat-radio-button {
|
||||
display: inline-block;
|
||||
font-family: $mat-font-family;
|
||||
}
|
||||
|
||||
// Inner label container, wrapping entire element.
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
@mixin _mat-select-inner-content-theme($palette) {
|
||||
$color: mat-color($palette);
|
||||
@@ -58,3 +59,13 @@
|
||||
@include _mat-select-inner-content-theme($warn);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-select-typography($config) {
|
||||
.mat-select {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
|
||||
.mat-select-trigger {
|
||||
font-size: mat-font-size($config, subheading);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,12 +10,10 @@ $mat-select-trigger-min-width: 112px !default;
|
||||
$mat-select-arrow-size: 5px !default;
|
||||
$mat-select-arrow-margin: 4px !default;
|
||||
$mat-select-panel-max-height: 256px !default;
|
||||
$mat-select-trigger-font-size: 16px !default;
|
||||
|
||||
.mat-select {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
font-family: $mat-font-family;
|
||||
}
|
||||
|
||||
.mat-select-trigger {
|
||||
@@ -26,7 +24,6 @@ $mat-select-trigger-font-size: 16px !default;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-size: $mat-select-trigger-font-size;
|
||||
|
||||
[aria-disabled='true'] & {
|
||||
@include user-select(none);
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
// We use invert() here to have the darken the background color expected to be used. If the
|
||||
// background is light, we use a dark backdrop. If the background is dark,
|
||||
// background is light, we use a dark backdrop. If the background is dark,
|
||||
// we use a light backdrop.
|
||||
$sidenav-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
|
||||
$sidenav-background-color: mat-color($background, dialog) !default;
|
||||
@@ -35,3 +35,5 @@
|
||||
background-color: $sidenav-backdrop-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-sidenav-typography($config) { }
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
|
||||
// Do not apply the checked colors if the toggle is disabled, because the specificity would be to high for
|
||||
@@ -58,7 +59,7 @@
|
||||
@include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
|
||||
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
|
||||
}
|
||||
|
||||
|
||||
&.mat-warn {
|
||||
@include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
|
||||
@include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
|
||||
@@ -86,3 +87,9 @@
|
||||
background-color: $bar-normal-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-slide-toggle-typography($config) {
|
||||
.mat-slide-toggle-content {
|
||||
@include mat-typography-level-to-styles($config, button);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,14 +41,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
|
||||
}
|
||||
}
|
||||
|
||||
// The content element is responsible for the users content.
|
||||
// It will apply the given typography styles and align at the end of the slide-toggle.
|
||||
.mat-slide-toggle-content {
|
||||
font-size: $mat-body-font-size-base;
|
||||
font-family: $mat-font-family;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// The label element is our root container for the slide-toggle / switch indicator and label text.
|
||||
// It has to be a label, to support accessibility for the visual hidden input.
|
||||
.mat-slide-toggle-label {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
@mixin _mat-slider-inner-content-theme($palette) {
|
||||
.mat-slider-track-fill,
|
||||
@@ -127,3 +128,12 @@
|
||||
$mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-slider-typography($config) {
|
||||
.mat-slider-thumb-label-text {
|
||||
font: {
|
||||
size: mat-font-size($config, caption);
|
||||
weight: mat-font-weight($config, body-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,8 +144,6 @@ $mat-slider-focus-ring-size: 30px !default;
|
||||
|
||||
.mat-slider-thumb-label-text {
|
||||
z-index: 1;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
@mixin mat-simple-snack-bar-theme($theme) { }
|
||||
|
||||
@mixin mat-simple-snack-bar-typography($config) {
|
||||
.mat-simple-snackbar {
|
||||
font: {
|
||||
family: mat-font-family($config);
|
||||
size: mat-font-size($config, body-1);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
line-height: 1;
|
||||
font: {
|
||||
family: inherit;
|
||||
size: inherit;
|
||||
weight: mat-font-weight($config, button);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,10 +9,6 @@ $mat-snack-bar-button-margin: 48px !default;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
font: {
|
||||
size: $mat-body-font-size-base;
|
||||
family: $mat-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
@@ -20,14 +16,8 @@ $mat-snack-bar-button-margin: 48px !default;
|
||||
|
||||
background: none;
|
||||
color: inherit;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: $mat-snack-bar-button-margin;
|
||||
font: {
|
||||
family: inherit;
|
||||
size: inherit;
|
||||
weight: 600;
|
||||
}
|
||||
|
||||
[dir='rtl'] & {
|
||||
margin-right: $mat-snack-bar-button-margin;
|
||||
|
||||
@@ -9,9 +9,6 @@ $mat-tab-animation-duration: 500ms !default;
|
||||
line-height: $mat-tab-bar-height;
|
||||
height: $mat-tab-bar-height;
|
||||
padding: 0 12px;
|
||||
font-size: $mat-body-font-size-base;
|
||||
font-family: $mat-font-family;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.6;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
@mixin mat-tabs-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@@ -38,3 +39,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-tabs-typography($config) {
|
||||
.mat-tab-group {
|
||||
font-family: mat-font-family($config);
|
||||
}
|
||||
|
||||
.mat-tab-label, .mat-tab-link {
|
||||
@include mat-typography-level-to-styles($config, button);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: $mat-font-family;
|
||||
|
||||
&.mat-tab-group-inverted-header {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
|
||||
@mixin _mat-toolbar-color($palette) {
|
||||
@@ -31,3 +32,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-toolbar-typography($config) {
|
||||
.mat-toolbar,
|
||||
.mat-toolbar h1,
|
||||
.mat-toolbar h2,
|
||||
.mat-toolbar h3,
|
||||
.mat-toolbar h4,
|
||||
.mat-toolbar h5,
|
||||
.mat-toolbar h6 {
|
||||
@include mat-typography-level-to-styles($config, title);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ $mat-toolbar-height-desktop: 64px !default;
|
||||
$mat-toolbar-height-mobile-portrait: 56px !default;
|
||||
$mat-toolbar-height-mobile-landscape: 48px !default;
|
||||
|
||||
$mat-toolbar-font-size: 20px !default;
|
||||
$mat-toolbar-padding: 16px !default;
|
||||
|
||||
|
||||
@@ -20,16 +19,8 @@ $mat-toolbar-padding: 16px !default;
|
||||
.mat-toolbar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
|
||||
// Font Styling
|
||||
font-size: $mat-toolbar-font-size;
|
||||
font-weight: 500;
|
||||
font-family: $mat-font-family;
|
||||
|
||||
padding: 0 $mat-toolbar-padding;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.mat-toolbar-row {
|
||||
@@ -42,7 +33,7 @@ $mat-toolbar-padding: 16px !default;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
// Per Material specs a toolbar cannot have multiple lines inside of a single row.
|
||||
// Per Material specs a toolbar cannot have multiple lines inside of a single row.
|
||||
// Disable text wrapping inside of the toolbar. Developers are still able to overwrite it.
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
@import '../core/theming/palette';
|
||||
@import '../core/theming/theming';
|
||||
@import '../core/typography/typography-utils';
|
||||
|
||||
// TODO(crisbeto): these doesn't correspond to any typography levels
|
||||
// and the width/height appear to be off from the spec.
|
||||
$mat-tooltip-target-height: 22px;
|
||||
$mat-tooltip-font-size: 10px;
|
||||
$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
|
||||
|
||||
@mixin mat-tooltip-theme($theme) {
|
||||
.mat-tooltip {
|
||||
background: mat-color($mat-grey, 700, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mat-tooltip-typography($config) {
|
||||
.mat-tooltip {
|
||||
font-family: mat-font-family($config);
|
||||
font-size: $mat-tooltip-font-size;
|
||||
padding-top: $mat-tooltip-vertical-padding;
|
||||
padding-bottom: $mat-tooltip-vertical-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
@import '../core/style/variables';
|
||||
@import '../core/a11y/a11y';
|
||||
|
||||
|
||||
$mat-tooltip-target-height: 22px;
|
||||
$mat-tooltip-max-width: 250px;
|
||||
$mat-tooltip-font-size: 10px;
|
||||
$mat-tooltip-margin: 14px;
|
||||
$mat-tooltip-horizontal-padding: 8px;
|
||||
$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
|
||||
$mat-tooltip-max-width: 250px;
|
||||
$mat-tooltip-margin: 14px;
|
||||
|
||||
:host {
|
||||
pointer-events: none;
|
||||
@@ -15,12 +11,11 @@ $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-s
|
||||
|
||||
.mat-tooltip {
|
||||
color: white;
|
||||
padding: $mat-tooltip-vertical-padding $mat-tooltip-horizontal-padding;
|
||||
border-radius: 2px;
|
||||
font-family: $mat-font-family;
|
||||
font-size: $mat-tooltip-font-size;
|
||||
margin: $mat-tooltip-margin;
|
||||
max-width: $mat-tooltip-max-width;
|
||||
padding-left: $mat-tooltip-horizontal-padding;
|
||||
padding-right: $mat-tooltip-horizontal-padding;
|
||||
|
||||
@include cdk-high-contrast {
|
||||
outline: solid 1px;
|
||||
|
||||
Reference in New Issue
Block a user