browser prefixation

mixins

text-shadow

@mixin text-shadow($shadows) { ... }

Description

Text Shadow Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$shadows

the desired CSS3 text-shadow value

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$shadows

the desired CSS3 box-shadow value

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$radius

the desired CSS3 border-radius value

Numbernone

Example

Example

.foo {
    @include border-radius(0.8333em);
}

Author

  • Alin Seba

box-sizing

@mixin box-sizing($sizing) { ... }

Description

Box Sizing Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$sizing

the desired CSS3 box-sizing value

Stringnone

Example

Example

.foo {
    @include box-sizing(border-box); // Example of setting the box-sizing CSS3 property to 'border-box'
}

Used by

Author

  • Alin Seba

outline

@mixin outline($outline) { ... }

Description

Outline Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$outline

the desired CSS outline value

Stringnone

Example

Example

.foo {
    @include outline(0); // Example of setting the outline CSS property to 0 (disabling it)
}

Requires

Used by

Author

  • Alin Seba

transition

@mixin transition($transition) { ... }

Description

Transition Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$transition

the desired CSS3 transition rule

Stringnone

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

Used by

Author

  • Alin Seba

transform

@mixin transform($transform) { ... }

Description

Transform Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$transform

the desired CSS3 transform rule

Stringnone

Example

Example

.foo {
    @include transform(none !important); // Example of unsetting the CSS3 property transform on a specific element
}

Requires

Used by

Author

  • Alin Seba

animation

@mixin animation($animation) { ... }

Description

Animation Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$animation

the desired CSS3 animation rule

Stringnone

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

Used by

Author

  • Alin Seba

keyframes

@mixin keyframes($name) { ... }

Description

Keyframes Browser Agent Prefixation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

the name of your CSS keyframe

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$opacity

the opacity value

Numbernone

Example

Example

.foo {
    @include opacity(0.5);
}

Requires

Used by

Author

  • Alin Seba

prefix

@mixin prefix($property, $value, $prefixes) { ... }

Description

Mixin helper to output vendor prefixes

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

Unprefixed CSS property

Stringnone
$value

Raw CSS value

Anynone
$prefixes

List of prefixes to output

Listnone

Requires

Used by

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

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

clearfix

%clearfix { ... }

Description

Micro Clearfix - general properties

Example

Micro Clearfix

.foo {
    @extend %clearfix;
    &:before, &:after {
        @extend %clearfix-ba;
    }
    &:after {
        @extend %clearfix-a;
    }
}

Used by

coloring

functions

tint

@function tint($color, $percentage) { ... }

Description

Slightly lighten a color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

color to tint

Colornone
$percentage

percentage of $color in returned color

Numbernone

Returns

Color

shade

@function shade($color, $percentage) { ... }

Description

Slightly darken a color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

color to shade

Colornone
$percentage

percentage of $color in returned color

Numbernone

Returns

Color

rgbToHsla

@function rgbToHsla($r, $g, $b, $a) { ... }

Description

RGB to HSLA Convertor

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$r

red color value

Colornone
$g

green color value

Colornone
$b

blue color value

Colornone
$a

alpha (opacity) value

Colornone

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

grid

$grid: 960px;

Description

The predefined width of a small grid

Type

Variable

Used by

See

gridCols

$gridCols: 1;

Description

The predefined number of grid cells

Type

Variable

Used by

See

gridCell

$gridCell: $grid / $gridCols;

Description

Grid cell size

Type

Variable

Used by

See

gridMargin

$gridMargin: 20px;

Description

The white space value between grid cells

Type

Variable

Used by

See

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

gridMarginTotal

$gridMarginTotal: $gridMargin * $gridMargins;

Description

Variable used to generate other predefined grid variations

Type

Variable

See

grid-1

$grid-1: $grid;

Description

Predefined grid of 960px

Type

Variable

See

grid-2

$grid-2: ($grid - $gridMarginTotal) / 2;

Description

Predefined grid of 480px

Type

Variable

See

grid-3

$grid-3: ($grid - $gridMarginTotal) / 3;

Description

Predefined grid of 320px

Type

Variable

See

grid-4

$grid-4: ($grid - $gridMarginTotal) / 4;

Description

Predefined grid of 240px

Type

Variable

See

grid-5

$grid-5: ($grid - $gridMarginTotal) / 5;

Description

Predefined grid of 192px

Type

Variable

See

grid-6

$grid-6: ($grid - $gridMarginTotal) / 6;

Description

Predefined grid of 160px

Type

Variable

See

grid-7

$grid-7: ($grid - $gridMarginTotal) / 7;

Description

Predefined grid of 137px

Type

Variable

See

grid-8

$grid-8: ($grid - $gridMarginTotal) / 8;

Description

Predefined grid of 120px

Type

Variable

See

grid-9

$grid-9: ($grid - $gridMarginTotal) / 9;

Description

Predefined grid of 106px

Type

Variable

See

grid-10

$grid-10: ($grid - $gridMarginTotal) / 10;

Description

Predefined grid of 96px

Type

Variable

See

gridBig-1

$gridBig-1: $grid-1 * 2;

Description

Predefined grid of 1920px

Type

Variable

See

gridBig-2

$gridBig-2: $grid-2 * 2;

Description

Predefined grid of 960px

Type

Variable

See

gridBig-3

$gridBig-3: $grid-3 * 2;

Description

Predefined grid of 640px

Type

Variable

See

gridBig-4

$gridBig-4: $grid-4 * 2;

Description

Predefined grid of 480px

Type

Variable

See

gridBig-5

$gridBig-5: $grid-5 * 2;

Description

Predefined grid of 384px

Type

Variable

See

gridBig-6

$gridBig-6: $grid-6 * 2;

Description

Predefined grid of 320px

Type

Variable

See

gridBig-7

$gridBig-7: $grid-7 * 2;

Description

Predefined grid of 274px

Type

Variable

See

gridBig-8

$gridBig-8: $grid-8 * 2;

Description

Predefined grid of 240px

Type

Variable

See

gridBig-9

$gridBig-9: $grid-9 * 2;

Description

Predefined grid of 213px

Type

Variable

See

gridBig-10

$gridBig-10: $grid-10 * 2;

Description

Predefined grid of 192px

Type

Variable

See

mixins

generate-grid

@mixin generate-grid($grid, $gridCols, $gridMargin: 0) { ... }

Description

Grid Generator

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$grid

the width of your grid

Numbernone
$gridCols

the number of cells for your grid

Numbernone
$gridMargin

the white space between your grid cells

Number0

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

Author

  • Alin Seba

generate-layout

@mixin generate-layout($layoutWidth, $layoutMargin, $layoutPadding, $layoutCols, $layoutCellWidth: (), $layoutCellMargin: 0) { ... }

Description

Layout Generator

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$layoutWidth

the width of your layout

Numbernone
$layoutMargin

the margin of your layout

Numbernone
$layoutPadding

the padding of your layout

Numbernone
$layoutCols

the number of columns your layout will contain

Numbernone
$layoutCellWidth

the widths of each column from your layout

List()
$layoutCellMargin

the white space between columns

Number0

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

Author

  • Alin Seba

generate-cols

@mixin generate-cols($containerCols, $containerColsMargin, $containerWidth: auto) { ... }

Description

Generator of Container with Columns

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$containerCols

number of columns

Numbernone
$containerColsMargin

the white space between columns

Numbernone
$containerWidth

the width of your container

Numberauto

Example

Example

.foo {
    @include generate-cols(4, 2%); // Generates a container with 4 columns and a white-space of 2%
}

Requires

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

breakpoint-1 width

Numbernone
$type

breakpoint-1 type (min / max)

Stringnone
$width2

breakpoint-2 width

Numbernone
$type2

breakpoint-2 type (min / max)

Stringnone
$medium

medium to apply (screen, print, etc.)

Stringnone
$customQuery

your own custom query

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$breakpoint

Breakpoint

Stringnone

Example

Responsive Breakpoints

.foo {
  color: red;
  @include respond-to("small") {
    color: blue;
  }
}

Throws

  • No value found for #{$breakpoint}.

Requires

variables

[private] breakpoints

$breakpoints: (
  "small":  (max-width: 640px),
  "medium": (min-width: 641px)
  // Define more breakpoints in here
) !global;

Type

Map

Used by

See

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