diff --git a/themes/bootprint3/scss/bootprint.scss b/themes/bootprint3/scss/bootprint.scss
index 77e60b825c68ff66d5c5d29dbe87564721499ec7..3e057e58e43aee22a42d0bd284fda651d911b471 100644
--- a/themes/bootprint3/scss/bootprint.scss
+++ b/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;
diff --git a/themes/bootstrap3/scss/components/lightbox.scss b/themes/bootstrap3/scss/components/lightbox.scss
index d24c96b3f65bd1b6465a5a7d7725c13d54a5722c..d7adf7a0bfd9a6bc76819e5e0af496c9ebb7130f 100644
--- a/themes/bootstrap3/scss/components/lightbox.scss
+++ b/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
diff --git a/themes/bootstrap3/scss/components/offcanvas.scss b/themes/bootstrap3/scss/components/offcanvas.scss
index 2371997017aaa38ee66db8f79003276dcf9b70f8..0c99b96441faee790e1d615dfe1035a401523857 100644
--- a/themes/bootstrap3/scss/components/offcanvas.scss
+++ b/themes/bootstrap3/scss/components/offcanvas.scss
@@ -1,88 +1,116 @@
-$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"; }
}
}
}
diff --git a/themes/bootstrap3/scss/components/search.scss b/themes/bootstrap3/scss/components/search.scss
index d797d7e2f23a4f1bc67544689a6a823a254eb9e9..278bf276be9a957f75bb825b5dd8bf8fea9e326d 100644
--- a/themes/bootstrap3/scss/components/search.scss
+++ b/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) {