@ -38142,603 +38142,6 @@ template {
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Sidebar
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Sidebar
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/* Sidebar Menu */
. ui . sidebar {
position : fixed ;
top : 0 ;
left : 0 ;
-webkit-backface-visibility : hidden ;
backface-visibility : hidden ;
transition : none ;
will-change : transform ;
transform : translate3d ( 0 , 0 , 0 ) ;
visibility : hidden ;
-webkit-overflow-scrolling : touch ;
height : 100 % ! important ;
max-height : 100 % ;
border-radius : 0 ! important ;
margin : 0 ! important ;
overflow-y : auto ! important ;
z-index : 102 ;
}
/* GPU Layers for Child Elements */
. ui . sidebar > * {
-webkit-backface-visibility : hidden ;
backface-visibility : hidden ;
}
/ * --------------
Direction
--------------- * /
. ui . left . sidebar {
right : auto ;
left : 0 ;
transform : translate3d ( -100 % , 0 , 0 ) ;
}
. ui . right . sidebar {
right : 0 ! important ;
left : auto ! important ;
transform : translate3d ( 100 % , 0 , 0 ) ;
}
. ui . top . sidebar ,
. ui . bottom . sidebar {
width : 100 % ! important ;
height : auto ! important ;
}
. ui . top . sidebar {
top : 0 ! important ;
bottom : auto ! important ;
transform : translate3d ( 0 , -100 % , 0 ) ;
}
. ui . bottom . sidebar {
top : auto ! important ;
bottom : 0 ! important ;
transform : translate3d ( 0 , 100 % , 0 ) ;
}
/ * --------------
Pushable
--------------- * /
. pushable {
height : 100 % ;
overflow-x : hidden ;
padding : 0 ! important ;
}
/* Whole Page */
body . pushable {
background : # 545454 ;
}
body . pushable . dimmed {
background : inherit ;
}
/* Page Context */
. pushable : not ( body ) {
transform : translate3d ( 0 , 0 , 0 ) ;
overflow-y : hidden ;
}
. pushable : not ( body ) > . ui . sidebar ,
. pushable : not ( body ) > . fixed ,
. pushable : not ( body ) > . pusher : after {
position : absolute ;
}
/ * --------------
Fixed
--------------- * /
. pushable > . fixed {
position : fixed ;
-webkit-backface-visibility : hidden ;
backface-visibility : hidden ;
transition : transform 500ms ease ;
will-change : transform ;
z-index : 101 ;
}
/ * --------------
Page
--------------- * /
. pushable > . pusher {
position : relative ;
-webkit-backface-visibility : hidden ;
backface-visibility : hidden ;
overflow : hidden ;
min-height : 100 % ;
transition : transform 500ms ease ;
z-index : 2 ;
/* Pusher should inherit background from context */
background : inherit ;
}
body . pushable > . pusher {
background : # FFFFFF ;
}
/ * --------------
Dimmer
--------------- * /
. pushable > . pusher : after {
position : fixed ;
top : 0 ;
right : 0 ;
content : '' ;
background : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
overflow : hidden ;
opacity : 0 ;
transition : opacity 500ms ;
will-change : opacity ;
z-index : 1000 ;
}
/ * --------------
Coupling
--------------- * /
. ui . sidebar . menu . item {
border-radius : 0 ! important ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Dimmed
--------------- * /
. pushable > . pusher . dimmed : after {
width : 100 % ! important ;
height : 100 % ! important ;
opacity : 1 ! important ;
}
/ * --------------
Animating
--------------- * /
. ui . animating . sidebar {
visibility : visible ;
}
/ * --------------
Visible
--------------- * /
. ui . visible . sidebar {
visibility : visible ;
transform : translate3d ( 0 , 0 , 0 ) ;
}
/* Shadow Direction */
. ui . left . visible . sidebar ,
. ui . right . visible . sidebar {
box-shadow : 0 0 20px rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
. ui . top . visible . sidebar ,
. ui . bottom . visible . sidebar {
box-shadow : 0 0 20px rgba ( 34 , 36 , 38 , 0 . 15 ) ;
}
/* Visible On Load */
. ui . visible . left . sidebar ~ . fixed ,
. ui . visible . left . sidebar ~ . pusher {
transform : translate3d ( 260px , 0 , 0 ) ;
}
. ui . visible . right . sidebar ~ . fixed ,
. ui . visible . right . sidebar ~ . pusher {
transform : translate3d ( -260px , 0 , 0 ) ;
}
. ui . visible . top . sidebar ~ . fixed ,
. ui . visible . top . sidebar ~ . pusher {
transform : translate3d ( 0 , 36px , 0 ) ;
}
. ui . visible . bottom . sidebar ~ . fixed ,
. ui . visible . bottom . sidebar ~ . pusher {
transform : translate3d ( 0 , -36px , 0 ) ;
}
/* opposite sides visible forces content overlay */
. ui . visible . left . sidebar ~ . ui . visible . right . sidebar ~ . fixed ,
. ui . visible . left . sidebar ~ . ui . visible . right . sidebar ~ . pusher ,
. ui . visible . right . sidebar ~ . ui . visible . left . sidebar ~ . fixed ,
. ui . visible . right . sidebar ~ . ui . visible . left . sidebar ~ . pusher {
transform : translate3d ( 0 , 0 , 0 ) ;
}
/ * --------------
iOS
--------------- * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Width
--------------- * /
/* Left / Right */
. ui . thin . left . sidebar ,
. ui . thin . right . sidebar {
width : 150px ;
}
. ui [ class * = "very thin" ] . left . sidebar ,
. ui [ class * = "very thin" ] . right . sidebar {
width : 60px ;
}
. ui . left . sidebar ,
. ui . right . sidebar {
width : 260px ;
}
. ui . wide . left . sidebar ,
. ui . wide . right . sidebar {
width : 350px ;
}
. ui [ class * = "very wide" ] . left . sidebar ,
. ui [ class * = "very wide" ] . right . sidebar {
width : 475px ;
}
/* Left Visible */
. ui . visible . thin . left . sidebar ~ . fixed ,
. ui . visible . thin . left . sidebar ~ . pusher {
transform : translate3d ( 150px , 0 , 0 ) ;
}
. ui . visible [ class * = "very thin" ] . left . sidebar ~ . fixed ,
. ui . visible [ class * = "very thin" ] . left . sidebar ~ . pusher {
transform : translate3d ( 60px , 0 , 0 ) ;
}
. ui . visible . wide . left . sidebar ~ . fixed ,
. ui . visible . wide . left . sidebar ~ . pusher {
transform : translate3d ( 350px , 0 , 0 ) ;
}
. ui . visible [ class * = "very wide" ] . left . sidebar ~ . fixed ,
. ui . visible [ class * = "very wide" ] . left . sidebar ~ . pusher {
transform : translate3d ( 475px , 0 , 0 ) ;
}
/* Right Visible */
. ui . visible . thin . right . sidebar ~ . fixed ,
. ui . visible . thin . right . sidebar ~ . pusher {
transform : translate3d ( -150px , 0 , 0 ) ;
}
. ui . visible [ class * = "very thin" ] . right . sidebar ~ . fixed ,
. ui . visible [ class * = "very thin" ] . right . sidebar ~ . pusher {
transform : translate3d ( -60px , 0 , 0 ) ;
}
. ui . visible . wide . right . sidebar ~ . fixed ,
. ui . visible . wide . right . sidebar ~ . pusher {
transform : translate3d ( -350px , 0 , 0 ) ;
}
. ui . visible [ class * = "very wide" ] . right . sidebar ~ . fixed ,
. ui . visible [ class * = "very wide" ] . right . sidebar ~ . pusher {
transform : translate3d ( -475px , 0 , 0 ) ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Animations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------
Overlay
--------------- * /
/* Set-up */
. ui . overlay . sidebar {
z-index : 102 ;
}
/* Initial */
. ui . left . overlay . sidebar {
transform : translate3d ( -100 % , 0 , 0 ) ;
}
. ui . right . overlay . sidebar {
transform : translate3d ( 100 % , 0 , 0 ) ;
}
. ui . top . overlay . sidebar {
transform : translate3d ( 0 % , -100 % , 0 ) ;
}
. ui . bottom . overlay . sidebar {
transform : translate3d ( 0 % , 100 % , 0 ) ;
}
/* Animation */
. animating . ui . overlay . sidebar ,
. ui . visible . overlay . sidebar {
transition : transform 500ms ease ;
}
/* End - Sidebar */
. ui . visible . left . overlay . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
. ui . visible . right . overlay . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
. ui . visible . top . overlay . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
. ui . visible . bottom . overlay . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
/* End - Pusher */
. ui . visible . overlay . sidebar ~ . fixed ,
. ui . visible . overlay . sidebar ~ . pusher {
transform : none ! important ;
}
/ * --------------
Push
--------------- * /
/* Initial */
. ui . push . sidebar {
transition : transform 500ms ease ;
z-index : 102 ;
}
/* Sidebar - Initial */
. ui . left . push . sidebar {
transform : translate3d ( -100 % , 0 , 0 ) ;
}
. ui . right . push . sidebar {
transform : translate3d ( 100 % , 0 , 0 ) ;
}
. ui . top . push . sidebar {
transform : translate3d ( 0 % , -100 % , 0 ) ;
}
. ui . bottom . push . sidebar {
transform : translate3d ( 0 % , 100 % , 0 ) ;
}
/* End */
. ui . visible . push . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
/ * --------------
Uncover
--------------- * /
/* Initial */
. ui . uncover . sidebar {
transform : translate3d ( 0 , 0 , 0 ) ;
z-index : 1 ;
}
/* End */
. ui . visible . uncover . sidebar {
transform : translate3d ( 0 , 0 , 0 ) ;
transition : transform 500ms ease ;
}
/ * --------------
Slide Along
--------------- * /
/* Initial */
. ui . slide . along . sidebar {
z-index : 1 ;
}
/* Sidebar - Initial */
. ui . left . slide . along . sidebar {
transform : translate3d ( -50 % , 0 , 0 ) ;
}
. ui . right . slide . along . sidebar {
transform : translate3d ( 50 % , 0 , 0 ) ;
}
. ui . top . slide . along . sidebar {
transform : translate3d ( 0 , -50 % , 0 ) ;
}
. ui . bottom . slide . along . sidebar {
transform : translate3d ( 0 % , 50 % , 0 ) ;
}
/* Animation */
. ui . animating . slide . along . sidebar {
transition : transform 500ms ease ;
}
/* End */
. ui . visible . slide . along . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
/ * --------------
Slide Out
--------------- * /
/* Initial */
. ui . slide . out . sidebar {
z-index : 1 ;
}
/* Sidebar - Initial */
. ui . left . slide . out . sidebar {
transform : translate3d ( 50 % , 0 , 0 ) ;
}
. ui . right . slide . out . sidebar {
transform : translate3d ( -50 % , 0 , 0 ) ;
}
. ui . top . slide . out . sidebar {
transform : translate3d ( 0 % , 50 % , 0 ) ;
}
. ui . bottom . slide . out . sidebar {
transform : translate3d ( 0 % , -50 % , 0 ) ;
}
/* Animation */
. ui . animating . slide . out . sidebar {
transition : transform 500ms ease ;
}
/* End */
. ui . visible . slide . out . sidebar {
transform : translate3d ( 0 % , 0 , 0 ) ;
}
/ * --------------
Scale Down
--------------- * /
/* Initial */
. ui . scale . down . sidebar {
transition : transform 500ms ease ;
z-index : 102 ;
}
. ui . left . scale . down . sidebar {
transform : translate3d ( -100 % , 0 , 0 ) ;
}
. ui . right . scale . down . sidebar {
transform : translate3d ( 100 % , 0 , 0 ) ;
}
. ui . top . scale . down . sidebar {
transform : translate3d ( 0 % , -100 % , 0 ) ;
}
. ui . bottom . scale . down . sidebar {
transform : translate3d ( 0 % , 100 % , 0 ) ;
}
/* Pusher - Initial */
. ui . scale . down . left . sidebar ~ . pusher {
transform-origin : 75 % 50 % ;
}
. ui . scale . down . right . sidebar ~ . pusher {
transform-origin : 25 % 50 % ;
}
. ui . scale . down . top . sidebar ~ . pusher {
transform-origin : 50 % 75 % ;
}
. ui . scale . down . bottom . sidebar ~ . pusher {
transform-origin : 50 % 25 % ;
}
/* Animation */
. ui . animating . scale . down > . visible . ui . sidebar {
transition : transform 500ms ease ;
}
. ui . visible . scale . down . sidebar ~ . pusher ,
. ui . animating . scale . down . sidebar ~ . pusher {
display : block ! important ;
width : 100 % ;
height : 100 % ;
overflow : hidden ! important ;
}
/* End */
. ui . visible . scale . down . sidebar {
transform : translate3d ( 0 , 0 , 0 ) ;
}
. ui . visible . scale . down . sidebar ~ . pusher {
transform : scale ( 0 . 75 ) ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /