From 542d20651c1a37ff28ddcee8f552710a013c5cb8 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 31 Oct 2013 16:43:08 -0400 Subject: [PATCH] iteration on button variables --- src/elements/button.less | 237 ++++++++++++++++++++++----------------- src/global.variables | 219 ++++++++++++++++++++---------------- 2 files changed, 257 insertions(+), 199 deletions(-) diff --git a/src/elements/button.less b/src/elements/button.less index 86418f4b8..517ef0fd1 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -26,34 +26,40 @@ // @offWhite // @white -/*------------------- - Modified Globals ---------------------*/ -/*------------------- - Button Variables ---------------------*/ +/* Button Variables */ +@textTransform: uppercase; +@fontWeight: bold; +@textColor: rgba(0, 0, 0, 0.6); + +@verticalPadding: 0.8em; +@horizontalPadding: 1.5em; @padding: 0.8em 1.5em 0.8665em; @iconPadding: 0.8em 0.8em 0.8665em; -@compactPadding: 0.6em 0.8em 0.73em; +@compactVerticalPadding: 0.6em; +@compactHorizontalPadding: 0.8em; + +@compactPadding: 0.6em 0.8em 0.6665em; @compactIconPadding: 0.6em 0.6em 0.73em; @borderRadius: 0.25em; @backgroundColor: #FAFAFA; @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); + +@shadowDistance: 0.133em; @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, - 0px -0.133em 0px 0px rgba(0, 0, 0, 0.1) inset + 0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset ; -@hoverBackgroundColor: #FAFAFA; +@hoverBackgroundColor: ''; @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); @hoverBoxShadow: ''; -@downBackgroundColor: ''; +@downBackgroundColor: #F1F1F1; @downBackgroundImage: ''; @downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; @@ -61,6 +67,22 @@ @activeBackgroundImage: none; @activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; +@iconMargin: 0.6em; +@iconHoverOpacity: 0.85; +@iconButtonOpacity: 0.9; + +@animationDuration: 0.3s; +@animationEasing: ease; + +@mini: 0.8rem; +@tiny: 0.875rem; +@small: 0.875rem; +@medium: 1rem; +@large: 1.125rem; +@big: 1.25rem; +@huge: 1.375rem; +@massive: 1.5rem; + /******************************* Button @@ -76,16 +98,16 @@ outline: none; border: none; - background-color: #FAFAFA; + background-color: @backgroundColor; color: @textColor; margin: 0em; - padding: @padding; + padding: @verticalPadding @horizontalPadding ( @verticalPadding + (@shadowDistance / 2) ); font-size: 1rem; - text-transform: uppercase; + text-transform: @textTransform; + font-weight: @fontWeight; line-height: 1; - font-weight: bold; font-style: normal; text-align: center; text-decoration: none; @@ -97,11 +119,11 @@ user-select: none; box-sizing: border-box; transition: - opacity 0.25s ease, - background-color 0.25s ease, - color 0.25s ease, - background 0.25s ease, - box-shadow 0.25s ease + opacity @transitionDuration @transitionEasing, + background-color @transitionDuration @transitionEasing, + color @transitionDuration @transitionEasing, + background @transitionDuration @transitionEasing, + box-shadow @transitionDuration @transitionEasing ; } @@ -112,20 +134,6 @@ States *******************************/ - -/*-------------- - Active ----------------*/ - -.ui.buttons .active.button, -.ui.active.button { - background-color: @activeBackgroundColor; - background-image: @activeBackgroundImage; - box-shadow: @activeBoxShadow; - color: @textColor; -} - - /*-------------- Hover ---------------*/ @@ -133,15 +141,12 @@ .ui.button:not(.loading):hover { background-color: @hoverBackgroundColor; background-image: @hoverBackgroundImage; - color: @textColor; -} -.ui.button.active:hover { - background-image: none; + color: @selectedTextColor; } .ui.button:hover .icon, .ui.button.hover .icon { - opacity: 0.85; + opacity: @iconHoverOpacity; } /*-------------- @@ -150,12 +155,34 @@ .ui.button:not(.loading):active, .ui.active.button:not(.loading):active { - background-color: @hoverBackgroundColor; - background-image: @hoverBackgroundImage; - color: @textColor; + background-color: @downBackgroundColor; + background-image: @downBackgroundImage; + color: @selectedTextColor; box-shadow: @downBoxShadow; } +/*-------------- + Active +---------------*/ + +.ui.buttons .active.button, +.ui.active.button { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; + box-shadow: @activeBoxShadow; + color: @textColor; +} + +.ui.button.active:hover { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; +} +.ui.button.active:active { + background-color: @activeBackgroundColor !important; + background-image: @activeBackgroundImage !important; +} + + /*-------------- Loading ---------------*/ @@ -177,7 +204,6 @@ content: ''; background: transparent url(~"@{imageFolder}/loader-mini.gif") no-repeat 50% 50%; } - .ui.labeled.icon.loading.button .icon { background-color: transparent; box-shadow: none; @@ -190,10 +216,10 @@ .ui.disabled.button, .ui.disabled.button:hover, .ui.disabled.button.active { - background-color: #DDDDDD !important; cursor: default; - color: rgba(0, 0, 0, 0.5) !important; - opacity: 0.3 !important; + background-color: @lightGrey !important; + color: @lightTextColor !important; + opacity: @disabledOpacity !important; background-image: none !important; box-shadow: none !important; } @@ -222,7 +248,7 @@ /* Horizontal */ .ui.animated.button .visible.content, .ui.animated.button .hidden.content { - transition: right 0.3s ease 0s; + transition: right @animationDuration @animationEasing 0s; } .ui.animated.button .visible.content { left: auto; @@ -246,7 +272,7 @@ /* Vertical */ .ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .hidden.content { - transition: top 0.3s ease 0s, transform 0.3s ease 0s; + transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing; } .ui.vertical.animated.button .visible.content { transform: translateY(0%); @@ -269,7 +295,7 @@ /* Fade */ .ui.fade.animated.button .visible.content, .ui.fade.animated.button .hidden.content { - transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; + transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing; } .ui.fade.animated.button .visible.content { left: auto; @@ -303,19 +329,22 @@ .ui.primary.buttons .button, .ui.primary.button { - background-color: #D95C5C; + background-color: @primaryColor; color: #FFFFFF; } .ui.primary.buttons .button:hover, -.ui.primary.button:hover, -.ui.primary.buttons .active.button, -.ui.primary.button.active { - background-color: #E75859; +.ui.primary.button:hover { + background-color: @primaryColorHover; color: #FFFFFF; } .ui.primary.buttons .button:active, .ui.primary.button:active { - background-color: #D24B4C; + background-color: @primaryColorDown; + color: #FFFFFF; +} +.ui.primary.buttons .active.button, +.ui.primary.button.active { + background-color: @primaryColorActive; color: #FFFFFF; } @@ -325,19 +354,22 @@ .ui.secondary.buttons .button, .ui.secondary.button { - background-color: #00B5AD; + background-color: @secondaryColor; color: #FFFFFF; } .ui.secondary.buttons .button:hover, -.ui.secondary.button:hover, -.ui.secondary.buttons .active.button, -.ui.secondary.button.active { - background-color: #009A93; +.ui.secondary.button:hover { + background-color: @secondaryColorHover; color: #FFFFFF; } .ui.secondary.buttons .button:active, .ui.secondary.button:active { - background-color: #00847E; + background-color: @secondaryColorDown; + color: #FFFFFF; +} +.ui.secondary.buttons .active.button, +.ui.secondary.button.active { + background-color: @secondaryColorActive; color: #FFFFFF; } @@ -347,100 +379,100 @@ /* Facebook */ .ui.facebook.button { - background-color: #3B579D; + background-color: @facebookColor; color: #FFFFFF; } .ui.facebook.button:hover { - background-color: #3A59A9; + background-color: @facebookHoverColor; color: #FFFFFF; } .ui.facebook.button:active { - background-color: #334F95; + background-color: @facebookDownColor; color: #FFFFFF; } /* Twitter */ .ui.twitter.button { - background-color: #4092CC; + background-color: @twitterColor; color: #FFFFFF; } .ui.twitter.button:hover { - background-color: #399ADE; + background-color: @twitterHoverColor; color: #FFFFFF; } .ui.twitter.button:active { - background-color: #3283BC; + background-color: @twitterDownColor; color: #FFFFFF; } /* Google Plus */ .ui.google.plus.button { - background-color: #D34836; + background-color: @googlePlusColor; color: #FFFFFF; } .ui.google.plus.button:hover { - background-color: #E3432E; + background-color: @googlePlusHoverColor; color: #FFFFFF; } .ui.google.plus.button:active { - background-color: #CA3A27; + background-color: @googlePlusDownColor; color: #FFFFFF; } /* Linked In */ .ui.linkedin.button { - background-color: #1F88BE; + background-color: @linkedInColor; color: #FFFFFF; } .ui.linkedin.button:hover { - background-color: #1394D6; + background-color: @linkedInHoverColor; color: #FFFFFF; } .ui.linkedin.button:active { - background-color: #1179AE; + background-color: @linkedInDownColor; color: #FFFFFF; } /* YouTube */ .ui.youtube.button { - background-color: #CC181E; + background-color: @youtubeColor; color: #FFFFFF; } .ui.youtube.button:hover { - background-color: #DF0209; + background-color: @youtubeHoverColor; color: #FFFFFF; } .ui.youtube.button:active { - background-color: #A50006; + background-color: @youtubeDownColor; color: #FFFFFF; } /* Instagram */ .ui.instagram.button { - background-color: #49769C; + background-color: @instagramColor; color: #FFFFFF; } .ui.instagram.button:hover { - background-color: #4781B1; + background-color: @instagramHoverColor; color: #FFFFFF; } .ui.instagram.button:active { - background-color: #38658A; + background-color: @instagramDownColor; color: #FFFFFF; } /* Pinterest */ .ui.pinterest.button { - background-color: #00ACED; + background-color: @pinterestColor; color: #FFFFFF; } .ui.pinterest.button:hover { - background-color: #00B9FF; + background-color: @pinterestHoverColor; color: #FFFFFF; } .ui.pinterest.button:active { - background-color: #009EDA; + background-color: @pinterestDownColor; color: #FFFFFF; } @@ -449,24 +481,24 @@ ---------------*/ .ui.button > .icon { - margin-right: 0.6em; + margin-right: @iconMargin; line-height: 1; -webkit-transition: - opacity 0.1s ease + opacity 0.1s @transitionEasing ; -moz-transition: - opacity 0.1s ease + opacity 0.1s @transitionEasing ; -o-transition: - opacity 0.1s ease + opacity 0.1s @transitionEasing ; -ms-transition: - opacity 0.1s ease + opacity 0.1s @transitionEasing ; transition: - opacity 0.1s ease + opacity 0.1s @transitionEasing ; } @@ -497,15 +529,10 @@ Sizes --------------------*/ -.ui.buttons .button, -.ui.button { - font-size: 1rem; -} - .ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button { - font-size: 0.8rem; + font-size: @mini; } .ui.mini.buttons .button, .ui.mini.button { @@ -515,11 +542,10 @@ .ui.mini.buttons .icon.button { padding: @compactIconPadding; } - .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button { - font-size: 0.875rem; + font-size: @tiny; } .ui.tiny.buttons .button, .ui.tiny.buttons .button, @@ -530,33 +556,34 @@ .ui.tiny.buttons .icon.button { padding: @compactIconPadding; } - .ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button { - font-size: 0.875rem; + font-size: @small; +} +.ui.buttons .button, +.ui.button { + font-size: @medium; } - .ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button { - font-size: 1.125rem; + font-size: @large; } .ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button { - font-size: 1.25rem; + font-size: @big; } .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button { - font-size: 1.375rem; + font-size: @huge; } .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button { - font-size: 1.5rem; - font-weight: bold; + font-size: @massive; } /* Or resize */ @@ -605,11 +632,11 @@ .ui.icon.buttons .button, .ui.icon.button { - padding: 0.8em 0.8em 0.8665em; + padding: @verticalPadding @verticalPadding ( @verticalPadding + (@shadowDistance / 2) ); } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { - opacity: 0.9; + opacity: @iconButtonOpacity; margin: 0em; vertical-align: top; } diff --git a/src/global.variables b/src/global.variables index 3fc9af27a..b8158193e 100755 --- a/src/global.variables +++ b/src/global.variables @@ -78,9 +78,21 @@ @textColor : rgba(0, 0, 0, 0.7); @lightTextColor : rgba(0, 0, 0, 0.4); -@activeTextColor : rgba(0, 0, 0, 0.8); +@selectedTextColor : rgba(0, 0, 0, 0.8); @disabledTextColor : rgba(0, 0, 0, 0.2); +/*------------------- + Brand Colors +--------------------*/ + +@facebookColor : #3B579D; +@twitterColor : #4092CC; +@googlePlusColor : #D34836; +@linkedInColor : #1F88BE; +@youtubeColor : #CC181E; +@instagramColor : #49769C; +@pinterestColor : #00ACED; + /*------------------- Borders @@ -103,15 +115,6 @@ @huge : 1.375em; @massive : 1.5em; -@rootMini : 0.7rem; -@rootTiny : 0.8rem; -@rootSmall : 0.875rem; -@rootMedium : 1rem; -@rootLarge : 1.125rem; -@rootBig : 1.25rem; -@rootHuge : 1.375rem; -@rootMassive : 1.5em; - /*------------------- Transitions @@ -121,51 +124,63 @@ @transitionEasing : ease; - /******************************* States *******************************/ +/*------------------- + Disabled +--------------------*/ + +@disabledOpacity: 0.3; /*------------------- Hover --------------------*/ /*--- Colors ---*/ -@primaryColorHover : lighten( saturate(@primaryColor, 10), 10); -@secondaryColorHover : lighten( saturate(@secondaryColor, 10), 10); -@tertiaryColorHover : lighten( saturate(@tertiaryColor, 10), 10); - -@blueHover : lighten( saturate(@blue, 10), 10); -@goldHover : lighten( saturate(@gold, 10), 10); -@greenHover : lighten( saturate(@green, 10), 10); -@orangeHover : lighten( saturate(@orange, 10), 10); -@pinkHover : lighten( saturate(@pink, 10), 10); -@purpleHover : lighten( saturate(@purple, 10), 10); -@redHover : lighten( saturate(@red, 10), 10); -@tealHover : lighten( saturate(@teal, 10), 10); -@whiteHover : lighten( saturate(@white, 10), 10); -@yellowHover : lighten( saturate(@yellow, 10), 10); +@primaryColorHover : darken( saturate(@primaryColor, 10), 10); +@secondaryColorHover : darken( saturate(@secondaryColor, 10), 10); +@tertiaryColorHover : darken( saturate(@tertiaryColor, 10), 10); + +@blueHover : darken( saturate(@blue, 10), 10); +@goldHover : darken( saturate(@gold, 10), 10); +@greenHover : darken( saturate(@green, 10), 10); +@orangeHover : darken( saturate(@orange, 10), 10); +@pinkHover : darken( saturate(@pink, 10), 10); +@purpleHover : darken( saturate(@purple, 10), 10); +@redHover : darken( saturate(@red, 10), 10); +@tealHover : darken( saturate(@teal, 10), 10); +@whiteHover : darken( saturate(@white, 10), 10); +@yellowHover : darken( saturate(@yellow, 10), 10); /*--- Emotive ---*/ -@positiveColorHover : lighten( saturate(@positiveColor, 10), 10); -@negativeColorHover : lighten( saturate(@negativeColor, 10), 10); +@positiveColorHover : darken( saturate(@positiveColor, 10), 10); +@negativeColorHover : darken( saturate(@negativeColor, 10), 10); -@infoColorHover : lighten( saturate(@infoColor, 10), 10); -@warningColorHover : lighten( saturate(@warningColor, 10), 10); -@errorColorHover : lighten( saturate(@errorColor, 10), 10); +@infoColorHover : darken( saturate(@infoColor, 10), 10); +@warningColorHover : darken( saturate(@warningColor, 10), 10); +@errorColorHover : darken( saturate(@errorColor, 10), 10); /*--- Neutrals ---*/ -@darkGreyHover : lighten( saturate(@darkGrey, 10), 10); -@midGreyHover : lighten( saturate(@midGrey, 10), 10); -@greyHover : lighten( saturate(@grey, 10), 10); -@lightGreyHover : lighten( saturate(@lightGrey, 10), 10); +@darkGreyHover : darken( saturate(@darkGrey, 10), 10); +@midGreyHover : darken( saturate(@midGrey, 10), 10); +@greyHover : darken( saturate(@grey, 10), 10); +@lightGreyHover : darken( saturate(@lightGrey, 10), 10); + +@neutralHover : darken( saturate(@neutral, 10), 10); -@neutralHover : lighten( saturate(@neutral, 10), 10); +@whiteHover : darken( saturate(@white, 10), 10); +@offWhiteHover : darken( saturate(@offWhite, 10), 10); +@darkWhiteHover : darken( saturate(@darkWhite, 10), 10); -@whiteHover : lighten( saturate(@white, 10), 10); -@offWhiteHover : lighten( saturate(@offWhite, 10), 10); -@darkWhiteHover : lighten( saturate(@darkWhite, 10), 10); +@facebookHoverColor : darken( saturate(@facebookColor, 10), 10); +@twitterHoverColor : darken( saturate(@twitterColor, 10), 10); +@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 10); +@linkedInHoverColor : darken( saturate(@linkedInColor, 10), 10); +@youtubeHoverColor : darken( saturate(@youtubeColor, 10), 10); +@instagramHoverColor : darken( saturate(@instagramColor, 10), 10); +@pinterestHoverColor : darken( saturate(@pinterestColor, 10), 10); /*------------------- @@ -174,40 +189,48 @@ /*--- Colors ---*/ -@primaryColorDown : darken(@primaryColor, 10); -@secondaryColorDown : darken(@secondaryColor, 10); -@tertiaryColorDown : darken(@tertiaryColor, 10); - -@blueDown : darken(@blue, 10); -@goldDown : darken(@gold, 10); -@greenDown : darken(@green, 10); -@orangeDown : darken(@orange, 10); -@pinkDown : darken(@pink, 10); -@purpleDown : darken(@purple, 10); -@redDown : darken(@red, 10); -@tealDown : darken(@teal, 10); -@whiteDown : darken(@white, 10); -@yellowDown : darken(@yellow, 10); +@primaryColorDown : darken(@primaryColor, 10); +@secondaryColorDown : darken(@secondaryColor, 10); +@tertiaryColorDown : darken(@tertiaryColor, 10); + +@blueDown : darken(@blue, 10); +@goldDown : darken(@gold, 10); +@greenDown : darken(@green, 10); +@orangeDown : darken(@orange, 10); +@pinkDown : darken(@pink, 10); +@purpleDown : darken(@purple, 10); +@redDown : darken(@red, 10); +@tealDown : darken(@teal, 10); +@whiteDown : darken(@white, 10); +@yellowDown : darken(@yellow, 10); /*--- Emotive ---*/ -@positiveColorDown : darken(@positiveColor, 10); -@negativeColorDown : darken(@negativeColor, 10); +@positiveColorDown : darken(@positiveColor, 10); +@negativeColorDown : darken(@negativeColor, 10); -@infoColorDown : darken(@infoColor, 10); -@warningColorDown : darken(@warningColor, 10); -@errorColorDown : darken(@errorColor, 10); +@infoColorDown : darken(@infoColor, 10); +@warningColorDown : darken(@warningColor, 10); +@errorColorDown : darken(@errorColor, 10); /*--- Neutrals ---*/ -@darkGreyDown : darken(@darkGrey, 10); -@midGreyDown : darken(@midGrey, 10); -@greyDown : darken(@grey, 10); -@lightGreyDown : darken(@lightGrey, 10); +@darkGreyDown : darken(@darkGrey, 10); +@midGreyDown : darken(@midGrey, 10); +@greyDown : darken(@grey, 10); +@lightGreyDown : darken(@lightGrey, 10); -@neutralDown : darken(@neutral, 10); +@neutralDown : darken(@neutral, 10); -@whiteDown : darken(@white, 10); -@offWhiteDown : darken(@offWhite, 10); -@darkWhiteDown : darken(@darkWhite, 10); +@whiteDown : darken(@white, 10); +@offWhiteDown : darken(@offWhite, 10); +@darkWhiteDown : darken(@darkWhite, 10); + +@facebookDownColor : darken(@facebookColor, 10); +@twitterDownColor : darken(@twitterColor, 10); +@googlePlusDownColor : darken(@googlePlusColor, 10); +@linkedInDownColor : darken(@linkedInColor, 10); +@youtubeDownColor : darken(@youtubeColor, 10); +@instagramDownColor : darken(@instagramColor, 10); +@pinterestDownColor : darken(@pinterestColor, 10); /*------------------- @@ -215,37 +238,45 @@ --------------------*/ /*--- Standard ---*/ -@primaryColorActive : lighten(@primaryColor, 10); -@secondaryColorActive : lighten(@secondaryColor, 10); -@tertiaryColorActive : lighten(@tertiaryColor, 10); - -@blueActive : lighten(@blue, 10); -@goldActive : lighten(@gold, 10); -@greenActive : lighten(@green, 10); -@orangeActive : lighten(@orange, 10); -@pinkActive : lighten(@pink, 10); -@purpleActive : lighten(@purple, 10); -@redActive : lighten(@red, 10); -@tealActive : lighten(@teal, 10); -@whiteActive : lighten(@white, 10); -@yellowActive : lighten(@yellow, 10); +@primaryColorActive : lighten(@primaryColor, 10); +@secondaryColorActive : lighten(@secondaryColor, 10); +@tertiaryColorActive : lighten(@tertiaryColor, 10); + +@blueActive : lighten(@blue, 10); +@goldActive : lighten(@gold, 10); +@greenActive : lighten(@green, 10); +@orangeActive : lighten(@orange, 10); +@pinkActive : lighten(@pink, 10); +@purpleActive : lighten(@purple, 10); +@redActive : lighten(@red, 10); +@tealActive : lighten(@teal, 10); +@whiteActive : lighten(@white, 10); +@yellowActive : lighten(@yellow, 10); /*--- Emotive ---*/ -@positiveColorActive : lighten(@positiveColor, 10); -@negativeColorActive : lighten(@negativeColor, 10); +@positiveColorActive : lighten(@positiveColor, 10); +@negativeColorActive : lighten(@negativeColor, 10); -@infoColorActive : lighten(@infoColor, 10); -@warningColorActive : lighten(@warningColor, 10); -@errorColorActive : lighten(@errorColor, 10); +@infoColorActive : lighten(@infoColor, 10); +@warningColorActive : lighten(@warningColor, 10); +@errorColorActive : lighten(@errorColor, 10); /*--- Neutrals ---*/ -@darkGreyActive : lighten(@darkGrey, 10); -@midGreyActive : lighten(@midGrey, 10); -@greyActive : lighten(@grey, 10); -@lightGreyActive : lighten(@lightGrey, 10); - -@neutralActive : lighten(@neutral, 10); - -@whiteActive : lighten(@white, 10); -@offWhiteActive : lighten(@offWhite, 10); -@darkWhiteActive : lighten(@darkWhite, 10); +@darkGreyActive : lighten(@darkGrey, 10); +@midGreyActive : lighten(@midGrey, 10); +@greyActive : lighten(@grey, 10); +@lightGreyActive : lighten(@lightGrey, 10); + +@neutralActive : lighten(@neutral, 10); + +@whiteActive : lighten(@white, 10); +@offWhiteActive : lighten(@offWhite, 10); +@darkWhiteActive : lighten(@darkWhite, 10); + +@facebookActiveColor : lighten(@facebookColor, 10); +@twitterActiveColor : lighten(@twitterColor, 10); +@googlePlusActiveColor : lighten(@googlePlusColor, 10); +@linkedInActiveColor : lighten(@linkedInColor, 10); +@youtubeActiveColor : lighten(@youtubeColor, 10); +@instagramActiveColor : lighten(@instagramColor, 10); +@pinterestActiveColor : lighten(@pinterestColor, 10);