SemanSemantic-UItic-UI/build/less/definitions/modules/sidebar.less

/*
 * # 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();