Current state

This commit is contained in:
2026-02-07 08:23:18 +01:00
commit 0a4372c40d
22479 changed files with 1553543 additions and 0 deletions

View File

@@ -0,0 +1,81 @@
/** Contains the default Ladda button theme styles */
@import 'ladda.scss';
/*************************************
* CONFIG
*/
$green: #2aca76;
$blue: #53b5e6;
$red: #ea8557;
$purple: #9973C2;
$mint: #16a085;
/*************************************
* BUTTON THEME
*/
.ladda-button {
background: #666;
border: 0;
padding: 14px 18px;
font-size: 18px;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: 1px solid transparent;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:hover {
border-color: rgba( 0, 0, 0, 0.07 );
background-color: #888;
}
@include buttonColor( 'green', $green );
@include buttonColor( 'blue', $blue );
@include buttonColor( 'red', $red );
@include buttonColor( 'purple', $purple );
@include buttonColor( 'mint', $mint );
&[disabled],
&[data-loading] {
border-color: rgba( 0, 0, 0, 0.07 );
cursor: default;
background-color: #999;
&:hover {
cursor: default;
background-color: #999;
}
}
&[data-size=xs] {
padding: 4px 8px;
.ladda-label {
font-size: 0.7em;
}
}
&[data-size=s] {
padding: 6px 10px;
.ladda-label {
font-size: 0.9em;
}
}
&[data-size=l] .ladda-label {
font-size: 1.2em;
}
&[data-size=xl] .ladda-label {
font-size: 1.5em;
}
}

View File

@@ -0,0 +1,483 @@
/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
/*************************************
* CONFIG
*/
$spinnerSize: 32px;
/*************************************
* MIXINS
*/
@mixin prefix ( $property, $value ) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
@mixin transition( $value ) {
-webkit-transition: $value !important; // important to override bootstrap
-moz-transition: $value !important;
-ms-transition: $value !important;
-o-transition: $value !important;
transition: $value !important;
}
@mixin transform( $value ) {
@include prefix( transform, $value );
}
@mixin transform-origin( $value ) {
@include prefix( transform-origin, $value );
}
@mixin buttonColor( $name, $color ) {
&[data-color=#{$name}] {
background: $color;
&:hover {
background-color: lighten( $color, 5% );
}
}
}
/*************************************
* BUTTON BASE
*/
.ladda-button {
position: relative;
}
/* Spinner animation */
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: $spinnerSize;
height: $spinnerSize;
top: 50%;
margin-top: -$spinnerSize/2;
opacity: 0;
pointer-events: none;
}
/* Button label */
.ladda-button .ladda-label {
position: relative;
z-index: 3;
}
/* Progress bar */
.ladda-button .ladda-progress {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
background: rgba( 0, 0, 0, 0.2 );
visibility: hidden;
opacity: 0;
@include transition( 0.1s linear all );
}
.ladda-button[data-loading] .ladda-progress {
opacity: 1;
visibility: visible;
}
/*************************************
* EASING
*/
.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
@include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) all );
}
.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label {
@include transition( 0.3s ease all );
}
/*************************************
* EXPAND LEFT
*/
.ladda-button[data-style=expand-right] {
.ladda-spinner {
right: 14px;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
right: 4px;
}
&[data-loading] {
padding-right: 56px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-right: 40px;
}
}
}
/*************************************
* EXPAND RIGHT
*/
.ladda-button[data-style=expand-left] {
.ladda-spinner {
left: 14px;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
left: 4px;
}
&[data-loading] {
padding-left: 56px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-left: 40px;
}
}
}
/*************************************
* EXPAND UP
*/
.ladda-button[data-style=expand-up] {
overflow: hidden;
.ladda-spinner {
top: -$spinnerSize;
left: 50%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
padding-top: 54px;
.ladda-spinner {
opacity: 1;
top: 14px;
margin-top: 0;
}
&[data-size="s"],
&[data-size="xs"] {
padding-top: 32px;
.ladda-spinner {
top: 4px;
}
}
}
}
/*************************************
* EXPAND DOWN
*/
.ladda-button[data-style=expand-down] {
overflow: hidden;
.ladda-spinner {
top: 62px;
left: 50%;
margin-left: -$spinnerSize/2;
}
&[data-size="s"] .ladda-spinner,
&[data-size="xs"] .ladda-spinner {
top: 40px;
}
&[data-loading] {
padding-bottom: 54px;
.ladda-spinner {
opacity: 1;
}
&[data-size="s"],
&[data-size="xs"] {
padding-bottom: 32px;
}
}
}
/*************************************
* SLIDE LEFT
*/
.ladda-button[data-style=slide-left] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 100%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
.ladda-label {
opacity: 0;
left: -100%;
}
.ladda-spinner {
opacity: 1;
left: 50%;
}
}
}
/*************************************
* SLIDE RIGHT
*/
.ladda-button[data-style=slide-right] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
right: 100%;
margin-left: -$spinnerSize/2;
}
&[data-loading] {
.ladda-label {
opacity: 0;
left: 100%;
}
.ladda-spinner {
opacity: 1;
left: 50%;
}
}
}
/*************************************
* SLIDE UP
*/
.ladda-button[data-style=slide-up] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
margin-top: 1em;
}
&[data-loading] {
.ladda-label {
opacity: 0;
top: -1em;
}
.ladda-spinner {
opacity: 1;
margin-top: -$spinnerSize/2;
}
}
}
/*************************************
* SLIDE DOWN
*/
.ladda-button[data-style=slide-down] {
overflow: hidden;
.ladda-label {
position: relative;
}
.ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
margin-top: -2em;
}
&[data-loading] {
.ladda-label {
opacity: 0;
top: 1em;
}
.ladda-spinner {
opacity: 1;
margin-top: -$spinnerSize/2;
}
}
}
/*************************************
* ZOOM-OUT
*/
.ladda-button[data-style=zoom-out] {
overflow: hidden;
}
.ladda-button[data-style=zoom-out] .ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
@include transform( scale( 2.5 ) );
}
.ladda-button[data-style=zoom-out] .ladda-label {
position: relative;
display: inline-block;
}
.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
opacity: 0;
@include transform( scale( 0.5 ) );
}
.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
opacity: 1;
@include transform( none );
}
/*************************************
* ZOOM-IN
*/
.ladda-button[data-style=zoom-in] {
overflow: hidden;
}
.ladda-button[data-style=zoom-in] .ladda-spinner {
left: 50%;
margin-left: -$spinnerSize/2;
@include transform( scale( 0.2 ) );
}
.ladda-button[data-style=zoom-in] .ladda-label {
position: relative;
display: inline-block;
}
.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
opacity: 0;
@include transform( scale( 2.2 ) );
}
.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
opacity: 1;
@include transform( none );
}
/*************************************
* CONTRACT
*/
.ladda-button[data-style=contract] {
overflow: hidden;
width: 100px;
}
.ladda-button[data-style=contract] .ladda-spinner {
left: 50%;
margin-left: -16px;
}
.ladda-button[data-style=contract][data-loading] {
border-radius: 50%;
width: 52px;
}
.ladda-button[data-style=contract][data-loading] .ladda-label {
opacity: 0;
}
.ladda-button[data-style=contract][data-loading] .ladda-spinner {
opacity: 1;
}
/*************************************
* OVERLAY
*/
.ladda-button[data-style=contract-overlay] {
overflow: hidden;
width: 100px;
box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0);
}
.ladda-button[data-style=contract-overlay] .ladda-spinner {
left: 50%;
margin-left: -16px;
}
.ladda-button[data-style=contract-overlay][data-loading] {
border-radius: 50%;
width: 52px;
/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0.8);
}
.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
opacity: 0;
}
.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
opacity: 1;
}

View File

@@ -0,0 +1,119 @@
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: hsla(0,0%,100%,.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.regex,
.token.important {
color: #e90;
}
.token.important {
font-weight: bold;
}
.token.entity {
cursor: help;
}