diff --git a/src/patterns/04-components/exp_col_block/_exp_col_block.scss b/src/patterns/04-components/exp_col_block/_exp_col_block.scss index 15df1b13fb7145f38a67d3b35b03f0e729a413f6..144bbd40e059ea3d507bc2b3696337bdd41c1f1b 100644 --- a/src/patterns/04-components/exp_col_block/_exp_col_block.scss +++ b/src/patterns/04-components/exp_col_block/_exp_col_block.scss @@ -20,6 +20,7 @@ background: var(--gray-2); color: var(--gray-6); } + &:hover, &:focus { outline: none; @@ -35,10 +36,12 @@ } } } + .uw-details{ .details__summary { @include svg-background(mobile-arrow-down); background-color: var(--gray-2); + h2, h3, h4, @@ -46,6 +49,7 @@ h6 { color: var(--gray-6); } + &:hover, &:focus { @include svg-background(mobile-arrow-down-w); @@ -59,6 +63,7 @@ } } } + &[open] { > .details__summary { @include svg-background(mobile-arrow-up); @@ -70,6 +75,7 @@ h6 { color: var(--gray-6); } + &:focus { @include svg-background(mobile-arrow-up-w); background-color: var(--gray-6); @@ -101,9 +107,9 @@ } // Else run the loop on the faculties. @else { - .uw-exp-col{ - &:not(.contact){ - .uw-exp-col__button{ + .uw-exp-col { + &:not(.contact) { + .uw-exp-col__button { &[data-type="expand-all"] { background: var(--#{$colour}-primary); border-right: var(--size-xs) solid var(--uw-white); @@ -118,20 +124,24 @@ &:hover, &:focus { outline: none; + &[data-type="expand-all"] { background-color: var(--uw-white); color: var(--#{$colour}-primary); } + &[data-type="collapse-all"] { background-color: var(--uw-white); color: var(--#{$colour}-primary); } } } - .uw-details{ + + .uw-details { .details__summary { background-color: var(--#{$colour}-primary); background-image: inherit; + h2, h3, h4, @@ -147,9 +157,11 @@ &:hover, &:focus { background-color: var(--uw-white); - &::after{ + + &::after { @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down); } + h2, h3, h4, @@ -160,12 +172,15 @@ } } } + .uw-details[open] { .details__summary { background-image: inherit; } + > .details__summary { background-color: var(--#{$colour}-primary); + h2, h3, h4, @@ -183,9 +198,11 @@ .details__summary { background-color: var(--uw-white); background-image: inherit; + &::after { @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down); } + h2, h3, h4, @@ -200,9 +217,11 @@ .details__summary { background-color: var(--uw-white); background-image: inherit; + &::after { @include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up); } + h2, h3, h4, @@ -212,12 +231,15 @@ } } } + &:hover { .details__summary { background-color: var(--uw-white); + &::after { @include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up); } + h2, h3, h4, @@ -233,28 +255,43 @@ } } } + +.uw-exp-col__operations { + list-style-type: none; + margin: 0; + padding: var(--size-2) 0 0; + + li { + display: inline-block; + margin: 0; + padding: 0 0 0 var(--size-2); + } +} + +.uw-exp-col__group-info { + .form-type-entity-autocomplete { + display: inline-block; + width: 90%; + } +} + .uw-exp-col { - &:not(.contact){ + &:not(.contact) { -webkit-font-smoothing: antialiased; - .uw-exp-col__operations { - list-style-type: none; - margin: 0; - padding: var(--size-2) 0 0; - li { - display: inline-block; - } - } + .uw-exp-col__group-info, .uw-exp-col__heading-selector, .uw-exp-col__heading-text { display: inline-block; } + .uw-exp-col__heading-selector { .form-select { display: inline-block; width: 82%; } } + .uw-exp-col__group-info, .uw-exp-col__heading-text { .ui-dialog & { @@ -275,6 +312,7 @@ display: grid; grid-template-columns: 50% 50%; margin-bottom: var(--size-2); + .no-js & { display: none; } @@ -290,6 +328,7 @@ font-weight: 400; margin: 0; max-width: inherit; + .uw-exp-col--controls { text-align: center; } @@ -300,6 +339,7 @@ font-family: inherit !important; margin-bottom: var(--size-2); margin-top: inherit; + .details__summary { background-image: inherit; border: var(--size-xs) solid var(--gray-2); @@ -307,6 +347,7 @@ position: relative; text-shadow: inherit; transition: background-color 0.2s ease-in-out; + &::after { content: ''; display: block; @@ -316,6 +357,7 @@ top: calc(50% - 0.5rem); width: var(--size-2); } + h2, h3, h4, @@ -333,16 +375,20 @@ } } } + .details__content { background-color: var(--gray-1); padding: var(--size-2); + .layout { padding: 0; } + .block { margin-bottom: var(--size-2); } } + .uw-exp-col__group-info { .form-type-entity-autocomplete { display: inline-block; @@ -350,13 +396,15 @@ } } } - &.contact{ - .uw-exp-col__controls{ + + &.contact { + .uw-exp-col__controls { border: var(--size-xs) solid var(--gray-2); display: grid; grid-template-columns: 50% 50%; margin-bottom: var(--size-2); gap: var(--size-05); + .no-js & { display: none; } @@ -376,12 +424,14 @@ display: none; } } + /* stylelint-enable selector-max-id, declaration-no-important */ -.layout-builder{ +.layout-builder { &__section [data-expand-collapse-group], &__section [data-expand-collapse-header] { margin-top: var(--size-5) !important; position: relative; + &:first-of-type { &::before { background: #195c8f;