mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-25 20:33:51 +00:00
49e072f03f
Toggles a state variable to either visible or hidden which is used to set a related class on the toolbar. The hiding is done with CSS, just reducing the width of the toolbar and the opacity of the tools.
128 lines
2.9 KiB
Plaintext
128 lines
2.9 KiB
Plaintext
@import (less) './client/icons/customIcons.less';
|
|
|
|
.toolBar {
|
|
position : absolute;
|
|
z-index : 1;
|
|
box-sizing : border-box;
|
|
display : flex;
|
|
flex-wrap : wrap;
|
|
gap : 8px 30px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
width : 100%;
|
|
height : auto;
|
|
padding : 2px 0;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : #CCCCCC;
|
|
background-color : #555555;
|
|
& > *:not(.toggleButton) {
|
|
opacity: 1;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.group {
|
|
box-sizing : border-box;
|
|
display : flex;
|
|
gap : 0 3px;
|
|
align-items : center;
|
|
justify-content : center;
|
|
height : 28px;
|
|
}
|
|
|
|
.tool {
|
|
display : flex;
|
|
align-items : center;
|
|
}
|
|
|
|
input {
|
|
position : relative;
|
|
height : 1.5em;
|
|
padding : 2px 5px;
|
|
font-family : 'Open Sans', sans-serif;
|
|
color : #000000;
|
|
background : #EEEEEE;
|
|
border : 1px solid gray;
|
|
&:focus { outline : 1px solid #D3D3D3; }
|
|
|
|
// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
|
|
&.range-input {
|
|
padding : 2px 0;
|
|
color : #D3D3D3;
|
|
accent-color : #D3D3D3;
|
|
|
|
&::-webkit-slider-thumb, &::-moz-slider-thumb {
|
|
width : 5px;
|
|
height : 5px;
|
|
cursor : pointer;
|
|
outline : none;
|
|
}
|
|
|
|
&:hover::after {
|
|
position : absolute;
|
|
bottom : -30px;
|
|
left : 50%;
|
|
z-index : 1;
|
|
display : grid;
|
|
place-items : center;
|
|
width : 4ch;
|
|
height : 1.2lh;
|
|
pointer-events : none;
|
|
content : attr(value);
|
|
background-color : #555555;
|
|
border : 1px solid #A1A1A1;
|
|
transform : translate(-50%, 50%);
|
|
}
|
|
}
|
|
|
|
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
|
|
&#page-input {
|
|
width : 4ch;
|
|
margin-right : 1ch;
|
|
text-align : center;
|
|
}
|
|
}
|
|
|
|
button {
|
|
box-sizing : content-box;
|
|
display : flex;
|
|
align-items : center;
|
|
justify-content : center;
|
|
width : auto;
|
|
min-width : 46px;
|
|
height : 100%;
|
|
padding : 0 0px;
|
|
font-weight : unset;
|
|
color : inherit;
|
|
background-color : unset;
|
|
&:hover { background-color : #444444; }
|
|
&:focus { outline : 1px solid #D3D3D3; }
|
|
&:disabled {
|
|
color : #777777;
|
|
background-color : unset !important;
|
|
}
|
|
i {
|
|
font-size:1.2em;
|
|
}
|
|
}
|
|
|
|
&.hidden {
|
|
width: 32px;
|
|
transition: all .3s ease;
|
|
flex-wrap:nowrap;
|
|
overflow: hidden;
|
|
background-color: unset;
|
|
opacity: .5;
|
|
& > *:not(.toggleButton) {
|
|
opacity: 0;
|
|
transition: all .2s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.toggleButton {
|
|
z-index : 5;
|
|
position:absolute;
|
|
left: 0;
|
|
width: 32px;
|
|
min-width: unset;
|
|
} |