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

eslint and stylelint

Browse Source 
stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars.  As far as i can tell, the selector is not standards-track, so that is probably why.  Not sure if we want to adjsut our stylelint config to allow it?
This commit is contained in:
Gazook89
2024-08-23 19:16:59 -05:00
parent 977d0ea73a
commit f3ed174b0e
2 changed files with 40 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -1,9 +1,9 @@
@import (multiple, less) 'shared/naturalcrit/styles/reset.less'; @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
.brewRenderer { .brewRenderer {
will-change : transform;
overflow-y : scroll;
padding-top : 30px; padding-top : 30px;
overflow-y : scroll;
will-change : transform;
:where(.pages) { :where(.pages) {
margin : 30px 0px; margin : 30px 0px;
@@ -19,23 +19,19 @@
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 20px; width : 20px;
&:horizontal{ &:horizontal {
height: 20px; width : auto;
width:auto; height : 20px;
} }
&-thumb { &-thumb {
background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px); background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
&:horizontal{ &:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
}
} }
&-corner { &-corner { visibility : hidden; }
visibility: hidden;
}
} }
} }
@@ -70,18 +66,14 @@
} }
@media print { @media print {
.toolBar { .toolBar { display : none; }
display: none;
}
.brewRenderer { .brewRenderer {
height: 100%; height : 100%;
overflow-y: unset; padding-top : unset;
padding-top: unset; overflow-y : unset;
.pages { .pages {
margin: 0px; margin : 0px;
&>.page { & > .page { box-shadow : unset; }
box-shadow: unset;
}
} }
} }
} }

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

@@ -1,12 +1,12 @@
.toolBar { .toolBar {
position : absolute; position : absolute;
z-index : 1; z-index : 1;
box-sizing : border-box;
display : flex; display : flex;
flex-wrap : wrap; flex-wrap : wrap;
gap : 8px 30px; gap : 8px 30px;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
box-sizing : border-box;
width : 100%; width : 100%;
height : auto; height : auto;
padding : 2px 0; padding : 2px 0;
@@ -15,17 +15,17 @@
background-color : #555555; background-color : #555555;
.group { .group {
box-sizing : border-box;
display : flex; display : flex;
gap: 0 3px; gap : 0 3px;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
box-sizing : border-box; height : 28px;
height: 28px;
} }
.tool { .tool {
display: flex; display : flex;
align-items: center; align-items : center;
} }
input { input {
@@ -35,20 +35,20 @@
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
color : #000000; color : #000000;
background : #EEEEEE; background : #EEEEEE;
border : 1px solid gray; border : 1px solid gray;
&:focus { outline : 1px solid #d3d3d3; } &:focus { outline : 1px solid #D3D3D3; }
// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider // `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
&.range-input { &.range-input {
color: #D3D3D3; padding : 2px 0;
accent-color: #d3d3d3; color : #D3D3D3;
padding: 2px 0; accent-color : #D3D3D3;
&::-webkit-slider-thumb, &::-moz-slider-thumb { &::-webkit-slider-thumb, &::-moz-slider-thumb {
cursor : pointer; width : 5px;
width: 5px; height : 5px;
height: 5px; cursor : pointer;
outline: none; outline : none;
} }
&:hover::after { &:hover::after {
@@ -70,9 +70,9 @@
// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input // `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
&#page-input { &#page-input {
width: 4ch; width : 4ch;
text-align: center; margin-right : 1ch;
margin-right: 1ch; text-align : center;
} }
@@ -80,21 +80,21 @@
button { button {
display : flex; box-sizing : content-box;
align-items : center; display : flex;
justify-content: center; align-items : center;
height : 100%; justify-content : center;
width : auto; width : auto;
min-width : 46px; min-width : 46px;
height : 100%;
padding : 0 0px; padding : 0 0px;
font-weight : unset; font-weight : unset;
color : inherit; color : inherit;
background-color : unset; background-color : unset;
box-sizing: content-box;
&:hover { background-color : #444444; } &:hover { background-color : #444444; }
&:focus { outline : 1px solid #d3d3d3; } &:focus { outline : 1px solid #D3D3D3; }
&:disabled { &:disabled {
color : #777777; color : #777777;