From 0578facf4b37ce299dcef0c9a92462699cf3a72f Mon Sep 17 00:00:00 2001 From: Jere Ljungberg Date: Fri, 30 Sep 2022 12:22:38 +0300 Subject: [PATCH 1/4] UHF-6666: Add styles for collapsible component --- src/scss/06_components/forms/__index.scss | 1 + .../06_components/forms/_collapsible.scss | 53 +++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/scss/06_components/forms/_collapsible.scss diff --git a/src/scss/06_components/forms/__index.scss b/src/scss/06_components/forms/__index.scss index 8cd501793..70e926151 100644 --- a/src/scss/06_components/forms/__index.scss +++ b/src/scss/06_components/forms/__index.scss @@ -1,4 +1,5 @@ @import 'checkbox'; +@import 'collapsible'; @import 'form'; @import 'openid-connect-login-form'; @import 'user-login-form'; diff --git a/src/scss/06_components/forms/_collapsible.scss b/src/scss/06_components/forms/_collapsible.scss new file mode 100644 index 000000000..e1ed6e68b --- /dev/null +++ b/src/scss/06_components/forms/_collapsible.scss @@ -0,0 +1,53 @@ +$collapsible_height: 56px; + +.collapsible-wrapper { + position: relative; +} + +.collapsible__element { + border: 2px solid #808080; + border-radius: 2px; +} + +.collapsible-container { + align-items: center; + background: #fff; + display:flex; + font-size: 18px; + height: $collapsible_height; + margin-bottom: 16px; + padding: 12px; +} + +.collapsible__title { + width: calc(100% - 24px); +} + +.collapsible__control { + align-items: center; + background: #fff; + display: flex; + font-size: 18px; + height: 56px; + padding: 12px 16px; + width: 100%; + + &:hover { + cursor: pointer; + } + + &:active, + &:hover, { + border: 2px solid $color-black; + } +} + +.collapsible__children { + background-color: #fff; + position: absolute; + top: $collapsible_height; + width: 100%; + + // Show above other components when opened + z-index: 2; +} From f1519274ea5b3dc786ca4720920b581b4db8ddd8 Mon Sep 17 00:00:00 2001 From: Jere Ljungberg Date: Fri, 30 Sep 2022 12:44:08 +0300 Subject: [PATCH 2/4] UHF-6666: Add exposing events url via data-attribute --- templates/paragraphs/paragraph--event-list.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/paragraphs/paragraph--event-list.html.twig b/templates/paragraphs/paragraph--event-list.html.twig index 297317bbe..1b55c694c 100644 --- a/templates/paragraphs/paragraph--event-list.html.twig +++ b/templates/paragraphs/paragraph--event-list.html.twig @@ -13,7 +13,7 @@ %} {% block component_content %} {# Hook React app to this div #} - + {# Indicate JS not enabled #}