You are here

responsive-menus--offcanvas.css in AT Tools 8

/**
 * Off Canvas
 * Toggle left or right menus that slide in.
 ============================================================================ */
.ms-offcanvas > .page {
  transition: all, 225ms, ease-in-out;
}
.ms-offcanvas .rm-toggle {
  float: left;
  margin-left: 0;
  padding-left: 0;
}
.ms-offcanvas .rm-toggle__link {
  display: inline-block;
}
.ms-offcanvas .rm-block__content {
  opacity: .001;
  display: none;
  left: 0;
  -webkit-transform: translate3d(-15em, 0, 0);
          transform: translate3d(-15em, 0, 0);
  transition: all, 225ms, ease-in-out;
}
.ms-offcanvas .rm-block__content a {
  margin-bottom: 4px;
  margin-bottom: 0.25rem;
  padding: 7px 18px;
  padding: 0.4375rem 1.125rem;
  display: block;
}
.ms-offcanvas .rm-block__content a:after {
  content: none;
  display: none;
}
.ms-offcanvas .rm-block__content .is-child {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: all, 225ms, ease-in-out;
}
.ms-offcanvas .rm-block__content .is-child.is-open--child {
  position: relative;
  visibility: visible;
  opacity: 1;
}
.ms-offcanvas.rm-is-open > .page {
  position: relative;
  -webkit-transform: translate3d(15em, 0, 0);
          transform: translate3d(15em, 0, 0);
}
.ms-offcanvas.rm-is-open .l-pr {
  margin: 0;
  padding: 0;
}
.ms-offcanvas.rm-is-open .rm-block__content {
  opacity: 1;
  display: block;
  width: 15em;
  position: absolute;
  top: 0;
}

/*# sourceMappingURL=maps/responsive-menus--offcanvas.css.map */

File

at_theme_generator/starterkits/starterkit/styles/css/components/responsive-menus--offcanvas.css
View source
  1. /**
  2. * Off Canvas
  3. * Toggle left or right menus that slide in.
  4. ============================================================================ */
  5. .ms-offcanvas > .page {
  6. transition: all, 225ms, ease-in-out;
  7. }
  8. .ms-offcanvas .rm-toggle {
  9. float: left;
  10. margin-left: 0;
  11. padding-left: 0;
  12. }
  13. .ms-offcanvas .rm-toggle__link {
  14. display: inline-block;
  15. }
  16. .ms-offcanvas .rm-block__content {
  17. opacity: .001;
  18. display: none;
  19. left: 0;
  20. -webkit-transform: translate3d(-15em, 0, 0);
  21. transform: translate3d(-15em, 0, 0);
  22. transition: all, 225ms, ease-in-out;
  23. }
  24. .ms-offcanvas .rm-block__content a {
  25. margin-bottom: 4px;
  26. margin-bottom: 0.25rem;
  27. padding: 7px 18px;
  28. padding: 0.4375rem 1.125rem;
  29. display: block;
  30. }
  31. .ms-offcanvas .rm-block__content a:after {
  32. content: none;
  33. display: none;
  34. }
  35. .ms-offcanvas .rm-block__content .is-child {
  36. position: absolute;
  37. visibility: hidden;
  38. opacity: 0;
  39. transition: all, 225ms, ease-in-out;
  40. }
  41. .ms-offcanvas .rm-block__content .is-child.is-open--child {
  42. position: relative;
  43. visibility: visible;
  44. opacity: 1;
  45. }
  46. .ms-offcanvas.rm-is-open > .page {
  47. position: relative;
  48. -webkit-transform: translate3d(15em, 0, 0);
  49. transform: translate3d(15em, 0, 0);
  50. }
  51. .ms-offcanvas.rm-is-open .l-pr {
  52. margin: 0;
  53. padding: 0;
  54. }
  55. .ms-offcanvas.rm-is-open .rm-block__content {
  56. opacity: 1;
  57. display: block;
  58. width: 15em;
  59. position: absolute;
  60. top: 0;
  61. }
  62. /*# sourceMappingURL=maps/responsive-menus--offcanvas.css.map */