Add some button styles for TinyMCE

diff --git a/app/static/src/sass/global/_buttons.scss b/app/static/src/sass/global/_buttons.scss
index b6c6b8e061bb0ba1a6120c134eca17c15d8cff39..456c6dd7d1176af7b8636b6a199189528c1725c8 100755 (executable)
--- a/app/static/src/sass/global/_buttons.scss
+++ b/app/static/src/sass/global/_buttons.scss
@@ -28,6 +28,18 @@ $module: ".button";
         }
     }
 
+    &--black {
+
+        background-color: $color-black;
+        color: white;
+
+        &:hover {
+            background-color: $color-main;
+            color: $color-black;
+        }
+
+    }
+
     &--small {
         @include font-size(m);
         @include padding(.18 1);

diff --git a/app/static/src/sass/global/_wysiwyg.scss b/app/static/src/sass/global/_wysiwyg.scss
new file mode 100644 (file)
index 0000000..395e3c4
--- /dev/null
+++ b/app/static/src/sass/global/_wysiwyg.scss
@@ -0,0 +1,42 @@
+.wys-button {
+
+    @extend .button;
+
+}
+
+.wys-button-small {
+
+    @extend .button;
+    @extend .button--small;
+
+}
+
+.wys-button-xsmall {
+
+    @extend .button;
+    @extend .button--xsmall;
+
+}
+
+.wys-button-black {
+
+    @extend .button;
+    @extend .button--black;
+
+}
+
+.wys-button-black-small {
+
+    @extend .button;
+    @extend .button--black;
+    @extend .button--small;
+
+}
+
+.wys-button-black-xsmall {
+
+    @extend .button;
+    @extend .button--black;
+    @extend .button--xsmall;
+
+}

diff --git a/app/static/src/sass/index.scss b/app/static/src/sass/index.scss
index 8c0e6d8d59b3535d4f768b14bfd9fbbb1025d364..436423455fa2cd5eb08209f3b621811b0a59a55d 100755 (executable)
--- a/app/static/src/sass/index.scss
+++ b/app/static/src/sass/index.scss
@@ -19,6 +19,7 @@
 @import 'global/buttons';
 @import 'global/tables';
 @import 'global/helpers';
+@import 'global/wysiwyg';
 
 @import 'layout/global';
 @import 'layout/grid';