From 09e4b7c5ff9d5291b897e75896e21da37a0db0f9 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 26 Aug 2014 14:18:54 -0400 Subject: [PATCH] Fix inverted button hover state, fix animated buttons not obeying changes in padding variable, fix button docs --- server/documents/collections/menu.html.eco | 4 +- server/documents/elements/button.html.eco | 81 +++++++----- server/documents/elements/divider.html.eco | 1 - server/files/stylesheets/semantic.css | 14 +- src/definitions/collections/menu.less | 3 + src/definitions/collections/table.less | 3 + src/definitions/elements/button.less | 124 ++++++++---------- .../packages/chubby/elements/button.variables | 1 + .../default/collections/menu.variables | 4 +- .../default/elements/button.variables | 19 +-- 10 files changed, 130 insertions(+), 124 deletions(-) diff --git a/server/documents/collections/menu.html.eco b/server/documents/collections/menu.html.eco index c30dee221..c047f721b 100755 --- 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'] --- @@ -40,7 +40,7 @@ themes : ['default', 'github']
-
+
diff --git a/server/documents/elements/button.html.eco b/server/documents/elements/button.html.eco index 2a88a63ba..59beab583 100755 --- 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']

Vertical

Groups can be formatted to appear vertically

-
Top
-
Middle
-
Bottom
+
Feed
+
Messages
+
Events
+
Photos
@@ -388,10 +389,10 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Groups can be formatted as icons

- +
- +
@@ -424,32 +425,29 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']

Groups can be divided evenly to fit parent

Evenly divided elements can either use the number or the word, i.e. 2 or "two"
-
One
-
Two
-
Three
+
Overview
+
Specs
+
Reviews
-
One
-
Two
-
Three
-
Four
-
Five
+
Overview
+
Specs
+
Warranty
+
Reviews
+
Support
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -488,18 +486,33 @@ themes : ['Default', 'Basic', 'Chubby', 'Flat', 'Amazon', 'GitHub']
Three
+
+
+
+
One
+
Two
+
Three
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
diff --git a/server/documents/elements/divider.html.eco b/server/documents/elements/divider.html.eco index bd3694116..ab2804493 100755 --- a/server/documents/elements/divider.html.eco +++ b/server/documents/elements/divider.html.eco @@ -79,7 +79,6 @@ themes : ['default']
Horizontal dividers can also be used in combination with header and icons to create different styles of dividers.
Dividers in Semantic 1.0 will automatically vary the size of their rules to match the length of your text
-

Retrieve Order

diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 0b6ed45d8..c64811e05 100755 --- 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; } diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 7c16c09c9..f04e4ffe4 100755 --- 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; diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index a7727edae..0678782f3 100755 --- 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; } diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 7ef5fa4c9..3f4f7c370 100755 --- 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; } diff --git a/src/themes/packages/chubby/elements/button.variables b/src/themes/packages/chubby/elements/button.variables index b57130c7f..73e5676df 100755 --- 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; diff --git a/src/themes/packages/default/collections/menu.variables b/src/themes/packages/default/collections/menu.variables index 548e6d868..cabc48ba8 100755 --- 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; diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables index 34d1c3474..1b1ae08f6 100755 --- 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;