Miqra-Engineering/moodle_local_treestudyplan
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 4 Packages Wiki Activity

Added scrollbar styling

Browse source
This commit is contained in:
PMKuipers 2023-07-07 17:22:48 +02:00
parent 8bea9e8720
commit 5a37073a65
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
README.md
View file

@ -23,5 +23,36 @@ Manage Study plans|/local/treestudyplan/edit-plan.php||en
``` ```
## Dev Notepad ## 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/ 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);
}
```