Theme sidebar

server/documents/modules/sidebar.html.eco

@@ -2,11 +2,17 @@
 layout      : 'default'
 css         : 'side'
 
+element     : 'sidebar'
+elementType : 'element'
+
 title       : 'Sidebar'
 description : 'A sidebar is a menu hidden beside page content'
 type        : 'UI Module'
+
+themes      : ['Default']
 ---
 
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/sidebar.less" />
 <script src="/javascript/sidebar.js"></script>
 
 <%- @partial('header', { tabs: 'module' }) %>

src/definitions/modules/sidebar.less

@@ -8,31 +8,24 @@
  * http://opensource.org/licenses/MIT
  *
  */
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'sidebar';
+
+@import '../../semantic.config';
+
+
 /*******************************
             Sidebar
 *******************************/
 
 body {
-  -webkit-transition:
-    margin 0.3s ease,
-    -webkit-transform 0.3s ease
-  ;
-  -moz-transition:
-    margin 0.3s ease,
-    -moz-transform 0.3s ease
-  ;
-  -o-transition:
-    margin 0.3s ease,
-    transform 0.3s ease
-  ;
-  -ms-transition:
-    margin 0.3s ease,
-    transform 0.3s ease
-  ;
-  transition:
-    margin 0.3s ease,
-    transform 0.3s ease
-  ;
+  transition: @bodyTransition;
 }
 
 .ui.sidebar {
@@ -41,50 +34,22 @@ body {
   margin: 0 !important;
 
   height: 100% !important;
-
-  -webkit-border-radius: 0px !important;
-  -moz-border-radius: 0px !important;
   border-radius: 0px !important;
 
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -ms-overflow-y: auto;
-  overflow-y: auto;
+  overflow-y: @overflowY;
   top: 0px;
   left: 0px;
-  z-index: 999;
-
-  -webkit-transition:
-    margin-left 0.3s ease,
-    margin-top 0.3s ease
-  ;
-  -moz-transition:
-    margin-left 0.3s ease,
-    margin-top 0.3s ease
-  ;
-  -o-transition:
-    margin-left 0.3s ease,
-    margin-top 0.3s ease
-  ;
-  -ms-transition:
-    margin-left 0.3s ease,
-    margin-top 0.3s ease
-  ;
-  transition:
-    margin-left 0.3s ease,
-    margin-top 0.3s ease
-  ;
+  z-index: @zIndex;
+
+  transition: @sidebarTransition;
 }
 
 /*-------------------
       Coupling
 --------------------*/
 
 body.pushed.scrolling.ui.dimmable {
-  position: static;
+  position: @dimmableSidebarPosition;
 }
 
 
@@ -138,15 +103,15 @@ body.pushed.scrolling.ui.dimmable {
 --------------------*/
 
 .ui.styled.sidebar {
-  padding: 1em 1.5em;
-  background-color: #FFFFFF;
-  box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
-}
-.ui.styled.very.thin.sidebar {
-  padding: 0.5em;
+  padding: @styledVerticalPadding @styledHorizontalPadding;
+  background-color: @styledBackground;
+  box-shadow: @styledBoxShadow;
 }
 .ui.styled.thin.sidebar {
-  padding: 1em;
+  padding: @styledThinPadding;
+}
+.ui.styled.very.thin.sidebar {
+  padding: @styledVeryThinPadding;
 }
 
 
@@ -155,92 +120,80 @@ body.pushed.scrolling.ui.dimmable {
 --------------------*/
 
 .ui.floating.sidebar {
-  -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: @floatingLeftBoxShadow;
 }
-
 .ui.right.floating.sidebar {
-  -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
-  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: @floatingRightBoxShadow;
 }
-
 .ui.top.floating.sidebar {
-  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: @floatingTopBoxShadow;
 }
-
 .ui.bottom.floating.sidebar {
-  -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: @floatingBottomBoxShadow
 }
 
-
 /*-------------------
         Width
 --------------------*/
 
 /* Very Thin */
 .ui.very.thin.sidebar {
-  width: 60px !important;
-  margin-left: -60px !important;
+  width: @veryThinWidth !important;
+  margin-left: -@veryThinWidth !important;
 }
 .ui.active.very.thin.sidebar {
   margin-left: 0px !important;
 }
 .ui.active.right.very.thin.sidebar {
-  margin-left: -60px !important;
+  margin-left: -@veryThinWidth !important;
 }
 
 /* Thin */
 .ui.thin.sidebar {
-  width: 200px !important;
-  margin-left: -200px !important;
+  width: @thinWidth !important;
+  margin-left: -@thinWidth !important;
 }
 .ui.active.thin.sidebar {
   margin-left: 0px !important;
 }
 .ui.active.right.thin.sidebar {
-  margin-left: -200px !important;
+  margin-left: -@thinWidth !important;
 }
 
 /* Standard */
 .ui.sidebar {
-  width: 275px !important;
-  margin-left: -275px !important;
+  width: @width !important;
+  margin-left: -@width !important;
 }
 .ui.active.sidebar {
   margin-left: 0px !important;
 }
 .ui.active.right.sidebar {
-  margin-left: -275px !important;
+  margin-left: -@width !important;
 }
 
 /* Wide */
 .ui.wide.sidebar {
-  width: 350px !important;
-  margin-left: -350px !important;
+  width: @wideWidth !important;
+  margin-left: -@wideWidth !important;
 }
 .ui.active.wide.sidebar {
   margin-left: 0px !important;
 }
 .ui.active.right.wide.sidebar {
-  margin-left: -350px !important;
+  margin-left: -@wideWidth !important;
 }
 
 /* Very Wide */
 .ui.very.wide.sidebar {
-  width: 475px !important;
-  margin-left: -475px !important;
+  width: @veryWideWidth !important;
+  margin-left: -@veryWideWidth !important;
 }
 .ui.active.very.wide.sidebar {
   margin-left: 0px !important;
 }
 .ui.active.right.very.wide.sidebar {
-  margin-left: -475px !important;
+  margin-left: -@veryWideWidth !important;
 }
 
 
@@ -249,14 +202,66 @@ body.pushed.scrolling.ui.dimmable {
        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: -40px 0px 0px 0px !important;
+  margin: -@height 0px 0px 0px !important;
 }
 .ui.top.sidebar,
 .ui.bottom.sidebar {
-  height: 40px !important;
+  height: @height !important;
 }
 .ui.active.bottom.sidebar {
-  margin-top: -40px !important;
-}
+  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();

src/themes/_site/modules/sidebar.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/modules/sidebar.variables

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/default/globals/site.variables

@@ -96,7 +96,7 @@
        Easing
 --------------------*/
 
-@defaultEasing: 'ease';
+@defaultEasing: ease;
 
 
 /*******************************

src/themes/packages/default/modules/sidebar.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/