#2411 Adds horizontal segment groups

src/definitions/elements/segment.less

@@ -27,7 +27,7 @@
   background-color: @background;
   box-shadow: @boxShadow;
   margin: @margin 0em;
-  padding: @verticalPadding @horizontalPadding;
+  padding: @padding;
   border-radius: @borderRadius;
   border: @border;
 }
@@ -48,25 +48,30 @@
 
   background-color: transparent;
   border-radius: 0px;
+  box-shadow: none;
   border: none;
-  box-shadow: 0px -1px 0px @borderColor inset;
+  border-bottom: @borderWidth solid @borderColor;
 }
 .ui.vertical.segment:last-child {
-  box-shadow: none;
+  border-bottom: none;
 }
 
 /* Horizontal */
-.ui.horizontal.segment {
+.ui.horizontal.segment,
+.ui.horizontal.segments > .segment {
   margin: 0em;
   padding-top: 0em;
   padding-bottom: 0em;
+  min-width: 0px;
 
   background-color: transparent;
   border-radius: 0px;
   border: none;
-  box-shadow: 1px 0px 0px @borderColor;
+  box-shadow: none;
+  border-right: @borderWidth solid @borderColor;
 }
 
+
 /*-------------------
     Loose Coupling
 --------------------*/
@@ -112,7 +117,7 @@
   box-shadow: @boxShadow;
 }
 .ui[class*="very basic"].table.segment {
-  padding: @verticalPadding @horizontalPadding;
+  padding: @padding;
 }
 
 
@@ -266,6 +271,78 @@
 }
 
 
+/*******************************
+            Groups
+*******************************/
+
+.ui.segments {
+  position: relative;
+  margin: @margin 0em;
+  box-shadow: @boxShadow;
+}
+.ui.segments:first-child {
+  margin-top: 0em;
+}
+.ui.segments:last-child {
+  margin-bottom: 0em;
+}
+
+.ui.segments > .segment {
+  top: 0px;
+  bottom: 0px;
+  margin: 0em @attachedHorizontalOffset;
+  width: @attachedWidth;
+  max-width: @attachedWidth;
+  border-radius: 0px;
+  box-shadow: @attachedBoxShadow;
+  border: @attachedBorder;
+}
+
+.ui.segments > .segment:not(:last-child) {
+  border-bottom: none;
+}
+
+
+/* Horizontal Group */
+.ui.horizontal.segments {
+  display: flex;
+  flex-direction: row;
+  padding: @padding;
+  background-color: @background;
+  box-shadow: @boxShadow;
+  margin: @margin 0em;
+  padding: @padding;
+  border-radius: @borderRadius;
+  border: @border;
+}
+.ui.horizontal.segments > .segment:first-child {
+  padding-left: 0px;
+}
+.ui.horizontal.segments > .segment:last-child {
+  padding-right: 0px;
+  border-right: none;
+}
+
+/* Top */
+.ui.segments > .segment:first-child {
+  margin-top: 0em;
+  bottom: 0px;
+  margin-bottom: 0em;
+  top: @attachedTopOffset;
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
+
+/* Bottom */
+.ui.segments > .segment:last-child {
+  bottom: 0px;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  top: @attachedBottomOffset;
+  box-shadow: @attachedBottomBoxShadow;
+  border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+
 /*******************************
             States
 *******************************/
@@ -346,11 +423,10 @@
 --------------------*/
 
 .ui.basic.segment {
-  position: relative;
-  background-color: transparent;
-  box-shadow: none;
-
-  border-radius: 0px;
+  background-color: @basicBackground;
+  box-shadow: @basicBoxShadow;
+  border: @basicBorder;
+  border-radius: @basicBorderRadius;
 }
 
 /*-------------------
@@ -607,55 +683,4 @@
   margin-bottom: 0em;
 }
 
-
-/*-------------------
-       Groups
---------------------*/
-
-.ui.segments {
-  position: relative;
-  margin: @margin 0em;
-  box-shadow: @boxShadow;
-}
-.ui.segments:first-child {
-  margin-top: 0em;
-}
-.ui.segments:last-child {
-  margin-bottom: 0em;
-}
-
-.ui.segments > .segment {
-  top: 0px;
-  bottom: 0px;
-  margin: 0em @attachedHorizontalOffset;
-  width: @attachedWidth;
-  max-width: @attachedWidth;
-  border-radius: 0px;
-  box-shadow: @attachedBoxShadow;
-  border: @attachedBorder;
-}
-
-.ui.segments > .segment:not(:last-child) {
-  border-bottom: none;
-}
-
-/* Top */
-.ui.segments > .segment:first-child {
-  margin-top: 0em;
-  bottom: 0px;
-  margin-bottom: 0em;
-  top: @attachedTopOffset;
-  border-radius: @borderRadius @borderRadius 0em 0em;
-}
-
-/* Bottom */
-.ui.segments > .segment:last-child {
-  bottom: 0px;
-  margin-top: 0em;
-  margin-bottom: 0em;
-  top: @attachedBottomOffset;
-  box-shadow: @attachedBottomBoxShadow;
-  border-radius: 0em 0em @borderRadius @borderRadius;
-}
-
 .loadUIOverrides();

src/themes/default/elements/segment.variables

@@ -8,11 +8,12 @@
 
 @background: @white;
 @borderWidth: 1px;
-@border: 1px solid @borderColor;
+@border: @borderWidth solid @borderColor;
 
 @boxShadow: @subtleShadow;
 @verticalPadding: 1em;
 @horizontalPadding: 1em;
+@padding: @verticalPadding @horizontalPadding;
 
 @margin: 1rem;
 @borderRadius: @defaultBorderRadius;
@@ -80,6 +81,12 @@
   @subtleShadow
 ;
 
+/* Basic */
+@basicBackground: none transparent;
+@basicBorder: none;
+@basicBoxShadow: none;
+@basicBorderRadius: 0px;
+
 /* Colors */
 @coloredBorderSize: 2px;