Button styles

2 files changed, 182 insertions, 37 deletions

diff --git a/src/views/templates/blank/template.css b/src/views/templates/blank/template.css
index d9b3115..5b31436 100644
--- a/src/views/templates/blank/template.css
+++ b/src/views/templates/blank/template.css
@@ -1,7 +1,139 @@
 #toolbar-container {
-    display: inline-block;
-    border: none;
+  display: inline-block;
+  border: none;
 }
 .ql-editing {
-    left: 0px !important;
+  left: 0px !important;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #444 !important;
+  border: none !important;
+  outline: none !important;
+}
+.edit-button {
+  display: inline-block !important;
+  /* padding: 2px 8px !important; */
+  margin-bottom: 0 !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  text-align: center !important;
+  white-space: nowrap !important;
+  vertical-align: middle !important;
+  cursor: default !important;
+  background-image: none !important;
+  border: 1px solid transparent !important;
+  border-radius: 4px !important;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) !important;
+  -webkit-app-region: no-drag !important;
+  font-family: SFProtext !important;
+}
+
+.editor-button {
+  color: #333 !important;
+  border-top-color: #c2c0c2 !important;
+  border-right-color: #c2c0c2 !important;
+  border-bottom-color: #a19fa1 !important;
+  border-left-color: #c2c0c2 !important;
+  background-color: #fcfcfc !important;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #fcfcfc),
+    color-stop(100%, #f1f1f1)
+  ) !important;
+  background-image: -webkit-linear-gradient(
+    top,
+    #fcfcfc 0%,
+    #f1f1f1 100%
+  ) !important;
+  background-image: linear-gradient(
+    to bottom,
+    #fcfcfc 0%,
+    #f1f1f1 100%
+  ) !important;
+}
+
+.editor-button:active {
+  background-color: #ddd !important;
+  background-image: none !important;
+}
+
+.editor-button-group {
+  position: relative !important;
+  display: inline-block !important;
+  vertical-align: middle !important;
+  -webkit-app-region: no-drag !important;
+}
+
+.editor-button-group .edit-button {
+  position: relative !important;
+  float: left !important;
+}
+
+.editor-button-group .edit-button:focus,
+.editor-button-group .edit-button:active {
+  z-index: 2 !important;
+}
+
+.editor-button-group .edit-button.edit-button-active {
+  z-index: 3 !important;
+}
+
+.editor-button-group .edit-button + .edit-button,
+.editor-button-group .edit-button + .editor-button-group,
+.editor-button-group .editor-button-group + .edit-button,
+.editor-button-group .editor-button-group + .editor-button-group {
+  margin-left: -1px !important;
+}
+
+.editor-button-group > .edit-button:last-child {
+  border-top-right-radius: 5px !important;
+  border-bottom-right-radius: 5px !important;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+
+.editor-button-group > .edit-button:first-child {
+  border-top-left-radius: 5px !important;
+  border-bottom-left-radius: 5px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+.editor-button-group > .edit-button:not(:first-child):not(:last-child) {
+  border-radius: 0 !important;
+}
+
+.editor-button-group .edit-button + .edit-button {
+  border-left: 1px solid #c2c0c2 !important;
+}
+
+.editor-button-group .edit-button + .edit-button.edit-button-active {
+  border-left: 0 !important;
+}
+
+.editor-button-group .edit-button-active {
+  color: #fff !important;
+  border: 1px solid transparent !important;
+  background-color: #6d6c6d !important;
+  background-image: none !important;
+}
+select.ql-color {
+    display: none !important;
+}
+select.ql-background {
+    display: none !important;
+}
+select.ql-align {
+    display: none !important;
+}
+select.ql-font {
+    display: none !important;
+}
+select.ql-size {
+    display: none !important;
+}
+.ql-snow .ql-picker-label {
+    padding-left: 0px !important;
 }
\ No newline at end of file
diff --git a/src/views/templates/blank/template.html b/src/views/templates/blank/template.html
index a35a0f4..e04c5de 100644
--- a/src/views/templates/blank/template.html
+++ b/src/views/templates/blank/template.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="../../../nativekit/css/all.css">
     <link rel="stylesheet" href="template.css">
     <link rel="stylesheet" href="../../../Quill/quill.snow.css">
+    <link rel="stylesheet" href="../../../nativekit/css/all.css">
 </head>
 
 <body>
@@ -20,49 +20,58 @@
                     <i class="icon nk-plus"></i>
                 </button>
 
+                <div class="button-group">
+                    <button class="button button-default">
+                        <i class="icon nk-ccw"></i>
+                    </button>
+                    <button class="button button-default">
+                        <i class="icon nk-cw"></i>
+                    </button>
+                </div>
+
                 <div id="toolbar-container">
-                    <span class="ql-formats">
-                        <select class="ql-font"></select>
-                        <select class="ql-size"></select>
+                    <span class="ql-formats editor-button-group">
+                        <select title="Change Font Style" class="ql-font edit-button editor-button"></select>
+                        <select title="Change Font Size" style="border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important;" class="ql-size edit-button editor-button"></select>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-bold"></button>
-                        <button class="ql-italic"></button>
-                        <button class="ql-underline"></button>
-                        <button class="ql-strike"></button>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Bold" class="ql-bold edit-button editor-button"></button>
+                        <button title="Italic" class="ql-italic edit-button editor-button"></button>
+                        <button title="Underline" class="ql-underline edit-button editor-button"></button>
+                        <button title="Strikethrough" class="ql-strike edit-button editor-button"></button>
                     </span>
-                    <span class="ql-formats">
-                        <select class="ql-color"></select>
-                        <select class="ql-background"></select>
+                    <span class="ql-formats editor-button-group">
+                        <select title="Font Color" class="ql-color edit-button editor-button"></select>
+                        <select title="Font Background Color" style="border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important;" class="ql-background edit-button editor-button"></select>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-script" value="sub"></button>
-                        <button class="ql-script" value="super"></button>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Subscript" class="ql-script edit-button editor-button" value="sub"></button>
+                        <button title="Superscript" class="ql-script edit-button editor-button" value="super"></button>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-header" value="1"></button>
-                        <button class="ql-header" value="2"></button>
-                        <button class="ql-blockquote"></button>
-                        <button class="ql-code-block"></button>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Heading 1" class="ql-header edit-button editor-button" value="1"></button>
+                        <button title="Heading 2" class="ql-header edit-button editor-button" value="2"></button>
+                        <button title="Blockquote" class="ql-blockquote edit-button editor-button"></button>
+                        <button title="Insert Code Block" class="ql-code-block edit-button editor-button"></button>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-list" value="ordered"></button>
-                        <button class="ql-list" value="bullet"></button>
-                        <button class="ql-indent" value="-1"></button>
-                        <button class="ql-indent" value="+1"></button>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Insert Ordered List" class="ql-list edit-button editor-button" value="ordered"></button>
+                        <button title="Insert Unordered List" class="ql-list edit-button editor-button" value="bullet"></button>
+                        <button title="Indent Left" class="ql-indent edit-button editor-button" value="-1"></button>
+                        <button title="Indent Right" class="ql-indent edit-button editor-button" value="+1"></button>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-direction" value="rtl"></button>
-                        <select class="ql-align"></select>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Change Direction: RTL" class="ql-direction edit-button editor-button" value="rtl"></button>
+                        <select title="Change Text Alignment" style="border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important;" class="ql-align edit-button editor-button"></select>
                     </span>
-                    <span class="ql-formats">
-                        <button class="ql-link"></button>
-                        <button class="ql-image"></button>
-                        <button class="ql-video"></button>
-                        <button class="ql-formula"></button>
+                    <span class="ql-formats editor-button-group">
+                        <button title="Insert Link" class="ql-link edit-button editor-button"></button>
+                        <button title="Insert Image" class="ql-image edit-button editor-button"></button>
+                        <button title="Insert Video" class="ql-video edit-button editor-button"></button>
+                        <button title="Insert Formula" class="ql-formula edit-button editor-button"></button>
                     </span>
                     <span class="ql-formats">
-                        <button class="ql-clean"></button>
+                        <button title="Clean Formatting" class="ql-clean edit-button editor-button"></button>
                     </span>
                 </div>
 
@@ -97,6 +106,10 @@
                 syntax: true,
                 toolbar: '#toolbar-container'
             },
+            history: {
+                delay: 2000,
+                maxStack: 500
+            },
             placeholder: 'Compose an epic...',
             theme: 'snow'
         });