github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-30 05:25:28 -05:00
Code Issues Projects Releases Packages Wiki Activity

Style toggle switch

Browse source
This commit is contained in:
Alasdair Smith 2018-04-16 09:36:32 +01:00
parent 591f341f5f
commit a8c6ac1367
3 changed files with 68 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
services/web/public/stylesheets/app/editor/toolbar.less
View file

@ -183,3 +183,61 @@
}
}
}
.toggle-wrapper {
width: 200px;
height: 24px;
}
.toggle-switch {
position: relative;
height: 100%;
width: 100%;
background-color: @toggle-switch-bg;
border-radius: @btn-border-radius-base;
}
.toggle-switch-label {
position: relative;
display: block;
font-weight: normal;
z-index: 2;
float: left;
width: 50%;
height: 100%;
line-height: 24px;
text-align: center;
margin-bottom: 0;
cursor: pointer;
user-select: none;
transition: color 0.12s ease-out;
}
.toggle-switch-input {
position: absolute;
opacity: 0;
}
.toggle-switch-input:checked + .toggle-switch-label {
color: #fff;
font-weight: bold;
}
.toggle-switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
right: 2px;
width: calc(~"50% - 2px");
height: calc(~"100% - 4px");
background: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
}
.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
}

4
services/web/public/stylesheets/core/_common-variables.less
View file

@ -936,6 +936,10 @@
@editor-toolbar-height : 32px;
@editor-toolbar-bg : #fff;
// Toggle switch
@toggle-switch-bg : @gray-lightest;
@toggle-switch-highlight-color : @brand-primary;
// Chat
@chat-bg : transparent;
@chat-message-color : @text-color;

6
services/web/public/stylesheets/core/ol-variables.less
View file

@ -238,6 +238,12 @@
// Editor toolbar
@editor-toolbar-bg : @ol-blue-gray-5;
// Toggle switch
@toggle-switch-bg : @ol-blue-gray-1;
@toggle-switch-highlight-color : @ol-green;
@toggle-switch-radius-left : @btn-border-radius-base 0 0 @btn-border-radius-base;
@toggle-switch-radius-right : 0 @btn-border-radius-base @btn-border-radius-base 0;
// Chat
@chat-bg : @ol-blue-gray-5;
@chat-message-color : #FFF;