Skip to content
This repository has been archived by the owner on Dec 5, 2023. It is now read-only.

Commit

Permalink
Add temporary design of focused checkboxes
Browse files Browse the repository at this point in the history
This makes it easier to test keyboard navigation.

The border radius around elements is removed to create a rectangular
focuswhich resembles other boxes in the design. It was not used
anywhere else.

We should talk to the designers to determine a proper design here.
  • Loading branch information
kasperg committed Jun 3, 2022
1 parent b2b198a commit abe82c0
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/stories/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
user-select: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
Expand Down Expand Up @@ -66,6 +65,13 @@
}
}

.checkbox__input:focus + .checkbox__label {
// TODO: Determine a proper design for elements in focus.
// This is a temporary solution to make it easier to test keyboard navigation.
outline: solid 1px $c-text-secondary-gray;
outline-offset: 0;
}

@keyframes zoom-in-out {
50% {
transform: scale(0.9);
Expand Down

0 comments on commit abe82c0

Please sign in to comment.