Fix or variables to all be derived automatically from button padding, more or fixes

src/definitions/elements/button.less

@@ -530,6 +530,7 @@
   font-size: @small;
 }
 .ui.buttons .button,
+.ui.buttons .or,
 .ui.button {
   font-size: @medium;
 }
@@ -847,7 +848,7 @@
 .ui.buttons .or {
   position: relative;
   float: left;
-  width: @orWidth;
+  width: @orGap;
   height: @orHeight;
   z-index: 3;
 }
@@ -856,8 +857,8 @@
   top: 50%;
   left: 50%;
   content: 'or';
-  background-color: @white;
-  text-shadow: @invertedTextShadow;
+  background-color: @orBackgroundColor;
+  text-shadow: @orTextShadow;
 
   margin-top: @orVerticalOffset;
   margin-left: @orHorizontalOffset;
@@ -866,7 +867,7 @@
   height: @orCircleSize;
 
   line-height: @orLineHeight;
-  color: @lightTextColor;
+  color: @orTextColor;
 
   font-style: @orTextStyle;
   font-weight: @orTextWeight;
@@ -876,18 +877,6 @@
   box-shadow: @orBoxShadow;
   box-sizing: border-box;
 }
-.ui.buttons .or:after {
-  position: absolute;
-  top: 0em;
-  left: 0em;
-  content: ' ';
-  background-color: transparent;
-
-  width: @orWidth;
-  height: (@orHeight + (@orSpacerHeight * 2));
-  border-top: @orSpacerHeight solid @orSpacerColor;
-  border-bottom: @orSpacerHeight solid @orSpacerColor;
-}
 
 /* Fluid Or */
 .ui.fluid.buttons .or {

src/themes/packages/default/elements/button.variables

@@ -121,20 +121,25 @@
 --------------------*/
 
 /* Or */
-@orWidth: 0.3em;
-@orHeight: 1.1em;
+@orGap: 0.3em;
+@orHeight: (@verticalPadding * 2) + 1em;
 
-@orVerticalOffset: -0.1em;
-@orHorizontalOffset: -0.9em;
+@orCircleDistanceToEdge: (@verticalPadding);
+@orCircleSize: @orHeight - @orCircleDistanceToEdge;
+@orLineHeight: (@orCircleSize - 0.2em);
+@orBoxShadow: @borderBoxShadow;
 
+@orVerticalOffset: -(@orCircleSize / 2);
+@orHorizontalOffset: -(@orCircleSize / 2);
+
+@orBackgroundColor: @white;
+@orTextShadow: @invertedTextShadow;
 @orTextStyle: normal;
 @orTextWeight: bold;
+@orTextColor: @lightTextColor;
 
-@orCircleSize: 1.8em;
-@orLineHeight: 1.6;
-@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
-@orSpacerHeight: 0.5em;
+@orSpacerHeight: @verticalPadding;
 @orSpacerColor: transparent;
 
 /* Icon */
@@ -233,6 +238,7 @@
 @fadeScaleHigh: 1.5;
 @fadeScaleLow: 0.75;
 
+
 /* Sizing */
 @mini: 0.7rem;
 @tiny: 0.8rem;