Skip to content
Snippets Groups Projects

Add Drupal 11 support, drop Drupal 9

Files
9
+ 0
27
/* The radios wrapper.*/
.ssui__item-group,
#drupal-off-canvas:not(.drupal-off-canvas-reset) div.ssui__item-group,
#drupal-off-canvas-wrapper div.ssui__item-group {
display: flex;
flex-wrap: wrap;
@@ -18,7 +17,6 @@
/* The wrapper for each radio input and label. */
.ssui .ssui__item,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__item,
#drupal-off-canvas-wrapper .ssui .ssui__item {
justify-content: initial; /* Gin */
margin: 0 !important;
@@ -28,7 +26,6 @@
/* The radio element. */
.ssui .ssui__input,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input,
#drupal-off-canvas-wrapper .ssui .ssui__input {
appearance: none;
background-color: transparent;
@@ -48,14 +45,12 @@
background-color: transparent;
}
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input,
#drupal-off-canvas-wrapper .ssui .ssui__input {
border-color: #333;
}
/* The 'checked' indicator. */
.ssui__input::after,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input::after,
#drupal-off-canvas-wrapper .ssui__input::after {
background-color: transparent;
background-image: var(--ssuiImgSelected);
@@ -72,13 +67,11 @@
}
.ssui .ssui__input:checked::after,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input:checked::after,
#drupal-off-canvas-wrapper .ssui .ssui__input:checked::after {
opacity: 1;
}
.ssui .ssui__input:not(:focus, :active):hover,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input:not(:focus, :active):hover,
#drupal-off-canvas-wrapper .ssui .ssui__input:not(:focus, :active):hover {
border-color: var(--ssuiBorderHover);
box-shadow: inset 0 0 0 1px var(--ssuiBorderHover);
@@ -86,8 +79,6 @@
.ssui .ssui__input:checked,
.ssui .ssui__input:checked:hover,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input:checked,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input:checked:hover,
#drupal-off-canvas-wrapper .ssui .ssui__input:checked,
#drupal-off-canvas-wrapper .ssui .ssui__input:checked:hover {
border-color: var(--ssuiBorderChecked);
@@ -95,8 +86,6 @@
.ssui .ssui__input.error,
.ssui .ssui__input.error:checked,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input.error,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui .ssui__input.error:checked,
#drupal-off-canvas-wrapper .ssui .ssui__input.error,
#drupal-off-canvas-wrapper .ssui .ssui__input.error:checked {
border-color: var(--ssuiErrorColor);
@@ -104,7 +93,6 @@
/* Add checkered background to provide context to semi-transparent values. */
.ssui__option-wrapper,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__option-wrapper,
#drupal-off-canvas-wrapper .ssui__option-wrapper {
aspect-ratio: var(--ssuiAspectRatio);
background-color: var(--ssuiOptionBgColor);
@@ -114,7 +102,6 @@
/* This is where the user-selected style or color is added. */
.ssui__option,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__option,
#drupal-off-canvas-wrapper .ssui__option {
box-shadow: inset 0 0 0 3px var(--ssuiOffsetHaloColor) !important;
position: relative;
@@ -124,7 +111,6 @@
/* Icons. */
:is(.ssui--empty-icon-on, .ssui--text-icon-on) .ssui__option::before,
:is(.ssui--empty-icon-on, .ssui--text-icon-on) #drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__option::before,
:is(.ssui--empty-icon-on, .ssui--text-icon-on) #drupal-off-canvas-wrapper .ssui__option::before {
font-family: 'style-selector' !important;
font-style: normal;
@@ -144,7 +130,6 @@
/* Empty icon. */
.ssui--empty-icon-on [data-ssui-value='none'] .ssui__option::before,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui--empty-icon-on [data-ssui-value='none'] .ssui__option::before,
#drupal-off-canvas-wrapper .ssui--empty-icon-on [data-ssui-value='none'] .ssui__option::before {
content: "\e901";
color: var(--ssuiEmptyIconColor);
@@ -152,20 +137,17 @@
/* Text icon. */
.ssui--text-icon-on .ssui__item:not([data-ssui-value='none']) .ssui__option::before,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui--text-icon-on .ssui__item:not([data-ssui-value='none']) .ssui__option::before,
#drupal-off-canvas-wrapper .ssui--text-icon-on .ssui__item:not([data-ssui-value='none']) .ssui__option::before {
content: "\e900";
}
/* The inset box shadow doesn't quite work in off-canvas. Not sure why yet. */
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__option,
#drupal-off-canvas-wrapper .ssui__option {
box-shadow: none;
}
/* Add Claro styles for other themes (except Gin) and #drupal-off-canvas:not(.drupal-off-canvas-reset). */
.ssui:not(.ssui--gin) .ssui__input.error,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input.error,
#drupal-off-canvas-wrapper .ssui__input.error {
border-color: var(--ssuiErrorColor);
box-shadow: inset 0 0 0 1px var(--ssuiErrorColor);
@@ -173,8 +155,6 @@
.ssui:not(.ssui--gin) .ssui__input:active,
.ssui:not(.ssui--gin) .ssui__input:hover,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:active,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:hover,
#drupal-off-canvas-wrapper .ssui__input:active,
#drupal-off-canvas-wrapper .ssui__input:hover {
border-color: var(--ssuiColorBlack);
@@ -183,8 +163,6 @@
.ssui:not(.ssui--gin) .ssui__input:focus:active,
.ssui:not(.ssui--gin) .ssui__input:focus:hover,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:focus:active,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:focus:hover,
#drupal-off-canvas-wrapper .ssui__input:focus:active,
#drupal-off-canvas-wrapper .ssui__input:focus:hover {
box-shadow: 0 0 0 2px var(--ssuiOffsetHaloColor),
@@ -193,14 +171,12 @@
}
.ssui:not(.ssui--gin) .ssui__input:checked,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:checked,
#drupal-off-canvas-wrapper .ssui__input:checked {
border-color: var(--ssuiBorderChecked);
box-shadow: inset 0 0 0 1px var(--ssuiBorderChecked);
}
.ssui:not(.ssui--gin) .ssui__input:checked:focus,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:checked:focus,
#drupal-off-canvas-wrapper .ssui__input:checked:focus {
box-shadow: 0 0 0 2px var(--ssuiOffsetHaloColor),
0 0 0 5px var(--ssuiColorGreen),
@@ -209,8 +185,6 @@
.ssui:not(.ssui--gin) .ssui__input:checked:active,
.ssui:not(.ssui--gin) .ssui__input:checked:hover,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:checked:active,
#drupal-off-canvas:not(.drupal-off-canvas-reset) .ssui__input:checked:hover,
#drupal-off-canvas-wrapper .ssui__input:checked:active,
#drupal-off-canvas-wrapper .ssui__input:checked:hover {
border-color: var(--ssuiBorderHover);
@@ -240,7 +214,6 @@
}
/* Off-canvas */
#drupal-off-canvas:not(.drupal-off-canvas-reset) .fieldset__wrapper,
#drupal-off-canvas-wrapper .fieldset__wrapper {
border: none;
padding: 0.25rem;
Loading