github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #10067 from overleaf/ds-design-segmented-control

Browse source 
Changed the css for segmented toggle switch animation

GitOrigin-RevId: e3c0dc496be9fedea5d9463f57b9844991f0c0eb
This commit is contained in:
Tim Down 2022-11-01 10:48:17 +00:00 committed by Copybot
parent cbc3aef728
commit cd60d6719a
1 changed files with 8 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
services/web/frontend/stylesheets/app/editor/toolbar.less
View file

@ -245,6 +245,8 @@
margin-right: 5px;
border-radius: @btn-border-radius-base;
overflow: hidden;
background-color: @toggle-switch-bg;
padding: 2px;
}
.toggle-switch-label {
@ -266,16 +268,12 @@
height: 100%;
line-height: 20px; // parent height minus border
width: 100%;
padding: 0 15px;
background: linear-gradient(
to right,
@toggle-switch-bg 50%,
@toggle-switch-highlight-color 50%
);
padding: 0 8px;
background-size: 200% 100%;
background-position: 0 0;
transition: background-position 0.12s ease-out;
font-size: 14px;
font-weight: bold;
}
}
@ -290,7 +288,9 @@
background-position: -100% 0;
}
color: @white;
font-weight: bold;
background-color: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base;
box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
}
.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
@ -308,10 +308,8 @@
}
.toggle-switch-label span {
padding: 1px 6px;
background: none;
transition: background 0.12s ease-out;
border-right: 1px solid @ol-blue-gray-2;
}
.toggle-switch-label:first-of-type span {
@ -322,14 +320,6 @@
padding-right: 8px;
border-right: none;
}
.toggle-switch-input + .toggle-switch-label {
background: @toggle-switch-bg;
}
.toggle-switch-input:checked + .toggle-switch-label {
background: @toggle-switch-highlight-color;
}
}
/**************************************