Browse Source

Begin work on global variable list and starting to replace variables in button.less

Former-commit-id: 6ecbb1edae
Former-commit-id: 40908be15d
pull/301/head
jlukic 11 years ago
parent
commit
911ca00dce
3 changed files with 233 additions and 56 deletions
  1. 58
      src/elements/button.less
  2. 1
      src/elements/button.variables
  3. 230
      src/variables.less

58
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 {

1
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;

230
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;
Loading…
Cancel
Save