From 641a837a99ebd5775967c87fb6a7b98beeb05c96 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 1 Sep 2015 19:32:52 -0400 Subject: [PATCH] Revert themes until LESS.js inheritance works correctly in browser for theme preview --- src/themes/amazon/elements/button.overrides | 32 +++---- src/themes/amazon/elements/button.variables | 29 ++----- src/themes/github/collections/menu.overrides | 39 +-------- src/themes/github/collections/menu.variables | 69 ++++++--------- .../github/collections/message.overrides | 11 +++ .../github/collections/message.variables | 14 ++- src/themes/github/elements/button.variables | 85 ++++++++----------- 7 files changed, 108 insertions(+), 171 deletions(-) diff --git a/src/themes/amazon/elements/button.overrides b/src/themes/amazon/elements/button.overrides index 55249ada2..9efc5e440 100644 --- a/src/themes/amazon/elements/button.overrides +++ b/src/themes/amazon/elements/button.overrides @@ -1,37 +1,37 @@ .ui.button { - border: 1px solid; - border-color: #ADB1B8 #A2A6AC #8D9096; + background-image: linear-gradient(center top , #F7F8FA, #E7E9EC) repeat scroll 0 0 rgba(0, 0, 0, 0); } .ui.primary.button { - border-color: #A88734 #9C7E31 #846A29; + color: #111111; + border: 1px solid; + border-color: #C59F43 #AA8326 #957321; } .ui.primary.button:hover { - border-color: #9C7E31 #90742D #786025; + 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.basic.button { - border-width: 0px; -} -.ui.positive.button { - border-color: #3E8E22; -} - -/* Special Icons for Amazon */ .ui.labeled.icon.buttons .button > .icon, .ui.labeled.icon.button > .icon { - margin: @relative2px; - height: ~"calc(100% - "@relative4px~")"; - width: @relativeHuge; - border-radius: @borderRadius; + padding-bottom: 0.48em; + padding-top: 0.48em; + position: absolute; + text-align: center; + width: 2em; + height: 2em; + top: 0.35em; + left: 0.4em; + border-radius: 3px; } .ui.right.labeled.icon.buttons .button > .icon, .ui.right.labeled.icon.button > .icon { diff --git a/src/themes/amazon/elements/button.variables b/src/themes/amazon/elements/button.variables index 0de49a62a..d4762a34b 100644 --- a/src/themes/amazon/elements/button.variables +++ b/src/themes/amazon/elements/button.variables @@ -2,13 +2,8 @@ Button Variables --------------------*/ -/* Globals */ -@pageFont: 'Helvetica Neue', Helvetica, Arial, sans-serif; -@black: #444C55; -@orange: #FDE07B; -@borderRadius: 3px; - /* Button Variables */ +@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; @textTransform: none; @textColor: #111111; @fontWeight: normal; @@ -19,20 +14,17 @@ background @defaultDuration @defaultEasing ; -@borderColor: #A2A6AC; -@selectedBorderColor: #8D9096; - @hoverBackgroundColor: #E0E0E0; -@verticalPadding: @relative7px; -@horizontalPadding: @relativeMedium; +@borderRadius: 3px; +@verticalPadding: 0.8em; +@horizontalPadding: 1.75em; @backgroundColor: #F7F8FA; @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - @boxShadow: - @borderBoxShadow, - 0 1px 0 1px rgba(255, 255, 255, 0.3) inset + 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)); @@ -41,6 +33,7 @@ ; @downBoxShadow: + 0 0 0 1px #ADB2BB inset, 0 1px 3px rgba(0, 0, 0, 0.2) inset ; @@ -48,15 +41,11 @@ @labeledIconColor: #FFFFFF; @labeledIconBorder: transparent; -@basicBoxShadow: 0px 0px 0px 1px @borderColor inset; - - -/* Labeled */ -@labeledLabelBorderColor: #ADB1B8; +@black: #444C55; +@orange: #F4CC67; @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); @primaryColor: @orange; -@primaryTextColor: @textColor; @secondaryColor: @black; @mini: 10px; diff --git a/src/themes/github/collections/menu.overrides b/src/themes/github/collections/menu.overrides index 9f050bd76..06d7827dd 100644 --- a/src/themes/github/collections/menu.overrides +++ b/src/themes/github/collections/menu.overrides @@ -1,38 +1,7 @@ /******************************* - Site Overrides + Overrides *******************************/ -/*-------------- - Tabular ----------------*/ - -.ui.vertical.tabular.menu { - padding: @medium 0em; -} -.ui.vertical.tabular.menu .item { - margin-top: @relative5px; - margin-bottom: @relative5px; - border-radius: 0px; -} - -/* Special Hover */ -.ui.vertical.tabular.menu a.item:not(.active):hover { - box-shadow: 2px 0px 0px #CCCCCC inset; -} -.ui.vertical.tabular.menu a.item:not(.active):hover .icon { - opacity: 1; -} - -/* Special Active */ -.ui.vertical.tabular.menu:not(.right) .active.item { - border-left: 3px solid @orange !important; - box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.05); -} - -/* Right Side */ -.ui.vertical.right.tabular.menu { - background: linear-gradient(to right, #f6f6f6 0%, #FFFFFF 8px) transparent; -} -.ui.vertical.right.tabular.menu .active.item { - border-right: 3px solid @orange !important; -} +.ui.menu .item > .label { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} \ No newline at end of file diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables index e7d03bb0c..14793204d 100644 --- a/src/themes/github/collections/menu.variables +++ b/src/themes/github/collections/menu.variables @@ -2,66 +2,49 @@ Collection --------------------*/ -/* Menu */ -@boxShadow: none; -@dropdownIconDistance: @relative12px; -@inputVerticalPadding: @relative6px; +@itemVerticalPadding: 1em; +@itemHorizontalPadding: 1.25em; -@itemTextColor: #767676; -@iconOpacity: 0.5; +@background: #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)); +@fontWeight: normal; -@dropdownHoveredItemBackground: #4078C0; -@dropdownHoveredItemColor: @white; +@activeBorderSize: 0em; -@verticalIconFloat: none; -@verticalIconMargin: 0em @relative1px 0em 0em; +@hoverBackground: rgba(0, 0, 0, 0.02); +@downBackground: rgba(0, 0, 0, 0.06); -/* States */ -@hoverItemBackground: none transparent; -@hoverItemTextColor: @linkHoverColor; -@pressedItemBackground: @hoverItemBackground; +@activeBackground: rgba(0, 0, 0, 0.04); +@activeHoverBackground: rgba(0, 0, 0, 0.04); -/*------------------- - Types ---------------------*/ -/* Tabular */ -@tabularBorderColor: #EEEEEE; -@tabularVerticalBackground: linear-gradient(to left, #f6f6f6 0%, #fff 8px) transparent; -@tabularVerticalPadding: @relative9px; -@tabularHorizontalPadding: @relative10px; -@tabularTextColor: @linkColor; +@headerBackground: rgba(0, 0, 0, 0.08); -@tabularHoveredTextColor: @linkHoverColor; -@tabularActiveBoxShadow: 1px 1px 3px rgba(0, 0, 0, 0.05); +@subMenuMargin: 0.5em -0.6em 0; +@subMenuHorizontalPadding: 0.7em; -/* Text Menu */ -@textMenuItemSpacing: @relative8px; -@textMenuItemColor: #333333; -@textMenuItemFontWeight: normal; +@arrowHoverColor: #EEEEEE; +@arrowActiveColor: #EEEEEE; +@arrowVerticalHoverColor: #F4F4F4; +@arrowVerticalActiveColor: #F4F4F4; -/* Pagination */ -@paginationMinWidth: 3.5em; +@dividerBackground: #E8E8E8; +@verticalDividerBackground: #E8E8E8; /*------------------- Elements --------------------*/ -@dropdownMenuPadding: @relative5px 0px; -@dropdownMenuBoxShadow: 0px 3px 12px rgba(0, 0, 0, 0.15); +@buttonOffset: -0.15em; +@buttonVerticalPadding: 0.75em; -@dropdownItemPadding: @relative6px @relative14px; +/*------------------- + Types +--------------------*/ -/* Label */ -@labelBackground: #EEEEEE; -@labelOffset: 0px; -@labelTextColor: #666666; -@labelVerticalPadding: @relative2px; -@labelHorizontalPadding: @relative5px; +@paginationMinWidth: 3.5em; -/* Button */ -@buttonOffset: -0.15em; -@buttonVerticalPadding: 0.75em; +@tieredActiveItemBackground: #F5F5F5; +@tieredActiveMenuBackground: #F5F5F5; /*------------------- Variations diff --git a/src/themes/github/collections/message.overrides b/src/themes/github/collections/message.overrides index e69de29bb..01519ed71 100644 --- a/src/themes/github/collections/message.overrides +++ b/src/themes/github/collections/message.overrides @@ -0,0 +1,11 @@ +.ui.info.message { + background: linear-gradient(#D8EBF8, #D0E3EF); +} +.ui.error.message { + background: linear-gradient(#F8D8D8, #EFD0D0); +} +.ui.warning.message { + background: linear-gradient(#FFE3C8, #F5DAC0); +} +.ui.success.message { +} diff --git a/src/themes/github/collections/message.variables b/src/themes/github/collections/message.variables index 4c1092101..165eef68f 100644 --- a/src/themes/github/collections/message.variables +++ b/src/themes/github/collections/message.variables @@ -1,4 +1,4 @@ -@background: #FEFEFE; +@background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE; @boxShadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset @@ -8,19 +8,17 @@ @headerFontSize: 1.15em; +@infoTextColor: #264C72; +@warningTextColor: #613A00; +@errorTextColor: #991111; + @floatingBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset ; -@infoBackgroundColor: #E6F1F6; - -@infoTextColor: #4E575B; -@warningTextColor: #613A00; -@errorTextColor: #991111; - -@infoBorderColor: #B7C7CF; +@infoBorderColor: #97C1DA; @errorBorderColor: #DA9797; @warningBorderColor: #DCA874; diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables index c4edca42b..3967fa58d 100644 --- a/src/themes/github/elements/button.variables +++ b/src/themes/github/elements/button.variables @@ -1,62 +1,40 @@ -/*------------------- - Globals ---------------------*/ - -/* These are also defined in site.variables but allow for stand-alone usage */ - - - /*------------------- Button Variables --------------------*/ -/* Sizes */ -@mini: 10px; -@tiny: 11px; -@small: 12px; -@medium: 13px; -@large: 15px; -@big: 16px; -@huge: 18px; -@massive: 24px; - -/* Text Style */ +/* Button Variables */ +@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; @textTransform: none; @fontWeight: bold; @textColor: #333333; -@invertedTextShadow: 0 -1px 0 rgba(0, 0, 0, 0.15); -@transition: - opacity @defaultDuration @defaultEasing, - background @defaultDuration @defaultEasing, - color @defaultDuration @defaultEasing, - background @defaultDuration @defaultEasing -; +@textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9); +@invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25); -@iconOpacity: 1; -@iconHeight: 13px; -@iconDistance: @relative4px; -@lineHeight: 1.53184em; +@borderRadius: @relativeBorderRadius; -@verticalPadding: @relative7px; -@horizontalPadding: @relative12px; +@verticalPadding: 0.75em; +@horizontalPadding: 1.15em; -@backgroundColor: #FBFBFB; -@backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05)); -@borderBoxShadowColor: rgba(0, 0, 0, 0.13); +@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: @boxShadow; +@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: #F0F0F0; -@hoverBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); +@hoverBackgroundColor: #E0E0E0; +@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); @hoverBoxShadow: @boxShadow; -@focusBoxShadow: - 0px 0px 0px 1px #51A7E8, - 0 0 5px rgba(81, 167, 232, 0.5) -; - @downBackgroundColor: ''; @downBackgroundImage: ''; @downBoxShadow: @@ -76,15 +54,24 @@ @labeledIconBorder: transparent; @labeledIconPadding: (@horizontalPadding + 2.25em); -@labeledLabelFontSize: @relative11px; -@labeledLabelAlign: center; - @basicFontWeight: bold; @basicTextColor: @linkColor; @basicHoverTextColor: @linkHoverColor; @basicHoverBackground: #E0E0E0; - -@positiveColor: #84D767; -@positiveColorHover: #5DC438; +@blue: #3072B3; +@green: #60B044; +@black: #5D5D5D; + +@primaryColor: @blue; +@secondaryColor: @black; + +@mini: 0.6rem; +@tiny: 0.7rem; +@small: 0.85rem; +@medium: 0.92rem; +@large: 1rem; +@big: 1.125rem; +@huge: 1.25rem; +@massive: 1.3rem;