:star:

1 files changed, 654 insertions, 0 deletions

diff --git a/semantic/src/definitions/modules/sidebar.less b/semantic/src/definitions/modules/sidebar.less
new file mode 100644
index 0000000..54e1400
--- /dev/null
+++ b/semantic/src/definitions/modules/sidebar.less
@@ -0,0 +1,654 @@
+/*!
+ * # Fomantic-UI - Sidebar
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'sidebar';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Sidebar
+*******************************/
+
+/* Sidebar Menu */
+.ui.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  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: @topLayer;
+}
+
+/* GPU Layers for Child Elements */
+.ui.sidebar > * {
+  backface-visibility: hidden;
+}
+
+
+/*--------------
+   Direction
+---------------*/
+& when (@variationSidebarLeft) {
+  .ui.left.sidebar {
+    right: auto;
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+& when (@variationSidebarRight) {
+  .ui.right.sidebar {
+    right: 0 !important;
+    left: auto !important;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+& when (@variationSidebarTop) or (@variationSidebarBottom) {
+  .ui.top.sidebar,
+  .ui.bottom.sidebar {
+    width: 100% !important;
+    height: auto !important;
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.sidebar {
+      top: 0 !important;
+      bottom: auto !important;
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .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: @canvasBackground;
+  &.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;
+  backface-visibility: hidden;
+
+  transition: transform @duration @easing;
+  will-change: transform;
+  z-index: @fixedLayer;
+}
+
+/*--------------
+     Page
+---------------*/
+
+.pushable > .pusher {
+  position: relative;
+  backface-visibility: hidden;
+  overflow: hidden;
+  min-height: 100%;
+  transition: transform @duration @easing;
+  z-index: @middleLayer;
+
+  /* Pusher should inherit background from context */
+  background: inherit;
+}
+
+body.pushable > .pusher {
+  background: @pageBackground;
+}
+
+/*--------------
+     Dimmer
+---------------*/
+
+.pushable > .pusher:after {
+  position: fixed;
+  top: 0;
+  right: 0;
+  content: '';
+  background: @dimmerColor;
+  overflow: hidden;
+  opacity: 0;
+  transition: @dimmerTransition;
+  will-change: opacity;
+  z-index: @dimmerLayer;
+}
+
+/*--------------
+    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 */
+& when (@variationSidebarLeft) or (@variationSidebarRight) {
+  .ui.left.visible.sidebar,
+  .ui.right.visible.sidebar {
+    box-shadow: @horizontalBoxShadow;
+  }
+}
+& when (@variationSidebarTop) or (@variationSidebarBottom) {
+  .ui.top.visible.sidebar,
+  .ui.bottom.visible.sidebar {
+    box-shadow: @verticalBoxShadow;
+  }
+}
+
+/* Visible On Load */
+& when (@variationSidebarLeft) {
+  .ui.visible.left.sidebar ~ .fixed,
+  .ui.visible.left.sidebar ~ .pusher {
+    transform: translate3d(@width, 0, 0);
+  }
+}
+& when (@variationSidebarRight) {
+  .ui.visible.right.sidebar ~ .fixed,
+  .ui.visible.right.sidebar ~ .pusher {
+    transform: translate3d(-@width, 0, 0);
+  }
+}
+& when (@variationSidebarTop) {
+  .ui.visible.top.sidebar ~ .fixed,
+  .ui.visible.top.sidebar ~ .pusher {
+    transform: translate3d(0, @height, 0);
+  }
+}
+& when (@variationSidebarBottom) {
+  .ui.visible.bottom.sidebar ~ .fixed,
+  .ui.visible.bottom.sidebar ~ .pusher {
+    transform: translate3d(0, -@height, 0);
+  }
+}
+
+& when (@variationSidebarLeft) or (@variationSidebarRight) {
+  /* 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 */
+& when (@variationSidebarLeft) or (@variationSidebarRight) {
+  & when (@variationSidebarThin) {
+    .ui.thin.left.sidebar,
+    .ui.thin.right.sidebar {
+      width: @thinWidth;
+    }
+
+    .ui[class*="very thin"].left.sidebar,
+    .ui[class*="very thin"].right.sidebar {
+      width: @veryThinWidth;
+    }
+  }
+
+  .ui.left.sidebar,
+  .ui.right.sidebar {
+    width: @width;
+  }
+
+  & when (@variationSidebarWide) {
+    .ui.wide.left.sidebar,
+    .ui.wide.right.sidebar {
+      width: @wideWidth;
+    }
+
+    .ui[class*="very wide"].left.sidebar,
+    .ui[class*="very wide"].right.sidebar {
+      width: @veryWideWidth;
+    }
+  }
+
+  /* Left Visible */
+  & when (@variationSidebarLeft) {
+    & when (@variationSidebarThin) {
+      .ui.visible.thin.left.sidebar ~ .fixed,
+      .ui.visible.thin.left.sidebar ~ .pusher {
+        transform: translate3d(@thinWidth, 0, 0);
+      }
+
+      .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
+      .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
+        transform: translate3d(@veryThinWidth, 0, 0);
+      }
+    }
+
+    & when (@variationSidebarWide) {
+      .ui.visible.wide.left.sidebar ~ .fixed,
+      .ui.visible.wide.left.sidebar ~ .pusher {
+        transform: translate3d(@wideWidth, 0, 0);
+      }
+
+      .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
+      .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
+        transform: translate3d(@veryWideWidth, 0, 0);
+      }
+    }
+  }
+
+  /* Right Visible */
+  & when (@variationSidebarRight) {
+    & when (@variationSidebarThin) {
+      .ui.visible.thin.right.sidebar ~ .fixed,
+      .ui.visible.thin.right.sidebar ~ .pusher {
+        transform: translate3d(-@thinWidth, 0, 0);
+      }
+
+      .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
+      .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
+        transform: translate3d(-@veryThinWidth, 0, 0);
+      }
+    }
+
+    & when (@variationSidebarWide) {
+      .ui.visible.wide.right.sidebar ~ .fixed,
+      .ui.visible.wide.right.sidebar ~ .pusher {
+        transform: translate3d(-@wideWidth, 0, 0);
+      }
+
+      .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
+      .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
+        transform: translate3d(-@veryWideWidth, 0, 0);
+      }
+    }
+  }
+}
+
+
+
+/*******************************
+          Animations
+*******************************/
+
+& when (@variationSidebarOverlay) {
+  /*--------------
+      Overlay
+  ---------------*/
+
+  /* Set-up */
+  .ui.overlay.sidebar {
+    z-index: @topLayer;
+  }
+
+  /* Initial */
+  & when (@variationSidebarLeft) {
+    .ui.left.overlay.sidebar {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.right.overlay.sidebar {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.overlay.sidebar {
+      transform: translate3d(0%, -100%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.bottom.overlay.sidebar {
+      transform: translate3d(0%, 100%, 0);
+    }
+  }
+
+  /* Animation */
+  .animating.ui.overlay.sidebar,
+  .ui.visible.overlay.sidebar {
+    transition: transform @duration @easing;
+  }
+
+  /* End - Sidebar */
+  & when (@variationSidebarLeft) {
+    .ui.visible.left.overlay.sidebar {
+      transform: translate3d(0%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.visible.right.overlay.sidebar {
+      transform: translate3d(0%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.visible.top.overlay.sidebar {
+      transform: translate3d(0%, 0, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .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;
+  }
+}
+
+
+& when (@variationSidebarPush) {
+  /*--------------
+        Push
+  ---------------*/
+
+  /* Initial */
+  .ui.push.sidebar {
+    transition: transform @duration @easing;
+    z-index: @topLayer;
+  }
+
+  /* Sidebar - Initial */
+  & when (@variationSidebarLeft) {
+    .ui.left.push.sidebar {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.right.push.sidebar {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.push.sidebar {
+      transform: translate3d(0%, -100%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.bottom.push.sidebar {
+      transform: translate3d(0%, 100%, 0);
+    }
+  }
+
+  /* End */
+  .ui.visible.push.sidebar {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+
+& when (@variationSidebarUncover) {
+  /*--------------
+      Uncover
+  ---------------*/
+
+  /* Initial */
+  .ui.uncover.sidebar {
+    transform: translate3d(0, 0, 0);
+    z-index: @bottomLayer;
+  }
+
+  /* End */
+  .ui.visible.uncover.sidebar {
+    transform: translate3d(0, 0, 0);
+    transition: transform @duration @easing;
+  }
+}
+
+& when (@variationSidebarSlideAlong) {
+  /*--------------
+     Slide Along
+  ---------------*/
+
+  /* Initial */
+  .ui.slide.along.sidebar {
+    z-index: @bottomLayer;
+  }
+
+  /* Sidebar - Initial */
+  & when (@variationSidebarLeft) {
+    .ui.left.slide.along.sidebar {
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.right.slide.along.sidebar {
+      transform: translate3d(50%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.slide.along.sidebar {
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.bottom.slide.along.sidebar {
+      transform: translate3d(0%, 50%, 0);
+    }
+  }
+
+  /* Animation */
+  .ui.animating.slide.along.sidebar {
+    transition: transform @duration @easing;
+  }
+
+  /* End */
+  .ui.visible.slide.along.sidebar {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+
+& when (@variationSidebarSlideOut) {
+  /*--------------
+     Slide Out
+  ---------------*/
+
+  /* Initial */
+  .ui.slide.out.sidebar {
+    z-index: @bottomLayer;
+  }
+
+  /* Sidebar - Initial */
+  & when (@variationSidebarLeft) {
+    .ui.left.slide.out.sidebar {
+      transform: translate3d(50%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.right.slide.out.sidebar {
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.slide.out.sidebar {
+      transform: translate3d(0%, 50%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.bottom.slide.out.sidebar {
+      transform: translate3d(0%, -50%, 0);
+    }
+  }
+
+  /* Animation */
+  .ui.animating.slide.out.sidebar {
+    transition: transform @duration @easing;
+  }
+
+  /* End */
+  .ui.visible.slide.out.sidebar {
+    transform: translate3d(0%, 0, 0);
+  }
+}
+
+& when (@variationSidebarScale) {
+  /*--------------
+     Scale Down
+  ---------------*/
+
+  /* Initial */
+  .ui.scale.down.sidebar {
+    transition: transform @duration @easing;
+    z-index: @topLayer;
+  }
+
+
+  & when (@variationSidebarLeft) {
+    .ui.left.scale.down.sidebar {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.right.scale.down.sidebar {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.top.scale.down.sidebar {
+      transform: translate3d(0%, -100%, 0);
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.bottom.scale.down.sidebar {
+      transform: translate3d(0%, 100%, 0);
+    }
+  }
+
+  /* Pusher - Initial */
+  & when (@variationSidebarLeft) {
+    .ui.scale.down.left.sidebar ~ .pusher {
+      transform-origin: 75% 50%;
+    }
+  }
+  & when (@variationSidebarRight) {
+    .ui.scale.down.right.sidebar ~ .pusher {
+      transform-origin: 25% 50%;
+    }
+  }
+  & when (@variationSidebarTop) {
+    .ui.scale.down.top.sidebar ~ .pusher {
+      transform-origin: 50% 75%;
+    }
+  }
+  & when (@variationSidebarBottom) {
+    .ui.scale.down.bottom.sidebar ~ .pusher {
+      transform-origin: 50% 25%;
+    }
+  }
+
+  /* Animation */
+  .ui.animating.scale.down > .visible.ui.sidebar {
+    transition: transform @duration @easing;
+  }
+  .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);
+  }
+}
+
+.loadUIOverrides();