?
Path : /home/admin/public_html/old/plugins/system/t3/base-bs3/less/ |
Current File : /home/admin/public_html/old/plugins/system/t3/base-bs3/less/off-canvas.less |
/** *------------------------------------------------------------------------------ * @package T3 Framework for Joomla! *------------------------------------------------------------------------------ * @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * @authors JoomlArt, JoomlaBamboo, (contribute to this project at github * & Google group to become co-author) * @Google group: https://groups.google.com/forum/#!forum/t3fw * @Link: http://t3-framework.org * @credits Mary Lou - http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/ *------------------------------------------------------------------------------ */ // // VARIABLES & MIXINS // ------------------ // Prevent Bootstrap Upgrading errors @import "../bootstrap/less/variables.less"; // Prevent Bootstrap Upgrading errors @import "../bootstrap/less/mixins.less"; // T3 Base variables @import "variables.less"; // T3 Base mixins @import "mixins.less"; // // OFF-CANVAS // ------------------------------------- // Toggle Button // ------------------- .off-canvas-toggle { z-index: 100; } // The Wrapper // ------------------- html, body { height: 100%; } .noscroll { position: fixed; overflow-y: scroll; width: 100%; } .t3-wrapper { // Need a background (Usually @body-bg). Otherwise the sidebar will overlap. background: @body-bg; position: relative; left: 0; z-index: 99; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; overflow: visible; &::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0,0,0,0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; z-index: 100; } } .t3-mainnav-android { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; &::after { -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } } .off-canvas-open { .t3-wrapper::after { width: 100%; height: 10000px; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .t3-mainnav-android::after { -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } } // The Sidebar // ------------------- .t3-off-canvas { position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; width: @t3-off-canvas-width; height: 100%; overflow: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; &::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } } .off-canvas-right.t3-off-canvas { display: none; } .off-canvas-right .off-canvas-right.t3-off-canvas { display: block; } html[dir="ltr"] .off-canvas-right.t3-off-canvas { left: auto; right: 0; } .off-canvas-open { .t3-off-canvas::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .off-canvas-current { visibility: visible; } .t3-off-canvas { overflow-y: auto; } } // // OFF-CANVAS CONTENT STYLES // ------------------------------------- .t3-off-canvas { // Generic // ----------------------------------- background: @t3-off-canvas-background; color: @t3-off-canvas-text-color; // Header // ----------------------------------- .t3-off-canvas-header { background: @t3-off-canvas-header-background; color: @t3-off-canvas-header-text-color; padding: @padding-base-vertical @padding-base-horizontal; // Title h2 { margin: 0; } } // Close Button .close { } // Body // ---------------------------------- .t3-off-canvas-body { padding: @padding-base-vertical @padding-base-horizontal; // Links // ------------ a { color: @t3-off-canvas-link-color; &:hover, &:focus { color: @t3-off-canvas-link-hover-color; } &:focus { .tab-focus(); } } // Navigations // ------------ .nav { } // Dropdown Menu // Always show Dropdown Menu in Off-Canvas Sidebar .dropdown-menu { position: static; float: none; display: block; width: 100%; padding: 0; border: 0; .box-shadow(none); } // Modules // ------------ .t3-module { } // End Off-Canvas Body } // End Off-Canvas Content Styles } // // OFF-CANVAS EFFECTS // ------------------------------------- // Effect 1: Slide in on top // ------------------------- .off-canvas-effect-1.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-1.off-canvas-open .off-canvas-effect-1.t3-off-canvas { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-1.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-1.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 2: Reveal // ---------------- .off-canvas-effect-2.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-2.t3-off-canvas { z-index: 1; } .off-canvas-effect-2.off-canvas-open .off-canvas-effect-2.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .off-canvas-effect-2.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-2.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } // Effect 3: Push // -------------- .off-canvas-effect-3.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-3.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-3.off-canvas-open .off-canvas-effect-3.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .off-canvas-effect-3.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-3.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-3.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 4: Slide along // --------------------- .off-canvas-effect-4.off-canvas-open .t3-wrapper, .off-canvas-effect-4.off-canvas-open .t3-mainnav-android { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-4.t3-off-canvas { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .off-canvas-effect-4.off-canvas-open .off-canvas-effect-4.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-4.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-4.off-canvas-open .t3-wrapper, .off-canvas-right.off-canvas-effect-4.off-canvas-open .t3-mainnav-android { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-4.t3-off-canvas { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } // Effect 5: Reverse slide out // --------------------------- .off-canvas-effect-5.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-5.t3-off-canvas { z-index: 1; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .off-canvas-effect-5.off-canvas-open .off-canvas-effect-5.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } // off-canvas on right side .off-canvas-right.off-canvas-effect-5.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-5.t3-off-canvas { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } // Effect 6: Rotate pusher // ----------------------- body.off-canvas-effect-6 { -webkit-perspective: 1500px; perspective: 1500px; } .off-canvas-effect-6 .t3-wrapper { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: auto; overflow: hidden; } .off-canvas-effect-6.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0) rotateY(-15deg); transform: translate3d(@t3-off-canvas-width, 0, 0) rotateY(-15deg); } .off-canvas-effect-6.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-6.off-canvas-open .off-canvas-effect-6.t3-off-canvas { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-6.t3-off-canvas::after { display: none; } .off-canvas-right.off-canvas-effect-6 .t3-wrapper { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-6.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0) rotateY(15deg); transform: translate3d(-@t3-off-canvas-width, 0, 0) rotateY(15deg); } .off-canvas-right.off-canvas-effect-6.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 7: 3D rotate in // ---------------------- body.off-canvas-effect-7 { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .off-canvas-effect-7 .t3-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-7.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-7.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform: translate3d(-100%, 0, 0) rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-7.off-canvas-open .off-canvas-effect-7.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } // off-canvas on right side body.off-canvas-effect-7.off-canvas-right { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-7.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-7.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); transform: translate3d(100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .off-canvas-right.off-canvas-effect-7.off-canvas-open .off-canvas-right.off-canvas-effect-7.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg); transform: translate3d(100%, 0, 0) rotateY(0deg); } // Effect 8: 3D rotate out // ----------------------- body.off-canvas-effect-8 { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .off-canvas-effect-8 .t3-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-8.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-8.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-8.off-canvas-open .off-canvas-effect-8.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } .off-canvas-effect-8.t3-off-canvas::after { display: none; } // off-canvas on right side body.off-canvas-effect-8.off-canvas-right { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-8.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-8.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg); transform: translate3d(100%, 0, 0) rotateY(-90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .off-canvas-right.off-canvas-effect-8.off-canvas-open .off-canvas-right.off-canvas-effect-8.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg); transform: translate3d(100%, 0, 0) rotateY(0deg); } // Effect 9: Scale down pusher // --------------------------- body.off-canvas-effect-9 { -webkit-perspective: 1500px; perspective: 1500px; } .off-canvas-effect-9 .t3-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-9.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(0, 0, -@t3-off-canvas-width); transform: translate3d(0, 0, -@t3-off-canvas-width); } .off-canvas-effect-9.t3-off-canvas { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-9.off-canvas-open .off-canvas-effect-9.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-9.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-9.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 10: Scale up // ------------------- body.off-canvas-effect-10 { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .off-canvas-effect-10.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-10.t3-off-canvas { z-index: 1; opacity: 1; -webkit-transform: translate3d(0, 0, -@t3-off-canvas-width); transform: translate3d(0, 0, -@t3-off-canvas-width); } .off-canvas-effect-10.off-canvas-open .off-canvas-effect-10.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } // off-canvas on right side body.off-canvas-effect-10.off-canvas-right { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-10.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } // Effect 11: Scale and rotate pusher // ---------------------------------- body.off-canvas-effect-11 { -webkit-perspective: 1500px; perspective: 1500px; } .off-canvas-effect-11 .t3-wrapper { height: auto; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-11.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg); transform: translate3d(100px, 0, -600px) rotateY(-20deg); } .off-canvas-effect-11.t3-off-canvas { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-11.off-canvas-open .off-canvas-effect-11.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-11.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-11.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-100px, 0, -600px) rotateY(20deg); transform: translate3d(-100px, 0, -600px) rotateY(20deg); } .off-canvas-right.off-canvas-effect-11.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 12: Open door // -------------------- body.off-canvas-effect-12 { -webkit-perspective: 1500px; perspective: 1500px; } .off-canvas-effect-12 .t3-wrapper { height: auto; overflow: hidden; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-12.off-canvas-open .t3-wrapper { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } .off-canvas-effect-12.t3-off-canvas { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .off-canvas-effect-12.off-canvas-open .off-canvas-effect-12.t3-off-canvas { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .off-canvas-effect-12.t3-off-canvas::after { display: none; } // off-canvas on right side .off-canvas-right.off-canvas-effect-12 .t3-wrapper { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .off-canvas-right.off-canvas-effect-12.off-canvas-open .t3-wrapper { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } .off-canvas-right.off-canvas-effect-12.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } // Effect 13: Fall down // -------------------- body.off-canvas-effect-13 { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .off-canvas-effect-13.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-13.t3-off-canvas { z-index: 1; opacity: 1; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .off-canvas-effect-13.off-canvas-open .off-canvas-effect-13.t3-off-canvas { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-speed: 0.2s; transition-speed: 0.2s; } // off-canvas on right side body.off-canvas-effect-13.off-canvas-right { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-13.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } // Effect 14: Delayed 3D rotate // ---------------------------- body.off-canvas-effect-14 { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .off-canvas-effect-14 .t3-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-14.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(@t3-off-canvas-width, 0, 0); transform: translate3d(@t3-off-canvas-width, 0, 0); } .off-canvas-effect-14.t3-off-canvas { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .off-canvas-effect-14.off-canvas-open .off-canvas-effect-14.t3-off-canvas { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } // off-canvas on right side body.off-canvas-effect-14.off-canvas-right { -webkit-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-14.off-canvas-open .t3-wrapper { -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0); transform: translate3d(-@t3-off-canvas-width, 0, 0); } .off-canvas-right.off-canvas-effect-14.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg); transform: translate3d(100%, 0, 0) rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .off-canvas-right.off-canvas-effect-14.off-canvas-open .off-canvas-right.off-canvas-effect-14.t3-off-canvas { -webkit-transform: translate3d(100%, 0, 0) rotateY(0deg); transform: translate3d(100%, 0, 0) rotateY(0deg); } // // Fallback for old IE (<IE10) // that don't support 3D transforms // ----------------------------------------------------- .old-ie { .t3-off-canvas { z-index: 100!important; left: -@t3-off-canvas-width; } } html[dir="ltr"] .off-canvas-right.old-ie { .t3-off-canvas { right: -@t3-off-canvas-width; left: auto; } } // // Fix conflict with modal // ----------------------------------------------------- .modal-open .t3-wrapper { position: static; }