53 lines
912 B
SCSS
53 lines
912 B
SCSS
$popover-padding: 7px * 1.6;
|
|
$padding: 7px;
|
|
$spacing: 12px;
|
|
$radius: 11px;
|
|
|
|
.widget-button {
|
|
background: $crust;
|
|
opacity: 1;
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
margin: 10px;
|
|
padding: 15px 20px;
|
|
border-radius: 10px;
|
|
border: 3px solid;
|
|
border-color: $crust;
|
|
transition: border-color .3s ease-in-out;
|
|
transition: opacity .3s ease-in-out;
|
|
|
|
&:hover {
|
|
border: 3px solid;
|
|
border-color: $lavender;
|
|
transition: border-color .3s ease-in-out;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
border: 3px solid;
|
|
border-color: $lavender;
|
|
}
|
|
|
|
image {
|
|
border-radius: $radius + ($popover-padding * 1.4);
|
|
min-width: 1.2em;
|
|
min-height: 1.2em;
|
|
font-size: 4em;
|
|
}
|
|
|
|
label {
|
|
margin-top: $spacing;
|
|
}
|
|
|
|
&:active {
|
|
image {
|
|
opacity: .3;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
label {
|
|
opacity: .3;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
}
|
|
}
|