[WDTK] Improved visual styling for Pro buttons

mysociety · Sep 10, 2024 · a79ecd3 · a79ecd3
1 parent bb308a4
commit a79ecd3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/app/assets/stylesheets/responsive/_mixins.scss b/app/assets/stylesheets/responsive/_mixins.scss
@@ -96,13 +96,16 @@
 }
 
 @mixin button-pro {
-  background-image: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
+  background: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
+  border: 1.5px solid #3E6D75;
   box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
   &:hover,
   &:active,
   &:visited:hover,
   &:visited:active {
     box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
+    color: #3E6D75;
+    background: linear-gradient(-180deg, #d8edf0 0%, #bfe0e6 100%);
   }
 
   @include focus-state;
@@ -112,6 +115,28 @@
   }
 }
 
+@mixin button-pro-tertiary {
+  background: $color-white;
+  color: #3E6D75;
+  border: 1.5px solid #3E6D75;
+  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
+  &:hover,
+  &:active,
+  &:visited:hover,
+  &:visited:active {
+    background: linear-gradient(-180deg, #1a4146 0%, #153a40 100%);
+    color: $color-white;
+    box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
+  }
+
+  @include focus-state;
+
+  &:disabled {
+    @include button-disabled;
+  }
+}
+
+
 /* Menu items */
 @mixin menu-item {
   text-decoration: none;

diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
@@ -203,6 +203,9 @@ a.button-secondary,
 
 .button-tertiary {
   @include button-tertiary;
+  .alaveteli-pro & {
+    @include  button-pro-tertiary;
+  }
 }
 
 .button-disabled {