jlukic
11 years ago
11 changed files with 577 additions and 271 deletions
Unified 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