70 lines
1.2 KiB
Plaintext
70 lines
1.2 KiB
Plaintext
@import (reference) '../../design/index.less';
|
|
|
|
.strength-meter {
|
|
position: relative;
|
|
|
|
&-bar {
|
|
position: relative;
|
|
height: 4px;
|
|
margin: 10px auto 6px;
|
|
background: @disabled-color;
|
|
border-radius: 3px;
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
z-index: 10;
|
|
display: block;
|
|
width: 20%;
|
|
height: inherit;
|
|
background: transparent;
|
|
border-color: @white;
|
|
border-style: solid;
|
|
border-width: 0 5px 0 5px;
|
|
content: '';
|
|
}
|
|
|
|
&::before {
|
|
left: 20%;
|
|
}
|
|
|
|
&::after {
|
|
right: 20%;
|
|
}
|
|
|
|
&__fill {
|
|
position: absolute;
|
|
width: 0;
|
|
height: inherit;
|
|
background: transparent;
|
|
border-radius: inherit;
|
|
transition: width 0.5s ease-in-out, background 0.25s;
|
|
|
|
&[data-score='0'] {
|
|
width: 20%;
|
|
background: darken(@error-color, 10%);
|
|
}
|
|
|
|
&[data-score='1'] {
|
|
width: 40%;
|
|
background: @error-color;
|
|
}
|
|
|
|
&[data-score='2'] {
|
|
width: 60%;
|
|
background: @warning-color;
|
|
}
|
|
|
|
&[data-score='3'] {
|
|
width: 80%;
|
|
background: fade(@success-color, 50%);
|
|
}
|
|
|
|
&[data-score='4'] {
|
|
width: 100%;
|
|
background: @success-color;
|
|
}
|
|
}
|
|
}
|
|
}
|