diff --git a/src/sass/_film-info.scss b/src/sass/_film-info.scss index f59748e4634b327e4c69035335b1a447a9f14bcd..80d1efa6a775ca904678154c48a8592e05793008 100644 --- a/src/sass/_film-info.scss +++ b/src/sass/_film-info.scss @@ -16,9 +16,6 @@ img { height: auto; } -$transition-duration: 250ms; -$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - .film-info__overlay { opacity: 0; visibility: hidden; @@ -27,7 +24,7 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); position: fixed; top: 0; left: 0; - overflow-y: scroll; + overflow-y: auto; z-index: 100; width: 100%; @@ -44,18 +41,21 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition: opacity $transition-duration $transition-timing-function, visibility $transition-duration $transition-timing-function; + @media screen and (max-width: 767px) { + padding: 20px; + } + &.is-open { opacity: 1; visibility: visible; pointer-events: initial; } - - } .film-info__container { width: 100%; background-color: $primary-white-color; + position: relative; padding: 48px 20px 40px 20px; @@ -73,12 +73,11 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media screen and (min-width: 768px) { - max-height: 100vh; - overflow-y: scroll; + max-height: 96vh; + overflow-y: auto; width: 618px; display: flex; padding: 42px 28px 40px 28px; - } @media screen and (min-width: 1024px) { @@ -210,7 +209,7 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @media screen and (min-width: 768px) { max-height: 236px; - overflow-y: scroll; + overflow-y: auto; } @media screen and (min-width: 1024px) { @@ -232,8 +231,6 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); font-weight: inherit; text-transform: uppercase; border-radius: 5px; - border: 1px solid $primary-text-color; - background-color: $primary-white-color; @media screen and (max-width: 767px) { width: 112px; @@ -245,6 +242,7 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @media screen and (min-width: 768px) { min-width: 125px; padding: 14px 8px 12px 8px; + margin-bottom: 40px; } @media screen and (min-width: 1024px) { @@ -257,4 +255,36 @@ $transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); background-color: $accent-color; color: $primary-white-color; margin-right: 15px; + + transition: border-color $transition-duration $transition-timing-function, + background-color $transition-duration $transition-timing-function; + + &:hover, + &:focus { + border-color: #E35F00; + background-color: #E35F00; + } +} + +.film-info__button--simple { + border: 1px solid $primary-text-color; + background-color: $primary-white-color; + + transition: border-color $transition-duration $transition-timing-function, + color $transition-duration $transition-timing-function; + + &:hover, + &:focus { + border-color: $accent-color; + color: $accent-color; + } +} + +.close-modal-button { + padding: 0; + position: absolute; + top: 10px; + right: 10px; + background-color: transparent; + border: none; } \ No newline at end of file