anthony/password-generator
1
0
Fork 0
mirror of https://github.com/anthonyaxenov/password-generator.git synced 2024-12-27 00:08:33 +00:00
Code Issues Projects Releases Wiki Activity

updated checkbox:disabled styles

Browse Source
This commit is contained in:
Sikriti Dakua 2020-03-09 14:12:32 +05:30 committed by GitHub
parent 42c8b6eae5
commit bc96e7c26f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 83 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
css/style.scss
View File

@ -23,8 +23,7 @@ button {
padding: 10px 25px;
background: #0a0e31;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35),
0 8px 12px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
font-family: "Montserrat";
h2.title {
font-size: 1.75rem;
@ -113,35 +112,35 @@ $field-border-radius: 8px;
position: relative;
width: 100%;
height: calc(#{$field-height} - 10px);
display: flex;
justify-content: center;
align-items: center;
background: $field-color;
border-radius: $field-border-radius;
margin: 30px 0;
display: flex;
justify-content: center;
align-items: center;
background: $field-color;
border-radius: $field-border-radius;
margin: 30px 0;
&::before,
&::after {
position: absolute;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
}
&::before {
content: attr(data-min);
left: 10px;
}
&::after {
content: attr(data-max);
right: 10px;
}
.length__title::after {
content: attr(data-length);
position: absolute;
right: -16px;
font-variant-numeric: tabular-nums;
color: #fff;
}
&::before,
&::after {
position: absolute;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
}
&::before {
content: attr(data-min);
left: 10px;
}
&::after {
content: attr(data-max);
right: 10px;
}
.length__title::after {
content: attr(data-length);
position: absolute;
right: -16px;
font-variant-numeric: tabular-nums;
color: #fff;
}
}
$range-handle-color: rgb(255, 255, 255) !default;
@ -203,59 +202,66 @@ $range-label-width: 60px !default;
position: relative;
width: 100%;
height: calc(#{$field-height} - 10px);
background: $field-color;
border-radius: $field-border-radius;
display: flex;
align-items: center;
padding: 10px 25px;
color: #fff;
margin-bottom: 8px;
input {
opacity: 0;
position: absolute;
+ label {
user-select: none;
&::before,
&::after {
content: "";
position: absolute;
transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
transform: translateY(-50%);
top: 50%;
right: 10px;
cursor: pointer;
}
&::before {
height: 30px;
width: 50px;
border-radius: 30px;
background: rgba(214, 214, 214, 0.434);
}
&::after {
height: 24px;
width: 24px;
border-radius: 60px;
right: 32px;
background: #fff;
}
background: $field-color;
border-radius: $field-border-radius;
display: flex;
align-items: center;
padding: 10px 25px;
color: #fff;
margin-bottom: 8px;
input {
opacity: 0;
position: absolute;
+ label {
user-select: none;
&::before,
&::after {
content: "";
position: absolute;
transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
transform: translateY(-50%);
top: 50%;
right: 10px;
cursor: pointer;
}
&:checked {
& + label:before {
background: #5d68e2;
transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}
& + label:after {
right: 14px;
}
&::before {
height: 30px;
width: 50px;
border-radius: 30px;
background: rgba(214, 214, 214, 0.434);
}
&:focus {
+ label:before {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
&::after {
height: 24px;
width: 24px;
border-radius: 60px;
right: 32px;
background: #fff;
}
}
&:checked {
& + label:before {
background: #5d68e2;
transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}
& + label:after {
right: 14px;
}
}
&:focus {
+ label:before {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
}
&:disabled{
+ label{
&:before, &:after{ cursor: not-allowed }
&:before{ background: #4f4f6a }
&:after{ background: #909090 }
}
}
}
}
}
.btn.generate {
user-select: none;