Accessibility fixes

[wolnelektury.git] / src / wolnelektury / static / 2022 / more.scss

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index 7505aab..ff590a5 100644 (file)
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -1,28 +1,5 @@
 @import "styles/utils/mixins";
 
-body.is-open {
-    height: 100%;
-    overflow-y: hidden;
-}
-
-.l-navigation__logo {
-    height: 44px;
-}
-
-.l-navigation__menu {
-    .scrollable {
-        height: 100%;
-        overflow-y: scroll;
-        padding-bottom: 30px;
-    }
-}
-
-.l-navigation__menu__links ul li a em {
-    font-style: normal;
-    color: #FFA500;
-    font-weight: 600;
-}
-
 .l-collections .l-books {
     width: 100%;
 }
@@ -152,30 +129,25 @@ body.is-open {
 
 
 #user-menu {
-    //display: none;
-
+    --focus-ring: #083F4D;
+    position-area: bottom span-right;
     position:absolute;
-    top: 60px;
-    z-index: 1;
-
-    position: absolute;
     width: 186px;
-    top: 48px;
-    right: 45px;
+    top: 8px;
 
     /* yellow 900 */
     background: #F7BA00;
+    border: none;
     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
     border-radius: 10px;
     overflow: hidden;
 
     opacity:0;
-    pointer-events: none;
-    transition: 200ms opacity;
+    transition: all 350ms cubic-bezier(.0, 0, .2, 1), // $ease-out
+              display 350ms allow-discrete,
+              overlay 350ms allow-discrete;
     
-    &.is-open {
-        //display: block;
-        pointer-events: all;
+    &:popover-open {
         opacity: 100%;
     }
 
@@ -203,6 +175,13 @@ body.is-open {
     }
 }
 
+@starting-style {
+  #user-menu:popover-open {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
 
 form {
     label.required:before {
@@ -234,22 +213,50 @@ form {
 
 .experiment {
     display: flex;
+    margin: 1em 16px;
+    font-size: 1.5em;
     align-items: center;
+    flex-direction: column;
+    margin-top: 2em;
+    @include rwd($break-flow) {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+
+    > span, > div {
+       text-align: center;
+       @include rwd($break-flow) {
+           width: 50%;
+       }
+    }        
 }
 
 
+.legend {
+    margin: 1em 16px;
+    font-size: .7em;
+    color: #777;
+    text-align:right;
+    font-style:italic;
+}
+
 
 .funding-promo-bar {
-    margin: 18px auto;
+    margin: auto;
 
     .l-checkout__support {
-        margin: 0;
+        margin: 18px 0;
         a {
             display: flex;
             align-items: start;
+            gap: 0 10px;
+
+            flex-wrap: wrap;
+            @include rwd($B4) {
+                flex-wrap: nowrap;
+            }
 
             .buttonlike {
-                margin-right: 10px;
                 background: #FFA500;
                 //color: #083F4D;
                 color: black;
@@ -266,6 +273,11 @@ form {
             }
             .funding-bar-container {
                 flex-grow: 1;
+
+                display: contents;
+                @include rwd($B4) {
+                    display: block;
+                }
             }
         }
     }