diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index a075b0b4d..d9c379dda 100755 --- a/src/definitions/elements/button.less +++ b/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 { diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables index e07c0af0c..1f6c99e38 100755 --- a/src/themes/packages/default/elements/button.variables +++ b/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;