Skip to content

Commit

Permalink
Merge pull request #52 from Siumauricio/fix/#50
Browse files Browse the repository at this point in the history 
fix(inputs): add focus state
  • Loading branch information
@Siumauricio
Siumauricio authored Jan 20, 2023
2 parents 6ae7013 + 823dcc7 commit 83a382f
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 43 deletions.
4 changes: 2 additions & 2 deletions components/informational/accordion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.accordion {
@apply relative flex flex-col;
@apply relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500;
}

.accordion-group-secondary .accordion-title {
Expand Down Expand Up @@ -76,7 +76,7 @@
> .accordion
.accordion-toggle:checked
~ .accordion-title,
.accordion:focus .accordion-title,
.accordion-group.accordion-group-hover .accordion:focus .accordion-title,
.accordion-group.accordion-group-hover
> .accordion.accordion-open
.accordion-title {
Expand Down
30 changes: 15 additions & 15 deletions components/inputs/button.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Base Button */
.btn {
@apply inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl bg-gray-200 px-5 text-center text-sm font-medium transition-transform focus:outline-none active:scale-[0.97];
@apply inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl bg-gray-200 px-5 text-center text-sm font-medium transition-transform focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500 active:scale-[0.97];
}

.btn:where(
Expand All @@ -15,47 +15,47 @@

/* Primary Colors */
.btn-primary {
@apply bg-primary;
@apply bg-primary focus-visible:outline-primary;
}

.btn-secondary {
@apply bg-secondary;
@apply bg-secondary focus-visible:outline-secondary;
}

.btn-success {
@apply bg-success;
@apply bg-success focus-visible:outline-success;
}

.btn-error {
@apply bg-error;
@apply bg-error focus-visible:outline-error;
}

.btn-warning {
@apply bg-warning;
@apply bg-warning focus-visible:outline-warning;
}

/* Outline colors */
.btn-outline {
@apply border-2 border-gray-500 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:border-gray-300 hover:bg-gray-300;
@apply border-2 border-gray-500 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:border-gray-300 hover:bg-gray-300 focus-visible:outline-gray-600;
}
.btn-outline-primary {
@apply border-2 border-primary bg-transparent text-primary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-primary hover:text-white;
@apply border-2 border-primary bg-transparent text-primary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-primary hover:text-white focus-visible:outline-primary;
}

.btn-outline-secondary {
@apply border-2 border-secondary bg-transparent text-secondary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-secondary hover:text-white;
@apply border-2 border-secondary bg-transparent text-secondary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-secondary hover:text-white focus-visible:outline-secondary;
}

.btn-outline-success {
@apply border-2 border-success bg-transparent text-success transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-success hover:text-white;
@apply border-2 border-success bg-transparent text-success transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-success hover:text-white focus-visible:outline-success;
}

.btn-outline-error {
@apply border-2 border-error bg-transparent text-error transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-error hover:text-white;
@apply border-2 border-error bg-transparent text-error transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-error hover:text-white focus-visible:outline-error;
}

.btn-outline-warning {
@apply border-2 border-warning bg-transparent text-warning transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-warning hover:text-white;
@apply border-2 border-warning bg-transparent text-warning transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-warning hover:text-white focus-visible:outline-warning;
}

/* Button Sizes */
Expand All @@ -64,19 +64,19 @@
}

.btn-sm {
@apply h-[2rem] min-h-[2rem] rounded-lg px-3 text-sm;
@apply h-8 min-h-[2rem] rounded-lg px-3 text-sm;
}

.btn-md {
@apply h-10 min-h-[2.5rem] px-5 text-sm;
}

.btn-lg {
@apply h-[3rem] min-h-[3rem] px-6 text-lg;
@apply h-12 min-h-[3rem] px-6 text-lg;
}

.btn-xl {
@apply h-[4rem] min-h-[4rem] rounded-2xl px-8 text-xl;
@apply h-16 min-h-[4rem] rounded-2xl px-8 text-xl;
}

.btn:disabled {
Expand Down
17 changes: 16 additions & 1 deletion components/inputs/checkbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
--checkbox-bg-hover: rgb(var(--gray-200));
--checkline-color: rgb(var(--white));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
@apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-md border border-[var(--checkbox-border)] bg-[var(--checkbox-bg)] align-top accent-backgroundPrimary outline-none;
@apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-md border border-[var(--checkbox-border)] bg-[var(--checkbox-bg)] align-top accent-backgroundPrimary outline-none focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.checkbox::after {
Expand Down Expand Up @@ -52,26 +52,31 @@
.checkbox-primary {
--checkbox-bg-checked: rgb(var(--primary));
--checkbox-border-checked: rgb(var(--primary));
@apply focus-visible:outline-primary;
}

.checkbox-secondary {
--checkbox-bg-checked: rgb(var(--secondary));
--checkbox-border-checked: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.checkbox-success {
--checkbox-bg-checked: rgb(var(--success));
--checkbox-border-checked: rgb(var(--success));
@apply focus-visible:outline-success;
}

.checkbox-error {
--checkbox-bg-checked: rgb(var(--error));
--checkbox-border-checked: rgb(var(--error));
@apply focus-visible:outline-error;
}

.checkbox-warning {
--checkbox-bg-checked: rgb(var(--warning));
--checkbox-border-checked: rgb(var(--warning));
@apply focus-visible:outline-warning;
}

/* bordered */
Expand All @@ -81,6 +86,7 @@
--checkbox-border-checked: rgb(var(--primary));
--checkbox-border: rgb(var(--primary));
--checkbox-border-hover: rgb(var(--primary));
@apply focus-visible:outline-primary;
/* --checkbox-bg-hover: var(--backgroundPrimary); */
}

Expand All @@ -89,27 +95,31 @@
--checkbox-border-checked: rgb(var(--secondary));
--checkbox-border: rgb(var(--secondary));
--checkbox-border-hover: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.checkbox-bordered-success {
--checkbox-bg-checked: rgb(var(--success));
--checkbox-border-checked: rgb(var(--success));
--checkbox-border: rgb(var(--success));
--checkbox-border-hover: rgb(var(--success));
@apply focus-visible:outline-success;
}

.checkbox-bordered-error {
--checkbox-bg-checked: rgb(var(--error));
--checkbox-border-checked: rgb(var(--error));
--checkbox-border: rgb(var(--error));
--checkbox-border-hover: rgb(var(--error));
@apply focus-visible:outline-error;
}

.checkbox-bordered-warning {
--checkbox-bg-checked: rgb(var(--warning));
--checkbox-border-checked: rgb(var(--warning));
--checkbox-border: rgb(var(--warning));
--checkbox-border-hover: rgb(var(--warning));
@apply focus-visible:outline-warning;
}

/* Ghost */
Expand All @@ -118,30 +128,35 @@
--checkbox-bg-checked: rgb(var(--primary));
--checkbox-border-checked: rgb(var(--primary));
--checkbox-border-hover: rgb(var(--primary));
@apply focus-visible:outline-primary;
}

.checkbox-ghost-secondary {
--checkbox-bg-checked: rgb(var(--secondary));
--checkbox-border-checked: rgb(var(--secondary));
--checkbox-border-hover: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.checkbox-ghost-success {
--checkbox-bg-checked: rgb(var(--success));
--checkbox-border-checked: rgb(var(--success));
--checkbox-border-hover: rgb(var(--success));
@apply focus-visible:outline-success;
}

.checkbox-ghost-error {
--checkbox-bg-checked: rgb(var(--error));
--checkbox-border-checked: rgb(var(--error));
--checkbox-border-hover: rgb(var(--error));
@apply focus-visible:outline-error;
}

.checkbox-ghost-warning {
--checkbox-bg-checked: rgb(var(--warning));
--checkbox-border-checked: rgb(var(--warning));
--checkbox-border-hover: rgb(var(--warning));
@apply focus-visible:outline-warning;
}

/* Sizes */
Expand Down
17 changes: 16 additions & 1 deletion components/inputs/radio.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
--radio-bg-hover: rgb(var(--gray-200));
--checkline-color: rgb(var(--white));
transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
@apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-full border border-[var(--radio-border)] bg-[var(--radio-bg)] align-top accent-backgroundPrimary outline-none;
@apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-full border border-[var(--radio-border)] bg-[var(--radio-bg)] align-top accent-backgroundPrimary focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary;
}
.radio:after {
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
Expand Down Expand Up @@ -52,26 +52,31 @@
.radio-primary {
--radio-bg-checked: rgb(var(--primary));
--radio-border-checked: rgb(var(--primary));
@apply focus-visible:outline-primary;
}

.radio-secondary {
--radio-bg-checked: rgb(var(--secondary));
--radio-border-checked: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.radio-success {
--radio-bg-checked: rgb(var(--success));
--radio-border-checked: rgb(var(--success));
@apply focus-visible:outline-success;
}

.radio-error {
--radio-bg-checked: rgb(var(--error));
--radio-border-checked: rgb(var(--error));
@apply focus-visible:outline-error;
}

.radio-warning {
--radio-bg-checked: rgb(var(--warning));
--radio-border-checked: rgb(var(--warning));
@apply focus-visible:outline-warning;
}

/* bordered */
Expand All @@ -80,34 +85,39 @@
--radio-bg-checked: rgb(var(--primary));
--radio-border-checked: rgb(var(--primary));
--radio-border-hover: rgb(var(--primary));
@apply focus-visible:outline-primary;
}

.radio-bordered-secondary {
--radio-border: rgb(var(--secondary));
--radio-bg-checked: rgb(var(--secondary));
--radio-border-checked: rgb(var(--secondary));
--radio-border-hover: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.radio-bordered-success {
--radio-border: rgb(var(--success));
--radio-bg-checked: rgb(var(--success));
--radio-border-checked: rgb(var(--success));
--radio-border-hover: rgb(var(--success));
@apply focus-visible:outline-success;
}

.radio-bordered-error {
--radio-border: rgb(var(--error));
--radio-bg-checked: rgb(var(--error));
--radio-border-checked: rgb(var(--error));
--radio-border-hover: rgb(var(--error));
@apply focus-visible:outline-error;
}

.radio-bordered-warning {
--radio-border: rgb(var(--warning));
--radio-bg-checked: rgb(var(--warning));
--radio-border-checked: rgb(var(--warning));
--radio-border-hover: rgb(var(--warning));
@apply focus-visible:outline-warning;
}

/* Ghost */
Expand All @@ -116,30 +126,35 @@
--radio-bg-checked: rgb(var(--primary));
--radio-border-checked: rgb(var(--primary));
--radio-border-hover: rgb(var(--primary));
@apply focus-visible:outline-primary;
}

.radio-ghost-secondary {
--radio-bg-checked: rgb(var(--secondary));
--radio-border-checked: rgb(var(--secondary));
--radio-border-hover: rgb(var(--secondary));
@apply focus-visible:outline-secondary;
}

.radio-ghost-success {
--radio-bg-checked: rgb(var(--success));
--radio-border-checked: rgb(var(--success));
--radio-border-hover: rgb(var(--success));
@apply focus-visible:outline-success;
}

.radio-ghost-error {
--radio-bg-checked: rgb(var(--error));
--radio-border-checked: rgb(var(--error));
--radio-border-hover: rgb(var(--error));
@apply focus-visible:outline-error;
}

.radio-ghost-warning {
--radio-bg-checked: rgb(var(--warning));
--radio-border-checked: rgb(var(--warning));
--radio-border-hover: rgb(var(--warning));
@apply focus-visible:outline-warning;
}
/* Sizes */

Expand Down
Loading

1 comment on commit 83a382f

@vercel
Copy link

@vercel vercel bot commented on 83a382f Jan 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

rippleui – ./

rippleui-siumauricio.vercel.app
rippleui-git-main-siumauricio.vercel.app
rippleui.vercel.app
www.ripple-ui.com
ripple-ui.com

Please sign in to comment.