Skip to content

Commit

Permalink
FIXED: Component: Buttons: CSS pseudo-selector for DOM interaction st…
Browse files Browse the repository at this point in the history 
…ate ':active' were missing.
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 committed Feb 14, 2023
1 parent 9bd233b commit 9c604e6
Showing 1 changed file with 118 additions and 9 deletions.
127 changes: 118 additions & 9 deletions src/css/components/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,14 +137,34 @@ button.primary:not(.outline):not(.gradient):hover,
color: var(--sgn-text-secondary-light);
}

input[type=button].primary:not(.outline):not(.gradient):active,
input[type=submit].primary:not(.outline):not(.gradient):active,
input[type=reset].primary:not(.outline):not(.gradient):active,
input[type=file].primary:not(.outline):not(.gradient):active,
button.primary:not(.outline):not(.gradient):active,
.btn.primary:not(.outline):not(.gradient):active {
background-color: var(--sgn-accent-primary-active);
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);
color: var(--sgn-text-secondary-light);
}

input[type=button].secondary:not(.outline):not(.gradient):active,
input[type=submit].secondary:not(.outline):not(.gradient):active,
input[type=reset].secondary:not(.outline):not(.gradient):active,
input[type=file].secondary:not(.outline):not(.gradient):active,
button.secondary:not(.outline):not(.gradient):active,
.btn.secondary:not(.outline):not(.gradient):active {
background-color: var(--sgn-accent-secondary-active);
color: var(--sgn-text-secondary-light);
}

input[type=button].success:not(.outline):not(.gradient):hover,
Expand All @@ -153,7 +173,17 @@ 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);
background-color: var(--sgn-success-dark);
color: var(--sgn-text-secondary-light);
}

input[type=button].success:not(.outline):not(.gradient):active,
input[type=submit].success:not(.outline):not(.gradient):active,
input[type=reset].success:not(.outline):not(.gradient):active,
input[type=file].success:not(.outline):not(.gradient):active,
button.success:not(.outline):not(.gradient):active,
.btn.success:not(.outline):not(.gradient):active {
background-color: var(--sgn-success-darker);
color: var(--sgn-text-secondary-light);
}

Expand All @@ -163,7 +193,17 @@ 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);
background-color: var(--sgn-info-dark);
color: var(--sgn-text-secondary-light);
}

input[type=button].info:not(.outline):not(.gradient):active,
input[type=submit].info:not(.outline):not(.gradient):active,
input[type=reset].info:not(.outline):not(.gradient):active,
input[type=file].info:not(.outline):not(.gradient):active,
button.info:not(.outline):not(.gradient):active,
.btn.info:not(.outline):not(.gradient):active {
background-color: var(--sgn-info-darker);
color: var(--sgn-text-secondary-light);
}

Expand All @@ -173,7 +213,17 @@ 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);
background-color: var(--sgn-warning-dark);
color: var(--sgn-text-secondary-light);
}

input[type=button].warning:not(.outline):not(.gradient):active,
input[type=submit].warning:not(.outline):not(.gradient):active,
input[type=reset].warning:not(.outline):not(.gradient):active,
input[type=file].warning:not(.outline):not(.gradient):active,
button.warning:not(.outline):not(.gradient):active,
.btn.warning:not(.outline):not(.gradient):active {
background-color: var(--sgn-warning-darker);
color: var(--sgn-text-secondary-light);
}

Expand All @@ -183,7 +233,17 @@ 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);
background-color: var(--sgn-danger-dark);
color: var(--sgn-text-secondary-light);
}

input[type=button].danger:not(.outline):not(.gradient):active,
input[type=submit].danger:not(.outline):not(.gradient):active,
input[type=reset].danger:not(.outline):not(.gradient):active,
input[type=file].danger:not(.outline):not(.gradient):active,
button.danger:not(.outline):not(.gradient):active,
.btn.danger:not(.outline):not(.gradient):active {
background-color: var(--sgn-danger-darker);
color: var(--sgn-text-secondary-light);
}

Expand Down Expand Up @@ -276,19 +336,19 @@ button.btn-text:hover,
}

.btn.gradient.success {
background-image: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%);
background-image: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-dark) 50%, var(--sgn-success) 100%);
}

.btn.gradient.info {
background-image: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
background-image: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-dark) 50%, var(--sgn-info) 100%);
}

.btn.gradient.warning {
background-image: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%);
background-image: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-dark) 50%, var(--sgn-warning) 100%);
}

.btn.gradient.danger {
background-image: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);
background-image: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-dark) 50%, var(--sgn-danger) 100%);
}

.btn.gradient:hover {
Expand Down Expand Up @@ -354,6 +414,31 @@ button.btn-text:hover,
background-color: var(--sgn-danger);
}

.btn.outline:active {
color: var(--sgn-accent-primary-text);
background-color: var(--sgn-accent-secondary-active);
}

.btn.outline.primary:active {
background-color: var(--sgn-accent-primary-active);
}

.btn.outline.success:active {
background-color: var(--sgn-success-darker);
}

.btn.outline.info:active {
background-color: var(--sgn-info-darker);
}

.btn.outline.warning:active {
background-color: var(--sgn-warning-darker);
}

.btn.outline.danger:active {
background-color: var(--sgn-danger-darker);
}


.btn.filled {
background-color: var(--sgn-accent-secondary);
Expand Down Expand Up @@ -416,6 +501,30 @@ button.btn-text:hover,
color: var(--sgn-danger);
}

.btn.filled:active {
background-color: transparent;
}

.btn.filled.primary:active {
color: var(--sgn-accent-primary-active);
}

.btn.filled.success:active {
color: var(--sgn-success-darker);
}

.btn.filled.info:active {
color: var(--sgn-info-darker);
}

.btn.filled.warning:active {
color: var(--sgn-warning-darker);
}

.btn.filled.danger:active {
color: var(--sgn-danger-darker);
}


.btn.icon {
line-height: 1;
Expand Down

0 comments on commit 9c604e6

Please sign in to comment.