Add Scrollbar styling

This commit is contained in:
Stamm 2020-03-12 11:45:54 +01:00
parent 5ff7d42355
commit 4de6315dda
6 changed files with 68 additions and 35 deletions

5
.editorconfig Normal file
View File

@ -0,0 +1,5 @@
[*]
indent_size = 4
indent_style = space
insert_final_newline = true
charset = utf-8

View File

@ -77,6 +77,11 @@
.content {
margin: 0 2rem;
}
.scroll-test {
height: 100px;
overflow-y: scroll;
}
</style>
</head>
@ -260,6 +265,12 @@
</tr>
</table>
</div>
<div class="margin prev">
<div class="scroll-test">
<script>prip(2000)</script>
</div>
</div>
</div>
</body>

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@hibas123/theme",
"version": "1.2.11",
"version": "1.2.15",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,24 +1,24 @@
{
"name": "@hibas123/theme",
"version": "1.2.15",
"description": "",
"main": " ",
"files": [
"out/*.css",
"src/*",
"index.html",
"ipsum.js",
"Roboto-Regular.woff2"
],
"scripts": {
"build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"prepublishOnly": "npm run build"
},
"author": "Fabian Stamm <dev@fabianstamm.de>",
"license": "ISC",
"devDependencies": {
"sass": "^1.22.7"
},
"dependencies": {}
"name": "@hibas123/theme",
"version": "1.2.16",
"description": "",
"main": " ",
"files": [
"out/*.css",
"src/*",
"index.html",
"ipsum.js",
"Roboto-Regular.woff2"
],
"scripts": {
"build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
"prepublishOnly": "npm run build"
},
"author": "Fabian Stamm <dev@fabianstamm.de>",
"license": "ISC",
"devDependencies": {
"sass": "^1.22.7"
},
"dependencies": {}
}

View File

@ -1,12 +1,12 @@
@import "./_vals.scss";
$background:false !default;
$on-background:false !default;
$button-color: #CCCCCC !default;
$background: false !default;
$on-background: false !default;
$button-color: #cccccc !default;
$on-button: #000000 !default;
@if $background==false or $on-background==false {
@error("background and on-background must be set!");
@error ("background and on-background must be set!");
}
:root {
@ -18,7 +18,6 @@ $on-button: #000000 !default;
background: $background;
}
@each $dp in $elevations {
.elv-#{$dp} {
@include Elevation($dp, false);
@ -33,13 +32,10 @@ $on-button: #000000 !default;
@include ElevationTransition();
}
@function darken-brighten-color($color, $val) {
@if (lightness($color) > 50) {
@return darken($color, $val); // Lighter backgorund, return dark color
}
@else {
} @else {
@return lighten($color, $val); // Darker background, return light color
}
}
@ -51,4 +47,5 @@ $on-button: #000000 !default;
@import "./theme/_list.scss";
@import "./theme/_header.scss";
@import "./theme/_card.scss";
@import "./theme/table.scss";
@import "./theme/_table.scss";
@import "./theme/_scroll.scss";

20
src/theme/_scroll.scss Normal file
View File

@ -0,0 +1,20 @@
::-webkit-scrollbar {
margin-left: 4px;
}
::-webkit-scrollbar-track {
background: red;
background: darken-brighten-color($background, 5%);
}
::-webkit-scrollbar-thumb {
background: darken-brighten-color($background, 20%);
}
::-webkit-scrollbar-thumb:hover {
background: darken-brighten-color($background, 25%);
}
::-webkit-scrollbar-thumb:active {
background: darken-brighten-color($background, 30%);
}