Tile-button
Button to be used within tile-grid. Used in combination with button component classes.
Variables
$config
Variable Type: Map
Module Settings
$config: (
"border-radius" : true,
"description-size" : "small-x",
"line-height" : true,
"padding" : (1em 0.5em),
"row-margin" : 0.5em,
"icon-font-size" : 1.5em,
"icon-margin" : 1em,
"icon-opacity" : 0.5,
"transition-enabled" : true,
"transition-duration" : true,
"transition-properties" : true
);
File Information
- File: _tile-button.scss
- Group: tile-button
- Type: variable
- Lines (comments): 38-47
- Lines (code): 49-61
Map Properties
Name | Type | Default | Description |
---|---|---|---|
border-radius | Dimension | true | The border radius of the tile button. If set to true, will use the element.scss property for "border-radius". |
description-size | String | small-x | The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss. |
line-height | Dimension | true | The line-height of the tile-button. If set to true, will use the typography.scss property for "line-height-densest". |
padding | Dimension | (1em 0.5em) | The padding of the tile button |
row-margin | Dimension | 0.5em | The margin between rows. |
icon-font-size | Dimension | 1.5em | The font size of the icon. |
icon-margin | Dimension | 1em | The margin for the icon. |
icon-opacity | Number | 0.5 | The opacity of the icon. |
Mixins
set()
Mixin
Change modules $config
File Information
- File: _tile-button.scss
- Group: tile-button
- Type: mixin
- Lines (comments): 63-66
- Lines (code): 68-70
Examples
@include ulu.component-tile-button-set(( "property" : value ));
Parameters
Name | Type | Description |
---|---|---|
$changes | Map |
Map of changes |
Require
styles()
Mixin
Prints component styles
File Information
- File: _tile-button.scss
- Group: tile-button
- Type: mixin
- Lines (comments): 82-84
- Lines (code): 86-130
Examples
@include ulu.component-tile-button-styles();
Require
Functions
get()
Function
Get a config option
File Information
- File: _tile-button.scss
- Group: tile-button
- Type: function
- Lines (comments): 72-75
- Lines (code): 77-80
Examples
@include ulu.component-tile-button-get("property");
Parameters
Name | Type | Description |
---|---|---|
$name | Map |
Name of property |