Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-8882 - made help button smaller

Browse Source
This commit is contained in:
Valentin Mihai 2024-05-22 21:31:22 +03:00
parent e8f5bc8f2c
commit e7fca876bb
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/styles/common-base-screen.scss
View File

@ -32,6 +32,7 @@
.buttons { .buttons {
display: flex; display: flex;
margin-right: 8px; margin-right: 8px;
align-items: center;
> *:not(:last-child) { > *:not(:last-child) {
margin-right: 14px; margin-right: 14px;

15
src/lib/help-mode/help-button/help-button.component.scss
View File

@ -1,14 +1,15 @@
:host { :host {
display: flex; display: flex;
align-items: center; align-items: center;
width: 60px; width: 40px;
height: 24px;
} }
.help-mode-slide-toggle { .help-mode-slide-toggle {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 60px; width: 40px;
height: 34px; height: 24px;
cursor: pointer; cursor: pointer;
&.active, &.active,
@ -25,7 +26,7 @@
top: 50%; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 34px; height: 25px;
background-color: var(--iqser-grey-4); background-color: var(--iqser-grey-4);
border-radius: 20px; border-radius: 20px;
transform: translateY(-50%); transform: translateY(-50%);
@ -35,8 +36,8 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 4px; left: 4px;
width: 25px; width: 20px;
height: 25px; height: 20px;
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@ -60,6 +61,6 @@
} }
.toggle-input:checked + .toggle-track + .toggle-thumb { .toggle-input:checked + .toggle-track + .toggle-thumb {
left: calc(100% - 30px); left: calc(100% - 22px);
} }
} }