browser prefixation
mixins
text-shadow
@mixin text-shadow($shadows) { ... }
Description
Text Shadow Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$shadows | the desired CSS3 text-shadow value | String | —none |
Example
Example
.foo {
@include text-shadow(0 -0.1em 0 unquote("hsla(0, 0%, 0%, 0.2)"));
}
Author
Alin Seba
box-shadow
@mixin box-shadow($shadows) { ... }
Description
Box Shadow Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$shadows | the desired CSS3 box-shadow value | String | —none |
Example
Example
.foo {
@include box-shadow(inset 0 0 0.1em unquote("hsla(0, 0%, 100%, 0.5)"));
}
Author
Alin Seba
border-radius
@mixin border-radius($radius) { ... }
Description
Border Radius Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$radius | the desired CSS3 border-radius value | Number | —none |
Example
Example
.foo {
@include border-radius(0.8333em);
}
Author
Alin Seba
box-sizing
@mixin box-sizing($sizing) { ... }
Description
Box Sizing Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$sizing | the desired CSS3 box-sizing value | String | —none |
Example
Example
.foo {
@include box-sizing(border-box); // Example of setting the box-sizing CSS3 property to 'border-box'
}
Used by
- [mixin]
generate-layout
- [mixin]
generate-cols
Author
Alin Seba
outline
@mixin outline($outline) { ... }
Description
Outline Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$outline | the desired CSS outline value | String | —none |
Example
Example
.foo {
@include outline(0); // Example of setting the outline CSS property to 0 (disabling it)
}
Requires
- [mixin]
outline
Used by
- [mixin]
outline
Author
Alin Seba
transition
@mixin transition($transition) { ... }
Description
Transition Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$transition | the desired CSS3 transition rule | String | —none |
Example
Example
.foo {
@include transition(width 0.2s linear); // Example of setting the transition on some element's width property with the speed of 0.2s (seconds) and the easing effect of 'linear'
}
Requires
- [mixin]
transition
Used by
- [mixin]
transition
Author
Alin Seba
transform
@mixin transform($transform) { ... }
Description
Transform Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$transform | the desired CSS3 transform rule | String | —none |
Example
Example
.foo {
@include transform(none !important); // Example of unsetting the CSS3 property transform on a specific element
}
Requires
- [mixin]
transform
Used by
- [mixin]
transform
Author
Alin Seba
animation
@mixin animation($animation) { ... }
Description
Animation Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$animation | the desired CSS3 animation rule | String | —none |
Example
Example
.foo {
@include animation(score-change 0.35s infinite alternate ease-out); // Example of an animation which name is 'score-change', its animation speed is 0.35s (seconds), it plays forever (infinite), is alternating its keyframes and has the easing effect of 'ease-out'
}
Requires
- [mixin]
animation
Used by
- [mixin]
animation
Author
Alin Seba
keyframes
@mixin keyframes($name) { ... }
Description
Keyframes Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | the name of your CSS keyframe | String | —none |
Example
Example
.foo {
@include keyframes(bet-increase) { // Example of some sort of color flickering
0% { background-color : #B4BD32; color : rgba(255, 255, 255, 0.85); } 100% { background-color : #838a24; color : rgba(255, 255, 255, 0.85); }
}
}
Author
Alin Seba
opacity
@mixin opacity($opacity) { ... }
Description
Opacity Browser Agent Prefixation
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$opacity | the opacity value | Number | —none |
Example
Example
.foo {
@include opacity(0.5);
}
Requires
- [mixin]
opacity
Used by
- [mixin]
opacity
Author
Alin Seba
prefix
@mixin prefix($property, $value, $prefixes) { ... }
Description
Mixin helper to output vendor prefixes
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$property | Unprefixed CSS property | String | —none |
$value | Raw CSS value | Any | —none |
$prefixes | List of prefixes to output | List | —none |
Requires
- [mixin]
prefix
Used by
- [mixin]
prefix
Author
Hugo Giraudel
clearfixing
placeholders
clearfix-ba
%clearfix-ba { ... }
Description
Micro Clearfix - :before and :after properties
Example
Micro Clearfix
.foo {
@extend %clearfix;
&:before, &:after {
@extend %clearfix-ba;
}
&:after {
@extend %clearfix-a;
}
}
Used by
- [mixin]
generate-grid
- [mixin]
generate-layout
- [mixin]
generate-cols
clearfix-a
%clearfix-a { ... }
Description
Micro Clearfix - :after properties
Example
Micro Clearfix
.foo {
@extend %clearfix;
&:before, &:after {
@extend %clearfix-ba;
}
&:after {
@extend %clearfix-a;
}
}
Used by
- [mixin]
generate-grid
- [mixin]
generate-layout
- [mixin]
generate-cols
clearfix
%clearfix { ... }
Description
Micro Clearfix - general properties
Example
Micro Clearfix
.foo {
@extend %clearfix;
&:before, &:after {
@extend %clearfix-ba;
}
&:after {
@extend %clearfix-a;
}
}
Used by
- [mixin]
generate-grid
- [mixin]
generate-layout
- [mixin]
generate-cols
coloring
functions
tint
@function tint($color, $percentage) { ... }
Description
Slightly lighten a color
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | color to tint | Color | —none |
$percentage | percentage of | Number | —none |
Returns
Color
shade
@function shade($color, $percentage) { ... }
Description
Slightly darken a color
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | color to shade | Color | —none |
$percentage | percentage of | Number | —none |
Returns
Color
rgbToHsla
@function rgbToHsla($r, $g, $b, $a) { ... }
Description
RGB to HSLA Convertor
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$r | red color value | Color | —none |
$g | green color value | Color | —none |
$b | blue color value | Color | —none |
$a | alpha (opacity) value | Color | —none |
Returns
Color
Example
Example
.foo {
color: rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3)); // This will output the HSL color 'hsla(0, 0%, 100%, 1)', which is white
}
Links
Author
Alin Seba
color-schemes
variables
linkColor
$linkColor: 22,159,216;
Description
Color Schemes - Link RGB Color
Type
Variable
linkColorHEX
$linkColorHEX: unquote("#169fd8");
Description
Color Schemes - Link Color HEX Color
Type
Variable
accentColor
$accentColor: 22,159,216;
Description
Color Schemes - Accent RGB Color
Type
Variable
accentColorHEX
$accentColorHEX: unquote("#169fd8");
Description
Color Schemes - Accent HEX Color
Type
Variable
buttonColor
$buttonColor: 36,123,163;
Description
Color Schemes - Button Text RGB Color
Type
Variable
buttonColorHEX
$buttonColorHEX: unquote("#247ba3");
Description
Color Schemes - Button Text HEX Color
Type
Variable
generators
variables
gridBig
$gridBig: 1920px;
Description
The predefined width of a big grid
Type
Variable
See
- [mixin]
generate-grid
grid
$grid: 960px;
Description
The predefined width of a small grid
Type
Variable
Used by
- [mixin]
generate-grid
See
- [mixin]
generate-grid
gridCols
$gridCols: 1;
Description
The predefined number of grid cells
Type
Variable
Used by
- [mixin]
generate-grid
See
- [mixin]
generate-grid
gridCell
$gridCell: $grid / $gridCols;
Description
Grid cell size
Type
Variable
Used by
- [mixin]
generate-grid
See
- [mixin]
generate-grid
gridMargin
$gridMargin: 20px;
Description
The white space value between grid cells
Type
Variable
Used by
- [mixin]
generate-grid
See
- [mixin]
generate-grid
gridMargins
$gridMargins: $gridCols - 1;
Description
The number of white spaces between cells, without the last one (which will not have a margin at all, since the white space is on the right side of cells)
Type
Variable
See
- [mixin]
generate-grid
gridMarginTotal
$gridMarginTotal: $gridMargin * $gridMargins;
Description
Variable used to generate other predefined grid variations
Type
Variable
See
- [mixin]
generate-grid
grid-1
$grid-1: $grid;
Description
Predefined grid of 960px
Type
Variable
See
- [mixin]
generate-grid
grid-2
$grid-2: ($grid - $gridMarginTotal) / 2;
Description
Predefined grid of 480px
Type
Variable
See
- [mixin]
generate-grid
grid-3
$grid-3: ($grid - $gridMarginTotal) / 3;
Description
Predefined grid of 320px
Type
Variable
See
- [mixin]
generate-grid
grid-4
$grid-4: ($grid - $gridMarginTotal) / 4;
Description
Predefined grid of 240px
Type
Variable
See
- [mixin]
generate-grid
grid-5
$grid-5: ($grid - $gridMarginTotal) / 5;
Description
Predefined grid of 192px
Type
Variable
See
- [mixin]
generate-grid
grid-6
$grid-6: ($grid - $gridMarginTotal) / 6;
Description
Predefined grid of 160px
Type
Variable
See
- [mixin]
generate-grid
grid-7
$grid-7: ($grid - $gridMarginTotal) / 7;
Description
Predefined grid of 137px
Type
Variable
See
- [mixin]
generate-grid
grid-8
$grid-8: ($grid - $gridMarginTotal) / 8;
Description
Predefined grid of 120px
Type
Variable
See
- [mixin]
generate-grid
grid-9
$grid-9: ($grid - $gridMarginTotal) / 9;
Description
Predefined grid of 106px
Type
Variable
See
- [mixin]
generate-grid
grid-10
$grid-10: ($grid - $gridMarginTotal) / 10;
Description
Predefined grid of 96px
Type
Variable
See
- [mixin]
generate-grid
gridBig-1
$gridBig-1: $grid-1 * 2;
Description
Predefined grid of 1920px
Type
Variable
See
- [mixin]
generate-grid
gridBig-2
$gridBig-2: $grid-2 * 2;
Description
Predefined grid of 960px
Type
Variable
See
- [mixin]
generate-grid
gridBig-3
$gridBig-3: $grid-3 * 2;
Description
Predefined grid of 640px
Type
Variable
See
- [mixin]
generate-grid
gridBig-4
$gridBig-4: $grid-4 * 2;
Description
Predefined grid of 480px
Type
Variable
See
- [mixin]
generate-grid
gridBig-5
$gridBig-5: $grid-5 * 2;
Description
Predefined grid of 384px
Type
Variable
See
- [mixin]
generate-grid
gridBig-6
$gridBig-6: $grid-6 * 2;
Description
Predefined grid of 320px
Type
Variable
See
- [mixin]
generate-grid
gridBig-7
$gridBig-7: $grid-7 * 2;
Description
Predefined grid of 274px
Type
Variable
See
- [mixin]
generate-grid
gridBig-8
$gridBig-8: $grid-8 * 2;
Description
Predefined grid of 240px
Type
Variable
See
- [mixin]
generate-grid
gridBig-9
$gridBig-9: $grid-9 * 2;
Description
Predefined grid of 213px
Type
Variable
See
- [mixin]
generate-grid
gridBig-10
$gridBig-10: $grid-10 * 2;
Description
Predefined grid of 192px
Type
Variable
See
- [mixin]
generate-grid
mixins
generate-grid
@mixin generate-grid($grid, $gridCols, $gridMargin: 0) { ... }
Description
Grid Generator
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$grid | the width of your grid | Number | —none |
$gridCols | the number of cells for your grid | Number | —none |
$gridMargin | the white space between your grid cells | Number | 0 |
Example
Examples
.foo {
@include generate-grid(1280px, 5, 20px); // Example of grid with the width of 1280px, 5 cells and a value of 20px for white space between cells
}
.foo {
@include generate-grid(960px, 4); // Example of grid with the width of 960px and 4 cells
}
Requires
- [placeholder]
clearfix
- [placeholder]
clearfix-ba
- [placeholder]
clearfix-a
- [variable]
gridCell
- [variable]
grid
- [variable]
gridMargin
- [variable]
gridCols
Author
Alin Seba
generate-layout
@mixin generate-layout($layoutWidth, $layoutMargin, $layoutPadding, $layoutCols, $layoutCellWidth: (), $layoutCellMargin: 0) { ... }
Description
Layout Generator
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$layoutWidth | the width of your layout | Number | —none |
$layoutMargin | the margin of your layout | Number | —none |
$layoutPadding | the padding of your layout | Number | —none |
$layoutCols | the number of columns your layout will contain | Number | —none |
$layoutCellWidth | the widths of each column from your layout | List | () |
$layoutCellMargin | the white space between columns | Number | 0 |
Example
Examples
.foo {
@include generate-layout(1920px, 0, 0, 4, (300px, 400px, 500px, 600px, 700px), 20px); // Example of layout with width: 1920px, margin: 0, padding: 0, 4 columns, (sizes of columns in pixels), and a white space of 20px
}
.foo {
@include generate-layout(960px, 0, 0, 3, (360px, 240px, 360px)); // Example of layout with width: 960px, margin: 0, padding: 0, 3 columns, (sizes of columns in pixels), and no white space
}
.foo {
@include generate-layout(100, 0, 2, 3, (25, 50, 25), 2); // Example of layout with width: 100%, margin: 0, padding: 2%, (sizes of columns in percents), and a white space of 2%
}
Requires
- [mixin]
box-sizing
- [placeholder]
clearfix
- [placeholder]
clearfix-ba
- [placeholder]
clearfix-a
Author
Alin Seba
generate-cols
@mixin generate-cols($containerCols, $containerColsMargin, $containerWidth: auto) { ... }
Description
Generator of Container with Columns
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$containerCols | number of columns | Number | —none |
$containerColsMargin | the white space between columns | Number | —none |
$containerWidth | the width of your container | Number | auto |
Example
Example
.foo {
@include generate-cols(4, 2%); // Generates a container with 4 columns and a white-space of 2%
}
Requires
- [mixin]
box-sizing
- [placeholder]
clearfix
- [placeholder]
clearfix-ba
- [placeholder]
clearfix-a
Author
Alin Seba
headings
variables
fontSizeRatio
$fontSizeRatio: 2.75;
Description
The Ratio Value for Font Sizes
Type
Variable
fontSizeDivider
$fontSizeDivider: 3.5;
Description
The Ratio Divider Value for Font Sizes
Type
Variable
mainHeaderSize
$mainHeaderSize: $baseFontSize * $fontSizeRatio;
Description
H1 Heading Font Size - calculated by multiplying the $baseFontSize
with the $fontSizeRatio
Type
Variable
headerL2
$headerL2: $mainHeaderSize - $baseFontSize / $fontSizeDivider;
Description
H2 Heading Font Size - calculated by subtracting the division between $baseFontSize
and $fontSizeDivider
from the $mainHeaderSize
, which is the H1 heading element
Type
Variable
headerL3
$headerL3: $headerL2 - $baseFontSize / $fontSizeDivider;
Description
H3 Heading Font Size - calculated by subtracting the division between $baseFontSize
and $fontSizeDivider
from the $mainHeaderSize
, which is the H1 heading element
Type
Variable
headerL4
$headerL4: $headerL3 - $baseFontSize / $fontSizeDivider;
Description
H4 Heading Font Size - calculated by subtracting the division between $baseFontSize
and $fontSizeDivider
from the $mainHeaderSize
, which is the H1 heading element
Type
Variable
headerL5
$headerL5: $headerL4 - $baseFontSize / $fontSizeDivider;
Description
H5 Heading Font Size - calculated by subtracting the division between $baseFontSize
and $fontSizeDivider
from the $mainHeaderSize
, which is the H1 heading element
Type
Variable
headerL6
$headerL6: $headerL5 - $baseFontSize / $fontSizeDivider;
Description
H6 Heading Font Size - calculated by subtracting the division between $baseFontSize
and $fontSizeDivider
from the $mainHeaderSize
, which is the H1 heading element
Type
Variable
media-queries
mixins
media-query
@mixin media-query($width, $type, $width2, $type2, $medium, $customQuery) { ... }
Description
Media Queries
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$width | breakpoint-1 width | Number | —none |
$type | breakpoint-1 type (min / max) | String | —none |
$width2 | breakpoint-2 width | Number | —none |
$type2 | breakpoint-2 type (min / max) | String | —none |
$medium | medium to apply (screen, print, etc.) | String | —none |
$customQuery | your own custom query | String | —none |
Example
Examples of using
@include media-query(1400, max) { // Example for Max
.foo {
float: none;
width: auto;
}
}
@include media-query(1400, min) { // Example for Min
.foo {
border-right: none;
}
}
@include media-query(700, min, 1400, max) { // Example for Min and Max
.foo {
margin: 0;
}
}
@include media-query("", "", "", "", print) { // Example for Print // leave the values unneeded empty in order to know the order of the parameter
/* print styles */
}
@include media-query("", "", "", "", screen, "(max-width: 505px) and (min-width: 303px)") { // Example for Custom Query // Custom Media Query
.foo {
margin: 0;
}
}
Author
Alin Seba
respond-to
@mixin respond-to($breakpoint) { ... }
Description
Responsive Manager
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$breakpoint | Breakpoint | String | —none |
Example
Responsive Breakpoints
.foo {
color: red;
@include respond-to("small") {
color: blue;
}
}
Throws
No value found for
#{$breakpoint}
.
Requires
- [variable]
breakpoints
variables
[private] breakpoints
$breakpoints: (
"small": (max-width: 640px),
"medium": (min-width: 641px)
// Define more breakpoints in here
) !global;
Type
Map
Used by
- [mixin]
respond-to
See
- [mixin]
respond-to
project-configs
variables
documentID
$documentID: '#myDocument';
Description
The ID of the Project's Document (html tag)
Type
Variable
documentClass
$documentClass: '.my-document';
Description
The Class of the Project's Document (html tag)
Type
Variable
frameworkID
$frameworkID: '#myFramework';
Description
The ID of the Project's Framework (body tag)
Type
Variable
frameworkClass
$frameworkClass: '.my-framework';
Description
The Class of the Project's Framework (body tag)
Type
Variable
baseFontSize
$baseFontSize: 18px;
Description
The Base Font Size in Pixels
Type
Variable
fontSize
$fontSize: 1em;
Description
The Font Size in Ems (to have relative font sizes across your project)
Type
Variable
fontFamily
$fontFamily: 'Nunito', sans-serif;
Description
The Font Family used for all the Elements
Type
Variable
headersFontFamily
$headersFontFamily: 'Nunito', sans-serif;
Description
The Font Family used for the Headings
Type
Variable
fontSetting
$fontSetting: optimizeLegibility;
Description
The Font Setting for the text-rendering CSS property (use 'optimizeLegibility' for better visuals or 'optimizeSpeed' for higher load times)
Type
Variable
fontWeight
$fontWeight: 200;
Description
The Default Font Weight Value
Type
Variable
thickFontWeight
$thickFontWeight: 700;
Description
The Thicker Font Weight Value
Type
Variable
headerFontWeight
$headerFontWeight: 400;
Description
The Headings Font Weight Value
Type
Variable
fontStyle
$fontStyle: normal;
Description
The Font Style Value
Type
Variable
lineHeight
$lineHeight: 1.5;
Description
The Text Line Height Value
Type
Variable
headersLineHeight
$headersLineHeight: 1.5;
Description
The Headings Line Height Value
Type
Variable
baseMargin
$baseMargin: 0;
Description
The Base Margin Value (used for white space value)
Type
Variable
basePadding
$basePadding: 0;
Description
The Base Padding Value (used for the inside spacing value of elements)
Type
Variable
linkColor
$linkColor: 238,83,31;
Description
Link RGB Color
Type
Variable
linkColorHEX
$linkColorHEX: unquote("#EE531F");
Description
Link HEX Color
Type
Variable
mainColor
$mainColor: 91,91,106;
Description
Main RGB Color
Type
Variable
mainColorHEX
$mainColorHEX: unquote("#5b5b6a");
Description
Main HEX Color
Type
Variable
negativeColor
$negativeColor: 255,255,255;
Description
Negative RGB Color
Type
Variable
negativeColorHEX
$negativeColorHEX: unquote("#fff");
Description
Negative HEX Color
Type
Variable
blackColor
$blackColor: 0,0,0;
Description
Black RGB Color
Type
Variable
blackColorHEX
$blackColorHEX: unquote("#000");
Description
Black HEX Color
Type
Variable
accentColor
$accentColor: 238,83,31;
Description
Accent RGB Color
Type
Variable
accentColorHEX
$accentColorHEX: unquote("#EE531F");
Description
Accent HEX Color
Type
Variable
buttonColor
$buttonColor: 246,72,3;
Description
Button Text RGB Color
Type
Variable
buttonColorHEX
$buttonColorHEX: unquote("#f64803");
Description
Button Text HEX Color
Type
Variable
mainBackground
$mainBackground: 246,246,246;
Description
Main Background RGB Color
Type
Variable
mainBackgroundHEX
$mainBackgroundHEX: unquote("#f6f6f6");
Description
Main Background HEX Color
Type
Variable
elementsBackground
$elementsBackground: 241,241,241;
Description
Elements Background RGB Color - the background color used for UI elements such as boxes
Type
Variable
elementsBackgroundHEX
$elementsBackgroundHEX: unquote("#f1f1f1");
Description
Elements Background HEX Color - the background color used for UI elements such as boxes
Type
Variable
elementsActionBackground
$elementsActionBackground: 246,246,246;
Description
Elements Action Background RGB Color - the background color used for UI elements when they change their state (such as on hover)
Type
Variable
elementsActionBackgroundHEX
$elementsActionBackgroundHEX: unquote("#f6f6f6");
Description
Elements Action Background HEX Color - the background color used for UI elements when they change their state (such as on hover)
Type
Variable
elementsBackground2
$elementsBackground2: 230,230,230;
Description
Elements Background RGB Color 2 - the alternative background color used for UI elements in other states or situations
Type
Variable
elementsBackground2HEX
$elementsBackground2HEX: unquote("#e6e6e6");
Description
Elements Background HEX Color 2 - the alternative background color used for UI elements in other states or situations
Type
Variable
tipColor
$tipColor: 22,216,161;
Description
Tip Message Text RGB Color
Type
Variable
tipColorHEX
$tipColorHEX: unquote("#16D8A1");
Description
Tip Message Text HEX Color
Type
Variable
tipBack
$tipBack: 22,216,161;
Description
Tip Message Background RGB Color
Type
Variable
tipBackHEX
$tipBackHEX: unquote("#16D8A1");
Description
Tip Message Background HEX Color
Type
Variable
pendingColor
$pendingColor: 238,83,31;
Description
Pending / Warning State Text RGB Color
Type
Variable
pendingColorHEX
$pendingColorHEX: unquote("#EE531F");
Description
Pending / Warning State Text HEX Color
Type
Variable
pendingBack
$pendingBack: 238,83,31;
Description
Pending / Warning State Background RGB Color
Type
Variable
pendingBackHEX
$pendingBackHEX: unquote("#EE531F");
Description
Pending / Warning State Background HEX Color
Type
Variable
successColor
$successColor: 0,205,172;
Description
Success / Valid State Text RGB Color
Type
Variable
successColorHEX
$successColorHEX: unquote("#00cdac");
Description
Success / Valid State Text HEX Color
Type
Variable
successBack
$successBack: 0,205,172;
Description
Success / Valid State Background RGB Color
Type
Variable
successBackHEX
$successBackHEX: unquote("#00cdac");
Description
Success / Valid State Background HEX Color
Type
Variable
errorColor
$errorColor: 204,42,65;
Description
Error / Invalid State Text RGB Color
Type
Variable
errorColorHEX
$errorColorHEX: unquote("#CC2A41");
Description
Error / Invalid State Text HEX Color
Type
Variable
errorBack
$errorBack: 204,42,65;
Description
Error / Invalid State Background RGB Color
Type
Variable
errorBackHEX
$errorBackHEX: unquote("#CC2A41");
Description
Error / Invalid State Background HEX Color
Type
Variable
infoColor
$infoColor: 22,159,216;
Description
Info / Notification State Text RGB Color
Type
Variable
infoColorHEX
$infoColorHEX: unquote("#169fd8");
Description
Info / Notification State Text HEX Color
Type
Variable
infoBack
$infoBack: 22,159,216;
Description
Info / Notification State Background RGB Color
Type
Variable
infoBackHEX
$infoBackHEX: unquote("#169fd8");
Description
Info / Notification State Background HEX Color
Type
Variable
neutralBack
$neutralBack: 230,230,230;
Description
Neutral (Grey) Background RGB Color
Type
Variable
neutralBackHEX
$neutralBackHEX: unquote("#e6e6e6");
Description
Neutral (Grey) Background HEX Color
Type
Variable
complementaryColor
$complementaryColor: 91,91,106;
Description
Color Scheme Complementary RGB Color
Type
Variable
complementaryColorHEX
$complementaryColorHEX: unquote("#5b5b6a");
Description
Color Scheme Complementary HEX Color
Type
Variable
defaultTextShadow
$defaultTextShadow: 0 0.1em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.2);
Description
Default Text Shadow Value
Type
Variable
defaultInvertTextShadow
$defaultInvertTextShadow: 0 -0.1em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.2);
Description
Default Inverted Text Shadow Value
Type
Variable
customInvertTextShadow
$customInvertTextShadow: 0 0.1em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.35);
Description
Custom Inverted Text Shadow Value
Type
Variable
defaultOutsetBoxShadow
$defaultOutsetBoxShadow: 0 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1);
Description
Default Outset Box Shadow Value
Type
Variable
customOutsetBoxShadow
$customOutsetBoxShadow: 0.0833em 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1);
Description
Custom Outset Box Shadow Value
Type
Variable
customOutsetBoxShadow2
$customOutsetBoxShadow2: 0 0.0833em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.1);
Description
Custom Outset Box Shadow Value 2
Type
Variable
defaultInsetBoxShadow
$defaultInsetBoxShadow: inset 0 0 0.1em rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.5);
Description
Default Inset Box Shadow Value
Type
Variable
customInsetBoxShadow
$customInsetBoxShadow: inset 0 0 0.1em rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.5), inset 0.075em 0 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.25);
Description
Custom Inset Box Shadow Value
Type
Variable
customInsetBoxShadow2
$customInsetBoxShadow2: inset 0 0.1666em 0 rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.025);
Description
Custom Inset Box Shadow Value 2
Type
Variable
customInsetBoxShadow3
$customInsetBoxShadow3: inset 0 0 0.5em rgbToHsla(nth($blackColor, 1), nth($blackColor, 2), nth($blackColor, 3), 0.25);
Description
Custom Inset Box Shadow Value 3
Type
Variable
customInsetBoxShadow4
$customInsetBoxShadow4: inset 0 -0.0833em 0 rgbToHsla(nth($negativeColor, 1), nth($negativeColor, 2), nth($negativeColor, 3), 0.1);
Description
Custom Inset Box Shadow Value 4
Type
Variable
defaultBorderRadius
$defaultBorderRadius: 0.25em;
Description
Default Border Radius Value
Type
Variable
customBorderRadius
$customBorderRadius: 0.3333em;
Description
Custom Border Radius Value
Type
Variable
customBorderRadius2
$customBorderRadius2: 1em;
Description
Default Border Radius Value 2
Type
Variable
customBorderRadius3
$customBorderRadius3: 0 0 0.5em 0.5em;
Description
Default Border Radius Value 3
Type
Variable
defaultTransition
$defaultTransition: all 0.2s linear;
Description
Default Transition Rule
Type
Variable
customTransition
$customTransition: margin 0.1s linear;
Description
Custom Transition Rule
Type
Variable
customTransition2
$customTransition2: width 0.2s linear;
Description
Custom Transition Rule 2
Type
Variable
customTransition3
$customTransition3: background-color 0.2s linear;
Description
Custom Transition Rule 3
Type
Variable
noTransition
$noTransition: none;
Description
No Transition Rule
Type
Variable
defaultTextShadowElements
$defaultTextShadowElements: ".text-shadow";
Description
Elements with the Default Text Shadow
Type
List
defaultInvertTextShadowElements
$defaultInvertTextShadowElements: "";
Description
Elements with the Default Inverted Text Shadow
Type
List
customInvertTextShadowElements
$customInvertTextShadowElements: "";
Description
Elements with the Custom Inverted Text Shadow
Type
List
defaultOutsetBoxShadowElements
$defaultOutsetBoxShadowElements: ".box-shadow", ".box", ".message", ".message-error", ".message-alert", ".message-warning", ".message-info", ".message-ok", ".message-neutral", ".comments", ".fixed", ".timeline .item .content", ".feedback .quote";
Description
Elements with the Default Outset Box Shadow
Type
List
defaultInsetBoxShadowElements
$defaultInsetBoxShadowElements: ".button", "button";
Description
Elements with the Default Inset Box Shadow
Type
List
customOutsetBoxShadowElements
$customOutsetBoxShadowElements: "uikit-dropdown .menu", ".select .list", ".uk-dropdown";
Description
Elements with the Custom Outset Box Shadow
Type
List
customInsetBoxShadowElements
$customInsetBoxShadowElements: "";
Description
Elements with the Custom Inset Box Shadow
Type
List
customInsetBoxShadow2Elements
$customInsetBoxShadow2Elements: ".input.text", ".input.editable:focus", "input[type='text'], textarea";
Description
Elements with the Custom Inset Box Shadow 2
Type
List
customInsetBoxShadow3Elements
$customInsetBoxShadow3Elements: "";
Description
Elements with the Custom Inset Box Shadow 3
Type
List
customInsetBoxShadow4Elements
$customInsetBoxShadow4Elements: ".button", "button";
Description
Elements with the Custom Inset Box Shadow 4
Type
List
defaultBorderRadiusElements
$defaultBorderRadiusElements: ".border-radius", ".border-radius .button", ".border-radius button", ".border-radius .quote", ".border-radius blockquote", ".border-radius .tag", ".border-radius .input.checkbox.custom + label", ".border-radius .input.text", ".border-radius input[type='text'], .border-radius textarea", ".border-radius .comments";
Description
Elements with the Default Border Radius
Type
List
customBorderRadiusElements
$customBorderRadiusElements: ".rounded";
Description
Elements with the Custom Border Radius
Type
List
customBorderRadius2Elements
$customBorderRadius2Elements: ".timeline .list .item .dot", ".round";
Description
Elements with the Custom Border Radius 2
Type
List
customBorderRadius3Elements
$customBorderRadius3Elements: ".flyer.border-radius .action";
Description
Elements with the Custom Border Radius 3
Type
List
defaultTransitionElements
$defaultTransitionElements: "body", "a", ".transition", ".featured-outside .list", ".moving", ".moving-left", ".moving-right";
Description
Elements with the Default Transition
Type
List
customTransitionElements
$customTransitionElements: ".moving", ".moving.right";
Description
Elements with the Custom Transition
Type
List
customTransition2Elements
$customTransition2Elements: ".input.expanding";
Description
Elements with the Default Transition 2
Type
List
customTransition3Elements
$customTransition3Elements: ".input.text", ".input.editable:focus", "input[type='text']", "textarea";
Description
Elements with the Default Transition 3
Type
List
noTransitionElements
$noTransitionElements: ".button", "button";
Description
Elements with No Transitions
Type
List
defaultTextShadowCollection
$defaultTextShadowCollection: ();
Description
Elements Collection with Default Text Shadow
Type
List
customInvertTextShadowCollection
$customInvertTextShadowCollection: ();
Description
Elements Collection with Custom Inverted Text Shadow
Type
List
defaultOutsetBoxShadowCollection
$defaultOutsetBoxShadowCollection: ();
Description
Elements Collection with Default Outset Box Shadow
Type
List
defaultInsetBoxShadowCollection
$defaultInsetBoxShadowCollection: ();
Description
Elements Collection with Default Inset Box Shadow
Type
List
customOutsetBoxShadowCollection
$customOutsetBoxShadowCollection: ();
Description
Elements Collection with Custom Outset Box Shadow
Type
List
customInsetBoxShadowCollection
$customInsetBoxShadowCollection: ();
Description
Elements Collection with Custom Inset Box Shadow
Type
List
customInsetBoxShadow2Collection
$customInsetBoxShadow2Collection: ();
Description
Elements Collection with Custom Inset Box Shadow 2
Type
List
customInsetBoxShadow3Collection
$customInsetBoxShadow3Collection: ();
Description
Elements Collection with Custom Inset Box Shadow 3
Type
List
customInsetBoxShadow4Collection
$customInsetBoxShadow4Collection: ();
Description
Elements Collection with Custom Inset Box Shadow 4
Type
List
defaultBorderRadiusCollection
$defaultBorderRadiusCollection: ();
Description
Elements Collection with Default Border Radius
Type
List
customBorderRadiusCollection
$customBorderRadiusCollection: ();
Description
Elements Collection with Custom Border Radius
Type
List
customBorderRadius2Collection
$customBorderRadius2Collection: ();
Description
Elements Collection with Custom Border Radius 2
Type
List
customBorderRadius3Collection
$customBorderRadius3Collection: ();
Description
Elements Collection with Custom Border Radius 3
Type
List
defaultTransitionCollection
$defaultTransitionCollection: ();
Description
Elements Collection with Default Transition
Type
List
customTransitionCollection
$customTransitionCollection: ();
Description
Elements Collection with Custom Transition
Type
List
customTransition2Collection
$customTransition2Collection: ();
Description
Elements Collection with Custom Transition 2
Type
List
customTransition3Collection
$customTransition3Collection: ();
Description
Elements Collection with Custom Transition 3
Type
List
noTransitionCollection
$noTransitionCollection: ();
Description
Elements Collection with No Transition
Type
List