META-INF.resources.css._buttons.scss Maven / Gradle / Ivy
/* ---------- Buttons ---------- */
.btn-command-log, .btn-error, .btn-jump-to-details, .btn-screenshot, .btn-sidebar {
font-family: 'FontAwesome' !important;
}
.sidebar-btn-container, .sidebar-toolbar, .syntax-log {
.btn {
background-color: transparentize($off-white, 0.84);
border: 1px solid $button-border-color;
border-radius: 4px;
color: $neutral;
cursor: pointer;
font-size: 10px;
height: 32px;
left: 0;
line-height: 1em;
margin-right: 5px;
opacity: 0.6;
outline: none;
padding: 0;
text-align: center;
transition: opacity 0.2s ease;
width: 32px;
&:active:focus, &:focus, &:hover {
box-shadow: none;
outline: 0;
}
.btn-content {
transition: transform 0.2s ease;
}
&:hover {
opacity: 1;
}
&.toggle {
background-color: $button-toggle-bg-color;
}
&.btn-sidebar {
&:before {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out;
}
&.toggle:before {
transform: rotate(0);
}
}
}
.btn-label {
display: inline-block;
font-family: $general-font;
font-size: 15px;
font-weight: 100;
line-height: 0.6em;
text-align: center;
text-transform: lowercase;
}
}
.syntax-log {
.btn-error, .btn-screenshot {
bottom: 0;
display: inline-block;
font-family: $monospaced-font;
font-size: 17px;
}
.fail {
.btn-error, .btn-screenshot {
background-color: transparentize($failed-color, 0.84);
border-color: $failed-color;
color: $failed-color;
&.toggle {
background: $button-error-toggle-bg-color;
}
}
}
.warning {
.btn-error, .btn-screenshot {
background-color: transparentize($warning-color, 0.84);
border-color: $warning-color;
color: $warning-color;
&.toggle {
background: $button-warning-toggle-bg-color;
}
}
}
}
/* ---------- Sidebar buttons ---------- */
.sidebar-btn-container {
left: -60px;
margin-top: 10px;
position: absolute;
width: 28px;
.btn {
font-size: 20px;
line-height: 1em;
margin: 5px 15px;
}
.btn-command-log {
&:before {
content: '\f126';
}
}
.btn-sidebar:before {
content: '\f104';
display: block;
}
.btn-jump-to-details {
display: none;
&:before {
content: '\f071';
}
}
}
.running .btn-command-log {
display: none;
}
.command-logger .btn.btn-jump-to-details {
display: block;
}
.sidebar-toolbar {
.btn {
font-size: 11px;
height: 45px;
line-height: 1em;
margin: 17px 15px;
width: 150px;
}
.btn-pause {
position: relative;
.btn-label {
position: absolute;
top: 16px;
&.pause {
animation: fadeIn 0.15s ease-in both;
left: 23px;
opacity: 1;
&:after {
content: '\f04c';
margin-left: 14px;
}
}
&.continue {
animation: fadeOut 0.15s ease-out both;
left: 14px;
opacity: 0;
}
&:after {
font-family: 'FontAwesome';
}
}
&.toggle {
background-color: transparentize($off-white, 0.84);
.btn-label {
&.pause {
animation: fadeOut 0.15s ease-out both;
opacity: 0;
transition: height 0s 0.15s;
}
&.continue {
animation: fadeIn 0.15s ease-in both;
opacity: 1;
&:after {
content: '\f04b';
margin-left: 14px;
}
}
}
}
}
}
/* ---------- Button icons ---------- */
.btn-collapse {
&:before {
content: '+';
}
&.toggle:before {
content: '-';
}
}
.btn-var:before {
content: 'var';
font-family: $monospaced-font;
}
.btn-error .btn-content:before {
content: '!';
}
.btn-screenshot .btn-content:before {
content: '\f108';
}
.btn-screenshot {
display: none !important;
}