Files
pixel.horse/src/ts/components/shared/sprite-selection/sprite-selection.scss
T
2019-08-28 21:15:02 -07:00

57 lines
874 B
SCSS

@import '../../../../styles/partials/variables';
:host {
display: block;
overflow: hidden;
background: $dark-bg;
border: solid 1px $border-color;
border-radius: $border-radius-base;
&:focus {
outline: none;
box-shadow: 0 0 0 $btn-focus-width rgba($focus-color, .5);
}
}
.selection-list {
display: flex;
flex-wrap: wrap;
margin-bottom: -1px;
margin-right: -5px;
}
.selection-item {
width: 52px;
height: 52px;
border-right: solid 1px $border-color;
border-bottom: solid 1px $border-color;
margin: 0;
overflow: hidden;
> sprite-box {
width: 52px;
height: 52px;
}
&:hover {
background: lighten($input-bg, 10%);
text-decoration: none;
}
&.active {
background: #ccc;
}
&.disabled {
opacity: 0.4;
pointer-events: none;
}
}
.selection-item-more {
color: $text-muted;
font-weight: bold;
font-size: 27px;
text-align: center;
}