From 911ca00dce11bc0dd557131dd1d216f7e467ba41 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 10 Oct 2013 04:39:52 -0400 Subject: [PATCH] Begin work on global variable list and starting to replace variables in button.less Former-commit-id: 6ecbb1edae84e4152e9e21eef908982fe9474901 Former-commit-id: 40908be15d5972e16c594647a08e6136a23957d3 --- src/elements/button.less | 58 +-------- src/elements/button.variables | 1 - src/variables.less | 230 ++++++++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+), 56 deletions(-) create mode 100755 src/variables.less diff --git a/src/elements/button.less b/src/elements/button.less index d19332d3a..a8b591654 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -101,24 +101,6 @@ ; } -/*-------------- - Count ----------------*/ - -.ui.count.button { - -webkit-box-shadow: 0px 0px 0px 1px @borderColor !important; - -moz-box-shadow: 0px 0px 0px 1px @borderColor !important; - box-shadow: 0px 0px 0px 1px @borderColor !important; -} - -.ui.count.button > .count { - position: absolute; - background-color: #FFFFFF; - border: 1px solid #F0F0F0; - margin: -@verticalPadding -@horizontalPadding; - padding: @verticalPadding @horizontalPadding; -} - /*------------------- Primary --------------------*/ @@ -132,12 +114,12 @@ .ui.primary.button:hover, .ui.primary.buttons .active.button, .ui.primary.button.active { - background-color: #E75859; + background-color: @primaryColorHover; color: #FFFFFF; } .ui.primary.buttons .button:active, .ui.primary.button:active { - background-color: #D24B4C; + background-color: @primaryColorActive; color: #FFFFFF; } @@ -199,19 +181,6 @@ margin-right: 0.5em; line-height: 1; - - -webkit-transition: - opacity 0.1s ease - ; - -moz-transition: - opacity 0.1s ease - ; - -o-transition: - opacity 0.1s ease - ; - -ms-transition: - opacity 0.1s ease - ; transition: opacity 0.1s ease ; @@ -232,21 +201,8 @@ .ui.active.button { opacity: 1 !important; background-color: #B0B0B0; - - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); - color: #FFFFFF; - - -webkit-box-shadow: - 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset - ; - -moz-box-shadow: - 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset - ; box-shadow: 0px 0px 0.3em 0px rgba(0, 0, 0, 0.3) inset ; @@ -280,9 +236,7 @@ color: #FFFFFF; - -webkit-box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset; - box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset; + box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; } /*-------------- @@ -297,14 +251,8 @@ color: transparent !important; background-image: none !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; box-shadow: none !important; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; transition: all 0s linear; } .ui.loading.button:after { diff --git a/src/elements/button.variables b/src/elements/button.variables index 881f415c5..de51e0b34 100755 --- a/src/elements/button.variables +++ b/src/elements/button.variables @@ -31,6 +31,5 @@ @borderRadius : 0.2em; - @boxShadow : 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset; @activeBoxShadow : 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset; \ No newline at end of file diff --git a/src/variables.less b/src/variables.less new file mode 100755 index 000000000..2abb9ce42 --- /dev/null +++ b/src/variables.less @@ -0,0 +1,230 @@ + +/******************************* + Site +*******************************/ + +/*------------------- + Page +--------------------*/ + +@bodyColor : #FCFCFC; +@fontSize : 15px; + + +/*------------------- + Fonts +--------------------*/ + +@headerFont : 'Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;'; +@pageFont : 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;'; + + + +/******************************* + User Interface +*******************************/ + + +/*------------------- + Colors +--------------------*/ + +/*--- Colors ---*/ +@primaryColor : #D95C5C; +@secondaryColor : #00B5AD; +@tertiaryColor : #00B5AD; + +@blue : #6ECFF5; +@gold : #FFCB08; +@green : #5BBD72; +@orange : #E96633; +@pink : #D9499A; +@purple : #564F8A; +@red : #F00000; +@teal : #00B5AD; +@white : #FFFFFF; +@yellow : #F6F3D5; + +/*--- Emotive ---*/ +@positiveColor : #5BBD72; +@negativeColor : #D95C5C; + +@infoColor : #E6F4F9; +@warningColor : #96904D; +@errorColor : #D95C5C; + +/*--- Neutrals ---*/ +@darkGrey : #231F20; +@midGrey : #5C6166; +@grey : #9DA6AB; +@lightGrey : #DCDDDE; + +@neutral : #CCCCCC; + +@white : #FFFFFF; +@offWhite : #FAFAFA; +@darkWhite : #F0F0F0; + + +/*------------------- + 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); + +/*--- Emotive ---*/ +@positiveColorHover : lighten( saturate(@positiveColor, 10), 10); +@negativeColorHover : lighten( saturate(@negativeColor, 10), 10); + +@infoColorHover : lighten( saturate(@infoColor, 10), 10); +@warningColorHover : lighten( saturate(@warningColor, 10), 10); +@errorColorHover : lighten( 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); + +@neutralHover : lighten( saturate(@neutral, 10), 10); + +@whiteHover : lighten( saturate(@white, 10), 10); +@offWhiteHover : lighten( saturate(@offWhite, 10), 10); +@darkWhiteHover : lighten( saturate(@darkWhite, 10), 10); + + +/*------------------- + Down (:active) +--------------------*/ + +/*--- 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); + +/*--- Emotive ---*/ +@positiveColorDown : darken(@positiveColor, 10); +@negativeColorDown : darken(@negativeColor, 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); + +@neutralDown : darken(@neutral, 10); + +@whiteDown : darken(@white, 10); +@offWhiteDown : darken(@offWhite, 10); +@darkWhiteDown : darken(@darkWhite, 10); + +/*------------------- + Active +--------------------*/ + +/*--- 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); + +/*--- Emotive ---*/ +@positiveColorActive : lighten(@positiveColor, 10); +@negativeColorActive : lighten(@negativeColor, 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); + + +/*------------------- + Text Colors +--------------------*/ + +@darkTextColor : rgba(0, 0, 0, 0.85); +@textColor : rgba(0, 0, 0, 0.7); +@lightTextColor : rgba(0, 0, 0, 0.4); + +@disabledTextColor : rgba(0, 0, 0, 0.2); + + +/*------------------- + Borders +--------------------*/ + +@borderColor : rgba(0, 0, 0, 0.1); +@solidBorderColor : #DDDDDD; + + + +/*------------------- + Sizes +--------------------*/ + +@mini : 0.7; +@tiny : 0.8; +@small : 0.875; +@medium : 1; +@large : 1.125; +@big : 1.25; +@huge : 1.375; +@massive : 1.5; + + +/*------------------- + Transitions +--------------------*/ + +@transitionDuration : 0.25s; +@transitionEasing : ease;