From 16d23881dbd0766cb72eeb811cb8c37e5389b5fb Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <hello@saschaeggenberger.com>
Date: Thu, 21 Dec 2023 12:35:13 +0100
Subject: [PATCH] Field UI tweaks
---
dist/css/base/gin.css | 95 +++++++++++++++++++++++++++++++++++-
styles/base/_dropbutton.scss | 5 ++
styles/base/_field-ui.scss | 75 ++++++++++++++++++++++++++++
styles/base/_focus.scss | 4 +-
4 files changed, 177 insertions(+), 2 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 136223b5a..ecba5c012 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -2688,6 +2688,10 @@ html.js .dropbutton-widget {
border-radius: var(--gin-border-s) var(--gin-border-s) 0 0;
}
+.dropbutton.dropbutton--gin .dropbutton-action > .button {
+ border: var(--dropbutton-border-size) solid transparent !important;
+}
+
.dropbutton:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item, .dropbutton .dropbutton__items > .dropbutton__item, .dropbutton .dropbutton__items > .dropbutton__item ~ .dropbutton__item {
background-color: var(--gin-bg-app);
border: 0 none;
@@ -3418,6 +3422,93 @@ a.button.button--danger:active:before {
color: var(--gin-color-text-light);
}
+.field-option {
+ --thumb-size: 5rem;
+ align-items: baseline;
+ background-color: transparent;
+ border: 1px solid var(--gin-border-color);
+ border-radius: var(--gin-border-m);
+}
+
+[dir="ltr"] .field-option {
+ padding: 0 var(--gin-spacing-l) 0 0;
+}
+
+[dir="rtl"] .field-option {
+ padding: 0 0 0 var(--gin-spacing-l);
+}
+
+.field-option__thumb {
+ background-color: var(--gin-bg-layer2);
+ border-radius: 0;
+}
+
+[dir="ltr"] .field-option__thumb {
+ border-top-left-radius: var(--gin-border-s);
+ border-bottom-left-radius: var(--gin-border-s);
+}
+
+[dir="rtl"] .field-option__thumb {
+ border-top-right-radius: var(--gin-border-s);
+ border-bottom-right-radius: var(--gin-border-s);
+}
+
+.field-option__icon {
+ filter: brightness(0);
+}
+
+.gin--dark-mode .field-option__icon {
+ filter: brightness(0) invert(1);
+}
+
+.field-option__item {
+ padding-block: var(--gin-spacing-s);
+}
+
+.field-option__item .form-item__label {
+ margin-bottom: var(--gin-spacing-xxs);
+}
+
+.field-option .field-option__description {
+ font-size: var(--gin-font-size-xs);
+ color: var(--gin-color-text-light);
+}
+
+.field-option .field-option-radio {
+ visibility: hidden;
+}
+
+.field-option.selected, .field-option:has(.field-option-radio:checked) {
+ background-color: var(--gin-bg-layer2);
+}
+
+.field-option.selected .field-option__thumb, .field-option:has(.field-option-radio:checked) .field-option__thumb {
+ background-color: var(--gin-color-primary);
+}
+
+.field-option.selected .field-option__icon, .field-option:has(.field-option-radio:checked) .field-option__icon {
+ filter: brightness(0) invert(1);
+}
+
+.gin--dark-mode .field-option.selected .field-option__icon, .gin--dark-mode .field-option:has(.field-option-radio:checked) .field-option__icon {
+ filter: brightness(0);
+}
+
+.subfield-option {
+ border: 1px solid var(--gin-border-color);
+ border-radius: var(--gin-border-m);
+}
+
+.subfield-option .item-list {
+ font-size: var(--gin-font-size-xs);
+ color: var(--gin-color-text-light);
+ margin-top: var(--gin-spacing-xs);
+}
+
+.subfield-option.selected {
+ background-color: var(--gin-bg-layer2);
+}
+
.card {
padding: 0;
background: transparent;
@@ -3624,7 +3715,9 @@ hr {
.ck .ck.ck-button:active,
.ck .ck.ck-button:focus,
.ck .ck.ck-button:active:focus,
-.toolbar-box .toolbar-handle:focus {
+.toolbar-box .toolbar-handle:focus,
+.field-option:has(.field-option-radio:checked),
+.subfield-option:has(.field-option-radio:checked) {
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
}
diff --git a/styles/base/_dropbutton.scss b/styles/base/_dropbutton.scss
index 87d5430dd..dbf1494a1 100644
--- a/styles/base/_dropbutton.scss
+++ b/styles/base/_dropbutton.scss
@@ -111,6 +111,11 @@ html.js .dropbutton-widget {
}
}
+ // Drupal 10.2.x fix
+ &.dropbutton--gin .dropbutton-action > .button {
+ border: var(--dropbutton-border-size) solid transparent !important;
+ }
+
// The ugly part: make it work for all different dropbutton versions out there
&:not(.dropbutton--gin) > .dropbutton__item ~ .dropbutton__item,
& &__items > .dropbutton__item,
diff --git a/styles/base/_field-ui.scss b/styles/base/_field-ui.scss
index e05bc9e04..9545fb333 100644
--- a/styles/base/_field-ui.scss
+++ b/styles/base/_field-ui.scss
@@ -6,3 +6,78 @@
font-size: var(--gin-font-size-xs);
color: var(--gin-color-text-light);
}
+
+.field-option {
+ --thumb-size: 5rem;
+
+ align-items: baseline;
+ padding: 0 var(--gin-spacing-l) 0 0;
+ background-color: transparent;
+ border: 1px solid var(--gin-border-color);
+ border-radius: var(--gin-border-m);
+
+ &__thumb {
+ // background-color: var(--gin-bg-header);
+ background-color: var(--gin-bg-layer2);
+ border-radius: 0;
+ border-top-left-radius: var(--gin-border-s);
+ border-bottom-left-radius: var(--gin-border-s);
+ }
+
+ &__icon {
+ filter: brightness(0);
+
+ .gin--dark-mode & {
+ filter: brightness(0) invert(1);
+ }
+ }
+
+ &__item {
+ padding-block: var(--gin-spacing-s);
+
+ .form-item__label {
+ margin-bottom: var(--gin-spacing-xxs);
+ }
+ }
+
+ & &__description {
+ font-size: var(--gin-font-size-xs);
+ color: var(--gin-color-text-light);
+ }
+
+ .field-option-radio {
+ visibility: hidden;
+ }
+
+ &.selected,
+ &:has(.field-option-radio:checked) {
+ background-color: var(--gin-bg-layer2);
+
+ .field-option__thumb {
+ background-color: var(--gin-color-primary);
+ }
+
+ .field-option__icon {
+ filter: brightness(0) invert(1);
+
+ .gin--dark-mode & {
+ filter: brightness(0);
+ }
+ }
+ }
+}
+
+.subfield-option {
+ border: 1px solid var(--gin-border-color);
+ border-radius: var(--gin-border-m);
+
+ .item-list {
+ font-size: var(--gin-font-size-xs);
+ color: var(--gin-color-text-light);
+ margin-top: var(--gin-spacing-xs);
+ }
+
+ &.selected {
+ background-color: var(--gin-bg-layer2);
+ }
+}
diff --git a/styles/base/_focus.scss b/styles/base/_focus.scss
index cf06a185b..0cfe2a056 100644
--- a/styles/base/_focus.scss
+++ b/styles/base/_focus.scss
@@ -19,7 +19,9 @@
.ck .ck.ck-button:active,
.ck .ck.ck-button:focus,
.ck .ck.ck-button:active:focus,
-.toolbar-box .toolbar-handle:focus
+.toolbar-box .toolbar-handle:focus,
+.field-option:has(.field-option-radio:checked),
+.subfield-option:has(.field-option-radio:checked)
{
outline: none;
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
--
GitLab