From 5389f02b4f8cd9025cf4c17e78a654a57c4af98b Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Fri, 21 Oct 2022 15:29:45 +0200 Subject: [PATCH] new: [scss:boostrap-additional] Added `btn-outline-text` to ease integration with themes --- .../IndexTable/Fields/actions.php | 2 +- .../additional/bootstrap-additional.css | 25 +++++++++++++++++++ webroot/css/themes/theme-darkly.css | 25 +++++++++++++++++++ webroot/css/themes/theme-default.css | 25 +++++++++++++++++++ webroot/css/themes/theme-flatly.css | 25 +++++++++++++++++++ webroot/css/themes/theme-minty.css | 25 +++++++++++++++++++ webroot/css/themes/theme-quartz.css | 25 +++++++++++++++++++ webroot/css/themes/theme-slate.css | 25 +++++++++++++++++++ webroot/css/themes/theme-vapor.css | 25 +++++++++++++++++++ .../scss/additional/bootstrap-additional.scss | 4 +++ 10 files changed, 205 insertions(+), 1 deletion(-) diff --git a/templates/element/genericElements/IndexTable/Fields/actions.php b/templates/element/genericElements/IndexTable/Fields/actions.php index 379fb58..570ff63 100644 --- a/templates/element/genericElements/IndexTable/Fields/actions.php +++ b/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']) ); } diff --git a/webroot/css/themes/additional/bootstrap-additional.css b/webroot/css/themes/additional/bootstrap-additional.css index 4b53697..2654c1e 100644 --- a/webroot/css/themes/additional/bootstrap-additional.css +++ b/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; diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css index 5d202e4..f0ab02c 100644 --- a/webroot/css/themes/theme-darkly.css +++ b/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; diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css index 1cd760e..632df9b 100644 --- a/webroot/css/themes/theme-default.css +++ b/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; diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css index b2df7b7..a136080 100644 --- a/webroot/css/themes/theme-flatly.css +++ b/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; diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css index 3205729..f118a7d 100644 --- a/webroot/css/themes/theme-minty.css +++ b/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; diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css index f88e622..8853db3 100644 --- a/webroot/css/themes/theme-quartz.css +++ b/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; diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css index 70309e0..be86d33 100644 --- a/webroot/css/themes/theme-slate.css +++ b/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; diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css index 2c7266f..be21737 100644 --- a/webroot/css/themes/theme-vapor.css +++ b/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; diff --git a/webroot/theme/scss/additional/bootstrap-additional.scss b/webroot/theme/scss/additional/bootstrap-additional.scss index 9b234dd..6c0675d 100644 --- a/webroot/theme/scss/additional/bootstrap-additional.scss +++ b/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;