Added admin sites

2020-06-15 08:56:21 +02:00
parent 88b7012f69
commit e73e2aacdc
43 changed files with 674 additions and 151 deletions
@@ -0,0 +1,119 @@
+.toggle{
+    --uiToggleSize: var(--toggleSize, 20px);
+    --uiToggleIndent: var(--toggleIndent, .4em);
+    --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
+    --uiToggleColor: var(--toggleColor, #000);
+    --uiToggleDisabledColor: var(--toggleDisabledColor, #868e96);
+    --uiToggleBgColor: var(--toggleBgColor, #fff);
+    --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
+    --uiToggleArrowColor: var(--toggleArrowColor, #fff);
+
+    margin-bottom: 1.5rem;
+
+    display: inline-block;
+    position: relative;
+}
+.toggle__input{
+    position: absolute;
+    left: -99999px;
+}
+.toggle__label{
+    display: inline-flex;
+    min-height: var(--uiToggleSize);
+    padding-left: calc(var(--uiToggleSize) + var(--uiToggleIndent));
+}
+.toggle__input:not(:disabled) ~ .toggle__label{
+    cursor: pointer;
+}
+.toggle__label::before,
+.toggle__label::after{
+    content: "";
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    font-size: var(--uiToggleSize);
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.toggle__label:before{
+    border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
+    z-index: 2;
+}
+.toggle__input:disabled ~ .toggle__label::before{
+    border-color: var(--uiToggleDisabledColor);
+}
+.toggle__input:focus ~ .toggle__label::before{
+    box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0 4px var(--uiToggleColor);
+}
+.toggle__input:not(:disabled):checked:focus ~ .toggle__label::after{
+    box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0 4px var(--uiToggleColor);
+}
+.toggle__input:not(:disabled) ~ .toggle__label::after{
+    background-color: var(--uiToggleColor);
+    opacity: 0;
+}
+.toggle__input:not(:disabled):checked ~ .toggle__label::after{
+    opacity: 1;
+}
+.toggle__text{
+    margin-top: auto;
+    margin-bottom: auto;
+}
+.toggle__text::before{
+    content: "";
+    box-sizing: border-box;
+    width: 0;
+    height: 0;
+    font-size: var(--uiToggleSize);
+
+    border-left-width: 0;
+    border-bottom-width: 0;
+    border-left-style: solid;
+    border-bottom-style: solid;
+    border-color: var(--uiToggleArrowColor);
+
+    position: absolute;
+    top: .5428em;
+    left: .2em;
+    z-index: 3;
+
+    transform-origin: left top;
+    transform: rotate(-40deg) skew(10deg);
+}
+.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text::before{
+    width: .5em;
+    height: .25em;
+    border-left-width: var(--uiToggleArrowWidth);
+    border-bottom-width: var(--uiToggleArrowWidth);
+    will-change: width, height;
+    transition: width .1s ease-out .2s, height .2s ease-out;
+    margin-top: 3px;
+}
+.toggle__input:disabled ~ .toggle__label{
+    opacity: .24;
+    cursor: not-allowed;
+}
+.toggle__label::before,
+.toggle__label::after{
+    border: 2px solid;
+    border-color: white;
+}
+.toggle__input:not(:disabled) ~ .toggle__label::before,
+.toggle__input:not(:disabled) ~ .toggle__label::after{
+    opacity: 1;
+    transform-origin: center center;
+    margin-top: 3px;
+}
+.toggle__text::before{
+    opacity: 0;
+}
+.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text::before{
+    opacity: 1;
+    transition: opacity .1s ease-out .3s, width .1s ease-out .5s, height .2s ease-out .3s;
+}
+.toggle{
+    --toggleColor: transparent;
+    --toggleBgColor: transparent;
+    --toggleSize: 1.25rem;
+}
@@ -0,0 +1,57 @@
+form {
+    max-width: 100%;
+    padding: 0 .45rem 0 .45rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.btn {
+    border: 0;
+    border-radius: 4px;
+    padding: .5rem;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 1.05rem;
+    background-color: white;
+    color: $sde-black-80;
+    margin-bottom: .5rem;
+}
+
+.btn-dark {
+    color: white;
+    background-color: $sde-black-80;
+}
+
+.btn-sde-blue {
+    color: white;
+    background-color: $sde-blue;
+}
+
+.btn-disabled {
+    color: white;
+    background-color: $sde-black-20;
+}
+
+.form-inline {
+    display: inline-flex;
+}
+
+input{
+    border: grey solid 2px;
+    border-radius: 4px;
+    background-color: transparent;
+    font-size: 1rem;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+}
+
+input.appinput {
+    border: none;
+    border-bottom: white solid 2px;
+    background-color: transparent;
+    font-size: 1rem;
+    color: rgba(255,255,255,1);
+    line-height: 2rem;
+    margin-bottom: 1rem;
+}