bemuse/src/app/ui/OptionsInputScratch.scss
@import '~bemuse/ui/common';
@import 'options-input-common';
.OptionsInputScratch {
$color: #faa;
width: 160px;
height: 160px;
background: rgba(#000, 0.1);
border-radius: 200px;
position: relative;
@include options-input-button($color);
> svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
&のstar {
fill: rgba($color, 0.2);
}
&のtext {
@include options-input-button--text;
text-align: center;
}
&のkeySeparator {
font-size: 0.8em;
margin: 0.25ex 0;
&::before,
&::after {
content: '—';
margin: 0 0.25em;
}
}
&.is-editing &のkey:not(.is-editing),
&.is-editing &のkeySeparator:not(.is-editing) {
opacity: 0.2;
}
}