Browse Source

Creates amazon button theme

pull/912/head
jlukic 11 years ago
parent
commit
3e7eda690f
10 changed files with 174 additions and 5 deletions
  1. 0
      build/less/themes/packages/amazon/elements/button.overrides
  2. 71
      build/less/themes/packages/amazon/elements/button.variables
  3. 2
      build/less/themes/packages/chubby/elements/button.variables
  4. 2
      server/documents/elements/button.html.eco
  5. 5
      server/files/stylesheets/semantic.css
  6. 5
      src/definitions/elements/button.less
  7. 38
      src/themes/packages/amazon/elements/button.overrides
  8. 52
      src/themes/packages/amazon/elements/button.variables
  9. 2
      src/themes/packages/chubby/elements/button.variables
  10. 2
      src/themes/packages/default/elements/button.variables

0
build/less/themes/packages/amazon/elements/button.overrides

71
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;

2
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;

2
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>

5
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 {

5
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;

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

52
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;

2
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;

2
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;

Loading…
Cancel
Save