app/assets/stylesheets/scoreboard/table-controls/_buttons.scss
.table-controls-button {
font-weight: 700;
border: 0;
color: $off-white;
-webkit-appearance: none;
display: inline-block;
border-radius: 4px;
box-shadow: 0 3px 5px -1px $dark-grey;
@include padding(0.125em 0.5em)
margin: 0 0.5em 0.5em 0;
line-height: 1.5;
@mixin table-controls-button($color) {
background-color: $color;
border: 4px solid transparent;
text-shadow: 0 0 3px shade($color, 50%);
&:focus {
outline: 0;
border: 4px solid tint($color, 50%);
}
&:hover,
&:active {
border: 4px solid $off-white;
}
}
&.red { @include table-controls-button($red) }
&.blue { @include table-controls-button($blue) }
&.green { @include table-controls-button($green) }
&.yellow { @include table-controls-button($yellow) }
&.grey {
@include table-controls-button(shade($light-grey, 10%));
color: $dark-grey;
text-shadow: none;
}
&.white {
color: $dark-grey;
background-color: $off-white;
border: 4px solid transparent;
&:focus {
outline: 0;
border: 4px solid shade($off-white, 25%);
}
&:hover,
&:active {
border: 4px solid tint($dark-grey, 50%);
}
}
&.white {
color: $dark-grey;
background-color: $off-white;
border: 4px solid transparent;
&:focus {
outline: 0;
border: 4px solid shade($off-white, 25%);
}
&:hover,
&:active {
border: 4px solid tint($dark-grey, 50%);
}
}
&.small {
font-size: 55%;
&,
&:focus,
&:hover,
&:active {
border-width: 2px;
}
}
}