mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat(button): add core and button scss
This commit is contained in:
Jeremy Elbourn
@@ -1,7 +1,195 @@
|
||||
@import 'variables';
|
||||
@import "variables";
|
||||
@import "shadows";
|
||||
|
||||
.hello {
|
||||
display: flex;
|
||||
width: $size;
|
||||
height: $size;
|
||||
// TODO(jelbourn): This goes away.
|
||||
@import "default-theme";
|
||||
|
||||
// TODO(jelbourn): Move variables and mixins into a partial file.
|
||||
// TODO(jelbourn): Measure perf benefits for translate3d and will-change.
|
||||
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
|
||||
|
||||
|
||||
// Standard button sizing.
|
||||
$md-button-padding: 0 rem(0.600) !default;
|
||||
$md-button-min-width: rem(8.800) !default;
|
||||
$md-button-margin: rem(0.600) rem(0.800) !default;
|
||||
$md-button-line-height: rem(3.60) !default;
|
||||
$md-button-border-radius: 3px !default;
|
||||
|
||||
// FAB sizing.
|
||||
$md-fab-size: rem(5.600) !default;
|
||||
$md-fab-line-height: rem(5.600) !default;
|
||||
$md-fab-padding: rem(1.60) !default;
|
||||
$md-fab-mini-size: rem(4.00) !default;
|
||||
$md-fab-mini-line-height: rem(4.00) !default;
|
||||
|
||||
/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-position-bottom-right". */
|
||||
@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
|
||||
.md-fab-position-#{$spot} {
|
||||
top: $top;
|
||||
right: $right;
|
||||
bottom: $bottom;
|
||||
left: $left;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
/** Styles for all disabled buttons. */
|
||||
@mixin md-button-disabled() {
|
||||
color: md-color($md-foreground, disabled);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/** Base styles for all buttons. */
|
||||
@mixin md-button-base() {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
// Reset browser <button> styles.
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
// Make anchors render like buttons.
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
|
||||
// Typography.
|
||||
font-size: $md-body-font-size-base;
|
||||
font-weight: 500;
|
||||
|
||||
// Sizing.
|
||||
padding: $md-button-padding;
|
||||
margin: $md-button-margin;
|
||||
min-width: $md-button-min-width;
|
||||
line-height: $md-button-line-height;
|
||||
border-radius: $md-button-border-radius;
|
||||
|
||||
// Animation.
|
||||
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
|
||||
box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
|
||||
|
||||
// Hide the browser focus indicator, instead applying our own focus style on background-color.
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
// Remove anchor underline again for more specific modifiers.
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Use a CSS class for focus style because we only want to render the focus style when
|
||||
// the focus originated from a keyboard event (see JS source for more details).
|
||||
&:hover, &.md-button-focus {
|
||||
background: md-color($md-background, 500, 0.2);
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
color: md-color($md-primary);
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
color: md-color($md-accent);
|
||||
}
|
||||
|
||||
// Use the [disabled] attribute instead of the :disabled pseudo-class because anchors
|
||||
// cannot technically be :disabled.
|
||||
&[disabled] {
|
||||
@include md-button-disabled();
|
||||
}
|
||||
}
|
||||
|
||||
/** Base styles for raised buttons, including FABs. */
|
||||
@mixin md-raised-button() {
|
||||
@include md-button-base();
|
||||
|
||||
// Force hardware acceleration.
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
box-shadow: $md-shadow-bottom-z-1;
|
||||
|
||||
&:active {
|
||||
box-shadow: $md-shadow-bottom-z-2;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
color: md-color($md-primary, default-contrast);
|
||||
background-color: md-color($md-primary);
|
||||
|
||||
&:hover, &.md-button-focus {
|
||||
background-color: md-color($md-primary, 600);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
color: md-color($md-accent, default-contrast);
|
||||
background-color: md-color($md-accent);
|
||||
|
||||
&:hover, &.md-button-focus {
|
||||
background-color: md-color($md-accent, A700);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary, &.md-accent {
|
||||
&[disabled] {
|
||||
@include md-button-disabled();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[md-button] {
|
||||
@include md-button-base();
|
||||
}
|
||||
|
||||
[md-raised-button] {
|
||||
@include md-raised-button();
|
||||
|
||||
color: md-color($md-background, default-contrast);
|
||||
background-color: md-color($md-background, 50);
|
||||
}
|
||||
|
||||
[md-fab] {
|
||||
@include md-raised-button();
|
||||
|
||||
z-index: $z-index-fab;
|
||||
|
||||
border-radius: 50%;
|
||||
min-width: 0;
|
||||
width: $md-fab-size;
|
||||
height: $md-fab-size;
|
||||
line-height: $md-fab-line-height;
|
||||
vertical-align: middle;
|
||||
|
||||
&.md-mini {
|
||||
line-height: $md-fab-mini-line-height;
|
||||
width: $md-fab-mini-size;
|
||||
height: $md-fab-mini-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for high contrast mode.
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
[md-raised],
|
||||
[md-fab] {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2;
|
||||
@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto);
|
||||
@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset);
|
||||
@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto);
|
||||
@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset);
|
||||
|
||||
@@ -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);
|
||||
@@ -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 (probably impossible) 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,
|
||||
),
|
||||
);
|
||||
@@ -0,0 +1,5 @@
|
||||
// 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: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4) !default;
|
||||
@@ -0,0 +1,62 @@
|
||||
// ** 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
|
||||
|
||||
// Implement the rem unit with SCSS so we don't have to actually set a font-size on
|
||||
// the user's body element.
|
||||
@function rem($multiplier) {
|
||||
$font-size: 10px;
|
||||
@return $multiplier * $font-size;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
@import 'theme-functions';
|
||||
|
||||
|
||||
// Typography
|
||||
$md-body-font-size-base: rem(1.400) !default;
|
||||
|
||||
// z-index master list
|
||||
$z-index-fab: 20 !default;
|
||||
|
||||
// Easing Curves
|
||||
// TODO(jelbourn): all of these need to be revisited
|
||||
$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;
|
||||
@@ -1 +0,0 @@
|
||||
$size: 25px;
|
||||
@@ -2,4 +2,6 @@
|
||||
material2 Works!
|
||||
|
||||
<button md-button>HELLO</button>
|
||||
<button md-raised-button class="md-primary">HELLO</button>
|
||||
<button md-fab class="md-accent">HI</button>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user