richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

iteration on button variables

pull/340/head
jlukic 11 years ago
parent
1e7b4a99ec
commit
542d20651c
2 changed files with 257 additions and 199 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      src/elements/button.less
  2. 219
      src/global.variables

237
src/elements/button.less
View File

@ -26,34 +26,40 @@
// @offWhite // @offWhite
// @white // @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; @padding: 0.8em 1.5em 0.8665em;
@iconPadding: 0.8em 0.8em 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; @compactIconPadding: 0.6em 0.6em 0.73em;
@borderRadius: 0.25em; @borderRadius: 0.25em;
@backgroundColor: #FAFAFA; @backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)); @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@shadowDistance: 0.133em;
@boxShadow: @boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset, 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)); @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
@hoverBoxShadow: ''; @hoverBoxShadow: '';
@downBackgroundColor: '';
@downBackgroundColor: #F1F1F1;
@downBackgroundImage: ''; @downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; @downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@ -61,6 +67,22 @@
@activeBackgroundImage: none; @activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important; @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 Button
@ -76,16 +98,16 @@
outline: none; outline: none;
border: none; border: none;
background-color: #FAFAFA;
background-color: @backgroundColor;
color: @textColor; color: @textColor;
margin: 0em; margin: 0em;
padding: @padding;
padding: @verticalPadding @horizontalPadding ( @verticalPadding + (@shadowDistance / 2) );
font-size: 1rem; font-size: 1rem;
text-transform: uppercase;
text-transform: @textTransform;
font-weight: @fontWeight;
line-height: 1; line-height: 1;
font-weight: bold;
font-style: normal; font-style: normal;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -97,11 +119,11 @@
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
transition: 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 States
*******************************/ *******************************/
/*--------------
Active
---------------*/
.ui.buttons .active.button,
.ui.active.button {
background-color: @activeBackgroundColor;
background-image: @activeBackgroundImage;
box-shadow: @activeBoxShadow;
color: @textColor;
}
/*-------------- /*--------------
Hover Hover
---------------*/ ---------------*/
@ -133,15 +141,12 @@
.ui.button:not(.loading):hover { .ui.button:not(.loading):hover {
background-color: @hoverBackgroundColor; background-color: @hoverBackgroundColor;
background-image: @hoverBackgroundImage; background-image: @hoverBackgroundImage;
color: @textColor;
}
.ui.button.active:hover {
background-image: none;
color: @selectedTextColor;
} }
.ui.button:hover .icon, .ui.button:hover .icon,
.ui.button.hover .icon { .ui.button.hover .icon {
opacity: 0.85;
opacity: @iconHoverOpacity;
} }
/*-------------- /*--------------
@ -150,12 +155,34 @@
.ui.button:not(.loading):active, .ui.button:not(.loading):active,
.ui.active.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; 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 Loading
---------------*/ ---------------*/
@ -177,7 +204,6 @@
content: ''; content: '';
background: transparent url(~"@{imageFolder}/loader-mini.gif") no-repeat 50% 50%; background: transparent url(~"@{imageFolder}/loader-mini.gif") no-repeat 50% 50%;
} }
.ui.labeled.icon.loading.button .icon { .ui.labeled.icon.loading.button .icon {
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
@ -190,10 +216,10 @@
.ui.disabled.button, .ui.disabled.button,
.ui.disabled.button:hover, .ui.disabled.button:hover,
.ui.disabled.button.active { .ui.disabled.button.active {
background-color: #DDDDDD !important;
cursor: default; 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; background-image: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
@ -222,7 +248,7 @@
/* Horizontal */ /* Horizontal */
.ui.animated.button .visible.content, .ui.animated.button .visible.content,
.ui.animated.button .hidden.content { .ui.animated.button .hidden.content {
transition: right 0.3s ease 0s;
transition: right @animationDuration @animationEasing 0s;
} }
.ui.animated.button .visible.content { .ui.animated.button .visible.content {
left: auto; left: auto;
@ -246,7 +272,7 @@
/* Vertical */ /* Vertical */
.ui.vertical.animated.button .visible.content, .ui.vertical.animated.button .visible.content,
.ui.vertical.animated.button .hidden.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 { .ui.vertical.animated.button .visible.content {
transform: translateY(0%); transform: translateY(0%);
@ -269,7 +295,7 @@
/* Fade */ /* Fade */
.ui.fade.animated.button .visible.content, .ui.fade.animated.button .visible.content,
.ui.fade.animated.button .hidden.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 { .ui.fade.animated.button .visible.content {
left: auto; left: auto;
@ -303,19 +329,22 @@
.ui.primary.buttons .button, .ui.primary.buttons .button,
.ui.primary.button { .ui.primary.button {
background-color: #D95C5C;
background-color: @primaryColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.primary.buttons .button:hover, .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; color: #FFFFFF;
} }
.ui.primary.buttons .button:active, .ui.primary.buttons .button:active,
.ui.primary.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; color: #FFFFFF;
} }
@ -325,19 +354,22 @@
.ui.secondary.buttons .button, .ui.secondary.buttons .button,
.ui.secondary.button { .ui.secondary.button {
background-color: #00B5AD;
background-color: @secondaryColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.secondary.buttons .button:hover, .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; color: #FFFFFF;
} }
.ui.secondary.buttons .button:active, .ui.secondary.buttons .button:active,
.ui.secondary.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; color: #FFFFFF;
} }
@ -347,100 +379,100 @@
/* Facebook */ /* Facebook */
.ui.facebook.button { .ui.facebook.button {
background-color: #3B579D;
background-color: @facebookColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.facebook.button:hover { .ui.facebook.button:hover {
background-color: #3A59A9;
background-color: @facebookHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.facebook.button:active { .ui.facebook.button:active {
background-color: #334F95;
background-color: @facebookDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* Twitter */ /* Twitter */
.ui.twitter.button { .ui.twitter.button {
background-color: #4092CC;
background-color: @twitterColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.twitter.button:hover { .ui.twitter.button:hover {
background-color: #399ADE;
background-color: @twitterHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.twitter.button:active { .ui.twitter.button:active {
background-color: #3283BC;
background-color: @twitterDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* Google Plus */ /* Google Plus */
.ui.google.plus.button { .ui.google.plus.button {
background-color: #D34836;
background-color: @googlePlusColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.google.plus.button:hover { .ui.google.plus.button:hover {
background-color: #E3432E;
background-color: @googlePlusHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.google.plus.button:active { .ui.google.plus.button:active {
background-color: #CA3A27;
background-color: @googlePlusDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* Linked In */ /* Linked In */
.ui.linkedin.button { .ui.linkedin.button {
background-color: #1F88BE;
background-color: @linkedInColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.linkedin.button:hover { .ui.linkedin.button:hover {
background-color: #1394D6;
background-color: @linkedInHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.linkedin.button:active { .ui.linkedin.button:active {
background-color: #1179AE;
background-color: @linkedInDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* YouTube */ /* YouTube */
.ui.youtube.button { .ui.youtube.button {
background-color: #CC181E;
background-color: @youtubeColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.youtube.button:hover { .ui.youtube.button:hover {
background-color: #DF0209;
background-color: @youtubeHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.youtube.button:active { .ui.youtube.button:active {
background-color: #A50006;
background-color: @youtubeDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* Instagram */ /* Instagram */
.ui.instagram.button { .ui.instagram.button {
background-color: #49769C;
background-color: @instagramColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.instagram.button:hover { .ui.instagram.button:hover {
background-color: #4781B1;
background-color: @instagramHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.instagram.button:active { .ui.instagram.button:active {
background-color: #38658A;
background-color: @instagramDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
/* Pinterest */ /* Pinterest */
.ui.pinterest.button { .ui.pinterest.button {
background-color: #00ACED;
background-color: @pinterestColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.pinterest.button:hover { .ui.pinterest.button:hover {
background-color: #00B9FF;
background-color: @pinterestHoverColor;
color: #FFFFFF; color: #FFFFFF;
} }
.ui.pinterest.button:active { .ui.pinterest.button:active {
background-color: #009EDA;
background-color: @pinterestDownColor;
color: #FFFFFF; color: #FFFFFF;
} }
@ -449,24 +481,24 @@
---------------*/ ---------------*/
.ui.button > .icon { .ui.button > .icon {
margin-right: 0.6em;
margin-right: @iconMargin;
line-height: 1; line-height: 1;
-webkit-transition: -webkit-transition:
opacity 0.1s ease
opacity 0.1s @transitionEasing
; ;
-moz-transition: -moz-transition:
opacity 0.1s ease
opacity 0.1s @transitionEasing
; ;
-o-transition: -o-transition:
opacity 0.1s ease
opacity 0.1s @transitionEasing
; ;
-ms-transition: -ms-transition:
opacity 0.1s ease
opacity 0.1s @transitionEasing
; ;
transition: transition:
opacity 0.1s ease
opacity 0.1s @transitionEasing
; ;
} }
@ -497,15 +529,10 @@
Sizes Sizes
--------------------*/ --------------------*/
.ui.buttons .button,
.ui.button {
font-size: 1rem;
}
.ui.mini.buttons .button, .ui.mini.buttons .button,
.ui.mini.buttons .or, .ui.mini.buttons .or,
.ui.mini.button { .ui.mini.button {
font-size: 0.8rem;
font-size: @mini;
} }
.ui.mini.buttons .button, .ui.mini.buttons .button,
.ui.mini.button { .ui.mini.button {
@ -515,11 +542,10 @@
.ui.mini.buttons .icon.button { .ui.mini.buttons .icon.button {
padding: @compactIconPadding; padding: @compactIconPadding;
} }
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.tiny.buttons .or, .ui.tiny.buttons .or,
.ui.tiny.button { .ui.tiny.button {
font-size: 0.875rem;
font-size: @tiny;
} }
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
@ -530,33 +556,34 @@
.ui.tiny.buttons .icon.button { .ui.tiny.buttons .icon.button {
padding: @compactIconPadding; padding: @compactIconPadding;
} }
.ui.small.buttons .button, .ui.small.buttons .button,
.ui.small.buttons .or, .ui.small.buttons .or,
.ui.small.button { .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 .button,
.ui.large.buttons .or, .ui.large.buttons .or,
.ui.large.button { .ui.large.button {
font-size: 1.125rem;
font-size: @large;
} }
.ui.big.buttons .button, .ui.big.buttons .button,
.ui.big.buttons .or, .ui.big.buttons .or,
.ui.big.button { .ui.big.button {
font-size: 1.25rem;
font-size: @big;
} }
.ui.huge.buttons .button, .ui.huge.buttons .button,
.ui.huge.buttons .or, .ui.huge.buttons .or,
.ui.huge.button { .ui.huge.button {
font-size: 1.375rem;
font-size: @huge;
} }
.ui.massive.buttons .button, .ui.massive.buttons .button,
.ui.massive.buttons .or, .ui.massive.buttons .or,
.ui.massive.button { .ui.massive.button {
font-size: 1.5rem;
font-weight: bold;
font-size: @massive;
} }
/* Or resize */ /* Or resize */
@ -605,11 +632,11 @@
.ui.icon.buttons .button, .ui.icon.buttons .button,
.ui.icon.button { .ui.icon.button {
padding: 0.8em 0.8em 0.8665em;
padding: @verticalPadding @verticalPadding ( @verticalPadding + (@shadowDistance / 2) );
} }
.ui.icon.buttons .button > .icon, .ui.icon.buttons .button > .icon,
.ui.icon.button > .icon { .ui.icon.button > .icon {
opacity: 0.9;
opacity: @iconButtonOpacity;
margin: 0em; margin: 0em;
vertical-align: top; vertical-align: top;
} }

219
src/global.variables
View File

@ -78,9 +78,21 @@
@textColor : rgba(0, 0, 0, 0.7); @textColor : rgba(0, 0, 0, 0.7);
@lightTextColor : rgba(0, 0, 0, 0.4); @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); @disabledTextColor : rgba(0, 0, 0, 0.2);
/*-------------------
Brand Colors
--------------------*/
@facebookColor : #3B579D;
@twitterColor : #4092CC;
@googlePlusColor : #D34836;
@linkedInColor : #1F88BE;
@youtubeColor : #CC181E;
@instagramColor : #49769C;
@pinterestColor : #00ACED;
/*------------------- /*-------------------
Borders Borders
@ -103,15 +115,6 @@
@huge : 1.375em; @huge : 1.375em;
@massive : 1.5em; @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 Transitions
@ -121,51 +124,63 @@
@transitionEasing : ease; @transitionEasing : ease;
/******************************* /*******************************
States States
*******************************/ *******************************/
/*-------------------
Disabled
--------------------*/
@disabledOpacity: 0.3;
/*------------------- /*-------------------
Hover Hover
--------------------*/ --------------------*/
/*--- Colors ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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 ---*/ /*--- 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);
Write Preview
Loading…
Cancel
Save