From 1012f948e95e95fe0aeb1bcaf766426ad4195631 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 21 Jan 2014 16:44:20 -0500 Subject: [PATCH] Adds some new button themes --- src/themes/basic/elements/button.variables | 2 + src/themes/chubby/elements/button.overrides | 24 +++++++++ src/themes/chubby/elements/button.variables | 50 +++++++++++++++++++ src/themes/default/collections/menu.variables | 2 +- src/themes/default/elements/button.variables | 42 ++++++++++++---- src/themes/default/elements/icon.overrides | 6 +-- src/themes/github/elements/button.variables | 9 +++- 7 files changed, 118 insertions(+), 17 deletions(-) create mode 100755 src/themes/chubby/elements/button.overrides create mode 100755 src/themes/chubby/elements/button.variables diff --git a/src/themes/basic/elements/button.variables b/src/themes/basic/elements/button.variables index 651b71753..751944503 100755 --- a/src/themes/basic/elements/button.variables +++ b/src/themes/basic/elements/button.variables @@ -7,6 +7,8 @@ @fontWeight: normal; @textColor: #333333; +@primaryColor: #333333; + @borderRadius: 0.25em; @backgroundColor: #EEEEEE; diff --git a/src/themes/chubby/elements/button.overrides b/src/themes/chubby/elements/button.overrides new file mode 100755 index 000000000..dee4fdc52 --- /dev/null +++ b/src/themes/chubby/elements/button.overrides @@ -0,0 +1,24 @@ +/******************************* + Overrides +*******************************/ +@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); + +.ui.button { + font-family: 'Open Sans Condensed', sans-serif; +} + +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + box-shadow: + -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, + -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset + ; +} + +.ui.right.labeled.icon.buttons .button .icon, +.ui.right.labeled.icon.button .icon { + box-shadow: + 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, + 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset + ; +} \ No newline at end of file diff --git a/src/themes/chubby/elements/button.variables b/src/themes/chubby/elements/button.variables new file mode 100755 index 000000000..daf277816 --- /dev/null +++ b/src/themes/chubby/elements/button.variables @@ -0,0 +1,50 @@ +/*------------------- + Button Variables +--------------------*/ + +/* Button Variables */ +@textTransform: none; +@fontWeight: normal; +@textColor: #333333; + +@verticalPadding: 1.1em; +@horizontalPadding: 2em; + +@blue: #4A88CB; +@primaryColor: @blue; + +@borderRadius: 0.25em; + +@backgroundColor: #E6EAED; +@backgroundImage: none; +@boxShadow: none; + +@hoverBackgroundColor: #DDDDDD; +@hoverBackgroundImage: none; +@hoverBoxShadow: none; + +@downBackgroundColor: #D0D0D0; +@downBackgroundImage: none; +@downBoxShadow: none; + +@activeBackgroundColor: #CCCCCC; +@activeBackgroundImage: none; +@activeBoxShadow: none; + +@verticalBoxShadow: none; + +@loadingBackgroundColor: #F0F0F0; + +@compactVerticalPadding: (@verticalPadding * 0.5); +@compactHorizontalPadding: (@horizontalPadding * 0.5); + +@labeledIconBackgroundColor: transparent; + +@mini: 0.7rem; +@tiny: 0.75rem; +@small: 0.8rem; +@medium: 0.85rem; +@large: 0.92rem; +@big: 1rem; +@huge: 1.125rem; +@massive: 1.2rem; diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 6677b40ed..1eafc4170 100755 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -7,7 +7,7 @@ // @invertedUnselectedTextColor /*------------------- - Menu Variables + Collection --------------------*/ @margin: 1rem 0rem; diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index c4ffde2cc..c4e50c06d 100755 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -11,35 +11,42 @@ // @textColor, @invertedTextColor /*------------------- - Button Variables + Element --------------------*/ @margin: 0.25em 0em; @textTransform: uppercase; + @fontWeight: bold; @textColor: rgba(0, 0, 0, 0.6); - @textShadow: none; @invertedTextShadow: none; @borderRadius: 0.25em; -@shadowDistance: 0em; -@shadowOffset: (@shadowDistance / 2); +@backgroundColor: #FAFAFA; +@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); +@boxShadow: + 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, + 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset +; +@coloredBoxShadow: none; + +/* Padding */ @verticalPadding: 0.8em; @horizontalPadding: 1.5em; @compactVerticalPadding: (@verticalPadding * 0.75); @compactHorizontalPadding: (@horizontalPadding * 0.75); -@backgroundColor: #FAFAFA; -@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); +/* Shadow */ +@shadowDistance: 0em; +@shadowOffset: (@shadowDistance / 2); -@boxShadow: - 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, - 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset -; +/*------------------- + States +--------------------*/ @hoverBackgroundColor: ''; @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); @@ -55,6 +62,10 @@ @loadingBackgroundColor: #FFFFFF; +/*------------------- + Types +--------------------*/ + @iconMargin: 0.6em; @iconHoverOpacity: 0.85; @iconButtonOpacity: 0.9; @@ -64,7 +75,9 @@ @labeledIconPadding: (@horizontalPadding + @labeledIconWidth); @labeledIconBorder: rgba(0, 0, 0, 0.05); -@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; +/*------------------- + Variations +--------------------*/ @floatedMargin: 0.25em; @@ -81,3 +94,10 @@ @big: 1.25rem; @huge: 1.375rem; @massive: 1.5rem; + +/*------------------- + Groups +--------------------*/ + +@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; + diff --git a/src/themes/default/elements/icon.overrides b/src/themes/default/elements/icon.overrides index 562fd8a9d..c7b3ccb41 100755 --- a/src/themes/default/elements/icon.overrides +++ b/src/themes/default/elements/icon.overrides @@ -384,13 +384,13 @@ i.icon.signup:before { content: "\f044"; } /* stars are usually consecutive */ i.icon.star { width: auto; - margin: 0em; + margin: 0em !important; } /* left side icons */ i.icon.left { width: auto; - margin: 0em @directionMargin 0em 0em; + margin: 0em @directionMargin 0em 0em !important; } /* right side icons */ @@ -398,5 +398,5 @@ i.icon.download, i.icon.search, i.icon.right { width: auto; - margin: 0em 0em 0em @directionMargin; + margin: 0em 0em 0em @directionMargin !important; } diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables index 7ca6bb1a2..53f07f626 100755 --- a/src/themes/github/elements/button.variables +++ b/src/themes/github/elements/button.variables @@ -23,6 +23,11 @@ 0 0 0 1px rgba(0, 0, 0, 0.13) inset, 0 1px 3px rgba(0, 0, 0, 0.05) ; +@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)); @@ -33,14 +38,14 @@ @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 + 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 + 0 3px 5px rgba(0, 0, 0, 0.1) inset !important ; @labeledIconBackgroundColor: transparent;