From 12a03a9a72f7895d571dbaeeb245d92aa277a610 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 6 Oct 2023 17:48:03 +0200 Subject: refactor(components): merge HeadingButton and Widget components The HeadingButton component was only used inside Widget component and it is not very useful on its own so I merge the two components in a new Collapsible component. --- src/components/molecules/layout/widget.module.scss | 65 ---------------------- 1 file changed, 65 deletions(-) delete mode 100644 src/components/molecules/layout/widget.module.scss (limited to 'src/components/molecules/layout/widget.module.scss') diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss deleted file mode 100644 index 1a601e5..0000000 --- a/src/components/molecules/layout/widget.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; - -.widget { - display: flex; - flex-flow: column; - - &__header { - z-index: 2; - background: var(--color-bg); - } - - &__body { - position: relative; - } - - &--has-borders & { - &__body { - border: fun.convert-px(2) solid var(--color-primary-dark); - } - } - - &--collapsed & { - &__body { - max-height: 0; - margin: 0; - visibility: hidden; - opacity: 0; - overflow: hidden; - border: 0 solid transparent; - transition: all 0.1s linear 0.3s, - max-height 0.5s cubic-bezier(0, 1, 0, 1) 0s, margin 0.3s ease-in-out 0s; - } - } - - &--expanded#{&}--has-scroll { - @include mix.media("screen") { - @include mix.dimensions("lg") { - max-height: 95vh; - - .widget__body { - overflow: hidden; - } - - &:hover, - &:focus-within { - .widget__body { - overflow-y: auto; - } - } - } - } - } - - &--expanded & { - &__body { - max-height: 10000px; // needs a fixed value for transition. - margin: var(--spacing-sm) 0; - opacity: 1; - visibility: visible; - transition: all 0.5s ease-in-out 0s, border 0s linear 0s, - max-height 0.6s ease-in-out 0s; - } - } -} -- cgit v1.2.3