@charset "utf-8"; | |
@import "../util"; | |
/* | |
* Define the base layout of horizontal button groups | |
*/ | |
.button-group { | |
font-size: 0; | |
> span { | |
cursor: pointer; | |
} | |
&.button-panel, | |
&.operators { | |
> span, | |
input[type=submit], | |
a { | |
@include choose-item; | |
box-shadow: $choose-box-shadow; | |
font-size: 9pt; | |
font-weight: normal; | |
line-height: 1.5em; | |
padding: 0 4px; | |
display: inline-block; | |
border-style: solid; | |
border-width: $border-size 0; | |
&:not(.inactive):hover { | |
@include choose-hover; | |
transition: none; | |
} | |
&:first-child { | |
border: { | |
left-width: $border-size; | |
top-left-radius: $standard-border-radius; | |
bottom-left-radius: $standard-border-radius; | |
} | |
} | |
&:last-child { | |
border: { | |
right-width: $border-size; | |
top-right-radius: $standard-border-radius; | |
bottom-right-radius: $standard-border-radius; | |
} | |
} | |
} | |
} | |
&.button-panel { | |
> span, | |
input[type=submit], | |
a { | |
margin-top: 0; | |
width: auto; | |
min-width: auto; | |
> span.check { | |
@include icon-font; | |
width: 1em; | |
display: inline-block; | |
text-align: left; | |
&:not(.checked)::after { | |
content: $fa-check; | |
} | |
&.checked::after { | |
content: $fa-checked; | |
} | |
> span { | |
@include blind; | |
} | |
} | |
} | |
} | |
&.button-view { | |
position: absolute; | |
display: block; | |
right: 0; | |
top: 0; | |
z-index: 20; | |
margin: 0; | |
padding: 0; | |
width: $right-view-distance; | |
font-size: 10pt; | |
color: $nearly-white; | |
> span:first-child { | |
margin-top: $border-size | |
} | |
> span { | |
display: block !important; | |
border-width: 0; | |
text-decoration: none; | |
text-align: center; | |
font-style: normal; | |
&.download::after { | |
content: $fa-download; | |
} | |
&.close::after { | |
content: $fa-close; | |
} | |
&.minimize::after { | |
content: $fa-minimize; | |
} | |
&.plugin::after { | |
content: $fa-plugin; | |
} | |
} | |
} | |
} | |
ul.menu.button-group-list { | |
border-top-right-radius: 8px; | |
position: fixed; | |
font-size: 10pt; | |
left: 0; | |
text-align: left; | |
margin: -1 * $border-size; | |
margin-top: 0; | |
> li:first-of-type { | |
border-top-right-radius: 5px; | |
} | |
} | |
.button-icon { | |
@include icon-font; | |
line-height: 1.3; | |
> span { | |
@include blind; | |
} | |
&[data-icon]::after { | |
content: attr(data-icon); | |
} | |
} | |
.button-panel .button-icon { | |
line-height: .7; | |
} |