From adccb58b38c9c519e90b4a2d7fa6438cfebf3a1d Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 17 Sep 2019 13:08:17 +0200
Subject: [PATCH] add is-outline classes for buttons

---
 scm-ui/styles/scm.scss | 222 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 221 insertions(+), 1 deletion(-)

diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 345488880b..5e66094141 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -207,7 +207,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
   background-color: $danger-25;
 }
 
-// outline option for tags
+// tags
 .tag:not(body) {
   border: 1px solid transparent;
   background-color: red; //TODO: replace with transparent
@@ -352,6 +352,226 @@ $danger-25: scale-color($danger, $lightness: 75%);
   &.is-danger[disabled] {
     background-color: scale-color($danger, $lightness: 75%);
   }
+
+  &.is-outline-black {
+    color: $black;
+    border-color: $black;
+  }
+
+  &.is-outline-black:hover,
+  &.is-outline-black.is-hovered {
+    color: scale-color($black, $lightness: -10%);
+    border-color: scale-color($black, $lightness: -10%);
+  }
+
+  &.is-outline-black:active,
+  &.is-outline-black.is-active {
+    color: scale-color($black, $lightness: -20%);
+    border-color: scale-color($black, $lightness: -20%);
+  }
+
+  &.is-outline-black[disabled] {
+    color: scale-color($black, $lightness: 75%);
+    border-color: scale-color($black, $lightness: 75%);
+  }
+
+  &.is-outline-dark {
+    color: $dark;
+    border-color: $dark;
+  }
+
+  &.is-outline-dark:hover,
+  &.is-outline-dark.is-hovered {
+    color: scale-color($dark, $lightness: -10%);
+    border-color: scale-color($dark, $lightness: -10%);
+  }
+
+  &.is-outline-dark:active,
+  &.is-outline-dark.is-active {
+    color: scale-color($dark, $lightness: -20%);
+    border-color: scale-color($dark, $lightness: -20%);
+  }
+
+  &.is-outline-dark[disabled] {
+    color: scale-color($dark, $lightness: 75%);
+    border-color: scale-color($dark, $lightness: 75%);
+  }
+
+  &.is-outline-light {
+    /*color: $light;*/
+    border-color: $light;
+  }
+
+  &.is-outline-light:hover,
+  &.is-outline-light.is-hovered {
+    /* color: scale-color($light, $lightness: -10%); */
+    border-color: scale-color($light, $lightness: -10%);
+  }
+
+  &.is-outline-light:active,
+  &.is-outline-light.is-active {
+    /* color: scale-color($light, $lightness: -20%); */
+    border-color: scale-color($light, $lightness: -20%);
+  }
+
+  &.is-outline-light[disabled] {
+    /* color: scale-color($light, $lightness: 75%); */
+    border-color: scale-color($light, $lightness: 75%);
+  }
+
+  &.is-outline-white {
+    /*color: $white;*/
+    border-color: $white;
+  }
+
+  &.is-outline-white:hover,
+  &.is-outline-white.is-hovered {
+    /* color: scale-color($white, $lightness: -10%); */
+    border-color: scale-color($white, $lightness: -10%);
+  }
+
+  &.is-outline-white:active,
+  &.is-outline-white.is-active {
+    /* color: scale-color($white, $lightness: -20%); */
+    border-color: scale-color($white, $lightness: -20%);
+  }
+
+  &.is-outline-white[disabled] {
+    /* color: scale-color($white, $lightness: 75%); */
+    border-color: scale-color($white, $lightness: 75%);
+  }
+
+  &.is-outline-primary {
+    color: $primary;
+    border-color: $primary;
+  }
+
+  &.is-outline-primary:hover,
+  &.is-outline-primary.is-hovered {
+    color: scale-color($primary, $lightness: -10%);
+    border-color: scale-color($primary, $lightness: -10%);
+  }
+
+  &.is-outline-primary:active,
+  &.is-outline-primary.is-active {
+    color: scale-color($primary, $lightness: -20%);
+    border-color: scale-color($primary, $lightness: -20%);
+  }
+
+  &.is-outline-primary[disabled] {
+    color: scale-color($primary, $lightness: 75%);
+    border-color: scale-color($primary, $lightness: 75%);
+  }
+
+  &.is-outline-link {
+    color: $link;
+    border-color: $link;
+  }
+
+  &.is-outline-link:hover,
+  &.is-outline-link.is-hovered {
+    color: scale-color($link, $lightness: -10%);
+    border-color: scale-color($link, $lightness: -10%);
+  }
+
+  &.is-outline-link:active,
+  &.is-outline-link.is-active {
+    color: scale-color($link, $lightness: -20%);
+    border-color: scale-color($link, $lightness: -20%);
+  }
+
+  &.is-outline-link[disabled] {
+    color: scale-color($link, $lightness: 75%);
+    border-color: scale-color($link, $lightness: 75%);
+  }
+
+  &.is-outline-info {
+    color: $info;
+    border-color: $info;
+  }
+
+  &.is-outline-info:hover,
+  &.is-outline-info.is-hovered {
+    color: scale-color($info, $lightness: -10%);
+    border-color: scale-color($info, $lightness: -10%);
+  }
+
+  &.is-outline-info:active,
+  &.is-outline-info.is-active {
+    color: scale-color($info, $lightness: -20%);
+    border-color: scale-color($info, $lightness: -20%);
+  }
+
+  &.is-outline-info[disabled] {
+    color: scale-color($info, $lightness: 75%);
+    border-color: scale-color($info, $lightness: 75%);
+  }
+
+  &.is-outline-success {
+    color: $success;
+    border-color: $success;
+  }
+
+  &.is-outline-success:hover,
+  &.is-outline-success.is-hovered {
+    color: scale-color($success, $lightness: -10%);
+    border-color: scale-color($success, $lightness: -10%);
+  }
+
+  &.is-outline-success:active,
+  &.is-outline-success.is-active {
+    color: scale-color($success, $lightness: -20%);
+    border-color: scale-color($success, $lightness: -20%);
+  }
+
+  &.is-outline-success[disabled] {
+    color: scale-color($success, $lightness: 75%);
+    border-color: scale-color($success, $lightness: 75%);
+  }
+
+  /*&.is-outline-warning {
+    color: $warning;
+    border-color: $warning;
+  }
+
+  &.is-outline-warning:hover,
+  &.is-outline-warning.is-hovered {
+    color: scale-color($warning, $lightness: -10%);
+    border-color: scale-color($warning, $lightness: -10%);
+  }
+
+  &.is-outline-warning:active,
+  &.is-outline-warning.is-active {
+    color: scale-color($warning, $lightness: -20%);
+    border-color: scale-color($warning, $lightness: -20%);
+  }
+
+  &.is-outline-warning[disabled] {
+    color: scale-color($warning, $lightness: 75%);
+    border-color: scale-color($warning, $lightness: 75%);
+  }*/
+
+  &.is-outline-danger {
+    color: $danger;
+    border-color: $danger;
+  }
+
+  &.is-outline-danger:hover,
+  &.is-outline-danger.is-hovered {
+    color: scale-color($danger, $lightness: -10%);
+    border-color: scale-color($danger, $lightness: -10%);
+  }
+
+  &.is-outline-danger:active,
+  &.is-outline-danger.is-active {
+    color: scale-color($danger, $lightness: -20%);
+    border-color: scale-color($danger, $lightness: -20%);
+  }
+
+  &.is-outline-danger[disabled] {
+    color: scale-color($danger, $lightness: 75%);
+    border-color: scale-color($danger, $lightness: 75%);
+  }
 }
 
 .box-link-shadow {