You are here

Home » API reference » Commerce Cart Flyout 8

module.css in Commerce Cart Flyout 8 

body.toolbar-fixed .cart-offcanvas {
  padding-top: 39px;
}
body.toolbar-fixed.toolbar-tray-open .cart-offcanvas {
  padding-top: 79px;
}

.cart-offcanvas {
    position: fixed;
    min-height: 100%;
    max-height: none;
    top: 0;
    display: block;
    background: #fff;
    transition: transform .3s cubic-bezier(.4,0,.6,1);
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    overflow: hidden;
    z-index: 1000;
}
.cart-offcanvas--left {
    height: 100%;
    width: 24em;
    transform: translate3d(-17em, 0, 0);
}
.cart-offcanvas--right {
    height: 100%;
    width: 24em;
    right: 0;
    transform: translate3d(17em,0,0);
}
.cart-offcanvas.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}
.cart-offcanvas.is-closed {
    max-height: 100%;
    visibility: hidden;
    box-shadow: none;
}

.cart-offcanvas-bg {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    left: -100%;
    background-color: transparent;
    transition: background-color .4s cubic-bezier(.23,1,.32,1) 0s;
}
.cart-offcanvas-bg.is-animating,
.cart-offcanvas-bg.is-open {
    left: 0;
    background-color: rgba(0,0,0,.68);
    visibility: visible;
}
.cart-offcanvas-bg.is-closed {
    visibility: hidden;
}

File

css/module.css
View source 
  1. body.toolbar-fixed .cart-offcanvas {

  2.   padding-top: 39px;

  3. }

  4. body.toolbar-fixed.toolbar-tray-open .cart-offcanvas {

  5.   padding-top: 79px;

  6. }

  7. 

  8. .cart-offcanvas {

  9.     position: fixed;

  10.     min-height: 100%;

  11.     max-height: none;

  12.     top: 0;

  13.     display: block;

  14.     background: #fff;

  15.     transition: transform .3s cubic-bezier(.4,0,.6,1);

  16.     transform: translate3d(0,0,0);

  17.     backface-visibility: hidden;

  18.     overflow: hidden;

  19.     z-index: 1000;

  20. }

  21. .cart-offcanvas--left {

  22.     height: 100%;

  23.     width: 24em;

  24.     transform: translate3d(-17em, 0, 0);

  25. }

  26. .cart-offcanvas--right {

  27.     height: 100%;

  28.     width: 24em;

  29.     right: 0;

  30.     transform: translate3d(17em,0,0);

  31. }

  32. .cart-offcanvas.is-open {

  33.     transform: translate3d(0, 0, 0);

  34.     visibility: visible;

  35. }

  36. .cart-offcanvas.is-closed {

  37.     max-height: 100%;

  38.     visibility: hidden;

  39.     box-shadow: none;

  40. }

  41. 

  42. .cart-offcanvas-bg {

  43.     position: fixed;

  44.     top: 0;

  45.     height: 100%;

  46.     width: 100%;

  47.     z-index: 5;

  48.     left: -100%;

  49.     background-color: transparent;

  50.     transition: background-color .4s cubic-bezier(.23,1,.32,1) 0s;

  51. }

  52. .cart-offcanvas-bg.is-animating,

  53. .cart-offcanvas-bg.is-open {

  54.     left: 0;

  55.     background-color: rgba(0,0,0,.68);

  56.     visibility: visible;

  57. }

  58. .cart-offcanvas-bg.is-closed {

  59.     visibility: hidden;

  60. }