From 459a69f22dd648e307eec8518238fa0e74ad0764 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Mon, 12 Nov 2018 13:13:02 +0100
Subject: [PATCH 01/10] Issue #15 #19: Checkbox styles

---
 claro.libraries.yml                         |   1 +
 css/src/components/form--checkbox-radio.css | 163 ++++++++++++++++++++
 css/src/components/form.css                 |  19 +--
 variables.js                                |   1 +
 4 files changed, 166 insertions(+), 18 deletions(-)
 create mode 100644 css/src/components/form--checkbox-radio.css

diff --git a/claro.libraries.yml b/claro.libraries.yml
index 7ab110f..6b34a8b 100644
--- a/claro.libraries.yml
+++ b/claro.libraries.yml
@@ -19,6 +19,7 @@ global-styling:
       css/dist/components/entity-meta.css: {}
       css/dist/components/field-ui.css: {}
       css/dist/components/form.css: {}
+      css/dist/components/form--checkbox-radio.css: {}
       css/dist/components/form--select.css: {}
       css/dist/components/form--text.css: {}
       css/dist/components/help.css: {}
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
new file mode 100644
index 0000000..4dafa9f
--- /dev/null
+++ b/css/src/components/form--checkbox-radio.css
@@ -0,0 +1,163 @@
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+/**
+ * When form items are nested in radios or checkboxes group, reduce the default
+ * space between them.
+ */
+.form-radios .form-item,
+.form-checkboxes .form-item {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+.form-radios .form-item:first-child,
+.form-checkboxes .form-item:first-child {
+  margin-top: 0;
+}
+.form-radios .form-item:last-child,
+.form-checkboxes .form-item:last-child {
+  margin-bottom: 0;
+}
+
+/**
+ * Form item modifiers.
+ */
+.form-type--checkbox,
+.form-type--radio {
+  margin-left: 1.5em; /* 24px */
+}
+[dir=rtl] .form-type--checkbox,
+[dir=rtl] .form-type--radio {
+  margin-right: 1.5em;
+  margin-left: 0;
+}
+
+/**
+ * Input elements.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  margin-left: -1.5em; /* -24px */
+  position: absolute;
+  /* clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  word-wrap: normal; */
+}
+[dir=rtl] input[type="checkbox"],
+[dir=rtl] input[type="radio"] {
+  margin-right: -1.5em; /* -24px */
+  margin-left: 0;
+}
+
+.option {
+  position: relative;
+}
+
+/**
+ * Semi-checkbox and semi-radio (pseudo elements of the label).
+ */
+input[type="checkbox"] + .option::before,
+input[type="radio"] + .option::before {
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: calc(-24em / 14);
+  width: calc(18em / 14);
+  height: calc(18em / 14);
+  transform: translateY(-50%);
+  transition: all linear var(--speed-transition) 0s;
+  border: calc(1em / 14) solid var(--color-input-border); /* 1px */
+  border-radius: calc(2em / 14); /* 2px */
+  background: var(--color-input-bg);
+  color: black;
+  content: "";
+  box-sizing: border-box;
+  text-align: center;
+  line-height: calc(16em / 14);
+}
+input[type="radio"] + .option::before {
+  border-radius: calc(9em / 14); /* 2px */
+}
+[dir="rtl"] input[type="checkbox"] + .option::before,
+[dir="rtl"] input[type="radio"] + .option::before {
+  right: calc(-24em / 14);
+  left: auto;
+}
+/* Checkbox hover state. */
+input[type="checkbox"] + .option:hover::before {
+  border-color: var(--color-input-border-hover);
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+}
+/* Checkbox focus state. */
+input[type="checkbox"]:focus + .option::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+}
+/* Checkbox focus and hover. */
+input[type="checkbox"]:focus + .option:hover::before,
+input[type="checkbox"]:active + .option::before { /* Keyboard. */
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/* Focus, hover and active on label (pointer or tap). */
+input[type="checkbox"]:active + .option:hover::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+
+/* Checked. */
+input[type="checkbox"]:checked + .option::before {
+  content: '\2713';
+  border-color: var(--color-input-border-focus);
+  background: var(--color-input-border-focus);
+  color: var(--color-input-bg);
+}
+/* Checkbox focus and hover. */
+input[type="checkbox"]:checked:focus + .option:hover::before,
+input[type="radio"]:checked:active + .option::before { /* Keyboard. */
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+  content: '\2713';
+  border-color: var(--color-input-fg);
+  background: var(--color-input-fg);
+  color: var(--color-input-bg);
+}
+/* Checked focus, hover and active on label (pointer or tap). */
+input[type="checkbox"]:focus:active + .option:hover::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+  border-color: var(--color-input-fg);
+  background: var(--color-input-fg);
+}
+
+
+
+
+
+/* Focus, hover and active on label (pointer or tap). *//*
+input[type="checkbox"]:checked :active + .option:hover::before,
+input[type="radio"]:checked :active + .option:hover::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+  border-color: var(--color-input-border-focus);
+}*/
+
+/* input[type="checkbox"]:checked + .option::before,
+input[type="radio"]:checked + .option::before {
+  border-color: var(--color-input-border-focus);
+  background: var(--color-input-border-focus);
+  color: var(--color-input-bg);
+} */
+
+
+input[type="radio"]:checked + .option::before {
+  content: '\25cf';
+  /* content: '\2022'; */
+}
+
+@media screen and (max-width: 600px) {
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: auto;
+  }
+}
diff --git a/css/src/components/form.css b/css/src/components/form.css
index ca10279..622e1a7 100644
--- a/css/src/components/form.css
+++ b/css/src/components/form.css
@@ -14,23 +14,6 @@
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 }
-/**
- * When form items are nested in radios or checkboxes group, reduce the default
- * space between them.
- */
-.form-radios .form-item,
-.form-checkboxes .form-item {
-  margin-top: 0.4em;
-  margin-bottom: 0.4em;
-}
-.form-radios .form-item:first-child,
-.form-checkboxes .form-item:first-child {
-  margin-top: 0;
-}
-.form-radios .form-item:last-child,
-.form-checkboxes .form-item:last-child {
-  margin-bottom: 0;
-}
 /**
  * When a table row has a single form item, prevent it from adding unnecessary
  * extra spacing. If it has multiple form items, allow spacing between them,
@@ -88,7 +71,7 @@ td > .form-item:only-child {
 }
 
 /**
- * Description.
+ * Form item description.
  */
 .form-item__description {
   font-size: calc(12em / 16); /* 12px */
diff --git a/variables.js b/variables.js
index 9ca6e1e..0b8bd55 100644
--- a/variables.js
+++ b/variables.js
@@ -47,6 +47,7 @@ module.exports = {
     '--color-input-border': 'var(--color-grayblue)',
     '--color-input-border-hover': 'var(--color-text)',
     '--color-input-border-focus': 'var(--color-absolutezero)',
+    '--color-input-focus-shadow': 'rgba(0, 74, 220, 0.3)', // Absolute zero with opacity.
     '--color-input-error': 'var(--color-maximumred)',
     '--color-input-border-error': 'var(--color-maximumred)',
     '--color-input-label-disabled': 'rgba(84, 85, 96, 0.6)', // Davy's grey with opacity.

From dd9c2d342af97792b67051cd0c0e3fb8c8905609 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Tue, 13 Nov 2018 21:28:53 +0100
Subject: [PATCH 02/10] Issue #15 #19: Checkbox and radio styles: basic theming
 for webkit excluding disabled and error states

---
 claro.theme                                 |   8 ++
 css/src/components/form--checkbox-radio.css | 151 ++++++++++++++------
 templates/form-element-label.html.twig      |  39 ++++-
 templates/form-element.html.twig            |   4 +-
 4 files changed, 154 insertions(+), 48 deletions(-)

diff --git a/claro.theme b/claro.theme
index c967fbc..125979d 100644
--- a/claro.theme
+++ b/claro.theme
@@ -196,6 +196,14 @@ function claro_preprocess_form_element(&$variables) {
       $variables['description']['attributes']->addClass('is-disabled');
     }
   }
+
+  if (
+    in_array($variables['type'], ['radio', 'checkbox']) &&
+    $variables['label']['#title_display'] === 'invisible'
+  ) {
+    $variables['label']['#title_display'] = 'after';
+    $variables['label']['#attributes']['class'][] = 'visually-hidden';
+  }
 }
 
 /**
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index 4dafa9f..229852e 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -39,13 +39,14 @@
  */
 input[type="checkbox"],
 input[type="radio"] {
-  margin-left: -1.5em; /* -24px */
+  margin-left: calc(-15em / 16); /* -24px */
   position: absolute;
-  /* clip: rect(1px, 1px, 1px, 1px);
+  margin-top: 1em;
+  clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
   height: 1px;
   width: 1px;
-  word-wrap: normal; */
+  word-wrap: normal;
 }
 [dir=rtl] input[type="checkbox"],
 [dir=rtl] input[type="radio"] {
@@ -57,6 +58,13 @@ input[type="radio"] {
   position: relative;
 }
 
+/**
+ * Option without visible label (e.g. Languages admin form).
+ */
+.form-item--no-label > .option {
+  display: inline-block;
+}
+
 /**
  * Semi-checkbox and semi-radio (pseudo elements of the label).
  */
@@ -73,87 +81,148 @@ input[type="radio"] + .option::before {
   border: calc(1em / 14) solid var(--color-input-border); /* 1px */
   border-radius: calc(2em / 14); /* 2px */
   background: var(--color-input-bg);
-  color: black;
+  color: white;
   content: "";
   box-sizing: border-box;
   text-align: center;
   line-height: calc(16em / 14);
 }
 input[type="radio"] + .option::before {
-  border-radius: calc(9em / 14); /* 2px */
+  border-radius: calc(9em / 14); /* 9px */
 }
 [dir="rtl"] input[type="checkbox"] + .option::before,
 [dir="rtl"] input[type="radio"] + .option::before {
   right: calc(-24em / 14);
-  left: auto;
-}
-/* Checkbox hover state. */
-input[type="checkbox"] + .option:hover::before {
-  border-color: var(--color-input-border-hover);
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  left: 0;
 }
+
+/**
+ * Checkbox states (empty).
+ */
+
 /* Checkbox focus state. */
 input[type="checkbox"]:focus + .option::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
 }
-/* Checkbox focus and hover. */
-input[type="checkbox"]:focus + .option:hover::before,
-input[type="checkbox"]:active + .option::before { /* Keyboard. */
+/* Checkbox :hover. */
+input[type="checkbox"] + .option:hover::before {
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/* Checkbox :focus:hover. */
+input[type="checkbox"]:focus + .option:hover::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
   border-color: var(--color-input-border-hover);
 }
-/* Focus, hover and active on label (pointer or tap). */
+/* Active state by keyboard — focus state is active */
+input[type="checkbox"]:active + .option::before,
+/* Active state by pointer or tap - no focus on the input, we have to manually emit it. */
 input[type="checkbox"]:active + .option:hover::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
   border-color: var(--color-input-border-hover);
 }
 
-/* Checked. */
+/**
+ * Checkbox - checked states.
+ */
 input[type="checkbox"]:checked + .option::before {
   content: '\2713';
-  border-color: var(--color-input-border-focus);
   background: var(--color-input-border-focus);
-  color: var(--color-input-bg);
+  border-color: var(--color-input-border-focus);
 }
-/* Checkbox focus and hover. */
-input[type="checkbox"]:checked:focus + .option:hover::before,
-input[type="radio"]:checked:active + .option::before { /* Keyboard. */
+/* Checkbox :checked:focus state. */
+input[type="checkbox"]:checked:focus + .option::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+}
+/* Checkbox :checked:hover. */
+input[type="checkbox"] + .option:hover::before {
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/* Checkbox :checked:focus:hover. */
+input[type="checkbox"]:checked:focus + .option:hover::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
-  content: '\2713';
   border-color: var(--color-input-fg);
   background: var(--color-input-fg);
-  color: var(--color-input-bg);
 }
-/* Checked focus, hover and active on label (pointer or tap). */
-input[type="checkbox"]:focus:active + .option:hover::before {
+/* Active state by keyboard — focus state is active */
+input[type="checkbox"]:checked:active + .option::before,
+/* Active state by pointer or tap - no focus on the input. */
+input[type="checkbox"]:checked:active + .option:hover::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
   border-color: var(--color-input-fg);
   background: var(--color-input-fg);
 }
 
+/**
+ * Radio states (empty).
+ */
 
-
-
-
-/* Focus, hover and active on label (pointer or tap). *//*
-input[type="checkbox"]:checked :active + .option:hover::before,
-input[type="radio"]:checked :active + .option:hover::before {
+/* Radio focus state. */
+input[type="radio"]:focus + .option::before {
   box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
-  border-color: var(--color-input-border-focus);
-}*/
-
-/* input[type="checkbox"]:checked + .option::before,
+}
+/* Radio :hover. */
+input[type="radio"] + .option:hover::before {
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/* Radio :focus:hover. */
+input[type="radio"]:focus + .option:hover::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/* Active state by keyboard — focus state is active */
+input[type="radio"]:active + .option::before,
+/* Active state by pointer or tap - no focus on the input, we have to manually emit it. */
+input[type="radio"]:active + .option:hover::before {
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
+  border-color: var(--color-input-border-hover);
+}
+/**
+ * Radio - checked states.
+ */
 input[type="radio"]:checked + .option::before {
+  /* content: '\25cf'; */
+  background: var(--color-input-border-focus);
   border-color: var(--color-input-border-focus);
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-focus), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+}
+/* Radio :checked:focus state. */
+input[type="radio"]:checked:focus + .option::before {
+  /* box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow); */
   background: var(--color-input-border-focus);
-  color: var(--color-input-bg);
-} */
+  border-color: var(--color-input-border-focus);
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-focus), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+}
+/* Radio :checked:hover. */
+input[type="radio"]:checked + .option:hover::before {
+  background: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+}
+/* Radio :checked:focus:hover. */
+/* Active state by keyboard — focus is active */
+input[type="radio"]:checked:active + .option::before,
+input[type="radio"]:checked:focus + .option:hover::before {
+  background: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+}
+/* Active state by pointer or tap - no focus on the input. */
+input[type="radio"]:checked:active + .option:hover::before {
+  background: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+}
 
+/**
+ * Disabled.
+ */
 
-input[type="radio"]:checked + .option::before {
-  content: '\25cf';
-  /* content: '\2022'; */
-}
+/**
+ * Error.
+ */
 
 @media screen and (max-width: 600px) {
   input[type="checkbox"],
diff --git a/templates/form-element-label.html.twig b/templates/form-element-label.html.twig
index f05010d..dca7c63 100644
--- a/templates/form-element-label.html.twig
+++ b/templates/form-element-label.html.twig
@@ -1,12 +1,41 @@
 {#
 /**
  * @file
- * Template override for a form element label.
+ * Theme override for a form element label.
+ *
+ * Available variables:
+ * - title: The label's text.
+ * - title_display: Elements title_display setting.
+ * - required: An indicator for whether the associated form element is required.
+ * - attributes: A list of HTML attributes for the label.
+ *
+ * @see template_preprocess_form_element_label()
  */
 #}
-
-{% extends '@classy/form/form-element-label.html.twig' %}
-
 {%
-  set attributes = attributes.addClass('form-item__label')
+  set classes = [
+    'form-item__label',
+    title_display == 'after' ? 'option',
+    title_display == 'invisible' ? 'visually-hidden',
+    required ? 'js-form-required',
+    required ? 'form-required',
+  ]
 %}
+{%
+  set title_classes = []
+%}
+{% if title_display == 'after' and attributes.hasClass('visually-hidden') %}
+  {% set title_classes = ['visually-hidden'] %}
+{% endif %}
+{%
+  set classes_remove = title_classes
+%}
+{% if title is not empty or required -%}
+  <label{{ attributes.addClass(classes).removeClass(classes_remove) }}>
+    {%- if title_classes -%}
+      <span{{ create_attribute({class: title_classes}) }}>{{ title }}</span>
+    {%- else -%}
+      {{ title }}
+    {%- endif -%}
+  </label>
+{%- endif %}
diff --git a/templates/form-element.html.twig b/templates/form-element.html.twig
index a31d5c5..bb2c137 100644
--- a/templates/form-element.html.twig
+++ b/templates/form-element.html.twig
@@ -28,7 +28,7 @@
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
-  {% if label_display in ['before', 'invisible'] %}
+  {% if label_display == 'before' or (label_display == 'invisible' and type not in ['radio', 'checkbox']) %}
     {{ label }}
   {% endif %}
   {% if prefix is not empty %}
@@ -43,7 +43,7 @@
   {% if suffix is not empty %}
     <span class="form-item__suffix{{disabled == 'disabled' ? ' is-disabled'}}">{{ suffix }}</span>
   {% endif %}
-  {% if label_display == 'after' %}
+  {% if label_display == 'after' or (label_display == 'invisible' and type in ['radio', 'checkbox']) %}
     {{ label }}
   {% endif %}
   {% if errors %}

From c5a8bb70dde8076600a6af04cb947c9506ca0550 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Fri, 16 Nov 2018 18:30:58 +0100
Subject: [PATCH 03/10] Issue #15 #19: Style input elements directly rather
 than using pseudos

---
 claro.theme                                 |  12 +-
 css/src/components/form--checkbox-radio.css | 350 +++++++++++---------
 css/src/components/form.css                 |   3 +
 templates/fieldset.html.twig                |   1 +
 templates/form-element-label.html.twig      |  39 +--
 templates/form-element.html.twig            |   4 +-
 variables.js                                |   4 +-
 7 files changed, 209 insertions(+), 204 deletions(-)

diff --git a/claro.theme b/claro.theme
index 125979d..6caab96 100644
--- a/claro.theme
+++ b/claro.theme
@@ -196,13 +196,17 @@ function claro_preprocess_form_element(&$variables) {
       $variables['description']['attributes']->addClass('is-disabled');
     }
   }
+}
 
+/**
+ * Implements hook_preprocess_HOOK() for input.
+ */
+function seven_preprocess_input(&$variables) {
   if (
-    in_array($variables['type'], ['radio', 'checkbox']) &&
-    $variables['label']['#title_display'] === 'invisible'
+    $variables['element']['#title_display'] === 'attribute' &&
+    !empty((string) $variables['element']['#title'])
   ) {
-    $variables['label']['#title_display'] = 'after';
-    $variables['label']['#attributes']['class'][] = 'visually-hidden';
+    $variables['attributes']['title'] = (string) $variables['element']['#title'];
   }
 }
 
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index 229852e..aaef802 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -12,221 +12,247 @@
   margin-top: 0.4em;
   margin-bottom: 0.4em;
 }
-.form-radios .form-item:first-child,
-.form-checkboxes .form-item:first-child {
-  margin-top: 0;
-}
-.form-radios .form-item:last-child,
-.form-checkboxes .form-item:last-child {
-  margin-bottom: 0;
-}
 
 /**
  * Form item modifiers.
  */
 .form-type--checkbox,
 .form-type--radio {
-  margin-left: 1.5em; /* 24px */
+  margin-left: 24px; /* LTR */
+  line-height: 1.5em;
 }
-[dir=rtl] .form-type--checkbox,
-[dir=rtl] .form-type--radio {
-  margin-right: 1.5em;
+[dir="rtl"] .form-type--checkbox,
+[dir="rtl"] .form-type--radio {
+  margin-right: 24px;
   margin-left: 0;
 }
 
-/**
- * Input elements.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  margin-left: calc(-15em / 16); /* -24px */
-  position: absolute;
-  margin-top: 1em;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  height: 1px;
-  width: 1px;
-  word-wrap: normal;
-}
-[dir=rtl] input[type="checkbox"],
-[dir=rtl] input[type="radio"] {
-  margin-right: -1.5em; /* -24px */
+.form-type--checkbox input,
+.form-type--radio input {
+  float: left;
+  margin-left: -24px; /* LTR */
+  position: relative;
+  top: 0.75em;
+  transform: translateY(-50%);
+}
+[dir="rtl"] .form-type--checkbox input,
+[dir="rtl"] .form-type--radio input {
+  float: right;
+  margin-right: -24px;
   margin-left: 0;
 }
 
-.option {
-  position: relative;
+.form-type--checkbox.form-item--no-label {
+  margin-left: 0;
 }
-
-/**
- * Option without visible label (e.g. Languages admin form).
- */
-.form-item--no-label > .option {
-  display: inline-block;
+[dir="rtl"] .form-type--checkbox.form-item--no-label {
+  margin-right: 0;
+}
+.form-type--checkbox.form-item--no-label input,
+[dir="rtl"] .form-type--checkbox.form-item--no-label input {
+  float: none;
+  margin-right: 0;
+  margin-left: 0;
+  position: static;
+  transform: none;
 }
 
-/**
- * Semi-checkbox and semi-radio (pseudo elements of the label).
- */
-input[type="checkbox"] + .option::before,
-input[type="radio"] + .option::before {
+input[type="checkbox"],
+input[type="radio"] {
+  transition: all 0.1s ease-in-out 0s, background-image 0s linear 0s;
+  appearance: none;
+  border: 1px solid var(--color-input-border);
   display: inline-block;
-  position: absolute;
-  top: 50%;
-  left: calc(-24em / 14);
-  width: calc(18em / 14);
-  height: calc(18em / 14);
-  transform: translateY(-50%);
-  transition: all linear var(--speed-transition) 0s;
-  border: calc(1em / 14) solid var(--color-input-border); /* 1px */
-  border-radius: calc(2em / 14); /* 2px */
-  background: var(--color-input-bg);
-  color: white;
-  content: "";
+  width: 18px;
+  height: 18px;
+  background: var(--color-input-bg) no-repeat 50% 50%;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+  background-size: 100% 100%;
+  outline: none;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px transparent;
+  vertical-align: text-bottom;
   box-sizing: border-box;
-  text-align: center;
-  line-height: calc(16em / 14);
 }
-input[type="radio"] + .option::before {
-  border-radius: calc(9em / 14); /* 9px */
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-[dir="rtl"] input[type="checkbox"] + .option::before,
-[dir="rtl"] input[type="radio"] + .option::before {
-  right: calc(-24em / 14);
-  left: 0;
+input[type="checkbox"]:hover {
+  border-color: var(--color-input-fg);
+  box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-
-/**
- * Checkbox states (empty).
- */
-
-/* Checkbox focus state. */
-input[type="checkbox"]:focus + .option::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+input[type="checkbox"]:focus:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-/* Checkbox :hover. */
-input[type="checkbox"] + .option:hover::before {
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="checkbox"]:checked {
+  background-color: var(--color-input-border-focus);
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
 }
-/* Checkbox :focus:hover. */
-input[type="checkbox"]:focus + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+/* input[type="checkbox"]:checked:focus {
+  background-color: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+} */
+input[type="checkbox"]:checked:hover {
+  background-color: var(--color-input-fg);
+  border-color: var(--color-input-fg);
 }
-/* Active state by keyboard — focus state is active */
-input[type="checkbox"]:active + .option::before,
-/* Active state by pointer or tap - no focus on the input, we have to manually emit it. */
-input[type="checkbox"]:active + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="checkbox"]:active {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
+input[type="checkbox"]:active:hover,
+input[type="radio"]:active:hover,
+input[type="radio"]:checked:active:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
+}
+
+
+
+
+
+
+
 
 /**
- * Checkbox - checked states.
+ * Radio.
  */
-input[type="checkbox"]:checked + .option::before {
-  content: '\2713';
-  background: var(--color-input-border-focus);
-  border-color: var(--color-input-border-focus);
+input[type="radio"] {
+  border-radius: 19px;
+  width: 19px;
+  height: 19px;
 }
-/* Checkbox :checked:focus state. */
-input[type="checkbox"]:checked:focus + .option::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+input[type="radio"]:focus {
+}
+input[type="radio"]:hover {
+  border-color: var(--color-input-fg);
+  box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-/* Checkbox :checked:hover. */
-input[type="checkbox"] + .option:hover::before {
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="radio"]:focus:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-/* Checkbox :checked:focus:hover. */
-input[type="checkbox"]:checked:focus + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+input[type="radio"]:checked {
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+  box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
+}
+input[type="radio"]:checked:focus {
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
+}
+input[type="radio"]:checked:hover {
   border-color: var(--color-input-fg);
-  background: var(--color-input-fg);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+  box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-/* Active state by keyboard — focus state is active */
-input[type="checkbox"]:checked:active + .option::before,
-/* Active state by pointer or tap - no focus on the input. */
-input[type="checkbox"]:checked:active + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+input[type="radio"]:checked:focus:hover {
   border-color: var(--color-input-fg);
-  background: var(--color-input-fg);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
 
+
+
+
+
+
+
+
+
+
 /**
- * Radio states (empty).
+ * Error states.
  */
-
-/* Radio focus state. */
-input[type="radio"]:focus + .option::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow);
+input[type="checkbox"].error,
+input[type="radio"].error {
+  background-color: var(--color-input-bg);
+  border-color: var(--color-input-border-error);
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-/* Radio :hover. */
-input[type="radio"] + .option:hover::before {
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="checkbox"].error:focus,
+input[type="radio"].error:focus {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-/* Radio :focus:hover. */
-input[type="radio"]:focus + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="checkbox"].error:hover,
+input[type="radio"].error:hover {
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-/* Active state by keyboard — focus state is active */
-input[type="radio"]:active + .option::before,
-/* Active state by pointer or tap - no focus on the input, we have to manually emit it. */
-input[type="radio"]:active + .option:hover::before {
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-hover);
-  border-color: var(--color-input-border-hover);
+input[type="checkbox"].error:focus:hover,
+input[type="radio"].error:focus:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-/**
- * Radio - checked states.
- */
-input[type="radio"]:checked + .option::before {
-  /* content: '\25cf'; */
-  background: var(--color-input-border-focus);
-  border-color: var(--color-input-border-focus);
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-border-focus), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+input[type="checkbox"].error:checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
 }
-/* Radio :checked:focus state. */
-input[type="radio"]:checked:focus + .option::before {
-  /* box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow); */
-  background: var(--color-input-border-focus);
-  border-color: var(--color-input-border-focus);
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-border-focus), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+input[type="radio"].error:checked,
+input[type="radio"].error:checked:hover {
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
 }
-/* Radio :checked:hover. */
-input[type="radio"]:checked + .option:hover::before {
-  background: var(--color-input-fg);
-  border-color: var(--color-input-fg);
-  box-shadow: inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+input[type="checkbox"].error:checked:hover,
+input[type="radio"].error:checked:hover {
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-input-border-error);
 }
-/* Radio :checked:focus:hover. */
-/* Active state by keyboard — focus is active */
-input[type="radio"]:checked:active + .option::before,
-input[type="radio"]:checked:focus + .option:hover::before {
-  background: var(--color-input-fg);
-  border-color: var(--color-input-fg);
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+input[type="checkbox"].error:checked:focus:hover,
+input[type="radio"].error:checked:focus,
+input[type="radio"].error:checked:focus:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
+  border-color: var(--color-input-border-error);
 }
-/* Active state by pointer or tap - no focus on the input. */
-input[type="radio"]:checked:active + .option:hover::before {
-  background: var(--color-input-fg);
-  border-color: var(--color-input-fg);
-  box-shadow: 0 0 0 calc(4em / 14) var(--color-input-focus-shadow), inset 0 0 0 calc(1em / 14) var(--color-input-fg), inset 0 0 0 calc(4em / 14) var(--color-input-bg);
+input[type="checkbox"].error:active:hover,
+input[type="radio"].error:active:hover,
+input[type="radio"].error:checked:active:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
-/**
- * Disabled.
- */
+
+
+
+
+
 
 /**
- * Error.
+ * Disabled states.
  */
+input[type="checkbox"][disabled],
+input[type="radio"][disabled],
+input[type="checkbox"][disabled]:hover,
+input[type="radio"][disabled]:hover,
+input[type="radio"][disabled]:focus:active,
+input[type="radio"][disabled]:active:hover,
+input[type="checkbox"][disabled].error,
+input[type="radio"][disabled].error,
+input[type="checkbox"][disabled].error:hover,
+input[type="radio"][disabled].error:hover,
+input[type="radio"][disabled].error:active:hover {
+  box-shadow: none;
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+}
+input[type="checkbox"][disabled]:checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+}
+input[type="radio"][disabled]:checked,
+input[type="radio"][disabled].error:checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+}
+
+
+
+
+
+
+
+
 
 @media screen and (max-width: 600px) {
-  input[type="checkbox"],
+  input[type="checkbox"] {
+    width: 18px;
+  }
+
   input[type="radio"] {
-    width: auto;
+    width: 19px;
   }
 }
diff --git a/css/src/components/form.css b/css/src/components/form.css
index 622e1a7..b9070bb 100644
--- a/css/src/components/form.css
+++ b/css/src/components/form.css
@@ -51,6 +51,9 @@ td > .form-item:only-child {
 .form-item__label.has-error {
   color: var(--color-input-error);
 }
+.form-item__label.option.has-error {
+  color: inherit;
+}
 .form-item__label.is-disabled {
   color: var(--color-input-fg-disabled);
   cursor: default; /* @todo ...or auto? */
diff --git a/templates/fieldset.html.twig b/templates/fieldset.html.twig
index 5291f54..0a51c68 100644
--- a/templates/fieldset.html.twig
+++ b/templates/fieldset.html.twig
@@ -24,6 +24,7 @@
       'fieldset__label',
       required ? 'js-form-required',
       required ? 'form-required',
+      attributes.hasClass('error') ? 'has-error',
     ]
   %}
   {%
diff --git a/templates/form-element-label.html.twig b/templates/form-element-label.html.twig
index dca7c63..f05010d 100644
--- a/templates/form-element-label.html.twig
+++ b/templates/form-element-label.html.twig
@@ -1,41 +1,12 @@
 {#
 /**
  * @file
- * Theme override for a form element label.
- *
- * Available variables:
- * - title: The label's text.
- * - title_display: Elements title_display setting.
- * - required: An indicator for whether the associated form element is required.
- * - attributes: A list of HTML attributes for the label.
- *
- * @see template_preprocess_form_element_label()
+ * Template override for a form element label.
  */
 #}
+
+{% extends '@classy/form/form-element-label.html.twig' %}
+
 {%
-  set classes = [
-    'form-item__label',
-    title_display == 'after' ? 'option',
-    title_display == 'invisible' ? 'visually-hidden',
-    required ? 'js-form-required',
-    required ? 'form-required',
-  ]
+  set attributes = attributes.addClass('form-item__label')
 %}
-{%
-  set title_classes = []
-%}
-{% if title_display == 'after' and attributes.hasClass('visually-hidden') %}
-  {% set title_classes = ['visually-hidden'] %}
-{% endif %}
-{%
-  set classes_remove = title_classes
-%}
-{% if title is not empty or required -%}
-  <label{{ attributes.addClass(classes).removeClass(classes_remove) }}>
-    {%- if title_classes -%}
-      <span{{ create_attribute({class: title_classes}) }}>{{ title }}</span>
-    {%- else -%}
-      {{ title }}
-    {%- endif -%}
-  </label>
-{%- endif %}
diff --git a/templates/form-element.html.twig b/templates/form-element.html.twig
index bb2c137..a31d5c5 100644
--- a/templates/form-element.html.twig
+++ b/templates/form-element.html.twig
@@ -28,7 +28,7 @@
   ]
 %}
 <div{{ attributes.addClass(classes) }}>
-  {% if label_display == 'before' or (label_display == 'invisible' and type not in ['radio', 'checkbox']) %}
+  {% if label_display in ['before', 'invisible'] %}
     {{ label }}
   {% endif %}
   {% if prefix is not empty %}
@@ -43,7 +43,7 @@
   {% if suffix is not empty %}
     <span class="form-item__suffix{{disabled == 'disabled' ? ' is-disabled'}}">{{ suffix }}</span>
   {% endif %}
-  {% if label_display == 'after' or (label_display == 'invisible' and type in ['radio', 'checkbox']) %}
+  {% if label_display == 'after' %}
     {{ label }}
   {% endif %}
   {% if errors %}
diff --git a/variables.js b/variables.js
index 0b8bd55..484a39f 100644
--- a/variables.js
+++ b/variables.js
@@ -52,8 +52,8 @@ module.exports = {
     '--color-input-border-error': 'var(--color-maximumred)',
     '--color-input-label-disabled': 'rgba(84, 85, 96, 0.6)', // Davy's grey with opacity.
     '--color-input-fg-disabled': 'var(--color-oldsilver)',
-    '--color-input-bg-disabled': 'rgba(212, 212, 216, 0.3)', // Light gray with opacity.
-    '--color-input-border-disabled': 'rgba(130, 130, 140, 0.5)', // Old silver with opacity.
+    '--color-input-bg-disabled': 'rgba(212, 212, 216, 0.3)', // Light gray with 0.3 opacity .
+    '--color-input-border-disabled': '#bababf', // Old silver with 0.5 opacity on white bg.
     '--opacity-input-border-disabled': '0.5',
     '--size-input-border-radius': '0.125em', // (1/8)em ~ 2px
     '--size-input-border': '0.0625em', // (1/16)em ~ 1px

From a7dd3219779eebcf24df6c9a32de86b0de5b3a55 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Wed, 21 Nov 2018 16:12:32 +0100
Subject: [PATCH 04/10] Issue #15 #19: Fix IE11 weirdesses by a separate file

---
 claro.libraries.yml                           |   1 +
 claro.theme                                   |   1 +
 .../components/form--checkbox-radio--ie.css   | 158 ++++++++++++++++++
 css/src/components/form--checkbox-radio.css   |  91 +++-------
 4 files changed, 183 insertions(+), 68 deletions(-)
 create mode 100644 css/src/components/form--checkbox-radio--ie.css

diff --git a/claro.libraries.yml b/claro.libraries.yml
index 6b34a8b..58506a9 100644
--- a/claro.libraries.yml
+++ b/claro.libraries.yml
@@ -20,6 +20,7 @@ global-styling:
       css/dist/components/field-ui.css: {}
       css/dist/components/form.css: {}
       css/dist/components/form--checkbox-radio.css: {}
+      css/dist/components/form--checkbox-radio--ie.css: {}
       css/dist/components/form--select.css: {}
       css/dist/components/form--text.css: {}
       css/dist/components/help.css: {}
diff --git a/claro.theme b/claro.theme
index 6caab96..bc046de 100644
--- a/claro.theme
+++ b/claro.theme
@@ -203,6 +203,7 @@ function claro_preprocess_form_element(&$variables) {
  */
 function seven_preprocess_input(&$variables) {
   if (
+    !empty($variables['element']['#title_display']) &&
     $variables['element']['#title_display'] === 'attribute' &&
     !empty((string) $variables['element']['#title'])
   ) {
diff --git a/css/src/components/form--checkbox-radio--ie.css b/css/src/components/form--checkbox-radio--ie.css
new file mode 100644
index 0000000..41b4aae
--- /dev/null
+++ b/css/src/components/form--checkbox-radio--ie.css
@@ -0,0 +1,158 @@
+/**
+ * @file
+ * Checkbox and radio input elements styles for IE11 and below.
+ */
+
+input[type="checkbox"]::-ms-check,
+input[type="radio"]::-ms-check {
+  transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
+  border: 1px solid var(--color-input-border);
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  background: var(--color-input-bg) no-repeat 50% 50%;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
+  background-size: 100% 100%;
+  outline: none;
+  border-radius: 2px;
+  box-shadow: 0 0 0 4px transparent;
+  vertical-align: text-bottom;
+  box-sizing: border-box;
+  color: transparent; /* IE */
+}
+input[type="radio"]::-ms-check {
+  border-radius: 19px;
+  width: 19px;
+  height: 19px;
+}
+input[type="checkbox"]:focus::-ms-check,
+input[type="radio"]:focus::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
+  outline: none;
+  color: transparent; /* IE */
+}
+input[type="checkbox"]:hover::-ms-check,
+input[type="radio"]:hover::-ms-check {
+  border-color: var(--color-input-fg);
+  box-shadow: inset 0 0 0 1px var(--color-input-fg);
+}
+input[type="checkbox"]:focus:hover::-ms-check,
+input[type="radio"]:focus:hover::-ms-check {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
+}
+input[type="checkbox"]:checked::-ms-check {
+  background-color: var(--color-input-border-focus);
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
+  color: transparent; /* IE */
+}
+input[type="radio"]:checked::-ms-check {
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+  box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
+  color: transparent; /* IE */
+  outline: none;
+}
+input[type="radio"]:checked:focus::-ms-check {
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
+  outline: none;
+}
+input[type="checkbox"]:checked:hover::-ms-check {
+  background-color: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+}
+input[type="radio"]:checked:hover::-ms-check {
+  border-color: var(--color-input-fg);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+  box-shadow: inset 0 0 0 1px var(--color-input-fg);
+}
+input[type="checkbox"]:active::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
+}
+input[type="checkbox"]:active:hover::-ms-check,
+input[type="radio"]:active:hover::-ms-check,
+input[type="radio"]:checked:active:hover::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
+}
+input[type="radio"]:checked:focus:hover::-ms-check {
+  border-color: var(--color-input-fg);
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
+}
+
+/**
+ * Error states.
+ */
+input[type="checkbox"].error::-ms-check,
+input[type="radio"].error::-ms-check {
+  background-color: var(--color-input-bg);
+  border-color: var(--color-input-border-error);
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
+}
+input[type="checkbox"].error:focus::-ms-check,
+input[type="radio"].error:focus::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
+}
+input[type="checkbox"].error:hover::-ms-check,
+input[type="radio"].error:hover::-ms-check {
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
+}
+input[type="checkbox"].error:focus:hover::-ms-check,
+input[type="radio"].error:focus:hover::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
+}
+input[type="checkbox"].error:checked::-ms-check {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
+}
+input[type="radio"].error:checked::-ms-check,
+input[type="radio"].error:checked:hover::-ms-check {
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
+}
+input[type="checkbox"].error:checked:hover::-ms-check,
+input[type="radio"].error:checked:hover::-ms-check {
+  box-shadow: inset 0 0 0 1px var(--color-input-border-error);
+  background-color: var(--color-input-bg);
+  border-color: var(--color-input-border-error);
+}
+input[type="checkbox"].error:checked:focus:hover::-ms-check,
+input[type="radio"].error:checked:focus::-ms-check,
+input[type="radio"].error:checked:focus:hover::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
+  border-color: var(--color-input-border-error);
+}
+input[type="checkbox"].error:active:hover::-ms-check,
+input[type="radio"].error:active:hover::-ms-check,
+input[type="radio"].error:checked:active:hover::-ms-check {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
+}
+
+/**
+ * Disabled states.
+ */
+input[type="checkbox"][disabled]::-ms-check,
+input[type="radio"][disabled]::-ms-check,
+input[type="checkbox"][disabled]:hover::-ms-check,
+input[type="radio"][disabled]:hover::-ms-check,
+input[type="radio"][disabled]:focus:active::-ms-check,
+input[type="radio"][disabled]:active:hover::-ms-check,
+input[type="checkbox"][disabled].error::-ms-check,
+input[type="radio"][disabled].error::-ms-check,
+input[type="checkbox"][disabled].error:hover::-ms-check,
+input[type="radio"][disabled].error:hover::-ms-check,
+input[type="radio"][disabled].error:active:hover::-ms-check {
+  box-shadow: none;
+  background-color: var(--color-input-bg-disabled);
+  border-color: var(--color-input-border-disabled);
+}
+input[type="checkbox"][disabled]:checked::-ms-check {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
+  color: transparent; /* IE */
+}
+input[type="radio"][disabled]:checked::-ms-check,
+input[type="radio"][disabled].error:checked::-ms-check {
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
+  color: transparent; /* IE */
+}
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index aaef802..43a1d14 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -29,7 +29,7 @@
 
 .form-type--checkbox input,
 .form-type--radio input {
-  float: left;
+  float: left; /* LTR */
   margin-left: -24px; /* LTR */
   position: relative;
   top: 0.75em;
@@ -59,7 +59,7 @@
 
 input[type="checkbox"],
 input[type="radio"] {
-  transition: all 0.1s ease-in-out 0s, background-image 0s linear 0s;
+  transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   appearance: none;
   border: 1px solid var(--color-input-border);
   display: inline-block;
@@ -74,63 +74,29 @@ input[type="radio"] {
   vertical-align: text-bottom;
   box-sizing: border-box;
 }
-input[type="checkbox"]:focus,
-input[type="radio"]:focus {
-  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
-}
-input[type="checkbox"]:hover {
-  border-color: var(--color-input-fg);
-  box-shadow: inset 0 0 0 1px var(--color-input-fg);
-}
-input[type="checkbox"]:focus:hover {
-  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
-}
-input[type="checkbox"]:checked {
-  background-color: var(--color-input-border-focus);
-  border-color: var(--color-input-border-focus);
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
-}
-/* input[type="checkbox"]:checked:focus {
-  background-color: var(--color-input-fg);
-  border-color: var(--color-input-fg);
-} */
-input[type="checkbox"]:checked:hover {
-  background-color: var(--color-input-fg);
-  border-color: var(--color-input-fg);
-}
-input[type="checkbox"]:active {
-  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
-}
-input[type="checkbox"]:active:hover,
-input[type="radio"]:active:hover,
-input[type="radio"]:checked:active:hover {
-  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
-}
-
-
-
-
-
-
-
-
-/**
- * Radio.
- */
 input[type="radio"] {
   border-radius: 19px;
   width: 19px;
   height: 19px;
 }
+input[type="checkbox"]:focus,
 input[type="radio"]:focus {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
+input[type="checkbox"]:hover,
 input[type="radio"]:hover {
   border-color: var(--color-input-fg);
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
+input[type="checkbox"]:focus:hover,
 input[type="radio"]:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
+input[type="checkbox"]:checked {
+  background-color: var(--color-input-border-focus);
+  border-color: var(--color-input-border-focus);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
+}
 input[type="radio"]:checked {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
@@ -141,26 +107,29 @@ input[type="radio"]:checked:focus {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
 }
+input[type="checkbox"]:checked:hover {
+  background-color: var(--color-input-fg);
+  border-color: var(--color-input-fg);
+}
 input[type="radio"]:checked:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
+input[type="checkbox"]:active {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
+}
+input[type="checkbox"]:active:hover,
+input[type="radio"]:active:hover,
+input[type="radio"]:checked:active:hover {
+  box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
+}
 input[type="radio"]:checked:focus:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
 
-
-
-
-
-
-
-
-
-
 /**
  * Error states.
  */
@@ -207,12 +176,6 @@ input[type="radio"].error:checked:active:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
-
-
-
-
-
-
 /**
  * Disabled states.
  */
@@ -239,14 +202,6 @@ input[type="radio"][disabled].error:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
 }
 
-
-
-
-
-
-
-
-
 @media screen and (max-width: 600px) {
   input[type="checkbox"] {
     width: 18px;

From 93fc4f43650ff93ebcaa618761309f40fc8b0a5f Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Thu, 29 Nov 2018 15:49:37 +0100
Subject: [PATCH 05/10] Issue #15 #19: Move checkboxes and radios error message
 below the set.

---
 templates/fieldset.html.twig | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/fieldset.html.twig b/templates/fieldset.html.twig
index 0a51c68..ebd2602 100644
--- a/templates/fieldset.html.twig
+++ b/templates/fieldset.html.twig
@@ -45,11 +45,6 @@
     <span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>
   </legend>
   <div class="fieldset__wrapper">
-    {% if errors %}
-      <div class="fieldset__error-message">
-        {{ errors }}
-      </div>
-    {% endif %}
     {% if prefix %}
       <span class="fieldset__prefix">{{ prefix }}</span>
     {% endif %}
@@ -57,6 +52,11 @@
     {% if suffix %}
       <span class="fieldset__suffix">{{ suffix }}</span>
     {% endif %}
+    {% if errors %}
+      <div class="fieldset__error-message">
+        {{ errors }}
+      </div>
+    {% endif %}
     {% if description.content %}
       <div{{ description.attributes.addClass(description_classes) }}>{{ description.content }}</div>
     {% endif %}

From 90f14b823ac4b6f45f3c445a8f70704bf9767a19 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Thu, 6 Dec 2018 08:49:08 +0100
Subject: [PATCH 06/10] Issue #15 #19: Fixup for theme rename

---
 claro.theme                                   |   9 +-
 .../components/form--checkbox-radio--ie.css   | 104 ++++++------
 css/src/components/form--checkbox-radio.css   | 154 ++++++++++--------
 3 files changed, 136 insertions(+), 131 deletions(-)

diff --git a/claro.theme b/claro.theme
index bc046de..f357282 100644
--- a/claro.theme
+++ b/claro.theme
@@ -199,9 +199,9 @@ function claro_preprocess_form_element(&$variables) {
 }
 
 /**
- * Implements hook_preprocess_HOOK() for input.
+ * Implements template_preprocess_HOOK() for input.
  */
-function seven_preprocess_input(&$variables) {
+function claro_preprocess_input(&$variables) {
   if (
     !empty($variables['element']['#title_display']) &&
     $variables['element']['#title_display'] === 'attribute' &&
@@ -209,12 +209,7 @@ function seven_preprocess_input(&$variables) {
   ) {
     $variables['attributes']['title'] = (string) $variables['element']['#title'];
   }
-}
 
-/**
- * Implements template_preprocess_HOOK() for input.
- */
-function claro_preprocess_input(&$variables) {
   $type_api = $variables['element']['#type'];
   $type_html = $variables['attributes']['type'];
   $text_types_html = [
diff --git a/css/src/components/form--checkbox-radio--ie.css b/css/src/components/form--checkbox-radio--ie.css
index 41b4aae..9f1ca26 100644
--- a/css/src/components/form--checkbox-radio--ie.css
+++ b/css/src/components/form--checkbox-radio--ie.css
@@ -3,8 +3,8 @@
  * Checkbox and radio input elements styles for IE11 and below.
  */
 
-input[type="checkbox"]::-ms-check,
-input[type="radio"]::-ms-check {
+.form-element--type-checkbox::-ms-check,
+.form-element--type-radio::-ms-check {
   transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   border: 1px solid var(--color-input-border);
   display: inline-block;
@@ -20,64 +20,64 @@ input[type="radio"]::-ms-check {
   box-sizing: border-box;
   color: transparent; /* IE */
 }
-input[type="radio"]::-ms-check {
+.form-element--type-radio::-ms-check {
   border-radius: 19px;
   width: 19px;
   height: 19px;
 }
-input[type="checkbox"]:focus::-ms-check,
-input[type="radio"]:focus::-ms-check {
+.form-element--type-checkbox:focus::-ms-check,
+.form-element--type-radio:focus::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
   outline: none;
   color: transparent; /* IE */
 }
-input[type="checkbox"]:hover::-ms-check,
-input[type="radio"]:hover::-ms-check {
+.form-element--type-checkbox:hover::-ms-check,
+.form-element--type-radio:hover::-ms-check {
   border-color: var(--color-input-fg);
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:focus:hover::-ms-check,
-input[type="radio"]:focus:hover::-ms-check {
+.form-element--type-checkbox:focus:hover::-ms-check,
+.form-element--type-radio:focus:hover::-ms-check {
   outline: none;
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:checked::-ms-check {
+.form-element--type-checkbox:checked::-ms-check {
   background-color: var(--color-input-border-focus);
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
-input[type="radio"]:checked::-ms-check {
+.form-element--type-radio:checked::-ms-check {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
   color: transparent; /* IE */
   outline: none;
 }
-input[type="radio"]:checked:focus::-ms-check {
+.form-element--type-radio:checked:focus::-ms-check {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
   outline: none;
 }
-input[type="checkbox"]:checked:hover::-ms-check {
+.form-element--type-checkbox:checked:hover::-ms-check {
   background-color: var(--color-input-fg);
   border-color: var(--color-input-fg);
 }
-input[type="radio"]:checked:hover::-ms-check {
+.form-element--type-radio:checked:hover::-ms-check {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:active::-ms-check {
+.form-element--type-checkbox:active::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-input[type="checkbox"]:active:hover::-ms-check,
-input[type="radio"]:active:hover::-ms-check,
-input[type="radio"]:checked:active:hover::-ms-check {
+.form-element--type-checkbox:active:hover::-ms-check,
+.form-element--type-radio:active:hover::-ms-check,
+.form-element--type-radio:checked:active:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="radio"]:checked:focus:hover::-ms-check {
+.form-element--type-radio:checked:focus:hover::-ms-check {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
@@ -86,73 +86,73 @@ input[type="radio"]:checked:focus:hover::-ms-check {
 /**
  * Error states.
  */
-input[type="checkbox"].error::-ms-check,
-input[type="radio"].error::-ms-check {
+.form-element--type-checkbox.error::-ms-check,
+.form-element--type-radio.error::-ms-check {
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:focus::-ms-check,
-input[type="radio"].error:focus::-ms-check {
+.form-element--type-checkbox.error:focus::-ms-check,
+.form-element--type-radio.error:focus::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:hover::-ms-check,
-input[type="radio"].error:hover::-ms-check {
+.form-element--type-checkbox.error:hover::-ms-check,
+.form-element--type-radio.error:hover::-ms-check {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:focus:hover::-ms-check,
-input[type="radio"].error:focus:hover::-ms-check {
+.form-element--type-checkbox.error:focus:hover::-ms-check,
+.form-element--type-radio.error:focus:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:checked::-ms-check {
+.form-element--type-checkbox.error:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
 }
-input[type="radio"].error:checked::-ms-check,
-input[type="radio"].error:checked:hover::-ms-check {
+.form-element--type-radio.error:checked::-ms-check,
+.form-element--type-radio.error:checked:hover::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
 }
-input[type="checkbox"].error:checked:hover::-ms-check,
-input[type="radio"].error:checked:hover::-ms-check {
+.form-element--type-checkbox.error:checked:hover::-ms-check,
+.form-element--type-radio.error:checked:hover::-ms-check {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
-input[type="checkbox"].error:checked:focus:hover::-ms-check,
-input[type="radio"].error:checked:focus::-ms-check,
-input[type="radio"].error:checked:focus:hover::-ms-check {
+.form-element--type-checkbox.error:checked:focus:hover::-ms-check,
+.form-element--type-radio.error:checked:focus::-ms-check,
+.form-element--type-radio.error:checked:focus:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }
-input[type="checkbox"].error:active:hover::-ms-check,
-input[type="radio"].error:active:hover::-ms-check,
-input[type="radio"].error:checked:active:hover::-ms-check {
+.form-element--type-checkbox.error:active:hover::-ms-check,
+.form-element--type-radio.error:active:hover::-ms-check,
+.form-element--type-radio.error:checked:active:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
 /**
  * Disabled states.
  */
-input[type="checkbox"][disabled]::-ms-check,
-input[type="radio"][disabled]::-ms-check,
-input[type="checkbox"][disabled]:hover::-ms-check,
-input[type="radio"][disabled]:hover::-ms-check,
-input[type="radio"][disabled]:focus:active::-ms-check,
-input[type="radio"][disabled]:active:hover::-ms-check,
-input[type="checkbox"][disabled].error::-ms-check,
-input[type="radio"][disabled].error::-ms-check,
-input[type="checkbox"][disabled].error:hover::-ms-check,
-input[type="radio"][disabled].error:hover::-ms-check,
-input[type="radio"][disabled].error:active:hover::-ms-check {
+.form-element--type-checkbox[disabled]::-ms-check,
+.form-element--type-radio[disabled]::-ms-check,
+.form-element--type-checkbox[disabled]:hover::-ms-check,
+.form-element--type-radio[disabled]:hover::-ms-check,
+.form-element--type-radio[disabled]:focus:active::-ms-check,
+.form-element--type-radio[disabled]:active:hover::-ms-check,
+.form-element--type-checkbox[disabled].error::-ms-check,
+.form-element--type-radio[disabled].error::-ms-check,
+.form-element--type-checkbox[disabled].error:hover::-ms-check,
+.form-element--type-radio[disabled].error:hover::-ms-check,
+.form-element--type-radio[disabled].error:active:hover::-ms-check {
   box-shadow: none;
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
 }
-input[type="checkbox"][disabled]:checked::-ms-check {
+.form-element--type-checkbox[disabled]:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
-input[type="radio"][disabled]:checked::-ms-check,
-input[type="radio"][disabled].error:checked::-ms-check {
+.form-element--type-radio[disabled]:checked::-ms-check,
+.form-element--type-radio[disabled].error:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index 43a1d14..5a9d1e7 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -3,16 +3,6 @@
  * Checkbox and radio input elements.
  */
 
-/**
- * When form items are nested in radios or checkboxes group, reduce the default
- * space between them.
- */
-.form-radios .form-item,
-.form-checkboxes .form-item {
-  margin-top: 0.4em;
-  margin-bottom: 0.4em;
-}
-
 /**
  * Form item modifiers.
  */
@@ -27,29 +17,36 @@
   margin-left: 0;
 }
 
-.form-type--checkbox input,
-.form-type--radio input {
+/**
+ * Radio and checkbox items that are the child of a form item.
+ */
+.form-type--checkbox .form-element--type-checkbox,
+.form-type--radio .form-element--type-radio {
   float: left; /* LTR */
   margin-left: -24px; /* LTR */
   position: relative;
   top: 0.75em;
   transform: translateY(-50%);
 }
-[dir="rtl"] .form-type--checkbox input,
-[dir="rtl"] .form-type--radio input {
+[dir="rtl"] .form-type--checkbox .form-element--type-checkbox,
+[dir="rtl"] .form-type--radio .form-element--type-radios {
   float: right;
   margin-right: -24px;
   margin-left: 0;
 }
 
-.form-type--checkbox.form-item--no-label {
+.form-type--checkbox.form-item--no-label,
+.form-type--radio.form-item--no-label {
   margin-left: 0;
 }
-[dir="rtl"] .form-type--checkbox.form-item--no-label {
+[dir="rtl"] .form-type--checkbox.form-item--no-label,
+[dir="rtl"] .form-type--radio.form-item--no-label {
   margin-right: 0;
 }
-.form-type--checkbox.form-item--no-label input,
-[dir="rtl"] .form-type--checkbox.form-item--no-label input {
+.form-type--checkbox.form-item--no-label .form-element--type-checkbox,
+[dir="rtl"] .form-type--checkbox.form-item--no-label .form-element--type-checkbox,
+.form-type--radio.form-item--no-label .form-element--type-radio,
+[dir="rtl"] .form-type--radio.form-item--no-label .form-element--type-radio {
   float: none;
   margin-right: 0;
   margin-left: 0;
@@ -57,8 +54,21 @@
   transform: none;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+/**
+ * When form items are nested in radios or checkboxes group, reduce the default
+ * space between them.
+ */
+.form-checkboxes .form-type--checkbox,
+.form-radios .form-type--radio {
+ margin-top: 0.4em;
+ margin-bottom: 0.4em;
+}
+
+/**
+ * Input appearance.
+ */
+.form-element--type-checkbox,
+.form-element--type-radio {
   transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   appearance: none;
   border: 1px solid var(--color-input-border);
@@ -74,57 +84,57 @@ input[type="radio"] {
   vertical-align: text-bottom;
   box-sizing: border-box;
 }
-input[type="radio"] {
+.form-element--type-radio {
   border-radius: 19px;
   width: 19px;
   height: 19px;
 }
-input[type="checkbox"]:focus,
-input[type="radio"]:focus {
+.form-element--type-checkbox:focus,
+.form-element--type-radio:focus {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-input[type="checkbox"]:hover,
-input[type="radio"]:hover {
+.form-element--type-checkbox:hover,
+.form-element--type-radio:hover {
   border-color: var(--color-input-fg);
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:focus:hover,
-input[type="radio"]:focus:hover {
+.form-element--type-checkbox:focus:hover,
+.form-element--type-radio:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:checked {
+.form-element--type-checkbox:checked {
   background-color: var(--color-input-border-focus);
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
 }
-input[type="radio"]:checked {
+.form-element--type-radio:checked {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
 }
-input[type="radio"]:checked:focus {
+.form-element--type-radio:checked:focus {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
 }
-input[type="checkbox"]:checked:hover {
+.form-element--type-checkbox:checked:hover {
   background-color: var(--color-input-fg);
   border-color: var(--color-input-fg);
 }
-input[type="radio"]:checked:hover {
+.form-element--type-radio:checked:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="checkbox"]:active {
+.form-element--type-checkbox:active {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-input[type="checkbox"]:active:hover,
-input[type="radio"]:active:hover,
-input[type="radio"]:checked:active:hover {
+.form-element--type-checkbox:active:hover,
+.form-element--type-radio:active:hover,
+.form-element--type-radio:checked:active:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-input[type="radio"]:checked:focus:hover {
+.form-element--type-radio:checked:focus:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
@@ -133,81 +143,81 @@ input[type="radio"]:checked:focus:hover {
 /**
  * Error states.
  */
-input[type="checkbox"].error,
-input[type="radio"].error {
+.form-element--type-checkbox.error,
+.form-element--type-radio.error {
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:focus,
-input[type="radio"].error:focus {
+.form-element--type-checkbox.error:focus,
+.form-element--type-radio.error:focus {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:hover,
-input[type="radio"].error:hover {
+.form-element--type-checkbox.error:hover,
+.form-element--type-radio.error:hover {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:focus:hover,
-input[type="radio"].error:focus:hover {
+.form-element--type-checkbox.error:focus:hover,
+.form-element--type-radio.error:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-input[type="checkbox"].error:checked {
+.form-element--type-checkbox.error:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
 }
-input[type="radio"].error:checked,
-input[type="radio"].error:checked:hover {
+.form-element--type-radio.error:checked,
+.form-element--type-radio.error:checked:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
 }
-input[type="checkbox"].error:checked:hover,
-input[type="radio"].error:checked:hover {
+.form-element--type-checkbox.error:checked:hover,
+.form-element--type-radio.error:checked:hover {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
-input[type="checkbox"].error:checked:focus:hover,
-input[type="radio"].error:checked:focus,
-input[type="radio"].error:checked:focus:hover {
+.form-element--type-checkbox.error:checked:focus:hover,
+.form-element--type-radio.error:checked:focus,
+.form-element--type-radio.error:checked:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }
-input[type="checkbox"].error:active:hover,
-input[type="radio"].error:active:hover,
-input[type="radio"].error:checked:active:hover {
+.form-element--type-checkbox.error:active:hover,
+.form-element--type-radio.error:active:hover,
+.form-element--type-radio.error:checked:active:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
 /**
  * Disabled states.
  */
-input[type="checkbox"][disabled],
-input[type="radio"][disabled],
-input[type="checkbox"][disabled]:hover,
-input[type="radio"][disabled]:hover,
-input[type="radio"][disabled]:focus:active,
-input[type="radio"][disabled]:active:hover,
-input[type="checkbox"][disabled].error,
-input[type="radio"][disabled].error,
-input[type="checkbox"][disabled].error:hover,
-input[type="radio"][disabled].error:hover,
-input[type="radio"][disabled].error:active:hover {
+.form-element--type-checkbox[disabled],
+.form-element--type-radio[disabled],
+.form-element--type-checkbox[disabled]:hover,
+.form-element--type-radio[disabled]:hover,
+.form-element--type-radio[disabled]:focus:active,
+.form-element--type-radio[disabled]:active:hover,
+.form-element--type-checkbox[disabled].error,
+.form-element--type-radio[disabled].error,
+.form-element--type-checkbox[disabled].error:hover,
+.form-element--type-radio[disabled].error:hover,
+.form-element--type-radio[disabled].error:active:hover {
   box-shadow: none;
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
 }
-input[type="checkbox"][disabled]:checked {
+.form-element--type-checkbox[disabled]:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
 }
-input[type="radio"][disabled]:checked,
-input[type="radio"][disabled].error:checked {
+.form-element--type-radio[disabled]:checked,
+.form-element--type-radio[disabled].error:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
 }
 
 @media screen and (max-width: 600px) {
-  input[type="checkbox"] {
+  .form-element--type-checkbox {
     width: 18px;
   }
 
-  input[type="radio"] {
+  .form-element--type-radio {
     width: 19px;
   }
 }

From 0052cdddf19c441e1888c806cbf149cca95d00f4 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Thu, 13 Dec 2018 10:00:07 +0100
Subject: [PATCH 07/10] Issue #15 #19: BEM module for checkbox and radio styles

---
 claro.theme                                   |  19 +++
 .../components/form--checkbox-radio--ie.css   |  88 +++++-------
 css/src/components/form--checkbox-radio.css   | 129 +++++++-----------
 css/src/components/form--text.css             |   8 ++
 css/src/components/form.css                   |  26 +++-
 templates/fieldset.html.twig                  |   1 -
 templates/form-element.html.twig              |   1 +
 7 files changed, 131 insertions(+), 141 deletions(-)

diff --git a/claro.theme b/claro.theme
index f357282..cadc9fc 100644
--- a/claro.theme
+++ b/claro.theme
@@ -234,6 +234,11 @@ function claro_preprocess_input(&$variables) {
     $variables['attributes']['class'][] = Html::getClass('form-element--type-' . $type_html);
     $variables['attributes']['class'][] = Html::getClass('form-element--api-' . $type_api);
   }
+
+  if (in_array($type_html, ['checkbox', 'radio'])) {
+    $variables['attributes']['class'][] = 'form-boolean';
+    $variables['attributes']['class'][] = Html::getClass('form-boolean--type-' . $type_html);
+  }
 }
 
 /**
@@ -274,3 +279,17 @@ function claro_preprocess_fieldset(&$variables) {
     }
   }
 }
+
+/**
+ * Implements template_preprocess_HOOK() for checkboxes.
+ */
+function claro_preprocess_checkboxes(&$variables) {
+  $variables['attributes']['class'][] = 'form-boolean-group';
+}
+
+/**
+ * Implements template_preprocess_HOOK() for radios.
+ */
+function claro_preprocess_radios(&$variables) {
+  $variables['attributes']['class'][] = 'form-boolean-group';
+}
diff --git a/css/src/components/form--checkbox-radio--ie.css b/css/src/components/form--checkbox-radio--ie.css
index 9f1ca26..af13bfe 100644
--- a/css/src/components/form--checkbox-radio--ie.css
+++ b/css/src/components/form--checkbox-radio--ie.css
@@ -3,8 +3,7 @@
  * Checkbox and radio input elements styles for IE11 and below.
  */
 
-.form-element--type-checkbox::-ms-check,
-.form-element--type-radio::-ms-check {
+.form-boolean::-ms-check {
   transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   border: 1px solid var(--color-input-border);
   display: inline-block;
@@ -20,64 +19,60 @@
   box-sizing: border-box;
   color: transparent; /* IE */
 }
-.form-element--type-radio::-ms-check {
+.form-boolean--type-radio::-ms-check {
   border-radius: 19px;
   width: 19px;
   height: 19px;
 }
-.form-element--type-checkbox:focus::-ms-check,
-.form-element--type-radio:focus::-ms-check {
+.form-boolean:focus::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
   outline: none;
   color: transparent; /* IE */
 }
-.form-element--type-checkbox:hover::-ms-check,
-.form-element--type-radio:hover::-ms-check {
+.form-boolean:hover::-ms-check {
   border-color: var(--color-input-fg);
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:focus:hover::-ms-check,
-.form-element--type-radio:focus:hover::-ms-check {
+.form-boolean:focus:hover::-ms-check {
   outline: none;
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:checked::-ms-check {
+.form-boolean--type-checkbox:checked::-ms-check {
   background-color: var(--color-input-border-focus);
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
-.form-element--type-radio:checked::-ms-check {
+.form-boolean--type-radio:checked::-ms-check {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
   color: transparent; /* IE */
   outline: none;
 }
-.form-element--type-radio:checked:focus::-ms-check {
+.form-boolean--type-radio:checked:focus::-ms-check {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
   outline: none;
 }
-.form-element--type-checkbox:checked:hover::-ms-check {
+.form-boolean--type-checkbox:checked:hover::-ms-check {
   background-color: var(--color-input-fg);
   border-color: var(--color-input-fg);
 }
-.form-element--type-radio:checked:hover::-ms-check {
+.form-boolean--type-radio:checked:hover::-ms-check {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:active::-ms-check {
+.form-boolean--type-checkbox:active::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-.form-element--type-checkbox:active:hover::-ms-check,
-.form-element--type-radio:active:hover::-ms-check,
-.form-element--type-radio:checked:active:hover::-ms-check {
+.form-boolean:active:hover::-ms-check,
+.form-boolean--type-radio:checked:active:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-radio:checked:focus:hover::-ms-check {
+.form-boolean--type-radio:checked:focus:hover::-ms-check {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
@@ -86,73 +81,62 @@
 /**
  * Error states.
  */
-.form-element--type-checkbox.error::-ms-check,
-.form-element--type-radio.error::-ms-check {
+.form-boolean.error::-ms-check {
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:focus::-ms-check,
-.form-element--type-radio.error:focus::-ms-check {
+.form-boolean.error:focus::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:hover::-ms-check,
-.form-element--type-radio.error:hover::-ms-check {
+.form-boolean.error:hover::-ms-check {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:focus:hover::-ms-check,
-.form-element--type-radio.error:focus:hover::-ms-check {
+.form-boolean.error:focus:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:checked::-ms-check {
+.form-boolean--type-checkbox.error:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
 }
-.form-element--type-radio.error:checked::-ms-check,
-.form-element--type-radio.error:checked:hover::-ms-check {
+.form-boolean--type-radio.error:checked::-ms-check,
+.form-boolean--type-radio.error:checked:hover::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
 }
-.form-element--type-checkbox.error:checked:hover::-ms-check,
-.form-element--type-radio.error:checked:hover::-ms-check {
+.form-boolean.error:checked:hover::-ms-check {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:checked:focus:hover::-ms-check,
-.form-element--type-radio.error:checked:focus::-ms-check,
-.form-element--type-radio.error:checked:focus:hover::-ms-check {
+.form-boolean.error:checked:focus::-ms-check,
+.form-boolean--type-radio.error:checked:focus:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:active:hover::-ms-check,
-.form-element--type-radio.error:active:hover::-ms-check,
-.form-element--type-radio.error:checked:active:hover::-ms-check {
+.form-boolean.error:active:hover::-ms-check,
+.form-boolean--type-radio.error:checked:active:hover::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
 /**
  * Disabled states.
  */
-.form-element--type-checkbox[disabled]::-ms-check,
-.form-element--type-radio[disabled]::-ms-check,
-.form-element--type-checkbox[disabled]:hover::-ms-check,
-.form-element--type-radio[disabled]:hover::-ms-check,
-.form-element--type-radio[disabled]:focus:active::-ms-check,
-.form-element--type-radio[disabled]:active:hover::-ms-check,
-.form-element--type-checkbox[disabled].error::-ms-check,
-.form-element--type-radio[disabled].error::-ms-check,
-.form-element--type-checkbox[disabled].error:hover::-ms-check,
-.form-element--type-radio[disabled].error:hover::-ms-check,
-.form-element--type-radio[disabled].error:active:hover::-ms-check {
+.form-boolean[disabled]::-ms-check,
+.form-boolean[disabled]:hover::-ms-check,
+.form-boolean[disabled].error::-ms-check,
+.form-boolean[disabled].error:hover::-ms-check,
+.form-boolean--type-radio[disabled]:focus:active::-ms-check,
+.form-boolean--type-radio[disabled]:active:hover::-ms-check,
+.form-boolean--type-radio[disabled].error:active:hover::-ms-check {
   box-shadow: none;
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
 }
-.form-element--type-checkbox[disabled]:checked::-ms-check {
+.form-boolean--type-checkbox[disabled]:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
-.form-element--type-radio[disabled]:checked::-ms-check,
-.form-element--type-radio[disabled].error:checked::-ms-check {
+.form-boolean--type-radio[disabled]:checked::-ms-check,
+.form-boolean--type-radio[disabled].error:checked::-ms-check {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
   color: transparent; /* IE */
 }
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index 5a9d1e7..77d95b8 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -6,13 +6,11 @@
 /**
  * Form item modifiers.
  */
-.form-type--checkbox,
-.form-type--radio {
+.form-type--boolean {
   margin-left: 24px; /* LTR */
   line-height: 1.5em;
 }
-[dir="rtl"] .form-type--checkbox,
-[dir="rtl"] .form-type--radio {
+[dir="rtl"] .form-type--boolean {
   margin-right: 24px;
   margin-left: 0;
 }
@@ -20,33 +18,27 @@
 /**
  * Radio and checkbox items that are the child of a form item.
  */
-.form-type--checkbox .form-element--type-checkbox,
-.form-type--radio .form-element--type-radio {
+.form-type--boolean .form-boolean {
   float: left; /* LTR */
   margin-left: -24px; /* LTR */
   position: relative;
   top: 0.75em;
   transform: translateY(-50%);
 }
-[dir="rtl"] .form-type--checkbox .form-element--type-checkbox,
-[dir="rtl"] .form-type--radio .form-element--type-radios {
+[dir="rtl"] .form-type--boolean .form-boolean {
   float: right;
   margin-right: -24px;
   margin-left: 0;
 }
 
-.form-type--checkbox.form-item--no-label,
-.form-type--radio.form-item--no-label {
+.form-type--boolean.form-item--no-label {
   margin-left: 0;
 }
-[dir="rtl"] .form-type--checkbox.form-item--no-label,
-[dir="rtl"] .form-type--radio.form-item--no-label {
+[dir="rtl"] .form-type--boolean.form-item--no-label {
   margin-right: 0;
 }
-.form-type--checkbox.form-item--no-label .form-element--type-checkbox,
-[dir="rtl"] .form-type--checkbox.form-item--no-label .form-element--type-checkbox,
-.form-type--radio.form-item--no-label .form-element--type-radio,
-[dir="rtl"] .form-type--radio.form-item--no-label .form-element--type-radio {
+.form-type--boolean.form-item--no-label .form-boolean,
+[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
   float: none;
   margin-right: 0;
   margin-left: 0;
@@ -58,17 +50,15 @@
  * When form items are nested in radios or checkboxes group, reduce the default
  * space between them.
  */
-.form-checkboxes .form-type--checkbox,
-.form-radios .form-type--radio {
- margin-top: 0.4em;
- margin-bottom: 0.4em;
+.form-boolean-group .form-type--boolean {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
 }
 
 /**
  * Input appearance.
  */
-.form-element--type-checkbox,
-.form-element--type-radio {
+.form-boolean {
   transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   appearance: none;
   border: 1px solid var(--color-input-border);
@@ -84,57 +74,53 @@
   vertical-align: text-bottom;
   box-sizing: border-box;
 }
-.form-element--type-radio {
+.form-boolean--type-radio {
   border-radius: 19px;
   width: 19px;
   height: 19px;
 }
-.form-element--type-checkbox:focus,
-.form-element--type-radio:focus {
+.form-boolean:focus {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-.form-element--type-checkbox:hover,
-.form-element--type-radio:hover {
+.form-boolean:hover {
   border-color: var(--color-input-fg);
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:focus:hover,
-.form-element--type-radio:focus:hover {
+.form-boolean:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:checked {
+.form-boolean--type-checkbox:checked {
   background-color: var(--color-input-border-focus);
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
 }
-.form-element--type-radio:checked {
+.form-boolean--type-radio:checked {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-border-focus);
 }
-.form-element--type-radio:checked:focus {
+.form-boolean--type-radio:checked:focus {
   border-color: var(--color-input-border-focus);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-focus);
 }
-.form-element--type-checkbox:checked:hover {
+.form-boolean--type-checkbox:checked:hover {
   background-color: var(--color-input-fg);
   border-color: var(--color-input-fg);
 }
-.form-element--type-radio:checked:hover {
+.form-boolean--type-radio:checked:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-checkbox:active {
+.form-boolean--type-checkbox:active {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow);
 }
-.form-element--type-checkbox:active:hover,
-.form-element--type-radio:active:hover,
-.form-element--type-radio:checked:active:hover {
+.form-boolean:active:hover,
+.form-boolean--type-radio:checked:active:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
 }
-.form-element--type-radio:checked:focus:hover {
+.form-boolean--type-radio:checked:focus:hover {
   border-color: var(--color-input-fg);
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-fg);
@@ -143,81 +129,60 @@
 /**
  * Error states.
  */
-.form-element--type-checkbox.error,
-.form-element--type-radio.error {
+.form-boolean.error {
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:focus,
-.form-element--type-radio.error:focus {
+.form-boolean.error:focus {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:hover,
-.form-element--type-radio.error:hover {
+.form-boolean.error:hover {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:focus:hover,
-.form-element--type-radio.error:focus:hover {
+.form-boolean.error:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:checked {
+.form-boolean--type-checkbox.error:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
 }
-.form-element--type-radio.error:checked,
-.form-element--type-radio.error:checked:hover {
+.form-boolean--type-radio.error:checked,
+.form-boolean--type-radio.error:checked:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
 }
-.form-element--type-checkbox.error:checked:hover,
-.form-element--type-radio.error:checked:hover {
+.form-boolean.error:checked:hover {
   box-shadow: inset 0 0 0 1px var(--color-input-border-error);
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:checked:focus:hover,
-.form-element--type-radio.error:checked:focus,
-.form-element--type-radio.error:checked:focus:hover {
+.form-boolean.error:checked:focus:hover,
+.form-boolean--type-radio.error:checked:focus:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }
-.form-element--type-checkbox.error:active:hover,
-.form-element--type-radio.error:active:hover,
-.form-element--type-radio.error:checked:active:hover {
+.form-boolean.error:active:hover,
+.form-boolean--type-radio.error:checked:active:hover {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 
 /**
  * Disabled states.
  */
-.form-element--type-checkbox[disabled],
-.form-element--type-radio[disabled],
-.form-element--type-checkbox[disabled]:hover,
-.form-element--type-radio[disabled]:hover,
-.form-element--type-radio[disabled]:focus:active,
-.form-element--type-radio[disabled]:active:hover,
-.form-element--type-checkbox[disabled].error,
-.form-element--type-radio[disabled].error,
-.form-element--type-checkbox[disabled].error:hover,
-.form-element--type-radio[disabled].error:hover,
-.form-element--type-radio[disabled].error:active:hover {
+.form-boolean[disabled],
+.form-boolean[disabled]:hover,
+.form-boolean[disabled].error,
+.form-boolean[disabled].error:hover,
+.form-boolean--type-radio[disabled]:focus:active,
+.form-boolean--type-radio[disabled]:active:hover,
+.form-boolean--type-radio[disabled].error:active:hover {
   box-shadow: none;
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
 }
-.form-element--type-checkbox[disabled]:checked {
+.form-boolean--type-checkbox[disabled]:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
 }
-.form-element--type-radio[disabled]:checked,
-.form-element--type-radio[disabled].error:checked {
+.form-boolean--type-radio[disabled]:checked,
+.form-boolean--type-radio[disabled].error:checked {
   background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
 }
-
-@media screen and (max-width: 600px) {
-  .form-element--type-checkbox {
-    width: 18px;
-  }
-
-  .form-element--type-radio {
-    width: 19px;
-  }
-}
diff --git a/css/src/components/form--text.css b/css/src/components/form--text.css
index 7198542..c76d2b2 100644
--- a/css/src/components/form--text.css
+++ b/css/src/components/form--text.css
@@ -86,5 +86,13 @@
   /* Number, date and time are skipped here */
   .form-element {
     width: 100%;
+    float: none;
+    margin-top: 0.75em;
+    margin-right: 0;
+    margin-left: 0;
+  }
+  .form-element:first-child,
+  .form-item__label + .form-element {
+    margin-top: 0;
   }
 }
diff --git a/css/src/components/form.css b/css/src/components/form.css
index b9070bb..96f62b9 100644
--- a/css/src/components/form.css
+++ b/css/src/components/form.css
@@ -138,7 +138,10 @@ td > .form-item:only-child {
   top: 10px;
 }
 .fieldset__legend--composite {
-  font-weight: normal;
+  margin-top: calc(4em / 14); /* 4px */
+  margin-bottom: calc(4em / 14); /* 4px */
+  font-size: calc(14em / 16); /* 14px */
+  line-height: calc(18 / 14); /* 18px */
   text-transform: none;
 }
 .fieldset__label.is-disabled {
@@ -205,8 +208,7 @@ ul.tips li {
  * @legacy
  */
 @media screen and (max-width: 600px) {
-  .form-actions input,
-  .form-wrapper input {
+  .form-actions input {
     float: none;
     margin-left: 0;
     margin-right: 0;
@@ -214,9 +216,7 @@ ul.tips li {
     width: 100%;
   }
   .form-actions input:first-child,
-  .form-wrapper input:first-child,
-  .form-actions label + input,
-  .form-wrapper label + input {
+  .form-actions label + input {
     margin-top: 0;
   }
   details summary {
@@ -231,4 +231,18 @@ ul.tips li {
   div.form-item div.password-suggestions {
     float: none;
   }
+  #dblog-filter-form .form-actions {
+    float: none;
+    padding: 0;
+  }
+  #edit-cancel {
+    display: block;
+    margin: 10px 0 0 0;
+  }
+}
+
+/* Exceptions */
+#diff-inline-form select,
+div.filter-options select {
+  padding: 0;
 }
diff --git a/templates/fieldset.html.twig b/templates/fieldset.html.twig
index ebd2602..6016b74 100644
--- a/templates/fieldset.html.twig
+++ b/templates/fieldset.html.twig
@@ -24,7 +24,6 @@
       'fieldset__label',
       required ? 'js-form-required',
       required ? 'form-required',
-      attributes.hasClass('error') ? 'has-error',
     ]
   %}
   {%
diff --git a/templates/form-element.html.twig b/templates/form-element.html.twig
index a31d5c5..249a990 100644
--- a/templates/form-element.html.twig
+++ b/templates/form-element.html.twig
@@ -14,6 +14,7 @@
     'form-item',
     'js-form-type-' ~ type|clean_class,
     'form-type--' ~ type|clean_class,
+    type in ['checkbox', 'radio'] ? 'form-type--boolean',
     'js-form-item-' ~ name|clean_class,
     'form-item--' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-item--no-label',

From 96f52dc618d3b0ef785ad015978c7112d91eee18 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Thu, 13 Dec 2018 11:24:14 +0100
Subject: [PATCH 08/10] Issue #15 #19: Add error class for composite fieldset
 if needed (checkboxes, radios)

---
 claro.theme                 | 9 ++++++++-
 css/src/components/form.css | 3 +++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/claro.theme b/claro.theme
index cadc9fc..99e231b 100644
--- a/claro.theme
+++ b/claro.theme
@@ -271,7 +271,14 @@ function claro_preprocess_datetime_wrapper(&$variables) {
  * Implements template_preprocess_HOOK() for fieldset.
  */
 function claro_preprocess_fieldset(&$variables) {
-  if (!empty($variables['element']['#disabled'])) {
+  $element = $variables['element'];
+  $composite_types = ['checkboxes', 'radios'];
+
+  if (in_array($element['#type'], $composite_types) && !empty($variables['element']['#children_errors'])) {
+    $variables['legend_span']['attributes']->addClass('has-error');
+  }
+
+  if (!empty($element['#disabled'])) {
     $variables['legend_span']['attributes']->addClass('is-disabled');
 
     if (!empty($variables['description']) && !empty($variables['description']['attributes'])) {
diff --git a/css/src/components/form.css b/css/src/components/form.css
index 96f62b9..1d23856 100644
--- a/css/src/components/form.css
+++ b/css/src/components/form.css
@@ -147,6 +147,9 @@ td > .form-item:only-child {
 .fieldset__label.is-disabled {
   color: var(--color-input-fg-disabled);
 }
+.fieldset__label.has-error {
+  color: var(--color-input-error);
+}
 .fieldset__description {
   font-size: calc(12em / 16); /* 12px */
   line-height: calc(17 / 12); /* 17px */

From effd4e7f5be90e653cd9f90760cf75bd04c67621 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Wed, 19 Dec 2018 17:01:57 +0100
Subject: [PATCH 09/10] Issue #15 #19: Change appearance of checked checkboxes
 with error

---
 css/src/components/form--checkbox-radio--ie.css | 8 ++++++--
 css/src/components/form--checkbox-radio.css     | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/css/src/components/form--checkbox-radio--ie.css b/css/src/components/form--checkbox-radio--ie.css
index af13bfe..d82461e 100644
--- a/css/src/components/form--checkbox-radio--ie.css
+++ b/css/src/components/form--checkbox-radio--ie.css
@@ -96,7 +96,8 @@
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 .form-boolean--type-checkbox.error:checked::-ms-check {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
+  background-color: var(--color-input-border-error);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
 }
 .form-boolean--type-radio.error:checked::-ms-check,
 .form-boolean--type-radio.error:checked:hover::-ms-check {
@@ -107,8 +108,11 @@
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
+.form-boolean--type-checkbox.error:checked:hover::-ms-check {
+  background-color: var(--color-input-border-error);
+}
 .form-boolean.error:checked:focus::-ms-check,
-.form-boolean--type-radio.error:checked:focus:hover::-ms-check {
+.form-boolean--type-radio.error:checked:focus::-ms-check {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index 77d95b8..c7ca58f 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -144,7 +144,8 @@
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
 }
 .form-boolean--type-checkbox.error:checked {
-  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23d72222'/%3E%3C/svg%3E");
+  background-color: var(--color-input-border-error);
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%23fff'/%3E%3C/svg%3E");
 }
 .form-boolean--type-radio.error:checked,
 .form-boolean--type-radio.error:checked:hover {
@@ -155,8 +156,11 @@
   background-color: var(--color-input-bg);
   border-color: var(--color-input-border-error);
 }
+.form-boolean--type-checkbox.error:checked:hover {
+  background-color: var(--color-input-border-error);
+}
 .form-boolean.error:checked:focus:hover,
-.form-boolean--type-radio.error:checked:focus:hover {
+.form-boolean--type-radio.error:checked:focus {
   box-shadow: 0 0 0 4px var(--color-input-focus-shadow), inset 0 0 0 1px var(--color-input-border-error);
   border-color: var(--color-input-border-error);
 }

From ccd24d25d10cc21f532d3308918154cac6433685 Mon Sep 17 00:00:00 2001
From: Zoltan Horvath <zoltan.horvath@cheppers.com>
Date: Tue, 8 Jan 2019 11:16:51 +0100
Subject: [PATCH 10/10] Issue #15 #19: Remove transitions and ensure that
 fieldset type is defined before comparing

---
 claro.theme                                     | 2 +-
 css/src/components/form--checkbox-radio--ie.css | 1 -
 css/src/components/form--checkbox-radio.css     | 1 -
 css/src/components/form--text.css               | 1 -
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/claro.theme b/claro.theme
index 99e231b..2507fad 100644
--- a/claro.theme
+++ b/claro.theme
@@ -274,7 +274,7 @@ function claro_preprocess_fieldset(&$variables) {
   $element = $variables['element'];
   $composite_types = ['checkboxes', 'radios'];
 
-  if (in_array($element['#type'], $composite_types) && !empty($variables['element']['#children_errors'])) {
+  if (!empty($element['#type']) && in_array($element['#type'], $composite_types) && !empty($variables['element']['#children_errors'])) {
     $variables['legend_span']['attributes']->addClass('has-error');
   }
 
diff --git a/css/src/components/form--checkbox-radio--ie.css b/css/src/components/form--checkbox-radio--ie.css
index d82461e..b985af0 100644
--- a/css/src/components/form--checkbox-radio--ie.css
+++ b/css/src/components/form--checkbox-radio--ie.css
@@ -4,7 +4,6 @@
  */
 
 .form-boolean::-ms-check {
-  transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   border: 1px solid var(--color-input-border);
   display: inline-block;
   width: 18px;
diff --git a/css/src/components/form--checkbox-radio.css b/css/src/components/form--checkbox-radio.css
index c7ca58f..c920bec 100644
--- a/css/src/components/form--checkbox-radio.css
+++ b/css/src/components/form--checkbox-radio.css
@@ -59,7 +59,6 @@
  * Input appearance.
  */
 .form-boolean {
-  transition: all var(--speed-transition) ease-in-out 0s, background-image 0s linear 0s;
   appearance: none;
   border: 1px solid var(--color-input-border);
   display: inline-block;
diff --git a/css/src/components/form--text.css b/css/src/components/form--text.css
index c76d2b2..48d973e 100644
--- a/css/src/components/form--text.css
+++ b/css/src/components/form--text.css
@@ -14,7 +14,6 @@
   font-size: 1em;
   line-height: 1.5;
   color: var(--color-input-fg);
-  transition: border linear var(--speed-transition), box-shadow linear var(--speed-transition);
   min-height: 3em; /* iOS. */
 }