ADD-BUTTON (LMU Workspace Module )
src/app/shared/components/add-button/templates
Demo Section
Each variation will be presented in the following section.
Readme
addButton (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/add-button
Fields
add-button.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.addButtonClasses | String | '' |
Modifier classes for component |
| settings.addButtonContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.addButtonField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $add-button-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-add-button:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
add-button.hbs
<div class="c-add-button{{#if settings.addButtonContextClass}}--{{settings.addButtonContextClass}}{{else}}--default{{/if}}{{#if settings.addButtonClasses}} {{settings.addButtonClasses}}{{/if}}"
data-css="c-add-button">
<a href="javascript:void" data-js-module="overlay-handler">
<div class="add-button__wrapper" data-js-item="overlay-handler-cta"
data-content='{ "html": {"htmlCssContent": "", "htmlContent": ""}}'>
<div class="add-button__content-wrapper">
<div class="add-button--title">
<span>+</span>
</div>
<div class="add-button--content">
<div class="add-button__content-link">Tool hinzufügen</div>
</div>
</div>
</div>
</a>
</div>
Data File
add-button.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"addButtonContextClass": "default",
"addButtonClasses": ""
},
"content": {}
}
}
}
Styles
add-button.scss
/* ===================================================
component: add-button
=================================================== */
$add-button-mobile-w: 100%;
$add-button-mobile-h: 54px;
$background-green: #00883A;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-add-button"] {
button {
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
button:focus {
outline: $background-green auto 1px;
padding-right: 5px;
}
.add-button__wrapper {
width: $add-button-mobile-w;
height: $add-button-mobile-h;
color: #F5F5F5;
display: flex;
justify-content: space-between;
.add-button__content-wrapper {
.add-button--title {
background: #00883A;
width: 54px;
height: 54px;
color: $color-white;
text-align: center;
padding-top: 17px;
float: left;
span {
font-family: Roboto-Bold;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0.3px;
text-align: center;
}
}
.add-button--content {
position: relative;
float: left;
.add-button__content-link {
padding: 0 0 0 20px;
text-decoration: none;
font-size: 1.5rem;
line-height: (24/15);
letter-spacing: .028rem;
font-family: $font-bold;
transition: color $animation-duration-std $animation-easing-std;
margin-top: 16px;
color: $color-green;
&.a11y-focus-key {
outline-offset: -2px;
}
}
}
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-add-button--default { }
HTML Output
Default
<div class="c-add-button--default" data-css="c-add-button">
<a href="javascript:void" data-js-module="overlay-handler">
<div class="add-button__wrapper" data-js-item="overlay-handler-cta" data-content='{ "html": {"htmlCssContent": "", "htmlContent": ""}}'>
<div class="add-button__content-wrapper">
<div class="add-button--title">
<span>+</span>
</div>
<div class="add-button--content">
<div class="add-button__content-link">Tool hinzufügen</div>
</div>
</div>
</div>
</a>
</div>