iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(button): dramatically clean-up button css.

This commit is contained in:
Jeremy Elbourn 2015-07-30 17:25:32 -07:00
parent 7b94bbf3e4
commit 21e2f3c1db
6 changed files with 149 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

436
modules/angular2_material/src/components/button/button.scss
View File

@ -4,23 +4,24 @@
// TODO(jelbourn): This goes away. // TODO(jelbourn): This goes away.
@import "../../core/style/default-theme"; @import "../../core/style/default-theme";
$button-line-height: 25px !default;
$button-padding: 2px 6px 3px !default;
// Fab buttons // Standard button sizing.
$button-fab-width: 56px !default; $md-button-padding: 0 rem(0.600) !default;
$button-fab-height: 56px !default; $md-button-min-width: rem(8.800) !default;
$button-fab-padding: 16px !default; $md-button-margin: rem(0.600) rem(0.800) !default;
$button-fab-mini-width: 40px !default; $md-button-line-height: rem(3.60) !default;
$button-fab-mini-height: 40px !default; $md-button-border-radius: 3px !default;
$button-fab-toast-offset: $button-fab-height * 0.75; // 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-bottom-right". */
* Mixin to create distinct classes for fab positions, e.g. ".md-fab-bottom-right". @mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
*/ .md-fab-position-#{$spot} {
@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
&.md-fab-#{$spot} {
top: $top; top: $top;
right: $right; right: $right;
bottom: $bottom; bottom: $bottom;
@ -29,321 +30,140 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
} }
} }
[md-button] { // Base styles for all buttons.
user-select: none; @mixin md-button-base() {
box-sizing: border-box;
position: relative;
display: inline-block;
// TODO(jelbourn): What canvas? font-size: $md-body-font-size-base;
position: relative; //for child absolute-positioned <canvas>
outline: none;
border: 0;
padding: 6px;
margin: 0;
background: transparent;
white-space: nowrap;
text-align: center;
// TODO(jelbourn): wat?
font-weight: 500; font-weight: 500;
font-style: inherit;
font-variant: inherit; // Reset browser <button> styles.
font-size: inherit; background: transparent;
font-family: inherit; text-align: center;
line-height: inherit; overflow: hidden;
cursor: pointer;
user-select: none;
outline: none;
border: none;
// Apply nowrap and remove underline for anchor md-buttons.
white-space: nowrap;
text-decoration: none; text-decoration: none;
cursor: pointer; // Sizing.
overflow: hidden; // for ink containment 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;
transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function, // Animation.
background-color $swift-ease-out-duration $swift-ease-out-timing-function, // TODO(jelbourn): figure out where will-change would be beneficial.
transform $swift-ease-out-duration $swift-ease-out-timing-function; transition: background $swift-ease-out-duration $swift-ease-out-timing-function;
// Hide the default browser focus indicator.
&:focus { &:focus {
outline: none; outline: none;
} }
&:hover { &:hover, &:focus {
// Remove anchor underline again for more specific modifiers.
text-decoration: none; text-decoration: none;
background: md-color($md-background, 500, 0.2);
} }
&.md-cornered {
border-radius: 0;
}
&.md-icon {
padding: 0;
background: none;
}
&.md-raised {
transform: translate3d(0, 0, 0);
&:not([disabled]) {
@extend .md-shadow-bottom-z-1;
}
}
&.md-fab {
// .md-fab-bottom-right
@include fab-position(
bottom-right,
auto,
($button-fab-width - $button-fab-padding) / 2,
($button-fab-height - $button-fab-padding) / 2,
auto);
// .md-fab-bottom-left
@include fab-position(
bottom-left,
auto,
auto,
($button-fab-height - $button-fab-padding) / 2,
($button-fab-width - $button-fab-padding) / 2);
// .md-fab-top-right
@include fab-position(
top-right,
($button-fab-height - $button-fab-padding) / 2,
($button-fab-width - $button-fab-padding) / 2,
auto,
auto);
// .md-fab-top-left
@include fab-position(
top-left,
($button-fab-height - $button-fab-padding) / 2,
auto,
auto,
($button-fab-width - $button-fab-padding) / 2);
z-index: $z-index-fab;
width: $button-fab-width;
height: $button-fab-height;
border-radius: 50%;
@extend .md-shadow-bottom-z-1;
overflow: hidden;
transform: translate3d(0, 0, 0);
transition: 0.2s linear;
transition-property: transform, box-shadow;
// When there is an md-icon inside of an [md-button].
& md-icon {
line-height: $button-fab-height;
margin-top: 0;
}
&.md-mini {
width: $button-fab-mini-width;
height: $button-fab-mini-height;
md-icon {
line-height: $button-fab-mini-height;
}
}
}
&:not([disabled]) {
&.md-raised,
&.md-fab {
&:focus,
&:hover {
transform: translate3d(0, -1px, 0);
@extend .md-shadow-bottom-z-2;
}
}
}
}
// TODO
.md-toast-open-top {
[md-button].md-fab-top-left,
[md-button].md-fab-top-right {
transform: translate3d(0, $button-fab-toast-offset, 0);
&:not([disabled]) {
&:focus,
&:hover {
transform: translate3d(0, $button-fab-toast-offset - 1, 0);
}
}
}
}
// TODO
.md-toast-open-bottom {
[md-button].md-fab-bottom-left,
[md-button].md-fab-bottom-right {
transform: translate3d(0, -$button-fab-toast-offset, 0);
&:not([disabled]) {
&:focus,
&:hover {
transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
}
}
}
}
// TODO
.md-button-group {
display: flex;
flex: 1;
width: 100%;
}
// TODO
.md-button-group > [md-button] {
flex: 1;
display: block;
overflow: hidden;
width: 0;
border-width: 1px 0 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
&:first-child {
border-radius: 2px 0 0 2px;
}
&:last-child {
border-right-width: 1px;
border-radius: 0 2px 2px 0;
}
}
// ------------------------ Button theme ----------------------------------------------------------
$button-border-radius: 3px !default;
$button-fab-border-radius: 50% !default;
// The ELEMENT '[md-button]' is the host.
// The CLASS '[md-button]' is the shadow root.
md-toolbar [md-button].md-fab {
background-color: white;
}
// Because of Shadow DOM emulation, the modifier classes are applied to the [md-button]
// element (host), but the style needs to be changed for the shadow content (.[md-button]).
[md-button] {
border-radius: $button-border-radius;
// When the user explictly applies the primary color.
&.md-primary { &.md-primary {
color: md-color($md-primary); color: md-color($md-primary);
} }
&.md-primary.md-fab,
&.md-primary.md-raised {
color: md-color($md-primary, default-contrast);
background-color: md-color($md-primary);
}
// When the user explictly applies the accent color.
&.md-accent { &.md-accent {
color: md-color($md-accent); color: md-color($md-accent);
} }
&.md-accent.md-fab, &:disabled {
&.md-accent.md-raised {
color: md-color($md-accent, default-contrast);
background-color: md-color($md-accent);
}
// When the user explictly applies the warn color.
&.md-warn {
color: md-color($md-warn);
}
&.md-warn.md-fab,
&.md-warn.md-raised {
color: md-color($md-warn, default-contrast);
background-color: md-color($md-warn);
}
// When the button is a fab without an explicit color applied.
&.md-fab {
border-radius: $button-fab-border-radius;
background-color: md-color($md-accent);
color: md-color($md-accent, default-contrast);
}
// When the button is raised without an explicit color applied.
&.md-raised {
color: md-color($md-background, default-contrast);
background-color: md-color($md-background, 50);
}
}
// Hover and focus styles (only applied when the button is not disabled).
// The modifiers for :focus and :hover actually apply to the element in the
// shadow DOM (the .[md-button]).
[md-button]:not([disabled]) {
// Default hover/focus background.
&:focus,
&:hover {
background-color: md-color($md-background, 500, 0.2);
}
&.md-primary.md-fab,
&.md-primary.md-raised {
&:hover,
&:focus {
background-color: md-color($md-primary, 600);
}
}
&.md-accent.md-fab,
&.md-accent.md-raised {
&:hover,
&:focus {
background-color: md-color($md-accent, 700);
}
}
&.md-warn.md-fab,
&.md-warn.md-raised {
&:hover,
&:focus {
background-color: md-color($md-warn, 700);
}
}
&.md-fab {
&:hover,
&:focus {
background-color: md-color($md-accent, A700);
}
}
&.md-raised {
&:hover,
&:focus {
background-color: md-color($md-background, 200);
}
}
}
[md-button][disabled],
[md-button][disabled].md-fab,
[md-button][disabled].md-raised, {
color: md-color($md-foreground, disabled); color: md-color($md-foreground, disabled);
background-color: transparent; background-color: transparent;
cursor: not-allowed; cursor: default;
}
} }
/** Base styles for raised buttons, including FABs. */
@mixin md-raised-button() {
@include md-button-base();
// Force hardware acceleration.
// TODO(jelbourn): determine if this actually has an impact.
transform: translate3d(0, 0, 0);
box-shadow: $md-shadow-bottom-z-1;
transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;
&: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);
}
&.md-accent {
color: md-color($md-accent, default-contrast);
background-color: md-color($md-accent);
}
}
[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;
// TODO(jelbourn): May need `background-clip: padding-box;` depending on ripple implementation.
&.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);

2
modules/angular2_material/src/components/button/button.ts
View File

@ -2,7 +2,7 @@ import {Component, View, LifecycleEvent, ViewEncapsulation} from 'angular2/angul
import {isPresent} from 'angular2/src/facade/lang'; import {isPresent} from 'angular2/src/facade/lang';
@Component({selector: '[md-button]:not([href])'}) @Component({selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)'})
@View({ @View({
templateUrl: 'package:angular2_material/src/components/button/button.html', templateUrl: 'package:angular2_material/src/components/button/button.html',
encapsulation: ViewEncapsulation.NONE encapsulation: ViewEncapsulation.NONE

8
modules/angular2_material/src/core/style/shadows.scss
View File

@ -1,9 +1,5 @@
// Elements can have an "elevation" from 1 to 5, signified by shadows. // 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 // 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 { $md-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); $md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

6
modules/angular2_material/src/core/style/theme-functions.scss
View File

@ -2,6 +2,12 @@
// md-palette: used for defining your theme in terms of Material hues. // 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 // 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. // 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) { @function md-contrast($color-map, $hue, $contrast-color-map) {

5
modules/angular2_material/src/core/style/variables.scss
View File

@ -1,3 +1,5 @@
@import 'theme-functions';
// Font // Font
$font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default; $font-family: RobotoDraft, Roboto, 'Helvetica Neue', sans-serif !default;
@ -9,6 +11,9 @@ $layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1200px !default; $layout-breakpoint-lg: 1200px !default;
$layout-gutter-width: ($baseline-grid * 2) !default; $layout-gutter-width: ($baseline-grid * 2) !default;
// Typography
$md-body-font-size-base: rem(1.400) !default;
// App bar variables // App bar variables
$app-bar-height: 64px; $app-bar-height: 64px;

34
modules/examples/src/material/button/demo_app.html
View File

@ -7,21 +7,13 @@
position: relative !important; position: relative !important;
padding-bottom: 10px; padding-bottom: 10px;
} }
section [md-button]:not(.md-fab) { .label {
min-width: 10em;
}
section [md-button] {
display: inline-block;
margin: 1em;
line-height: 25px;
}
.label {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
left: 7px; left: 7px;
color: #ccc; color: #ccc;
font-size: 14px; font-size: 14px;
} }
</style> </style>
<h1>Button demo</h1> <h1>Button demo</h1>
@ -52,25 +44,25 @@
<section> <section>
<span class="label">Raised button</span> <span class="label">Raised button</span>
<button md-button class="md-raised" (^click)="click('raised')">BUTTON</button> <button md-raised-button (^click)="click('raised')">BUTTON</button>
<button md-button class="md-raised md-primary" (^click)="click('raised primary')">PRIMARY</button> <button md-raised-button class="md-primary" (^click)="click('raised primary')">PRIMARY</button>
<button md-button class="md-raised" disabled="disabled" (^click)="click('raised disabled')">DISABLED</button> <button md-raised-button disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
<button md-button class="md-raised md-accent" (^click)="click('raised accent')">ACCENT</button> <button md-raised-button class="md-accent" (^click)="click('raised accent')">ACCENT</button>
<button md-button class="md-raised md-warn" (^click)="click('raised warn')">WARN</button> <button md-raised-button class="md-warn" (^click)="click('raised warn')">WARN</button>
</section> </section>
<section> <section>
<span class="label">Fab button</span> <span class="label">Fab button</span>
<button md-button class="md-fab" (^click)="click('fab')">BTN</button> <button md-fab (^click)="click('fab')">BTN</button>
<button md-button class="md-fab md-primary" (^click)="click('fab primary')">PRMY</button> <button md-fab class="md-primary" (^click)="click('fab primary')">PRMY</button>
<button md-button class="md-fab" disabled="disabled" (^click)="click('fab disabled')">DIS</button> <button md-fab disabled="disabled" (^click)="click('fab disabled')">DIS</button>
<button md-button class="md-fab md-accent" (^click)="click('fab accent')">ACC</button> <button md-fab class="md-accent" (^click)="click('fab accent')">ACC</button>
<button md-button class="md-fab md-warn" (^click)="click('fab warn')">WRN</button> <button md-fab class="md-warn" (^click)="click('fab warn')">WRN</button>
</section> </section>
<section> <section>
<span class="label">Anchor / hyperlink</span> <span class="label">Anchor / hyperlink</span>
<a md-button href="http://google.com" target="_blank">HREF</a> <a md-button href="http://google.com" target="_blank">HREF</a>
<a md-button href="http://google.com" disabled>DISABLED HREF</a> <a md-button href="http://google.com" disabled>DISABLED HREF</a>
<a md-button class="md-raised" target="_blank" href="http://google.com">RAISED HREF</a> <a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
</section> </section>