Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. set-sizes()
    3. styles()
  3. Functions
    1. get()

Flipcard

Flipcard (content revealed on backside of card after click)

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "anim-delay" : 200ms,
  "anim-duration" : 430ms,
  "anim-front-close": "FlipcardFrontClose",
  "anim-front-open": "FlipcardFrontOpen",
  "anim-back-open": "FlipcardBackOpen",
  "anim-timing-function": ease-out,
  "background-color" : "background",
  "background-color-image" : "accent",
  "background-color-back" : "placeholder-background",
  "bottom-shadow" : true,
  "border-width" : 1px,
  "border-width-focus" : 3px,
  "border-color" : "rule-light",
  "border-color-hover" : "rule",
  "border-color-focus" : "focus",
  "border-radius" : 6px,
  "icon-color" : "type-secondary",
  "icon-color-hover" : "link-hover",
  "icon-color-image" : "white",
  "icon-color-image-hover" : "white",
  "image-opacity" : 0.7,
  "padding" : 1.5rem,
  "title-color" : "type",
  "title-color-hover" : "link-hover",
  "title-color-image" : "white",
  "title-color-image-hover" : "white",
);
File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: variable
  • Lines (comments): 13-40
  • Lines (code): 42-69

Map Properties

Name Type Default Description
background-color Color "background" Background color of the text-only flipcard front.
background-color-image Color "accent" Background color of the image flipcard front.
image-opacity Number 0.7 Opacity of the image to allow shading from the background color.
background-color-back Color "placeholder-background" Background color on the back of the flipcard.
border-width Dimension 1px Flipcard border width
border-color Color "rule-light" Flipcard border color
border-radius Dimension 6px Border radius for flipcard.
border-color-hover Color "rule" border color when hovered.
border-width-focus Dimension 3px Border width that shows when focused.
border-color-focus Color "focus" border color when focused
anim-duration Time 430ms Animation duration.
anim-delay Time 200ms Animation delay.
anim-front-close String "FlipcardFrontClose" Animation name for front close.
anim-front-open String "FlipcardFrontOpen" Animation name for front open.
anim-back-open String "FlipcardBackOpen" Animation name for back open.
anim-timing-function CssValue ease-out Animation timing function.
padding Dimension 1.5rem Padding for the flipcard.
title-color Color "type" Color of the front page text.
title-color-hover Color "link-hover" Color of the front page text when hovered or focused.
icon-color Color "type-secondary" Color of the icon.
icon-color-hover Color "link-hover" Color of the icon when hovered or focused.
icon-color-image Color "white" Color of the icon when using an image.
icon-color-image-hover Color "white" Color of the icon when using an image and hovered or focused.
title-color-image Color "white" Color of the front page text when using an image.
title-color-image-hover Color "white" Color of the front page text when using an image and hovered or focused.
bottom-shadow Boolean true Boolean that enables a bottom shadow to the image flipcard.

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: mixin
  • Lines (comments): 71-74
  • Lines (code): 76-78

Examples

@include ulu.component-flipcard-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

set-sizes()

Mixin

Set sizes map

File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: mixin
  • Lines (comments): 80-82
  • Lines (code): 84-86

Parameters

Name Type Description
$changes Map Map of changes
$merge-mode String Merge mode see utils.map-merge() [null

Require

styles()

Mixin

Prints component styles

File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: mixin
  • Lines (comments): 97-101
  • Lines (code): 103-325

Demo

View

Examples

scss
@include ulu.component-flipcard-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: function
  • Lines (comments): 88-91
  • Lines (code): 93-95

Examples

@include ulu.component-flipcard-get("property");

Parameters

Name Type Description
$name Map Name of property

Require