Add focus box shadow

fomantic · Mar 18, 2015 · 6035d28 · 6035d28
1 parent 21d695c
commit 6035d28
Showing 1 changed file with 46 additions and 38 deletions.
diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -149,6 +149,15 @@
 @invertedLoaderFillColor: rgba(255, 255, 255, 0.15);
 @invertedLoaderLineColor: @white;
 
+/*-------------------
+    Element Focus
+--------------------*/
+
+@defaultFocusBoxShadow:
+  0px 1px 2px rgba(0, 0, 0, 0.075) inset,
+  0px 0px 5px rgba(81, 167, 232, 0.5)
+;
+
 /*-------------------
         Grid
 --------------------*/
@@ -460,58 +469,57 @@
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorHover    : lighten(@primaryColor, 3);
-@secondaryColorHover  : lighten(@secondaryColor, 3);
-
-@blueHover            : lighten(@blue, 3);
-@greenHover           : lighten(@green, 3);
-@orangeHover          : lighten(@orange, 3);
-@pinkHover            : lighten(@pink, 3);
-@purpleHover          : lighten(@purple, 3);
-@redHover             : lighten(@red, 3);
-@tealHover            : lighten(@teal, 3);
-@yellowHover          : lighten(@yellow, 3);
-
-@lightBlueHover       : lighten(@lightBlue, 3);
-@lightGreenHover      : lighten(@lightGreen, 3);
-@lightOrangeHover     : lighten(@lightOrange, 3);
-@lightPinkHover       : lighten(@lightPink, 3);
-@lightPurpleHover     : lighten(@lightPurple, 3);
-@lightRedHover        : lighten(@lightRed, 3);
-@lightTealHover       : lighten(@lightTeal, 3);
-@lightYellowHover     : lighten(@lightYellow, 3);
+@primaryColorHover    : lighten(@primaryColor, 7);
+@secondaryColorHover  : lighten(@secondaryColor, 7);
+
+@blueHover            : lighten(@blue, 7);
+@greenHover           : lighten(@green, 7);
+@orangeHover          : lighten(@orange, 7);
+@pinkHover            : lighten(@pink, 7);
+@purpleHover          : lighten(@purple, 7);
+@redHover             : lighten(@red, 7);
+@tealHover            : lighten(@teal, 7);
+@yellowHover          : lighten(@yellow, 7);
+
+@lightBlueHover       : lighten(@lightBlue, 7);
+@lightGreenHover      : lighten(@lightGreen, 7);
+@lightOrangeHover     : lighten(@lightOrange, 7);
+@lightPinkHover       : lighten(@lightPink, 7);
+@lightPurpleHover     : lighten(@lightPurple, 7);
+@lightRedHover        : lighten(@lightRed, 7);
+@lightTealHover       : lighten(@lightTeal, 7);
+@lightYellowHover     : lighten(@lightYellow, 7);
 
 /*---  Emotive  ---*/
-@positiveColorHover   : lighten(@positiveColor, 3);
-@negativeColorHover   : lighten(@negativeColor, 3);
+@positiveColorHover   : lighten(@positiveColor, 7);
+@negativeColorHover   : lighten(@negativeColor, 7);
 
 /*---  Neutrals  ---*/
-@fullBlackHover       : lighten(@fullBlack, 3);
+@fullBlackHover       : lighten(@fullBlack, 7);
 @blackHover           : @black;
 
-@lightGreyHover       : lighten(@lightGrey, 3);
-@greyHover            : lighten(@grey, 3);
-@darkGreyHover        : lighten(@darkGrey, 3);
+@lightGreyHover       : lighten(@lightGrey, 7);
+@greyHover            : lighten(@grey, 7);
+@darkGreyHover        : lighten(@darkGrey, 7);
 
-@whiteHover           : lighten(@white, 3);
-@offWhiteHover        : lighten(@offWhite, 3);
-@darkWhiteHover       : lighten(@darkWhite, 3);
+@whiteHover           : lighten(@white, 7);
+@offWhiteHover        : lighten(@offWhite, 7);
+@darkWhiteHover       : lighten(@darkWhite, 7);
 
-@facebookHoverColor   : lighten(@facebookColor, 3);
-@twitterHoverColor    : lighten(@twitterColor, 3);
-@googlePlusHoverColor : lighten(@googlePlusColor, 3);
-@linkedInHoverColor   : lighten(@linkedInColor, 3);
-@youtubeHoverColor    : lighten(@youtubeColor, 3);
-@instagramHoverColor  : lighten(@instagramColor, 3);
-@pinterestHoverColor  : lighten(@pinterestColor, 3);
-@vkHoverColor         : lighten(@vkColor, 3);
+@facebookHoverColor   : lighten(@facebookColor, 7);
+@twitterHoverColor    : lighten(@twitterColor, 7);
+@googlePlusHoverColor : lighten(@googlePlusColor, 7);
+@linkedInHoverColor   : lighten(@linkedInColor, 7);
+@youtubeHoverColor    : lighten(@youtubeColor, 7);
+@instagramHoverColor  : lighten(@instagramColor, 7);
+@pinterestHoverColor  : lighten(@pinterestColor, 7);
+@vkHoverColor         : lighten(@vkColor, 7);
 
 
 /*-------------------
     Down (:active)
 --------------------*/
 
-
 /*---  Colors  ---*/
 @primaryColorDown    : darken(@primaryColor, 7);
 @secondaryColorDown  : darken(@secondaryColor, 7);