From 843f140554729b89246aa840449139068645bdd6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 12 Nov 2013 11:50:12 -0500 Subject: [PATCH] Experimenting with theme loading structure --- src/elements/button.less | 80 +------ src/elements/header.less | 30 +-- src/elements/icon.less | 225 ++++++++------------ src/elements/segment.less | 30 +-- src/semantic.config | 17 ++ src/theme/semantic/button.overrides | 3 + src/theme/semantic/button.variables | 74 +++++++ src/theme/semantic/global.variables | 298 +++++++++++++++++++++++++++ src/theme/semantic/header.variables | 25 +++ src/theme/semantic/icon.variables | 39 ++++ src/theme/semantic/segment.variables | 27 +++ 11 files changed, 577 insertions(+), 271 deletions(-) create mode 100755 src/semantic.config create mode 100755 src/theme/semantic/button.overrides create mode 100755 src/theme/semantic/button.variables create mode 100755 src/theme/semantic/global.variables create mode 100755 src/theme/semantic/header.variables create mode 100755 src/theme/semantic/icon.variables create mode 100755 src/theme/semantic/segment.variables diff --git a/src/elements/button.less b/src/elements/button.less index 21e645e1a..a8911b609 100755 --- a/src/elements/button.less +++ b/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); /******************************* diff --git a/src/elements/header.less b/src/elements/header.less index aa8367471..cd48b3643 100755 --- a/src/elements/header.less +++ b/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); /******************************* diff --git a/src/elements/icon.less b/src/elements/icon.less index 6786a7a11..a2db76f94 100755 --- a/src/elements/icon.less +++ b/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; -} +} \ No newline at end of file diff --git a/src/elements/segment.less b/src/elements/segment.less index a98462c54..c0cd07ee3 100755 --- a/src/elements/segment.less +++ b/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"; /******************************* diff --git a/src/semantic.config b/src/semantic.config new file mode 100755 index 000000000..816ccec4b --- /dev/null +++ b/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"; + diff --git a/src/theme/semantic/button.overrides b/src/theme/semantic/button.overrides new file mode 100755 index 000000000..c5c53367f --- /dev/null +++ b/src/theme/semantic/button.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/theme/semantic/button.variables b/src/theme/semantic/button.variables new file mode 100755 index 000000000..9c4d3fd6c --- /dev/null +++ b/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; diff --git a/src/theme/semantic/global.variables b/src/theme/semantic/global.variables new file mode 100755 index 000000000..5177cf0b5 --- /dev/null +++ b/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); diff --git a/src/theme/semantic/header.variables b/src/theme/semantic/header.variables new file mode 100755 index 000000000..8f87b771f --- /dev/null +++ b/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 +--------------------*/ \ No newline at end of file diff --git a/src/theme/semantic/icon.variables b/src/theme/semantic/icon.variables new file mode 100755 index 000000000..e1be3da1b --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/theme/semantic/segment.variables b/src/theme/semantic/segment.variables new file mode 100755 index 000000000..6993072fc --- /dev/null +++ b/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; +