less-rails-semantic_ui 2.0.7.0 → 2.1.4.0

data/assets/stylesheets/semantic_ui/definitions/collections/grid.less

@@ -341,6 +341,10 @@
   width: @sixteenColumn !important;
 }
 
+/* Celled Page */
+.ui.celled.page.grid {
+  box-shadow: none;
+}
 
 /*-------------------
     Column Width
@@ -1126,27 +1130,24 @@
 .ui.celled.grid {
   width: 100%;
   margin: @celledMargin;
-  box-shadow: 0px 0px 0px @celledWidth @celledBorderColor;
+  box-shadow: @celledGridDivider;
 }
-.ui.celled.grid > .row,
-.ui.celled.grid > .column.row,
-.ui.celled.grid > .column.row:first-child {
+
+.ui.celled.grid > .row {
   width: 100% !important;
   margin: 0em;
   padding: 0em;
-  box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor;
+  box-shadow: @celledRowDivider;
 }
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
-  box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor;
+  box-shadow: @celledColumnDivider;
 }
+
 .ui.celled.grid > .column:first-child,
 .ui.celled.grid > .row > .column:first-child {
   box-shadow: none;
 }
-.ui.celled.page.grid {
-  box-shadow: none;
-}
 
 .ui.celled.grid > .column:not(.row),
 .ui.celled.grid > .row > .column {
@@ -1178,7 +1179,8 @@
 -----------------------*/
 
 /* Top Aligned */
-.ui[class*="top aligned"].grid .column:not(.row),
+.ui[class*="top aligned"].grid > .column:not(.row),
+.ui[class*="top aligned"].grid > .row > .column,
 .ui.grid > [class*="top aligned"].row > .column,
 .ui.grid > [class*="top aligned"].column:not(.row),
 .ui.grid > .row > [class*="top aligned"].column {
@@ -1188,7 +1190,8 @@
 }
 
 /* Middle Aligned */
-.ui[class*="middle aligned"].grid .column:not(.row),
+.ui[class*="middle aligned"].grid > .column:not(.row),
+.ui[class*="middle aligned"].grid > .row > .column,
 .ui.grid > [class*="middle aligned"].row > .column,
 .ui.grid > [class*="middle aligned"].column:not(.row),
 .ui.grid > .row > [class*="middle aligned"].column {
@@ -1198,7 +1201,8 @@
 }
 
 /* Bottom Aligned */
-.ui[class*="bottom aligned"].grid .column:not(.row),
+.ui[class*="bottom aligned"].grid > .column:not(.row),
+.ui[class*="bottom aligned"].grid > .row > .column,
 .ui.grid > [class*="bottom aligned"].row > .column,
 .ui.grid > [class*="bottom aligned"].column:not(.row),
 .ui.grid > .row > [class*="bottom aligned"].column {
@@ -1231,7 +1235,8 @@
 -----------------------*/
 
 /* Left Aligned */
-.ui[class*="left aligned"].grid .column,
+.ui[class*="left aligned"].grid > .column,
+.ui[class*="left aligned"].grid > .row > .column,
 .ui.grid > [class*="left aligned"].row > .column,
 .ui.grid > [class*="left aligned"].column.column,
 .ui.grid > .row > [class*="left aligned"].column {
@@ -1240,7 +1245,8 @@
 }
 
 /* Center Aligned */
-.ui[class*="center aligned"].grid .column,
+.ui[class*="center aligned"].grid > .column,
+.ui[class*="center aligned"].grid > .row > .column,
 .ui.grid > [class*="center aligned"].row > .column,
 .ui.grid > [class*="center aligned"].column.column,
 .ui.grid > .row > [class*="center aligned"].column {
@@ -1252,7 +1258,8 @@
 }
 
 /* Right Aligned */
-.ui[class*="right aligned"].grid .column,
+.ui[class*="right aligned"].grid > .column,
+.ui[class*="right aligned"].grid > .row > .column,
 .ui.grid > [class*="right aligned"].row > .column,
 .ui.grid > [class*="right aligned"].column.column,
 .ui.grid > .row > [class*="right aligned"].column {
@@ -1261,18 +1268,14 @@
 }
 
 /* Justified */
-.ui.justified.grid,
-.ui.justified.grid > .row > .column,
 .ui.justified.grid > .column,
-.ui.grid .justified.column,
-.ui.grid > .justified.row > .column {
+.ui.justified.grid > .row > .column,
+.ui.grid > .justified.row > .column,
+.ui.grid > .justified.column.column,
+.ui.grid > .row > .justified.column {
   text-align: justify;
   hyphens: auto;
 }
-.ui.grid .justified.column {
-  text-align: justify !important;
-  hyphens: auto !important;
-}
 
 /*----------------------
          Colored
@@ -1407,6 +1410,121 @@
 }
 
 
+/*----------------------
+        Reverse
+-----------------------*/
+
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui[class*="mobile reversed"].grid,
+  .ui[class*="mobile reversed"].grid > .row,
+  .ui.grid > [class*="mobile reversed"].row {
+    flex-direction: row-reverse;
+  }
+  .ui[class*="mobile vertically reversed"].grid,
+  .ui.stackable[class*="mobile reversed"] {
+    flex-direction: column-reverse;
+  }
+
+  /* Divided Reversed */
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui[class*="tablet reversed"].grid,
+  .ui[class*="tablet reversed"].grid > .row,
+  .ui.grid > [class*="tablet reversed"].row {
+    flex-direction: row-reverse;
+  }
+  .ui[class*="tablet vertically reversed"].grid {
+    flex-direction: column-reverse;
+  }
+
+  /* Divided Reversed */
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
+}
+
+/* Computer */
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui[class*="computer reversed"].grid,
+  .ui[class*="computer reversed"].grid > .row,
+  .ui.grid > [class*="computer reversed"].row {
+    flex-direction: row-reverse;
+  }
+  .ui[class*="computer vertically reversed"].grid {
+    flex-direction: column-reverse;
+  }
+
+  /* Divided Reversed */
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+    box-shadow: @dividedBorder;
+  }
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+  .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+    box-shadow: none;
+  }
+  /* Vertically Divided Reversed */
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+    box-shadow: @verticallyDividedBorder;
+  }
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+    box-shadow: none;
+  }
+  /* Celled Reversed */
+  .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
+    box-shadow: @celledColumnDivider;
+  }
+  .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
+    box-shadow: none;
+  }
+}
+
+
 /*-------------------
       Doubling
 --------------------*/
@@ -1604,6 +1722,8 @@
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.stackable.grid {
     width: auto;
+    margin-left: 0em !important;
+    margin-right: 0em !important;
   }
   .ui.stackable.grid > .row > .wide.column,
   .ui.stackable.grid > .wide.column,
@@ -1660,6 +1780,9 @@
     padding-bottom: @stackableRowSpacing !important;
   }
 
+  .ui.stackable.celled.grid > .row {
+    box-shadow: none !important;
+  }
   .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
   .ui.stackable.divided:not(.vertically).grid > .row > .column {
     padding-left: 0em !important;

data/assets/stylesheets/semantic_ui/definitions/collections/menu.less

@@ -92,6 +92,7 @@
   line-height: 1;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
+  flex: 0 0 auto;
   user-select: none;
 
   background: @itemBackground;
@@ -186,12 +187,6 @@
   padding-top: @inputVerticalPadding;
   padding-bottom: @inputVerticalPadding;
 }
-.ui.menu .item > .input .button,
-.ui.menu .item > .input .label {
-  padding-top: @inputVerticalPadding;
-  padding-bottom: @inputVerticalPadding;
-}
-
 
 
 /*--------------
@@ -244,12 +239,14 @@
   background: @dropdownBackground;
   margin: @dropdownMenuDistance 0px 0px;
   box-shadow: @dropdownMenuBoxShadow;
+  flex-direction: column !important;
 }
 
 
 /* Menu Items */
 .ui.menu .ui.dropdown .menu > .item {
   margin: 0;
+  text-align: left;
   font-size: @dropdownItemFontSize !important;
   padding: @dropdownItemPadding !important;
   background: @dropdownItemBackground !important;
@@ -346,9 +343,6 @@
   margin-bottom: @labelOffset;
   padding: @labelVerticalPadding @labelHorizontalPadding;
 }
-.ui.menu .item > .label:before {
-  background-color: @labelBackground;
-}
 .ui.menu .item > .floating.label {
   padding: @labelVerticalPadding @labelHorizontalPadding;
 }
@@ -393,7 +387,7 @@
 
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.menu > .ui.container {
-    width: 100%;
+    width: 100% !important;
     margin-left: 0em !important;
     margin-right: 0em !important;
   }
@@ -432,7 +426,7 @@
 .ui.menu .link.item:active,
 .ui.menu a.item:active {
   background: @pressedItemBackground;
-  color: @pressedItemColor;
+  color: @pressedItemTextColor;
 }
 
 
@@ -587,13 +581,13 @@ Floated Menu / Item
   box-shadow: @verticalActiveBoxShadow;
 }
 .ui.vertical.menu > .active.item:first-child {
-  border-radius: 0em @borderRadius 0em 0em;
+  border-radius: @borderRadius @borderRadius 0em 0em;
 }
 .ui.vertical.menu > .active.item:last-child {
-  border-radius: 0em 0em @borderRadius 0em;
+  border-radius: 0em 0em @borderRadius @borderRadius;
 }
 .ui.vertical.menu > .active.item:only-child {
-  border-radius: 0em @borderRadius @borderRadius 0em;
+  border-radius: @borderRadius;
 }
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
@@ -610,26 +604,24 @@ Floated Menu / Item
 ---------------*/
 
 .ui.tabular.menu {
-  background-color: transparent;
   border-radius: 0em;
   box-shadow: none !important;
   border: none;
+  background: @tabularBackground;
   border-bottom: @tabularBorderWidth solid @tabularBorderColor;
 }
 .ui.tabular.fluid.menu {
   width: @tabularFluidWidth !important;
 }
 .ui.tabular.menu .item {
-  background-color: transparent;
+  background: transparent;
+  border-bottom: none;
 
   border-left: @tabularBorderWidth solid transparent;
   border-right: @tabularBorderWidth solid transparent;
   border-top: @tabularOppositeBorderWidth solid transparent;
-  border-bottom: none;
-
-  padding-left: @tabularHorizontalPadding;
-  padding-right: @tabularHorizontalPadding;
-  color: @tabularMenuTextColor;
+  padding: @tabularVerticalPadding @tabularHorizontalPadding;
+  color: @tabularTextColor;
 }
 .ui.tabular.menu .item:before {
   display: none;
@@ -638,12 +630,12 @@ Floated Menu / Item
 /* Hover */
 .ui.tabular.menu .item:hover {
   background-color: transparent;
-  color: @hoveredTextColor;
+  color: @tabularHoveredTextColor;
 }
 
 /* Active */
 .ui.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
+  background: @tabularActiveBackground;
   color: @tabularActiveColor;
   border-top-width: @tabularBorderWidth;
   border-color: @tabularBorderColor;
@@ -654,16 +646,43 @@ Floated Menu / Item
 }
 
 /* Coupling with segment for attachment */
-.ui.tabular.menu + .bottom.attached.segment,
-.ui.tabular.menu ~ .bottom.attached.segment + .bottom.attached.segment {
+.ui.tabular.menu + .bottom.attached.segment {
   border-top: none;
   margin: 0px;
   width: 100%;
 }
+.top.attached.segment + .ui.bottom.tabular.menu {
+  position: relative;
+  width: @tabularFluidWidth;
+  left: -@tabularFluidOffset;
+}
+
+/* Bottom Vertical Tabular */
+.ui.bottom.tabular.menu {
+  background: @tabularBackground;
+  border-radius: 0em;
+  box-shadow: none !important;
+  border-bottom: none;
+  border-top: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.bottom.tabular.menu .item {
+  background: none;
+  border-left: @tabularBorderWidth solid transparent;
+  border-right: @tabularBorderWidth solid transparent;
+  border-bottom: @tabularBorderWidth solid transparent;
+  border-top: none;
+}
+.ui.bottom.tabular.menu .active.item {
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
+  border-color: @tabularBorderColor;
+  margin: -@tabularBorderWidth 0px 0px 0px;
+  border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
+}
 
-/* Vertical Tabular */
+/* Vertical Tabular (Left) */
 .ui.vertical.tabular.menu {
-  background-color: transparent;
+  background: @tabularVerticalBackground;
   border-radius: 0em;
   box-shadow: none !important;
   border-bottom: none;
@@ -676,16 +695,38 @@ Floated Menu / Item
   border-top: @tabularBorderWidth solid transparent;
   border-right: none;
 }
-
-/* Active */
 .ui.vertical.tabular.menu .active.item {
-  background-color: @tabularMenuActiveBackground;
-  color: @tabularMenuActiveColor;
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
   border-color: @tabularBorderColor;
   margin: 0px -@tabularBorderWidth 0px 0px;
   border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
 }
 
+/* Vertical Right Tabular */
+.ui.vertical.right.tabular.menu {
+  background: @tabularVerticalBackground;
+  border-radius: 0em;
+  box-shadow: none !important;
+  border-bottom: none;
+  border-right: none;
+  border-left: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.right.tabular.menu .item {
+  background: none;
+  border-right: @tabularBorderWidth solid transparent;
+  border-bottom: @tabularBorderWidth solid transparent;
+  border-top: @tabularBorderWidth solid transparent;
+  border-left: none;
+}
+.ui.vertical.right.tabular.menu .active.item {
+  background: @tabularActiveBackground;
+  color: @tabularActiveColor;
+  border-color: @tabularBorderColor;
+  margin: 0px 0px 0px -@tabularBorderWidth;
+  border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
+}
+
 /* Dropdown */
 .ui.tabular.menu .active.dropdown.item {
   margin-bottom: 0px;
@@ -827,6 +868,15 @@ Floated Menu / Item
   box-shadow: none;
 }
 
+/* Sub Menu */
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+  margin: @secondaryMenuSubMenuMargin;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+  margin: @secondaryMenuSubMenuItemMargin;
+  padding: @secondaryMenuSubMenuItemPadding;
+}
+
 
 /*---------------------
    Secondary Vertical
@@ -981,21 +1031,16 @@ Floated Menu / Item
   margin: @textMenuMargin;
 }
 .ui.text.menu .item {
-  padding: 0em;
   border-radius: 0px;
   box-shadow: none;
   align-self: center;
   margin: @textMenuItemMargin;
+  padding: @textMenuItemPadding;
   font-weight: @textMenuItemFontWeight;
   color: @textMenuItemColor;
   transition: @textMenuItemTransition;
 }
 
-/* Sub Menu */
-.ui.vertical.text.menu > .menu {
-  margin: @textMenuSubMenuMargin;
-}
-
 /* Border */
 .ui.text.menu .item:before,
 .ui.text.menu .menu .item:before {
@@ -1005,7 +1050,6 @@ Floated Menu / Item
 /* Header */
 .ui.text.menu .header.item {
   background-color: transparent;
-  padding: 0em;
   opacity: 1;
   color: @textMenuHeaderColor;
   font-size: @textMenuHeaderSize;
@@ -1044,6 +1088,15 @@ Floated Menu / Item
   margin: @textVerticalMenuHeaderMargin;
 }
 
+/* Vertical Sub Menu */
+.ui.vertical.text.menu .item:not(.dropdown) > .menu {
+  margin: @textMenuSubMenuMargin;
+}
+.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
+  margin: @textMenuSubMenuItemMargin;
+  padding: @textMenuSubMenuItemPadding;
+}
+
 /*--- hover ---*/
 .ui.text.menu .item:hover {
   opacity: 1;
@@ -1053,7 +1106,6 @@ Floated Menu / Item
 /*--- active ---*/
 .ui.text.menu .active.item {
   background-color: transparent;
-  padding: 0em;
   border: none;
   box-shadow: none;
   font-weight: @textMenuActiveItemFontWeight;
@@ -1091,33 +1143,42 @@ Floated Menu / Item
     Icon Only
 ---------------*/
 
+/* Vertical Menu */
+.ui.vertical.icon.menu {
+  display: inline-block;
+  width: auto;
+}
+
+/* Item */
 .ui.icon.menu .item {
   height: auto;
   text-align: @iconMenuTextAlign;
   color: @iconMenuItemColor;
 }
-.ui.icon.menu .item > .icon {
-  margin: 0em;
+
+/* Icon */
+.ui.icon.menu .item > .icon:not(.dropdown) {
+  margin: 0;
   opacity: 1;
 }
-.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
-  display: block;
-  margin: 0em auto;
-  float: none;
-}
+
+/* Icon Gylph */
 .ui.icon.menu .icon:before {
   opacity: 1;
 }
 
-/* Item Icon Only */
+/* (x) Item Icon */
 .ui.menu .icon.item > .icon {
   width: auto;
   margin: 0em auto;
 }
 
-/* Vertical */
-.ui.vertical.icon.menu {
-  width: auto;
+/* Vertical Icon */
+.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
+  display: block;
+  opacity: 1;
+  margin: 0em auto;
+  float: none;
 }
 
 /* Inverted */
@@ -1129,31 +1190,30 @@ Floated Menu / Item
    Labeled Icon
 ---------------*/
 
+/* Menu */
 .ui.labeled.icon.menu {
   text-align: center;
 }
-.ui.fluid.labeled.icon.menu .item {
-  min-width: 0em;
-}
 
-.ui.labeled.icon.menu .item {
+/* Item */
+.ui.labeled.icon.menu  .item {
   min-width: @labeledIconMinWidth;
-}
-.ui.labeled.icon.menu:not(.vertical) .item {
-  padding-left: @labeledIconItemHorizontalPadding;
-  padding-right: @labeledIconItemHorizontalPadding;
+  flex-direction: column;
 }
 
+/* Icon */
 .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
   height: 1em;
   display: block;
   font-size: @labeledIconSize !important;
-  margin: 0em @labeledIconTextMargin 0em 0em !important;
-}
-.ui.vertical.labeled.icon.menu .item > .icon:not(.dropdown) {
   margin: 0em auto @labeledIconTextMargin !important;
 }
 
+/* Fluid */
+.ui.fluid.labeled.icon.menu > .item {
+  min-width: 0em;
+}
+
 
 /*******************************
            Variations
@@ -1368,6 +1428,7 @@ Floated Menu / Item
 ---------------*/
 
 /* Red */
+.ui.inverted.menu .red.active.item,
 .ui.inverted.red.menu {
   background-color: @red;
 }
@@ -1379,6 +1440,7 @@ Floated Menu / Item
 }
 
 /* Orange */
+.ui.inverted.menu .orange.active.item,
 .ui.inverted.orange.menu {
   background-color: @orange;
 }
@@ -1390,6 +1452,7 @@ Floated Menu / Item
 }
 
 /* Yellow */
+.ui.inverted.menu .yellow.active.item,
 .ui.inverted.yellow.menu {
   background-color: @yellow;
 }
@@ -1401,6 +1464,7 @@ Floated Menu / Item
 }
 
 /* Olive */
+.ui.inverted.menu .olive.active.item,
 .ui.inverted.olive.menu {
   background-color: @olive;
 }
@@ -1412,6 +1476,7 @@ Floated Menu / Item
 }
 
 /* Green */
+.ui.inverted.menu .green.active.item,
 .ui.inverted.green.menu {
   background-color: @green;
 }
@@ -1423,6 +1488,7 @@ Floated Menu / Item
 }
 
 /* Teal */
+.ui.inverted.menu .teal.active.item,
 .ui.inverted.teal.menu {
   background-color: @teal;
 }
@@ -1434,6 +1500,7 @@ Floated Menu / Item
 }
 
 /* Blue */
+.ui.inverted.menu .blue.active.item,
 .ui.inverted.blue.menu {
   background-color: @blue;
 }
@@ -1445,6 +1512,7 @@ Floated Menu / Item
 }
 
 /* Violet */
+.ui.inverted.menu .violet.active.item,
 .ui.inverted.violet.menu {
   background-color: @violet;
 }
@@ -1456,6 +1524,7 @@ Floated Menu / Item
 }
 
 /* Purple */
+.ui.inverted.menu .purple.active.item,
 .ui.inverted.purple.menu {
   background-color: @purple;
 }
@@ -1467,6 +1536,7 @@ Floated Menu / Item
 }
 
 /* Pink */
+.ui.inverted.menu .pink.active.item,
 .ui.inverted.pink.menu {
   background-color: @pink;
 }
@@ -1478,6 +1548,7 @@ Floated Menu / Item
 }
 
 /* Brown */
+.ui.inverted.menu .brown.active.item,
 .ui.inverted.brown.menu {
   background-color: @brown;
 }
@@ -1489,6 +1560,7 @@ Floated Menu / Item
 }
 
 /* Grey */
+.ui.inverted.menu .grey.active.item,
 .ui.inverted.grey.menu {
   background-color: @grey;
 }
@@ -1574,8 +1646,10 @@ Floated Menu / Item
 .ui.item.menu,
 .ui.item.menu .item {
   width: 100%;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
+  padding-left: 0em !important;
+  padding-right: 0em !important;
+  margin-left: 0em !important;
+  margin-right: 0em !important;
   text-align: center;
   justify-content: center;
 }
@@ -1860,4 +1934,4 @@ Floated Menu / Item
   width: @hugeWidth;
 }
 
-.loadUIOverrides();
+.loadUIOverrides();