mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 11:29:10 +03:00
checkpoint on button refactoring - need to continue at btn-fab
This commit is contained in:
Kevin Ross
parent
4f243cd3e6
commit
36a11b2c0a
|
|
@ -14,8 +14,8 @@ group: material-design
|
|||
{% example html %}
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
|
|
@ -28,8 +28,8 @@ group: material-design
|
|||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn"><code>btn</code> only</button>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
|
|
@ -42,8 +42,8 @@ group: material-design
|
|||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-raised active"><code>.active</code></button>
|
||||
<button type="button" class="btn btn-raised btn-default">Default</button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-raised btn-success">Success</button>
|
||||
<button type="button" class="btn btn-raised btn-info">Info</button>
|
||||
<button type="button" class="btn btn-raised btn-warning">Warning</button>
|
||||
|
|
@ -54,9 +54,9 @@ group: material-design
|
|||
### Disabled
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn btn-raised btn-default">Default</button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-raised btn-success">Success</button>
|
||||
<button type="button" class="btn btn-raised btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-raised btn-info">Info</button>
|
||||
<button type="button" class="btn btn-raised btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-raised btn-danger">Danger</button>
|
||||
|
|
@ -67,10 +67,10 @@ group: material-design
|
|||
## Floating Action
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<button type="button" class="btn btn-secondary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
|
|
@ -90,10 +90,10 @@ group: material-design
|
|||
### Disabled
|
||||
{% example html %}
|
||||
<fieldset disabled>
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<button type="button" class="btn btn-secondary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
|
|
@ -114,10 +114,10 @@ group: material-design
|
|||
### Mini
|
||||
{% example html %}
|
||||
<fieldset class="btn-group-sm">
|
||||
<button type="button" class="btn btn-default btn-fab">
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-fab">
|
||||
<button type="button" class="btn btn-secondary btn-fab">
|
||||
<i class="material-icons">grade</i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-fab">
|
||||
|
|
|
|||
|
|
@ -1,64 +1,33 @@
|
|||
// specification: https://www.google.com/design/spec/components/buttons.html
|
||||
|
||||
@mixin typo-button($color-contrast: false) {
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
//line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if ($color-contrast) {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
||||
// mdb default buttons are flat by default
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
margin: 10px 1px;
|
||||
font-size: $mdb-btn-font-size;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
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;
|
||||
will-change: box-shadow, transform;
|
||||
|
||||
@include typo-button();
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//---
|
||||
// btn-flat
|
||||
&:not(.btn-raised) {
|
||||
@include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
|
||||
box-shadow: none;
|
||||
|
||||
&:not(.btn-link) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
// spec: flat/light bg Hover: 20% #999999
|
||||
background-color: rgba(#999, (20 / 100));
|
||||
|
||||
.theme-dark & {
|
||||
// spec: dark bg Hover: 15% #CCCCCC
|
||||
background-color: rgba(#ccc, (15 / 100));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include undo-tab-focus(); // clear out the tab-focus() from BS
|
||||
|
||||
//--
|
||||
// color variations
|
||||
&.btn-raised,
|
||||
// Colors
|
||||
|
||||
// flat removes bg, add color variations to text
|
||||
@include mdb-button-color();
|
||||
|
||||
// fab and raised are colored, add their text and bg
|
||||
&.btn-fab,
|
||||
&.btn-raised,
|
||||
.btn-group-raised & {
|
||||
@include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
|
||||
@include mdb-button-colored();
|
||||
}
|
||||
|
||||
//---
|
||||
|
|
@ -68,44 +37,24 @@
|
|||
&:not(.btn-link) {
|
||||
@include shadow-2dp();
|
||||
|
||||
// colors on hover, focus, active
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active,
|
||||
&:active {
|
||||
|
||||
// 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?
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
|
||||
@include button-variations(unquote(".btn"), "", $mdb-btn-background-color);
|
||||
|
||||
// Spec:
|
||||
// - Raised Light/Light theme no hover.
|
||||
// - Raised Dark/Dark theme Hover color: 600
|
||||
.theme-dark & {
|
||||
//
|
||||
}
|
||||
// contrast bg colors on hover, focus, active
|
||||
@include mdb-hover-focus-active() {
|
||||
@include mdb-button-colored-bg(true);
|
||||
//border: 1px solid $red;
|
||||
}
|
||||
|
||||
// shadow on active
|
||||
&.active,
|
||||
&:active {
|
||||
&,
|
||||
&:hover {
|
||||
@include shadow-4dp();
|
||||
}
|
||||
// enlarged shadow on hover, focus
|
||||
@include hover-focus() {
|
||||
//border: 1px solid $blue;
|
||||
@include shadow-4dp();
|
||||
}
|
||||
|
||||
// shadow on focus
|
||||
// Focus should take precedence over active, so specificity is needed
|
||||
&:focus {
|
||||
&,
|
||||
&.active,
|
||||
&:active {
|
||||
&,
|
||||
&:hover {
|
||||
@include focus-shadow();
|
||||
}
|
||||
}
|
||||
// :active - momentary press: big shadow, release and it is gone
|
||||
// .active - persistent big shadow
|
||||
&.active,
|
||||
&:active {
|
||||
@include focus-shadow();
|
||||
//border: 1px solid $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -177,26 +126,28 @@
|
|||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled][disabled] {
|
||||
// spec: light theme: Disabled text: 26% $black
|
||||
color: rgba($black, (26 / 100));
|
||||
color: $mdb-btn-disabled;
|
||||
.theme-dark & {
|
||||
// spec: dark theme: Disabled text: 30% $white
|
||||
color: rgba($white, (30 / 100));
|
||||
color: $mdb-btn-disabled-dark;
|
||||
}
|
||||
|
||||
// flat buttons lose transparency
|
||||
background: transparent;
|
||||
// flat buttons shouldn't lose transparency on disabled hover/focus
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// no box-shadow on raised - need specificity
|
||||
&.btn-raised,
|
||||
&.btn-group-raised {
|
||||
&,
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
//&.btn-raised,
|
||||
//&.btn-group-raised {
|
||||
// &,
|
||||
// &.active,
|
||||
// &:active,
|
||||
// &:focus:not(:active) {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +156,6 @@
|
|||
.btn-group-vertical {
|
||||
|
||||
position: relative;
|
||||
//border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||
|
|
@ -215,7 +165,7 @@
|
|||
}
|
||||
|
||||
> .dropdown-toggle.btn {
|
||||
@include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
|
||||
@include mdb-button-colored-bg();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ label.checkbox-inline {
|
|||
fieldset[disabled] & {
|
||||
+ .checkbox-decorator .check::after,
|
||||
.check::after {
|
||||
background-color: $mdb-text-color-primary;
|
||||
background-color: $gray-dark;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
+ .checkbox-decorator .check,
|
||||
|
|
|
|||
200
scss/_lists.scss
200
scss/_lists.scss
|
|
@ -1,100 +1,100 @@
|
|||
.list-group {
|
||||
border-radius: 0;
|
||||
.list-group-item {
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
&.baseline {
|
||||
border-bottom: 1px solid #cecece;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.row-picture, .row-action-primary {
|
||||
//float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
|
||||
display: inline-block;
|
||||
padding-right: 16px;
|
||||
img, i, label {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
img {
|
||||
padding: 1px;
|
||||
background: rgba($black, 0.1);
|
||||
&.mdb-radio-outer-circle {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
line-height: 56px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
background: rgba($black, 0.25);
|
||||
border-radius: 100%;
|
||||
}
|
||||
label {
|
||||
margin: 5px -7px -5px 7px;
|
||||
.checkbox-decorator {
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-content {
|
||||
display: inline-block;
|
||||
width: unquote("calc(100% - 92px)");
|
||||
min-height: 66px;
|
||||
.action-secondary {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: rgba($black, 0.25);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.action-secondary ~ * {
|
||||
max-width: unquote("calc(100% - 30px)");
|
||||
}
|
||||
.least-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 16px;
|
||||
font-size: 14px;
|
||||
color: rgba($black, 0.54);
|
||||
}
|
||||
}
|
||||
.list-group-item-heading {
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
color: rgba($black, 0.77);
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.active {
|
||||
&:hover, &:focus {
|
||||
background: rgba($black, .15);
|
||||
outline: 10px solid rgba($black, .15);
|
||||
}
|
||||
.list-group-item-heading, .list-group-item-text {
|
||||
color: $mdb-text-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-separator {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
&::before {
|
||||
float: right;
|
||||
width: unquote("calc(100% - 90px)");
|
||||
content: "";
|
||||
border-bottom: 1px solid rgba($black, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
//.list-group {
|
||||
// border-radius: 0;
|
||||
// .list-group-item {
|
||||
// padding: 0 16px;
|
||||
// overflow: hidden;
|
||||
// background-color: transparent;
|
||||
// border: 0;
|
||||
// border-radius: 0;
|
||||
// &.baseline {
|
||||
// border-bottom: 1px solid #cecece;
|
||||
// &:last-child {
|
||||
// border-bottom: 0;
|
||||
// }
|
||||
// }
|
||||
// .row-picture, .row-action-primary {
|
||||
// //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
|
||||
// display: inline-block;
|
||||
// padding-right: 16px;
|
||||
// img, i, label {
|
||||
// display: block;
|
||||
// width: 56px;
|
||||
// height: 56px;
|
||||
// }
|
||||
// img {
|
||||
// padding: 1px;
|
||||
// background: rgba($black, 0.1);
|
||||
// &.mdb-radio-outer-circle {
|
||||
// border-radius: 100%;
|
||||
// }
|
||||
// }
|
||||
// i {
|
||||
// font-size: 20px;
|
||||
// line-height: 56px;
|
||||
// color: $white;
|
||||
// text-align: center;
|
||||
// background: rgba($black, 0.25);
|
||||
// border-radius: 100%;
|
||||
// }
|
||||
// label {
|
||||
// margin: 5px -7px -5px 7px;
|
||||
// .checkbox-decorator {
|
||||
// left: -10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .row-content {
|
||||
// display: inline-block;
|
||||
// width: unquote("calc(100% - 92px)");
|
||||
// min-height: 66px;
|
||||
// .action-secondary {
|
||||
// position: absolute;
|
||||
// top: 16px;
|
||||
// right: 16px;
|
||||
// i {
|
||||
// font-size: 20px;
|
||||
// color: rgba($black, 0.25);
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
// .action-secondary ~ * {
|
||||
// max-width: unquote("calc(100% - 30px)");
|
||||
// }
|
||||
// .least-content {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// right: 16px;
|
||||
// font-size: 14px;
|
||||
// color: rgba($black, 0.54);
|
||||
// }
|
||||
// }
|
||||
// .list-group-item-heading {
|
||||
// font-size: 20px;
|
||||
// line-height: 29px;
|
||||
// color: rgba($black, 0.77);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .list-group-item.active {
|
||||
// &:hover, &:focus {
|
||||
// background: rgba($black, .15);
|
||||
// outline: 10px solid rgba($black, .15);
|
||||
// }
|
||||
// .list-group-item-heading, .list-group-item-text {
|
||||
// color: $gray-dark;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .list-group-separator {
|
||||
// margin-top: 10px;
|
||||
// margin-bottom: 10px;
|
||||
// overflow: hidden;
|
||||
// clear: both;
|
||||
// &::before {
|
||||
// float: right;
|
||||
// width: unquote("calc(100% - 90px)");
|
||||
// content: "";
|
||||
// border-bottom: 1px solid rgba($black, 0.1);
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,5 @@
|
|||
@import "mixins/shadows";
|
||||
@import "mixins/variations";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/hover";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ $gray-dark: rgba($black, 0.87) !default;
|
|||
|
||||
// wondering if any of these could still be refactored out, but are definitely in use.
|
||||
$mdb-text-color-light: rgba($white, 0.84) !default;
|
||||
$mdb-text-color-primary: $gray-dark !default;
|
||||
$mdb-label-color: $gray-light !default;
|
||||
$mdb-label-color-focus: $brand-primary !default;
|
||||
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
|
||||
|
|
@ -72,7 +71,7 @@ $mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that paddings a
|
|||
$mdb-label-top-margin-sm: .75rem !default; // 12px
|
||||
|
||||
// Card
|
||||
$mdb-card-body-text: $mdb-text-color-primary !default;
|
||||
$mdb-card-body-text: $gray-dark !default;
|
||||
$mdb-card-body-background: #fff !default;
|
||||
$mdb-card-image-headline: #fff !default;
|
||||
|
||||
|
|
@ -119,16 +118,26 @@ $mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000,
|
|||
$mdb-radio-color-disabled-dark: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
|
||||
|
||||
// Buttons:
|
||||
$mdb-btn-font-size-base: 14px !default; // FIXME
|
||||
$mdb-btn-font-size-lg: 16px !default;
|
||||
$mdb-btn-font-size-sm: 12px !default;
|
||||
$mdb-btn-font-size-xs: 10px !default;
|
||||
$mdb-btn-font-size: .875rem !default; // 14px
|
||||
$mdb-btn-font-size-lg: 1rem !default;
|
||||
$mdb-btn-font-size-sm: .75rem !default; // 12px
|
||||
$mdl-btn-border-radius: 2px !default;
|
||||
|
||||
$mdb-btn-background-color: $body-bg !default; // transparent
|
||||
$mdb-btn-background-color-text: $mdb-text-color-primary !default;
|
||||
// btn with no other designation
|
||||
$mdb-btn-color: $gray-dark !default;
|
||||
$mdb-btn-bg: $body-bg !default; // #fff
|
||||
$mdb-btn-border: #ccc !default;
|
||||
|
||||
|
||||
//$mdb-btn-colored-bg: $body-bg !default; // transparent
|
||||
$mdb-btn-colored-bg-text: $gray-dark !default;
|
||||
|
||||
$mdb-btn-hover-bg: rgba(#999, .20) !default; // spec: flat/light bg Hover: 20% #999999
|
||||
$mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
|
||||
|
||||
$mdb-btn-hover-bg-dark: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
|
||||
$mdb-btn-disabled-dark: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
|
||||
|
||||
$mdl-btn-border-radus: 2px !default;
|
||||
//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
|
||||
|
||||
$mdb-btn-fab-size: 56px !default;
|
||||
$mdb-btn-fab-size-mini: 40px !default;
|
||||
|
|
|
|||
120
scss/mixins/_buttons.scss
Normal file
120
scss/mixins/_buttons.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
@mixin mdb-button-variant($color: null, $bg-color: null, $border-color: null) {
|
||||
@if ($color) {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@if ($bg-color) {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
@if ($border-color) {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-color() {
|
||||
|
||||
@include hover-focus {
|
||||
background-color: $mdb-btn-hover-bg;
|
||||
|
||||
.theme-dark & {
|
||||
background-color: $mdb-btn-hover-bg-dark;
|
||||
}
|
||||
|
||||
// reverse the above for links
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
//@include mdb-button-variant($mdb-btn-color, $mdb-btn-bg, $mdb-btn-border);
|
||||
|
||||
// flat bg with text color variations
|
||||
&.btn-primary {
|
||||
@include mdb-button-variant($btn-primary-bg);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-variant($btn-secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-variant($btn-info-bg);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-variant($btn-success-bg);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-variant($btn-warning-bg);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-variant($btn-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-colored() {
|
||||
|
||||
&.btn-primary {
|
||||
@include mdb-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-bg($color, $contrast: false) {
|
||||
@if ($contrast) { // contrast for focus indication
|
||||
// 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-color($color, darken($color, 4%), lighten($color, 4%));
|
||||
} @else {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-colored-bg($contrast: false) {
|
||||
// default
|
||||
@include mdb-button-bg($mdb-btn-bg, $contrast);
|
||||
|
||||
&.btn-primary {
|
||||
@include mdb-button-bg($btn-primary-bg, $contrast);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-bg($btn-secondary-bg, $contrast);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-bg($btn-info-bg, $contrast);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-bg($btn-success-bg, $contrast);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-bg($btn-warning-bg, $contrast);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-bg($btn-danger-bg, $contrast);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin undo-tab-focus() {
|
||||
// clear out the tab-focus() from BS
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
//@include tab-focus();
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,8 +14,9 @@
|
|||
color: $mdb-label-color;
|
||||
|
||||
// on focus just darken the specific labels, do not turn them to the brand-primary
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include hover-focus-active() {
|
||||
//&:hover,
|
||||
//&:focus {
|
||||
color: $mdb-label-color-inner-focus;
|
||||
}
|
||||
|
||||
|
|
|
|||
9
scss/mixins/_hover.scss
Normal file
9
scss/mixins/_hover.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@mixin mdb-hover-focus-active {
|
||||
// add the .active to the whole mix of hover-focus-active
|
||||
&.active {
|
||||
@content
|
||||
}
|
||||
@include hover-focus-active() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,31 +10,6 @@
|
|||
#{map-get($args, material-param-1)}: map-get($args, variation-color);
|
||||
}
|
||||
|
||||
@mixin background-variations($component, $selector-suffix, $color-default) {
|
||||
@include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
|
||||
}
|
||||
|
||||
@mixin background-variations-content($args) {
|
||||
background-color: map-get($args, variation-color);
|
||||
@if (map-get($args, variation-color) == $mdb-btn-background-color) {
|
||||
color: $mdb-text-color-primary;
|
||||
} @else {
|
||||
color: map-get($args, variation-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-variations($component, $selector-suffix, $color-default) {
|
||||
@include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", null);
|
||||
}
|
||||
|
||||
@mixin button-variations-content($args) {
|
||||
//@debug "#{inspect($args)}";
|
||||
$variation-color: map-get($args, variation-color);
|
||||
background-color: contrast-color($variation-color,
|
||||
darken($variation-color, 4%),
|
||||
lighten($variation-color, 4%));
|
||||
}
|
||||
|
||||
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
|
||||
//@mixin navbar-variations($component, $selector-suffix, $color-default) {
|
||||
// @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
|
||||
|
|
@ -121,7 +96,7 @@
|
|||
);
|
||||
|
||||
// bootstrap styles
|
||||
&#{$component}-default#{$selector-suffix} {
|
||||
&#{$component}-secondary#{$selector-suffix} {
|
||||
|
||||
$args-extra: map-merge($args, (
|
||||
variation-color: $color-default,
|
||||
|
|
@ -129,13 +104,13 @@
|
|||
));
|
||||
@include call-variations-content-mixin($args-extra);
|
||||
}
|
||||
&#{$component}-inverse#{$selector-suffix} {
|
||||
$args-inverse: map-merge($args, (
|
||||
variation-color: $mdb-brand-inverse,
|
||||
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary, $mdb-text-color-light)
|
||||
));
|
||||
@include call-variations-content-mixin($args-inverse);
|
||||
}
|
||||
//&#{$component}-inverse#{$selector-suffix} {
|
||||
// $args-inverse: map-merge($args, (
|
||||
// variation-color: $mdb-brand-inverse,
|
||||
// variation-color-text: contrast-color($mdb-brand-inverse, $gray-dark, $mdb-text-color-light)
|
||||
// ));
|
||||
// @include call-variations-content-mixin($args-inverse);
|
||||
//}
|
||||
&#{$component}-primary#{$selector-suffix} {
|
||||
$args-primary: map-merge($args, (
|
||||
variation-color: $brand-primary,
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
//$btn-padding-x: 1rem !default;
|
||||
//$btn-padding-y: .375rem !default;
|
||||
//$btn-font-weight: normal !default;
|
||||
$btn-padding-x: 1.875rem !default; // 1rem
|
||||
$btn-padding-y: .5rem !default; // .375rem
|
||||
$btn-font-weight: 500 !default; // normal
|
||||
//
|
||||
//$btn-primary-color: #fff !default;
|
||||
$btn-primary-color: $mdb-text-color-light !default; // #fff
|
||||
//$btn-primary-bg: $brand-primary !default;
|
||||
//$btn-primary-border: $btn-primary-bg !default;
|
||||
//
|
||||
//$btn-secondary-color: $gray-dark !default;
|
||||
//$btn-secondary-bg: #fff !default;
|
||||
$btn-secondary-color: $gray-dark !default;
|
||||
$btn-secondary-bg: $body-bg !default; // #fff
|
||||
//$btn-secondary-border: #ccc !default;
|
||||
//
|
||||
//$btn-info-color: #fff !default;
|
||||
$btn-info-color: $mdb-text-color-light !default; // #fff
|
||||
//$btn-info-bg: $brand-info !default;
|
||||
//$btn-info-border: $btn-info-bg !default;
|
||||
//
|
||||
//$btn-success-color: #fff !default;
|
||||
$btn-success-color: $mdb-text-color-light !default; // #fff
|
||||
//$btn-success-bg: $brand-success !default;
|
||||
//$btn-success-border: $btn-success-bg !default;
|
||||
//
|
||||
//$btn-warning-color: #fff !default;
|
||||
$btn-warning-color: $mdb-text-color-light !default; // #fff
|
||||
//$btn-warning-bg: $brand-warning !default;
|
||||
//$btn-warning-border: $btn-warning-bg !default;
|
||||
//
|
||||
//$btn-danger-color: #fff !default;
|
||||
$btn-danger-color: $mdb-text-color-light !default; // #fff
|
||||
//$btn-danger-bg: $brand-danger !default;
|
||||
//$btn-danger-border: $btn-danger-bg !default;
|
||||
//
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user