frappe/frappe/public/css/offcanvas-website.css

html {
  min-height: 100%;
}
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  margin: 0px;
  padding: 0px !important;
}
html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
}
.offcanvas-main-section-overlay {
  display: none;
  cursor: pointer;
  opacity: 0.5;
}
.sidebar-padding {
  padding: 12px 14px;
}
.offcanvas .sidebar .sidebar-menu > li > .btn-group,
.offcanvas .sidebar .sidebar-menu > li > a,
.offcanvas .sidebar .dropdown-menu > li > a {
  padding: 12px 14px;
  display: block;
  whitespace: nowrap;
  transition: 0.2s;
  text-decoration: none !important;
}
.offcanvas .sidebar .dropdown-menu {
  padding: 0px;
  font-size: inherit;
}
.offcanvas .sidebar .dropdown-menu > li > a {
  padding-left: 28px;
}
.offcanvas .sidebar .divider {
  height: 1px;
  overflow: hidden;
  background-color: #EBEFF2;
  width: 100%;
  margin: 0px;
}
.offcanvas .sidebar .badge {
  right: 15px !important;
  top: 11px !important;
}
.offcanvas .sidebar .sidebar-menu > li > a:hover,
.offcanvas .sidebar .dropdown-menu > li > a:hover,
.offcanvas .sidebar .sidebar-menu > li > a:focus,
.offcanvas .sidebar .dropdown-menu > li > a:focus,
.offcanvas .sidebar .sidebar-menu > li > a:active,
.offcanvas .sidebar .dropdown-menu > li > a:active {
  background-color: #F0F4F7;
}
@media (max-width: 767px) {
  .page-content {
    min-height: 200px;
  }
  .offcanvas {
    transition: 0.25s;
  }
  .offcanvas-main-section-overlay {
    bottom: 0;
    position: fixed;
  }
  .offcanvas-container,
  .offcanvas,
  .offcanvas-main-section {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .offcanvas.active-left,
  .offcanvas.active-right {
    position: fixed;
  }
  .offcanvas.active-left .offcanvas-main-section-overlay,
  .offcanvas.active-right .offcanvas-main-section-overlay {
    z-index: 1031;
    display: block;
    bottom: 0;
  }
  .offcanvas.active-left {
    -webkit-transform: translate3d(75%, 0, 0);
    transform: translate3d(75%, 0, 0);
  }
  .offcanvas.active-right {
    -webkit-transform: translate3d(-75%, 0, 0);
    transform: translate3d(-75%, 0, 0);
  }
  .offcanvas .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75%;
    /* 9 columns */
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 12px;
  }
  .offcanvas .sidebar-right {
    left: 100%;
    border-left: 1px solid #d1d8dd;
  }
  .offcanvas .sidebar-left {
    right: 100%;
    border-right: 1px solid #d1d8dd;
  }
  .offcanvas .sidebar-menu {
    margin-bottom: 0;
  }
  .offcanvas .navbar-form {
    margin: 0px;
  }
  .offcanvas .sidebar ul {
    margin: 0px;
  }
  .offcanvas .sidebar-page-sidebar {
    border-top: 1px solid #d1d8dd;
  }
  .offcanvas .sidebar-label {
    text-transform: uppercase;
    color: #8D99A6;
    font-size: 85%;
    margin: 0px;
    font-weight: bold;
    padding: 10px 15px 0px;
  }
}