diff options
3 files changed, 11 insertions, 17 deletions
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss index 6df997f..fb6230d 100644 --- a/src/components/Sidebar/Sidebar.module.scss +++ b/src/components/Sidebar/Sidebar.module.scss @@ -14,10 +14,7 @@ @include mix.media("screen") { @include mix.dimensions("md") { align-self: stretch; - display: flex; - flex-flow: column; - justify-content: flex-start; - margin: var(--spacing-xs); + margin: 0 var(--spacing-xs) var(--spacing-md); &--right { grid-row: 2 / 4; @@ -35,10 +32,6 @@ } .body { - display: flex; - flex-flow: column; - justify-content: flex-start; - @include mix.media("screen") { @include mix.dimensions("md") { align-self: flex-start; diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss index cd63218..ab90179 100644 --- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss +++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss @@ -51,11 +51,11 @@ margin: 0 0 fun.convert-px(-6); // collapse borders overflow: hidden; visibility: hidden; - transition: max-height 0.5s linear 0s, margin 0.3s ease-in-out 0.3s, - visibility 0.1s linear 0.6s; + transition: all 0.6s cubic-bezier(0, 1, 0, 1) 0s, margin 0.2s ease-in-out 0s, + border 0.1s ease-in-out 0.3s, visibility 0.1s linear 0.6s; &--borders { - border: fun.convert-px(2) solid var(--color-primary-dark); + border: 0 solid transparent; } > *:last-child { @@ -75,8 +75,6 @@ display: flex; flex-flow: column; - height: max-content; - max-height: 100%; &--expanded { .icon::before { @@ -84,12 +82,16 @@ } .body { - max-height: 100%; + max-height: 10000px; // needs a fixed value for transition. margin: var(--spacing-sm) 0; - overflow-y: visible; + overflow: visible; visibility: visible; transition: visibility 0.1s linear 0s, max-height 0.6s linear 0s, margin 0.2s ease-in-out 0s; + + &--borders { + border: fun.convert-px(2) solid var(--color-primary-dark); + } } } } @@ -107,7 +109,6 @@ } .header { - flex: 0 0 auto; display: flex; flex-flow: row nowrap; align-items: center; @@ -123,7 +124,6 @@ border-top: fun.convert-px(2) solid var(--color-primary-dark); border-bottom: fun.convert-px(2) solid var(--color-primary-dark); cursor: pointer; - transition: background 0.2s ease-in-out 0s; &:hover, &:focus { diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss index 373cefb..2ef34bf 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss +++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss @@ -4,6 +4,7 @@ .list { @extend %flex-list; + flex: 0 0 100%; gap: var(--spacing-xs); align-items: center; padding: var(--spacing-2xs) 0 0 var(--spacing-2xs); |