From 1f68dae26264aeb24dbf161541cd43e221ee5505 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 21 Nov 2014 16:44:38 -0500 Subject: [PATCH] Add twitter button theme, update button variables slightly --- src/definitions/elements/button.less | 1 + src/themes/amazon/elements/button.overrides | 4 ++ src/themes/amazon/elements/button.variables | 2 - src/themes/default/elements/button.variables | 10 ++-- src/themes/default/globals/site.variables | 54 ++++++++++++------- src/themes/material/elements/button.variables | 6 ++- src/themes/material/globals/site.variables | 18 +++---- src/themes/raised/elements/button.overrides | 6 --- src/themes/raised/elements/button.variables | 11 ++-- src/themes/twitter/elements/button.overrides | 13 +++++ src/themes/twitter/elements/button.variables | 46 ++++++++++++++++ 11 files changed, 120 insertions(+), 51 deletions(-) create mode 100644 src/themes/twitter/elements/button.overrides create mode 100644 src/themes/twitter/elements/button.variables diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index ae7d0f160..dbdfb7d72 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -506,6 +506,7 @@ margin: @iconMargin; transition: @iconTransition; vertical-align: @iconVerticalAlign; + color: @iconColor; } .ui.button > .right.icon { margin: @rightIconMargin; diff --git a/src/themes/amazon/elements/button.overrides b/src/themes/amazon/elements/button.overrides index 8ca342119..0b7c1cd86 100644 --- a/src/themes/amazon/elements/button.overrides +++ b/src/themes/amazon/elements/button.overrides @@ -1,6 +1,7 @@ .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; @@ -10,6 +11,7 @@ border-color: #C59F43 #AA8326 #957321; color: #111111; } + .ui.secondary.button { border: 1px solid; border-color: #3D444C #2F353B #2C3137; @@ -17,6 +19,8 @@ .ui.secondary.button:hover { border-color: #32373E #24282D #212429; } + + .ui.labeled.icon.buttons .button .icon, .ui.labeled.icon.button .icon { padding-bottom: 0.48em; diff --git a/src/themes/amazon/elements/button.variables b/src/themes/amazon/elements/button.variables index d6347b184..7581081fc 100644 --- a/src/themes/amazon/elements/button.variables +++ b/src/themes/amazon/elements/button.variables @@ -16,7 +16,6 @@ @borderRadius: 3px; - @verticalPadding: 0.8em; @horizontalPadding: 1.75em; @@ -40,7 +39,6 @@ @labeledIconBackgroundColor: #313A43; @labeledIconColor: #FFFFFF; @labeledIconBorder: transparent; -@labeledIconPadding: (@horizontalPadding + 2.25em); @black: #444C55; @orange: #F4CC67; diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 2fd71f4f5..8a0fdf689 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -43,10 +43,12 @@ /* Icon */ @iconOpacity: 0.8; @iconDistance: 0.4em; +@iconColor: ''; @iconTransition: opacity @transitionDuration @transitionEasing; +@iconVerticalAlign: baseline; + @iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); @rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance; -@iconVerticalAlign: baseline; /* Loader */ @loaderSize: 1.2857em; @@ -97,9 +99,10 @@ /* Pressed Down */ @downBackgroundColor: #CCCCCC; @downBackgroundImage: ''; +@downPressedShadow: 0px 1px 4px 0px @borderColor inset !important; @downBoxShadow: @borderBoxShadow, - 0px 1px 4px 0px @borderColor inset !important + @downPressedShadow ; @downColor: @pressedTextColor; @@ -255,6 +258,3 @@ @animationEasing: ease; @fadeScaleHigh: 1.5; @fadeScaleLow: 0.75; - - -/* Sizing (Uses Defaults) */ diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index d5d39d1a0..d4af0d534 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -19,8 +19,8 @@ Base Sizes --------------------*/ -@emSize : 14px; -@fontSize : 14px; +@emSize : 14px; +@fontSize : 14px; /*-------------- Page Heading @@ -84,24 +84,14 @@ Sizes --------------------*/ -/* Exact pixel values @ 14px em */ -@mini : 0.7142rem; -@tiny : 0.8571rem; -@small : 0.9285rem; -@medium : 1rem; -@large : 1.1428rem; -@big : 1.2857rem; -@huge : 1.4285rem; -@massive : 1.7142rem; - -@relativeMini : 0.7142em; -@relativeTiny : 0.8571em; -@relativeSmall : 0.9285em; -@relativeMedium : 1em; -@relativeLarge : 1.1428em; -@relativeBig : 1.2857em; -@relativeHuge : 1.4285em; -@relativeMassive : 1.7142em; +@miniSize : 10px; +@tinySize : 12px; +@smallSize : 13px; +@mediumSize : @emSize; +@largeSize : 16px; +@bigSize : 18px; +@hugeSize : 20px; +@massiveSize : 24px; /*------------------- Page @@ -203,6 +193,30 @@ @imagePath : "../../themes/default/assets/images"; @fontPath : "../../themes/default/assets/fonts"; + +/*------------------- + Em Sizes +--------------------*/ + +/* Exact pixel values expressed in em */ +@mini : unit((@miniSize / @mediumSize), rem); +@tiny : unit((@tinySize / @mediumSize), rem); +@small : unit((@smallSize / @mediumSize), rem); +@medium : unit((@mediumSize / @mediumSize), rem); +@large : unit((@largeSize / @mediumSize), rem); +@big : unit((@bigSize / @mediumSize), rem); +@huge : unit((@hugeSize / @mediumSize), rem); +@massive : unit((@massiveSize / @mediumSize), rem); + +@relativeMini : unit((@miniSize / @mediumSize), em); +@relativeTiny : unit((@tinySize / @mediumSize), em); +@relativeSmall : unit((@smallSize / @mediumSize), em); +@relativeMedium : unit((@mediumSize / @mediumSize), em); +@relativeLarge : unit((@largeSize / @mediumSize), em); +@relativeBig : unit((@bigSize / @mediumSize), em); +@relativeHuge : unit((@hugeSize / @mediumSize), em); +@relativeMassive : unit((@massiveSize / @mediumSize), em); + /*------------------- Icons --------------------*/ diff --git a/src/themes/material/elements/button.variables b/src/themes/material/elements/button.variables index 97c86e83b..bfed94fb2 100644 --- a/src/themes/material/elements/button.variables +++ b/src/themes/material/elements/button.variables @@ -6,8 +6,10 @@ Element --------------------*/ -@pageFont : 'Roboto', Arial, sans-serif; -@medium : 13px; +@googleFontName : 'Roboto'; +@pageFont : 'Roboto', Arial, sans-serif; + +@medium: 13px; @verticalPadding : 0.8em; @horizontalPadding : 0.8em; diff --git a/src/themes/material/globals/site.variables b/src/themes/material/globals/site.variables index ddfef41b6..998b20887 100644 --- a/src/themes/material/globals/site.variables +++ b/src/themes/material/globals/site.variables @@ -17,6 +17,14 @@ @emSize : 14px; @fontSize : 13px; +/*-------------- + Page +---------------*/ + +@pageBackground : #F9F9F9; +@lineHeight : 1.33; +@textColor : #212121; + /*-------------- Page Heading ---------------*/ @@ -81,16 +89,6 @@ @lightPrimaryColor : @lightBlue; @lightSecondaryColor : @lightGrey; -/*------------------- - Page ---------------------*/ - -@pageBackground : #F7F7F7; -@pageOverflowX : hidden; - -@lineHeight : 1.33; -@textColor : #212121; - /*------------------- Paragraph --------------------*/ diff --git a/src/themes/raised/elements/button.overrides b/src/themes/raised/elements/button.overrides index fcaa04c23..c5c53367f 100644 --- a/src/themes/raised/elements/button.overrides +++ b/src/themes/raised/elements/button.overrides @@ -1,9 +1,3 @@ /******************************* Overrides *******************************/ - -.ui.button.active:not(.basic), -.ui.button:active { - padding-top: @verticalPadding + (@shadowOffset / 2); - padding-bottom: @verticalPadding + (@shadowOffset / 2); -} \ No newline at end of file diff --git a/src/themes/raised/elements/button.variables b/src/themes/raised/elements/button.variables index 6e4db620c..44a7c48d0 100644 --- a/src/themes/raised/elements/button.variables +++ b/src/themes/raised/elements/button.variables @@ -6,18 +6,17 @@ Element --------------------*/ -/* Shadow */ -@verticalAlign: middle; @backgroundColor: #F8F8F8; @backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); -@shadowDistance: 0.3em; -@borderBoxShadowColor: @borderColor; +@verticalAlign: middle; +@borderRadius: 0.4em; +/* Shadow */ +@shadowDistance: 0.3em; @verticalPadding: 1em; @horizontalPadding: 2em; -@borderRadius: 0.4em; -/* transitions */ +/* transition box shadow as well */ @transition: opacity @transitionDuration @transitionEasing, background-color @transitionDuration @transitionEasing, diff --git a/src/themes/twitter/elements/button.overrides b/src/themes/twitter/elements/button.overrides new file mode 100644 index 000000000..44a0f45e8 --- /dev/null +++ b/src/themes/twitter/elements/button.overrides @@ -0,0 +1,13 @@ +/******************************* + Overrides +*******************************/ + +.ui.primary.button { + box-shadow: + 0px 0px 0px 1px #3B88C3 inset, + 0 2px 0 rgba(255, 255, 255, 0.15) inset + ; +} +.ui.primary.button > .icon { + color: #FFFFFF; +} diff --git a/src/themes/twitter/elements/button.variables b/src/themes/twitter/elements/button.variables new file mode 100644 index 000000000..190a89a6a --- /dev/null +++ b/src/themes/twitter/elements/button.variables @@ -0,0 +1,46 @@ +/*------------------- + Global Variables +--------------------*/ + +@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; +@textColor: #66757F; +@blue: #55ACEE; + +/*------------------- + Button Variables +--------------------*/ + +@backgroundColor: #F5F8FA; +@backgroundImage: linear-gradient(@white, @backgroundColor); +@color: #66757F; +@borderBoxShadowColor: #E1E8ED; + +@textTransform: none; +@fontWeight: bold; +@textColor: #333333; + +@horizontalPadding: 1.284em; +@verticalPadding: 0.8571em; + +@iconColor: #55ACEE; + +@activeBackgroundColor: rgba(0, 0, 0, 0.1); + +@primaryColor: @blue; +@coloredBackgroundImage: @subtleGradient; + + +/*------------------- + States +--------------------*/ + +@hoverBackgroundColor: #E1E8ED; +@hoverBackgroundImage: linear-gradient(@white, @hoverBackgroundColor); +@hoverColor: #292F33; + +@downBackgroundColor: #E1E8ED; +@downColor: #292F33; +@downPressedShadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset; + +@labeledIconBackgroundColor: rgba(85, 172, 238, 0.05); +@labeledIconBorder: @borderBoxShadowColor; \ No newline at end of file