jlukic
11 years ago
11 changed files with 577 additions and 271 deletions
Split View
Diff Options
-
80src/elements/button.less
-
30src/elements/header.less
-
225src/elements/icon.less
-
30src/elements/segment.less
-
17src/semantic.config
-
3src/theme/semantic/button.overrides
-
74src/theme/semantic/button.variables
-
298src/theme/semantic/global.variables
-
25src/theme/semantic/header.variables
-
39src/theme/semantic/icon.variables
-
27src/theme/semantic/segment.variables
@ -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"; |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -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; |
|||
@ -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); |
|||
@ -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 |
|||
--------------------*/ |
|||
@ -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; |
|||
@ -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; |
|||
|
|||
Write
Preview
Loading…
Cancel
Save