X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/b8c235267a6345ebe3891f49c16ad3fc5f1d3f25..7e9be4e3962e1cccc43798d0507b2c82cd1d275c:/src/wolnelektury/static/2022/more.scss diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss index 2b3899520..9d7cf2199 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,4 +1,4 @@ -.is-open { +body.is-open { height: 100%; overflow-y: hidden; } @@ -12,12 +12,59 @@ padding: 10px 50px; } -.l-navigation { - //opacity: .5; +.l-navigation__logo { + height: 44px; } .l-navigation__menu { - overflow-y: scroll; + .scrollable { + height: 100%; + overflow-y: scroll; + padding-bottom: 30px; + } +} + +.l-navigation__menu__book__header { + display: flex; + align-items: center; + justify-content: space-between; + + p { + margin: 0; + + &.korona { + &:before { + content: url('images/korona.svg'); + width: 21px; + margin-right: -21px; + position: relative; + top: -10px; + left: -3px; + } + } + } +} +.l-navigation__menu__book { + .button { + display: inline-block; + font-size: 16px; + font-weight: 700; + padding: 0 20px; + min-width: 212px; + line-height: 38px; + text-align: center; + + /* green 700 */ + background: #92BD39; + color: #083F4D; + border-radius: 6px; + + transition: background-color 150ms; + + &:hover { + background-color: #FBC40F; + } + } } .l-navigation__menu__book__info { img { @@ -25,6 +72,11 @@ height: 60px; } } +.l-navigation__menu__links ul li a em { + font-style: normal; + color: #FFA500; + font-weight: 600; +} .l-navigation__login { color: #74BDC2; margin-right: 20px; @@ -34,6 +86,9 @@ } } .l-navigation__actions { + position: relative; + height: 44px; + .user { margin-right: 25px; } @@ -78,6 +133,9 @@ } } +.l-checkout__box { + position: relative; +} .l-checkout__payments { display: none; @@ -140,3 +198,57 @@ } } } + + + +#user-menu { + //display: none; + + position:absolute; + top: 60px; + z-index: 1; + + position: absolute; + width: 186px; + top: 48px; + right: 45px; + + /* yellow 900 */ + background: #F7BA00; + box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2); + border-radius: 10px; + overflow: hidden; + + opacity:0; + pointer-events: none; + transition: 200ms opacity; + + &.is-open { + //display: block; + pointer-events: all; + opacity: 100%; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + li { + a { + color: #474747; + display: block; + line-height: 27px; + padding: 8px 21px; + &:hover { + color: #474747; + background: #EDAA00; + } + + strong { + font-weight: 600; + } + } + } + } +}