Creates amazon button theme

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;

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;

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']
 ---
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />
 <script src="/javascript/button.js"></script>

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 {

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;

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;
+}

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;

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;

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;