75 lines
1.1 KiB
SCSS
75 lines
1.1 KiB
SCSS
.pocket {
|
|
@extend %box-radius;
|
|
|
|
display: flex;
|
|
width: 62.5%;
|
|
|
|
@include breakpoint($mq-col2-uniboard) {
|
|
width: 100%;
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset;
|
|
background: #888;
|
|
}
|
|
|
|
&-c1 {
|
|
flex: 0 0 20%;
|
|
max-width: 10vmin;
|
|
}
|
|
|
|
&-c2 {
|
|
@extend %square;
|
|
}
|
|
|
|
piece {
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
|
|
@include transition;
|
|
|
|
&::after {
|
|
@extend %active, %box-radius;
|
|
|
|
content: attr(data-nb);
|
|
bottom: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
line-height: 0.9em;
|
|
padding: 3px 0.3em;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
&[data-nb='0'] {
|
|
cursor: auto;
|
|
opacity: 0.1;
|
|
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&.premove {
|
|
background-color: #555;
|
|
}
|
|
}
|
|
|
|
&.usable {
|
|
piece {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
|
|
&:hover {
|
|
background-color: #aaa;
|
|
}
|
|
|
|
&:first-child:hover {
|
|
@extend %box-radius-left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blindfold &:not(.usable) {
|
|
opacity: 0;
|
|
}
|
|
}
|