From 3e7eda690f0c3c2f10e9647451c5e646d3d00ced Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 25 Apr 2014 17:53:25 -0400 Subject: [PATCH] Creates amazon button theme --- .../packages/amazon/elements/button.overrides | 0 .../packages/amazon/elements/button.variables | 71 +++++++++++++++++++ .../packages/chubby/elements/button.variables | 2 +- server/documents/elements/button.html.eco | 2 +- server/files/stylesheets/semantic.css | 5 +- src/definitions/elements/button.less | 5 +- .../packages/amazon/elements/button.overrides | 38 ++++++++++ .../packages/amazon/elements/button.variables | 52 ++++++++++++++ .../packages/chubby/elements/button.variables | 2 +- .../default/elements/button.variables | 2 + 10 files changed, 174 insertions(+), 5 deletions(-) create mode 100644 build/less/themes/packages/amazon/elements/button.overrides create mode 100644 build/less/themes/packages/amazon/elements/button.variables create mode 100755 src/themes/packages/amazon/elements/button.overrides create mode 100755 src/themes/packages/amazon/elements/button.variables mode change 100644 => 100755 src/themes/packages/chubby/elements/button.variables 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;