Mon 21 Jul 22:43:21 CEST 2025

This commit is contained in:
sbosse 2025-07-21 23:34:41 +02:00
parent 42d3a38186
commit 040eab2914

View File

@ -0,0 +1,221 @@
/** Variables **/
$white: #FFF;
$black: #252525;
$light-grey: #EEE;
$grey: #CCC;
$dark-grey: #999;
$light-blue: #79bde6;
$blue: #4591bf;
$dark-blue: #366988;
$light-red: #ff7575;
$red: #da4242;
$dark-red: #af3535;
$light-green: #6ed06c;
$green: #51cc50;
$dark-green: #409c3f;
$br: 2px;
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
#pb-container, .pb-backdrop {
transition: ease 0.25s;
a, button, input, textarea, select, div {
transition: ease 0.25s;
}
}
.pb-toast {
transition: ease 0.25s;
a, button, input, textarea, select, div {
transition: ease 0.25s;
}
}
.pb-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 97;
opacity: 0;
background: rgba(0, 0, 0, 0.8);
&[data-show] {
opacity: 1;
}
}
#pb-container {
display: inline-block;
position: fixed;
top: 40vh;
left: 0;
right: 0;
max-width: 375px;
transform: scale(0);
margin: {
top: -50px;
right: auto;
left: auto;
}
padding: 1em;
border-radius: $br;
background: $white;
border-bottborder-bottom: 4px solid $grey;
z-index: 99;
&.absolute {
margin-top: 40vh;
}
input {
display: block;
width: 100%;
padding: 0.5em;
margin-bottom: 1em;
border: 1px solid $light-grey;
font-size: 1em;
border-radius: $br;
&:focus, &:active {
outline: none;
border-color: $grey;
}
}
&[data-show] {
transform: scale(1);
}
}
.pb-toast {
display: inline-block;
position: fixed;
left: 0;
right: 0;
transform: scale(0);
width: 400px;
margin: {
right: auto;
left: auto;
}
padding: 1em;
color: $white;
border-radius: $br;
text-align: center;
z-index: 98;
&.top {
top: 0.25em;
}
&.bottom {
bottom: 0.25em;
}
&.success {
background: $blue;
}
&.error {
background: $red;
}
&.info {
color: $black;
background: $light-grey;
}
&.show {
transform: scale(1);
}
&.gone {
transform: scale(0);
}
&[data-close="true"] {
padding-right: 3em;
}
.toast-close {
position: absolute;;
right: 0.75em;
top: 50%;
margin-top: -13.5px;
text-decoration: none;
font-size: 24px;
color: rgba(0, 0, 0, 0.5);
}
}
.pb-message {
font-size: 1.05em;
margin: 0 0 0.75em;
}
.pb-buttons {
button {
display: inline-block;
background: $light-grey;
border-radius: $br;
border: none;
padding: 0.5em 1em;
color: #222;
font-size: 1em;
outline: none;
overflow: hidden;
cursor: pointer;
box-shadow: none;
font-size: 14px;
&:focus {
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2);
}
&:hover {
background: $grey;
}
&:not(:only-of-type):last-of-type {
float: right;
background: $blue;
color: $white;
&:focus {
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5);
}
&:hover {
background: $dark-blue;
}
&[disabled] {
opacity: 0.5;
background: none;
border-color: $grey;
color: $dark-grey;
cursor: not-allowed;
}
}
}
}