mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
checkpoint - a bunch of work on buttons, focused on spec compliance
This commit is contained in:
Kevin Ross
parent
677e33f4a2
commit
6aabc5b60f
11
README.md
11
README.md
|
|
@ -79,6 +79,17 @@ styles for bootstrap based markup to comply with Material Design concepts.
|
|||
|
||||
### Customization
|
||||
|
||||
#### Themes
|
||||
|
||||
NOTE: (In active) development
|
||||
First, this is probably not what you think when a 'theme' is mentioned.
|
||||
|
||||
The [material design specification mentions `light` vs. `dark` themes](https://www.google.com/design/spec/style/color.html#)
|
||||
throughout. By default, the source is written assuming a light theme is being used, but as reviews/refactorings
|
||||
occur, the `.theme-dark` marker class is being used to denote differences.
|
||||
This could be used on the top level elements such as `body` or `.container`. Effort on
|
||||
this is just beginning, but search the codebase for `.theme-dark` to see variations. Help/PR's welcome.
|
||||
|
||||
#### Colors
|
||||
|
||||
There are 17 color variations (in addition to the classic 4 variations) described by the Material Design color palette:
|
||||
|
|
|
|||
|
|
@ -474,9 +474,10 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<h3>Default buttons</h3>
|
||||
|
||||
<h3>Flat buttons <small>default - no class needed</small></h3>
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
|
||||
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
|
|
@ -486,40 +487,50 @@
|
|||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
<h3>Flat buttons</h3>
|
||||
|
||||
<h3>Raised buttons <small><code>.btn-raised</code></small></h3>
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-flat btn-link">Link</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
<h3>Raised buttons</h3>
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default btn-raised">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary btn-raised">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success btn-raised">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info btn-raised">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning btn-raised">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger btn-raised">Danger</a>
|
||||
</p>
|
||||
|
||||
<h3>Disabled buttons</h3>
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default disabled">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary disabled">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success disabled">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info disabled">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning disabled">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger disabled">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link disabled">Link</a>
|
||||
</p>
|
||||
<fieldset disabled>
|
||||
|
||||
<h3>Flat buttons <small>default - no class needed</small></h3>
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
|
||||
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
|
||||
<h3>Raised buttons <small><code>.btn-raised</code></small></h3>
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<h3>Button groups</h3>
|
||||
|
||||
|
|
@ -609,17 +620,13 @@
|
|||
</p>
|
||||
|
||||
<h3>Floating action buttons</h3>
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
<a href="javascript:void(0)" class="btn btn-default btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
|
||||
<a href="javascript:void(0)" class="btn btn-primary btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
<a href="javascript:void(0)" class="btn btn-success btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
<a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger btn-fab btn-raised "><i class="material-icons">grade</i></a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// specification: https://www.google.com/design/spec/components/buttons.html
|
||||
|
||||
//.btn-shadow() {
|
||||
// .shadow-z-1();
|
||||
// transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
|
@ -18,11 +20,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// mdb default buttons are _not_ flat, but colored.
|
||||
// mdb default buttons are flat by default
|
||||
// synchronized with mdl 11/23/15
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
|
||||
.background-variations(~".btn", ~"", @mdb-btn-background-color);
|
||||
border: none;
|
||||
border-radius: @mdl-btn-border-radus;
|
||||
position: relative;
|
||||
|
|
@ -31,33 +32,69 @@
|
|||
.typo-button();
|
||||
will-change: box-shadow, transform;
|
||||
transition: box-shadow 0.2s @mdb-animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s @mdb-animation-curve-default,
|
||||
color 0.2s @mdb-animation-curve-default;
|
||||
background-color 0.2s @mdb-animation-curve-default,
|
||||
color 0.2s @mdb-animation-curve-default;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
//---
|
||||
// btn-flat
|
||||
&.btn-flat {
|
||||
background: transparent;
|
||||
.variations(~".btn", ~"", color, @mdb-text-color-primary);
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
// hover
|
||||
// FIXME: check suffix generation
|
||||
.generic-variations(~".btn", ~"&:hover", @mdb-btn-background-color, {
|
||||
background-color: fade(@variation-color, 20%);
|
||||
});
|
||||
|
||||
&:disabled {
|
||||
color: @text-disabled !important;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
//---
|
||||
// btn-flat
|
||||
background: transparent;
|
||||
&:not(.btn-raised) {
|
||||
.variations(~".btn", ~"", color, @mdb-text-color-primary);
|
||||
box-shadow: none;
|
||||
|
||||
&:not(.btn-link) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
// spec: flat/light bg Hover: 20% #999999
|
||||
background-color: fade(#999999, 20%);
|
||||
|
||||
.theme-dark & {
|
||||
// spec: dark bg Hover: 15% #CCCCCC
|
||||
background-color: fade(#CCCCCC, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **raised** only styles (we are raised buttons by default)
|
||||
&.btn-raised {
|
||||
.background-variations(~".btn", ~"", @mdb-btn-background-color);
|
||||
|
||||
&:not(.btn-link) {
|
||||
.shadow-2dp();
|
||||
&:hover {
|
||||
|
||||
// Spec:
|
||||
// - Raised Light/Light theme no hover.
|
||||
// - Raised Dark/Dark theme Hover color: 600
|
||||
.theme-dark & {
|
||||
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
|
||||
//.generic-variations(~".btn", ~"", @mdb-btn-background-color, {
|
||||
// // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
|
||||
// background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
|
||||
//});
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
.shadow-4dp();
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
.focus-shadow();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//&:not(.btn-link):not(.btn-flat) {
|
||||
// background-color: @mdb-btn-background-color;
|
||||
// color: @mdb-text-color-primary;
|
||||
|
|
@ -79,31 +116,12 @@
|
|||
// color: @mdb-text-color-primary;
|
||||
//}
|
||||
|
||||
//.background-variations(~":not(.btn-link):not(.btn-flat)", @mdb-btn-background-color);
|
||||
//
|
||||
//// BTN hover effect
|
||||
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
|
||||
//.generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
|
||||
// background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
|
||||
//});
|
||||
//// BTN active effect
|
||||
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
|
||||
//.generic-variations(~":active:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
|
||||
// background-color: contrast(@variation-color, darken(@variation-color, 6%), lighten(@variation-color, 6%), @contrast-factor);
|
||||
//});
|
||||
//// BTN .active effect
|
||||
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
|
||||
//.generic-variations(~".active:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
|
||||
// background-color: contrast(@variation-color, darken(@variation-color, 6%), lighten(@variation-color, 6%), @contrast-factor);
|
||||
//});
|
||||
//// BTN flat hover effect
|
||||
//// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
|
||||
//.generic-variations(~".btn-flat:hover:not(.btn-link)", @mdb-btn-background-color, {
|
||||
// background-color: fade(@variation-color, 20%);
|
||||
//});
|
||||
|
||||
|
||||
|
||||
// Size variations
|
||||
&.btn-sm {
|
||||
padding: 5px 20px;
|
||||
|
|
@ -126,10 +144,10 @@
|
|||
width: @mdb-btn-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
|
||||
//&,
|
||||
//&:hover,
|
||||
//&:active {
|
||||
|
|
@ -174,6 +192,19 @@
|
|||
i.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Disabled text
|
||||
// Spec:
|
||||
// - light theme: Disabled text: 26% #000000
|
||||
// - dark theme: Disabled text: 30% #FFFFFF
|
||||
fieldset[disabled] &,
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: fade(#000000, 26%);
|
||||
.theme-dark & {
|
||||
color: fade(#FFFFFF, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
.generic-variations(@component, @selector-suffix, @color-default, @func) {
|
||||
@contrast-factor: 40%;
|
||||
// bootstrap styles
|
||||
//&@{selector-suffix},
|
||||
&@{selector-suffix},
|
||||
&@{component}-default@{selector-suffix} {
|
||||
@variation-color: @color-default;
|
||||
@variation-color-text: @mdb-text-color-light;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
|
||||
/* Shadows */
|
||||
/* Shadows (from mdl http://www.getmdl.io/) */
|
||||
|
||||
// Focus shadow mixin.
|
||||
.focus-shadow() {
|
||||
|
|
|
|||
6
less/_themes.less
Normal file
6
less/_themes.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// by default, assume light-theme, no need for a marker class.
|
||||
|
||||
// this is mostly a marker class, add it to something like the body or container. Subordinates will look for this marker - see buttons
|
||||
.theme-dark {
|
||||
|
||||
}
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
);
|
||||
|
||||
// bootstrap styles
|
||||
//&#{$selector-suffix},
|
||||
&#{$selector-suffix},
|
||||
&#{$component}-default#{$selector-suffix} {
|
||||
|
||||
$args-extra: map-merge($args, (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user