Add a white button style

diff --git a/app/static/src/sass/global/_buttons.scss b/app/static/src/sass/global/_buttons.scss
index 393df9bece7e224b33769eece2837f91820f371d..fe9b8d021b11a02c3e36fa66327cfff58a39acfc 100755 (executable)
--- a/app/static/src/sass/global/_buttons.scss
+++ b/app/static/src/sass/global/_buttons.scss
@@ -41,6 +41,18 @@ $module: ".button";
 
     }
 
+    &--white {
+
+        background-color: white;
+        color: $color-black;
+
+        &:hover {
+            background-color: $color-black;
+            color: white;
+        }
+
+    }
+
     &--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
index eb7318fbe7f14f2334c18923304b226573abc55c..9872880bca6c653fa8ef6448f81bc46a4013b361 100644 (file)
--- a/app/static/src/sass/global/_wysiwyg.scss
+++ b/app/static/src/sass/global/_wysiwyg.scss
@@ -91,3 +91,53 @@ a.wys-button-black-xsmall {
     @include margin(1);
 
 }
+
+a.wys-button-white {
+
+    @extend .button;
+    @extend .button--white;
+
+    .page__block--black & {
+        color: $color-black;
+        &:hover {
+            color: white;
+        }
+    }
+
+    @include margin(1);
+
+}
+
+a.wys-button-white-small {
+
+    @extend .button;
+    @extend .button--white;
+    @extend .button--small;
+
+    .page__block--black & {
+        color: $color-black;
+        &:hover {
+            color: white;
+        }
+    }
+
+    @include margin(1);
+
+}
+
+a.wys-button-white-xsmall {
+
+    @extend .button;
+    @extend .button--white;
+    @extend .button--xsmall;
+
+    .page__block--black & {
+        color: $color-black;
+        &:hover {
+            color: white;
+        }
+    }
+
+    @include margin(1);
+
+}