0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 05:42:40 +00:00

"Updated ToolBar component: added zoom level limits, refactored zoom level handling, and modified CSS styles for input and slider elements."

This commit is contained in:
Víctor Losada Hernández
2024-08-16 15:58:00 +02:00
parent f0765b5aaa
commit 5ee4ada112
2 changed files with 80 additions and 36 deletions

View File

@@ -19,7 +19,7 @@
border-bottom : 1px solid #666666;
input {
position: relative;
position : relative;
height : 1.5em;
padding : 2px 5px;
font-family : 'Open Sans', sans-serif;
@@ -31,32 +31,60 @@
border-radius : 7px;
&.slider {
appearance: none;
width: 100%;
height: 5px;
background: #d3d3d3;
outline: none;
isolation: isolate;
width : 100%;
height : 7px;
appearance : none;
background : #D3D3D3;
isolation : isolate;
outline : none;
&::-webkit-slider-thumb {
appearance: none;
width: 7px;
height: 15px;
background-color: rgb(39, 174, 96);
cursor: pointer;
width : 8px;
height : 15px;
appearance : none;
cursor : pointer;
background-color : rgb(39, 174, 96);
translate : 0 -66%;
}
&::-moz-slider-thumb {
width : 8px;
height : 15px;
appearance : none;
cursor : pointer;
background-color : rgb(39, 174, 96);
}
&::before {
content: '';
position: absolute;
top: 50%;
left: 33.33%;
transform: translate(-50%, -50%);
width: 7px;
height: 15px;
background-color: #d3d3d3;
z-index: -1;
position : absolute;
top : 50%;
left : 33.33%;
z-index : -1;
width : 7px;
height : 15px;
content : '';
background-color : #D3D3D3;
transform : translate(-50%, -50%);
}
}
}
.tool {
&:hover .slider::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 : #D3D3D3;
border : 1px solid #A1A1A1;
border-radius : 5px;
transform : translate(-50%, 50%);
}
}