From d5adf7855ed6ad535ef221c61b4cd1cc64039f3e Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Fri, 18 Dec 2020 14:57:24 +0100
Subject: [PATCH] [US TRTL-622] rework toggle
---
.../slide-toggle/slide-toggle.component.html | 4 +-
.../slide-toggle/slide-toggle.component.scss | 44 +++++++------------
2 files changed, 18 insertions(+), 30 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.html b/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.html
index 274458d0d..e6659a1d5 100644
--- a/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.html
@@ -12,9 +12,9 @@
(blur)="onTouched()"
>
<div class="slide-toggle-inner">
- <div class="slide-toggle-label">{{'SLIDE-TOGGLE.YES' | translate}}</div>
+ <div class="slide-toggle-label"></div>
<div class="slide-toggle-thumb"></div>
- <div class="slide-toggle-label">{{'SLIDE-TOGGLE.NO' | translate}}</div>
+ <div class="slide-toggle-label"></div>
</div>
</div>
<span><ng-content></ng-content></span>
diff --git a/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss b/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss
index be57851d6..c6f21507e 100644
--- a/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/slide-toggle/slide-toggle.component.scss
@@ -18,59 +18,47 @@ label {
}
.slide-toggle {
- width: 70px;
- min-width: 70px;
- height: 30px;
+ width: 36px;
+ height: 12px;
margin-right: 18px;
- border-radius: 15px;
- overflow: hidden;
+ border-radius: 8px;
display: flex;
align-items: center;
- background-color: #8f8f8f;
+ background-color: var(--vitamui-grey);
transition: background-color 100ms ease-in-out, box-shadow 200ms ease-out;
&.slide-toggle-on:not(.slide-toggle-disabled) {
- background-color: var(--vitamui-primary);
- &:hover {
- background-color: var(--vitamui-primary-700);
- }
+ background-color: var(--vitamui-secondary);
}
&.slide-toggle-off:not(.slide-toggle-disabled) {
background-color: var(--vitamui-grey-800);
- &:hover {
- background-color: var(--vitamui-grey-800);
- }
}
.slide-toggle-inner {
display: flex;
.slide-toggle-label {
- overflow: hidden;
- width: 44px;
+ width: 14px;
line-height: 22px;
- text-align: center;
- font-size: 14px;
- font-weight: 500;
- color: $white;
transition: margin-left 100ms ease-in-out;
&:first-child {
- padding-left: 4px;
+ padding-left: 0px;
}
&:last-child {
- padding-right: 4px;
+ padding-right: 0px;
}
}
.slide-toggle-thumb {
- width: 22px;
- height: 22px;
- border-radius: 11px;
- background-color: $white;
- box-shadow: 0 0 10px 0 rgba(115, 115, 115, 0.5);
+ width: 24px;
+ height: 24px;
+ border-radius: 12px;
+ background-color: var(--vitamui-primary);
+ border: 2px solid white;
+ box-shadow: 0px 2px 4px rgba(46, 53, 69, 0.15);
cursor: grab;
}
}
@@ -78,13 +66,13 @@ label {
&:not(.slide-toggle-on) {
.slide-toggle-label:first-child {
- margin-left: -40px;
+ margin-left: -16px;
}
}
&.slide-toggle-disabled {
cursor: no-drop;
- background-color: var(--vitamui-grey-600);
+ background-color: var(--vitamui-grey);
}
}
--
GitLab