Each variation will be presented in the following section.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id pariatur voluptatibus reiciendis commodi, labore officiis eveniet totam sequi minus illum. Odit nulla nihil mollitia, veritatis et voluptatibus ducimus iure cupiditate.
component)This blueprint is based on the blueprint of Veams.
Veams#5.0.0veams install bp absolute/filepath/to/popover
popover.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.popoverClasses | String | '' |
Modifier classes for component |
| settings.popoverContextClass | String | 'default' |
Context class of component |
| Parameter | Type | Description |
|---|---|---|
| content.popoverField | String | Please add a description! |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $popover-my-custom-var | 0px |
Please add a description! |
There are modifier classes you can add to c-popover:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
<div class="c-popover{{#if settings.popoverContextClass}}--{{settings.popoverContextClass}}{{else}}--default{{/if}}{{#if settings.popoverClasses}} {{settings.popoverClasses}}{{/if}}"
data-js-module="popover" data-css="c-popover">
<h3>Popover CSS Example</h3>
<div class="popover__container">
<div class="popover">
<div class="popover__wrapper">
<button data-js-item="toggle-popover" class="popover__close">Schließen</button>
<div class="popover__content">
<h1>Deine Mailbox</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id pariatur voluptatibus reiciendis commodi, labore officiis eveniet totam sequi minus illum. Odit nulla nihil mollitia, veritatis et voluptatibus ducimus iure cupiditate.
</p>
</div>
<div class="popover__footer">
<div class="popover__footer-link-container">
<a href="#" class="popover__footer-link is-more">mehr erfahren</a>
</div>
<div class="popover__footer-link-container">
<a href="javascript:void" data-js-item="delete-item" class="popover__footer-link is-delete">Tool löschen</a>
</div>
</div>
</div>
</div>
<a data-js-item="toggle-popover" href="javascript:void">
Click to toggle popover
</a>
</div>
</div>
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"popoverContextClass": "default",
"popoverClasses": ""
},
"content": {}
}
}
}
/* ===================================================
component: popover
=================================================== */
/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
// Animation Variables
$popover-duration: 300ms !default;
$popover-ease-method: ease !default;
$popover-color-bg: #000 !default;
$popover-color-btn-close: #fff !default;
$popover-mobile-w: 300px;
$popover-mobile-h: 372.2px;
$popover-tablet-w: 500px;
$popover-tablet-h: 298.6px;
$popover-desktop-w: 609px;
$popover-desktop-h: 313.9px;
$color-red-delete: #E42828;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-popover"] {
.popover__container {
position: relative;
width: 300px;
height: 30px;
}
.popover {
position: absolute;
background: #ffffff;
box-shadow: 3px 3px 5px 0;
border: 3px solid #00883a;
color: #000;
display: none;
width: $popover-mobile-w;
height: $popover-mobile-h;
opacity: 100%;
bottom: 42px;
z-index: 9;
left: 0;
text-align: left;
@include bp($bp-tablet-p) {
width: $popover-tablet-w;
height: $popover-tablet-h;
}
@include bp($bp-desktop-m) {
width: $popover-desktop-w;
height: $popover-desktop-h;
}
.popover__wrapper {
height: 100%;
width: 100%;
z-index: 9999;
}
.popover__close {
@include reset-btn();
position: absolute;
height: 17px;
right: 17px;
top: 20px;
width: 20px;
z-index: 9997;
cursor: pointer;
font-size: .0001rem;
&:hover,
&.a11y-focus-key {
&::before {
opacity: 1;
}
&::after {
opacity: 0.8;
}
}
&::before,
&::after {
@include pseudo();
@include centering(hv);
transition: opacity $animation-duration-std * 2
$animation-easing-std;
}
&::before {
@include sprites-icon-close-white();
opacity: 0;
}
&::after {
@include sprites-icon-close-green60();
opacity: 1;
}
@include hcm() {
font-size: 1.2rem;
width: auto;
color: $color-dark;
&::before {
background-image: none;
}
&::after {
background-image: none;
}
}
}
.popover__content {
margin-bottom: 28px;
h1 {
font-family: Roboto-Bold;
font-size: 20px;
color: #202321;
letter-spacing: 0.3px;
line-height: 28px;
margin-top: 45px;
margin-left: 20px;
}
p {
font-family: Roboto-Regular;
font-size: 15px;
color: #202321;
letter-spacing: 0.25px;
line-height: 22px;
margin-left: 20px;
margin-top: 10px;
}
@include bp($bp-tablet-p) {
p {
margin-right: 50px;
}
}
}
.popover__footer {
display: flex;
flex-direction: column;
justify-content: space-between;
@include bp($bp-tablet-p) {
flex-direction: row;
}
.popover__footer-link-container{
position: relative;
margin-bottom: 18px;
@include bp($bp-tablet-p) {
margin-right: 30px;
}
.popover__footer-link {
padding: 0 0 0 40px;
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;
&.is-more {
color: $color-green;
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
left: 20px;
top: calc(50% - 6px);
transition: transform $animation-duration-std $animation-easing-std;
}
}
&.is-external {
/* Belegung nötig da sonst rte a-class Einstellungen überschreiben */
color: $color-white;
&::before {
@include pseudo();
@include sprites-icon-externalarrow-white();
left: 20px;
top: calc(50% - 6px);
transition: transform $animation-duration-std $animation-easing-std;
margin: 0;
}
}
&.a11y-focus-key {
outline-offset: -2px;
}
&.is-delete {
color: $color-red-delete;
&::after {
@include pseudo();
@include sprites-icon_delete();
left: 20px;
top: calc(50% - 6px);
transition: transform $animation-duration-std $animation-easing-std;
margin: 0;
}
}
}
}
}
}
.display {
display: block;
}
.popover:after,
.popover:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 24px;
margin-left: -24px;
}
.popover:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #00883a;
border-width: 30px;
margin-left: -30px;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-popover--default {
padding-top: 200px;
}
<div class="c-popover--default" data-js-module="popover" data-css="c-popover">
<h3>Popover CSS Example</h3>
<div class="popover__container">
<div class="popover">
<div class="popover__wrapper">
<button data-js-item="toggle-popover" class="popover__close">Schließen</button>
<div class="popover__content">
<h1>Deine Mailbox</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id pariatur voluptatibus reiciendis commodi, labore officiis eveniet totam sequi minus illum. Odit nulla nihil mollitia, veritatis et voluptatibus ducimus iure cupiditate.
</p>
</div>
<div class="popover__footer">
<div class="popover__footer-link-container">
<a href="#" class="popover__footer-link is-more">mehr erfahren</a>
</div>
<div class="popover__footer-link-container">
<a href="javascript:void" data-js-item="delete-item" class="popover__footer-link is-delete">Tool löschen</a>
</div>
</div>
</div>
</div>
<a data-js-item="toggle-popover" href="javascript:void">
Click to toggle popover
</a>
</div>
</div>