Added scrollbar styling
This commit is contained in:
parent
8bea9e8720
commit
5a37073a65
33
README.md
33
README.md
|
@ -23,5 +23,36 @@ Manage Study plans|/local/treestudyplan/edit-plan.php||en
|
|||
```
|
||||
|
||||
## Dev Notepad
|
||||
### Size matching and grid view
|
||||
Link to jsfiddle for size matching with different scroll area (frozen line headings): https://jsfiddle.net/pmkuipers/sfweghr1/4/
|
||||
Use proper grid styling for column resizing (see same fiddle)
|
||||
Use proper grid styling for column resizing (see same fiddle)
|
||||
|
||||
|
||||
### Scroll bar syling
|
||||
example style with cross-browser support
|
||||
```
|
||||
:root{
|
||||
--primary: #006DDD;
|
||||
|
||||
}
|
||||
div.scroll {
|
||||
height: 50em;
|
||||
overflow-y: scroll;
|
||||
scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
div.scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
div.scroll::-webkit-scrollbar-track {
|
||||
background: color-mix(in srgb, var(--primary) 20%, white);
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
div.scroll::-webkit-scrollbar-thumb {
|
||||
background:var(--primary);
|
||||
}
|
||||
|
||||
```
|
Loading…
Reference in New Issue
Block a user