imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more checkbox styles (#7058)

Browse source 
Add a "kind" param for StyledCheckbox, allowing designers to choose different styles of checkbox as needed.  In addition to the preexisting default kind (now called Solid), there's an Outline kind with a green checkmark and a transparent fill.  This is used in the device trust view, since the default checkbox style looks too much like the green "verified" shield and it's awkward to have those next to each other.
This commit is contained in:
Faye Duxovni 2021-10-29 21:57:32 -04:00 • committed by GitHub
parent d88b8efd19
commit 71244f3b3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

43
res/css/views/elements/_StyledCheckbox.scss
View file

@ -48,22 +48,20 @@ limitations under the License.
box-sizing: border-box;
border-radius: $border-radius;
img {
.mx_Checkbox_checkmark {
display: none;
height: 100%;
width: 100%;
filter: invert(100%);
mask-image: url('$(res)/img/feather-customised/check.svg');
mask-position: center;
mask-size: 100%;
mask-repeat: no-repeat;
}
}
&:checked + label > .mx_Checkbox_background {
background: $accent-color;
border-color: $accent-color;
img {
display: block;
}
&:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
display: block;
}
& + label > *:not(.mx_Checkbox_background) {
@ -75,11 +73,6 @@ limitations under the License.
cursor: not-allowed;
}
&:checked:disabled + label > .mx_Checkbox_background {
background-color: $accent-color;
border-color: $accent-color;
}
&.focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
@ -87,3 +80,25 @@ limitations under the License.
}
}
}
.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: #ffffff;
}
&:checked + label > .mx_Checkbox_background {
background: $accent-color;
border-color: $accent-color;
}
}
.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: $accent-color;
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
border-color: $accent-color;
}
}