Fix checkbox in register flow
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
fd25a23d91
commit
9d0f99c509
3 changed files with 29 additions and 3 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue