You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
4.8 KiB
263 lines
4.8 KiB
/*
|
|
* # Semantic - Sidebar
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2014 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'module';
|
|
@element : 'sidebar';
|
|
|
|
@import '../../semantic.config';
|
|
|
|
|
|
/*******************************
|
|
Sidebar
|
|
*******************************/
|
|
|
|
body {
|
|
transition: @bodyTransition;
|
|
}
|
|
|
|
.ui.sidebar {
|
|
position: fixed;
|
|
|
|
margin: 0 !important;
|
|
|
|
height: 100% !important;
|
|
border-radius: 0px !important;
|
|
|
|
overflow-y: @overflowY;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: @zIndex;
|
|
|
|
transition: @sidebarTransition;
|
|
}
|
|
|
|
/*-------------------
|
|
Coupling
|
|
--------------------*/
|
|
|
|
body.pushed.scrolling.ui.dimmable {
|
|
position: @dimmableSidebarPosition;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
/*-------------------
|
|
Direction
|
|
--------------------*/
|
|
|
|
.ui.right.very.thin.sidebar,
|
|
.ui.right.thin.sidebar,
|
|
.ui.right.sidebar,
|
|
.ui.right.wide.sidebar,
|
|
.ui.right.very.wide.sidebar {
|
|
left: 100%;
|
|
margin: 0px !important;
|
|
}
|
|
|
|
.ui.top.sidebar {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.ui.bottom.sidebar {
|
|
width: 100% !important;
|
|
top: 100%;
|
|
margin: 0px !important;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
States
|
|
*******************************/
|
|
|
|
.ui.active.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.top.sidebar,
|
|
.ui.active.bottom.sidebar {
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Variations
|
|
*******************************/
|
|
|
|
/*-------------------
|
|
Formatted
|
|
--------------------*/
|
|
|
|
.ui.styled.sidebar {
|
|
padding: @styledVerticalPadding @styledHorizontalPadding;
|
|
background-color: @styledBackground;
|
|
box-shadow: @styledBoxShadow;
|
|
}
|
|
.ui.styled.thin.sidebar {
|
|
padding: @styledThinPadding;
|
|
}
|
|
.ui.styled.very.thin.sidebar {
|
|
padding: @styledVeryThinPadding;
|
|
}
|
|
|
|
|
|
/*-------------------
|
|
Floating
|
|
--------------------*/
|
|
|
|
.ui.floating.sidebar {
|
|
box-shadow: @floatingLeftBoxShadow;
|
|
}
|
|
.ui.right.floating.sidebar {
|
|
box-shadow: @floatingRightBoxShadow;
|
|
}
|
|
.ui.top.floating.sidebar {
|
|
box-shadow: @floatingTopBoxShadow;
|
|
}
|
|
.ui.bottom.floating.sidebar {
|
|
box-shadow: @floatingBottomBoxShadow
|
|
}
|
|
|
|
/*-------------------
|
|
Width
|
|
--------------------*/
|
|
|
|
/* Very Thin */
|
|
.ui.very.thin.sidebar {
|
|
width: @veryThinWidth !important;
|
|
margin-left: -@veryThinWidth !important;
|
|
}
|
|
.ui.active.very.thin.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.right.very.thin.sidebar {
|
|
margin-left: -@veryThinWidth !important;
|
|
}
|
|
|
|
/* Thin */
|
|
.ui.thin.sidebar {
|
|
width: @thinWidth !important;
|
|
margin-left: -@thinWidth !important;
|
|
}
|
|
.ui.active.thin.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.right.thin.sidebar {
|
|
margin-left: -@thinWidth !important;
|
|
}
|
|
|
|
/* Standard */
|
|
.ui.sidebar {
|
|
width: @width !important;
|
|
margin-left: -@width !important;
|
|
}
|
|
.ui.active.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.right.sidebar {
|
|
margin-left: -@width !important;
|
|
}
|
|
|
|
/* Wide */
|
|
.ui.wide.sidebar {
|
|
width: @wideWidth !important;
|
|
margin-left: -@wideWidth !important;
|
|
}
|
|
.ui.active.wide.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.right.wide.sidebar {
|
|
margin-left: -@wideWidth !important;
|
|
}
|
|
|
|
/* Very Wide */
|
|
.ui.very.wide.sidebar {
|
|
width: @veryWideWidth !important;
|
|
margin-left: -@veryWideWidth !important;
|
|
}
|
|
.ui.active.very.wide.sidebar {
|
|
margin-left: 0px !important;
|
|
}
|
|
.ui.active.right.very.wide.sidebar {
|
|
margin-left: -@veryWideWidth !important;
|
|
}
|
|
|
|
/*-------------------
|
|
Height
|
|
--------------------*/
|
|
|
|
/* Very Thin */
|
|
.ui.very.thin.top.sidebar {
|
|
margin: -@veryThinHeight 0px 0px 0px !important;
|
|
}
|
|
.ui.very.thin.top.sidebar,
|
|
.ui.very.thin.bottom.sidebar {
|
|
height: @veryThinHeight !important;
|
|
}
|
|
.ui.very.thin.active.bottom.sidebar {
|
|
margin-top: -@veryThinHeight !important;
|
|
}
|
|
|
|
/* Thin */
|
|
.ui.thin.top.sidebar {
|
|
margin: -@thinHeight 0px 0px 0px !important;
|
|
}
|
|
.ui.thin.top.sidebar,
|
|
.ui.thin.bottom.sidebar {
|
|
height: @thinHeight !important;
|
|
}
|
|
.ui.thin.active.bottom.sidebar {
|
|
margin-top: -@thinHeight !important;
|
|
}
|
|
|
|
/* Standard */
|
|
.ui.top.sidebar {
|
|
margin: -@height 0px 0px 0px !important;
|
|
}
|
|
.ui.top.sidebar,
|
|
.ui.bottom.sidebar {
|
|
height: @height !important;
|
|
}
|
|
.ui.active.bottom.sidebar {
|
|
margin-top: -@height !important;
|
|
}
|
|
|
|
/* Tall */
|
|
.ui.tall.top.sidebar {
|
|
margin: -@tallHeight 0px 0px 0px !important;
|
|
}
|
|
.ui.tall.top.sidebar,
|
|
.ui.tall.bottom.sidebar {
|
|
height: @tallHeight !important;
|
|
}
|
|
.ui.tall.active.bottom.sidebar {
|
|
margin-top: -@tallHeight !important;
|
|
}
|
|
|
|
/* Very Tall */
|
|
.ui.very.tall.top.sidebar {
|
|
margin: -@veryTallHeight 0px 0px 0px !important;
|
|
}
|
|
.ui.very.tall.top.sidebar,
|
|
.ui.very.tall.bottom.sidebar {
|
|
height: @veryTallHeight !important;
|
|
}
|
|
.ui.very.tall.active.bottom.sidebar {
|
|
margin-top: -@veryTallHeight !important;
|
|
}
|
|
|
|
.loadUIOverrides();
|