Lots of changes:

- Switching build system to pure rollup without too much custom logic
- Restructuring files
- Adding Popup View
- Make everything typescript compatible
- Adding @hibas123/theme
- Start switching to @hibas123/theme
This commit is contained in:
Fabian Stamm
2020-11-03 23:22:24 +01:00
parent 4191522b24
commit 8e4c292959
50 changed files with 4554 additions and 3145 deletions

View File

@ -0,0 +1,90 @@
<script lang="ts">
// import { Tile } from "carbon-components-svelte";
export let title: string;
export let loading = false;
export let hide = false;
</script>
<style>
.wrapper {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
}
.container {
border-radius: 4px;
position: relative;
padding-top: 2.5rem;
min-height: calc(100px + 2.5rem);
min-width: 100px;
margin-top: 3rem;
}
.title-container {
margin: -4.8rem auto 0 auto;
max-width: 250px;
background-color: var(--primary);
color: white;
border-radius: 4px;
/* padding: 5px 20px; */
}
.title-container > h1 {
font-size: 2rem;
line-height: 1;
}
.content-container {
padding: 2em;
margin: 0 auto;
max-width: 380px;
overflow: hidden;
}
.loading_container {
filter: blur(1px) opacity(50%);
}
.loader_container {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
</style>
<div class="wrapper">
<div class="card-elevated container">
<!-- <div class="container card"> -->
<div class="card elv-8 title-container">
<h1 style="margin:0">{title}</h1>
</div>
{#if loading}
<div class="loader_container">
<div class="loader_box">
<div class="loader" />
</div>
</div>
{/if}
<div class="content-container" class:loading_container={loading}>
{#if !(loading && hide)}
<slot />
{/if}
</div>
<!-- </div> -->
</div>
</div>

View File

@ -0,0 +1,15 @@
<script lang="ts">
// import { onMount, afterUpdate, setContext } from "svelte";
// import { writable, derived } from "svelte/store";
// type Theme = "white" | "g10" | "g90" | "g100";
// export let persist: boolean = false;
// export let persistKey: string = "theme";
export let dark = false;
</script>
<div class={dark ? 'dark-theme' : 'light-theme'}>
<slot />
</div>

View File

@ -0,0 +1,42 @@
import "@hibas123/theme/out/base.css";
import "./theme.css";
import { default as Theme } from "./Theme.svelte";
(() => {
const elements = new WeakSet();
function check() {
document
.querySelectorAll(".floating>input")
.forEach((e: HTMLInputElement) => {
if (elements.has(e)) return;
elements.add(e);
function checkState() {
console.log("Check State");
if (e.value !== "") {
if (e.classList.contains("used")) return;
e.classList.add("used");
} else {
if (e.classList.contains("used")) e.classList.remove("used");
}
}
e.addEventListener("change", () => checkState());
checkState();
});
}
const observer = new MutationObserver((mutations) => {
check();
});
// Start observing the target node for configured mutations
observer.observe(window.document, {
childList: true,
subtree: true,
});
check();
})();
export default Theme;

View File

@ -0,0 +1,251 @@
:root {
--primary: #1e88e5;
--mdc-theme-primary: var(--primary);
--mdc-theme-primary-bg: var(--mdc-theme--primary);
--mdc-theme-on-primary: white;
--error: #ff2f00;
--border-color: #ababab;
--default-font-size: 1.05rem;
}
* {
font-family: "Roboto", "Helvetica", sans-serif;
}
html,
body {
margin: 0;
color: #636363;
position: relative;
background: #eee;
height: 100%;
font-size: var(--default-font-size);
min-width: 100vw;
min-height: 100vh;
box-sizing: border-box;
}
.group {
position: relative;
margin-bottom: 24px;
min-height: 45px;
}
.floating > input {
font-size: 1.2rem;
padding: 10px 10px 10px 5px;
appearance: none;
-webkit-appearance: none;
display: block;
background: #fafafa;
background: unset;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
/* border-bottom: 1px solid #757575; */
border-bottom: 1px solid var(--border-color);
box-sizing: border-box;
}
.floating > input:focus {
outline: none;
}
/* Label */
.floating > label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/* active */
.floating > input:focus ~ label,
.floating > input.used ~ label {
top: -0.75em;
transform: scale(0.75);
left: -2px;
/* font-size: 14px; */
color: var(--primary);
transform-origin: left;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before,
.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: var(--primary);
transition: all 0.2s ease;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active */
.floating > input:focus ~ .bar:before,
.floating > input:focus ~ .bar:after {
width: 50%;
}
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
.floating > input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
@keyframes inputHighlighter {
from {
background: var(--primary);
}
to {
width: 0;
background: transparent;
}
}
.btn {
position: relative;
display: block;
margin: 2rem;
padding: 0 1em;
overflow: hidden;
border-width: 0;
outline: none;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
background-color: #cccccc;
color: #ecf0f1;
transition: background-color 0.3s;
height: 48px;
text-transform: uppercase;
font-weight: 500;
font-size: 1.2rem;
}
.btn:hover,
.btn:focus {
filter: brightness(90%);
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0;
padding-top: 0;
border-radius: 100%;
background-color: rgba(236, 240, 241, 0.3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn:active:before {
width: 120%;
padding-top: 120%;
transition: width 0.2s ease-out, padding-top 0.2s ease-out;
}
.loader_box {
width: 64px;
height: 64px;
margin: auto;
}
.loader {
display: inline-block;
position: relative;
z-index: 100;
}
.loader:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid var(--primary);
border-color: var(--primary) transparent var(--primary) transparent;
animation: loader 1.2s linear infinite;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#content {
height: 100%;
}