mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 12:54:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

checkpoint on button refactoring - need to continue at btn-fab

Browse Source
This commit is contained in:
Kevin Ross 2015-12-16 14:38:44 -06:00
parent 4f243cd3e6
commit 36a11b2c0a
11 changed files with 330 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/material-design/buttons.md
View File

@ -14,8 +14,8 @@ group: material-design
{% example html %} {% example html %}
<button type="button" class="btn"><code>btn</code> only</button> <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 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-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-success">Success</button>
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
@ -28,8 +28,8 @@ group: material-design
{% example html %} {% example html %}
<fieldset disabled> <fieldset disabled>
<button type="button" class="btn"><code>btn</code> only</button> <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-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-success">Success</button>
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
@ -42,8 +42,8 @@ group: material-design
{% example html %} {% example html %}
<button type="button" class="btn btn-raised active"><code>.active</code></button> <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-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-success">Success</button>
<button type="button" class="btn btn-raised btn-info">Info</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-warning">Warning</button>
@ -54,9 +54,9 @@ group: material-design
### Disabled ### Disabled
{% example html %} {% example html %}
<fieldset disabled> <fieldset disabled>
<button type="button" class="btn btn-raised btn-default">Default</button> <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
<button type="button" class="btn btn-raised btn-primary">Primary</button>
<button type="button" class="btn btn-raised btn-success">Success</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-info">Info</button>
<button type="button" class="btn btn-raised btn-warning">Warning</button> <button type="button" class="btn btn-raised btn-warning">Warning</button>
<button type="button" class="btn btn-raised btn-danger">Danger</button> <button type="button" class="btn btn-raised btn-danger">Danger</button>
@ -67,10 +67,10 @@ group: material-design
## Floating Action ## Floating Action
{% example html %} {% 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> <i class="material-icons">grade</i>
</button> </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> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-success btn-fab"> <button type="button" class="btn btn-success btn-fab">
@ -90,10 +90,10 @@ group: material-design
### Disabled ### Disabled
{% example html %} {% example html %}
<fieldset disabled> <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> <i class="material-icons">grade</i>
</button> </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> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-success btn-fab"> <button type="button" class="btn btn-success btn-fab">
@ -114,10 +114,10 @@ group: material-design
### Mini ### Mini
{% example html %} {% example html %}
<fieldset class="btn-group-sm"> <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> <i class="material-icons">grade</i>
</button> </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> <i class="material-icons">grade</i>
</button> </button>
<button type="button" class="btn btn-success btn-fab"> <button type="button" class="btn btn-success btn-fab">

134
scss/_buttons.scss
View File

@ -1,64 +1,33 @@
// specification: https://www.google.com/design/spec/components/buttons.html // 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 // mdb default buttons are flat by default
.btn, .btn {
.input-group-btn .btn {
position: relative; position: relative;
padding: 8px 30px; font-size: $mdb-btn-font-size;
margin: 10px 1px;
text-decoration: none; text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer; cursor: pointer;
background: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: $border-radius;
outline: none; 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; 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; will-change: box-shadow, transform;
@include typo-button(); @include undo-tab-focus(); // clear out the tab-focus() from BS
&::-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));
}
}
}
}
//-- //--
// color variations // Colors
&.btn-raised,
// 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-fab,
&.btn-raised,
.btn-group-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) { &:not(.btn-link) {
@include shadow-2dp(); @include shadow-2dp();
// colors on hover, focus, active // contrast bg colors on hover, focus, active
&:hover, @include mdb-hover-focus-active() {
&:focus, @include mdb-button-colored-bg(true);
&.active, //border: 1px solid $red;
&: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 & {
//
}
} }
// shadow on active // enlarged shadow on hover, focus
&.active, @include hover-focus() {
&:active { //border: 1px solid $blue;
&,
&:hover {
@include shadow-4dp(); @include shadow-4dp();
} }
}
// shadow on focus // :active - momentary press: big shadow, release and it is gone
// Focus should take precedence over active, so specificity is needed // .active - persistent big shadow
&:focus {
&,
&.active, &.active,
&:active { &:active {
&,
&:hover {
@include focus-shadow(); @include focus-shadow();
} //border: 1px solid $green;
}
} }
} }
} }
@ -177,26 +126,28 @@
&.disabled, &.disabled,
&:disabled, &:disabled,
&[disabled][disabled] { &[disabled][disabled] {
// spec: light theme: Disabled text: 26% $black color: $mdb-btn-disabled;
color: rgba($black, (26 / 100));
.theme-dark & { .theme-dark & {
// spec: dark theme: Disabled text: 30% $white color: $mdb-btn-disabled-dark;
color: rgba($white, (30 / 100));
} }
// flat buttons lose transparency // flat buttons shouldn't lose transparency on disabled hover/focus
&,
&:hover,
&:focus {
background: transparent; background: transparent;
}
// no box-shadow on raised - need specificity // no box-shadow on raised - need specificity
&.btn-raised, //&.btn-raised,
&.btn-group-raised { //&.btn-group-raised {
&, // &,
&.active, // &.active,
&:active, // &:active,
&:focus:not(:active) { // &:focus:not(:active) {
box-shadow: none; // box-shadow: none;
} // }
} //}
} }
} }
@ -205,7 +156,6 @@
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
//border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
@ -215,7 +165,7 @@
} }
> .dropdown-toggle.btn { > .dropdown-toggle.btn {
@include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color); @include mdb-button-colored-bg();
} }
} }

2
scss/_checkboxes.scss
View File

@ -115,7 +115,7 @@ label.checkbox-inline {
fieldset[disabled] & { fieldset[disabled] & {
+ .checkbox-decorator .check::after, + .checkbox-decorator .check::after,
.check::after { .check::after {
background-color: $mdb-text-color-primary; background-color: $gray-dark;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
+ .checkbox-decorator .check, + .checkbox-decorator .check,

200
scss/_lists.scss
View File

@ -1,100 +1,100 @@
.list-group { //.list-group {
border-radius: 0; // border-radius: 0;
.list-group-item { // .list-group-item {
padding: 0 16px; // padding: 0 16px;
overflow: hidden; // overflow: hidden;
background-color: transparent; // background-color: transparent;
border: 0; // border: 0;
border-radius: 0; // border-radius: 0;
&.baseline { // &.baseline {
border-bottom: 1px solid #cecece; // border-bottom: 1px solid #cecece;
&:last-child { // &:last-child {
border-bottom: 0; // border-bottom: 0;
} // }
} // }
.row-picture, .row-action-primary { // .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 // //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; // display: inline-block;
padding-right: 16px; // padding-right: 16px;
img, i, label { // img, i, label {
display: block; // display: block;
width: 56px; // width: 56px;
height: 56px; // height: 56px;
} // }
img { // img {
padding: 1px; // padding: 1px;
background: rgba($black, 0.1); // background: rgba($black, 0.1);
&.mdb-radio-outer-circle { // &.mdb-radio-outer-circle {
border-radius: 100%; // border-radius: 100%;
} // }
} // }
i { // i {
font-size: 20px; // font-size: 20px;
line-height: 56px; // line-height: 56px;
color: $white; // color: $white;
text-align: center; // text-align: center;
background: rgba($black, 0.25); // background: rgba($black, 0.25);
border-radius: 100%; // border-radius: 100%;
} // }
label { // label {
margin: 5px -7px -5px 7px; // margin: 5px -7px -5px 7px;
.checkbox-decorator { // .checkbox-decorator {
left: -10px; // left: -10px;
} // }
} // }
} // }
.row-content { // .row-content {
display: inline-block; // display: inline-block;
width: unquote("calc(100% - 92px)"); // width: unquote("calc(100% - 92px)");
min-height: 66px; // min-height: 66px;
.action-secondary { // .action-secondary {
position: absolute; // position: absolute;
top: 16px; // top: 16px;
right: 16px; // right: 16px;
i { // i {
font-size: 20px; // font-size: 20px;
color: rgba($black, 0.25); // color: rgba($black, 0.25);
cursor: pointer; // cursor: pointer;
} // }
} // }
.action-secondary ~ * { // .action-secondary ~ * {
max-width: unquote("calc(100% - 30px)"); // max-width: unquote("calc(100% - 30px)");
} // }
.least-content { // .least-content {
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 16px; // right: 16px;
font-size: 14px; // font-size: 14px;
color: rgba($black, 0.54); // color: rgba($black, 0.54);
} // }
} // }
.list-group-item-heading { // .list-group-item-heading {
font-size: 20px; // font-size: 20px;
line-height: 29px; // line-height: 29px;
color: rgba($black, 0.77); // color: rgba($black, 0.77);
} // }
} // }
//
.list-group-item.active { // .list-group-item.active {
&:hover, &:focus { // &:hover, &:focus {
background: rgba($black, .15); // background: rgba($black, .15);
outline: 10px solid rgba($black, .15); // outline: 10px solid rgba($black, .15);
} // }
.list-group-item-heading, .list-group-item-text { // .list-group-item-heading, .list-group-item-text {
color: $mdb-text-color-primary; // color: $gray-dark;
} // }
} // }
//
.list-group-separator { // .list-group-separator {
margin-top: 10px; // margin-top: 10px;
margin-bottom: 10px; // margin-bottom: 10px;
overflow: hidden; // overflow: hidden;
clear: both; // clear: both;
&::before { // &::before {
float: right; // float: right;
width: unquote("calc(100% - 90px)"); // width: unquote("calc(100% - 90px)");
content: ""; // content: "";
border-bottom: 1px solid rgba($black, 0.1); // border-bottom: 1px solid rgba($black, 0.1);
} // }
} // }
} //}

2
scss/_mixins.scss
View File

@ -2,3 +2,5 @@
@import "mixins/shadows"; @import "mixins/shadows";
@import "mixins/variations"; @import "mixins/variations";
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/buttons";
@import "mixins/hover";

29
scss/_variables.scss
View File

@ -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. // 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-light: rgba($white, 0.84) !default;
$mdb-text-color-primary: $gray-dark !default;
$mdb-label-color: $gray-light !default; $mdb-label-color: $gray-light !default;
$mdb-label-color-focus: $brand-primary !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 $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 $mdb-label-top-margin-sm: .75rem !default; // 12px
// Card // 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-body-background: #fff !default;
$mdb-card-image-headline: #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% $mdb-radio-color-disabled-dark: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
// Buttons: // Buttons:
$mdb-btn-font-size-base: 14px !default; // FIXME $mdb-btn-font-size: .875rem !default; // 14px
$mdb-btn-font-size-lg: 16px !default; $mdb-btn-font-size-lg: 1rem !default;
$mdb-btn-font-size-sm: 12px !default; $mdb-btn-font-size-sm: .75rem !default; // 12px
$mdb-btn-font-size-xs: 10px !default; $mdl-btn-border-radius: 2px !default;
$mdb-btn-background-color: $body-bg !default; // transparent // btn with no other designation
$mdb-btn-background-color-text: $mdb-text-color-primary !default; $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: 56px !default;
$mdb-btn-fab-size-mini: 40px !default; $mdb-btn-fab-size-mini: 40px !default;

120
scss/mixins/_buttons.scss Normal file
View 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;
}
}
}

5
scss/mixins/_forms.scss
View File

@ -14,8 +14,9 @@
color: $mdb-label-color; color: $mdb-label-color;
// on focus just darken the specific labels, do not turn them to the brand-primary // on focus just darken the specific labels, do not turn them to the brand-primary
&:hover, @include hover-focus-active() {
&:focus { //&:hover,
//&:focus {
color: $mdb-label-color-inner-focus; color: $mdb-label-color-inner-focus;
} }

9
scss/mixins/_hover.scss Normal file
View 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;
}
}

41
scss/mixins/_variations.scss
View File

@ -10,31 +10,6 @@
#{map-get($args, material-param-1)}: map-get($args, variation-color); #{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 // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin navbar-variations($component, $selector-suffix, $color-default) { //@mixin navbar-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null); // @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
@ -121,7 +96,7 @@
); );
// bootstrap styles // bootstrap styles
&#{$component}-default#{$selector-suffix} { &#{$component}-secondary#{$selector-suffix} {
$args-extra: map-merge($args, ( $args-extra: map-merge($args, (
variation-color: $color-default, variation-color: $color-default,
@ -129,13 +104,13 @@
)); ));
@include call-variations-content-mixin($args-extra); @include call-variations-content-mixin($args-extra);
} }
&#{$component}-inverse#{$selector-suffix} { //&#{$component}-inverse#{$selector-suffix} {
$args-inverse: map-merge($args, ( // $args-inverse: map-merge($args, (
variation-color: $mdb-brand-inverse, // variation-color: $mdb-brand-inverse,
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary, $mdb-text-color-light) // variation-color-text: contrast-color($mdb-brand-inverse, $gray-dark, $mdb-text-color-light)
)); // ));
@include call-variations-content-mixin($args-inverse); // @include call-variations-content-mixin($args-inverse);
} //}
&#{$component}-primary#{$selector-suffix} { &#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, ( $args-primary: map-merge($args, (
variation-color: $brand-primary, variation-color: $brand-primary,

20
scss/variables/bootstrap/_buttons.scss
View File

@ -2,31 +2,31 @@
// //
// For each of Bootstrap's buttons, define text, background and border color. // For each of Bootstrap's buttons, define text, background and border color.
//$btn-padding-x: 1rem !default; $btn-padding-x: 1.875rem !default; // 1rem
//$btn-padding-y: .375rem !default; $btn-padding-y: .5rem !default; // .375rem
//$btn-font-weight: normal !default; $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-bg: $brand-primary !default;
//$btn-primary-border: $btn-primary-bg !default; //$btn-primary-border: $btn-primary-bg !default;
// //
//$btn-secondary-color: $gray-dark !default; $btn-secondary-color: $gray-dark !default;
//$btn-secondary-bg: #fff !default; $btn-secondary-bg: $body-bg !default; // #fff
//$btn-secondary-border: #ccc !default; //$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-bg: $brand-info !default;
//$btn-info-border: $btn-info-bg !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-bg: $brand-success !default;
//$btn-success-border: $btn-success-bg !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-bg: $brand-warning !default;
//$btn-warning-border: $btn-warning-bg !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-bg: $brand-danger !default;
//$btn-danger-border: $btn-danger-bg !default; //$btn-danger-border: $btn-danger-bg !default;
// //