/* ======================================================================== * bootstrap-drawer: 1.0.6 * ======================================================================== */ html { min-height: 100%; height: 100%; } body.has-drawer { min-height: 100%; height: 100%; } .has-inner-drawer { position: relative; overflow: hidden; } .drawer { display: block; background-color: #f8f8f8; color: #333333; border-right: 1px solid #dfdfdf; min-height: 1px; height: 100%; top: 0; left: 0; position: fixed; z-index: 1035; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .drawer-contents, .drawer-heading, .drawer-body, .drawer-nav, .drawer-footer, .drawer ul, .drawer li { display: inherit; margin: 0; width: 100%; position: relative; } .drawer-right { left: auto; right: 0; border-right: none; border-left: 1px solid #dfdfdf; -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); } .drawer-inverse { background-color: #333; color: #eeeeee; border-right: 1px solid #1a1a1a; } .drawer-inverse.drawer-right { border-right: 1px solid #dfdfdf; } .drawer-inside { position: absolute; } .drawer-controls { float: right; margin-right: -16.66666667%; padding: 10px; height: 100%; position: relative; width: 16.66666667%; z-index: 500; } .drawer-contents { background-color: #f8f8f8; height: 100%; width: 100%; overflow: auto; } .drawer-right .drawer-controls { float: left; margin-left: -16.66666667%; margin-right: 0; } .drawer-heading { border-bottom: 1px solid #dfdfdf; padding: 10px 15px; color: inherit; } .drawer-title { margin-top: 0; margin-bottom: 0; } .drawer-inner-toggle { position: absolute; top: 10px; right: 10px; } .drawer-body, .drawer-nav { padding: 10px 15px; } .drawer-nav, .drawer-fullnav { padding: 10px 15px; margin-bottom: 0; list-style: none; } .drawer-nav li, .drawer-fullnav li { position: relative; margin-bottom: 5px; } .drawer-nav li a, .drawer-fullnav li a { color: #777; border-radius: 4px; position: relative; display: block; padding: 10px 15px; } .drawer-nav li.active a, .drawer-fullnav li.active a, .drawer-nav li a:hover, .drawer-fullnav li a:hover, .drawer-nav li a:focus, .drawer-fullnav li a:focus { color: #515151; text-decoration: none; background-color: #ffffff; } .drawer-fullnav { color: #fff; padding: 0; } .drawer-fullnav li { margin-bottom: 0; } .drawer-fullnav li a { border-radius: 0; } .drawer-inverse .drawer-contents { background-color: #333; } .drawer-inverse .drawer-fullnav li a, .drawer-inverse .drawer-nav li a { color: #fff; padding: 10px 15px; } .drawer-inverse .drawer-fullnav li.active a, .drawer-inverse .drawer-fullnav li a:hover, .drawer-inverse .drawer-fullnav li a:active, .drawer-inverse .drawer-nav li.active a, .drawer-inverse .drawer-nav li a:hover, .drawer-inverse .drawer-nav li a:active { color: #eeeeee; background-color: #1a1a1a; } .drawer-footer { padding: 10px 15px; } .drawer-footer.locked { position: absolute; bottom: 0; left: 0; } .dw-xs-12 { width: 100%; } .fold.dw-xs-12 { margin-left: -100%; } .drawer-right.fold.dw-xs-12 { margin-right: -100%; } .dw-xs-11 { width: 91.66666667%; } .fold.dw-xs-11 { margin-left: -91.66666667%; } .drawer-right.fold.dw-xs-11 { margin-right: -91.66666667%; } .dw-xs-10 { width: 83.33333333%; } .fold.dw-xs-10 { margin-left: -83.33333333%; } .drawer-right.fold.dw-xs-10 { margin-right: -83.33333333%; } .dw-xs-9 { width: 75%; } .fold.dw-xs-9 { margin-left: -75%; } .drawer-right.fold.dw-xs-9 { margin-right: -75%; } .dw-xs-8 { width: 66.66666667%; } .fold.dw-xs-8 { margin-left: -66.66666667%; } .drawer-right.fold.dw-xs-8 { margin-right: -66.66666667%; } .dw-xs-7 { width: 58.33333333%; } .fold.dw-xs-7 { margin-left: -58.33333333%; } .drawer-right.fold.dw-xs-7 { margin-right: -58.33333333%; } .dw-xs-6 { width: 50%; } .fold.dw-xs-6 { margin-left: -50%; } .drawer-right.fold.dw-xs-6 { margin-right: -50%; } .dw-xs-5 { width: 41.66666667%; } .fold.dw-xs-5 { margin-left: -41.66666667%; } .drawer-right.fold.dw-xs-5 { margin-right: -41.66666667%; } .dw-xs-4 { width: 33.33333333%; } .fold.dw-xs-4 { margin-left: -33.33333333%; } .drawer-right.fold.dw-xs-4 { margin-right: -33.33333333%; } .dw-xs-3 { width: 25%; } .fold.dw-xs-3 { margin-left: -25%; } .drawer-right.fold.dw-xs-3 { margin-right: -25%; } .dw-xs-2 { width: 16.66666667%; } .fold.dw-xs-2 { margin-left: -16.66666667%; } .drawer-right.fold.dw-xs-2 { margin-right: -16.66666667%; } .dw-xs-1 { width: 8.33333333%; } .fold.dw-xs-1 { margin-left: -8.33333333%; } .drawer-right.fold.dw-xs-1 { margin-right: -8.33333333%; } @media (min-width: 768px) { .dw-sm-12 { width: 100%; } .fold.dw-sm-12 { margin-left: -100%; } .drawer-right.fold.dw-sm-12 { margin-right: -100%; } .dw-sm-11 { width: 91.66666667%; } .fold.dw-sm-11 { margin-left: -91.66666667%; } .drawer-right.fold.dw-sm-11 { margin-right: -91.66666667%; } .dw-sm-10 { width: 83.33333333%; } .fold.dw-sm-10 { margin-left: -83.33333333%; } .drawer-right.fold.dw-sm-10 { margin-right: -83.33333333%; } .dw-sm-9 { width: 75%; } .fold.dw-sm-9 { margin-left: -75%; } .drawer-right.fold.dw-sm-9 { margin-right: -75%; } .dw-sm-8 { width: 66.66666667%; } .fold.dw-sm-8 { margin-left: -66.66666667%; } .drawer-right.fold.dw-sm-8 { margin-right: -66.66666667%; } .dw-sm-7 { width: 58.33333333%; } .fold.dw-sm-7 { margin-left: -58.33333333%; } .drawer-right.fold.dw-sm-7 { margin-right: -58.33333333%; } .dw-sm-6 { width: 50%; } .fold.dw-sm-6 { margin-left: -50%; } .drawer-right.fold.dw-sm-6 { margin-right: -50%; } .dw-sm-5 { width: 41.66666667%; } .fold.dw-sm-5 { margin-left: -41.66666667%; } .drawer-right.fold.dw-sm-5 { margin-right: -41.66666667%; } .dw-sm-4 { width: 33.33333333%; } .fold.dw-sm-4 { margin-left: -33.33333333%; } .drawer-right.fold.dw-sm-4 { margin-right: -33.33333333%; } .dw-sm-3 { width: 25%; } .fold.dw-sm-3 { margin-left: -25%; } .drawer-right.fold.dw-sm-3 { margin-right: -25%; } .dw-sm-2 { width: 16.66666667%; } .fold.dw-sm-2 { margin-left: -16.66666667%; } .drawer-right.fold.dw-sm-2 { margin-right: -16.66666667%; } .dw-sm-1 { width: 8.33333333%; } .fold.dw-sm-1 { margin-left: -8.33333333%; } .drawer-right.fold.dw-sm-1 { margin-right: -8.33333333%; } } @media (min-width: 992px) { .dw-md-12 { width: 100%; } .fold.dw-md-12 { margin-left: -100%; } .drawer-right.fold.dw-md-12 { margin-right: -100%; } .dw-md-11 { width: 91.66666667%; } .fold.dw-md-11 { margin-left: -91.66666667%; } .drawer-right.fold.dw-md-11 { margin-right: -91.66666667%; } .dw-md-10 { width: 83.33333333%; } .fold.dw-md-10 { margin-left: -83.33333333%; } .drawer-right.fold.dw-md-10 { margin-right: -83.33333333%; } .dw-md-9 { width: 75%; } .fold.dw-md-9 { margin-left: -75%; } .drawer-right.fold.dw-md-9 { margin-right: -75%; } .dw-md-8 { width: 66.66666667%; } .fold.dw-md-8 { margin-left: -66.66666667%; } .drawer-right.fold.dw-md-8 { margin-right: -66.66666667%; } .dw-md-7 { width: 58.33333333%; } .fold.dw-md-7 { margin-left: -58.33333333%; } .drawer-right.fold.dw-md-7 { margin-right: -58.33333333%; } .dw-md-6 { width: 50%; } .fold.dw-md-6 { margin-left: -50%; } .drawer-right.fold.dw-md-6 { margin-right: -50%; } .dw-md-5 { width: 41.66666667%; } .fold.dw-md-5 { margin-left: -41.66666667%; } .drawer-right.fold.dw-md-5 { margin-right: -41.66666667%; } .dw-md-4 { width: 33.33333333%; } .fold.dw-md-4 { margin-left: -33.33333333%; } .drawer-right.fold.dw-md-4 { margin-right: -33.33333333%; } .dw-md-3 { width: 25%; } .fold.dw-md-3 { margin-left: -25%; } .drawer-right.fold.dw-md-3 { margin-right: -25%; } .dw-md-2 { width: 16.66666667%; } .fold.dw-md-2 { margin-left: -16.66666667%; } .drawer-right.fold.dw-md-2 { margin-right: -16.66666667%; } .dw-md-1 { width: 8.33333333%; } .fold.dw-md-1 { margin-left: -8.33333333%; } .drawer-right.fold.dw-md-1 { margin-right: -8.33333333%; } } @media (min-width: 1200px) { .dw-lg-12 { width: 100%; } .fold.dw-lg-12 { margin-left: -100%; } .drawer-right.fold.dw-lg-12 { margin-right: -100%; } .dw-lg-11 { width: 91.66666667%; } .fold.dw-lg-11 { margin-left: -91.66666667%; } .drawer-right.fold.dw-lg-11 { margin-right: -91.66666667%; } .dw-lg-10 { width: 83.33333333%; } .fold.dw-lg-10 { margin-left: -83.33333333%; } .drawer-right.fold.dw-lg-10 { margin-right: -83.33333333%; } .dw-lg-9 { width: 75%; } .fold.dw-lg-9 { margin-left: -75%; } .drawer-right.fold.dw-lg-9 { margin-right: -75%; } .dw-lg-8 { width: 66.66666667%; } .fold.dw-lg-8 { margin-left: -66.66666667%; } .drawer-right.fold.dw-lg-8 { margin-right: -66.66666667%; } .dw-lg-7 { width: 58.33333333%; } .fold.dw-lg-7 { margin-left: -58.33333333%; } .drawer-right.fold.dw-lg-7 { margin-right: -58.33333333%; } .dw-lg-6 { width: 50%; } .fold.dw-lg-6 { margin-left: -50%; } .drawer-right.fold.dw-lg-6 { margin-right: -50%; } .dw-lg-5 { width: 41.66666667%; } .fold.dw-lg-5 { margin-left: -41.66666667%; } .drawer-right.fold.dw-lg-5 { margin-right: -41.66666667%; } .dw-lg-4 { width: 33.33333333%; } .fold.dw-lg-4 { margin-left: -33.33333333%; } .drawer-right.fold.dw-lg-4 { margin-right: -33.33333333%; } .dw-lg-3 { width: 25%; } .fold.dw-lg-3 { margin-left: -25%; } .drawer-right.fold.dw-lg-3 { margin-right: -25%; } .dw-lg-2 { width: 16.66666667%; } .fold.dw-lg-2 { margin-left: -16.66666667%; } .drawer-right.fold.dw-lg-2 { margin-right: -16.66666667%; } .dw-lg-1 { width: 8.33333333%; } .fold.dw-lg-1 { margin-left: -8.33333333%; } .drawer-right.fold.dw-lg-1 { margin-right: -8.33333333%; } } .fold { margin-right: 0; } .folding { height: 100%; -webkit-transition-property: margin-left; transition-property: margin-left; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .drawer-right.fold { margin-left: 0; } .drawer-right.folding { -webkit-transition-property: margin-right; transition-property: margin-right; } .fold.open, .drawer-right.fold.open { margin-left: 0; margin-right: 0; }