@mixin generate-button-colors($textColor, $backgroundColor) {
background-color: $backgroundColor;
color: $textColor;
+ fill: $textColor;
text-transform: uppercase;
border: 1px solid $backgroundColor;
vertical-align: top;
.button.outline {
background-color: transparent;
color: #888;
+ fill: #888;
border: 1px solid #DDD;
&:hover, &:focus, &:active {
box-shadow: none;
&.page {
border-color: $color-page;
color: $color-page;
+ fill: $color-page;
&:hover, &:focus, &:active {
background-color: $color-page;
color: #FFF;
+ fill: #FFF;
}
}
&.chapter {
border-color: $color-chapter;
color: $color-chapter;
+ fill: $color-chapter;
&:hover, &:focus, &:active {
background-color: $color-chapter;
color: #FFF;
+ fill: #FFF;
}
}
&.book {
border-color: $color-book;
color: $color-book;
+ fill: $color-book;
&:hover, &:focus, &:active {
background-color: $color-book;
color: #FFF;
+ fill: #FFF;
}
}
}
}
.button.icon {
- i {
- padding-right: 0;
+ .svg-icon {
+ margin-right: 0;
}
}
left: $-m;
top: $-s - 2px;
width: 24px;
+ height: 24px;
}
padding: $-s $-m;
padding-bottom: $-s - 2px;