OpenServer/Theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: OpenServer:2.0.7
Branches Tags
OpenServer:master OpenServer:v2
OpenServer:2.0.7
..
compare: OpenServer:v2
Branches Tags
OpenServer:master OpenServer:v2
OpenServer:2.0.7

5 Commits
2.0.7 ... v2

Author SHA1 Message Date
Fabian
722271c13e making background colors nicer 2020-11-03 17:32:10 +01:00
Fabian
185510f4e7 Fix text color on _maketheme 2020-10-06 00:29:24 +02:00
Fabian
5e5166df2d Fix css variable bug on themes 2020-04-27 19:02:32 +02:00
Fabian Stamm
20141f57f6 Adding raw rgb values to color variables 2020-03-27 11:53:27 +01:00
Fabian Stamm
67478113cb Switching to different style of theme selection 2020-03-27 11:04:50 +01:00
22 changed files with 514 additions and 1608 deletions
Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,5 +1,2 @@
out/ out/
node_modules/ node_modules/
.yarn/cache
.yarn/install-state.gz

55
.yarn/releases/yarn-2.4.3.cjs vendored
View File

File diff suppressed because one or more lines are too long

3
.yarnrc.yml
View File

@ -1,3 +0,0 @@
yarnPath: .yarn/releases/yarn-2.4.3.cjs
nodeLinker: node-modules
npmRegistryServer: https://npm.hibas123.de

173
index.html
View File

@ -1,56 +1,18 @@
<html> <html>
<head>
<head> <link rel="stylesheet" href="./out/base.css" />
<link rel="stylesheet" href="./out/base.css"> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<script src="./ipsum.js"></script> <script src="./ipsum.js"></script>
<script> <script>
const l = new LoremIpsum(); const l = new LoremIpsum();
window.prip = (i = 12) => window.document.write(l.paragraph(i)); window.prip = (i = 12) => window.document.write(l.paragraph(i));
window.lo = (i = 32) => l.paragraph(i); window.lo = (i = 32) => l.paragraph(i);
const createStyle = (link) => {
let e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.media = "screen,print";
e.href = link;
return e;
}
const light = "./out/light.css";
const dark = "./out/dark.css"
let active;
function applyStyleSheet(d = false) {
let n = createStyle(d ? dark : light);
if (n === active)
return;
if (active)
active.remove();
document.head.appendChild(n);
active = n;
}
applyStyleSheet(false);
let isLight = true;
function switchStyle() {
applyStyleSheet(isLight);
isLight = !isLight;
}
window.$ = document.querySelector.bind(document); window.$ = document.querySelector.bind(document);
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener((ev) => {
applyStyleSheet(ev.matches)
})
</script> </script>
<style> <style>
/* :root { /* :root {
--primary: blue; --primary: blue;
@ -83,10 +45,15 @@
overflow-y: scroll; overflow-y: scroll;
} }
</style> </style>
</head> </head>
<body> <body class="light-theme">
<button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button> <button
style="position: fixed; top: 10px; left: 10px; z-index: 100"
onclick="switchStyle()"
>
Switch
</button>
<div class="content"> <div class="content">
<div class="margin prev"> <div class="margin prev">
<div class="parent"> <div class="parent">
@ -100,15 +67,18 @@
<div class="child elv-12"></div> <div class="child elv-12"></div>
<div class="child elv-16"></div> <div class="child elv-16"></div>
<div class="child elv-24"></div> <div class="child elv-24"></div>
<div id="elv-transition" class="child elv-transition elv-1"></div> <div
id="elv-transition"
class="child elv-transition elv-1"
></div>
<script> <script>
const elm = document.getElementById("elv-transition"); const elm = document.getElementById("elv-transition");
setInterval(() => { setInterval(() => {
if (elm.classList.contains("elv-1")) { if (elm.classList.contains("elv-1")) {
elm.classList.remove("elv-1") elm.classList.remove("elv-1");
elm.classList.add("elv-24"); elm.classList.add("elv-24");
} else { } else {
elm.classList.remove("elv-24") elm.classList.remove("elv-24");
elm.classList.add("elv-1"); elm.classList.add("elv-1");
} }
}, 600); }, 600);
@ -116,6 +86,10 @@
</div> </div>
</div> </div>
<div class="margin prev">
<div class="card">Card</div>
</div>
<div class="margin prev"> <div class="margin prev">
<button class="btn">Hallo Welt</button> <button class="btn">Hallo Welt</button>
<button class="btn btn-primary">Hallo Welt</button> <button class="btn btn-primary">Hallo Welt</button>
@ -128,23 +102,36 @@
</div> </div>
<div class="margin prev"> <div class="margin prev">
<button class="btn" onclick="$('#modal1').classList.toggle('modal-hidden')">Open Modal</button> <button
class="btn"
onclick="$('#modal1').classList.toggle('modal-hidden')"
>
Open Modal
</button>
<div id="modal1" class="modal modal-hidden"> <div id="modal1" class="modal modal-hidden">
<div class="modal-title">Title</div> <div class="modal-title">Title</div>
<div id="modal1_content" class="modal-content"> <div id="modal1_content" class="modal-content">
<script> <script>
prip(80) prip(80);
</script> </script>
</div> </div>
<div class="modal-action"> <div class="modal-action">
<button onclick="$('#modal1_content').innerHTML += lo(32)">Save</button> <button
<button id="modal1_close" onclick="$('#modal1').classList.toggle('modal-hidden')">Close</button> onclick="$('#modal1_content').innerHTML += lo(32)"
>
Save
</button>
<button
id="modal1_close"
onclick="$('#modal1').classList.toggle('modal-hidden')"
>
Close
</button>
</div> </div>
</div> </div>
</div> </div>
<div class="margin prev"> <div class="margin prev">
<form> <form>
<div class="input-group"> <div class="input-group">
@ -158,24 +145,35 @@
</div> </div>
<input class="inp" type="text" placeholder="Name" /> <input class="inp" type="text" placeholder="Name" />
<input class="inp" type="text" placeholder="Name2" value="Test01" /> <input
<input class="inp" type="text" placeholder="Name" disabled /> class="inp"
type="text"
placeholder="Name2"
value="Test01"
/>
<input
class="inp"
type="text"
placeholder="Name"
disabled
/>
<div class="input-group"> <div class="input-group"></div>
</div> <label class="input-checkbox"
>Checkbox
<label class="input-checkbox">Checkbox
<input type="checkbox" /> <input type="checkbox" />
<span></span> <span></span>
</label> </label>
<label class="input-checkbox">Radio 1 <label class="input-checkbox"
>Radio 1
<input type="radio" name="rad" checked /> <input type="radio" name="rad" checked />
<span></span> <span></span>
</label> </label>
<label class="input-checkbox">Radio 2 <label class="input-checkbox"
>Radio 2
<input type="radio" name="rad" /> <input type="radio" name="rad" />
<span></span> <span></span>
</label> </label>
@ -190,7 +188,9 @@
</div> </div>
<div class="margin prev"> <div class="margin prev">
<button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button> <button onclick="$('#ul1').classList.toggle('list-divider')">
Toggle Divider
</button>
<ul id="ul1" class="list"> <ul id="ul1" class="list">
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>
@ -211,15 +211,26 @@
</div> </div>
<div class="margin prev"> <div class="margin prev">
<div class="header" style="justify-content: space-between;"> <div class="header" style="justify-content: space-between">
<span>I1</span> <span>I1</span>
<span>I2</span> <span>I2</span>
<div class="header-icon-button"> <div class="header-icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <svg
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"
class="feather feather-trash-2"> width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-trash-2"
>
<polyline points="3 6 5 6 21 6"></polyline> <polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path> <path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
></path>
<line x1="10" y1="11" x2="10" y2="17"></line> <line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line> <line x1="14" y1="11" x2="14" y2="17"></line>
</svg> </svg>
@ -268,10 +279,30 @@
<div class="margin prev"> <div class="margin prev">
<div class="scroll-test"> <div class="scroll-test">
<script>prip(2000)</script> <script>
prip(2000);
</script>
</div> </div>
</div> </div>
</div> </div>
</body> <script>
function applyStyleSheet(d = false) {
if (d) document.body.className = "dark-theme";
else document.body.className = "light-theme";
}
applyStyleSheet(false);
let isLight = true;
function switchStyle() {
applyStyleSheet(isLight);
isLight = !isLight;
}
let match = window.matchMedia("prefers-color-scheme: dark");
match.addListener((ev) => {
applyStyleSheet(ev.matches);
});
</script>
</body>
</html> </html>

143
package-lock.json generated Normal file
View File

@ -0,0 +1,143 @@
{
"name": "@hibas123/theme",
"version": "1.2.15",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"anymatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.0.3.tgz",
"integrity": "sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
},
"binary-extensions": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
"dev": true
},
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"chokidar": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz",
"integrity": "sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==",
"dev": true,
"requires": {
"anymatch": "^3.0.1",
"braces": "^3.0.2",
"fsevents": "^2.0.6",
"glob-parent": "^5.0.0",
"is-binary-path": "^2.1.0",
"is-glob": "^4.0.1",
"normalize-path": "^3.0.0",
"readdirp": "^3.1.1"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"fsevents": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.0.7.tgz",
"integrity": "sha512-a7YT0SV3RB+DjYcppwVDLtn13UQnmg0SWZS7ezZD0UjnLwXmy8Zm21GMVGLaFGimIqcvyMQaOJBrop8MyOp1kQ==",
"dev": true,
"optional": true
},
"glob-parent": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
"integrity": "sha512-Z2RwiujPRGluePM6j699ktJYxmPpJKCfpGA13jz2hmFZC7gKetzrWvg5KN3+OsIFmydGyZ1AVwERCq1w/ZZwRg==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"requires": {
"binary-extensions": "^2.0.0"
}
},
"is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
"dev": true
},
"is-glob": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
"dev": true,
"requires": {
"is-extglob": "^2.1.1"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
},
"picomatch": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
"integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
"dev": true
},
"readdirp": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.1.1.tgz",
"integrity": "sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==",
"dev": true,
"requires": {
"picomatch": "^2.0.4"
}
},
"sass": {
"version": "1.22.7",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.22.7.tgz",
"integrity": "sha512-ahREi0AdG7RTovSv14+yd1prQSfIvFcrDpOsth5EQf1+RM7SvOxsSttzNQaFmK1aa/k/3vyYwlYF5l0Xl+6c+g==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
}
}
}

12
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@hibas123/theme", "name": "@hibas123/theme",
"version": "2.0.7", "version": "2.0.6",
"description": "", "description": "",
"main": " ", "main": " ",
"files": [ "files": [
@ -13,10 +13,10 @@
"scripts": { "scripts": {
"build-grid": "sass src/grid.scss:out/grid.css", "build-grid": "sass src/grid.scss:out/grid.css",
"watch-grid": "sass --watch src/grid.scss:out/grid.css", "watch-grid": "sass --watch src/grid.scss:out/grid.css",
"build-clean": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css ", "build-clean": "sass src/build.scss:out/base.css",
"watch-clean": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css", "watch-clean": "sass --watch src/build.scss:out/base.css",
"build-prefix": "sass src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css", "build-prefix": "sass src/build-pref.scss:out/prefix.css",
"watch-prefix": "sass --watch src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css", "watch-prefix": "sass --watch src/build-pref.scss:out/prefix.css",
"build": "npm run build-clean && npm run build-prefix && npm run build-grid", "build": "npm run build-clean && npm run build-prefix && npm run build-grid",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"
}, },
@ -25,5 +25,5 @@
"devDependencies": { "devDependencies": {
"sass": "^1.22.7" "sass": "^1.22.7"
}, },
"packageManager": "yarn@2.4.3" "dependencies": {}
} }

37
src/_maketheme.scss
View File

@ -1,9 +1,14 @@
@import "./_vals.scss"; @import "./_vals.scss";
$ns: "" !default; $ns: "" !default;
$name: false !default;
$background: false !default; $background: false !default;
$on-background: false !default; $on-background: false !default;
$root-background: false !default;
$on-root-background: false !default;
$button-color: #cccccc !default; $button-color: #cccccc !default;
$on-button: #000000 !default; $on-button: #000000 !default;
@ -11,26 +16,44 @@ $on-button: #000000 !default;
@error ("background and on-background must be set!"); @error ("background and on-background must be set!");
} }
:root { @if $root-background==false or $on-root-background==false {
--background: #{$background}; @error ("root-background and on-root-background must be set!");
--on-background: #{$on-background};
} }
.background-default { @if $name==false {
@error ("name must be set!");
}
$theme: #{$name}-theme;
.#{$theme} {
--background: #{$background};
--on-background: #{$on-background};
--root-background: #{$root-background};
--on-root-background: #{$on-root-background};
}
@mixin background-default {
background: $background; background: $background;
color: $on-background;
}
.#{$theme} .background-default {
@include background-default();
} }
@each $dp in $elevations { @each $dp in $elevations {
.elv-#{$dp} { .#{$theme} .elv-#{$dp} {
@include Elevation($dp, false); @include Elevation($dp, false);
} }
.elv-#{$dp}-imp { .#{$theme} .elv-#{$dp}-imp {
@include Elevation($dp, true); @include Elevation($dp, true);
} }
} }
.elv-transition { .#{$theme} .elv-transition {
@include ElevationTransition(); @include ElevationTransition();
} }

7
src/base.scss
View File

@ -15,16 +15,17 @@ $ns: "" !default;
:root { :root {
--primary: #1e88e5; --primary: #1e88e5;
// 1e88e5 or 196eb9 => Needs further investigations --primary-rgb: 30, 136, 229;
--on-primary: white; --on-primary: white;
--secondary: #d8701b; --secondary: #d8701b;
--secondary-rgb: 216, 112, 27;
--on-secondary: black; --on-secondary: black;
--error: rgb(255, 0, 0); --error: rgb(255, 0, 0);
--error-rgb: 255, 0, 0;
--on-error: white; --on-error: white;
--primary-transparent: #196eb917;
--success: #28a745; --success: #28a745;
--success-rgb: 40, 167, 69;
--on-success: white; --on-success: white;
} }

3
src/build-pref.scss Normal file
View File

@ -0,0 +1,3 @@
$ns: "ht-";
@import "./build.scss";

5
src/build.scss Normal file
View File

@ -0,0 +1,5 @@
@import "./base.scss";
@import "./light.scss";
@import "./dark.scss";

8
src/dark.scss
View File

@ -1,7 +1,11 @@
@import "./_vals.scss"; @import "./_vals.scss";
$background: #000000; $background: #111111;
$on-background: white; $on-background: white;
$root-background: #000000;
$on-root-background: white;
$disabled-brightness: 1.1; $disabled-brightness: 1.1;
@mixin Elevation($dp, $imp: false) { @mixin Elevation($dp, $imp: false) {
@ -18,4 +22,6 @@ $disabled-brightness: 1.1;
transition: background $time; transition: background $time;
} }
$name: "dark";
@import "./_maketheme.scss"; @import "./_maketheme.scss";

2
src/grid.scss
View File

@ -310,7 +310,7 @@
.row[class*="cols-lg-"] > * { .row[class*="cols-lg-"] > * {
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 calc(var(--universal-padding) / 2); padding: 0 calc(var(1rem) / 2);
} }
.col-lg, .col-lg,

9
src/light.scss
View File

@ -1,5 +1,9 @@
$background: #f9f9f9; $background: #f9f9f9;
$on-background: black; $on-background: black;
$root-background: #eee;
$on-root-background: black;
$disabled-brightness: 0.9; $disabled-brightness: 0.9;
@mixin MakeShadow($imp, $type) { @mixin MakeShadow($imp, $type) {
@ -23,7 +27,8 @@ $disabled-brightness: 0.9;
0 1px 3px 0 rgba(0, 0, 0, 0.2) 0 1px 3px 0 rgba(0, 0, 0, 0.2)
) )
) )
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20); // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20);;
;
} @else if $dp==2 { } @else if $dp==2 {
@include MakeShadow( @include MakeShadow(
$imp, $imp,
@ -116,4 +121,6 @@ $disabled-brightness: 0.9;
transition: box-shadow $time; transition: box-shadow $time;
} }
$name: "light";
@import "./_maketheme.scss"; @import "./_maketheme.scss";

6
src/theme/_btn.scss
View File

@ -13,11 +13,11 @@
} }
} }
.btn-flat { .#{$theme} .#{$ns}btn-flat {
@include btn-flat(); @include btn-flat();
} }
.#{$ns}btn { .#{$theme} .#{$ns}btn {
@include Elevation(1); @include Elevation(1);
@include ElevationTransition(0.2s); @include ElevationTransition(0.2s);
&:focus { &:focus {
@ -26,7 +26,7 @@
@include btn-flat(); @include btn-flat();
} }
.#{$ns}fab { .#{$theme} .#{$ns}fab {
@include Elevation(8); @include Elevation(8);
@include ElevationTransition(0.2s); @include ElevationTransition(0.2s);
&:focus { &:focus {

6
src/theme/_card.scss
View File

@ -1,7 +1,9 @@
.#{$ns}card { .#{$theme} .#{$ns}card {
@include background-default();
@include Elevation(3); @include Elevation(3);
} }
.#{$ns}card-elevated { .#{$theme} .#{$ns}card-elevated {
@include background-default();
@include Elevation(8); @include Elevation(8);
} }

7
src/theme/_global.scss
View File

@ -1,5 +1,4 @@
html, .#{$theme} {
body { background: $root-background;
background: $background; color: $on-root-background;
color: $on-background;
} }

2
src/theme/_header.scss
View File

@ -1,3 +1,3 @@
.#{$ns}header { .#{$theme} .#{$ns}header {
@include Elevation(3); @include Elevation(3);
} }

9
src/theme/_input.scss
View File

@ -1,19 +1,18 @@
.#{$ns}inp { .#{$theme} .#{$ns}inp {
color: $on-background; color: $on-background;
option { option {
background: $background; @include background-default();
color: $on-background;
} }
} }
.#{$ns}input-group { .#{$theme} .#{$ns}input-group {
input { input {
@extend .#{$ns}inp; @extend .#{$ns}inp;
} }
} }
.#{$ns}input-checkbox { .#{$theme} .#{$ns}input-checkbox {
span { span {
background-color: $button-color; background-color: $button-color;
} }

4
src/theme/_list.scss
View File

@ -1,9 +1,9 @@
.#{$ns}list-clickable { .#{$theme} .#{$ns}list-clickable {
li:hover { li:hover {
background: darken-brighten-color($background, 5%); background: darken-brighten-color($background, 5%);
} }
} }
.#{$ns}list-selected { .#{$theme} .#{$ns}list-selected {
background: darken-brighten-color($background, 10%); background: darken-brighten-color($background, 10%);
} }

4
src/theme/_modal.scss
View File

@ -1,5 +1,5 @@
.#{$ns}modal { .#{$theme} .#{$ns}modal {
background: $background; @include background-default();
@include Elevation(24); @include Elevation(24);
.#{$ns}modal-action { .#{$ns}modal-action {

2
src/theme/_table.scss
View File

@ -1,4 +1,4 @@
.#{$ns}table { .#{$theme} .#{$ns}table {
tr:nth-child(odd):not(:first-child) { tr:nth-child(odd):not(:first-child) {
background: darken-brighten-color($background, 10%); background: darken-brighten-color($background, 10%);
} }

1252
yarn.lock
View File

File diff suppressed because it is too large Load Diff