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" : white,
  "background-color-image" : rgba(96, 255, 255, 0.89),
  "background-color-back" : rgb(178, 178, 178),
  "bottom-shadow" : true,
  "border" : 1px solid black,
  "border-color-hover" : black,
  "border-radius" : 6px,
  "control-button-border-focus" : 2px solid blue,
  "icon-color" : pink,
  "icon-color-hover" : aqua,
  "icon-color-image" : aqua,
  "icon-color-image-hover" : pink,
  "image-opacity" : 0.7,
  "padding" : 1.5rem,
  "title-color" : red,
  "title-color-hover" : green,
  "title-color-image" : black,
  "title-color-image-hover" : blue,
);
File Information
  • File: _flipcard.scss
  • Group: flipcard
  • Type: variable
  • Lines (comments): 12-33
  • Lines (code): 35-60

Map Properties

Name Type Default Description
background-color Color white Background color of the text-only flipcard front.
background-color-image Color rgba(96, 255, 255, 0.89) 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 rgb(178, 178, 178) Background color on the back of the flipcard.
border Color 1px solid black Flipcard border.
border-radius Dimension 6px Border radius for flipcard.
border-color-hover Color black border color when hovered.
control-button-border-focus CssValue 2px solid blue Border that shows when focused.
anim-duration Time 430ms Animation duration.
anim-delay Time 200ms Animation delay.
padding Dimension 1.5rem Padding for the flipcard.
title-color Color red Color of the front page text.
title-color-hover Color green Color of the front page text when hovered or focused.
icon-color Color pink Color of the icon.
icon-color-hover Color aqua Color of the icon when hovered or focused.
icon-color-image Color aqua Color of the icon when using an image.
icon-color-image-hover Color pink Color of the icon when using an image and hovered or focused.
title-color-image Color black Color of the front page text when using an image.
title-color-image-hover Color blue 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): 62-65
  • Lines (code): 67-69

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): 71-73
  • Lines (code): 75-77

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): 88-92
  • Lines (code): 94-310

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): 79-82
  • Lines (code): 84-86

Examples

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

Parameters

Name Type Description
$name Map Name of property

Require