f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-13 21:42:45 +00:00
Code Wiki Activity

restructure html, eliminate .tool divs

Browse Source 
Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons.  One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).

And then a bunch of CSS adjustments to match the new structure.
This commit is contained in:
Gazook89
2024-08-20 21:08:07 -05:00
parent cdc2ffeff4
commit 051eed0e83
2 changed files with 90 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -16,12 +16,18 @@
.group {
display : flex;
gap: 0 3px;
align-items : center;
justify-content : center;
box-sizing : border-box;
height: 28px;
}
.tool {
display: flex;
align-items: center;
}
input {
position : relative;
height : 1.5em;
@@ -32,7 +38,8 @@
border : 1px solid gray;
&:focus { outline : 1px solid #d3d3d3; }
&.slider {
// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
&.range-input {
color: #D3D3D3;
accent-color: #d3d3d3;
padding: 2px 0;
@@ -61,40 +68,37 @@
}
}
&#pageInput {
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
&#page-input {
width: 4ch;
text-align: center;
margin-right: 1ch;
}
}
.tool {
button {
display : flex;
align-items : center;
padding : 0;
height: 100%;
width: auto;
justify-content: center;
height : 100%;
width : auto;
min-width : 46px;
padding : 0 0px;
font-weight : unset;
color : inherit;
background-color : unset;
box-sizing: content-box;
&:hover { background-color : #444444; }
button {
height : 100%;
width : auto;
min-width : 46px;
padding : 0 0px;
font-weight : unset;
color : inherit;
background-color : unset;
&:focus { outline : 1px solid #d3d3d3; }
&:focus { outline : 1px solid #d3d3d3; }
&:disabled {
color : #777777;
background-color : unset !important;
}
&:disabled {
color : #777777;
background-color : unset !important;
}
}
}