7 changed files with 261 additions and 1 deletions
Split View
Diff Options
-
3build/less/themes/packages/classic/elements/button.overrides
-
96build/less/themes/packages/classic/elements/button.variables
-
3build/less/themes/packages/raised/elements/button.overrides
-
12build/less/themes/packages/raised/elements/button.variables
-
0build/less/themes/packages/round/elements/button.overrides
-
143build/less/themes/packages/round/elements/button.variables
-
5server/files/stylesheets/semantic.css
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
@ -0,0 +1,96 @@ |
|||
/******************************* |
|||
Button |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Element |
|||
--------------------*/ |
|||
|
|||
/* Shadow */ |
|||
@shadowDistance: 0em; |
|||
@shadowOffset: (@shadowDistance / 2); |
|||
@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; |
|||
@backgroundColor: #FAFAFA; |
|||
@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09)); |
|||
@boxShadow: |
|||
0px 0px 0px 1px @borderColor inset, |
|||
@shadowBoxShadow |
|||
; |
|||
|
|||
/* Padding */ |
|||
@verticalPadding: 0.8em; |
|||
@horizontalPadding: 1.5em; |
|||
|
|||
|
|||
/*------------------- |
|||
Group |
|||
--------------------*/ |
|||
|
|||
@groupBoxShadow: none; |
|||
@groupButtonBoxShadow: |
|||
0px 0px 0px 1px @borderColor inset, |
|||
@shadowBoxShadow |
|||
; |
|||
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; |
|||
@groupButtonOffset: 0px 0px 0px -1px; |
|||
@verticalGroupOffset: 0px 0px -1px 0px; |
|||
|
|||
/*------------------- |
|||
States |
|||
--------------------*/ |
|||
|
|||
/* Hovered */ |
|||
@hoverBackgroundColor: ''; |
|||
@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)); |
|||
@hoverBoxShadow: ''; |
|||
@hoverColor: @hoveredTextColor; |
|||
@iconHoverOpacity: 0.85; |
|||
|
|||
/* Focused */ |
|||
@focusBackgroundColor: ''; |
|||
@focusBackgroundImage: ''; |
|||
@focusBoxShadow: |
|||
0px 0px 1px rgba(81, 167, 232, 0.8) inset, |
|||
0px 0px 3px 2px rgba(81, 167, 232, 0.8) |
|||
; |
|||
@focusColor: @hoveredTextColor; |
|||
@iconFocusOpacity: 0.85; |
|||
|
|||
/* Pressed Down */ |
|||
@downBackgroundColor: #F1F1F1; |
|||
@downBackgroundImage: ''; |
|||
@downBoxShadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important |
|||
; |
|||
@downColor: @pressedTextColor; |
|||
|
|||
/* Active */ |
|||
@activeBackgroundColor: #DADADA; |
|||
@activeBackgroundImage: none; |
|||
@activeColor: @selectedTextColor; |
|||
@activeBoxShadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important |
|||
; |
|||
|
|||
/* Active + Hovered */ |
|||
@activeHoverBackgroundColor: #DADADA; |
|||
@activeHoverBackgroundImage: none; |
|||
@activeHoverBoxShadow: |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, |
|||
0px 1px 4px 0px rgba(0, 0, 0, 0.1) inset !important |
|||
; |
|||
@activeHoverColor: @selectedTextColor; |
|||
|
|||
/* Loading */ |
|||
@loadingBackgroundColor: #FFFFFF; |
|||
|
|||
/*------------------- |
|||
Types |
|||
--------------------*/ |
|||
|
|||
/* Labeled Icon */ |
|||
@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05); |
|||
@labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset; |
|||
@labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset; |
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
@ -0,0 +1,12 @@ |
|||
/******************************* |
|||
Button |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Element |
|||
--------------------*/ |
|||
|
|||
/* Shadow */ |
|||
@shadowDistance: 0.2em; |
|||
@shadowOffset: (@shadowDistance / 2); |
|||
@shadowBoxShadow: 0px -@shadowDistance 0px 0px @borderColor inset; |
@ -0,0 +1,143 @@ |
|||
/******************************* |
|||
Button |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Element |
|||
--------------------*/ |
|||
@borderRadius: @circularRadius; |
|||
@textTransform: uppercase; |
|||
@backgroundColor: #FFFFFF; |
|||
@backgroundImage: none; |
|||
@fontWeight: bold; |
|||
@textColor: rgba(0, 0, 0, 0.6); |
|||
@boxShadow: |
|||
0px 0px 0px 2px rgba(0, 0, 0, 0.2) inset |
|||
; |
|||
|
|||
/* Padding */ |
|||
@verticalPadding: 1.25em; |
|||
@horizontalPadding: 3em; |
|||
|
|||
/* Icon */ |
|||
@iconOpacity: 0.8; |
|||
@iconDistance: 0.4em; |
|||
@iconTransition: opacity @transitionDuration @transitionEasing; |
|||
@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); |
|||
@iconVerticalAlign: top; |
|||
|
|||
/* Loader */ |
|||
@loaderPath: "@{imagePath}/loader-mini.gif"; |
|||
@hugeLoaderPath: "@{imagePath}/loader-small.gif"; |
|||
@massiveLoaderPath: "@{imagePath}/loader-medium.gif"; |
|||
|
|||
/*------------------- |
|||
Group |
|||
--------------------*/ |
|||
|
|||
@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; |
|||
|
|||
|
|||
/*------------------- |
|||
States |
|||
--------------------*/ |
|||
|
|||
@hoverBackgroundColor: #FAFAFA; |
|||
@hoverBackgroundImage: none; |
|||
@hoverBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset; |
|||
|
|||
@downBackgroundColor: #F0F0F0; |
|||
@downBackgroundImage: none; |
|||
@downBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.35) inset !important; |
|||
|
|||
@activeBackgroundColor: #DDDDDD; |
|||
@activeBackgroundImage: none; |
|||
@activeBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset !important; |
|||
|
|||
@loadingBackgroundColor: #FFFFFF; |
|||
|
|||
/*------------------- |
|||
Types |
|||
--------------------*/ |
|||
|
|||
/* Labeled Icon */ |
|||
@labeledIconWidth: 1em + (@verticalPadding * 2); |
|||
@labeledIconBackgroundColor: transparent; |
|||
@labeledIconPadding: (@horizontalPadding + 1em); |
|||
@labeledIconBorder: rgba(0, 0, 0, 0.05); |
|||
@labeledIconColor: ''; |
|||
|
|||
@labeledIconLeftShadow: none; |
|||
@labeledIconRightShadow: none; |
|||
|
|||
/* Basic */ |
|||
@basicBoxShadow: 0px 0px 0px 1px @borderColor; |
|||
@iconOffset: 0.05em; |
|||
@basicLoadingColor: #FFFFFF; |
|||
|
|||
@basicHoverBackground: #FAFAFA; |
|||
@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); |
|||
|
|||
@basicDownBackground: rgba(0, 0, 0, 0.02); |
|||
@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
|
|||
@basicActiveBackground: @transparentBlack; |
|||
@basicActiveColor: @selectedTextColor; |
|||
|
|||
/* Basic Inverted */ |
|||
@basicInvertedBackground: transparent; |
|||
@basicInvertedHoverBackground: transparent; |
|||
@basicInvertedDownBackground: @transparentWhite; |
|||
@basicInvertedActiveBackground: @transparentWhite; |
|||
|
|||
@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5); |
|||
@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; |
|||
@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; |
|||
@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; |
|||
|
|||
@basicInvertedColor: @darkWhite; |
|||
@basicInvertedHoverColor: @darkWhiteHover; |
|||
@basicInvertedDownColor: @darkWhiteActive; |
|||
@basicInvertedActiveColor: @invertedTextColor; |
|||
|
|||
|
|||
/* Basic Group */ |
|||
@basicGroupBorder: 1px solid @borderColor; |
|||
@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor; |
|||
|
|||
/*------------------- |
|||
Variations |
|||
--------------------*/ |
|||
|
|||
/* Colors */ |
|||
@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)); |
|||
@coloredBoxShadow: @shadowBoxShadow; |
|||
|
|||
/* Compact */ |
|||
@compactVerticalPadding: (@verticalPadding * 0.75); |
|||
@compactHorizontalPadding: (@horizontalPadding * 0.75); |
|||
|
|||
/* Attached */ |
|||
@attachedOffset: -1px; |
|||
@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
@attachedHorizontalPadding: 0.75em; |
|||
|
|||
/* Floated */ |
|||
@floatedMargin: 0.25em; |
|||
|
|||
/* Animated */ |
|||
@animationDuration: 0.3s; |
|||
@animationEasing: ease; |
|||
@fadeScaleHigh: 1.5; |
|||
@fadeScaleLow: 0.75; |
|||
|
|||
/* Sizing */ |
|||
@mini: 0.7rem; |
|||
@tiny: 0.8rem; |
|||
@small: 0.875rem; |
|||
@medium: 1rem; |
|||
@large: 1.125rem; |
|||
@big: 1.25rem; |
|||
@huge: 1.375rem; |
|||
@massive: 1.5rem; |
|||
|
Write
Preview
Loading…
Cancel
Save