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:
@@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user