86 lines
2.1 KiB
SCSS
86 lines
2.1 KiB
SCSS
.p-checkbox {
|
|
border-radius: 50%;
|
|
transition: box-shadow $transitionDuration;
|
|
|
|
.p-checkbox-box {
|
|
border-color: nth($checkboxBorder, 3);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
|
|
&:not(.p-disabled):hover {
|
|
border-color: nth($checkboxBorder, 3);
|
|
}
|
|
|
|
&:not(.p-disabled).p-focus {
|
|
border-color: nth($checkboxBorder, 3);
|
|
}
|
|
|
|
&.p-highlight {
|
|
&:not(.p-disabled).p-focus {
|
|
border-color: $checkboxActiveBorderColor;
|
|
}
|
|
|
|
.p-checkbox-icon.pi-check:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 1px;
|
|
border-right: 2px solid transparent;
|
|
border-bottom: 2px solid transparent;
|
|
transform: rotate(45deg);
|
|
transform-origin: 0% 100%;
|
|
animation: checkbox-check 125ms 50ms linear forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.p-checkbox-disabled):hover {
|
|
box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
|
|
}
|
|
|
|
&:not(.p-checkbox-disabled).p-checkbox-focused {
|
|
box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
|
|
}
|
|
|
|
&.p-checkbox-checked {
|
|
&:not(.p-checkbox-disabled):hover {
|
|
box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .04);
|
|
}
|
|
|
|
&:not(.p-checkbox-disabled).p-checkbox-focused {
|
|
box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.p-input-filled {
|
|
.p-checkbox {
|
|
.p-checkbox-box {
|
|
background-color: $inputBg;
|
|
|
|
&:not(.p-disabled):hover {
|
|
background-color: $inputBg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes checkbox-check{
|
|
0%{
|
|
width: 0;
|
|
height: 0;
|
|
border-color: $checkboxIconActiveColor;
|
|
transform: translate3d(0,0,0) rotate(45deg);
|
|
}
|
|
33%{
|
|
width: 4px;
|
|
height: 0;
|
|
transform: translate3d(0,0,0) rotate(45deg);
|
|
}
|
|
100%{
|
|
width: 4px;
|
|
height: 10px;
|
|
border-color: $checkboxIconActiveColor;
|
|
transform: translate3d(0,-10px,0) rotate(45deg);
|
|
}
|
|
} |