diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..caac0c7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +[*] +indent_size = 4 +indent_style = space +insert_final_newline = true +charset = utf-8 \ No newline at end of file diff --git a/index.html b/index.html index 2cc5ce5..ab8d931 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,11 @@ .content { margin: 0 2rem; } + + .scroll-test { + height: 100px; + overflow-y: scroll; + } @@ -260,7 +265,13 @@ + + - \ No newline at end of file + diff --git a/package-lock.json b/package-lock.json index 482a371..d40c52b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@hibas123/theme", - "version": "1.2.11", + "version": "1.2.15", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 81208fd..0db37a5 100644 --- a/package.json +++ b/package.json @@ -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 ", - "license": "ISC", - "devDependencies": { - "sass": "^1.22.7" - }, - "dependencies": {} -} \ No newline at end of file + "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 ", + "license": "ISC", + "devDependencies": { + "sass": "^1.22.7" + }, + "dependencies": {} +} diff --git a/src/_maketheme.scss b/src/_maketheme.scss index 804f20f..9cfde22 100644 --- a/src/_maketheme.scss +++ b/src/_maketheme.scss @@ -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"; \ No newline at end of file +@import "./theme/_table.scss"; +@import "./theme/_scroll.scss"; diff --git a/src/theme/_scroll.scss b/src/theme/_scroll.scss new file mode 100644 index 0000000..be0759a --- /dev/null +++ b/src/theme/_scroll.scss @@ -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%); +}