fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.20

package/src/definitions/modules/sidebar.less

@@ -8,13 +8,11 @@
  *
  */
 
-
-
 /*******************************
             Theme
 *******************************/
 
-@type    : 'module';
+@type : 'module';
 @element : 'sidebar';
 
 @import (multiple) '../../theme.config';
@@ -25,659 +23,652 @@
 
 /* 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;
+    position: fixed;
+    top: 0;
+    left: 0;
 
-  height: 100% !important;
-  max-height: 100%;
-  border-radius: 0 !important;
-  margin: 0 !important;
-  overflow-y: auto !important;
-  z-index: @topLayer;
+    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;
+    overscroll-behavior: @overscrollBehavior;
+    z-index: @topLayer;
 }
 
 /* GPU Layers for Child Elements */
 .ui.sidebar > * {
-  backface-visibility: hidden;
+    backface-visibility: hidden;
 }
 
-
-/*--------------
+/* --------------
    Direction
----------------*/
+--------------- */
 & when (@variationSidebarLeft) {
-  .ui.left.sidebar {
-    right: auto;
-    left: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
+    .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);
-  }
+    .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.top.sidebar,
     .ui.bottom.sidebar {
-      top: auto !important;
-      bottom: 0 !important;
-      transform: translate3d(0, 100%, 0);
+        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.pushable.pushable {
-  height: 100%;
-  overflow-x: hidden;
-  padding: 0;
-  &.locked {
-    overflow-y: hidden;
-    background: inherit;
-  }
+    height: 100%;
+    overflow-x: hidden;
+    padding: 0;
+    &.locked {
+        overflow-y: hidden;
+        background: inherit;
+    }
 }
 
 /* Whole Page */
 body.pushable {
-  background: @canvasBackground;
-  &.dimmed {
-    background: inherit;
-  }
+    background: @canvasBackground;
+    &.dimmed {
+        background: inherit;
+    }
 }
 
 /* Page Context */
 .pushable:not(body) {
-  transform: translate3d(0, 0, 0);
-  overflow-y: hidden;
+    transform: translate3d(0, 0, 0);
+    overflow-y: hidden;
 }
 .pushable:not(body) > .ui.sidebar,
 .pushable:not(body) > .fixed,
 .pushable:not(body) > .pusher::after {
-  position: absolute;
+    position: absolute;
 }
 
-
-/*--------------
+/* --------------
      Fixed
----------------*/
+--------------- */
 
 .pushable > .fixed {
-  position: fixed;
-  backface-visibility: hidden;
+    position: fixed;
+    backface-visibility: hidden;
 
-  transition: transform @duration @easing;
-  will-change: transform;
-  z-index: @fixedLayer;
+    transition: transform @duration @easing;
+    will-change: transform;
+    z-index: @fixedLayer;
 }
 
-/*--------------
+/* --------------
      Page
----------------*/
+--------------- */
 
 .pushable > .pusher {
-  position: relative;
-  backface-visibility: hidden;
-  min-height: 100%;
-  transition: transform @duration @easing;
-  z-index: @middleLayer;
-
-  /* Pusher should inherit background from context */
-  background: inherit;
-  &:not(.overflowing) {
-    overflow: hidden;
-  }
+    position: relative;
+    backface-visibility: hidden;
+    min-height: 100%;
+    transition: transform @duration @easing;
+    z-index: @middleLayer;
+
+    /* Pusher should inherit background from context */
+    background: inherit;
+    &:not(.overflowing) {
+        overflow: hidden;
+    }
 }
 
 body.pushable > .pusher {
-  background: @pageBackground;
+    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;
-}
-
-/*--------------
+    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;
+    border-radius: 0 !important;
 }
 
 /*******************************
             States
 *******************************/
 
-/*--------------
+/* --------------
      Dimmed
----------------*/
+--------------- */
 
 .pushable > .pusher.dimmed::after {
-  width: 100% !important;
-  height: 100% !important;
-  opacity: 1 !important;
+    width: 100% !important;
+    height: 100% !important;
+    opacity: 1 !important;
 }
 & when (@variationSidebarBlurring) {
-  .pushable > .pusher.dimmed.blurring:not(.closing)::after {
-    background: @blurredBackgroundColor;
-    -webkit-backdrop-filter: @blurredEndFilter;
-    backdrop-filter: @blurredEndFilter;
-
-  }
+    .pushable > .pusher.dimmed.blurring:not(.closing)::after {
+        background: @blurredBackgroundColor;
+        -webkit-backdrop-filter: @blurredEndFilter;
+        backdrop-filter: @blurredEndFilter;
+    }
 }
 .pushable > .pusher.closing.dimmed::after {
-  opacity: 0 !important;
+    opacity: 0 !important;
 }
 
-/*--------------
+/* --------------
     Animating
----------------*/
+--------------- */
 
 .ui.animating.sidebar {
-  visibility: visible;
+    visibility: visible;
 }
 
-/*--------------
+/* --------------
      Visible
----------------*/
+--------------- */
 
 .ui.visible.sidebar {
-  visibility: visible;
-  transform: translate3d(0, 0, 0);
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
 }
 
 /* Shadow Direction */
 & when (@variationSidebarLeft) or (@variationSidebarRight) {
-  .ui.left.visible.sidebar,
-  .ui.right.visible.sidebar {
-    box-shadow: @horizontalBoxShadow;
-  }
+    .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;
-  }
+    .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);
-  }
+    .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);
-  }
+    .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);
-  }
+    .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);
-  }
+    .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);
-  }
+    /* 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;
-    }
-
-    & when (@variationSidebarVeryThin) {
-      .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;
-    }
-
-    & when (@variationSidebarVeryWide) {
-      .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.thin.left.sidebar,
+        .ui.thin.right.sidebar {
+            width: @thinWidth;
+        }
 
-      & when (@variationSidebarVeryThin) {
-        .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
-        .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
-          transform: translate3d(@veryThinWidth, 0, 0);
+        & when (@variationSidebarVeryThin) {
+            .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.visible.wide.left.sidebar ~ .fixed,
-      .ui.visible.wide.left.sidebar ~ .pusher {
-        transform: translate3d(@wideWidth, 0, 0);
-      }
+        .ui.wide.left.sidebar,
+        .ui.wide.right.sidebar {
+            width: @wideWidth;
+        }
 
-      & when (@variationSidebarVeryWide) {
-        .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
-        .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
-          transform: translate3d(@veryWideWidth, 0, 0);
+        & when (@variationSidebarVeryWide) {
+            .ui[class*="very wide"].left.sidebar,
+            .ui[class*="very wide"].right.sidebar {
+                width: @veryWideWidth;
+            }
         }
-      }
     }
-  }
 
-  /* Right Visible */
-  & when (@variationSidebarRight) {
-    & when (@variationSidebarThin) {
-      .ui.visible.thin.right.sidebar ~ .fixed,
-      .ui.visible.thin.right.sidebar ~ .pusher {
-        transform: translate3d(-@thinWidth, 0, 0);
-      }
+    /* Left Visible */
+    & when (@variationSidebarLeft) {
+        & when (@variationSidebarThin) {
+            .ui.visible.thin.left.sidebar ~ .fixed,
+            .ui.visible.thin.left.sidebar ~ .pusher {
+                transform: translate3d(@thinWidth, 0, 0);
+            }
+
+            & when (@variationSidebarVeryThin) {
+                .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
+                .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
+                    transform: translate3d(@veryThinWidth, 0, 0);
+                }
+            }
+        }
 
-      & when (@variationSidebarVeryThin) {
-        .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.left.sidebar ~ .fixed,
+            .ui.visible.wide.left.sidebar ~ .pusher {
+                transform: translate3d(@wideWidth, 0, 0);
+            }
+
+            & when (@variationSidebarVeryWide) {
+                .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
+                .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
+                    transform: translate3d(@veryWideWidth, 0, 0);
+                }
+            }
         }
-      }
     }
 
-    & when (@variationSidebarWide) {
-      .ui.visible.wide.right.sidebar ~ .fixed,
-      .ui.visible.wide.right.sidebar ~ .pusher {
-        transform: translate3d(-@wideWidth, 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);
+            }
+
+            & when (@variationSidebarVeryThin) {
+                .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
+                .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
+                    transform: translate3d(-@veryThinWidth, 0, 0);
+                }
+            }
+        }
 
-      & when (@variationSidebarVeryWide) {
-        .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
-        .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
-          transform: translate3d(-@veryWideWidth, 0, 0);
+        & when (@variationSidebarWide) {
+            .ui.visible.wide.right.sidebar ~ .fixed,
+            .ui.visible.wide.right.sidebar ~ .pusher {
+                transform: translate3d(-@wideWidth, 0, 0);
+            }
+
+            & when (@variationSidebarVeryWide) {
+                .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
-  ---------------*/
+    /* --------------
+        Overlay
+    --------------- */
 
-  /* Set-up */
-  .ui.overlay.sidebar {
-    z-index: @topLayer;
-  }
+    /* Set-up */
+    .ui.overlay.sidebar {
+        z-index: @topLayer;
+    }
 
-  /* Initial */
-  & when (@variationSidebarLeft) {
-    .ui.left.overlay.sidebar {
-      transform: translate3d(-100%, 0, 0);
+    /* Initial */
+    & when (@variationSidebarLeft) {
+        .ui.left.overlay.sidebar {
+            transform: translate3d(-100%, 0, 0);
+        }
     }
-  }
-  & when (@variationSidebarRight) {
-    .ui.right.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 (@variationSidebarTop) {
+        .ui.top.overlay.sidebar {
+            transform: translate3d(0%, -100%, 0);
+        }
     }
-  }
-  & when (@variationSidebarBottom) {
-    .ui.bottom.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;
-  }
+    /* 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);
+    /* 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 (@variationSidebarRight) {
+        .ui.visible.right.overlay.sidebar {
+            transform: translate3d(0%, 0, 0);
+        }
     }
-  }
-  & when (@variationSidebarTop) {
-    .ui.visible.top.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);
+    & 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;
-  }
-}
 
+    /* End - Pusher */
+    .ui.visible.overlay.sidebar ~ .fixed,
+    .ui.visible.overlay.sidebar ~ .pusher {
+        transform: none !important;
+    }
+}
 
 & when (@variationSidebarPush) {
-  /*--------------
-        Push
-  ---------------*/
+    /* --------------
+          Push
+    --------------- */
 
-  /* Initial */
-  .ui.push.sidebar {
-    transition: transform @duration @easing;
-    z-index: @topLayer;
-  }
+    /* Initial */
+    .ui.push.sidebar {
+        transition: transform @duration @easing;
+        z-index: @topLayer;
+    }
 
-  /* Sidebar - Initial */
-  & when (@variationSidebarLeft) {
-    .ui.left.push.sidebar {
-      transform: translate3d(-100%, 0, 0);
+    /* 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 (@variationSidebarRight) {
+        .ui.right.push.sidebar {
+            transform: translate3d(100%, 0, 0);
+        }
     }
-  }
-  & when (@variationSidebarTop) {
-    .ui.top.push.sidebar {
-      transform: translate3d(0%, -100%, 0);
+    & when (@variationSidebarTop) {
+        .ui.top.push.sidebar {
+            transform: translate3d(0%, -100%, 0);
+        }
     }
-  }
-  & when (@variationSidebarBottom) {
-    .ui.bottom.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);
-  }
+    /* End */
+    .ui.visible.push.sidebar {
+        transform: translate3d(0%, 0, 0);
+    }
 }
 
 & when (@variationSidebarUncover) {
-  /*--------------
-      Uncover
-  ---------------*/
+    /* --------------
+        Uncover
+    --------------- */
 
-  /* Initial */
-  .ui.uncover.sidebar {
-    transform: translate3d(0, 0, 0);
-    z-index: @bottomLayer;
-  }
+    /* 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;
-  }
+    /* 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;
-  }
+    /* --------------
+       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);
-  }
+    /* 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;
-  }
+    /* --------------
+       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);
+        }
+    }
 
-  /* End */
-  .ui.visible.slide.out.sidebar {
-    transform: translate3d(0%, 0, 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;
-  }
+    /* --------------
+       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 (@variationSidebarLeft) {
+        .ui.left.scale.down.sidebar {
+            transform: translate3d(-100%, 0, 0);
+        }
     }
-  }
-  & when (@variationSidebarRight) {
-    .ui.right.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 (@variationSidebarTop) {
+        .ui.top.scale.down.sidebar {
+            transform: translate3d(0%, -100%, 0);
+        }
     }
-  }
-  & when (@variationSidebarBottom) {
-    .ui.bottom.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%;
+    /* 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 (@variationSidebarRight) {
+        .ui.scale.down.right.sidebar ~ .pusher {
+            transform-origin: 25% 50%;
+        }
     }
-  }
-  & when (@variationSidebarTop) {
-    .ui.scale.down.top.sidebar ~ .pusher {
-      transform-origin: 50% 75%;
+    & when (@variationSidebarTop) {
+        .ui.scale.down.top.sidebar ~ .pusher {
+            transform-origin: 50% 75%;
+        }
     }
-  }
-  & when (@variationSidebarBottom) {
-    .ui.scale.down.bottom.sidebar ~ .pusher {
-      transform-origin: 50% 25%;
+    & 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;
-  }
+    /* 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);
-  }
+    /* End */
+    .ui.visible.scale.down.sidebar {
+        transform: translate3d(0, 0, 0);
+    }
+    .ui.visible.scale.down.sidebar ~ .pusher {
+        transform: scale(0.75);
+    }
 }
 
 .loadUIOverrides();