Merge pull request #572 from sgomes/material-sprint-button-css-pass
Cleaning up button and FAB SCSSmaster
Addy Osmani
commit
176aed0e34
|
|
@ -78,11 +78,6 @@
|
|||
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Floating Action Button</h1>
|
||||
<iframe src="./styleguide/fab/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Dropdown Menu</h1>
|
||||
<iframe src="./styleguide/dropdown-menu/demo.html" scrolling="no"></iframe>
|
||||
|
|
|
|||
|
|
@ -4,49 +4,47 @@
|
|||
@import "../animation/animation";
|
||||
@import "../ripple/ripple";
|
||||
|
||||
// Default button colors
|
||||
$default-btn-color: rgba(#999999, 0.20);
|
||||
$default-btn-hover-color: $default-btn-color;
|
||||
$default-btn-active-color: rgba($default-btn-color, 0.40);
|
||||
$default-btn-text-color: #000;
|
||||
$default-flat-btn-focus-color: rgba(black, 0.12);
|
||||
// Default button colors.
|
||||
$button-primary-color: rgba(#999999, 0.20);
|
||||
$button-secondary-color: #000;
|
||||
$button-hover-color: $button-primary-color;
|
||||
$button-active-color: rgba($button-primary-color, 0.40);
|
||||
$button-focus-color: rgba(black, 0.12);
|
||||
|
||||
// Colored button colors
|
||||
$colored-btn-color: nth($primaryPalette, 6);
|
||||
$colored-btn-hover-color: nth($primaryPalette, 7);
|
||||
$colored-btn-active-color: nth($primaryPalette, 8);
|
||||
$colored-flat-btn-focus-color: $default-flat-btn-focus-color;
|
||||
$colored-raised-btn-text-color: #fff;
|
||||
// Colored button colors.
|
||||
$button-primary-color-alt: nth($primaryPalette, 6);
|
||||
$button-secondary-color-alt: #fff;
|
||||
$button-hover-color-alt: nth($primaryPalette, 7);
|
||||
$button-active-color-alt: nth($primaryPalette, 8);
|
||||
$button-focus-color-alt: $button-focus-color;
|
||||
|
||||
// Ripple color for colored raised buttons
|
||||
$color-ripple-raised-bg-color: white;
|
||||
// Ripple color for colored raised buttons and FABs.
|
||||
$button-ripple-color-alt: white;
|
||||
|
||||
// Disabled button colors
|
||||
$disabled-btn-text-color: rgba(#000, 0.26);
|
||||
$disabled-raised-btn-bg-color: rgba(#000, 0.12);
|
||||
// Disabled button colors.
|
||||
$button-primary-color-disabled: rgba(#000, 0.12);
|
||||
$button-secondary-color-disabled: rgba(#000, 0.26);
|
||||
|
||||
// FAB colors and sizes
|
||||
$fab-bg-color: nth($accentPalette, 5);
|
||||
$fab-hover-color: nth($accentPalette, 6);
|
||||
$fab-active-color: nth($accentPalette, 7);
|
||||
$default-fab-size: 56px;
|
||||
$mini-fab-size: 40px;
|
||||
$fab-font-size: 24px;
|
||||
// FAB colors and sizes.
|
||||
$button-fab-color-alt: nth($accentPalette, 5);
|
||||
$button-fab-hover-color-alt: nth($accentPalette, 6);
|
||||
$button-fab-active-color-alt: nth($accentPalette, 7);
|
||||
$button-fab-size: 56px;
|
||||
$button-fab-size-mini: 40px;
|
||||
$button-fab-font-size: 24px;
|
||||
|
||||
// Focus shadow
|
||||
// Focus shadow mixin.
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
|
||||
}
|
||||
|
||||
|
||||
// Flat buttons (default)
|
||||
|
||||
.PaperButton,
|
||||
.PaperFab {
|
||||
// The button component. Defaults to a flat button.
|
||||
.wsk-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: $default-btn-text-color;
|
||||
color: $button-secondary-color;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 36px;
|
||||
|
|
@ -61,168 +59,162 @@ $fab-font-size: 24px;
|
|||
background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.PaperButton::-moz-focus-inner,
|
||||
.PaperFab::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.PaperButton--colored {
|
||||
color: $colored-btn-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $button-hover-color;
|
||||
}
|
||||
|
||||
.PaperButton:hover {
|
||||
background-color: $default-btn-hover-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-focus-color;
|
||||
}
|
||||
|
||||
.PaperButton:focus:not(:active) {
|
||||
background-color: $default-flat-btn-focus-color;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
.PaperButton.PaperButton--colored:focus:not(:active) {
|
||||
background-color: $colored-flat-btn-focus-color;
|
||||
}
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled] {
|
||||
color: $button-secondary-color-disabled;
|
||||
cursor: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.PaperButton:active {
|
||||
background-color: $default-btn-active-color;
|
||||
&.wsk-button--colored {
|
||||
color: $button-primary-color-alt;
|
||||
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-focus-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Raised buttons
|
||||
// Raised buttons
|
||||
.wsk-button--raised {
|
||||
background: $button-primary-color;
|
||||
@include shadow-z1();
|
||||
|
||||
.PaperButton--raised,
|
||||
.PaperFab {
|
||||
background: $default-btn-color;
|
||||
@include shadow-z1();
|
||||
}
|
||||
&:active {
|
||||
@include shadow-z3();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
.PaperButton--raised.PaperButton--colored {
|
||||
background: $colored-btn-color;
|
||||
color: $colored-raised-btn-text-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
.PaperButton--raised.PaperButton--colored:hover {
|
||||
background-color: $colored-btn-hover-color;
|
||||
}
|
||||
&.wsk-button--colored {
|
||||
background: $button-primary-color-alt;
|
||||
color: $button-secondary-color-alt;
|
||||
|
||||
.PaperButton--raised:focus:not(:active),
|
||||
.PaperFab:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
background-color: $default-btn-active-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $button-hover-color-alt;
|
||||
}
|
||||
|
||||
.PaperButton--raised.PaperButton--colored:focus:not(:active) {
|
||||
background-color: $colored-btn-active-color;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-active-color-alt;
|
||||
}
|
||||
|
||||
.PaperButton--raised:active,
|
||||
.PaperFab:active {
|
||||
@include shadow-z3();
|
||||
background-color: $default-btn-active-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-active-color-alt;
|
||||
}
|
||||
|
||||
.PaperButton[disabled].PaperButton--raised:hover,
|
||||
.PaperFab[disabled]:hover {
|
||||
background-color: $disabled-raised-btn-bg-color;
|
||||
}
|
||||
& .Ripple {
|
||||
background: $button-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.PaperButton--raised.PaperButton--colored:active {
|
||||
background-color: $colored-btn-active-color;
|
||||
}
|
||||
|
||||
.PaperButton--raised.PaperButton--colored .Ripple,
|
||||
.PaperFab.PaperButton--colored .Ripple,
|
||||
.PaperFab.PaperFab--colored .Ripple {
|
||||
background: $color-ripple-raised-bg-color;
|
||||
}
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled] {
|
||||
background-color: $button-primary-color-disabled;
|
||||
color: $button-secondary-color-disabled;
|
||||
@include shadow-z1();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FABs
|
||||
// FABs
|
||||
.wsk-button--fab {
|
||||
border-radius: 50%;
|
||||
font-size: $button-fab-font-size;
|
||||
height: $button-fab-size;
|
||||
margin: auto;
|
||||
min-width: $button-fab-size;
|
||||
width: $button-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: $button-primary-color;
|
||||
@include shadow-z1();
|
||||
|
||||
.PaperFab {
|
||||
border-radius: 50%;
|
||||
font-size: $fab-font-size;
|
||||
height: $default-fab-size;
|
||||
margin: auto;
|
||||
min-width: $default-fab-size;
|
||||
width: $default-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.wsk-button--mini-fab {
|
||||
height: $button-fab-size-mini;
|
||||
min-width: $button-fab-size-mini;
|
||||
width: $button-fab-size-mini;
|
||||
}
|
||||
|
||||
.PaperFab.PaperFab--mini {
|
||||
height: $mini-fab-size;
|
||||
min-width: $mini-fab-size;
|
||||
width: $mini-fab-size;
|
||||
}
|
||||
& .wsk-button__ripple-container {
|
||||
border-radius: 50%;
|
||||
// Fixes clipping bug in Safari.
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
}
|
||||
|
||||
.PaperFab .PaperButton-rippleContainer {
|
||||
border-radius: 50%;
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
||||
}
|
||||
&:active {
|
||||
@include shadow-z3();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
.PaperFab.PaperButton--colored,
|
||||
.PaperFab.PaperFab--colored {
|
||||
background: $fab-bg-color;
|
||||
color : $colored-raised-btn-text-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
@include focus-shadow();
|
||||
background-color: $button-active-color;
|
||||
}
|
||||
|
||||
.PaperFab.PaperButton--colored:hover,
|
||||
.PaperFab.PaperFab--colored:hover {
|
||||
background-color: $fab-hover-color;
|
||||
}
|
||||
&.wsk-button--colored {
|
||||
background: $button-fab-color-alt;
|
||||
color: $button-secondary-color-alt;
|
||||
|
||||
.PaperFab.PaperButton--colored:focus:not(:active),
|
||||
.PaperFab.PaperFab--colored:focus:not(:active) {
|
||||
background-color: $fab-active-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $button-fab-hover-color-alt;
|
||||
}
|
||||
|
||||
.PaperFab.PaperButton--colored:active,
|
||||
.PaperFab.PaperFab--colored:active {
|
||||
background-color: $fab-active-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background-color: $button-fab-active-color-alt;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $button-fab-active-color-alt;
|
||||
}
|
||||
|
||||
& .Ripple {
|
||||
background: $button-ripple-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
// Bump up specificity by using [disabled] twice.
|
||||
&[disabled][disabled] {
|
||||
background-color: $button-primary-color-disabled;
|
||||
color: $button-secondary-color-disabled;
|
||||
@include shadow-z1();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Disabled buttons
|
||||
// Ripples
|
||||
.wsk-button__ripple-container {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.PaperButton[disabled] {
|
||||
color: $disabled-btn-text-color;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.PaperButton[disabled]:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.PaperButton[disabled].PaperButton--raised,
|
||||
.PaperFab[disabled],
|
||||
.PaperFab[disabled].PaperButton--colored,
|
||||
.PaperFab[disabled].PaperFab--colored {
|
||||
background-color: $disabled-raised-btn-bg-color;
|
||||
color: $disabled-btn-text-color;
|
||||
}
|
||||
|
||||
.PaperButton[disabled].PaperButton--raised:active,
|
||||
.PaperFab[disabled]:active {
|
||||
@include shadow-z1();
|
||||
}
|
||||
|
||||
|
||||
// Ripples
|
||||
|
||||
.PaperButton-rippleContainer {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.PaperButton[disabled] .PaperButton-rippleContainer .Ripple,
|
||||
.PaperFab[disabled] .PaperButton-rippleContainer .Ripple, {
|
||||
background-color: transparent;
|
||||
}
|
||||
.wsk-button[disabled] & .Ripple {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ window.addEventListener('load', function() {
|
|||
return function() { element.blur(); };
|
||||
};
|
||||
|
||||
var buttonElements = document.querySelectorAll('.PaperButton, .PaperFab');
|
||||
var buttonElements = document.querySelectorAll('.wsk-js-button');
|
||||
|
||||
for (var i = 0; i < buttonElements.length; i++) {
|
||||
var buttonElement = buttonElements[i];
|
||||
var blurHandler = blurHandlerGenerator(buttonElement);
|
||||
if (buttonElement.classList.contains('RippleEffect')) {
|
||||
var rippleContainer = document.createElement('span');
|
||||
rippleContainer.classList.add('PaperButton-rippleContainer');
|
||||
rippleContainer.classList.add('wsk-button__ripple-container');
|
||||
var ripple = document.createElement('span');
|
||||
ripple.classList.add('Ripple');
|
||||
rippleContainer.appendChild(ripple);
|
||||
|
|
|
|||
|
|
@ -15,28 +15,37 @@
|
|||
|
||||
<div class="preview-block">
|
||||
|
||||
<button class="PaperButton">Flat</button>
|
||||
<button class="PaperButton PaperButton--raised">Raised</button>
|
||||
<button class="wsk-button wsk-js-button">Flat</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab">♥</button>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<button class="PaperButton RippleEffect">Flat</button>
|
||||
<button class="PaperButton PaperButton--raised RippleEffect">Raised</button>
|
||||
<button class="wsk-button wsk-js-button RippleEffect">Flat</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised RippleEffect">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab RippleEffect">♥</button>
|
||||
|
||||
<h2>.PaperButton--colored</h2>
|
||||
<h2>.wsk-button--colored</h2>
|
||||
|
||||
<button class="PaperButton PaperButton--colored">Flat</button>
|
||||
<button class="PaperButton PaperButton--raised PaperButton--colored">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--colored">Flat</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored">♥</button>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<button class="PaperButton PaperButton--colored RippleEffect">Flat</button>
|
||||
<button class="PaperButton PaperButton--raised PaperButton--colored RippleEffect">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--colored RippleEffect">Flat</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored RippleEffect">Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored RippleEffect">♥</button>
|
||||
|
||||
<h2>.wsk-button--mini-fab</h2>
|
||||
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab RippleEffect">♥</button>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<button class="PaperButton RippleEffect" disabled>Flat</button>
|
||||
<button class="PaperButton PaperButton--raised RippleEffect" disabled>Raised</button>
|
||||
<button class="wsk-button wsk-js-button RippleEffect" disabled>Flat</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--raised RippleEffect" disabled>Raised</button>
|
||||
<button class="wsk-button wsk-js-button wsk-button--fab RippleEffect" disabled>♥</button>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
|
||||
<script src="button.js"></script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
@import "../shadow/_shadow";
|
||||
@import "_button";
|
||||
|
||||
.PaperButton {
|
||||
.wsk-button {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wsk-button--fab {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FAB</title>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="preview-block">
|
||||
|
||||
<button class="PaperFab">♥</button>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<button class="PaperFab RippleEffect">♥</button>
|
||||
|
||||
<h2>.PaperButton--colored</h2>
|
||||
|
||||
<button class="PaperFab PaperFab--colored">♥</button>
|
||||
|
||||
<h2>With Ripples</h2>
|
||||
|
||||
<button class="PaperFab PaperFab--colored RippleEffect">♥</button>
|
||||
|
||||
<h2>Mini</h2>
|
||||
|
||||
<button class="PaperFab PaperFab--mini PaperFab--colored RippleEffect">♥</button>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
|
||||
<button class="PaperFab RippleEffect" disabled>♥</button>
|
||||
</div>
|
||||
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
|
||||
<script src="../button/button.js"></script>
|
||||
<script src="../ripple/ripple.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import "../styleguide_demo_bp";
|
||||
@import "../button/_button";
|
||||
@import "../shadow/_shadow";
|
||||
|
||||
.PaperFab {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
Loading…
Reference in New Issue