new: [scss:boostrap-additional] Added `btn-outline-text` to ease integration with themes

templates/element/genericElements/IndexTable/Fields/actions.php

@@ -107,7 +107,7 @@
                 empty($action['title']) ? '' : h($action['title']),
                 empty($action['dbclickAction']) ? '' : 'class="dblclickActionElement"',
                 empty($action['onclick']) ? '' : sprintf('onClick="%s"', $action['onclick']),
-                empty($action['variant']) ? 'outline-dark' : h($action['variant']),
+                empty($action['variant']) ? 'outline-text' : h($action['variant']),
                 $this->FontAwesome->getClass($action['icon'])
             );
         }

webroot/css/themes/additional/bootstrap-additional.css

@@ -237,6 +237,31 @@
   background-color: #212529;
 }
 
+.btn-outline-text {
+  color: #212529;
+  border-color: #212529;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #212529;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-darkly.css

@@ -237,6 +237,31 @@
   background-color: #303030;
 }
 
+.btn-outline-text {
+  color: #fff;
+  border-color: #fff;
+}
+.btn-outline-text:hover {
+  color: #000;
+  background-color: #fff;
+  border-color: #fff;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #000;
+  background-color: #fff;
+  border-color: #fff;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #fff;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-default.css

@@ -237,6 +237,31 @@
   background-color: #212529;
 }
 
+.btn-outline-text {
+  color: #212529;
+  border-color: #212529;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #212529;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-flatly.css

@@ -237,6 +237,31 @@
   background-color: #7b8a8b;
 }
 
+.btn-outline-text {
+  color: #212529;
+  border-color: #212529;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #212529;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-minty.css

@@ -237,6 +237,31 @@
   background-color: #7b8a8b;
 }
 
+.btn-outline-text {
+  color: #212529;
+  border-color: #212529;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #212529;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-quartz.css

@@ -237,6 +237,31 @@
   background-color: #212529;
 }
 
+.btn-outline-text {
+  color: #fff;
+  border-color: #fff;
+}
+.btn-outline-text:hover {
+  color: #000;
+  background-color: #fff;
+  border-color: #fff;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #000;
+  background-color: #fff;
+  border-color: #fff;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #fff;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-slate.css

@@ -237,6 +237,31 @@
   background-color: #272b30;
 }
 
+.btn-outline-text {
+  color: #aaa;
+  border-color: #aaa;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #aaa;
+  border-color: #aaa;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(170, 170, 170, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #aaa;
+  border-color: #aaa;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(170, 170, 170, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #aaa;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/css/themes/theme-vapor.css

@@ -237,6 +237,31 @@
   background-color: #170229;
 }
 
+.btn-outline-text {
+  color: #32fbe2;
+  border-color: #32fbe2;
+}
+.btn-outline-text:hover {
+  color: #fff;
+  background-color: #32fbe2;
+  border-color: #32fbe2;
+}
+.btn-check:focus + .btn-outline-text, .btn-outline-text:focus {
+  box-shadow: 0 0 0 0.25rem rgba(50, 251, 226, 0.5);
+}
+.btn-check:checked + .btn-outline-text, .btn-check:active + .btn-outline-text, .btn-outline-text:active, .btn-outline-text.active, .btn-outline-text.dropdown-toggle.show {
+  color: #fff;
+  background-color: #32fbe2;
+  border-color: #32fbe2;
+}
+.btn-check:checked + .btn-outline-text:focus, .btn-check:active + .btn-outline-text:focus, .btn-outline-text:active:focus, .btn-outline-text.active:focus, .btn-outline-text.dropdown-toggle.show:focus {
+  box-shadow: 0 0 0 0.25rem rgba(50, 251, 226, 0.5);
+}
+.btn-outline-text:disabled, .btn-outline-text.disabled {
+  color: #32fbe2;
+  background-color: transparent;
+}
+
 /* Progress Timeline */
 .progress-timeline {
   padding: 0.2em 0.2em 0.5em 0.2em;

webroot/theme/scss/additional/bootstrap-additional.scss

@@ -66,6 +66,10 @@ $toast-color-level:                 70% !default;
     }
 }
 
+.btn-outline-text {
+    @include button-outline-variant($body-color);
+}
+
 /* Progress Timeline */
 .progress-timeline {
     padding: 0.2em 0.2em 0.5em 0.2em;