<div class="ribbon js-ribbon">
stage
</div>
<script type="text/javascript">
var ribbonElement = document.querySelector('.js-ribbon');
ribbonElement.addEventListener('mouseover', () => {
ribbonElement.classList.add('is-hidden');
setTimeout(function() {
ribbonElement.classList.remove('is-hidden');
}, 4000);
});
</script>
<style media="screen">
.ribbon {
position: fixed;
z-index: 100000;
/* Must be higher than WP's admin toolbar */
bottom: 0;
left: 0;
padding: 0.5rem 0;
-webkit-transform: translateX(-33.33%) rotate(45deg);
transform: translateX(-33.33%) rotate(45deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
background-color: #e0bff5;
font-family: "HK Grotesk Semibold", sans-serif;
font-family: sans-serif;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.ribbon.is-hidden {
display: none;
}
.ribbon::before,
.ribbon::after {
content: '';
position: absolute;
top: 0;
width: 200%;
height: 100%;
margin: 0 -1px;
background-color: inherit;
}
.ribbon::before {
right: 100%;
}
.ribbon::after {
left: 100%;
}
@media (min-width: 576px) {
.ribbon {
font-size: 14px;
}
}
@media (min-width: 1400px) {
.ribbon {
font-size: 18px;
}
}
</style>
<div class="ribbon js-ribbon">
{{text}}
</div>
<script type="text/javascript">
var ribbonElement = document.querySelector('.js-ribbon');
ribbonElement.addEventListener('mouseover', () => {
ribbonElement.classList.add('is-hidden');
setTimeout(function(){
ribbonElement.classList.remove('is-hidden');
}, 4000);
});
</script>
<style media="screen">
.ribbon {
position: fixed;
z-index: 100000; /* Must be higher than WP's admin toolbar */
bottom: 0;
left: 0;
padding: 0.5rem 0;
-webkit-transform: translateX(-33.33%) rotate(45deg);
transform: translateX(-33.33%) rotate(45deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
background-color: #e0bff5;
font-family: "HK Grotesk Semibold", sans-serif;
font-family: sans-serif;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.ribbon.is-hidden {
display: none;
}
.ribbon::before, .ribbon::after {
content: '';
position: absolute;
top: 0;
width: 200%;
height: 100%;
margin: 0 -1px;
background-color: inherit;
}
.ribbon::before {
right: 100%;
}
.ribbon::after {
left: 100%;
}
@media (min-width: 576px) {
.ribbon {
font-size: 14px;
}
}
@media (min-width: 1400px) {
.ribbon {
font-size: 18px;
}
}
</style>
{
"name": "Ribbon",
"text": "stage",
"background": "peacock-light"
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@include mixin.atom(ribbon) {
position: fixed;
z-index: 100000; /* Must be higher than WP's admin toolbar */
bottom: 0;
left: 0;
padding: func.rhythm(1) 0;
transform: translateX(-33.33%) rotate(45deg);
transform-origin: bottom right;
background-color: colors.$color-peacock-light;
font-family: var.$font-family-headings;
font-family: sans-serif;
font-size: var.$size-small;
text-align: center;
text-transform: uppercase;
&::before,
&::after {
content: '';
position: absolute;
top: 0;
width: 200%;
height: 100%;
margin: 0 -1px;
background-color: inherit;
}
&::before {
right: 100%;
}
&::after {
left: 100%;
}
@include breakpoint.bp-up(sm) {
font-size: var.$size-medium;
}
@include breakpoint.bp-up(xxl) {
font-size: var.$size-base;
}
}
Used for notifying the user they’re on the stage environment. Inline styles is used because it should also work in Wordpress admin.
Can be used both as an “atom” and a free standing “block”.