diff --git a/README.md b/README.md index 26a34ec2..81a86374 100644 --- a/README.md +++ b/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: diff --git a/bootstrap-elements.html b/bootstrap-elements.html index 0862dd33..71ad05bb 100644 --- a/bootstrap-elements.html +++ b/bootstrap-elements.html @@ -474,9 +474,10 @@
-

Default buttons

- +

Flat buttons default - no class needed

+ btn only + .active Default Primary Success @@ -486,40 +487,50 @@ Link

-

Flat buttons

+

Raised buttons .btn-raised

- Default - Primary - Success - Info - Warning - Danger - Link + .active + Default + Primary + Success + Info + Warning + Danger + Link

-

Raised buttons

- -

- Default - Primary - Success - Info - Warning - Danger -

Disabled buttons

-

- Default - Primary - Success - Info - Warning - Danger - Link -

+
+ +

Flat buttons default - no class needed

+

+ btn only + .active + Default + Primary + Success + Info + Warning + Danger + Link +

+ + +

Raised buttons .btn-raised

+

+ .active + Default + Primary + Success + Info + Warning + Danger + Link +

+

Button groups

@@ -609,17 +620,13 @@

Floating action buttons

-

grade - grade - grade grade grade grade grade -

diff --git a/less/_buttons.less b/less/_buttons.less index fb3d0930..f63ac3b8 100644 --- a/less/_buttons.less +++ b/less/_buttons.less @@ -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) diff --git a/less/_mixins.less b/less/_mixins.less index aedf7bb9..c27bcd0e 100755 --- a/less/_mixins.less +++ b/less/_mixins.less @@ -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; diff --git a/less/_shadows.less b/less/_shadows.less index 1a1ec1bf..6cf0edcb 100644 --- a/less/_shadows.less +++ b/less/_shadows.less @@ -35,7 +35,7 @@ } -/* Shadows */ +/* Shadows (from mdl http://www.getmdl.io/) */ // Focus shadow mixin. .focus-shadow() { diff --git a/less/_themes.less b/less/_themes.less new file mode 100644 index 00000000..fd2d41af --- /dev/null +++ b/less/_themes.less @@ -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 { + +} diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 8a886823..b9c84cc9 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -188,7 +188,7 @@ ); // bootstrap styles - //&#{$selector-suffix}, + &#{$selector-suffix}, &#{$component}-default#{$selector-suffix} { $args-extra: map-merge($args, (