diff --git a/build/less/themes/packages/amazon/elements/button.overrides b/build/less/themes/packages/amazon/elements/button.overrides
new file mode 100644
index 000000000..e69de29bb
diff --git a/build/less/themes/packages/amazon/elements/button.variables b/build/less/themes/packages/amazon/elements/button.variables
new file mode 100644
index 000000000..94ade066c
--- /dev/null
+++ b/build/less/themes/packages/amazon/elements/button.variables
@@ -0,0 +1,71 @@
+/*-------------------
+ Button Variables
+--------------------*/
+
+/* Button Variables */
+@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@textTransform: none;
+@fontWeight: bold;
+@textColor: #333333;
+
+@textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
+@invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
+
+@borderRadius: 0.25em;
+
+@verticalPadding: 0.75em;
+@horizontalPadding: 1.15em;
+
+@backgroundColor: #FAFAFA;
+@backgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
+@boxShadow:
+ 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
+ 0 0 0 1px rgba(0, 0, 0, 0.13) inset,
+ 0 1px 3px rgba(0, 0, 0, 0.05)
+;
+
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
+@coloredBoxShadow:
+ 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
+ 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+ 0 1px 3px rgba(0, 0, 0, 0.05)
+;
+
+@hoverBackgroundColor: '';
+@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
+@hoverBoxShadow: '';
+
+@downBackgroundColor: '';
+@downBackgroundImage: '';
+@downBoxShadow:
+ 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
+ 0 0 0 1px rgba(0, 0, 0, 0.13) inset,
+ 0 3px 5px rgba(0, 0, 0, 0.15) inset !important
+;
+@activeBackgroundColor: #DFDFDF;
+@activeBackgroundImage: none;
+@activeBoxShadow:
+ 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
+ 0 0 0 1px rgba(0, 0, 0, 0.13) inset,
+ 0 3px 5px rgba(0, 0, 0, 0.1) inset !important
+;
+
+@labeledIconBackgroundColor: transparent;
+@labeledIconBorder: transparent;
+@labeledIconPadding: (@horizontalPadding + 2.25em);
+
+@black: #3072B3;
+@orange: #F4CC67;
+
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
+@primaryColor: @orange;
+@secondaryColor: @black;
+
+@mini: 10px;
+@tiny: 11px;
+@small: 12px;
+@medium: 13px;
+@large: 14px;
+@big: 16px;
+@huge: 18px;
+@massive: 22px;
diff --git a/build/less/themes/packages/chubby/elements/button.variables b/build/less/themes/packages/chubby/elements/button.variables
index 1115b405b..b57130c7f 100644
--- a/build/less/themes/packages/chubby/elements/button.variables
+++ b/build/less/themes/packages/chubby/elements/button.variables
@@ -10,7 +10,7 @@
@textColor: #333333;
@verticalPadding: 1.1em;
-@horizontalPadding: 2em;
+@horizontalPadding: 2.5em;
@blue: #4A88CB;
@primaryColor: @blue;
diff --git a/server/documents/elements/button.html.eco b/server/documents/elements/button.html.eco
index 41bc7630b..0f47b4c04 100755
--- a/server/documents/elements/button.html.eco
+++ b/server/documents/elements/button.html.eco
@@ -8,7 +8,7 @@ title : 'Button'
description : 'Buttons indicate a possible user action.'
type : 'UI Element'
-themes : ['default', 'basic', 'chubby', 'github']
+themes : ['default', 'basic', 'chubby', 'amazon', 'github']
---
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index a46d590c9..d2b5519ec 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -128,7 +128,10 @@ code {
font-size: 14px;
margin: 0.25em;
padding: 0.125em 0.5em;
- vertical-align: middle;
+ vertical-align: baseline;
+}
+.ui.message .code {
+ background-color: rgba(0, 0, 0, 0.05);
}
pre code {
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index ea472712f..3c40194d0 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -50,6 +50,7 @@
background-image: @backgroundImage;
border-radius: @borderRadius;
box-shadow: @boxShadow;
+ border: @border;
user-select: none;
box-sizing: border-box;
@@ -82,6 +83,7 @@
.ui.button:focus {
background-color: @focusBackgroundColor;
background-image: @focusBackgroundImage;
+ box-shadow: @focusBoxShadow;
color: @selectedTextColor;
}
@@ -479,7 +481,7 @@
/* VK */
.ui.vk.button {
- background-color: #4D7198;
+ background-color: @vkColor;
color: @white;
background-image: @coloredBackgroundImage;
box-shadow: @coloredBoxShadow;
@@ -756,6 +758,7 @@
padding-top: (@verticalPadding + @basicIconOffset);
background-color: @labeledIconBackgroundColor;
text-align: center;
+ color: @labeledIconColor;
border-radius: @borderRadius 0px 0px @borderRadius;
line-height: 1;
diff --git a/src/themes/packages/amazon/elements/button.overrides b/src/themes/packages/amazon/elements/button.overrides
new file mode 100755
index 000000000..88422fb9c
--- /dev/null
+++ b/src/themes/packages/amazon/elements/button.overrides
@@ -0,0 +1,38 @@
+.ui.button {
+ background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+.ui.primary.button {
+ color: #111111;
+ border: 1px solid;
+ border-color: #C59F43 #AA8326 #957321;
+}
+.ui.primary.button:hover {
+ border-color: #C59F43 #AA8326 #957321;
+ color: #111111;
+}
+.ui.secondary.button {
+ border: 1px solid;
+ border-color: #3D444C #2F353B #2C3137;
+}
+.ui.secondary.button:hover {
+ border-color: #32373E #24282D #212429;
+}
+.ui.labeled.icon.buttons .button .icon,
+.ui.labeled.icon.button .icon {
+ padding-bottom: 0.4em;
+ padding-top: 0.4em;
+ position: absolute;
+ text-align: center;
+ width: 2em;
+ top: 0.3em;
+ height: auto;
+ left: 0.4em;
+ border-radius: 3px;
+}
+.ui.right.labeled.icon.buttons .button .icon,
+.ui.right.labeled.icon.button .icon {
+ left: auto;
+ right: 0.4em;
+ border-radius: 3px;
+}
diff --git a/src/themes/packages/amazon/elements/button.variables b/src/themes/packages/amazon/elements/button.variables
new file mode 100755
index 000000000..e6f0fd7d6
--- /dev/null
+++ b/src/themes/packages/amazon/elements/button.variables
@@ -0,0 +1,52 @@
+/*-------------------
+ Button Variables
+--------------------*/
+
+/* Button Variables */
+@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@textTransform: none;
+@textColor: #111111;
+@fontWeight: normal;
+
+@borderRadius: 3px;
+
+@verticalPadding: 0.75em;
+@horizontalPadding: 1.75em;
+
+@backgroundColor: #F7F8FA;
+@backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
+@boxShadow:
+ 0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
+ 0 0 0 1px #ADB2BB inset
+;
+
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
+@coloredBoxShadow:
+ 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset
+;
+
+@downBoxShadow:
+ 0 0 0 1px #ADB2BB inset,
+ 0 1px 3px rgba(0, 0, 0, 0.2) inset
+;
+
+@labeledIconBackgroundColor: #313A43;
+@labeledIconColor: #FFFFFF;
+@labeledIconBorder: transparent;
+@labeledIconPadding: (@horizontalPadding + 2.25em);
+
+@black: #444C55;
+@orange: #F4CC67;
+
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
+@primaryColor: @orange;
+@secondaryColor: @black;
+
+@mini: 10px;
+@tiny: 11px;
+@small: 12px;
+@medium: 13px;
+@large: 14px;
+@big: 16px;
+@huge: 18px;
+@massive: 22px;
diff --git a/src/themes/packages/chubby/elements/button.variables b/src/themes/packages/chubby/elements/button.variables
old mode 100644
new mode 100755
index 1115b405b..b57130c7f
--- a/src/themes/packages/chubby/elements/button.variables
+++ b/src/themes/packages/chubby/elements/button.variables
@@ -10,7 +10,7 @@
@textColor: #333333;
@verticalPadding: 1.1em;
-@horizontalPadding: 2em;
+@horizontalPadding: 2.5em;
@blue: #4A88CB;
@primaryColor: @blue;
diff --git a/src/themes/packages/default/elements/button.variables b/src/themes/packages/default/elements/button.variables
index 7111331a7..8cb883728 100755
--- a/src/themes/packages/default/elements/button.variables
+++ b/src/themes/packages/default/elements/button.variables
@@ -31,6 +31,7 @@
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset,
0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
;
+@border: none;
/* transitions */
@transition:
@@ -118,6 +119,7 @@
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
@labeledIconBorder: rgba(0, 0, 0, 0.05);
+@labeledIconColor: '';
@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;