Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update radio and checkbox styles #4442

Merged
merged 5 commits into from
May 20, 2023
Merged

Update radio and checkbox styles #4442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
230536e
split radio and checkbox styles into two separate files
magicznyleszek May 16, 2023
3075090
add clearable option to radio
magicznyleszek May 16, 2023
e21e8db
update radio and checkbox styles
magicznyleszek May 16, 2023
53853c6
move bem definitions inside radio and checkbox components
magicznyleszek May 17, 2023
c70e951
Update checkbox.scss
magicznyleszek May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 0 additions & 10 deletions jsapp/js/bemComponents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,22 +280,12 @@ bem.TextBox__input = makeBem(bem.TextBox, 'input', 'input');
bem.TextBox__description = makeBem(bem.TextBox, 'description');
bem.TextBox__error = makeBem(bem.TextBox, 'error');

bem.Checkbox = makeBem(null, 'checkbox');
bem.Checkbox__wrapper = makeBem(bem.Checkbox, 'wrapper', 'label');
bem.Checkbox__input = makeBem(bem.Checkbox, 'input', 'input');
bem.Checkbox__label = makeBem(bem.Checkbox, 'label', 'span');

bem.ToggleSwitch = makeBem(null, 'toggle-switch');
bem.ToggleSwitch__wrapper = makeBem(bem.ToggleSwitch, 'wrapper', 'label');
bem.ToggleSwitch__input = makeBem(bem.ToggleSwitch, 'input', 'input');
bem.ToggleSwitch__slider = makeBem(bem.ToggleSwitch, 'slider', 'span');
bem.ToggleSwitch__label = makeBem(bem.ToggleSwitch, 'label', 'span');

bem.Radio = makeBem(null, 'radio');
bem.Radio__row = makeBem(bem.Radio, 'row', 'label');
bem.Radio__input = makeBem(bem.Radio, 'input', 'input');
bem.Radio__label = makeBem(bem.Radio, 'label', 'span');

bem.PasswordStrength = makeBem(null, 'password-strength');
bem.PasswordStrength__title = makeBem(bem.PasswordStrength, 'title');
bem.PasswordStrength__bar = makeBem(bem.PasswordStrength, 'bar');
Expand Down
124 changes: 0 additions & 124 deletions jsapp/js/components/common/checkbox-and-radio.scss
View file
Open in desktop

This file was deleted.

107 changes: 107 additions & 0 deletions jsapp/js/components/common/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
@use '~kobo-common/src/styles/colors';
@use 'scss/_variables';
@use 'scss/sizes';

// Note: we can't change this into a CSS Module, because some Data Table and
// `utils.ts` code relies on `.checkbox__input` being available.

.checkbox {
.checkbox__wrapper {
padding: 0;
cursor: pointer;
display: block;
}

// Disabled state
&.checkbox--disabled {
pointer-events: none;

.checkbox__wrapper {
cursor: default;
}

.checkbox__input,
.checkbox__label {
opacity: 0.5;
}

.checkbox__input:checked {
color: colors.$kobo-white;
border-color: colors.$kobo-gray-40;
background-color: colors.$kobo-gray-40;
}
}

// Hover states
.checkbox__wrapper:hover {
// Unchecked
.checkbox__input:not(:checked) {
border-color: colors.$kobo-gray-40;
background-color: colors.$kobo-light-blue;
}

// Checked
.checkbox__input:checked {
color: colors.$kobo-white;
border-color: colors.$kobo-alt-blue;
background-color: colors.$kobo-alt-blue;
}
}

.checkbox__input,
.checkbox__label {
display: inline-block;
vertical-align: top;
}

.checkbox__label {
max-width: calc(100% - sizes.$x32);
color: colors.$kobo-gray-24;
font-size: variables.$base-font-size;
}

.checkbox__input + .checkbox__label {
margin-left: sizes.$x6;
}

.checkbox__input {
border-radius: sizes.$x4;
appearance: none;
position: relative;
margin: 0;
color: colors.$kobo-gray-65;
border: sizes.$x1 solid colors.$kobo-gray-65;
background-color: colors.$kobo-white;
width: sizes.$x20;
height: sizes.$x20;
outline: 0;
cursor: pointer;
overflow: hidden; // HACK FIX to not cause scrollbar when near the edge

// This is the CSS checkbox :)
&::after {
display: block;
position: absolute;
opacity: 0;
content: '';
top: calc(50% - sizes.$x5);
left: calc(50% - sizes.$x6);
transform: rotate(-45deg);
border: sizes.$x3 solid currentColor;
border-top: none;
border-right: none;
width: sizes.$x10;
height: sizes.$x4;
background-color: transparent;
border-radius: sizes.$x1;
}

&:checked {
color: colors.$kobo-white;
border-color: colors.$kobo-blue;
background-color: colors.$kobo-blue;

&::after {opacity: 1;}
}
}
}
9 changes: 7 additions & 2 deletions jsapp/js/components/common/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import React from 'react';
import autoBind from 'react-autobind';
import bem from 'js/bem';
import './checkbox-and-radio.scss';
import bem, {makeBem} from 'js/bem';
import './checkbox.scss';

bem.Checkbox = makeBem(null, 'checkbox');
bem.Checkbox__wrapper = makeBem(bem.Checkbox, 'wrapper', 'label');
bem.Checkbox__input = makeBem(bem.Checkbox, 'input', 'input');
bem.Checkbox__label = makeBem(bem.Checkbox, 'label', 'span');

interface CheckboxProps {
checked: boolean;
Expand Down
105 changes: 105 additions & 0 deletions jsapp/js/components/common/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
@use '~kobo-common/src/styles/colors';
@use 'scss/_variables';
@use 'scss/sizes';

// Note: we can't change this into a CSS Module, because some Form Builder code
// relies on `.radio__input` being available.

.radio {
.radio__row {
padding: sizes.$x4 0;
cursor: pointer;
display: block;

&.radio__row--title {
cursor: default;
}
}

// Disabled state
&.radio--disabled {
.radio__row {
cursor: default;
}

.radio__input,
.radio__label {
pointer-events: none;
opacity: 0.5;
}

.radio__input:checked {
color: colors.$kobo-white;
border-color: colors.$kobo-gray-40;
background-color: colors.$kobo-gray-40;
}
}

// Hover states
.radio__row:hover {
// Unchecked
.radio__input:not(:checked) {
border-color: colors.$kobo-gray-40;
background-color: colors.$kobo-light-blue;
}

// Checked
.radio__input:checked {
border-color: colors.$kobo-alt-blue;

&::after {
background-color: colors.$kobo-alt-blue;
}
}
}

.radio__input,
.radio__label {
display: inline-block;
vertical-align: top;
}

.radio__label {
max-width: calc(100% - sizes.$x32);
color: colors.$kobo-gray-24;
font-size: variables.$base-font-size;
}

.radio__input + .radio__label {
margin-left: sizes.$x6;
}

.radio__input {
border-radius: 50%;
appearance: none;
position: relative;
margin: 0;
color: colors.$kobo-gray-65;
border: sizes.$x1 solid colors.$kobo-gray-65;
background-color: colors.$kobo-white;
width: sizes.$x20;
height: sizes.$x20;
outline: 0;
cursor: pointer;
overflow: hidden; // HACK FIX to not cause scrollbar when near the edge

&::after {
display: block;
position: absolute;
opacity: 0;
content: '';
top: sizes.$x4;
left: sizes.$x4;
border-radius: 50%;
width: sizes.$x10;
height: sizes.$x10;
background-color: colors.$kobo-blue;
}

&:checked {
border-color: colors.$kobo-blue;

&::after { opacity: 1; }
}
}
}