From 0382eec5baf4810b11f7026ad8caf91433215027 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Mon, 21 Dec 2020 14:27:09 +0100
Subject: [PATCH] feat: button loading state
---
.../03-buttons/loading-button.mustache | 7 ++++
source/css/style.pcss | 40 +++++++++++++++++++
tailwind-plugins/buttons.js | 40 +++++++++++++++++++
3 files changed, 87 insertions(+)
create mode 100644 source/_patterns/00-atoms/03-buttons/loading-button.mustache
diff --git a/source/_patterns/00-atoms/03-buttons/loading-button.mustache b/source/_patterns/00-atoms/03-buttons/loading-button.mustache
new file mode 100644
index 0000000..82136c0
--- /dev/null
+++ b/source/_patterns/00-atoms/03-buttons/loading-button.mustache
@@ -0,0 +1,7 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-basic-button(classes: "text-sm btn--loading" )}}
+ {{> atoms-basic-button(classes: "text-base btn--loading" )}}
+ {{> atoms-basic-button(classes: "text-lg btn--loading" )}}
+ </div>
+</div>
diff --git a/source/css/style.pcss b/source/css/style.pcss
index d4d2c5b..99d6954 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -114,3 +114,43 @@ a.icon-link:hover {
/* Avoid gaps between inline-block elements */
font-size: 0;
}
+
+/* @keyframes btn-loading-spinner {
+ to {transform: rotate(360deg);}
+} */
+
+/* .btn--loading {
+ position: relative;
+} */
+
+/* .btn--loading::before {
+ pointer-events: none;
+ content: '';
+ position: absolute;
+ background-color: #000;
+ opacity: 0.7;
+ z-index: 2;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
+
+.btn--loading::after {
+ pointer-events: none;
+ content: '';
+ position: absolute;
+ z-index: 3;
+ top: 50%;
+ left: 50%;
+ width: 1.5rem;
+ height: 1.5rem;
+ margin-top: -0.75rem;
+ margin-left: -0.75rem;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: theme("colors.cyan.200");
+ border-right-color: theme("colors.cyan.200");
+ border-bottom-color: theme("colors.cyan.200");
+ animation: btn-laoding-spinner 1s linear infinite;
+} */
diff --git a/tailwind-plugins/buttons.js b/tailwind-plugins/buttons.js
index ab5cd16..500c1e7 100644
--- a/tailwind-plugins/buttons.js
+++ b/tailwind-plugins/buttons.js
@@ -110,6 +110,46 @@ module.exports = function (options) {
'.btn--condensed .btn__body': {
padding: '.75em 1em',
},
+ '@keyframes btn-loading-spinner': {
+ 'to': {
+ transform: 'rotate(360deg)',
+ }
+ },
+ '.btn--loading': {
+ position: 'relative',
+ },
+ '.btn--loading::before': {
+ pointerEvents: 'none',
+ content: "''",
+ position: 'absolute',
+ left: '0',
+ right: '0',
+ top: '0',
+ bottom: '0',
+ zIndex: '2',
+ backgroundColor: theme('colors.black'),
+ opacity: '0.7',
+ },
+ '.btn--loading::after': {
+ pointerEvents: 'none',
+ content: "''",
+ position: 'absolute',
+ left: '0',
+ right: '0',
+ top: '0',
+ bottom: '0',
+ zIndex: '3',
+ top: '50%',
+ left: '50%',
+ width: '1.5rem',
+ height: '1.5rem',
+ marginTop: '-0.75rem',
+ marginLeft: '-0.75rem',
+ borderRadius: '50%',
+ border: `3px solid ${theme('colors.cyan.200')}`,
+ borderLeftColor: 'transparent',
+ animation: 'btn-loading-spinner 1s linear infinite',
+ }
},
..._.map(options.colors, (colorOptions, name) => {
const bg = getThemeColor(colorOptions.background, '#000');
--
GitLab