forked from OpenServer/OpenAuth_views
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
90
src/components/HoveringContentBox.svelte
Normal file
90
src/components/HoveringContentBox.svelte
Normal 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>
|
||||
15
src/components/theme/Theme.svelte
Normal file
15
src/components/theme/Theme.svelte
Normal 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>
|
||||
42
src/components/theme/index.ts
Normal file
42
src/components/theme/index.ts
Normal 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;
|
||||
251
src/components/theme/theme.css
Normal file
251
src/components/theme/theme.css
Normal 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%;
|
||||
}
|
||||
Reference in New Issue
Block a user