X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d019a9b5e928dcf777852d0c8d5413fd3d69b4dd..a9226097c8eea0591fd3249f62a71becc6d2be93:/src/wolnelektury/static/2022/styles/components/_media.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/styles/components/_media.scss b/src/wolnelektury/static/2022/styles/components/_media.scss index 520654ddb..e52708b87 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%; @@ -42,16 +50,11 @@ background: #F2F2F2; padding: 15px 24px; border-radius: 0 0 5px 5px; - max-width: 830px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; - .project-logo { - padding-left: 35px; - } - .icons {} .content { padding-left: 35px; @@ -80,13 +83,19 @@ z-index: 10; top: 0; left: 0; - width: 100%; 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: 10vh 16px 10px 10px; + width: 100%; + @include rwd($break-flow) { + padding: 10vh 40px 40px 40px; + } + &.is-open { display: flex; } @@ -94,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; @@ -124,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; @@ -210,12 +230,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); }