From 5da22ec4e445dfa3b66bd0c6cf7017e8d35da6dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Fri, 11 Nov 2022 18:00:46 +0100 Subject: [PATCH] fix #1357: buttons group not active (#1358) --- .../_includes/forms/form-elements-4.html | 47 +++++++------------ src/pages/_includes/ui/button-group.html | 44 +++++++++++++++++ src/pages/_includes/ui/dropdown-menu.html | 1 - src/scss/_core.scss | 1 + src/scss/_variables.scss | 4 +- src/scss/ui/_button-group.scss | 14 ++++++ src/scss/ui/_buttons.scss | 11 ++++- src/scss/ui/forms/_form-selectgroup.scss | 6 +-- 8 files changed, 91 insertions(+), 37 deletions(-) create mode 100644 src/pages/_includes/ui/button-group.html create mode 100644 src/scss/ui/_button-group.scss diff --git a/src/pages/_includes/forms/form-elements-4.html b/src/pages/_includes/forms/form-elements-4.html index 23cbd0197..fdd6d02dc 100644 --- a/src/pages/_includes/forms/form-elements-4.html +++ b/src/pages/_includes/forms/form-elements-4.html @@ -3,47 +3,32 @@ {% include parts/form/selectgroup-payments.html %} {% include parts/form/selectgroup-project-manager.html %} -
-
- - - - -
+ {% include ui/button-group.html items="1 min,5 min,10 min,30 min" fluid=true radio=true id="basic" %}
-
- - -
- -
- - Option 4 - - - Option 5 - - - Option 6 - -
+ {% include ui/button-group.html items="Option 1,Option 2" dropdown=true fluid=true radio=true id="dropdown" %} +
+ +
+
+
+ + {% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4,Button 5" fluid=true vertical=true radio=true id="vertical"%} +
+
+
+
+ + {% include ui/button-group.html items="Button 1,Button 2,Button 3,Button 4" fluid=true vertical=true dropdown=true radio=true id="vertical-dropdown" %}
-
- {% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %} - {% for icon in icons %} - {% include ui/button.html icon=icon icon-only=true %} - {% endfor %} -
+ {% include ui/button-group.html icons="bold,italic,underline,copy,scissors,file-plus,file-minus" fluid=true radio=true id="toolbar" %}
\ No newline at end of file diff --git a/src/pages/_includes/ui/button-group.html b/src/pages/_includes/ui/button-group.html new file mode 100644 index 000000000..b4a8ea784 --- /dev/null +++ b/src/pages/_includes/ui/button-group.html @@ -0,0 +1,44 @@ +{% assign items = include.items | split: ',' %} +{% assign icons = include.icons | split: ',' %} + +{% assign id = include.id %} + +
+ + {% for item in items %} + {% if include.radio %} + + {% endif %} + <{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }} + {% endfor %} + + {% for icon in icons %} + {% if include.radio %} + + {% endif %} + <{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} class="btn btn-icon{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{% include ui/icon.html icon=icon %} + {% endfor %} + + {% if include.dropdown %} +
+ {% if include.radio %} + + {% endif %} + <{% if include.radio %}label for="btn-radio-{{ id }}-dropdown"{% else %}button{% endif %} class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Other + + {% include ui/dropdown-menu.html %} +
+ + Option 4 + + + Option 5 + + + Option 6dropdown-menu + +
+
+ {% endif %} +
\ No newline at end of file diff --git a/src/pages/_includes/ui/dropdown-menu.html b/src/pages/_includes/ui/dropdown-menu.html index 011031d37..88e986d38 100644 --- a/src/pages/_includes/ui/dropdown-menu.html +++ b/src/pages/_includes/ui/dropdown-menu.html @@ -1,6 +1,5 @@
{% if include.menu %} - {% assign menu = include.menu | split: ',' %} {% for item in menu %} diff --git a/src/scss/_core.scss b/src/scss/_core.scss index fae98573e..dd043a9f4 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -17,6 +17,7 @@ @import "ui/badges"; @import "ui/breadcrumbs"; @import "ui/buttons"; +@import "ui/button-group"; @import "ui/calendars"; @import "ui/carousel"; @import "ui/cards"; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5992c888d..c93e6c56f 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -183,7 +183,9 @@ $border-color-light-translucent: rgba($text-muted, $border-light-opacity) !defau $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default; $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default; -$active-bg: var(--#{$prefix}gray-100) !default; +$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default; +$active-color: var(--#{$prefix}primary) !default; +$active-border-color: var(--#{$prefix}primary) !default; $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default; diff --git a/src/scss/ui/_button-group.scss b/src/scss/ui/_button-group.scss new file mode 100644 index 000000000..52080b228 --- /dev/null +++ b/src/scss/ui/_button-group.scss @@ -0,0 +1,14 @@ +.btn-group, +.btn-group-vertical { + > .btn-check:checked + .btn, + > .btn:active, + > .btn.active { + z-index: 5; + } + + > .btn-check:focus + .btn, + > .btn:hover, + > .btn:focus { + z-index: 1; + } +} \ No newline at end of file diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index ba9f340eb..66013c297 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -6,9 +6,12 @@ --#{$prefix}btn-bg: var(--#{$prefix}bg-surface); --#{$prefix}btn-color: var(--#{$prefix}body-color); --#{$prefix}btn-border-color: var(--#{$prefix}border-color); - --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface); + --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg); --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active); --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button); + --#{$prefix}btn-active-color: #{$active-color}; + --#{$prefix}btn-active-bg: #{$active-bg}; + --#{$prefix}btn-active-border-color: #{$active-border-color}; display: inline-flex; align-items: center; @@ -38,6 +41,12 @@ .badge { top: auto; } + + .btn-check + &:hover { + color: var(--#{$prefix}btn-hover-color); + background-color: var(--#{$prefix}btn-hover-bg); + border-color: var(--#{$prefix}btn-hover-border-color); + } } .btn-link { diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss index 4a2fe371d..2c5342fe9 100644 --- a/src/scss/ui/forms/_form-selectgroup.scss +++ b/src/scss/ui/forms/_form-selectgroup.scss @@ -94,9 +94,9 @@ Select group .form-selectgroup-input:checked + .form-selectgroup-label { z-index: 1; - color: var(--#{$prefix}primary); - background: rgba(var(--#{$prefix}primary-rgb), .04); - border-color: var(--#{$prefix}primary); + color: #{$active-color}; + background: #{$active-bg}; + border-color: #{$active-border-color}; } .form-selectgroup-input:focus + .form-selectgroup-label {