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

solve focus/hover/active box-shadow overlap/cutoff issue by adding a z-index in those states only to raise them above any neighboring element

Browse Source
This commit is contained in:
Kevin Ross 2016-01-11 16:45:00 -06:00
parent 1b91f6f884
commit e75ede0fca
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/_buttons.scss
View File

@ -36,6 +36,7 @@
// enlarged shadow on hover, focus // enlarged shadow on hover, focus
@include hover-focus() { @include hover-focus() {
//border: 1px solid $blue; //border: 1px solid $blue;
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
@include shadow-4dp(); @include shadow-4dp();
} }
@ -43,6 +44,7 @@
// .active - persistent big shadow // .active - persistent big shadow
&.active, &.active,
&:active { &:active {
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
@include focus-shadow(); @include focus-shadow();
//border: 1px solid $green; //border: 1px solid $green;
} }
@ -98,7 +100,7 @@
min-width: $mdb-btn-fab-size; min-width: $mdb-btn-fab-size;
height: $mdb-btn-fab-size; height: $mdb-btn-fab-size;
//margin: auto; //margin: auto;
margin: 1px; // This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. //margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light; box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
.ripple-container { .ripple-container {
@ -110,6 +112,7 @@
width: $mdb-btn-fab-size-sm; width: $mdb-btn-fab-size-sm;
min-width: $mdb-btn-fab-size-sm; min-width: $mdb-btn-fab-size-sm;
height: $mdb-btn-fab-size-sm; height: $mdb-btn-fab-size-sm;
//margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
//.material-icons { //.material-icons {
// top: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2; // top: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2;