github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-14 23:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #618 from sharelatex/as-toolbar-btns

Browse source 
Rich text toolbar styles
This commit is contained in:
Alasdair Smith 2018-06-08 10:09:27 +01:00 • committed by GitHub
commit c53ff0fa84
4 changed files with 103 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/public/stylesheets/app/editor.less
View file

@ -92,6 +92,7 @@
.toolbar-editor {
height: @editor-toolbar-height;
background-color: @editor-toolbar-bg;
overflow: hidden;
}
.loading-screen {

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

@ -184,8 +184,12 @@
}
}
/**************************************
Toggle Switch
***************************************/
.toggle-wrapper {
width: 200px;
min-width: 200px;
height: 24px;
}
@ -241,3 +245,88 @@
transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
}
/**************************************
Formatting buttons
***************************************/
.formatting-buttons {
width: 100%;
overflow: hidden;
}
.formatting-buttons-wrapper {
display: flex;
}
.formatting-btn {
color: @formatting-btn-color;
background-color: @formatting-btn-bg;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
border: none;
border-left: 1px solid @formatting-btn-border;
border-radius: 0;
&:hover {
color: @formatting-btn-color;
}
}
.formatting-btn--icon {
min-width: 32px;
width: 32px;
}
.formatting-btn--icon:last-of-type {
border-right: 1px solid @formatting-btn-border;
}
.formatting-btn--more {
padding-left: 9px;
padding-right: 9px;
.caret {
margin-top: 1px;
}
}
.formatting-icon {
font-style: normal;
line-height: 1.5;
}
.formatting-icon--small {
font-size: small;
line-height: 1.9;
}
.formatting-icon--serif {
font-family: @font-family-serif;
}
.formatting-more {
margin-left: auto;
}
.formatting-menu {
min-width: auto;
max-width: 130px;
background-color: @formatting-menu-bg;
}
.formatting-menu-item {
float: left;
}
.formatting-menu-item > .formatting-btn {
border-right: none;
}
// Disable border on left-most icon in menu
.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
border-left: none;
}

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

@ -941,6 +941,12 @@
@toggle-switch-bg : @gray-lightest;
@toggle-switch-highlight-color : @brand-primary;
// Formatting buttons
@formatting-btn-color : @btn-default-color;
@formatting-btn-bg : @btn-default-bg;
@formatting-btn-border : @btn-default-border;
@formatting-menu-bg : @btn-default-bg;
// Chat
@chat-bg : transparent;
@chat-message-color : @text-color;

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

@ -244,6 +244,12 @@
@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;
// Formatting buttons
@formatting-btn-color : #FFF;
@formatting-btn-bg : @ol-blue-gray-5;
@formatting-btn-border : @ol-blue-gray-4;
@formatting-menu-bg : @ol-blue-gray-5;
// Chat
@chat-bg : @ol-blue-gray-5;
@chat-message-color : #FFF;