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

Rich text toolbar styles

services/web/public/stylesheets/app/editor.less

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

services/web/public/stylesheets/app/editor/toolbar.less

@@ -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;
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -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;

services/web/public/stylesheets/core/ol-variables.less

@@ -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;