Skip to content

Commit

Permalink
Merge pull request #60
Browse files Browse the repository at this point in the history 
FIXED: Component: Button: Some minor bug fixes.
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 authored Jan 2, 2023
2 parents c3404c9 + cfe2b85 commit f1bea3e
Showing 1 changed file with 244 additions and 42 deletions.
286 changes: 244 additions & 42 deletions src/css/components/buttons.css
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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 {
Expand All @@ -51,10 +51,6 @@
width: 100%;
}

.btn:hover {
background-position: right center !important;
}

.btn:focus {
box-shadow: none !important;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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%;
}
Expand Down

0 comments on commit f1bea3e

Please sign in to comment.