Fix inverted button hover state, fix animated buttons not obeying changes in padding variable, fix button docs

10 years ago · 09e4b7c5ff
10 changed files with 130 additions and 124 deletions
--- a/server/documents/collections/menu.html.eco
+++ b/server/documents/collections/menu.html.eco
@ -8,7 +8,7 @@ type        : 'UI Collection'

 element     : 'menu'
 elementType : 'collection'
-themes      : ['default', 'github']
+themes      : ['default', 'GitHub']
 ---
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/menu.less" />
 <script src="/javascript/menu.js"></script>
@ -40,7 +40,7 @@ themes      : ['default', 'github']
      </a>
      <div class="right menu">
        <div class="item">
-          <div class="ui icon input">
+          <div class="ui transparent icon input">
            <input type="text" placeholder="Search...">
            <i class="search link icon"></i>
          </div>
--- a/server/documents/elements/button.html.eco
+++ b/server/documents/elements/button.html.eco
@ -377,9 +377,10 @@ themes      : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
    <h4 class="ui header">Vertical</h4>
    <p>Groups can be formatted to appear vertically</p>
    <div class="ui vertical buttons">
-      <div class="ui button">Top</div>
-      <div class="ui button">Middle</div>
-      <div class="ui button">Bottom</div>
+      <div class="ui button">Feed</div>
+      <div class="ui button">Messages</div>
+      <div class="ui button">Events</div>
+      <div class="ui button">Photos</div>
    </div>
  </div>

@ -388,10 +389,10 @@ themes      : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
    <p>Groups can be formatted as icons</p>
    <div class="ui icon buttons">
      <div class="ui button">
-        <i class="pause icon"></i>
+        <i class="play icon"></i>
      </div>
      <div class="ui button">
-        <i class="play icon"></i>
+        <i class="pause icon"></i>
      </div>
      <div class="ui button">
        <i class="shuffle icon"></i>
@ -424,32 +425,29 @@ themes      : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
    <p>Groups can be divided evenly to fit parent</p>
    <div class="ui message">Evenly divided elements can either use the number or the word, i.e. 2 or "two"</div>
    <div class="3 fluid ui buttons">
-      <div class="ui button">One</div>
-      <div class="ui button">Two</div>
-      <div class="ui button">Three</div>
+      <div class="ui button">Overview</div>
+      <div class="ui button">Specs</div>
+      <div class="ui button">Reviews</div>
    </div>
    <div class="ui ignored divider"></div>
    <div class="five fluid ui buttons">
-      <div class="ui button">One</div>
-      <div class="ui button">Two</div>
-      <div class="ui button">Three</div>
-      <div class="ui button">Four</div>
-      <div class="ui button">Five</div>
+      <div class="ui button">Overview</div>
+      <div class="ui button">Specs</div>
+      <div class="ui button">Warranty</div>
+      <div class="ui button">Reviews</div>
+      <div class="ui button">Support</div>
    </div>
    <div class="ui ignored divider"></div>
-    <div class="12 fluid ui icon buttons">
-      <div class="ui button"><i class="tag icon"></i></div>
-      <div class="ui button"><i class="tags icon"></i></div>
-      <div class="ui button"><i class="tasks icon"></i></div>
-      <div class="ui button"><i class="terminal icon"></i></div>
-      <div class="ui button"><i class="text file icon"></i></div>
-      <div class="ui button"><i class="text file outline icon"></i></div>
-      <div class="ui button"><i class="time icon"></i></div>
-      <div class="ui button"><i class="trash icon"></i></div>
-      <div class="ui button"><i class="url icon"></i></div>
-      <div class="ui button"><i class="user icon"></i></div>
-      <div class="ui button"><i class="users icon"></i></div>
-      <div class="ui button"><i class="video icon"></i></div>
+    <div class="9 fluid ui icon buttons">
+      <div class="ui button"><i class="backward icon"></i></div>
+      <div class="ui button"><i class="fast backward icon"></i></div>
+      <div class="ui button"><i class="step backward icon"></i></div>
+      <div class="ui button"><i class="play icon"></i></div>
+      <div class="ui button"><i class="stop icon"></i></div>
+      <div class="ui button"><i class="step forward icon"></i></div>
+      <div class="ui button"><i class="fast forward icon"></i></div>
+      <div class="ui button"><i class="forward icon"></i></div>
+      <div class="ui button"><i class="mute icon"></i></div>
    </div>
  </div>

@ -488,18 +486,33 @@ themes      : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
      <div class="ui button">Three</div>
    </div>
  </div>
+  <div class="another example">
+    <div class="ui inverted segment">
+      <div class="ui inverted buttons">
+        <div class="ui red inverted button">One</div>
+        <div class="ui yellow inverted button">Two</div>
+        <div class="ui pink inverted button">Three</div>
+      </div>
+      <div class="ui inverted icon buttons">
+        <div class="ui red basic inverted button"><i class="align left icon"></i></div>
+        <div class="ui yellow basic inverted button"><i class="align center icon"></i></div>
+        <div class="ui pink basic inverted button"><i class="align right icon"></i></div>
+        <div class="ui purple basic inverted button"><i class="align justify icon"></i></div>
+      </div>
+    </div>
+  </div>
  <div class="another example">
    <div class="small icon ui buttons">
-      <div class="ui button"><i class="align left icon"></i></div>
-      <div class="ui button"><i class="align center icon"></i></div>
-      <div class="ui button"><i class="align right icon"></i></div>
-      <div class="ui button"><i class="align justify icon"></i></div>
+      <div class="ui button"><i class="file icon"></i></div>
+      <div class="ui button"><i class="save icon"></i></div>
+      <div class="ui button"><i class="upload icon"></i></div>
+      <div class="ui button"><i class="download icon"></i></div>
    </div>
    <div class="tiny icon ui buttons">
-      <div class="ui button"><i class="align left icon"></i></div>
-      <div class="ui button"><i class="align center icon"></i></div>
-      <div class="ui button"><i class="align right icon"></i></div>
-      <div class="ui button"><i class="align justify icon"></i></div>
+      <div class="ui button"><i class="file icon"></i></div>
+      <div class="ui button"><i class="save icon"></i></div>
+      <div class="ui button"><i class="upload icon"></i></div>
+      <div class="ui button"><i class="download icon"></i></div>
    </div>
  </div>
  <div class="another example">
--- a/server/documents/elements/divider.html.eco
+++ b/server/documents/elements/divider.html.eco
@ -79,7 +79,6 @@ themes      : ['default']
    <div class="ui ignored positive message">Horizontal dividers can also be used in combination with <a href="/elements/header.html">header</a> and <a href="/elements/icon.html">icons</a> to create different styles of dividers.
    </div>
    <div class="ui ignored message">Dividers in Semantic <code>1.0</code> will automatically vary the size of their rules to match the length of your text</div>
-    <h3 class="ui header">Retrieve Order</h3>
    <div class="ui tertiary form segment">
      <div class="field">
        <label>Lookup Order</label>
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@ -799,23 +799,21 @@ body.guide .main.container > * {
 }
 */
 #example.overview .example {
-  margin: 0em;
+  display: table-row;
  min-height: 0px !important;
  overflow: hidden;
-  padding: 0.5em 0em;
 }
 #example.overview .example .ui.header,
 #example.overview .example p {
-  float: right;
+  display: table-cell;
  font-size: 1em;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
+  font-weight: bold;
+  padding: 0.5em 0em;
 }
 #example.overview .example p {
-  float: left;
  font-size: 1rem;
-  padding: 0em 0em 0em 0.3em;
+  font-weight: normal;
+  padding: 0em 0em 0em 0.5em;
  width: auto;
 }

--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@ -201,6 +201,9 @@
 .ui.menu:not(.vertical) .item > .icon.input .icon {
  top: @inputIconOffset;
 }
+.ui.menu:not(.vertical) .item > .transparent.icon.input .icon {
+  top: @inputVerticalPadding;
+}
 .ui.menu:not(.vertical) .item > .input input {
  font-size: @inputSize;
  padding-top: @inputVerticalPadding;
--- a/src/definitions/collections/table.less
+++ b/src/definitions/collections/table.less
@ -701,6 +701,9 @@
 .ui.very.basic.table:not(.sortable):not(.striped) td {
  padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;
 }
+.ui.very.basic.table:not(.sortable):not(.striped) thead th {
+  padding-top: 0em;
+}
 .ui.very.basic.table:not(.sortable):not(.striped) tbody tr:last-child td {
  padding-bottom: 0em;
 }
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@ -179,10 +179,12 @@
 .ui.animated.button {
  position: relative;
  overflow: hidden;
+  padding-right: 0em;
 }

 .ui.animated.button .visible.content {
  position: relative;
+  margin-right: @horizontalPadding;
 }
 .ui.animated.button .hidden.content {
  position: absolute;
@ -223,7 +225,7 @@
  right: auto;
 }
 .ui.vertical.animated.button .hidden.content {
-  top: -100%;
+  top: -50%;
  left: 0%;
  right: auto;
 }
@ -271,7 +273,7 @@
 --------------------*/

 .ui.inverted.button {
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
  background: transparent none;
  color: @white;
  text-shadow: none !important;
@ -292,11 +294,10 @@
 .ui.inverted.buttons .button:hover {
  position: relative;
 }
-
 .ui.inverted.button:hover {
-  background: @white none;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
-  color: @textColor;
+  background: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
+  color: @hoverColor;
 }


@ -618,20 +619,6 @@
  font-size: @massive;
 }

-/* Or resize */
-.ui.tiny.buttons .or:before,
-.ui.mini.buttons .or:before {
-  width: 1.45em;
-  height: 1.55em;
-  line-height: 1.4;
-  margin-left: -0.725em;
-  margin-top: -0.25em;
-}
-.ui.tiny.buttons .or:after,
-.ui.mini.buttons .or:after {
-  height: 1.45em;
-}
-
 /* Loading Resize */
 .ui.huge.loading.button:after,
 .ui.huge.loading.button.active:after {
@ -664,7 +651,6 @@
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
  height: 0em;
-  vertical-align: top;
 }


@ -955,7 +941,7 @@
 .ui.fluid.buttons .or {
  width: 0em !important;
 }
-.ui.fluid.buttons .or:after{
+.ui.fluid.buttons .or:after {
  display: none;
 }

@ -1164,13 +1150,13 @@
 .ui.inverted.black.buttons .button,
 .ui.inverted.black.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightBlack inset !important;
-  color: #FFFFFF;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
+  color: @white;
 }
 .ui.inverted.black.buttons .button:hover,
 .ui.inverted.black.button:hover {
-  box-shadow: 0px 0px 0px 2px @black inset !important;
-  background-color: @black;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
+  background-color: @lightBlack;
  color: @white;
 }
 .ui.inverted.black.basic.buttons .button,
@ -1183,7 +1169,7 @@
 .ui.inverted.black.basic.buttons .button:hover,
 .ui.inverted.black.buttons .basic.button:hover,
 .ui.inverted.black.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightBlack inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important;
  color: @white !important;
 }

@ -1226,14 +1212,14 @@
 .ui.inverted.blue.buttons .button,
 .ui.inverted.blue.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightBlue inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.blue.buttons .button:hover,
 .ui.inverted.blue.button:hover {
-  box-shadow: 0px 0px 0px 2px @blue inset !important;
-  background-color: @blue;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
+  background-color: @lightBlue;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.blue.basic.buttons .button,
 .ui.inverted.blue.buttons .basic.button,
@ -1245,7 +1231,7 @@
 .ui.inverted.blue.basic.buttons .button:hover,
 .ui.inverted.blue.buttons .basic.button:hover,
 .ui.inverted.blue.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightBlue inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
  color: @lightBlue !important;
 }

@ -1285,14 +1271,14 @@
 .ui.inverted.green.buttons .button,
 .ui.inverted.green.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightGreen inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.green.buttons .button:hover,
 .ui.inverted.green.button:hover {
-  box-shadow: 0px 0px 0px 2px @green inset !important;
-  background-color: @green;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
+  background-color: @lightGreen;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.green.basic.buttons .button,
 .ui.inverted.green.buttons .basic.button,
@ -1304,7 +1290,7 @@
 .ui.inverted.green.basic.buttons .button:hover,
 .ui.inverted.green.buttons .basic.button:hover,
 .ui.inverted.green.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightGreen inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
  color: @lightGreen !important;
 }

@ -1343,14 +1329,14 @@
 .ui.inverted.orange.buttons .button,
 .ui.inverted.orange.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightOrange inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.orange.buttons .button:hover,
 .ui.inverted.orange.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightOrange inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
  background-color: @lightOrange;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.orange.basic.buttons .button,
 .ui.inverted.orange.buttons .basic.button,
@ -1362,7 +1348,7 @@
 .ui.inverted.orange.basic.buttons .button:hover,
 .ui.inverted.orange.buttons .basic.button:hover,
 .ui.inverted.orange.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightOrange inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
  color: @lightOrange !important;
 }

@ -1401,14 +1387,14 @@
 .ui.inverted.pink.buttons .button,
 .ui.inverted.pink.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightPink inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.pink.buttons .button:hover,
 .ui.inverted.pink.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightPink inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
  background-color: @lightPink;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.pink.basic.buttons .button,
 .ui.inverted.pink.buttons .basic.button,
@ -1420,7 +1406,7 @@
 .ui.inverted.pink.basic.buttons .button:hover,
 .ui.inverted.pink.buttons .basic.button:hover,
 .ui.inverted.pink.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightPink inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
  color: @lightPink !important;
 }

@ -1459,14 +1445,14 @@
 .ui.inverted.purple.buttons .button,
 .ui.inverted.purple.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightPurple inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.purple.buttons .button:hover,
 .ui.inverted.purple.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightPurple inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
  background-color: @lightPurple;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.purple.basic.buttons .button,
 .ui.inverted.purple.buttons .basic.button,
@ -1478,7 +1464,7 @@
 .ui.inverted.purple.basic.buttons .button:hover,
 .ui.inverted.purple.buttons .basic.button:hover,
 .ui.inverted.purple.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightPurple inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
  color: @lightPurple !important;
 }

@ -1517,14 +1503,14 @@
 .ui.inverted.red.buttons .button,
 .ui.inverted.red.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightRed inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.red.buttons .button:hover,
 .ui.inverted.red.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightRed inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
  background-color: @lightRed;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.red.basic.buttons .button,
 .ui.inverted.red.buttons .basic.button,
@ -1536,7 +1522,7 @@
 .ui.inverted.red.basic.buttons .button:hover,
 .ui.inverted.red.buttons .basic.button:hover,
 .ui.inverted.red.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightRed inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
  color: @lightRed !important;
 }

@ -1576,14 +1562,14 @@
 .ui.inverted.teal.buttons .button,
 .ui.inverted.teal.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightTeal inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.teal.buttons .button:hover,
 .ui.inverted.teal.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightTeal inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
  background-color: @lightTeal;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.teal.basic.buttons .button,
 .ui.inverted.teal.buttons .basic.button,
@ -1595,7 +1581,7 @@
 .ui.inverted.teal.basic.buttons .button:hover,
 .ui.inverted.teal.buttons .basic.button:hover,
 .ui.inverted.teal.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightTeal inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
  color: @lightTeal !important;
 }

@ -1635,14 +1621,14 @@
 .ui.inverted.yellow.buttons .button,
 .ui.inverted.yellow.button {
  background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @lightYellow inset !important;
-  color: @white;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
+  color: @invertedTextColor;
 }
 .ui.inverted.yellow.buttons .button:hover,
 .ui.inverted.yellow.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightYellow inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
  background-color: @lightYellow;
-  color: @white;
+  color: @invertedTextHoverColor;
 }
 .ui.inverted.yellow.basic.buttons .button,
 .ui.inverted.yellow.buttons .basic.button,
@ -1654,7 +1640,7 @@
 .ui.inverted.yellow.basic.buttons .button:hover,
 .ui.inverted.yellow.buttons .basic.button:hover,
 .ui.inverted.yellow.basic.button:hover {
-  box-shadow: 0px 0px 0px 2px @lightYellow inset !important;
+  box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
  color: @lightYellow !important;
 }

--- a/src/themes/packages/chubby/elements/button.variables
+++ b/src/themes/packages/chubby/elements/button.variables
@ -11,6 +11,7 @@

@verticalPadding: 1.1em;
@horizontalPadding: 2.5em;
+@invertedBorderSize: 3px;

@blue: #4A88CB;
@primaryColor: @blue;
--- a/src/themes/packages/default/collections/menu.variables
+++ b/src/themes/packages/default/collections/menu.variables
@ -101,8 +101,8 @@
@inputSize: 1em;
@inputVerticalMargin: -0.6em;
@inputOffset: 0em;
-@inputVerticalPadding: 0.4em;
-@inputIconOffset: -0.3em;
+@inputVerticalPadding: 0.35em;
+@inputIconOffset: -0.35em;

@smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em;
--- a/src/themes/packages/default/elements/button.variables
+++ b/src/themes/packages/default/elements/button.variables
@ -95,7 +95,7 @@
 /* Active */
@activeBackgroundColor: #DADADA;
@activeBackgroundImage: none;
-@activeColor: rgba(0, 0, 0, 0.5);
+@activeColor: rgba(0, 0, 0, 0.6);
@activeBoxShadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
  0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important
@ -132,7 +132,7 @@
@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

@orSpacerHeight: 0.5em;
-@orSpacerColor: @white;
+@orSpacerColor: transparent;

 /* Icon */
@iconButtonOpacity: 0.9;
@ -148,8 +148,11 @@
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;

 /* Inverted */
-@invertedGroupButtonOffset: 0px 0px 0px -2px;
-@invertedVerticalGroupButtonOffset: 0px 0px -2px 0px;
+@invertedBorderSize: 2px;
+@invertedTextColor: @white;
+@invertedTextHoverColor: @hoverColor;
+@invertedGroupButtonOffset: 0px 0px 0px -(@invertedBorderSize);
+@invertedVerticalGroupButtonOffset: 0px 0px -(@invertedBorderSize) 0px;

 /* Basic */
@basicBoxShadow: 0px 0px 0px 1px @borderColor;
@ -170,10 +173,10 @@
@basicInvertedDownBackground: @transparentWhite;
@basicInvertedActiveBackground: @transparentWhite;

-@basicInvertedBoxShadow: 0px 0px 0px 2px #999999 inset;
-@basicInvertedHoverBoxShadow: 0px 0px 0px 2px #FFFFFF inset;
-@basicInvertedDownBoxShadow: 0px 0px 0px 2px #CCCCCC inset;
-@basicInvertedActiveBoxShadow: 0px 0px 0px 2px #DADADA inset;
+@basicInvertedBoxShadow: 0px 0px 0px @invertedBorderSize #999999 inset;
+@basicInvertedHoverBoxShadow: 0px 0px 0px @invertedBorderSize #FFFFFF inset;
+@basicInvertedDownBoxShadow: 0px 0px 0px @invertedBorderSize #CCCCCC inset;
+@basicInvertedActiveBoxShadow: 0px 0px 0px @invertedBorderSize #DADADA inset;

@basicInvertedColor: @darkWhite;
@basicInvertedHoverColor: @darkWhiteHover;