feat(material): first ng2 material design components
This commit is contained in:
Jeremy Elbourn
committed by
Yegor Jbanov
Yegor Jbanov
parent
ffe13078e5
commit
f149ae79c6
8
modules/angular2_material/src/core/constants.js
vendored
Normal file
8
modules/angular2_material/src/core/constants.js
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
// TODO: this is not how TS&Dart enums are defined and it definitely won't
|
||||
// work in Dart. Switch to proper enums when we support them.
|
||||
//export var KeyCodes = {
|
||||
// SPACE: 32,
|
||||
// UP: 38,
|
||||
// DOWN: 40
|
||||
//};
|
||||
13
modules/angular2_material/src/core/style/default-theme.scss
Normal file
13
modules/angular2_material/src/core/style/default-theme.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import 'theme-functions';
|
||||
@import 'palette';
|
||||
|
||||
|
||||
// Person creating a theme writes variables like this:
|
||||
$md-is-dark-theme: false;
|
||||
|
||||
|
||||
$md-primary: md-palette($md-indigo, 500, 100, 700, $md-contrast-palettes);
|
||||
$md-accent: md-palette($md-red, A200, A100, A400, $md-contrast-palettes);
|
||||
$md-background: md-palette($md-grey, 500, 300, 600, $md-contrast-palettes);
|
||||
$md-warn: md-palette($md-red, 500, 300, 800, $md-contrast-palettes);
|
||||
$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
|
||||
666
modules/angular2_material/src/core/style/palette.scss
Normal file
666
modules/angular2_material/src/core/style/palette.scss
Normal file
@ -0,0 +1,666 @@
|
||||
// Core color palettes.
|
||||
$md-red: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #f44336,
|
||||
600: #e53935,
|
||||
700: #d32f2f,
|
||||
800: #c62828,
|
||||
900: #b71c1c,
|
||||
A100: #ff8a80,
|
||||
A200: #ff5252,
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
);
|
||||
|
||||
$md-pink: (
|
||||
50: #fce4ec,
|
||||
100: #f8bbd0,
|
||||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
400: #ec407a,
|
||||
500: #e91e63,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
900: #880e4f,
|
||||
A100: #ff80ab,
|
||||
A200: #ff4081,
|
||||
A400: #f50057,
|
||||
A700: #c51162,
|
||||
);
|
||||
|
||||
$md-purple: (
|
||||
50: #f3e5f5,
|
||||
100: #e1bee7,
|
||||
200: #ce93d8,
|
||||
300: #ba68c8,
|
||||
400: #ab47bc,
|
||||
500: #9c27b0,
|
||||
600: #8e24aa,
|
||||
700: #7b1fa2,
|
||||
800: #6a1b9a,
|
||||
900: #4a148c,
|
||||
A100: #ea80fc,
|
||||
A200: #e040fb,
|
||||
A400: #d500f9,
|
||||
A700: #aa00ff,
|
||||
);
|
||||
|
||||
$md-deep-purple: (
|
||||
50: #ede7f6,
|
||||
100: #d1c4e9,
|
||||
200: #b39ddb,
|
||||
300: #9575cd,
|
||||
400: #7e57c2,
|
||||
500: #673ab7,
|
||||
600: #5e35b1,
|
||||
700: #512da8,
|
||||
800: #4527a0,
|
||||
900: #311b92,
|
||||
A100: #b388ff,
|
||||
A200: #7c4dff,
|
||||
A400: #651fff,
|
||||
A700: #6200ea,
|
||||
);
|
||||
|
||||
$md-indigo: (
|
||||
50: #e8eaf6,
|
||||
100: #c5cae9,
|
||||
200: #9fa8da,
|
||||
300: #7986cb,
|
||||
400: #5c6bc0,
|
||||
500: #3f51b5,
|
||||
600: #3949ab,
|
||||
700: #303f9f,
|
||||
800: #283593,
|
||||
900: #1a237e,
|
||||
A100: #8c9eff,
|
||||
A200: #536dfe,
|
||||
A400: #3d5afe,
|
||||
A700: #304ffe,
|
||||
);
|
||||
|
||||
$md-blue: (
|
||||
50: #e3f2fd,
|
||||
100: #bbdefb,
|
||||
200: #90caf9,
|
||||
300: #64b5f6,
|
||||
400: #42a5f5,
|
||||
500: #2196f3,
|
||||
600: #1e88e5,
|
||||
700: #1976d2,
|
||||
800: #1565c0,
|
||||
900: #0d47a1,
|
||||
A100: #82b1ff,
|
||||
A200: #448aff,
|
||||
A400: #2979ff,
|
||||
A700: #2962ff,
|
||||
);
|
||||
|
||||
$md-light-blue: (
|
||||
50: #e1f5fe,
|
||||
100: #b3e5fc,
|
||||
200: #81d4fa,
|
||||
300: #4fc3f7,
|
||||
400: #29b6f6,
|
||||
500: #03a9f4,
|
||||
600: #039be5,
|
||||
700: #0288d1,
|
||||
800: #0277bd,
|
||||
900: #01579b,
|
||||
A100: #80d8ff,
|
||||
A200: #40c4ff,
|
||||
A400: #00b0ff,
|
||||
A700: #0091ea,
|
||||
);
|
||||
|
||||
$md-cyan: (
|
||||
50: #e0f7fa,
|
||||
100: #b2ebf2,
|
||||
200: #80deea,
|
||||
300: #4dd0e1,
|
||||
400: #26c6da,
|
||||
500: #00bcd4,
|
||||
600: #00acc1,
|
||||
700: #0097a7,
|
||||
800: #00838f,
|
||||
900: #006064,
|
||||
A100: #84ffff,
|
||||
A200: #18ffff,
|
||||
A400: #00e5ff,
|
||||
A700: #00b8d4,
|
||||
);
|
||||
|
||||
$md-teal: (
|
||||
50: #e0f2f1,
|
||||
100: #b2dfdb,
|
||||
200: #80cbc4,
|
||||
300: #4db6ac,
|
||||
400: #26a69a,
|
||||
500: #009688,
|
||||
600: #00897b,
|
||||
700: #00796b,
|
||||
800: #00695c,
|
||||
900: #004d40,
|
||||
A100: #a7ffeb,
|
||||
A200: #64ffda,
|
||||
A400: #1de9b6,
|
||||
A700: #00bfa5,
|
||||
);
|
||||
|
||||
$md-green: (
|
||||
50: #e8f5e9,
|
||||
100: #c8e6c9,
|
||||
200: #a5d6a7,
|
||||
300: #81c784,
|
||||
400: #66bb6a,
|
||||
500: #4caf50,
|
||||
600: #43a047,
|
||||
700: #388e3c,
|
||||
800: #2e7d32,
|
||||
900: #1b5e20,
|
||||
A100: #b9f6ca,
|
||||
A200: #69f0ae,
|
||||
A400: #00e676,
|
||||
A700: #00c853,
|
||||
);
|
||||
|
||||
$md-light-green: (
|
||||
50: #f1f8e9,
|
||||
100: #dcedc8,
|
||||
200: #c5e1a5,
|
||||
300: #aed581,
|
||||
400: #9ccc65,
|
||||
500: #8bc34a,
|
||||
600: #7cb342,
|
||||
700: #689f38,
|
||||
800: #558b2f,
|
||||
900: #33691e,
|
||||
A100: #ccff90,
|
||||
A200: #b2ff59,
|
||||
A400: #76ff03,
|
||||
A700: #64dd17,
|
||||
);
|
||||
|
||||
$md-lime: (
|
||||
50: #f9fbe7,
|
||||
100: #f0f4c3,
|
||||
200: #e6ee9c,
|
||||
300: #dce775,
|
||||
400: #d4e157,
|
||||
500: #cddc39,
|
||||
600: #c0ca33,
|
||||
700: #afb42b,
|
||||
800: #9e9d24,
|
||||
900: #827717,
|
||||
A100: #f4ff81,
|
||||
A200: #eeff41,
|
||||
A400: #c6ff00,
|
||||
A700: #aeea00,
|
||||
);
|
||||
|
||||
$md-yellow: (
|
||||
50: #fffde7,
|
||||
100: #fff9c4,
|
||||
200: #fff59d,
|
||||
300: #fff176,
|
||||
400: #ffee58,
|
||||
500: #ffeb3b,
|
||||
600: #fdd835,
|
||||
700: #fbc02d,
|
||||
800: #f9a825,
|
||||
900: #f57f17,
|
||||
A100: #ffff8d,
|
||||
A200: #ffff00,
|
||||
A400: #ffea00,
|
||||
A700: #ffd600,
|
||||
);
|
||||
|
||||
$md-amber: (
|
||||
50: #fff8e1,
|
||||
100: #ffecb3,
|
||||
200: #ffe082,
|
||||
300: #ffd54f,
|
||||
400: #ffca28,
|
||||
500: #ffc107,
|
||||
600: #ffb300,
|
||||
700: #ffa000,
|
||||
800: #ff8f00,
|
||||
900: #ff6f00,
|
||||
A100: #ffe57f,
|
||||
A200: #ffd740,
|
||||
A400: #ffc400,
|
||||
A700: #ffab00,
|
||||
);
|
||||
|
||||
$md-orange: (
|
||||
50: #fff3e0,
|
||||
100: #ffe0b2,
|
||||
200: #ffcc80,
|
||||
300: #ffb74d,
|
||||
400: #ffa726,
|
||||
500: #ff9800,
|
||||
600: #fb8c00,
|
||||
700: #f57c00,
|
||||
800: #ef6c00,
|
||||
900: #e65100,
|
||||
A100: #ffd180,
|
||||
A200: #ffab40,
|
||||
A400: #ff9100,
|
||||
A700: #ff6d00,
|
||||
);
|
||||
|
||||
$md-deep-orange: (
|
||||
50: #fbe9e7,
|
||||
100: #ffccbc,
|
||||
200: #ffab91,
|
||||
300: #ff8a65,
|
||||
400: #ff7043,
|
||||
500: #ff5722,
|
||||
600: #f4511e,
|
||||
700: #e64a19,
|
||||
800: #d84315,
|
||||
900: #bf360c,
|
||||
A100: #ff9e80,
|
||||
A200: #ff6e40,
|
||||
A400: #ff3d00,
|
||||
A700: #dd2c00,
|
||||
);
|
||||
|
||||
$md-brown: (
|
||||
50: #efebe9,
|
||||
100: #d7ccc8,
|
||||
200: #bcaaa4,
|
||||
300: #a1887f,
|
||||
400: #8d6e63,
|
||||
500: #795548,
|
||||
600: #6d4c41,
|
||||
700: #5d4037,
|
||||
800: #4e342e,
|
||||
900: #3e2723,
|
||||
A100: #d7ccc8,
|
||||
A200: #bcaaa4,
|
||||
A400: #8d6e63,
|
||||
A700: #5d4037,
|
||||
);
|
||||
|
||||
$md-grey: (
|
||||
0: #ffffff,
|
||||
50: #fafafa,
|
||||
100: #f5f5f5,
|
||||
200: #eeeeee,
|
||||
300: #e0e0e0,
|
||||
400: #bdbdbd,
|
||||
500: #9e9e9e,
|
||||
600: #757575,
|
||||
700: #616161,
|
||||
800: #424242,
|
||||
900: #212121,
|
||||
1000: #000000,
|
||||
A100: #ffffff,
|
||||
A200: #eeeeee,
|
||||
A400: #bdbdbd,
|
||||
A700: #616161,
|
||||
);
|
||||
|
||||
$md-blue-grey: (
|
||||
50: #eceff1,
|
||||
100: #cfd8dc,
|
||||
200: #b0bec5,
|
||||
300: #90a4ae,
|
||||
400: #78909c,
|
||||
500: #607d8b,
|
||||
600: #546e7a,
|
||||
700: #455a64,
|
||||
800: #37474f,
|
||||
900: #263238,
|
||||
A100: #cfd8dc,
|
||||
A200: #b0bec5,
|
||||
A400: #78909c,
|
||||
A700: #455a64,
|
||||
);
|
||||
|
||||
|
||||
$md-light-theme-foreground: (
|
||||
divider: rgba(black, 0.12),
|
||||
dividers: rgba(black, 0.12),
|
||||
disabled: rgba(black, 0.26),
|
||||
disabled-text: rgba(black, 0.26),
|
||||
hint-text: rgba(black, 0.26),
|
||||
secondary-text: rgba(black, 0.54),
|
||||
icon: rgba(black, 0.54),
|
||||
icons: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87)
|
||||
);
|
||||
|
||||
$md-dark-theme-foreground: (
|
||||
divider: rgba(white, 0.12),
|
||||
dividers: rgba(white, 0.12),
|
||||
disabled: rgba(white, 0.30),
|
||||
disabled-text: rgba(white, 0.30),
|
||||
hint-text: rgba(white, 0.30),
|
||||
secondary-text: rgba(white, 0.70),
|
||||
icon: white,
|
||||
icons: white,
|
||||
text: white
|
||||
);
|
||||
|
||||
|
||||
// Contrast colors. These are hard-coded because it is too difficult to calculate them.
|
||||
// These contrast colors are pulled from the public Material Design spec swatches. While the
|
||||
// contrast colors in the spec are not perscriptive, we will use them for convenience.
|
||||
$black-87-opacity: rgba(black, 0.870588);
|
||||
$white-87-opacity: rgba(white, 0.870588);
|
||||
|
||||
$md-contrast-palettes: (
|
||||
$md-red: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
),
|
||||
$md-pink: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
),
|
||||
$md-purple: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
),
|
||||
$md-deep-purple: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: $white-87-opacity,
|
||||
A700: $white-87-opacity,
|
||||
),
|
||||
$md-indigo: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
),
|
||||
$md-blue: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
),
|
||||
$md-light-blue: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
),
|
||||
$md-cyan: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-teal: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-green: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-light-green: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-lime: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-yellow: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: $black-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-amber: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: $black-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
),
|
||||
$md-orange: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: black,
|
||||
),
|
||||
$md-deep-orange: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: white,
|
||||
),
|
||||
$md-brown: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
),
|
||||
$md-grey: (
|
||||
0: $black-87-opacity,
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
1000: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $white-87-opacity,
|
||||
),
|
||||
$md-blue-grey: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: white,
|
||||
500: white,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
),
|
||||
);
|
||||
9
modules/angular2_material/src/core/style/shadows.scss
Normal file
9
modules/angular2_material/src/core/style/shadows.scss
Normal file
@ -0,0 +1,9 @@
|
||||
// Elements can have an "elevation" from 1 to 5, signified by shadows.
|
||||
// See http://google.com/design/spec/what-is-material/objects-in-3d-space.html
|
||||
.md-shadow-bottom-z-1 {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.md-shadow-bottom-z-2 {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
// ** Two main functions for users **
|
||||
// md-palette: used for defining your theme in terms of Material hues.
|
||||
// md-color: apply colors to components from the palette. Consumes the output of md-palette
|
||||
|
||||
|
||||
// For a given hue in a palette, return the contrast color from the map of contrast palettes.
|
||||
@function md-contrast($color-map, $hue, $contrast-color-map) {
|
||||
@return map-get(map-get($contrast-color-map, $color-map), $hue);
|
||||
}
|
||||
|
||||
|
||||
// Creates a map of hues to colors for a theme.
|
||||
// $color-map
|
||||
// $primary
|
||||
// $lighter
|
||||
// $darker
|
||||
@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {
|
||||
$result: map_merge($color-map, (
|
||||
default: map-get($color-map, $primary),
|
||||
lighter: map-get($color-map, $lighter),
|
||||
darker: map-get($color-map, $darker),
|
||||
|
||||
default-contrast: md-contrast($color-map, $primary, $contrast-color-map),
|
||||
lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),
|
||||
darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)
|
||||
));
|
||||
|
||||
// For each hue in the palette, add a "-contrast" color to the map.
|
||||
@each $hue, $color in $color-map {
|
||||
$result: map_merge($result, (
|
||||
"#{$hue}-contrast": md-contrast($color-map, $hue, $contrast-color-map)
|
||||
))
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
// Gets a color for a material design component.
|
||||
// $color-map: a map of {key: color}.
|
||||
// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'
|
||||
// If $hue-key is a number between 0 and 1, it will be treated as $opacity.
|
||||
// $opacity: the opacity to apply to the color.
|
||||
@function md-color($color-map, $hue-key: default, $opacity: 1) {
|
||||
// If hueKey is a number between zero and one, then it actually contains an
|
||||
// opacity value, so recall this function with the default hue and that given opacity.
|
||||
@if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {
|
||||
@return md-color($color-map, default, $hue-key)
|
||||
}
|
||||
|
||||
$color: map-get($color-map, $hue-key);
|
||||
$opacity: if(opacity($color) < 1, opacity($color), $opacity);
|
||||
|
||||
@return rgba($color, $opacity);
|
||||
}
|
||||
|
||||
|
||||
56
modules/angular2_material/src/core/style/variables.scss
Normal file
56
modules/angular2_material/src/core/style/variables.scss
Normal file
@ -0,0 +1,56 @@
|
||||
// Font
|
||||
$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
|
||||
|
||||
|
||||
// Layout
|
||||
$baseline-grid: 8px !default;
|
||||
$layout-breakpoint-sm: 600px !default;
|
||||
$layout-breakpoint-md: 960px !default;
|
||||
$layout-breakpoint-lg: 1200px !default;
|
||||
$layout-gutter-width: ($baseline-grid * 2) !default;
|
||||
|
||||
|
||||
// App bar variables
|
||||
$app-bar-height: 64px;
|
||||
|
||||
|
||||
// Toast
|
||||
$toast-height: $baseline-grid * 3 !default;
|
||||
$toast-margin: $baseline-grid * 1 !default;
|
||||
|
||||
|
||||
// Whiteframes
|
||||
$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26) !default;
|
||||
$whiteframe-zindex-z1: 1 !default;
|
||||
$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2) !default;
|
||||
$whiteframe-zindex-z2: 2 !default;
|
||||
$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19) !default;
|
||||
$whiteframe-zindex-z3: 3 !default;
|
||||
$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22) !default;
|
||||
$whiteframe-zindex-z4: 4 !default;
|
||||
$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
|
||||
$whiteframe-zindex-z5: 5 !default;
|
||||
|
||||
|
||||
// Z-indexes
|
||||
$z-index-tooltip: 100 !default;
|
||||
$z-index-dialog: 80 !default;
|
||||
$z-index-toast: 90 !default;
|
||||
$z-index-bottom-sheet: 70 !default;
|
||||
$z-index-sidenav: 60 !default;
|
||||
$z-index-backdrop: 50 !default;
|
||||
$z-index-fab: 20 !default;
|
||||
|
||||
|
||||
// Easing Curves
|
||||
$swift-ease-out-duration: 0.4s !default;
|
||||
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
||||
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
||||
|
||||
$swift-ease-in-duration: 0.3s !default;
|
||||
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
||||
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
|
||||
|
||||
$swift-ease-in-out-duration: 0.5s !default;
|
||||
$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
|
||||
$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
|
||||
12
modules/angular2_material/src/core/theme.js
vendored
Normal file
12
modules/angular2_material/src/core/theme.js
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
import {Decorator} from 'angular2/angular2';
|
||||
|
||||
@Decorator({
|
||||
selector: '[md-theme]'
|
||||
})
|
||||
export class MdTheme {
|
||||
color: string;
|
||||
|
||||
constructor() {
|
||||
this.color = 'sky-blue'
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user