From: Radek Czajka Date: Mon, 15 May 2023 13:30:32 +0000 (+0200) Subject: Download box in mobile. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/9b913776e3da4d4879c001b9379808897273c8fd Download box in mobile. --- diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss index 576174be9..e52708b87 100644 --- a/src/wolnelektury/static/2022/styles/components/_media.scss +++ b/src/wolnelektury/static/2022/styles/components/_media.scss @@ -89,9 +89,13 @@ background-color: rgba($color-black, 0.35); display: none; overflow-y: scroll; - padding: 10vh 40px 40px 40px; + padding: 10vh 16px 10px 10px; width: 100%; + @include rwd($break-flow) { + padding: 10vh 40px 40px 40px; + } + &.is-open { display: flex; } @@ -99,16 +103,23 @@ .c-media__popup__box { background-color: #fff; - min-width: 640px; position: relative; border-radius: 10px; overflow: hidden; + + @include rwd($break-flow) { + min-width: 640px; + } } .c-media__popup__box__lead { - padding: 40px; + padding: 16px 50px 16px 16px; background: #083F4D; + @include rwd($break-flow) { + padding: 40px; + } + h2 { margin-top: 0; font-weight: 600; @@ -129,13 +140,17 @@ } .c-media__popup__box__items { - padding: 40px; + padding: 16px; + @include rwd($break-flow) { + padding: 40px; + } } .c-media__popup__box__item { display: flex; align-items: center; justify-content: space-between; + column-gap: 16px; width: 100%; padding: 20px 0; @@ -215,14 +230,19 @@ cursor: pointer; font-size: 0; background-color: transparent; - top: 35px; - right: 40px; + top: 15px; + right: 20px; transition: all $ease-dynamic 350ms; opacity: 0.75; &:hover { opacity: 1; } + + @include rwd($break-flow) { + top: 35px; + right: 40px; + } } .book-cover-small img { diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index f27b70e54..12b236a64 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -55,7 +55,6 @@ body { .l-navigation__logo { display: flex; position: relative; - z-index: $master-layer + 1; img { width: 153px; @@ -73,9 +72,18 @@ body { margin: 0; outline: 0; position: relative; - z-index: $master-layer + 1; } +.is-open { + .l-navigation__logo { + z-index: $master-layer + 1; + } + .l-navigation__button { + z-index: $master-layer + 1; + } +} + + .l-naviagion__search { width: 60%; max-width: 580px;