Boris
/
multi-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit switch

master
Boris Voropaev 2023-11-02 16:46:53 +03:00
parent d22d5d6557
commit a161fd5220
3 changed files with 136 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
projects/app-root/src/assets/css/forms.scss
View File

@ -76,3 +76,68 @@ input, select, textarea {
}
}
}
switch{
$bull: 12px;
$offset: 2px;
$track: 14px;
div{
border: 1px solid var(--second);
display: inline-flex;
border-radius: $bull + 3px;
div{
width: $bull;
height: $bull;
background-color: var(--second);
border-radius: 50%;
margin: $offset $track $offset $offset;
border: none;
}
}
div.on{
border: 1px solid var(--prime);
background-color: var(--prime);
div{
margin: $offset $offset $offset $track;
background-color: var(--white);
border: none;
animation: switch-on 0.1s;
}
}
div.off{
div{
animation: switch-off 0.1s;
}
}
@keyframes switch-on {
0% {margin: $offset $track $offset $offset;}
100% {margin: $offset $offset $offset $track;}
}
@keyframes switch-off {
100% {margin: $offset $track $offset $offset;}
0% {margin: $offset $offset $offset $track;}
}
}
.switch-host:hover switch{
div.on{
background-color: var(--active);
div{
background-color: var(--white);
border: none;
}
}
div{
border-color: var(--active);
div{
background-color: var(--active);
border: none;
}
}
}

71
projects/app-vniigaz/src/assets/css/forms.scss
View File

@ -138,3 +138,74 @@ input, select, textarea {
.checkbox:disabled:not(:checked)+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
}
switch{
$bull: 18px;
$offset: 2px;
$track: 20px;
>div{
border: 1px solid var(--second);
display: inline-flex;
border-radius: $bull + 3px;
div{
width: $bull;
height: $bull;
background-color: var(--second-dis);
border-radius: 50%;
margin: $offset $track $offset $offset;
border: none;
}
}
>div.on{
border: 1px solid var(--prime);
background-color: var(--prime);
div{
margin: $offset $offset $offset $track;
background-color: var(--white);
border: none;
animation: switch-on 0.1s;
}
}
>div.off{
div{
animation: switch-off 0.1s;
}
}
@keyframes switch-on {
0% {margin: $offset $track $offset $offset;}
100% {margin: $offset $offset $offset $track;}
}
@keyframes switch-off {
100% {margin: $offset $track $offset $offset;}
0% {margin: $offset $offset $offset $track;}
}
}
.switch-host{
cursor: pointer;
}
.switch-host:hover{
color: var(--prime-act);
switch{
>div.on{
background-color: var(--prime-act);
div{
background-color: var(--white);
border: none;
}
}
>div{
border-color: var(--prime-act);
div{
background-color: var(--prime-act);
border: none;
}
}
}
}

58
projects/app/_modules/viget/switch/switch.component.scss
View File

@ -1,58 +0,0 @@
$bull: 12px;
$offset: 2px;
$track: 14px;
div{
border: 1px solid var(--second);
display: inline-flex;
border-radius: $bull + 3px;
div{
width: $bull;
height: $bull;
background-color: var(--second);
border-radius: 50%;
margin: $offset $track $offset $offset;
border: none;
}
}
div.on{
border: 1px solid var(--prime);
background-color: var(--prime);
div{
margin: $offset $offset $offset $track;
background-color: var(--white);
border: none;
animation: switch-on 0.1s;
}
}
div.off{
div{
animation: switch-off 0.1s;
}
}
:host-context(.switch-host:hover){
div.on{
background-color: var(--active);
div{
background-color: var(--white);
border: none;
}
}
div{
border-color: var(--active);
div{
background-color: var(--active);
border: none;
}
}
}
@keyframes switch-on {
0% {margin: $offset $track $offset $offset;}
100% {margin: $offset $offset $offset $track;}
}
@keyframes switch-off {
100% {margin: $offset $track $offset $offset;}
0% {margin: $offset $offset $offset $track;}
}