Fix checkbox in register flow

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-11-22 14:37:14 +05:30
parent fd25a23d91
commit 9d0f99c509
3 changed files with 29 additions and 3 deletions

View file

@ -10,7 +10,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
> - Tweet about it (tag @cinnyapp) > - Tweet about it (tag @cinnyapp)
> - Refer this project in your project's readme > - Refer this project in your project's readme
> - Mention the project at local meetups and tell your friends/colleagues > - Mention the project at local meetups and tell your friends/colleagues
> - [Donate to us](https://liberapay.com/ajbura/donate) > - [Donate to us](https://cinny.in/#sponsor)
<!-- omit in toc --> <!-- omit in toc -->
## Table of Contents ## Table of Contents

View file

@ -605,7 +605,7 @@ function Terms({ url, onSubmit }) {
<div style={{ marginBottom: 'var(--sp-normal)' }} /> <div style={{ marginBottom: 'var(--sp-normal)' }} />
<Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text> <Text variant="b1">In order to complete registration, you need to agree to the terms and conditions.</Text>
<div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}> <div style={{ display: 'flex', alignItems: 'center', margin: 'var(--sp-normal) 0' }}>
<input id="termsCheckbox" type="checkbox" required /> <input style={{ marginRight: '8px' }} id="termsCheckbox" type="checkbox" required />
<Text variant="b1"> <Text variant="b1">
{'I accept '} {'I accept '}
<a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a> <a style={{ cursor: 'pointer' }} href={url} rel="noreferrer" target="_blank">Terms and Conditions</a>

View file

@ -296,11 +296,37 @@ input[type],
input[type=text], input[type=text],
input[type=username], input[type=username],
input[type=password], input[type=password],
input[type=email] { input[type=email],
input[type=checkbox] {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
input[type=checkbox] {
margin: 0;
padding: 0;
width: 18px;
height: 18px;
border-radius: 4px;
box-shadow: var(--bs-primary-border);
background-color: var(--bg-surface);
cursor: pointer;
@extend .flex--center;
&:checked {
background-color: var(--bg-primary);
&::before {
content: "";
display: inline-block;
width: 12px;
height: 6px;
border: 6px solid white;
border-width: 0 0 3px 3px;
transform: rotateZ(-45deg) translate(1px, -1px);
}
}
}
textarea { textarea {
color: inherit; color: inherit;
word-spacing: inherit; word-spacing: inherit;