updated checkbox:disabled styles
Sikriti Dakua
GitHub
parent
42c8b6eae5
commit
bc96e7c26f
160
css/style.scss
160
css/style.scss
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue