github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add styling for toggler.

Browse source
This commit is contained in:
Paulo Reis 2016-11-23 14:34:40 +00:00
parent ed20f8533f
commit aba6c90524
1 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -588,6 +588,76 @@
}
}
.rp-toggle {
display: inline-block;
vertical-align: middle;
}
.rp-toggle-hidden-input {
display: none;
+ .rp-toggle-btn {
display: block;
width: 3.5em;
height: 1.75em;
position: relative;
outline: 0;
margin: 0;
font-weight: normal;
cursor: pointer;
user-select: none;
padding: 1px;
background-color: @rp-highlight-blue;
border: 1px solid #FFF;
border-radius: .875em;
transition: background .15s ease, border-color 0.15s ease;
&::before,
&::after {
display: block;
width: 50%;
height: 100%;
}
&::before {
content: '';
display: block;
position: relative;
left: 0;
background-color: #FFF;
border-radius: .875em;
transition: background-color 0.15s ease, color 0.15s ease, left 0.15s ease;
}
&::after {
content: 'OFF';
position: absolute;
top: 0;
left: 50%;
font-size: .8em;
font-weight: normal;
text-align: center;
line-height: 215%;
color: #FFF;
}
}
&:checked + .rp-toggle-btn {
background-color: @red;
border-color: #FFF;
&::before {
left: 50%;
background-color: #FFF;
}
&::after {
content: 'ON';
left: 0;
color: #FFF;
}
}
}
.ace-editor-wrapper {
.track-changes-marker-callout {
border-radius: 0;