lessToSass.

themes/bootprint3/scss/bootprint.scss

@@ -11,7 +11,7 @@ $active-orange: #E70 !default;
 
 body {
   background: $brand-primary;
-  font-size: 13px
+  font-size: 13px;
 }
 
 #commentList .comment:nth-child(even) { background: $gray-lighter; }
@@ -92,20 +92,6 @@ footer ul { padding-left: 30px; }
 .channel-title { margin-top: 1rem; }
 .channel-title .fa { margin-top: 4px; }
 
-/* --- Offcanvas --- */
-body.offcanvas {
-  .offcanvas-toggle {
-    padding-bottom: 18px;
-    font-size: 16px;
-    background: #fff;
-    box-shadow: 0 0 2px #000;
-    color: $brand-primary;
-  }
-  .sidebar .list-group { color: #000; }
-  &.active .sidebar { color: #FFF; }
-  &.active .offcanvas-toggle { box-shadow: none; }
-}
-
 /* --- Random Items (results view) --- */
 ul.random {
   list-style: none;

themes/bootstrap3/scss/components/lightbox.scss

@@ -43,4 +43,7 @@ body.rtl .modal-loading { float: left; }
 
 // Utility classes
 .lightbox-only { display: none; }
-#modal .lightbox-only { display: initial; }
\ No newline at end of file
+#modal .lightbox-only { display: initial; }
+
+// Image display
+.lightbox-image { text-align: center; }
\ No newline at end of file

themes/bootstrap3/scss/components/offcanvas.scss

-$offcanvas-offset: 75vw !default;  // Width of open menu
-$offcanvas-padding: 30px !default; // Body offset when offcanvas active, also width of toggle
+$offcanvas-offset: 80vw !default;  // Width of open menu
 
-.offcanvas-overlay,
-.offcanvas-toggle { display: none; }
+.offcanvas-overlay { display: none; }
+
+.search-filter-toggle {
+  @extend .btn;
+  @extend .btn-default;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+  .close-offcanvas,
+  .search-filter-toggle { display: none; }
 
 @media screen and (max-width: 767px) {
+  .close-offcanvas::before,
+  .close-offcanvas::after,
+  .search-filter-toggle::before,
+  .search-filter-toggle::after {
+    display: inline-block;
+    width: 16px;
+    font: normal normal normal 14px/1 FontAwesome;
+  }
+
+  .close-offcanvas { display: block; }
+  .search-filter-toggle {
+    @extend .btn;
+    @extend .btn-default;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
   body.offcanvas {
     overflow-x: hidden; /* Prevent scroll on narrow devices */
-    .sidebar {
-      position: fixed;
-      height: 100%;
-      top: 0;
-      width: $offcanvas-offset;
-      padding-left: 0;
-      padding-right: 0;
-      overflow-y: auto;
-      h4 { padding-left: $padding-base-horizontal; }
-      .checkbox { margin-left: 20px + $padding-base-horizontal; }
-      .list-group, .list-group-item {
-        border-left: 0;
-        border-right: 0;
-        border-radius: 0 !important;
-      }
-    }
-    &.active { overflow-y: hidden; }
+    transition: margin .5s;
+  }
+  .offcanvas-overlay { cursor: pointer; }
+  .offcanvas-left {
+    .sidebar { left: -$offcanvas-offset; }
+    .offcanvas-overlay { right: -100%; }
+    .offcanvas-toggle { left: 0; }
+  }
+  .offcanvas-right {
+    .sidebar { right: -$offcanvas-offset; }
+    .offcanvas-overlay { left: -100%; }
+    .offcanvas-toggle { right: 0; }
+  }
+  .offcanvas-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.3);
+    z-index: 3;
+    opacity: 0;
+    transition: opacity .5s;
+  }
+  .offcanvas .sidebar {
+    position: fixed;
+    height: 100%;
+    top: 0;
+    width: $offcanvas-offset;
+    padding: 1rem;
+    overflow-y: auto;
+    background-color: #fff;
+    transition: left .5s, right .5s;
+
+    .search-sort { padding-bottom: 1rem; }
+  }
+  .offcanvas.active {
+    overflow-y: hidden;
     &.offcanvas-left {
-      padding-left: $offcanvas-padding - $grid-gutter-width/2;
-      & .main { background: #FFF; }
-      &.active {
-        margin-left: $offcanvas-offset;
-        margin-right: -$offcanvas-offset;
-        .sidebar { left: 0; }
-        .offcanvas-overlay { right: -$offcanvas-offset; }
-        .offcanvas-toggle { left: $offcanvas-offset; }
-      }
-      .sidebar { left: -$offcanvas-offset; }
-      .offcanvas-overlay { right: -100%; }
-      .offcanvas-toggle { left: 0; }
+      margin-left: $offcanvas-offset;
+      margin-right: -$offcanvas-offset;
+      .sidebar { left: 0; }
+      .offcanvas-overlay { right: -$offcanvas-offset; }
+      .offcanvas-toggle { left: $offcanvas-offset; }
     }
     &.offcanvas-right {
-      padding-right: $offcanvas-padding - $grid-gutter-width/2;
-      & .main > .container { background: #FFF; }
-      &.active {
-        margin-left: -$offcanvas-offset;
-        margin-right: $offcanvas-offset;
-        .sidebar { right: 0; }
-        .offcanvas-overlay { left: -$offcanvas-offset; }
-        .offcanvas-toggle { right: $offcanvas-offset; }
-      }
-      .sidebar { right: -$offcanvas-offset; }
-      .offcanvas-overlay { left: -100%; }
-      .offcanvas-toggle { right: 0; }
+      margin-left: -$offcanvas-offset;
+      margin-right: $offcanvas-offset;
+      .sidebar { right: 0; }
+      .offcanvas-overlay { left: -$offcanvas-offset; }
+      .offcanvas-toggle { right: $offcanvas-offset; }
     }
     .offcanvas-overlay {
-      display: block;
-      position: fixed;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0,0,0,.3);
-      z-index: 3;
+      opacity: 1;
+      transition: opacity .5s;
     }
-    .offcanvas-toggle {
-      display: block;
-      position: fixed;
-      top: 0;
-      width: calc(#{$offcanvas-padding} - 5px);
-      height: 100%;
-      border-left: 1px solid $gray-lighter;
-      border-right: 1px solid $gray-lighter;
-      line-height: 90vh; // Center vertically
-      text-align: center;
-      background-color: #fff;
-      z-index: 5;
+  }
+
+  /* Button arrows */
+  .offcanvas-left {
+    .close-offcanvas::after { content: "\f105"; }
+    .search-filter-toggle::before { content: "\f100"; }
+  }
+  .offcanvas-right {
+    .close-offcanvas::before { content: "\f104"; }
+    .search-filter-toggle::after { content: "\f101"; }
+  }
+  .rtl /* right to left */ {
+    &.offcanvas-left {
+      .close-offcanvas::after { content: none; }
+      .close-offcanvas::before { content: "\f105"; }
+      .search-filter-toggle::before { content: none; }
+      .search-filter-toggle::after { content: "\f100"; }
     }
-    .offcanvas-overlay,
-    .offcanvas-toggle,
-    .offcanvas-toggle * { cursor: pointer; }
-    &,.sidebar,
-    .offcanvas-overlay,
-    .offcanvas-toggle {
-      -webkit-transition: all .25s ease-out;
-           -o-transition: all .25s ease-out;
-              transition: all .25s ease-out;
+    &.offcanvas-right {
+      .close-offcanvas::before { content: none; }
+      .close-offcanvas::after { content: "\f104"; }
+      .search-filter-toggle::after { content: none; }
+      .search-filter-toggle::before { content: "\f101"; }
     }
   }
 }

themes/bootstrap3/scss/components/search.scss

@@ -40,8 +40,8 @@ header .container.navbar { margin-bottom: 0; }
 }
 .search-stats {
   display: block;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 @media (min-width: 768px) {