@ons/design-system 70.0.7 → 70.0.9

package/components/checkboxes/_checkbox.scss

@@ -2,224 +2,224 @@ $checkbox-input-width: 22px;
 $checkbox-padding: 11px;
 
 .ons-checkbox {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-
-  &__input {
-    appearance: none;
-    background-color: var(--ons-color-input-bg);
-    border: 2px solid var(--ons-color-input-border);
-    border-radius: 0.2rem;
-    box-sizing: border-box;
-    cursor: pointer;
-    height: $checkbox-input-width;
-    left: $checkbox-padding;
-    position: absolute;
-    top: $checkbox-padding + 3px;
-    width: $checkbox-input-width;
+    display: inline-block;
+    position: relative;
+    width: 100%;
     z-index: 1;
 
-    // Check icon
-    &::after {
-      border: solid var(--ons-color-input-border);
-      border-top-color: var(--ons-color-input-bg);
-      border-width: 0 0 3px 3px;
-      box-sizing: border-box;
-      content: '';
-      height: 7px;
-      left: 2px;
-      opacity: 0;
-      position: absolute;
-      top: 4px;
-      transform: rotate(-45deg);
-      width: 14px;
-    }
+    &__input {
+        appearance: none;
+        background-color: var(--ons-color-input-bg);
+        border: 2px solid var(--ons-color-input-border);
+        border-radius: 0.2rem;
+        box-sizing: border-box;
+        cursor: pointer;
+        height: $checkbox-input-width;
+        left: $checkbox-padding;
+        position: absolute;
+        top: $checkbox-padding + 3px;
+        width: $checkbox-input-width;
+        z-index: 1;
+
+        // Check icon
+        &::after {
+            border: solid var(--ons-color-input-border);
+            border-top-color: var(--ons-color-input-bg);
+            border-width: 0 0 3px 3px;
+            box-sizing: border-box;
+            content: '';
+            height: 7px;
+            left: 2px;
+            opacity: 0;
+            position: absolute;
+            top: 4px;
+            transform: rotate(-45deg);
+            width: 14px;
+        }
 
-    &:focus,
-    &:checked {
-      outline: none;
-    }
+        &:focus,
+        &:checked {
+            outline: none;
+        }
 
-    &:checked::after {
-      opacity: 1;
-    }
+        &:checked::after {
+            opacity: 1;
+        }
 
-    &:disabled {
-      border: 2px solid var(--ons-color-border-disabled);
-      cursor: not-allowed;
-    }
+        &:disabled {
+            border: 2px solid var(--ons-color-border-disabled);
+            cursor: not-allowed;
+        }
 
-    &:disabled:checked::after {
-      border-color: var(--ons-color-border-disabled);
-    }
+        &:disabled:checked::after {
+            border-color: var(--ons-color-border-disabled);
+        }
 
-    &:disabled + .ons-checkbox__label,
-    &:disabled:checked + .ons-checkbox__label {
-      color: var(--ons-color-border-disabled);
-      cursor: not-allowed;
+        &:disabled + .ons-checkbox__label,
+        &:disabled:checked + .ons-checkbox__label {
+            color: var(--ons-color-border-disabled);
+            cursor: not-allowed;
 
-      &::before {
-        border: 1px solid var(--ons-color-border-disabled);
-      }
-    }
+            &::before {
+                border: 1px solid var(--ons-color-border-disabled);
+            }
+        }
 
-    &:disabled:checked + .ons-checkbox__label {
-      &::before {
-        box-shadow: 0 0 0 1px var(--ons-color-border-disabled);
-      }
+        &:disabled:checked + .ons-checkbox__label {
+            &::before {
+                box-shadow: 0 0 0 1px var(--ons-color-border-disabled);
+            }
+        }
     }
-  }
 
-  &--no-border {
-    & > .ons-checkbox__label {
-      padding: 0 0 0 1.85rem;
+    &--no-border {
+        > .ons-checkbox__label {
+            padding: 0 0 0 1.85rem;
 
-      &::before {
-        background: none !important;
-        border: none !important;
-        box-shadow: none !important;
-      }
+            &::before {
+                background: none !important;
+                border: 0 !important;
+                box-shadow: none !important;
+            }
 
-      & > .ons-checkbox__label--with-description {
-        padding: 0;
-      }
-    }
-
-    & > .ons-checkbox__input {
-      left: 0.05rem;
-      top: 0.15rem;
+            > .ons-checkbox__label--with-description {
+                padding: 0;
+            }
+        }
 
-      &:checked,
-      &:focus {
-        & + .ons-checkbox__label::before {
-          background: none;
-          border: none;
-          box-shadow: none;
-          outline: none;
+        > .ons-checkbox__input {
+            left: 0.05rem;
+            top: 0.15rem;
+
+            &:checked,
+            &:focus {
+                + .ons-checkbox__label::before {
+                    background: none;
+                    border: 0;
+                    box-shadow: none;
+                    outline: none;
+                }
+            }
+
+            &:focus {
+                @extend %ons-input-focus;
+            }
         }
-      }
 
-      &:focus {
-        @extend %ons-input-focus;
-      }
+        .ons-checkbox__other {
+            margin: 0.5rem 0 0.5rem 0.5rem;
+        }
     }
 
-    & .ons-checkbox__other {
-      margin: 0.5rem 0 0.5rem 0.5rem;
+    &--no-label {
+        > .ons-checkbox__input {
+            left: auto;
+            position: relative;
+            top: auto;
+            vertical-align: middle;
+
+            &:checked,
+            &:focus {
+                + .ons-checkbox__label::before {
+                    background: none;
+                    border: 0;
+                    box-shadow: none;
+                }
+            }
+
+            &:focus {
+                @extend %ons-input-focus;
+            }
+
+            + .ons-checkbox__label {
+                @extend .ons-u-vh;
+            }
+        }
     }
-  }
 
-  &--no-label {
-    & > .ons-checkbox__input {
-      left: auto;
-      position: relative;
-      top: auto;
-      vertical-align: middle;
+    &__label {
+        cursor: pointer;
+        display: block;
+        padding: $checkbox-padding 1rem $checkbox-padding ($checkbox-padding * 2 + $checkbox-input-width);
+        width: 100%;
 
-      &:checked,
-      &:focus {
-        & + .ons-checkbox__label::before {
-          background: none;
-          border: none;
-          box-shadow: none;
+        &--with-description {
+            padding: 0 1rem $checkbox-padding 0;
         }
-      }
 
-      &:focus {
-        @extend %ons-input-focus;
-      }
+        &::before {
+            background: var(--ons-color-white);
+            border: 1px solid var(--ons-color-input-border);
+            border-radius: 3px;
+            inset: 0;
+            content: '';
+            position: absolute;
+            z-index: -1;
+        }
 
-      & + .ons-checkbox__label {
-        @extend .ons-u-vh;
-      }
+        * {
+            pointer-events: none;
+        }
     }
-  }
 
-  &__label {
-    cursor: pointer;
-    display: block;
-    padding: $checkbox-padding 1rem $checkbox-padding ($checkbox-padding * 2 + $checkbox-input-width);
-    width: 100%;
-
-    &--with-description {
-      padding: 0 1rem $checkbox-padding 0;
+    &__description {
+        display: block;
+        margin-top: 0.25rem;
     }
 
-    &::before {
-      background: var(--ons-color-white);
-      border: 1px solid var(--ons-color-input-border);
-      border-radius: 3px;
-      inset: 0;
-      content: '';
-      position: absolute;
-      z-index: -1;
+    &__other {
+        border-left: 4px solid var(--ons-color-borders-indent);
+        display: block;
+        margin: 0 1rem 0.5rem 1.1rem;
+        padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
     }
 
-    * {
-      pointer-events: none;
+    &__input:checked + &__label::before {
+        background: var(--ons-color-grey-5);
+        box-shadow: 0 0 0 1px var(--ons-color-input-border);
+        outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     }
-  }
-
-  &__description {
-    display: block;
-    margin-top: 0.25rem;
-  }
-
-  &__other {
-    border-left: 4px solid var(--ons-color-borders-indent);
-    display: block;
-    margin: 0 1rem 0.5rem 1.1rem;
-    padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
-  }
-
-  &__input:checked + &__label::before {
-    background: var(--ons-color-grey-5);
-    box-shadow: 0 0 0 1px var(--ons-color-input-border);
-    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-  }
-
-  &__input:focus + &__label::before {
-    @extend %ons-input-focus;
-  }
-
-  &__input:not(:checked) ~ &__other {
-    display: none;
-  }
-
-  &__input:not(:checked) ~ &__other--open {
-    display: block;
-  }
-
-  &--toggle & {
-    &__input {
-      left: 0;
-      top: 0.2rem;
 
-      &:focus {
+    &__input:focus + &__label::before {
         @extend %ons-input-focus;
-      }
     }
 
-    &__label {
-      padding: 0 0 0 ($checkbox-input-width + $checkbox-padding);
-
-      &::before {
-        background: none;
-        border: 0;
-      }
+    &__input:not(:checked) ~ &__other {
+        display: none;
     }
 
-    &__input:checked + .ons-checkbox__label::before,
-    &__input:focus + .ons-checkbox__label::before {
-      background: transparent;
-      box-shadow: none;
+    &__input:not(:checked) ~ &__other--open {
+        display: block;
     }
 
-    &__input:focus + .ons-checkbox__label::before {
-      border: 0;
-      outline: none;
+    &--toggle & {
+        &__input {
+            left: 0;
+            top: 0.2rem;
+
+            &:focus {
+                @extend %ons-input-focus;
+            }
+        }
+
+        &__label {
+            padding: 0 0 0 ($checkbox-input-width + $checkbox-padding);
+
+            &::before {
+                background: none;
+                border: 0;
+            }
+        }
+
+        &__input:checked + .ons-checkbox__label::before,
+        &__input:focus + .ons-checkbox__label::before {
+            background: transparent;
+            box-shadow: none;
+        }
+
+        &__input:focus + .ons-checkbox__label::before {
+            border: 0;
+            outline: none;
+        }
     }
-  }
 }

package/components/checkboxes/_checkboxes.scss

@@ -1,35 +1,45 @@
 .ons-checkboxes {
-  &__label {
-    display: block;
-    margin: 0 0 1rem;
-  }
-
-  &__items {
-    display: block;
-  }
-
-  &__item {
-    display: inline-block;
-    margin: 0 0 0.5rem;
-    width: 100%;
-
-    &:last-child {
-      margin-bottom: 0;
+    &__label {
+        display: block;
+        margin: 0 0 1rem;
     }
 
-    @include mq(s) {
-      min-width: 20rem;
-      width: auto;
+    &__items {
+        display: block;
 
-      &--no-border {
-        min-width: 0;
-      }
+        @include mq(s) {
+            max-width: max-content;
+        }
     }
-  }
 
-  &--mutually-exclusive__item {
-    @extend .ons-checkboxes__item;
+    &__item {
+        display: inline-block;
+        margin: 0 0 0.5rem;
+        width: 100%;
 
-    margin-bottom: 0;
-  }
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        @include mq(s) {
+            min-width: 20rem;
+            :has(select):first-child {
+                min-width: 25rem;
+            }
+
+            &--no-border {
+                min-width: 0;
+            }
+        }
+    }
+
+    &--mutually-exclusive__item {
+        @extend .ons-checkboxes__item;
+
+        margin-bottom: 0;
+
+        @include mq(s) {
+            max-width: max-content;
+        }
+    }
 }

package/components/checkboxes/_macro.njk

@@ -3,12 +3,13 @@
     {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
     {% from "components/button/_macro.njk" import onsButton %}
-
     {% set fields %}
     {% if params.checkboxesLabel is defined %}
-        <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
+        <p class="ons-checkboxes__label{{ ' ' + params.checkboxesLabelClasses if params.checkboxesLabelClasses else '' }}">
+            {{ params.checkboxesLabel }}
+        </p>
     {% endif %}
-        {% set hasOther = false %}
+    {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}
                 {% set hasOther = true %}
@@ -52,90 +53,98 @@
                         {% endif %}
                     {% endfor %}
                 {% endif %}
-                <span class="ons-checkboxes__item{{ " ons-checkboxes__item--no-border" if params.borderless }}">
-                    {% set config = {
-                        "id": checkbox.id,
-                        "name": checkbox.name,
-                        "value": checkbox.value,
-                        "checked": childIsChecked if childIsChecked == true else checkbox.checked,
-                        "disabled": checkbox.disabled,
-                        "borderless": params.borderless,
-                        "classes": checkbox.classes | default('') + borderless | default(''),
-                        "inputClasses": exclusiveClass | default('') + otherClass | default(''),
-                        "label": {
-                            "for": checkbox.id,
-                            "text": labelHTML,
-                            "description": checkbox.label.description,
-                            "classes": checkbox.label.classes | default('')
-                        },
-                        "attributes": checkbox.attributes
-                    } %}
+                <span class="ons-checkboxes__item{{ ' ons-checkboxes__item--no-border' if params.borderless }}">
+                    {%
+                        set config = {
+                            "id": checkbox.id,
+                            "name": checkbox.name,
+                            "value": checkbox.value,
+                            "checked": childIsChecked if childIsChecked == true else checkbox.checked,
+                            "disabled": checkbox.disabled,
+                            "borderless": params.borderless,
+                            "classes": checkbox.classes | default('') + borderless | default(''),
+                            "inputClasses": exclusiveClass | default('') + otherClass | default(''),
+                            "label": {
+                                "for": checkbox.id,
+                                "text": labelHTML,
+                                "description": checkbox.label.description,
+                                "classes": checkbox.label.classes | default('')
+                            },
+                            "attributes": checkbox.attributes
+                        }
+                    %}
 
                     {% if checkbox.other %}
-                        {% set config = config | setAttributes({
-                            "other": {
-                                "open": checkbox.other.open | default(false),
-                                "id": checkbox.other.id,
-                                "name": checkbox.other.name,
-                                "type": checkbox.other.type,
-                                "otherType": checkbox.other.otherType,
-                                "options": checkbox.other.options,
-                                "width": checkbox.other.width,
-                                "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
-                                "attributes": checkbox.other.attributes,
-                                "label": {
-                                    "text": checkbox.other.label.text
-                                },
-                                "legend": checkbox.other.legend,
-                                "legendClasses": checkbox.other.legendClasses,
-                                "value": checkbox.other.value,
-                                "autoSelect": checkbox.other.autoSelect,
-                                "selectAllChildren": checkbox.other.selectAllChildren,
-                                "checkboxes": checkbox.other.checkboxes,
-                                "radios": checkbox.other.radios
-                            }
-                        }) %}
+                        {%
+                            set config = config | setAttributes({
+                                "other": {
+                                    "open": checkbox.other.open | default(false),
+                                    "id": checkbox.other.id,
+                                    "name": checkbox.other.name,
+                                    "type": checkbox.other.type,
+                                    "otherType": checkbox.other.otherType,
+                                    "options": checkbox.other.options,
+                                    "width": checkbox.other.width,
+                                    "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                    "attributes": checkbox.other.attributes,
+                                    "label": {
+                                        "text": checkbox.other.label.text
+                                    },
+                                    "legend": checkbox.other.legend,
+                                    "legendClasses": checkbox.other.legendClasses,
+                                    "value": checkbox.other.value,
+                                    "autoSelect": checkbox.other.autoSelect,
+                                    "selectAllChildren": checkbox.other.selectAllChildren,
+                                    "checkboxes": checkbox.other.checkboxes,
+                                    "radios": checkbox.other.radios
+                                }
+                            })
+                        %}
                     {% endif %}
                     {{ onsCheckbox(config) }}
                 </span>
                 {% if not loop.last %}
-                    <br>
+                    <br />
                 {% endif %}
             {% endfor %}
         </div>
     {% endset %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "attributes": params.attributes,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
-            "error": params.error
-        }) %}
+        {%
+            call onsMutuallyExclusive({
+                "id": params.id,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "attributes": params.attributes,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+                "or": params.mutuallyExclusive.or,
+                "deselectMessage": params.mutuallyExclusive.deselectMessage,
+                "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+                "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% else %}
-        {% call onsFieldset({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "description": params.description,
-            "attributes": params.attributes,
-            "dontWrap": params.dontWrap,
-            "error": params.error
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "description": params.description,
+                "attributes": params.attributes,
+                "dontWrap": params.dontWrap,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% endif %}