@entur/modal 2.0.0-alpha.0 → 2.0.0-next.0

package/dist/styles.css

@@ -1,171 +1,553 @@
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-:root {
-  --reach-dialog: 1;
+[data-color-mode=light],
+:root{
+  --components-modal-drawer-contrast-background:#393d79;
+  --components-modal-drawer-contrast-text:#ffffff;
+  --components-modal-drawer-standard-background:#eaeaf1;
+  --components-modal-drawer-standard-text:#181c56;
+  --components-modal-modal-contrast-border:rgba(255, 255, 255, 0);
+  --components-modal-modal-contrast-fill:#ffffff;
+  --components-modal-modal-contrast-icon:#181c56;
+  --components-modal-modal-contrast-text:#181c56;
+  --components-modal-modal-standard-border:#e3e6e8;
+  --components-modal-modal-standard-fill:#ffffff;
+  --components-modal-modal-standard-icon:#181c56;
+  --components-modal-modal-standard-text:#181c56;
 }
 
-.eds-modal__overlay {
-  background: rgba(0, 0, 0, 0.5);
-  bottom: 0;
-  display: flex;
-  left: 0;
-  overflow: hidden;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 30;
-  animation: fadeInOverlay;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in-out;
+[data-color-mode=dark]{
+  --components-modal-drawer-contrast-background:#393a49;
+  --components-modal-drawer-contrast-text:#e5e5e9;
+  --components-modal-drawer-standard-background:#393a49;
+  --components-modal-drawer-standard-text:#e5e5e9;
+  --components-modal-modal-contrast-border:rgba(255, 255, 255, 0);
+  --components-modal-modal-contrast-fill:#464755;
+  --components-modal-modal-contrast-icon:#e5e5e9;
+  --components-modal-modal-contrast-text:#e5e5e9;
+  --components-modal-modal-standard-border:rgba(255, 255, 255, 0);
+  --components-modal-modal-standard-fill:#464755;
+  --components-modal-modal-standard-icon:#e5e5e9;
+  --components-modal-modal-standard-text:#e5e5e9;
 }
 
-.eds-modal__content {
-  background: var(--primary-background-color);
-  border-radius: 0.75rem;
-  color: var(--primary-text-color);
-  margin: auto;
-  padding: 1.5rem;
-  position: relative;
-  outline-offset: 0.125rem;
-  width: 100%;
-  max-height: 90vh;
-  overflow: auto;
-  z-index: 40;
-  animation: slideInContent;
-  animation-duration: 0.2s;
-  animation-timing-function: ease-in-out;
-}
-.eds-modal__content--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-.eds-modal__content--align-end {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-.eds-modal__content--size-extraSmall {
-  max-width: 21rem;
-  padding: 1.5rem;
-}
-.eds-modal__content--size-small {
-  max-width: 28.125rem;
-  padding: 2.5rem;
-}
-.eds-modal__content--size-medium {
-  max-width: 45rem;
-  padding: 3rem;
-}
-.eds-modal__content--size-large {
-  max-width: 56.25rem;
-  padding: 3rem;
-}
-.eds-modal__content--size-extraLarge {
-  max-width: 78.75rem;
-  padding: 3rem;
-}
-.eds-modal__content::-webkit-scrollbar {
-  width: 16px;
-}
-.eds-modal__content::-webkit-scrollbar-track {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.eds-modal__content::-webkit-scrollbar-thumb {
-  background-color: lightgrey;
-  border: 4px solid transparent;
-  border-radius: 8px;
-  background-clip: padding-box;
-}
-.eds-modal__content::-webkit-scrollbar-thumb:hover {
-  background-color: grey;
+[data-view-mode=standard],
+:root{
+  --components-modal-border-default:0.0625rem;
+  --components-modal-gap-default:1rem;
+  --components-modal-icon-default:1.25rem;
+  --components-modal-inlinepadding-default:2rem;
+  --components-modal-radius-default:1rem;
+  --components-modal-width-default:35rem;
 }
 
-.eds-modal__close {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  border-radius: 0;
-  font-size: inherit;
-  color: inherit;
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  padding: 0.5rem;
-  cursor: pointer;
-}
-.eds-modal__close:focus {
-  outline-offset: 0.125rem;
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+[data-view-mode=compact]{
+  --components-modal-border-default:0.0625rem;
+  --components-modal-gap-default:0.75rem;
+  --components-modal-icon-default:1rem;
+  --components-modal-inlinepadding-default:1.5rem;
+  --components-modal-radius-default:0.75rem;
+  --components-modal-width-default:20rem;
 }
 
-@keyframes fadeInOverlay {
-  from {
-    opacity: 0;
+[data-view-mode=display]{
+  --components-modal-border-default:0.125rem;
+  --components-modal-gap-default:1.5rem;
+  --components-modal-icon-default:2rem;
+  --components-modal-inlinepadding-default:3rem;
+  --components-modal-radius-default:1.5rem;
+  --components-modal-width-default:60rem;
+}
+[data-color-mode=light],
+:root{
+  --basecolors-frame-contrast:#181c56;
+  --basecolors-frame-contrastalt:#393d79;
+  --basecolors-frame-contrastalt-2:#292b6a;
+  --basecolors-frame-default:#ffffff;
+  --basecolors-frame-elevated:#ffffff;
+  --basecolors-frame-elevatedalt:#f6f6f9;
+  --basecolors-frame-highlight:#ff5959;
+  --basecolors-frame-highlightalt:#ffbf9e;
+  --basecolors-frame-subdued:#d9dae8;
+  --basecolors-frame-tint:#f6f6f9;
+  --basecolors-shape-accent:#181c56;
+  --basecolors-shape-bicycle-contrast:#00dbb6;
+  --basecolors-shape-bicycle-default:#0d827e;
+  --basecolors-shape-bus-contrast:#ff6392;
+  --basecolors-shape-bus-default:#c5044e;
+  --basecolors-shape-cableway-contrast:#b482fb;
+  --basecolors-shape-cableway-default:#78469a;
+  --basecolors-shape-disabled:#6e6f73;
+  --basecolors-shape-disabledalt:#b6b8ba;
+  --basecolors-shape-ferry-contrast:#6fdfff;
+  --basecolors-shape-ferry-default:#0c6693;
+  --basecolors-shape-funicular-contrast:#b482fb;
+  --basecolors-shape-funicular-default:#78469a;
+  --basecolors-shape-helicopter-contrast:#fbafea;
+  --basecolors-shape-helicopter-default:#800664;
+  --basecolors-shape-highlight:#ff5959;
+  --basecolors-shape-light:#ffffff;
+  --basecolors-shape-mask:#ffffff;
+  --basecolors-shape-maskalt:#ffffff;
+  --basecolors-shape-metro-contrast:#f08901;
+  --basecolors-shape-metro-default:#bf5826;
+  --basecolors-shape-mobility-contrast:#00dbb6;
+  --basecolors-shape-mobility-default:#0d827e;
+  --basecolors-shape-plane-contrast:#fbafea;
+  --basecolors-shape-plane-default:#800664;
+  --basecolors-shape-subdued:#626493;
+  --basecolors-shape-subduedalt:#d9dae8;
+  --basecolors-shape-taxi-contrast:#ffe082;
+  --basecolors-shape-taxi-default:#3d3e40;
+  --basecolors-shape-train-contrast:#42a5f5;
+  --basecolors-shape-train-default:#00367f;
+  --basecolors-shape-tram-contrast:#b482fb;
+  --basecolors-shape-tram-default:#78469a;
+  --basecolors-shape-walk-contrast:#9ea0bd;
+  --basecolors-shape-walk-default:#8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast:#fbafea;
+  --basecolors-shape-airportlinkbus-default:#800664;
+  --basecolors-shape-airportlinkrail-contrast:#fbafea;
+  --basecolors-shape-airportlinkrail-default:#800664;
+  --basecolors-stroke-contrast:#aeb7e2;
+  --basecolors-stroke-default:#181c56;
+  --basecolors-stroke-disabled:#949699;
+  --basecolors-stroke-focus-contrast:#aeb7e2;
+  --basecolors-stroke-focus-standard:#181c56;
+  --basecolors-stroke-highlight:#ff5959;
+  --basecolors-stroke-highlight2:#ffbf9e;
+  --basecolors-stroke-light:#ffffff;
+  --basecolors-stroke-subdued:#8284ab;
+  --basecolors-stroke-subduedalt:#e3e6e8;
+  --basecolors-text-accent:#181c56;
+  --basecolors-text-disabled:#6e6f73;
+  --basecolors-text-disabledalt:#b6b8ba;
+  --basecolors-text-highlight:#ff5959;
+  --basecolors-text-highlightalt:#ffbf9e;
+  --basecolors-text-light:#ffffff;
+  --basecolors-text-subdued:#626493;
+  --basecolors-text-subduedalt:#d9dae8;
+}
+
+[data-color-mode=dark]{
+  --basecolors-frame-contrast:#212233;
+  --basecolors-frame-contrastalt:#141527;
+  --basecolors-frame-contrastalt-2:#08091c;
+  --basecolors-frame-default:#08091c;
+  --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
+  --basecolors-frame-elevatedalt:#464755;
+  --basecolors-frame-highlight:#ff5959;
+  --basecolors-frame-highlightalt:#ffbf9e;
+  --basecolors-frame-subdued:#2d2e3e;
+  --basecolors-frame-tint:#141527;
+  --basecolors-shape-accent:#e5e5e9;
+  --basecolors-shape-bicycle-contrast:#4db2a1;
+  --basecolors-shape-bicycle-default:#4db2a1;
+  --basecolors-shape-bus-contrast:#ef7398;
+  --basecolors-shape-bus-default:#ef7398;
+  --basecolors-shape-cableway-contrast:#b898e5;
+  --basecolors-shape-cableway-default:#b898e5;
+  --basecolors-shape-disabled:#b6b8ba;
+  --basecolors-shape-disabledalt:#b3b4bd;
+  --basecolors-shape-ferry-contrast:#8ccfe2;
+  --basecolors-shape-ferry-default:#8ccfe2;
+  --basecolors-shape-funicular-contrast:#b898e5;
+  --basecolors-shape-funicular-default:#b898e5;
+  --basecolors-shape-helicopter-contrast:#f2b8e5;
+  --basecolors-shape-helicopter-default:#f2b8e5;
+  --basecolors-shape-highlight:#ff5959;
+  --basecolors-shape-light:#e5e5e9;
+  --basecolors-shape-mask:#2d2e3e;
+  --basecolors-shape-maskalt:#393a49;
+  --basecolors-shape-metro-contrast:#dd973c;
+  --basecolors-shape-metro-default:#dd973c;
+  --basecolors-shape-mobility-contrast:#4db2a1;
+  --basecolors-shape-mobility-default:#4db2a1;
+  --basecolors-shape-plane-contrast:#f2b8e5;
+  --basecolors-shape-plane-default:#f2b8e5;
+  --basecolors-shape-subdued:#b3b4bd;
+  --basecolors-shape-subduedalt:#b3b4bd;
+  --basecolors-shape-taxi-contrast:#ffe082;
+  --basecolors-shape-taxi-default:#ffe082;
+  --basecolors-shape-train-contrast:#60a2d7;
+  --basecolors-shape-train-default:#60a2d7;
+  --basecolors-shape-tram-contrast:#b898e5;
+  --basecolors-shape-tram-default:#b898e5;
+  --basecolors-shape-walk-contrast:#8d8e9c;
+  --basecolors-shape-walk-default:#8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
+  --basecolors-shape-airportlinkbus-default:#f2b8e5;
+  --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
+  --basecolors-shape-airportlinkrail-default:#f2b8e5;
+  --basecolors-stroke-contrast:#aeb7e2;
+  --basecolors-stroke-default:#b3b4bd;
+  --basecolors-stroke-disabled:#e3e6e8;
+  --basecolors-stroke-focus-contrast:#aeb7e2;
+  --basecolors-stroke-focus-standard:#aeb7e2;
+  --basecolors-stroke-highlight:#ff5959;
+  --basecolors-stroke-highlight2:#ffbf9e;
+  --basecolors-stroke-light:#b3b4bd;
+  --basecolors-stroke-subdued:#81828f;
+  --basecolors-stroke-subduedalt:#949699;
+  --basecolors-text-accent:#e5e5e9;
+  --basecolors-text-disabled:#b6b8ba;
+  --basecolors-text-disabledalt:#b6b8ba;
+  --basecolors-text-highlight:#ff5959;
+  --basecolors-text-highlightalt:#ffbf9e;
+  --basecolors-text-light:#e5e5e9;
+  --basecolors-text-subdued:#b3b4bd;
+  --basecolors-text-subduedalt:#b3b4bd;
+}
+
+:root{
+  --eds-modal:1;
+}html:has(dialog.eds-modal__overlay[open]),
+html:has(dialog.eds-modal__overlay[open]) body{
+  overflow:hidden;
+}
+
+.eds-modal__overlay{
+  border:none;
+  padding:0;
+  background:transparent;
+  color:inherit;
+}
+.eds-modal__overlay[open]{
+  z-index:30;
+  width:100%;
+  overflow:hidden;
+  -ms-scroll-chaining:none;
+      overscroll-behavior:contain;
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+     -moz-animation:fadeInOverlay 0.2s ease-in-out;
+       -o-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::-webkit-backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::-ms-backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay[open]::backdrop{
+  background:rgba(0, 0, 0, 0.5);
+  -webkit-animation:fadeInOverlay 0.2s ease-in-out;
+     -moz-animation:fadeInOverlay 0.2s ease-in-out;
+       -o-animation:fadeInOverlay 0.2s ease-in-out;
+          animation:fadeInOverlay 0.2s ease-in-out;
+}
+.eds-modal__overlay--size-extraSmall{
+  max-width:21rem;
+}
+.eds-modal__overlay--size-small{
+  max-width:28.125rem;
+}
+.eds-modal__overlay--size-medium{
+  max-width:45rem;
+}
+.eds-modal__overlay--size-large{
+  max-width:56.25rem;
+}
+.eds-modal__overlay--size-extraLarge{
+  max-width:78.75rem;
+}
+.eds-modal__close{
+  position:absolute;
+  top:1rem;
+  right:1rem;
+  color:var(--components-modal-modal-standard-icon);
+  z-index:-webkit-calc(40 + 1);
+  z-index:-moz-calc(40 + 1);
+  z-index:calc(40 + 1);
+  -webkit-animation:slideInContent 0.2s ease-in-out;
+     -moz-animation:slideInContent 0.2s ease-in-out;
+       -o-animation:slideInContent 0.2s ease-in-out;
+          animation:slideInContent 0.2s ease-in-out;
+}
+.eds-modal__content{
+  background:var(--components-modal-modal-standard-fill);
+  border:1px solid var(--components-modal-modal-standard-border);
+  -webkit-border-radius:0.75rem;
+     -moz-border-radius:0.75rem;
+          border-radius:0.75rem;
+  color:var(--components-modal-modal-standard-text);
+  padding:1.5rem;
+  width:100%;
+  max-height:90vh;
+  overflow:auto;
+  -webkit-animation:slideInContent 0.2s ease-in-out;
+     -moz-animation:slideInContent 0.2s ease-in-out;
+       -o-animation:slideInContent 0.2s ease-in-out;
+          animation:slideInContent 0.2s ease-in-out;
+}
+.eds-modal__content--align-center{
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:column;
+     -moz-box-orient:vertical;
+     -moz-box-direction:normal;
+          flex-direction:column;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  text-align:center;
+}
+.eds-modal__content--align-end{
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:column;
+     -moz-box-orient:vertical;
+     -moz-box-direction:normal;
+          flex-direction:column;
+  -webkit-box-align:end;
+  -webkit-align-items:flex-end;
+     -moz-box-align:end;
+          align-items:flex-end;
+}
+.eds-modal__content--size-extraSmall{
+  max-width:21rem;
+  padding:1.5rem;
+}
+.eds-modal__content--size-small{
+  max-width:28.125rem;
+  padding:2.5rem;
+  padding-top:2rem;
+}
+.eds-modal__content--size-medium{
+  max-width:45rem;
+  padding:3rem;
+  padding-top:2rem;
+}
+.eds-modal__content--size-large{
+  max-width:56.25rem;
+  padding:3rem;
+  padding-top:2rem;
+}
+.eds-modal__content--size-extraLarge{
+  max-width:78.75rem;
+  padding:3rem;
+  padding-top:2rem;
+}
+.eds-modal__content::-webkit-scrollbar{
+  width:16px;
+}
+.eds-modal__content::-webkit-scrollbar-track{
+  margin-block:0.5rem;
+}
+.eds-modal__content::-webkit-scrollbar-thumb{
+  background-color:lightgrey;
+  border:4px solid transparent;
+  -webkit-border-radius:8px;
+          border-radius:8px;
+  background-clip:padding-box;
+}
+.eds-modal__content::-webkit-scrollbar-thumb:hover{
+  background-color:grey;
+}
+
+@-webkit-keyframes fadeInOverlay{
+  from{
+    opacity:0;
   }
-  to {
-    opacity: 1;
+  to{
+    opacity:1;
   }
 }
-@keyframes slideInContent {
-  from {
-    top: 5rem;
-    opacity: 0;
+
+@-moz-keyframes fadeInOverlay{
+  from{
+    opacity:0;
   }
-  to {
-    top: 0%;
-    opacity: 1;
+  to{
+    opacity:1;
   }
 }
-:root {
-  --eds-modal: 1;
+
+@-o-keyframes fadeInOverlay{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+
+@keyframes fadeInOverlay{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+@-webkit-keyframes slideInContent{
+  from{
+    -webkit-transform:translateY(0.5rem);
+            transform:translateY(0.5rem);
+    opacity:0;
+  }
+  to{
+    -webkit-transform:translateY(0);
+            transform:translateY(0);
+    opacity:1;
+  }
 }
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-@keyframes slideFromRight {
-  from {
-    box-shadow: none;
-    transform: translateX(100%);
+@-moz-keyframes slideInContent{
+  from{
+    -moz-transform:translateY(0.5rem);
+         transform:translateY(0.5rem);
+    opacity:0;
   }
-  to {
-    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
-    transform: 0;
+  to{
+    -moz-transform:translateY(0);
+         transform:translateY(0);
+    opacity:1;
   }
 }
-.eds-drawer {
-  animation: slideFromRight forwards ease-out 0.1s;
-  background: #ebebf1;
-  bottom: 0;
-  padding: 1.5rem;
-  position: fixed;
-  right: 0;
-  top: 0;
-  max-width: 100%;
-  min-width: 20rem;
-  width: 25vw;
-  z-index: 40;
-  overflow-y: auto;
+@-o-keyframes slideInContent{
+  from{
+    -o-transform:translateY(0.5rem);
+       transform:translateY(0.5rem);
+    opacity:0;
+  }
+  to{
+    -o-transform:translateY(0);
+       transform:translateY(0);
+    opacity:1;
+  }
 }
-.eds-contrast .eds-drawer {
-  background: #292b6a;
+@keyframes slideInContent{
+  from{
+    -webkit-transform:translateY(0.5rem);
+       -moz-transform:translateY(0.5rem);
+         -o-transform:translateY(0.5rem);
+            transform:translateY(0.5rem);
+    opacity:0;
+  }
+  to{
+    -webkit-transform:translateY(0);
+       -moz-transform:translateY(0);
+         -o-transform:translateY(0);
+            transform:translateY(0);
+    opacity:1;
+  }
+}
+@media (prefers-reduced-motion: reduce){
+  .eds-modal__overlay::-webkit-backdrop{
+    -webkit-animation:none;
+            animation:none;
+  }
+  .eds-modal__overlay::-ms-backdrop{
+    animation:none;
+  }
+  .eds-modal__overlay,
+  .eds-modal__overlay::backdrop,
+  .eds-modal__content,
+  .eds-modal__close{
+    -webkit-animation:none;
+       -moz-animation:none;
+         -o-animation:none;
+            animation:none;
+  }
+}.eds-drawer{
+  -webkit-animation:slideFromRight forwards ease-out 0.1s;
+     -moz-animation:slideFromRight forwards ease-out 0.1s;
+       -o-animation:slideFromRight forwards ease-out 0.1s;
+          animation:slideFromRight forwards ease-out 0.1s;
+  background-color:var(--components-modal-drawer-standard-background);
+  color:var(--components-modal-drawer-standard-text);
+  bottom:0;
+  padding:1.5rem;
+  position:fixed;
+  right:0;
+  top:0;
+  max-width:100%;
+  min-width:20rem;
+  width:25vw;
+  z-index:40;
+  overflow-y:auto;
+}
+.eds-contrast .eds-drawer{
+  background-color:var(--components-modal-drawer-contrast-background);
+  color:var(--components-modal-drawer-contrast-text);
+}
+.eds-drawer__close-button{
+  margin:0;
+  position:absolute;
+  top:1.5rem;
+  right:1.5rem;
 }
 
-.eds-drawer__close-button {
-  margin: 0;
-  position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
+@-webkit-keyframes slideFromRight{
+  from{
+    -webkit-box-shadow:none;
+            box-shadow:none;
+    -webkit-transform:translateX(100%);
+            transform:translateX(100%);
+  }
+  to{
+    -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+            box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+    -webkit-transform:0;
+            transform:0;
+  }
 }
-.eds-drawer__close-button:focus {
-  outline-offset: 0.125rem;
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
+
+@-moz-keyframes slideFromRight{
+  from{
+    -moz-box-shadow:none;
+         box-shadow:none;
+    -moz-transform:translateX(100%);
+         transform:translateX(100%);
+  }
+  to{
+    -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+         box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+    -moz-transform:0;
+         transform:0;
+  }
 }
-.eds-contrast .eds-drawer__close-button:focus {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+
+@-o-keyframes slideFromRight{
+  from{
+    box-shadow:none;
+    -o-transform:translateX(100%);
+       transform:translateX(100%);
+  }
+  to{
+    box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+    -o-transform:0;
+       transform:0;
+  }
 }
+
+@keyframes slideFromRight{
+  from{
+    -webkit-box-shadow:none;
+       -moz-box-shadow:none;
+            box-shadow:none;
+    -webkit-transform:translateX(100%);
+       -moz-transform:translateX(100%);
+         -o-transform:translateX(100%);
+            transform:translateX(100%);
+  }
+  to{
+    -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+       -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+            box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+    -webkit-transform:0;
+       -moz-transform:0;
+         -o-transform:0;
+            transform:0;
+  }
+}