Styles for outlined buttons.

2 files changed, 23 insertions, 0 deletions

diff --git a/templates/@theme-base/_full.scss b/templates/@theme-base/_full.scss
index c49e7cf..783e6e0 100644
--- a/templates/@theme-base/_full.scss
+++ b/templates/@theme-base/_full.scss
@@ -68,6 +68,16 @@ body {
   color: darken($base, 10%);
 }
 
+.pm-button-blueborder {
+  border-color: $highlight;
+  color: $highlight;
+}
+
+.pm-button-blueborder:hover {
+  border-color: lighten($highlight, 5%);
+  color: lighten($highlight, 5%);
+}
+
 [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover {
   background: lighten($base, 2%) !important;
 }
diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss
index 2df575f..2cc2f27 100644
--- a/templates/@theme-base/_styles.scss
+++ b/templates/@theme-base/_styles.scss
@@ -192,6 +192,19 @@ a:active, a:focus, a:hover,
   border: 1px solid darken($highlight, 5%);
 }
 
+.pm-button-blueborder {
+  box-shadow: none;
+  border-color: $base;
+  color: $base;
+  transition: color .2s ease-in-out, border-color .2s ease-in-out;
+}
+
+.pm-button-blueborder:hover {
+  box-shadow: none;
+  border-color: darken($highlight, 10%);
+  color: darken($highlight, 10%);
+}
+
 // Settings toggle button
 .pm-toggle-checkbox:checked+.pm-toggle-label:before {
   background: $highlight;