First Version
This commit is contained in:
Fabian
commit
55b970f14a
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
out/
|
||||||
|
node_modules/
|
||||||
191
index.html
Normal file
191
index.html
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./out/base.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
|
||||||
|
<script src="./ipsum.js"></script>
|
||||||
|
<script>
|
||||||
|
const l = new LoremIpsum();
|
||||||
|
window.prip = (i = 12) => window.document.write(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);
|
||||||
|
|
||||||
|
let match = window.matchMedia("prefers-color-scheme: dark");
|
||||||
|
match.addListener((ev) => {
|
||||||
|
applyStyleSheet(ev.matches)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* :root {
|
||||||
|
--primary: blue;
|
||||||
|
--on-primary: white;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.parent {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.child {
|
||||||
|
flex: 1 0 21%;
|
||||||
|
margin: 20px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button>
|
||||||
|
<div class="content">
|
||||||
|
<div class="margin prev">
|
||||||
|
<div class="parent">
|
||||||
|
<div class="child elv-1"></div>
|
||||||
|
<div class="child elv-2"></div>
|
||||||
|
<div class="child elv-3"></div>
|
||||||
|
<div class="child elv-4"></div>
|
||||||
|
<div class="child elv-6"></div>
|
||||||
|
<div class="child elv-8"></div>
|
||||||
|
<div class="child elv-9"></div>
|
||||||
|
<div class="child elv-12"></div>
|
||||||
|
<div class="child elv-16"></div>
|
||||||
|
<div class="child elv-24"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin prev">
|
||||||
|
<button class="btn">Hallo Welt</button>
|
||||||
|
<button class="btn btn-primary">Hallo Welt</button>
|
||||||
|
|
||||||
|
<button class="btn fab">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin prev">
|
||||||
|
<button class="btn" onclick="$('#modal1').classList.toggle('modal-hidden')">Open Modal</button>
|
||||||
|
|
||||||
|
<div id="modal1" class="modal modal-hidden">
|
||||||
|
<div class="modal-title">Title</div>
|
||||||
|
<div id="modal1_content" class="modal-content">
|
||||||
|
<script>
|
||||||
|
prip(80)
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
<div class="modal-action">
|
||||||
|
<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 class="margin prev">
|
||||||
|
<form>
|
||||||
|
<div class="input-group">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" placeholder="Name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" placeholder="Name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="inp" type="text" placeholder="Name" />
|
||||||
|
<input class="inp" type="text" placeholder="Name2" value="Test01" />
|
||||||
|
<input class="inp" type="text" placeholder="Name" disabled />
|
||||||
|
|
||||||
|
<select class="inp">
|
||||||
|
<option>Opt1</option>
|
||||||
|
<option>Opt2</option>
|
||||||
|
<option>Opt3</option>
|
||||||
|
<option>Opt4</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin prev">
|
||||||
|
<button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button>
|
||||||
|
<ul id="ul1" class="list">
|
||||||
|
<li>Item 1</li>
|
||||||
|
<li>Item 2</li>
|
||||||
|
<li>Item 3</li>
|
||||||
|
<li>Item 4</li>
|
||||||
|
<li>Item 5</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin prev">
|
||||||
|
<ul class="list list-divider list-clickable">
|
||||||
|
<li>Item 1</li>
|
||||||
|
<li>Item 2</li>
|
||||||
|
<li>Item 3</li>
|
||||||
|
<li>Item 4</li>
|
||||||
|
<li>Item 5</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin prev">
|
||||||
|
<div class="header">
|
||||||
|
<span>I1</span>
|
||||||
|
<span>I2</span>
|
||||||
|
<div class="header-icon-button">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" 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>
|
||||||
|
<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="14" y1="11" x2="14" y2="17"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
147
ipsum.js
Normal file
147
ipsum.js
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
;
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LoremIpsum constructor
|
||||||
|
*
|
||||||
|
* @type {Function}
|
||||||
|
*/
|
||||||
|
window.LoremIpsum = function () {
|
||||||
|
// pass
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* LoremIpsum prototype
|
||||||
|
*
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
window.LoremIpsum.prototype = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Possible words
|
||||||
|
*
|
||||||
|
* @type {Array}
|
||||||
|
*/
|
||||||
|
_words: ["a", "ac", "accumsan", "ad", "adipiscing", "aenean", "aenean", "aliquam", "aliquam", "aliquet", "amet", "ante", "aptent", "arcu", "at", "auctor", "augue", "bibendum", "blandit", "class", "commodo", "condimentum", "congue", "consectetur", "consequat", "conubia", "convallis", "cras", "cubilia", "curabitur", "curabitur", "curae", "cursus", "dapibus", "diam", "dictum", "dictumst", "dolor", "donec", "donec", "dui", "duis", "egestas", "eget", "eleifend", "elementum", "elit", "enim", "erat", "eros", "est", "et", "etiam", "etiam", "eu", "euismod", "facilisis", "fames", "faucibus", "felis", "fermentum", "feugiat", "fringilla", "fusce", "gravida", "habitant", "habitasse", "hac", "hendrerit", "himenaeos", "iaculis", "id", "imperdiet", "in", "inceptos", "integer", "interdum", "ipsum", "justo", "lacinia", "lacus", "laoreet", "lectus", "leo", "libero", "ligula", "litora", "lobortis", "lorem", "luctus", "maecenas", "magna", "malesuada", "massa", "mattis", "mauris", "metus", "mi", "molestie", "mollis", "morbi", "nam", "nec", "neque", "netus", "nibh", "nisi", "nisl", "non", "nostra", "nulla", "nullam", "nunc", "odio", "orci", "ornare", "pellentesque", "per", "pharetra", "phasellus", "placerat", "platea", "porta", "porttitor", "posuere", "potenti", "praesent", "pretium", "primis", "proin", "pulvinar", "purus", "quam", "quis", "quisque", "quisque", "rhoncus", "risus", "rutrum", "sagittis", "sapien", "scelerisque", "sed", "sem", "semper", "senectus", "sit", "sociosqu", "sodales", "sollicitudin", "suscipit", "suspendisse", "taciti", "tellus", "tempor", "tempus", "tincidunt", "torquent", "tortor", "tristique", "turpis", "ullamcorper", "ultrices", "ultricies", "urna", "ut", "ut", "varius", "vehicula", "vel", "velit", "venenatis", "vestibulum", "vitae", "vivamus", "viverra", "volutpat", "vulputate"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get random number
|
||||||
|
*
|
||||||
|
* @param {Number} x
|
||||||
|
* @param {Number} y
|
||||||
|
* @return {Number}
|
||||||
|
*/
|
||||||
|
_random: function (x, y) {
|
||||||
|
var rnd = (Math.random() * 2 - 1) + (Math.random() * 2 - 1) + (Math.random() * 2 - 1);
|
||||||
|
return Math.round(Math.abs(rnd) * x + y);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get random number between min and max
|
||||||
|
*
|
||||||
|
* @param {Number} min (optional) lower result limit
|
||||||
|
* @param {Number} max (optional) upper result limit
|
||||||
|
* @return {Number} random number
|
||||||
|
*/
|
||||||
|
_count: function (min, max) {
|
||||||
|
var result;
|
||||||
|
if (min && max) result = Math.floor(Math.random() * (max - min + 1) + min);
|
||||||
|
else if (min) result = min;
|
||||||
|
else if (max) result = max;
|
||||||
|
else result = this._random(8, 2);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get random words
|
||||||
|
*
|
||||||
|
* @param {Number} min (optional) minimal words count
|
||||||
|
* @param {Number} max (optional) maximal words count
|
||||||
|
* @return {Object} array of random words
|
||||||
|
*/
|
||||||
|
words: function (min, max) {
|
||||||
|
var result = [];
|
||||||
|
var count = this._count(min, max);
|
||||||
|
|
||||||
|
// get random words
|
||||||
|
while (result.length < count) {
|
||||||
|
var pos = Math.floor(Math.random() * this._words.length);
|
||||||
|
var rnd = this._words[pos];
|
||||||
|
|
||||||
|
// do not allow same word twice in a row
|
||||||
|
if (result.length && result[result.length - 1] === rnd) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
result.push(rnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate sentence
|
||||||
|
*
|
||||||
|
* @param {Number} min (optional) minimal words count
|
||||||
|
* @param {Number} max (optional) maximal words count
|
||||||
|
* @return {String} sentence
|
||||||
|
*/
|
||||||
|
sentence: function (min, max) {
|
||||||
|
var words = this.words(min, max);
|
||||||
|
|
||||||
|
// add comma(s) to sentence
|
||||||
|
var index = this._random(6, 2);
|
||||||
|
while (index < words.length - 2) {
|
||||||
|
words[index] += ",";
|
||||||
|
index += this._random(6, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// append puctation on end
|
||||||
|
var punct = "...!?"
|
||||||
|
words[words.length - 1] += punct.charAt(Math.floor(Math.random() * punct.length));
|
||||||
|
|
||||||
|
// uppercase first letter
|
||||||
|
words[0] = words[0].charAt(0).toUpperCase() + words[0].slice(1);
|
||||||
|
|
||||||
|
return words.join(" ");
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate paragraph
|
||||||
|
*
|
||||||
|
* @param {Number} min (optional) minimal words count
|
||||||
|
* @param {Number} max (optional) maximal words count
|
||||||
|
* @return {String} paragraph
|
||||||
|
*/
|
||||||
|
paragraph: function (min, max) {
|
||||||
|
if (!min && !max) {
|
||||||
|
min = 20;
|
||||||
|
max = 60;
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = "";
|
||||||
|
var count = this._count(min, max);
|
||||||
|
|
||||||
|
// append sentences until limit is reached
|
||||||
|
while (result.slice(0, -1).split(" ").length < count) {
|
||||||
|
result += this.sentence() + " ";
|
||||||
|
}
|
||||||
|
result = result.slice(0, -1)
|
||||||
|
|
||||||
|
// remove words
|
||||||
|
if (result.split(" ").length > count) {
|
||||||
|
var punct = result.slice(-1);
|
||||||
|
result = result.split(" ").slice(0, count).join(" ");
|
||||||
|
result = result.replace(/,$/, "");
|
||||||
|
result += punct;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
2142
package-lock.json
generated
Normal file
2142
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
package.json
Normal file
18
package.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "@hibas123/theme",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": " ",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"author": "Fabian Stamm <dev@fabianstamm.de>",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"less": "^3.9.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"sass": "^1.21.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
69
src/_btn.scss
Normal file
69
src/_btn.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
@include Elevation(1);
|
||||||
|
background: $button-color;
|
||||||
|
color: black;
|
||||||
|
border: 0;
|
||||||
|
margin: .3rem;
|
||||||
|
padding: .5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: .05s background-color linear;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: darken($button-color, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: lighten($button-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: $primary !important;
|
||||||
|
color: $on-primary !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: $secondary !important;
|
||||||
|
color: $on-primary !important;
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
filter: brightness(1.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab {
|
||||||
|
@include Elevation(6);
|
||||||
|
background: $button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin: .5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
>svg {
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
8
src/_card.scss
Normal file
8
src/_card.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.card {
|
||||||
|
@include Elevation(3);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-elevated {
|
||||||
|
@include Elevation(8);
|
||||||
|
}
|
||||||
0
src/_colors.scss
Normal file
0
src/_colors.scss
Normal file
36
src/_header.scss
Normal file
36
src/_header.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
.header {
|
||||||
|
@include Elevation(3);
|
||||||
|
background: $primary;
|
||||||
|
color: $on-primary;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: .75rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
>* {
|
||||||
|
margin: 0;
|
||||||
|
background: $primary;
|
||||||
|
color: $on-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-icon-button {
|
||||||
|
display: block;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
min-width: $default-font-size;
|
||||||
|
|
||||||
|
>svg {
|
||||||
|
height: $default-font-size;
|
||||||
|
width: $default-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
39
src/_input.scss
Normal file
39
src/_input.scss
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
.inp {
|
||||||
|
// background: $background;
|
||||||
|
background: unset;
|
||||||
|
color: $on-background;
|
||||||
|
border: 1px grey solid;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
height: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 10rem;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// &disabled {
|
||||||
|
// background: darken-brighten-color($background, 10%)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea.inp {
|
||||||
|
height: unset !important;
|
||||||
|
min-height: 6rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
@extend .margin;
|
||||||
|
|
||||||
|
input {
|
||||||
|
@extend .inp;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/_list.scss
Normal file
25
src/_list.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.list {
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-divider {
|
||||||
|
li:nth-child(n+2) {
|
||||||
|
// margin-top: 10px;
|
||||||
|
// padding-top: 10px;
|
||||||
|
border-top: 1px solid rgb(128, 128, 128);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.list-clickable {
|
||||||
|
li:hover {
|
||||||
|
background: darken-brighten-color($background, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
84
src/_maketheme.scss
Normal file
84
src/_maketheme.scss
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
@import "./_vals.scss";
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
|
||||||
|
|
||||||
|
$background:false !default;
|
||||||
|
$on-background:false !default;
|
||||||
|
$primary: var(--primary) !default;
|
||||||
|
$on-primary: var(--on-primary) !default;
|
||||||
|
|
||||||
|
$secondary: var(--secondary) !default;
|
||||||
|
$on-secondary: var(--on-secondary) !default;
|
||||||
|
|
||||||
|
$error: var(--error) !default;
|
||||||
|
$on-error: var(--on-error) !default;
|
||||||
|
|
||||||
|
$button-color: #CCCCCC !default;
|
||||||
|
|
||||||
|
@if $background==false or $on-background==false {
|
||||||
|
@error("background and on-background must be set!");
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: $background;
|
||||||
|
--on-background: $on-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
$default-font-size: 1.2rem;
|
||||||
|
|
||||||
|
.background-default {
|
||||||
|
background: $background;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: $default-font-size;
|
||||||
|
|
||||||
|
transition: .2s ease-in-out;
|
||||||
|
transition-property: color, background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background: $background;
|
||||||
|
color: $on-background;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $dp in $elevations {
|
||||||
|
.elv-#{$dp} {
|
||||||
|
@include Elevation($dp);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 50rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function darken-brighten-color($color, $val) {
|
||||||
|
@if (lightness($color) > 50) {
|
||||||
|
@return darken($color, $val); // Lighter backgorund, return dark color
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@return lighten($color, $val); // Darker background, return light color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "./_btn.scss";
|
||||||
|
@import "./_modal.scss";
|
||||||
|
@import "./_input.scss";
|
||||||
|
@import "./_list.scss";
|
||||||
|
@import "./_header.scss";
|
||||||
|
@import "./_card.scss";
|
||||||
61
src/_modal.scss
Normal file
61
src/_modal.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
.modal {
|
||||||
|
background: $background;
|
||||||
|
// background: rgba(0, 0, 0, 0.04);
|
||||||
|
@include Elevation(24);
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
max-width: 600px;
|
||||||
|
min-width: 250px;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
|
||||||
|
max-height: calc(100vh - 2rem);
|
||||||
|
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: calc(100vh - 10rem);
|
||||||
|
// margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-action {
|
||||||
|
margin-top: .5rem;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
:first-child {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
@extend .btn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
transform-origin: center;
|
||||||
|
animation: growModalBox .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes growModalBox {
|
||||||
|
from {
|
||||||
|
filter: opacity(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
filter: opacity(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
10
src/_vals.scss
Normal file
10
src/_vals.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
$elevations: 1,
|
||||||
|
2,
|
||||||
|
3,
|
||||||
|
4,
|
||||||
|
6,
|
||||||
|
8,
|
||||||
|
9,
|
||||||
|
12,
|
||||||
|
16,
|
||||||
|
24;
|
||||||
9
src/base.scss
Normal file
9
src/base.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
:root {
|
||||||
|
// --primary: #1e88e5;
|
||||||
|
--primary: #196eb9;
|
||||||
|
// or 196eb9 => Needs further investigations
|
||||||
|
--on-primary: white;
|
||||||
|
--secondary: #d8701b;
|
||||||
|
--on-secondary: black;
|
||||||
|
--error: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
12
src/dark.scss
Normal file
12
src/dark.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
@import "./_vals.scss";
|
||||||
|
|
||||||
|
$background: #000000;
|
||||||
|
$on-background: white;
|
||||||
|
$disabled-brightness: 1.1;
|
||||||
|
|
||||||
|
@mixin Elevation ($dp) {
|
||||||
|
background: lighten($background, floor(($dp + 3) * 1%));
|
||||||
|
z-index: $dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "./maketheme.scss";
|
||||||
57
src/light.scss
Normal file
57
src/light.scss
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
$background: #f9f9f9;
|
||||||
|
$on-background: black;
|
||||||
|
$disabled-brightness: .9;
|
||||||
|
|
||||||
|
@mixin Elevation ($dp) {
|
||||||
|
@if $dp==0 {
|
||||||
|
box-shadow: none
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==1 {
|
||||||
|
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 {
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==3 {
|
||||||
|
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12), 0 1px 8px 0 rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==4 {
|
||||||
|
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==6 {
|
||||||
|
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==8 {
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==9 {
|
||||||
|
box-shadow: 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12), 0 5px 6px -3px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==12 {
|
||||||
|
box-shadow: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==16 {
|
||||||
|
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $dp==24 {
|
||||||
|
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .20)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@error "Invalid argument for $dp: {"+$dp+"}, look at the method definition for possible values";
|
||||||
|
}
|
||||||
|
|
||||||
|
z-index: $dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import "./maketheme.scss";
|
||||||
Loading…
Reference in New Issue
Block a user