cleanup btn styles

This commit is contained in:
Sean Yesmunt 2019-01-08 21:21:36 -05:00
parent d2fcd8cf1a
commit fcf8375496
2 changed files with 29 additions and 83 deletions

View file

@ -1,9 +1,21 @@
.btn {
fill: currentColor;
position: relative;
& svg {
stroke-width: 1;
svg {
stroke-width: 2;
width: 1.1rem;
height: 1.1rem;
position: relative;
top: 0.1rem;
}
.btn__label {
margin: 0;
}
svg + .btn__label {
margin-left: var(--spacing-vertical-small);
}
}
@ -75,6 +87,15 @@
.btn__label {
display: none;
}
svg {
width: 3rem;
height: 3rem;
margin-right: 0;
position: relative;
top: 0.1rem;
}
}
.btn--inverse {
@ -95,42 +116,18 @@
&:hover {
background-color: $lbry-gray-1;
color: $lbry-black;
html[data-theme='dark'] & {
background-color: rgba($lbry-white, 0.1);
}
}
// TODO: Refactor to remove need for `!important`
.btn__label {
margin: 0 !important;
.btn__content {
svg {
color: $lbry-gray-4;
}
}
svg {
width: 1rem !important;
height: 1rem !important;
margin-right: var(--spacing-vertical-small);
position: relative;
top: 0.1rem;
}
// .btn__content {
// display: flex;
// svg {
// width: 1rem;
// height: 1rem;
// color: $lbry-gray-4;
// margin-right: var(--spacing-vertical-small);
// }
// .btn__label {
// line-height: 1rem;
// }
// }
}
.btn--load-screen {
@ -161,21 +158,6 @@
background-color: $lbry-teal-4;
}
}
// TODO: Refactor to remove need for `!important`
.btn__label {
margin: 0 !important;
}
svg {
width: 1rem !important;
height: 1rem !important;
margin-right: var(--spacing-vertical-small);
position: relative;
top: 0.1rem;
}
}
.btn--uppercase {

View file

@ -5,13 +5,6 @@
display: flex;
font-size: 1.5rem;
.media__actions .btn__content {
svg {
width: 1.5rem;
height: 100%;
}
}
.media__info {
margin-left: var(--spacing-vertical-large);
width: calc(100% - 20rem);
@ -97,14 +90,6 @@
margin-bottom: var(--spacing-vertical-large);
}
.media__actions .btn__content {
display: inline-flex;
.btn__label {
margin-left: var(--spacing-vertical-small);
}
}
.media__info {
margin-left: var(--spacing-vertical-medium);
width: calc(100% - 20rem);
@ -200,27 +185,6 @@
&:not(:last-child) {
margin-right: var(--spacing-vertical-large);
}
.btn__content {
display: inline-flex;
}
.btn__label {
margin-left: var(--spacing-vertical-small);
}
svg {
width: 1.5rem;
height: 1.5rem;
}
}
.btn--alt {
padding-top: 2px;
.btn__label {
padding-top: 1px;
}
}
}