richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/1063/head
jlukic 10 years ago
parent
6a42e3dfb1
commit
09e4b7c5ff
10 changed files with 130 additions and 124 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/collections/menu.html.eco
  2. 81
      server/documents/elements/button.html.eco
  3. 1
      server/documents/elements/divider.html.eco
  4. 14
      server/files/stylesheets/semantic.css
  5. 3
      src/definitions/collections/menu.less
  6. 3
      src/definitions/collections/table.less
  7. 124
      src/definitions/elements/button.less
  8. 1
      src/themes/packages/chubby/elements/button.variables
  9. 4
      src/themes/packages/default/collections/menu.variables
  10. 19
      src/themes/packages/default/elements/button.variables

4
server/documents/collections/menu.html.eco
View File

@ -8,7 +8,7 @@ type : 'UI Collection'
element : 'menu' element : 'menu'
elementType : 'collection' elementType : 'collection'
themes : ['default', 'github']
themes : ['default', 'GitHub']
--- ---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/menu.less" /> <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/menu.less" />
<script src="/javascript/menu.js"></script> <script src="/javascript/menu.js"></script>
@ -40,7 +40,7 @@ themes : ['default', 'github']
</a> </a>
<div class="right menu"> <div class="right menu">
<div class="item"> <div class="item">
<div class="ui icon input">
<div class="ui transparent icon input">
<input type="text" placeholder="Search..."> <input type="text" placeholder="Search...">
<i class="search link icon"></i> <i class="search link icon"></i>
</div> </div>

81
server/documents/elements/button.html.eco
View File

@ -377,9 +377,10 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<h4 class="ui header">Vertical</h4> <h4 class="ui header">Vertical</h4>
<p>Groups can be formatted to appear vertically</p> <p>Groups can be formatted to appear vertically</p>
<div class="ui vertical buttons"> <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>
</div> </div>
@ -388,10 +389,10 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<p>Groups can be formatted as icons</p> <p>Groups can be formatted as icons</p>
<div class="ui icon buttons"> <div class="ui icon buttons">
<div class="ui button"> <div class="ui button">
<i class="pause icon"></i>
<i class="play icon"></i>
</div> </div>
<div class="ui button"> <div class="ui button">
<i class="play icon"></i>
<i class="pause icon"></i>
</div> </div>
<div class="ui button"> <div class="ui button">
<i class="shuffle icon"></i> <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> <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="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="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>
<div class="ui ignored divider"></div> <div class="ui ignored divider"></div>
<div class="five fluid ui buttons"> <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>
<div class="ui ignored divider"></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>
</div> </div>
@ -488,18 +486,33 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
<div class="ui button">Three</div> <div class="ui button">Three</div>
</div> </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="another example">
<div class="small icon ui buttons"> <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>
<div class="tiny icon ui buttons"> <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> </div>
<div class="another example"> <div class="another example">

1
server/documents/elements/divider.html.eco
View File

@ -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 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>
<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> <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="ui tertiary form segment">
<div class="field"> <div class="field">
<label>Lookup Order</label> <label>Lookup Order</label>

14
server/files/stylesheets/semantic.css
View File

@ -799,23 +799,21 @@ body.guide .main.container > * {
} }
*/ */
#example.overview .example { #example.overview .example {
margin: 0em;
display: table-row;
min-height: 0px !important; min-height: 0px !important;
overflow: hidden; overflow: hidden;
padding: 0.5em 0em;
} }
#example.overview .example .ui.header, #example.overview .example .ui.header,
#example.overview .example p { #example.overview .example p {
float: right;
display: table-cell;
font-size: 1em; font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
font-weight: bold;
padding: 0.5em 0em;
} }
#example.overview .example p { #example.overview .example p {
float: left;
font-size: 1rem; font-size: 1rem;
padding: 0em 0em 0em 0.3em;
font-weight: normal;
padding: 0em 0em 0em 0.5em;
width: auto; width: auto;
} }

3
src/definitions/collections/menu.less
View File

@ -201,6 +201,9 @@
.ui.menu:not(.vertical) .item > .icon.input .icon { .ui.menu:not(.vertical) .item > .icon.input .icon {
top: @inputIconOffset; top: @inputIconOffset;
} }
.ui.menu:not(.vertical) .item > .transparent.icon.input .icon {
top: @inputVerticalPadding;
}
.ui.menu:not(.vertical) .item > .input input { .ui.menu:not(.vertical) .item > .input input {
font-size: @inputSize; font-size: @inputSize;
padding-top: @inputVerticalPadding; padding-top: @inputVerticalPadding;

3
src/definitions/collections/table.less
View File

@ -701,6 +701,9 @@
.ui.very.basic.table:not(.sortable):not(.striped) td { .ui.very.basic.table:not(.sortable):not(.striped) td {
padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding; 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 { .ui.very.basic.table:not(.sortable):not(.striped) tbody tr:last-child td {
padding-bottom: 0em; padding-bottom: 0em;
} }

124
src/definitions/elements/button.less
View File

@ -179,10 +179,12 @@
.ui.animated.button { .ui.animated.button {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding-right: 0em;
} }
.ui.animated.button .visible.content { .ui.animated.button .visible.content {
position: relative; position: relative;
margin-right: @horizontalPadding;
} }
.ui.animated.button .hidden.content { .ui.animated.button .hidden.content {
position: absolute; position: absolute;
@ -223,7 +225,7 @@
right: auto; right: auto;
} }
.ui.vertical.animated.button .hidden.content { .ui.vertical.animated.button .hidden.content {
top: -100%;
top: -50%;
left: 0%; left: 0%;
right: auto; right: auto;
} }
@ -271,7 +273,7 @@
--------------------*/ --------------------*/
.ui.inverted.button { .ui.inverted.button {
box-shadow: 0px 0px 0px 2px @white inset !important;
box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
background: transparent none; background: transparent none;
color: @white; color: @white;
text-shadow: none !important; text-shadow: none !important;
@ -292,11 +294,10 @@
.ui.inverted.buttons .button:hover { .ui.inverted.buttons .button:hover {
position: relative; position: relative;
} }
.ui.inverted.button:hover { .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; 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 */ /* Loading Resize */
.ui.huge.loading.button:after, .ui.huge.loading.button:after,
.ui.huge.loading.button.active:after { .ui.huge.loading.button.active:after {
@ -664,7 +651,6 @@
.ui.icon.buttons .button > .icon, .ui.icon.buttons .button > .icon,
.ui.icon.button > .icon { .ui.icon.button > .icon {
height: 0em; height: 0em;
vertical-align: top;
} }
@ -955,7 +941,7 @@
.ui.fluid.buttons .or { .ui.fluid.buttons .or {
width: 0em !important; width: 0em !important;
} }
.ui.fluid.buttons .or:after{
.ui.fluid.buttons .or:after {
display: none; display: none;
} }
@ -1164,13 +1150,13 @@
.ui.inverted.black.buttons .button, .ui.inverted.black.buttons .button,
.ui.inverted.black.button { .ui.inverted.black.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.black.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; color: @white;
} }
.ui.inverted.black.basic.buttons .button, .ui.inverted.black.basic.buttons .button,
@ -1183,7 +1169,7 @@
.ui.inverted.black.basic.buttons .button:hover, .ui.inverted.black.basic.buttons .button:hover,
.ui.inverted.black.buttons .basic.button:hover, .ui.inverted.black.buttons .basic.button:hover,
.ui.inverted.black.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; color: @white !important;
} }
@ -1226,14 +1212,14 @@
.ui.inverted.blue.buttons .button, .ui.inverted.blue.buttons .button,
.ui.inverted.blue.button { .ui.inverted.blue.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.blue.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.basic.buttons .button,
.ui.inverted.blue.buttons .basic.button, .ui.inverted.blue.buttons .basic.button,
@ -1245,7 +1231,7 @@
.ui.inverted.blue.basic.buttons .button:hover, .ui.inverted.blue.basic.buttons .button:hover,
.ui.inverted.blue.buttons .basic.button:hover, .ui.inverted.blue.buttons .basic.button:hover,
.ui.inverted.blue.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; color: @lightBlue !important;
} }
@ -1285,14 +1271,14 @@
.ui.inverted.green.buttons .button, .ui.inverted.green.buttons .button,
.ui.inverted.green.button { .ui.inverted.green.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.green.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.basic.buttons .button,
.ui.inverted.green.buttons .basic.button, .ui.inverted.green.buttons .basic.button,
@ -1304,7 +1290,7 @@
.ui.inverted.green.basic.buttons .button:hover, .ui.inverted.green.basic.buttons .button:hover,
.ui.inverted.green.buttons .basic.button:hover, .ui.inverted.green.buttons .basic.button:hover,
.ui.inverted.green.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; color: @lightGreen !important;
} }
@ -1343,14 +1329,14 @@
.ui.inverted.orange.buttons .button, .ui.inverted.orange.buttons .button,
.ui.inverted.orange.button { .ui.inverted.orange.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.orange.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; background-color: @lightOrange;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.orange.basic.buttons .button, .ui.inverted.orange.basic.buttons .button,
.ui.inverted.orange.buttons .basic.button, .ui.inverted.orange.buttons .basic.button,
@ -1362,7 +1348,7 @@
.ui.inverted.orange.basic.buttons .button:hover, .ui.inverted.orange.basic.buttons .button:hover,
.ui.inverted.orange.buttons .basic.button:hover, .ui.inverted.orange.buttons .basic.button:hover,
.ui.inverted.orange.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; color: @lightOrange !important;
} }
@ -1401,14 +1387,14 @@
.ui.inverted.pink.buttons .button, .ui.inverted.pink.buttons .button,
.ui.inverted.pink.button { .ui.inverted.pink.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.pink.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; background-color: @lightPink;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.pink.basic.buttons .button, .ui.inverted.pink.basic.buttons .button,
.ui.inverted.pink.buttons .basic.button, .ui.inverted.pink.buttons .basic.button,
@ -1420,7 +1406,7 @@
.ui.inverted.pink.basic.buttons .button:hover, .ui.inverted.pink.basic.buttons .button:hover,
.ui.inverted.pink.buttons .basic.button:hover, .ui.inverted.pink.buttons .basic.button:hover,
.ui.inverted.pink.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; color: @lightPink !important;
} }
@ -1459,14 +1445,14 @@
.ui.inverted.purple.buttons .button, .ui.inverted.purple.buttons .button,
.ui.inverted.purple.button { .ui.inverted.purple.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.purple.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; background-color: @lightPurple;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.purple.basic.buttons .button, .ui.inverted.purple.basic.buttons .button,
.ui.inverted.purple.buttons .basic.button, .ui.inverted.purple.buttons .basic.button,
@ -1478,7 +1464,7 @@
.ui.inverted.purple.basic.buttons .button:hover, .ui.inverted.purple.basic.buttons .button:hover,
.ui.inverted.purple.buttons .basic.button:hover, .ui.inverted.purple.buttons .basic.button:hover,
.ui.inverted.purple.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; color: @lightPurple !important;
} }
@ -1517,14 +1503,14 @@
.ui.inverted.red.buttons .button, .ui.inverted.red.buttons .button,
.ui.inverted.red.button { .ui.inverted.red.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.red.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; background-color: @lightRed;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.red.basic.buttons .button, .ui.inverted.red.basic.buttons .button,
.ui.inverted.red.buttons .basic.button, .ui.inverted.red.buttons .basic.button,
@ -1536,7 +1522,7 @@
.ui.inverted.red.basic.buttons .button:hover, .ui.inverted.red.basic.buttons .button:hover,
.ui.inverted.red.buttons .basic.button:hover, .ui.inverted.red.buttons .basic.button:hover,
.ui.inverted.red.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; color: @lightRed !important;
} }
@ -1576,14 +1562,14 @@
.ui.inverted.teal.buttons .button, .ui.inverted.teal.buttons .button,
.ui.inverted.teal.button { .ui.inverted.teal.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.teal.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; background-color: @lightTeal;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.teal.basic.buttons .button, .ui.inverted.teal.basic.buttons .button,
.ui.inverted.teal.buttons .basic.button, .ui.inverted.teal.buttons .basic.button,
@ -1595,7 +1581,7 @@
.ui.inverted.teal.basic.buttons .button:hover, .ui.inverted.teal.basic.buttons .button:hover,
.ui.inverted.teal.buttons .basic.button:hover, .ui.inverted.teal.buttons .basic.button:hover,
.ui.inverted.teal.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; color: @lightTeal !important;
} }
@ -1635,14 +1621,14 @@
.ui.inverted.yellow.buttons .button, .ui.inverted.yellow.buttons .button,
.ui.inverted.yellow.button { .ui.inverted.yellow.button {
background-color: transparent; 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.buttons .button:hover,
.ui.inverted.yellow.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; background-color: @lightYellow;
color: @white;
color: @invertedTextHoverColor;
} }
.ui.inverted.yellow.basic.buttons .button, .ui.inverted.yellow.basic.buttons .button,
.ui.inverted.yellow.buttons .basic.button, .ui.inverted.yellow.buttons .basic.button,
@ -1654,7 +1640,7 @@
.ui.inverted.yellow.basic.buttons .button:hover, .ui.inverted.yellow.basic.buttons .button:hover,
.ui.inverted.yellow.buttons .basic.button:hover, .ui.inverted.yellow.buttons .basic.button:hover,
.ui.inverted.yellow.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; color: @lightYellow !important;
} }

1
src/themes/packages/chubby/elements/button.variables
View File

@ -11,6 +11,7 @@
@verticalPadding: 1.1em; @verticalPadding: 1.1em;
@horizontalPadding: 2.5em; @horizontalPadding: 2.5em;
@invertedBorderSize: 3px;
@blue: #4A88CB; @blue: #4A88CB;
@primaryColor: @blue; @primaryColor: @blue;

4
src/themes/packages/default/collections/menu.variables
View File

@ -101,8 +101,8 @@
@inputSize: 1em; @inputSize: 1em;
@inputVerticalMargin: -0.6em; @inputVerticalMargin: -0.6em;
@inputOffset: 0em; @inputOffset: 0em;
@inputVerticalPadding: 0.4em;
@inputIconOffset: -0.3em;
@inputVerticalPadding: 0.35em;
@inputIconOffset: -0.35em;
@smallInputOffset: 0em; @smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em; @smallInputVerticalPadding: 0.4em;

19
src/themes/packages/default/elements/button.variables
View File

@ -95,7 +95,7 @@
/* Active */ /* Active */
@activeBackgroundColor: #DADADA; @activeBackgroundColor: #DADADA;
@activeBackgroundImage: none; @activeBackgroundImage: none;
@activeColor: rgba(0, 0, 0, 0.5);
@activeColor: rgba(0, 0, 0, 0.6);
@activeBoxShadow: @activeBoxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important 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); @orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@orSpacerHeight: 0.5em; @orSpacerHeight: 0.5em;
@orSpacerColor: @white;
@orSpacerColor: transparent;
/* Icon */ /* Icon */
@iconButtonOpacity: 0.9; @iconButtonOpacity: 0.9;
@ -148,8 +148,11 @@
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
/* Inverted */ /* 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 */ /* Basic */
@basicBoxShadow: 0px 0px 0px 1px @borderColor; @basicBoxShadow: 0px 0px 0px 1px @borderColor;
@ -170,10 +173,10 @@
@basicInvertedDownBackground: @transparentWhite; @basicInvertedDownBackground: @transparentWhite;
@basicInvertedActiveBackground: @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; @basicInvertedColor: @darkWhite;
@basicInvertedHoverColor: @darkWhiteHover; @basicInvertedHoverColor: @darkWhiteHover;

Write Preview
Loading…
Cancel
Save