X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/fe91ba3abbf192dc851e377c1edb799aa7f1e47e..7a27a3fbc14b2049b8d110db15855a625e4c2455:/src/wolnelektury/static/2022/styles/components/_media.scss diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss index 1cb758414..c4af4ebd1 100644 --- a/src/wolnelektury/static/2022/styles/components/_media.scss +++ b/src/wolnelektury/static/2022/styles/components/_media.scss @@ -1,9 +1,17 @@ .c-media { - margin: 0 auto; + margin: 0 auto; + + .only-s { + .l-button--fav { + margin-top: -10px; + } + } } .c-media__actions { - display: flex; + display: flex; + column-gap: 38px; + row-gap: 10px; } .c-media__btn { @@ -11,9 +19,9 @@ text-align: center; align-items: center; - &:nth-child(1) { padding-right: 19px; } - &:nth-child(2) { padding-left: 19px; padding-right: 19px; } - &:nth-child(3) { padding-left: 19px; } + //&:nth-child(1) { padding-right: 19px; } + //&:nth-child(2) { padding-left: 19px; padding-right: 19px; } + //&:nth-child(3) { padding-left: 19px; } .l-button { width: 100%; @@ -44,8 +52,10 @@ border-radius: 0 0 5px 5px; margin: 0 auto; display: flex; + gap: 10px; align-items: center; justify-content: space-between; + position: relative; .icons {} .content { @@ -68,6 +78,47 @@ font-size: 12px; line-height: 140%; } + + .c-media__settings { + position: absolute; + left: 0; + right: 0; + top: 0; + z-index: 5; + min-height: 30px; + overflow: hidden; + + .icon { + position: absolute; + transition: .5s rotate; + bottom: 0; + right: 0; + line-height: 30px; + width: 40px; + text-align: center; + margin: 0; + } + > div { + height: 0; + transition: .5s height; + overflow: hidden; + background: #F2F2F2; + border-bottom: 5px solid #D5ECED; + margin-top: -5px; + > div { + padding: 30px; + } + } + &.active { + .icon { + rotate: 180deg; + + } + > div { + height: 150px; + } + } + } } .c-media__popup { @@ -76,19 +127,18 @@ top: 0; left: 0; height: 100%; - align-items: center; + align-items: flex-start; justify-content: center; background-color: rgba($color-black, 0.35); display: none; overflow-y: scroll; - padding: 150px 40px 40px 40px; + padding: 10vh 16px 10px 10px; width: 100%; - @include rwd(screen-md) { - padding: 40px 40px 40px 40px; - align-items: flex-start; + @include rwd($break-flow) { + padding: 10vh 40px 40px 40px; } - + &.is-open { display: flex; } @@ -96,16 +146,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; @@ -126,13 +183,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; @@ -212,12 +273,21 @@ 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 { + max-width: calc((100vw - 3 * 16px) / 2); }