Add template and styling for toggle button

CHANGELOG.md

@@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+* [PR-552](https://github.com/itk-dev/deltag.aarhus.dk/pull/552)
+  * Add styling for dialog proposal categories
+
 * [PR-551](https://github.com/itk-dev/deltag.aarhus.dk/pull/551)
   * Remove old video field and disabled Azure video module
   * Enable Comments module

web/themes/custom/hoeringsportal/assets/css/_bootstrap-custom.scss

@@ -54,6 +54,7 @@ $color-white: $white;
 $color-petroleum-100: oklch(98% 0.017 196.88);
 $color-petroleum-200: oklch(90% 0.017 196.88);
 $color-petroleum-800: oklch(43% 0.063 196.55);
+$color-petroleum-900: oklch(30% 0.0406 197.75);
 $color-peach-100: oklch(94% 0.02 56.12);
 $color-peach-200: oklch(90% 0.02 56.12);
 $color-peach-600: oklch(50% 0.02 56.12);

web/themes/custom/hoeringsportal/assets/css/module/_btn.scss

@@ -22,7 +22,7 @@
 .btn-sm {
   @extend .btn-sm;
 
-  padding: $spacer * 0.5 $spacer * .75;
+  padding: $spacer * 0.5 $spacer * 0.75;
 
   &.btn-primary {
     position: relative;
@@ -40,3 +40,68 @@
     }
   }
 }
+
+.btn-toggle {
+  background: $color-petroleum-800;
+  border: none;
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+
+  &:has(input.btn-check:checked) {
+    background: $color-petroleum-900;
+  }
+
+  input.btn-check {
+    &:checked + .toggle-badge {
+      color: white;
+      background-color: $color-petroleum-800;
+      border: 1px solid $color-petroleum-800;
+      transform: translateY(-2px);
+
+      &:hover {
+        background-color: $color-petroleum-800;
+      }
+    }
+  }
+
+  label.toggle-badge {
+    display: block;
+    background: white;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: $font-size-small;
+    border: 1px solid $color-petroleum-800;
+    color: $color-petroleum-800;
+    padding: 8px 12px;
+    margin-bottom: 0;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1),
+        background-color 0.1s ease-in;
+    }
+  }
+
+  &:hover label.toggle-badge {
+    color: $color-petroleum-800;
+    background-color: $color-petroleum-100;
+    border: 1px solid $color-petroleum-800;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(-2px);
+      transition:
+        transform 200ms cubic-bezier(0.3, 0.7, 0.4, 1.5),
+        background-color 0.2s ease-out;
+    }
+  }
+
+  &:active label.toggle-badge {
+    @media (prefers-reduced-motion: no-preference) {
+      transform: translateY(-2px);
+      transition:
+        transform 34ms,
+        background-color 0.2s ease-out;
+    }
+  }
+}

web/themes/custom/hoeringsportal/assets/css/module/_dialogue.scss

@@ -1,5 +1,5 @@
 .proposal-layout {
-  max-width: 840px!important;
+  max-width: 840px !important;
 }
 
 .breadcrumb {
@@ -18,7 +18,7 @@
   }
 
   .ajax-progress-throbber {
-    display:none;
+    display: none;
   }
 }
 
@@ -31,16 +31,17 @@
   label,
   legend {
     font-weight: 700;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
 
     span.optional {
-      margin-left: .5rem;
+      margin-left: 0.5rem;
       font-weight: normal;
     }
   }
 
   .form-required:after {
     content: "";
+    margin-bottom: 0.5rem;
   }
 
   .image-widget {
@@ -72,16 +73,30 @@
       @extend .btn;
       @extend .btn-primary;
 
-      padding: .25rem .5rem;
-      font-size: .875rem;
-      border-radius: .2rem;
+      padding: 0.25rem 0.5rem;
+      font-size: 0.875rem;
+      border-radius: 0.2rem;
       position: inherit;
 
       &:after {
         display: none;
       }
     }
   }
+  #edit-field-dialogue-proposal-category--wrapper .fieldset-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: $spacer;
+
+    .form-checkboxes {
+      display: flex;
+      gap: $spacer;
+      order: 2;
+    }
+    .description {
+      order: 1;
+    }
+  }
 }
 
 .dialogue-proposals {
@@ -117,7 +132,7 @@
   }
 
   #map {
-    height: 300px!important;
+    height: 300px !important;
   }
 
   .comments .indented {

web/themes/custom/hoeringsportal/templates/components/toggle-button.html.twig

@@ -0,0 +1,4 @@
+<div class="btn-toggle">
+  <input class="btn-check" type="checkbox" id="{{ label['#id'] }}" autocomplete="off">
+  <label class="btn toggle-badge" for="{{ label['#id'] }}">{{ label['#title'] }}</label>
+</div>

web/themes/custom/hoeringsportal/templates/form/form-element--checkbox.html.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Theme override for a form element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any errors for this form element, may not be set.
+ * - prefix: (optional) The form element prefix, may not be set.
+ * - suffix: (optional) The form element suffix, may not be set.
+ * - required: The required marker, or empty if the associated form element is
+ *   not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ *   - before: The label is output before the element. This is the default.
+ *     The label includes the #title and the required marker, if #required.
+ *   - after: The label is output after the element. For example, this is used
+ *     for radio and checkbox #type elements. If the #title is empty but the
+ *     field is #required, the label will contain only the required marker.
+ *   - invisible: Labels are critical for screen readers to enable them to
+ *     properly navigate through forms but can be visually distracting. This
+ *     property hides the label for everyone except screen readers.
+ *   - attribute: Set the title attribute on the element to create a tooltip but
+ *     output no label element. This is supported only for checkboxes and radios
+ *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ *     It is used where a visual label is not needed, such as a table of
+ *     checkboxes where the row and column provide the context. The tooltip will
+ *     include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ *    - content: A description of the form element, may not be set.
+ *    - attributes: (optional) A list of HTML attributes to apply to the
+ *      description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ *   - before: The description is output before the element.
+ *   - after: The description is output after the element. This is the default
+ *     value.
+ *   - invisible: The description is output after the element, hidden visually
+ *     but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @see template_preprocess_form_element()
+ */
+#}
+{% extends 'themes/custom/hoeringsportal/templates/components/toggle-button.html.twig' %}