From cfe2b85921d2c6d704472fcfacf0d177be58804b Mon Sep 17 00:00:00 2001 From: Sagnik Ganguly Date: Mon, 2 Jan 2023 16:21:21 +0530 Subject: [PATCH] FIXED: Component: Button: Some minor bug fixes. --- src/css/components/buttons.css | 286 ++++++++++++++++++++++++++++----- 1 file changed, 244 insertions(+), 42 deletions(-) diff --git a/src/css/components/buttons.css b/src/css/components/buttons.css index 5c661a2f..7b6ea082 100644 --- a/src/css/components/buttons.css +++ b/src/css/components/buttons.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2022 SGNetworks. All rights reserved. + * Copyright (c) 2022-2023 SGNetworks. All rights reserved. * * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification", "Alteration", "Re-distribution" is completely prohibited. * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES. @@ -18,21 +18,21 @@ } .btn { - font-size: var(--sgn-button-text-md); - font-family: var(--sgn-font-default-bold); - border-width: var(--sgn-button-border-width); - border-radius: var(--sgn-border-radius-md); - padding: var(--padding-sm) var(--padding-md); border: none; + border-radius: var(--sgn-border-radius-md); + border-width: var(--sgn-button-border-width); + cursor: pointer; + font-family: var(--sgn-font-default-bold); + font-size: var(--sgn-button-text-md); line-height: 1; - text-transform: uppercase; + padding: var(--padding-sm) var(--padding-md); text-align: center; text-decoration: none; - cursor: pointer; - -webkit-user-select: none; + text-transform: uppercase; + transition: background-color .3s ease-in-out, color .3s ease-in-out; -moz-user-select: none; + -webkit-user-select: none; user-select: none; - transition: all .5s linear; } .btn:not(.icon).sm { @@ -51,10 +51,6 @@ width: 100%; } -.btn:hover { - background-position: right center !important; -} - .btn:focus { box-shadow: none !important; } @@ -69,41 +65,243 @@ border-radius: 10rem; } -.btn.primary:not(.outline):not(.filled), -.btn.success:not(.outline):not(.filled), -.btn.info:not(.outline):not(.filled), -.btn.warning:not(.outline):not(.filled), -.btn.danger:not(.outline):not(.filled) { + +input[type=button].primary:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].primary:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].primary:not(.outline):not(.gradient):not(.btn-text), +input[type=file].primary:not(.outline):not(.gradient):not(.btn-text), +button.primary:not(.outline):not(.gradient):not(.btn-text), +.btn.primary:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-accent-primary); + color: var(--sgn-text-secondary-light); +} + +input[type=button].secondary:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].secondary:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].secondary:not(.outline):not(.gradient):not(.btn-text), +input[type=file].secondary:not(.outline):not(.gradient):not(.btn-text), +button.secondary:not(.outline):not(.gradient):not(.btn-text), +.btn.secondary:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-accent-secondary); + color: var(--sgn-text-secondary-light); +} + +input[type=button].success:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].success:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].success:not(.outline):not(.gradient):not(.btn-text), +input[type=file].success:not(.outline):not(.gradient):not(.btn-text), +button.success:not(.outline):not(.gradient):not(.btn-text), +.btn.success:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-success); + color: var(--sgn-text-secondary-light); +} + +input[type=button].info:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].info:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].info:not(.outline):not(.gradient):not(.btn-text), +input[type=file].info:not(.outline):not(.gradient):not(.btn-text), +button.info:not(.outline):not(.gradient):not(.btn-text), +.btn.info:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-info); + color: var(--sgn-text-secondary-light); +} + +input[type=button].warning:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].warning:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].warning:not(.outline):not(.gradient):not(.btn-text), +input[type=file].warning:not(.outline):not(.gradient):not(.btn-text), +button.warning:not(.outline):not(.gradient):not(.btn-text), +.btn.warning:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-warning); + color: var(--sgn-text-secondary-light); +} + +input[type=button].danger:not(.outline):not(.gradient):not(.btn-text), +input[type=submit].danger:not(.outline):not(.gradient):not(.btn-text), +input[type=reset].danger:not(.outline):not(.gradient):not(.btn-text), +input[type=file].danger:not(.outline):not(.gradient):not(.btn-text), +button.danger:not(.outline):not(.gradient):not(.btn-text), +.btn.danger:not(.outline):not(.gradient):not(.btn-text) { + background-color: var(--sgn-danger); + color: var(--sgn-text-secondary-light); +} + + +input[type=button].primary:not(.outline):not(.gradient):hover, +input[type=submit].primary:not(.outline):not(.gradient):hover, +input[type=reset].primary:not(.outline):not(.gradient):hover, +input[type=file].primary:not(.outline):not(.gradient):hover, +button.primary:not(.outline):not(.gradient):hover, +.btn.primary:not(.outline):not(.gradient):hover { + background-color: var(--sgn-accent-primary-hover); + color: var(--sgn-text-secondary-light); +} + +input[type=button].secondary:not(.outline):not(.gradient):hover, +input[type=submit].secondary:not(.outline):not(.gradient):hover, +input[type=reset].secondary:not(.outline):not(.gradient):hover, +input[type=file].secondary:not(.outline):not(.gradient):hover, +button.secondary:not(.outline):not(.gradient):hover, +.btn.secondary:not(.outline):not(.gradient):hover { + background-color: var(--sgn-accent-secondary-hover); + color: var(--sgn-accent-secondary-dark); +} + +input[type=button].success:not(.outline):not(.gradient):hover, +input[type=submit].success:not(.outline):not(.gradient):hover, +input[type=reset].success:not(.outline):not(.gradient):hover, +input[type=file].success:not(.outline):not(.gradient):hover, +button.success:not(.outline):not(.gradient):hover, +.btn.success:not(.outline):not(.gradient):hover { + background-color: var(--sgn-success-light); + color: var(--sgn-text-secondary-light); +} + +input[type=button].info:not(.outline):not(.gradient):hover, +input[type=submit].info:not(.outline):not(.gradient):hover, +input[type=reset].info:not(.outline):not(.gradient):hover, +input[type=file].info:not(.outline):not(.gradient):hover, +button.info:not(.outline):not(.gradient):hover, +.btn.info:not(.outline):not(.gradient):hover { + background-color: var(--sgn-info-light); + color: var(--sgn-text-secondary-light); +} + +input[type=button].warning:not(.outline):not(.gradient):hover, +input[type=submit].warning:not(.outline):not(.gradient):hover, +input[type=reset].warning:not(.outline):not(.gradient):hover, +input[type=file].warning:not(.outline):not(.gradient):hover, +button.warning:not(.outline):not(.gradient):hover, +.btn.warning:not(.outline):not(.gradient):hover { + background-color: var(--sgn-warning-light); + color: var(--sgn-text-secondary-light); +} + +input[type=button].danger:not(.outline):not(.gradient):hover, +input[type=submit].danger:not(.outline):not(.gradient):hover, +input[type=reset].danger:not(.outline):not(.gradient):hover, +input[type=file].danger:not(.outline):not(.gradient):hover, +button.danger:not(.outline):not(.gradient):hover, +.btn.danger:not(.outline):not(.gradient):hover { + background-color: var(--sgn-danger-light); + color: var(--sgn-text-secondary-light); +} + + +input[type=button].btn-text, +input[type=submit].btn-text, +input[type=reset].btn-text, +input[type=file].btn-text, +button.btn-text, +.btn.btn-text { + background-color: transparent; + text-transform: uppercase; + /*transition: color .3s ease-in-out, background-color .3s ease-in-out;*/ + transition: color, background-color .3s ease-in-out; +} + +input[type=button].btn-text.primary, +input[type=submit].btn-text.primary, +input[type=reset].btn-text.primary, +input[type=file].btn-text.primary, +button.btn-text.primary, +.btn.btn-text.primary { + color: var(--sgn-accent-primary); +} + +input[type=button].btn-text.secondary, +input[type=submit].btn-text.secondary, +input[type=reset].btn-text.secondary, +input[type=file].btn-text.secondary, +button.btn-text.secondary, +.btn.btn-text.secondary { + color: var(--sgn-accent-secondary); +} + +input[type=button].btn-text.success, +input[type=submit].btn-text.success, +input[type=reset].btn-text.success, +input[type=file].btn-text.success, +button.btn-text.success, +.btn.btn-text.success { + color: var(--sgn-success); +} + +input[type=button].btn-text.info, +input[type=submit].btn-text.info, +input[type=reset].btn-text.info, +input[type=file].btn-text.info, +button.btn-text.info, +.btn.btn-text.info { + color: var(--sgn-info); +} + +input[type=button].btn-text.warning, +input[type=submit].btn-text.warning, +input[type=reset].btn-text.warning, +input[type=file].btn-text.warning, +button.btn-text.warning, +.btn.btn-text.warning { + color: var(--sgn-warning); +} + +input[type=button].btn-text.danger, +input[type=submit].btn-text.danger, +input[type=reset].btn-text.danger, +input[type=file].btn-text.danger, +button.btn-text.danger, +.btn.btn-text.danger { + color: var(--sgn-danger); +} + +input[type=button].btn-text:hover, +input[type=submit].btn-text:hover, +input[type=reset].btn-text:hover, +input[type=file].btn-text:hover, +button.btn-text:hover, +.btn.btn-text:hover { + color: var(--sgn-text-secondary-light); +} + + +.btn.gradient { background-size: 200% auto; border-color: transparent; color: var(--sgn-accent-primary-text); + transition: background-position .5s linear; } -.btn.primary:not(.outline):not(.filled) { +.btn.gradient.primary { background-image: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%); } -.btn.success:not(.outline):not(.filled) { +.btn.gradient.success { background-image: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%); } -.btn.info:not(.outline):not(.filled) { +.btn.gradient.info { background-image: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%); } -.btn.warning:not(.outline):not(.filled) { +.btn.gradient.warning { background-image: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%); } -.btn.danger:not(.outline):not(.filled) { +.btn.gradient.danger { background-image: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%); } +.btn.gradient:hover { + background-position: right center !important; +} + + .btn.outline { background: none; border: 3px solid; - color: var(--sgn-accent-secondary); border-color: var(--sgn-accent-secondary); + color: var(--sgn-accent-secondary); + transition: background-color, color .3s linear; } .btn.outline.primary { @@ -158,9 +356,10 @@ .btn.filled { - border: 3px solid; background-color: var(--sgn-accent-secondary); + border: 3px solid; color: var(--sgn-accent-primary-text); + transition: background-color, color .5s linear; } .btn.filled.primary { @@ -217,20 +416,6 @@ color: var(--sgn-danger); } -.btn.floating { - align-items: center; - box-shadow: 0 0 1rem 0 var(--sgn-shadow-light); - display: inline-flex; - justify-content: center; - margin: var(--margin-sm); - padding: 0; - position: relative; -} - -.btn.floating.btn-ic { - height: 3rem; - width: 3rem; -} .btn.icon { line-height: 1; @@ -275,6 +460,22 @@ } +.btn.floating { + align-items: center; + box-shadow: 0 0 1rem 0 var(--sgn-shadow-light); + display: inline-flex; + justify-content: center; + margin: var(--margin-sm); + padding: 0; + position: relative; +} + +.btn.floating.btn-ic { + height: 3rem; + width: 3rem; +} + + .btn.disabled:not(.loading), .btn[disabled]:not(.loading) { pointer-events: none; @@ -285,11 +486,12 @@ filter: contrast(40%); }*/ -.btn:not(.outline):not(.filled).loading { + +.btn.gradient.loading { animation: sgn-loading-primary 2s infinite linear; } -@keyframes sgn-loading-primary { +@keyframes sgn-btn-loading-primary { 0% { background-position: 100%; }