Browse Source

Experimenting with theme loading structure

pull/636/head
jlukic 11 years ago
parent
commit
843f140554
11 changed files with 577 additions and 271 deletions
  1. 80
      src/elements/button.less
  2. 30
      src/elements/header.less
  3. 225
      src/elements/icon.less
  4. 30
      src/elements/segment.less
  5. 17
      src/semantic.config
  6. 3
      src/theme/semantic/button.overrides
  7. 74
      src/theme/semantic/button.variables
  8. 298
      src/theme/semantic/global.variables
  9. 25
      src/theme/semantic/header.variables
  10. 39
      src/theme/semantic/icon.variables
  11. 27
      src/theme/semantic/segment.variables

80
src/elements/button.less

@ -10,84 +10,14 @@
*/
/*******************************
Variables
Theme
*******************************/
@import "../global.variables";
@import "../theme.less";
/*-------------------
Globals Used
--------------------*/
// (Color Variables)
// @transitionDuration
// @transitionEasing
// @iconWidth
// @borderColor
/*-------------------
Button Variables
--------------------*/
/* Button Variables */
@textTransform: uppercase;
@fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);
@borderRadius: 0.25em;
@shadowDistance: 0.133em;
@shadowOffset: (@shadowDistance / 2 + 0.05em);
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
;
@hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
@hoverBoxShadow: '';
@downBackgroundColor: #F1F1F1;
@downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@activeBackgroundColor: #EAEAEA;
@activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@iconMargin: 0.6em;
@iconHoverOpacity: 0.85;
@iconButtonOpacity: 0.9;
@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
@floatedMargin: 0.25em;
@animationDuration: 0.3s;
@animationEasing: ease;
@fadeScaleHigh: 1.5;
@fadeScaleLow: 0.75;
@mini: 0.7rem;
@tiny: 0.8rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@big: 1.25rem;
@huge: 1.375rem;
@massive: 1.5rem;
@element: 'button';
.importVariables(@element);
.importOverides(@element);
/*******************************

30
src/elements/header.less

@ -13,33 +13,11 @@
Variables
*******************************/
@import "../global.variables";
/*-------------------
Globals Used
--------------------*/
// @white
// @blue
// @red
// @green
// @purple
// @teal
// @black
/*-------------------
Modified Globals
--------------------*/
@tiny: 1em;
@small: 1.1em;
@medium: 1.33em;
@large: 1.75em;
@huge: 2em;
@element: 'header';
/*-------------------
Header Variables
--------------------*/
@import "../global.variables";
.importVariables(@element);
.importOverides(@element);
/*******************************

225
src/elements/icon.less

@ -22,18 +22,28 @@
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
/*******************************
Variables
*******************************/
@element: 'icon';
@import '../semantic.config';
.importVariables(@element);
.importOverrides(@element);
/*******************************
Icon
*******************************/
@font-face {
font-family: 'Icons';
src: url(../fonts/icons.eot);
src: url("@{iconFont}.eot");
src:
url(../fonts/icons.eot?#iefix) format('embedded-opentype'),
url(../fonts/icons.woff) format('woff'),
url(../fonts/icons.ttf) format('truetype'),
url(../fonts/icons.svg#icons) format('svg')
url("@{iconFont}.eot?#iefix") format('embedded-opentype'),
url("@{iconFont}.woff") format('woff'),
url("@{iconFont}.ttf") format('truetype'),
url("@{iconFont}.svg#icons") format('svg')
;
font-style: normal;
@ -45,12 +55,12 @@
i.icon {
display: inline-block;
opacity: 0.75;
opacity: @opacity;
margin: 0em 0.25em 0em 0em;
margin: 0em @margin 0em 0em;
width: 1.23em;
height: 1em;
width: @width;
height: @height;
font-family: 'Icons';
font-style: normal;
@ -60,14 +70,7 @@ i.icon {
text-align: center;
speak: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
@ -462,7 +465,7 @@ i.icon.left,
i.icon.left,
i.icon.left {
width: auto;
margin: 0em 0.5em 0em 0em;
margin: 0em @directionMargin 0em 0em;
}
/* right side icons */
@ -471,7 +474,7 @@ i.icon.up,
i.icon.down,
i.icon.right {
width: auto;
margin: 0em 0em 0em 0.5em;
margin: 0em 0em 0em @directionMargin;
}
@ -484,70 +487,16 @@ i.icon.right {
---------------*/
i.icon.loading {
-webkit-animation: icon-loading 2s linear infinite;
-moz-animation: icon-loading 2s linear infinite;
-ms-animation: icon-loading 2s linear infinite;
-o-animation: icon-loading 2s linear infinite;
animation: icon-loading 2s linear infinite;
animation: icon-loading @loadingDuration linear infinite;
}
@keyframes icon-loading {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes icon-loading {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes icon-loading {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes icon-loading {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes icon-loading {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*******************************
States
@ -566,7 +515,7 @@ i.emphasized.icon {
}
i.icon.disabled {
opacity: 0.3;
opacity: @disabledOpacity;
}
@ -581,12 +530,8 @@ i.icon.disabled {
i.link.icon {
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
opacity: @opacity;
transition: opacity @transitionDuration @transitionEasing;
}
i.link.icon:hover {
opacity: 1 !important;
@ -597,24 +542,18 @@ i.link.icon:hover {
--------------------*/
i.circular.icon {
-webkit-border-radius: 500em !important;
-moz-border-radius: 500em !important;
border-radius: 500em !important;
padding: 0.5em 0.35em !important;
padding: @circularPadding !important;
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
box-shadow: @circularShadow;
line-height: 1 !important;
width: 2em !important;
height: 2em !important;
width: @circularSize !important;
height: @circularSize !important;
}
i.circular.inverted.icon {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@ -624,17 +563,9 @@ i.circular.inverted.icon {
i.flipped.icon,
i.horizontally.flipped.icon {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
i.vertically.flipped.icon {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
@ -645,19 +576,11 @@ i.vertically.flipped.icon {
i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
i.left.rotated.icon,
i.counterclockwise.rotated.icon {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@ -666,20 +589,16 @@ i.counterclockwise.rotated.icon {
--------------------*/
i.square.icon {
width: 2em;
height: 2em;
padding: 0.5em 0.35em !important;
width: @squareSize;
height: @squareSize;
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
padding: @squareSize !important;
box-shadow: @squareShadow;
vertical-align: baseline;
}
i.square.inverted.icon {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@ -697,78 +616,98 @@ i.inverted.icon {
Colors
--------------------*/
i.blue.icon {
color: #6ECFF5 !important;
}
i.black.icon {
color: #5C6166 !important;
color: @black !important;
}
i.blue.icon {
color: @blue !important;
}
i.green.icon {
color: #A1CF64 !important;
color: @green !important;
}
i.red.icon {
color: #D95C5C !important;
i.orange.icon {
color: @orange !important;
}
i.pink.icon {
color: @pink !important;
}
i.purple.icon {
color: #564F8A !important;
color: @purple !important;
}
i.red.icon {
color: @red !important;
}
i.teal.icon {
color: #00B5AD !important;
color: @teal !important;
}
i.yellow.icon {
color: @yellow !important;
}
/*-------------------
Inverted Colors
--------------------*/
i.inverted.black.icon {
background-color: #5C6166 !important;
i.black.icon {
background-color: @black !important;
color: #FFFFFF !important;
}
i.inverted.blue.icon {
background-color: #6ECFF5 !important;
i.blue.icon {
background-color: @blue !important;
color: #FFFFFF !important;
}
i.inverted.green.icon {
background-color: #A1CF64 !important;
i.green.icon {
background-color: @green !important;
color: #FFFFFF !important;
}
i.inverted.red.icon {
background-color: #D95C5C !important;
i.orange.icon {
background-color: @orange !important;
color: #FFFFFF !important;
}
i.inverted.purple.icon {
background-color: #564F8A !important;
i.pink.icon {
background-color: @pink !important;
color: #FFFFFF !important;
}
i.inverted.teal.icon {
background-color: #00B5AD !important;
i.purple.icon {
background-color: @purple !important;
color: #FFFFFF !important;
}
i.red.icon {
background-color: @red !important;
color: #FFFFFF !important;
}
i.teal.icon {
background-color: @teal !important;
color: #FFFFFF !important;
}
i.yellow.icon {
background-color: @yellow !important;
color: #FFFFFF !important;
}
/*-------------------
Sizes
--------------------*/
i.small.icon {
font-size: 0.875em;
font-size: @small;
}
i.icon {
font-size: 1em;
font-size: @medium;
}
i.large.icon {
font-size: 1.5em;
font-size: @large;
vertical-align: middle;
}
i.big.icon {
font-size: 2em;
font-size: @big;
vertical-align: middle;
}
i.huge.icon {
font-size: 4em;
font-size: @huge;
vertical-align: middle;
}
i.massive.icon {
font-size: 8em;
font-size: @massive;
vertical-align: middle;
}
}

30
src/elements/segment.less

@ -14,34 +14,10 @@
Variables
*******************************/
@import "../global.variables";
/*-------------------
Globals Used
--------------------*/
/*
@borderColor
*/
/*-------------------
Segment Variables
--------------------*/
@verticalPadding: 1em;
@horizontalPadding: 1em;
@margin: 1em;
@borderRadius: 5px;
@pageGridMargin: 2 * @verticalPadding;
@coloredBorderSize: 0.2em;
@secondaryColor: #FAF9FA;
@tertiaryColor: #EBEBEB;
@theme: 'semantic';
@import "../global.variables";
@import "../theme/@{theme}/segment.variables";
/*******************************

17
src/semantic.config

@ -0,0 +1,17 @@
/*-------------------
Theme
--------------------*/
@theme : 'semantic';
.importVariables(element) {
// check if child theme exists
@import "theme/semantic/@{element}.variables";
}
.importOverrides(element) {
// check if child theme exists
@import "theme/semantic/@{element}.overrides";
}
@import "theme/semantic/global.variables";

3
src/theme/semantic/button.overrides

@ -0,0 +1,3 @@
/*******************************
Overrides
*******************************/

74
src/theme/semantic/button.variables

@ -0,0 +1,74 @@
/*-------------------
Globals Used
--------------------*/
// (Color Variables)
// @transitionDuration
// @transitionEasing
// @iconWidth
// @borderColor
/*-------------------
Button Variables
--------------------*/
/* Button Variables */
@textTransform: uppercase;
@fontWeight: bold;
@textColor: rgba(0, 0, 0, 0.6);
@borderRadius: 0.25em;
@shadowDistance: 0.133em;
@shadowOffset: (@shadowDistance / 2 + 0.05em);
@verticalPadding: 0.8em;
@horizontalPadding: 1.5em;
@compactVerticalPadding: (@verticalPadding * 0.75);
@compactHorizontalPadding: (@horizontalPadding * 0.75);
@backgroundColor: #FAFAFA;
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
@boxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
;
@hoverBackgroundColor: '';
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
@hoverBoxShadow: '';
@downBackgroundColor: #F1F1F1;
@downBackgroundImage: '';
@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@activeBackgroundColor: #EAEAEA;
@activeBackgroundImage: none;
@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
@iconMargin: 0.6em;
@iconHoverOpacity: 0.85;
@iconButtonOpacity: 0.9;
@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
@floatedMargin: 0.25em;
@animationDuration: 0.3s;
@animationEasing: ease;
@fadeScaleHigh: 1.5;
@fadeScaleLow: 0.75;
@mini: 0.7rem;
@tiny: 0.8rem;
@small: 0.875rem;
@medium: 1rem;
@large: 1.125rem;
@big: 1.25rem;
@huge: 1.375rem;
@massive: 1.5rem;

298
src/theme/semantic/global.variables

@ -0,0 +1,298 @@
/*******************************
Global Variables
*******************************/
/*-------------------
Paths
--------------------*/
@imageFolder : '../images';
/*-------------------
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;';
/*-------------------
Icons
--------------------*/
/* Width of largest icon */
@iconWidth : 1.23em;
/*******************************
BG Colors
*******************************/
@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
@transparentBlack : rgba(0, 0, 0, 0.05);
@strongTransparentBlack : rgba(0, 0, 0, 0.10);
@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
@transparentWhite : rgba(255, 255, 255, 0.05);
@strongTransparentWhite : rgba(255, 255, 255, 0.01);
/*******************************
Colors
*******************************/
/*-------------------
Background
--------------------*/
/*--- Colors ---*/
@blue : #6ECFF5;
@green : #5BBD72;
@orange : #E96633;
@pink : #D9499A;
@purple : #564F8A;
@red : #D95C5C;
@teal : #00B5AD;
@yellow : #FFCB08;
@primaryColor : @teal;
@secondaryColor : @black;
@tertiaryColor : @orange;
/*--- Emotive ---*/
@positiveColor : @green;
@negativeColor : @red;
@infoColor : #E6F4F9;
@warningColor : #96904D;
@errorColor : #D95C5C;
/*--- Neutrals ---*/
@darkBlack : #232323;
@black : #555555;
@lightBlack : #999999;
@darkGrey : #AAAAAA;
@grey : #CCCCCC;
@lightGrey : #DCDDDE;
@white : #FFFFFF;
@offWhite : #FAFAFA;
@darkWhite : #F0F0F0;
/*-------------------
Text Colors
--------------------*/
@darkTextColor : rgba(0, 0, 0, 0.85);
@textColor : rgba(0, 0, 0, 0.7);
@lightTextColor : rgba(0, 0, 0, 0.4);
@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
--------------------*/
@circularRadius : 500rem;
@borderColor : rgba(0, 0, 0, 0.1);
@selectedBorderColor : rgba(0, 0, 0, 0.2);
@solidBorderColor : #DDDDDD;
@whiteBorderColor : rgba(255, 255, 255, 0.3);
@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
/*-------------------
Sizes
--------------------*/
@mini : 0.7em;
@tiny : 0.8em;
@small : 0.875em;
@medium : 1em;
@large : 1.125em;
@big : 1.25em;
@huge : 1.375em;
@massive : 1.5em;
/*-------------------
Transitions
--------------------*/
@transitionDuration : 0.25s;
@transitionEasing : ease;
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
@disabledOpacity: 0.3;
/*-------------------
Hover
--------------------*/
/*--- Colors ---*/
@primaryColorHover : darken( saturate(@primaryColor, 10), 5);
@secondaryColorHover : darken( saturate(@secondaryColor, 10), 5);
@tertiaryColorHover : darken( saturate(@tertiaryColor, 10), 5);
@blueHover : darken( saturate(@blue, 10), 5);
@greenHover : darken( saturate(@green, 10), 5);
@orangeHover : darken( saturate(@orange, 10), 5);
@pinkHover : darken( saturate(@pink, 10), 5);
@purpleHover : darken( saturate(@purple, 10), 5);
@redHover : darken( saturate(@red, 10), 5);
@tealHover : darken( saturate(@teal, 10), 5);
@yellowHover : darken( saturate(@yellow, 10), 5);
/*--- Emotive ---*/
@positiveColorHover : darken( saturate(@positiveColor, 10), 5);
@negativeColorHover : darken( saturate(@negativeColor, 10), 5);
@infoColorHover : darken( saturate(@infoColor, 10), 5);
@warningColorHover : darken( saturate(@warningColor, 10), 5);
@errorColorHover : darken( saturate(@errorColor, 10), 5);
/*--- Neutrals ---*/
@darkBlackHover : darken( saturate(@darkBlack, 10), 5);
@blackHover : darken( saturate(@black, 10), 5);
@lightBlackHover : darken( saturate(@lightBlack, 10), 5);
@lightGreyHover : darken( saturate(@lightGrey, 10), 5);
@greyHover : darken( saturate(@grey, 10), 5);
@darkGreyHover : darken( saturate(@darkGrey, 10), 5);
@whiteHover : darken( saturate(@white, 10), 5);
@offWhiteHover : darken( saturate(@offWhite, 10), 5);
@darkWhiteHover : darken( saturate(@darkWhite, 10), 5);
@facebookHoverColor : darken( saturate(@facebookColor, 10), 5);
@twitterHoverColor : darken( saturate(@twitterColor, 10), 5);
@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 5);
@linkedInHoverColor : darken( saturate(@linkedInColor, 10), 5);
@youtubeHoverColor : darken( saturate(@youtubeColor, 10), 5);
@instagramHoverColor : darken( saturate(@instagramColor, 10), 5);
@pinterestHoverColor : darken( saturate(@pinterestColor, 10), 5);
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
@primaryColorDown : darken(@primaryColor, 15);
@secondaryColorDown : darken(@secondaryColor, 15);
@tertiaryColorDown : darken(@tertiaryColor, 15);
@blueDown : darken(@blue, 15);
@greenDown : darken(@green, 15);
@orangeDown : darken(@orange, 15);
@pinkDown : darken(@pink, 15);
@purpleDown : darken(@purple, 15);
@redDown : darken(@red, 15);
@tealDown : darken(@teal, 15);
@yellowDown : darken(@yellow, 15);
/*--- Emotive ---*/
@positiveColorDown : darken(@positiveColor, 15);
@negativeColorDown : darken(@negativeColor, 15);
@infoColorDown : darken(@infoColor, 15);
@warningColorDown : darken(@warningColor, 15);
@errorColorDown : darken(@errorColor, 15);
/*--- Neutrals ---*/
@darkBlackDown : darken(@darkBlack, 15);
@blackDown : darken(@black, 15);
@lightBlackDown : darken(@lightBlack, 15);
@lightGreyDown : darken(@lightGrey, 15);
@greyDown : darken(@grey, 15);
@darkGreyDown : darken(@darkGrey, 15);
@whiteDown : darken(@white, 15);
@offWhiteDown : darken(@offWhite, 15);
@darkWhiteDown : darken(@darkWhite, 15);
@facebookDownColor : darken(@facebookColor, 15);
@twitterDownColor : darken(@twitterColor, 15);
@googlePlusDownColor : darken(@googlePlusColor, 15);
@linkedInDownColor : darken(@linkedInColor, 15);
@youtubeDownColor : darken(@youtubeColor, 15);
@instagramDownColor : darken(@instagramColor, 15);
@pinterestDownColor : darken(@pinterestColor, 15);
/*-------------------
Active
--------------------*/
/*--- Standard ---*/
@primaryColorActive : darken(@primaryColor, 10);
@secondaryColorActive : darken(@secondaryColor, 10);
@tertiaryColorActive : darken(@tertiaryColor, 10);
@blueActive : darken(@blue, 10);
@greenActive : darken(@green, 10);
@orangeActive : darken(@orange, 10);
@pinkActive : darken(@pink, 10);
@purpleActive : darken(@purple, 10);
@redActive : darken(@red, 10);
@tealActive : darken(@teal, 10);
@yellowActive : darken(@yellow, 10);
/*--- Emotive ---*/
@positiveColorActive : darken(@positiveColor, 10);
@negativeColorActive : darken(@negativeColor, 10);
@infoColorActive : darken(@infoColor, 10);
@warningColorActive : darken(@warningColor, 10);
@errorColorActive : darken(@errorColor, 10);
/*--- Neutrals ---*/
@darkBlackActive : darken(@darkBlack, 10);
@blackActive : darken(@black, 10);
@lightBlackActive : darken(@lightBlack, 10);
@lightGreyActive : darken(@lightGrey, 10);
@greyActive : darken(@grey, 10);
@darkGreyActive : darken(@darkGrey, 10);
@whiteActive : darken(@white, 10);
@offWhiteActive : darken(@offWhite, 10);
@darkWhiteActive : darken(@darkWhite, 10);
@facebookActiveColor : darken(@facebookColor, 10);
@twitterActiveColor : darken(@twitterColor, 10);
@googlePlusActiveColor : darken(@googlePlusColor, 10);
@linkedInActiveColor : darken(@linkedInColor, 10);
@youtubeActiveColor : darken(@youtubeColor, 10);
@instagramActiveColor : darken(@instagramColor, 10);
@pinterestActiveColor : darken(@pinterestColor, 10);

25
src/theme/semantic/header.variables

@ -0,0 +1,25 @@
/*-------------------
Globals Used
--------------------*/
// @white
// @blue
// @red
// @green
// @purple
// @teal
// @black
/*-------------------
Modified Globals
--------------------*/
@tiny: 1em;
@small: 1.1em;
@medium: 1.33em;
@large: 1.75em;
@huge: 2em;
/*-------------------
Header Variables
--------------------*/

39
src/theme/semantic/icon.variables

@ -0,0 +1,39 @@
/*-------------------
Globals Used
--------------------*/
/*
@disabledOpacity
*/
/*-------------------
Icon Variables
--------------------*/
@iconFont: '../fonts/icons';
@opacity: 0.75;
@width: 1.23em;
@height: 1em;
@margin: 0.25em;
@directionMargin: 0.5em;
@linkDuration: 0.3s;
@loadingDuration: 2s;
@circularSize: 2em;
@circularPadding: 0.5em 0.35em;
@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@squareSize: 2em;
@squarePadding: 0.5em 0.35em;
@squareShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
@small: 0.875em;
@medium: 1em;
@large: 1.5em;
@big: 2em;
@huge: 4em;
@massive: 8em;

27
src/theme/semantic/segment.variables

@ -0,0 +1,27 @@
/*-------------------
Globals Used
--------------------*/
/*
@borderColor
*/
/*-------------------
Segment Variables
--------------------*/
@verticalPadding: 1em;
@horizontalPadding: 1em;
@margin: 1em;
@borderRadius: 5px;
@pageGridMargin: 2 * @verticalPadding;
@coloredBorderSize: 0.2em;
@secondaryColor: #FAF9FA;
@tertiaryColor: #EBEBEB;
Loading…
Cancel
Save