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

fine tuning behavior of icon buttons - make them inherit more so that they work better on various background colors. This also changes flat to work on different backgrounds as well

Browse Source
This commit is contained in:
Kevin Ross 2016-01-12 17:49:53 -06:00
parent 6e01cf4ba9
commit fb779a0f1c
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<!-- icon with buttons --> <!-- icon with buttons -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-icon</code> with menu buttons An <code>.mdb-btn-icon</code> with menu buttons
@ -29,7 +29,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- icon with links --> <!-- icon with links -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-icon</code> with menu links An <code>.mdb-btn-icon</code> with menu links
@ -42,7 +42,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab-sm --> <!-- fab-sm -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-fab mdb-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab-sm</code> An <code>.mdb-btn-fab-sm</code>
@ -54,7 +54,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- fab --> <!-- fab -->
<div class="dropdown"> <div class="dropdown">
<button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
An <code>.mdb-btn-fab</code> An <code>.mdb-btn-fab</code>
@ -66,7 +66,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
<!-- default btn --> <!-- default btn -->
<div class="dropdown open"> <div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<div class="dropdown-menu" aria-labelledby="buttonMenu1"> <div class="dropdown-menu" aria-labelledby="buttonMenu1">
@ -83,7 +83,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower left side ### Lower left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu" aria-labelledby="ll1"> <div class="dropdown-menu" aria-labelledby="ll1">
@ -99,7 +99,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Lower right side ### Lower right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr1">
@ -115,7 +115,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top left side ### Top left side
{% example html %} {% example html %}
<div class="dropdown open"> <div class="dropdown open">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tl1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1"> <div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="tl1">
@ -131,7 +131,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
### Top right side ### Top right side
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="tr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1"> <div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="tr1">
@ -152,7 +152,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw1">
@ -167,7 +167,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
{% example html %} {% example html %}
<div class="dropdown open pull-xs-right"> <div class="dropdown open pull-xs-right">
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn mdb-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="mw2">

10
scss/mixins/_buttons.scss
View File

@ -33,12 +33,18 @@
} }
} }
// when it is an icon, kill the active bg on open dropdown // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
.open > &.dropdown-toggle.mdb-btn-icon { .open > &.dropdown-toggle.mdb-btn-icon {
color: inherit;
background-color: $background; background-color: $background;
// leave hover on with the lighter focus color
&:hover {
background-color: $focus-background;
}
} }
&.disabled, &.disabled,
&:disabled { &:disabled {
&:focus, &:focus,
&.focus { &.focus {

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

@ -6,7 +6,7 @@ $mdb-btn-margin-bottom: .3125rem !default; // 5px
// default btn with no specific type designation // default btn with no specific type designation
$mdb-btn-color: $gray-dark !default; $mdb-btn-color: $gray-dark !default;
$mdb-btn-bg: $body-bg !default; // #fff $mdb-btn-bg: inherit !default; //$body-bg !default; // #fff
$mdb-btn-border: #ccc !default; $mdb-btn-border: #ccc !default;
$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999 $mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999