clean up css, remove duplications

This commit is contained in:
KDSBrowne 2017-09-29 07:54:24 -07:00
parent 9cd6b31743
commit 6bb93ff6fd
2 changed files with 21 additions and 30 deletions

View File

@ -37,7 +37,7 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
* ==========
*/
.button {
@extend .rectangleBtnFocus;
@extend .btnFocus;
font-weight: $btn-font-weight;
line-height: 1.5;
@ -63,10 +63,28 @@ $btn-jumbo-padding: $jumbo-padding-y $jumbo-padding-x;
box-shadow: none;
pointer-events: none;
}
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: $focus-border-size;
}
}
}
}
.buttonWrapper {
@extend .circleBtnFocus;
@extend .btnFocus;
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: 50%;
}
}
}
line-height: 1.5;
text-align: center;

View File

@ -66,33 +66,7 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
}
}
.rectangleBtnFocus {
border: none;
position: relative;
overflow: visible;
display: inline-block;
&,
&:active {
&:focus {
outline: none !important;
}
}
&:focus::before {
position: absolute;
content: '';
top: calc(.1em - .25em - .25em);
left: calc(.1em - .25em - .25em);
right: calc(.1em - .25em - .25em);
bottom: calc(.1em - .25em - .25em);
border-radius: $focus-border-size;
border: $focus-border-size solid $color-primary;
}
}
.circleBtnFocus {
.btnFocus {
border: none;
position: relative;
overflow: visible;
@ -110,7 +84,6 @@ $list-item-bg-hover: darken($user-list-bg, 7%);
left: calc(2px - 3px - 3px);
right: calc(2px - 3px - 3px);
bottom: calc(2px - 3px - 3px);
border-radius: 50%;
border: $focus-border-size solid $color-primary;
}
}