Initial commit: Atomaste website
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
.burst {
|
||||
font-variant-numeric: tabular-nums; // https://css-tricks.com/almanac/properties/f/font-variant-numeric/
|
||||
margin: 0;
|
||||
margin-left: -20px;
|
||||
font-size: var(--rsp-fs-300);
|
||||
box-sizing: border-box;
|
||||
color: var(--rsp-text-color);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@media only screen and ( max-width: $rsp-break-xs) {
|
||||
margin-left: -9px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--rsp-text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.burst-h0 {
|
||||
font-size: var(--rsp-fs-900);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h1, .burst-h1 {
|
||||
font-size: var(--rsp-fs-800);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h2, .burst-h2 {
|
||||
font-size: var(--rsp-fs-700);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.025rem;
|
||||
}
|
||||
|
||||
h3, .burst-h3 {
|
||||
font-size: var(--rsp-fs-600);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.0125rem;
|
||||
}
|
||||
|
||||
h4, .burst-h4 {
|
||||
font-size: var(--rsp-fs-500);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.0125rem;
|
||||
}
|
||||
|
||||
h5, .burst-h5 {
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
h6, .burst-h6 {
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--rsp-text-color);
|
||||
font-weight: 400;
|
||||
font-size: var(--rsp-fs-300);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.burst-small-text {
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color-light);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
//wordpress inserts notices after the first h1 or h2. To prevent breaking layout we insert an empty h1 tag at the start of our page, where WP can insert the notice.
|
||||
.burst-notice-hook-element {
|
||||
display: none !important;
|
||||
}
|
||||
.burst-divider {
|
||||
width: 1px;
|
||||
height: 1.3rem;
|
||||
background-color: #cccccc;
|
||||
}
|
||||
}
|
||||
// Hide nags from other plugins
|
||||
.error, .notice, .update-nag, .notice-info {
|
||||
&:not(.really-simple-plugins) {
|
||||
display: none !important;
|
||||
}
|
||||
&.really-simple-plugins{
|
||||
margin: var(--rsp-grid-gap);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
// Silence is golden.
|
||||
@@ -0,0 +1,250 @@
|
||||
/* Grid */
|
||||
.burst {
|
||||
.burst-header, .burst-content-area {
|
||||
max-width: clamp(300px, calc(100% - var(--rsp-grid-gap) * 2), 1600px);
|
||||
margin: 0 auto;
|
||||
@media(max-width: $rsp-break-xxl) {
|
||||
--rsp-grid-gap: var(--rsp-spacing-m);
|
||||
}
|
||||
@media(max-width: $rsp-break-xl) { // 1440px
|
||||
--rsp-grid-gap: var(--rsp-spacing-s);
|
||||
}
|
||||
@media(max-width: $rsp-break-l) { // 1366px
|
||||
--rsp-grid-gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
@media(max-width: $rsp-break-m) { // 1280px
|
||||
}
|
||||
@media(max-width: $rsp-break-s) { // 1080px
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.burst-header-container .burst-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--rsp-background-block-color);
|
||||
@media(max-width: $rsp-break-s) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.burst-logo {
|
||||
@media(max-width: $rsp-break-xxs) {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.burst-header-left {
|
||||
display: flex;
|
||||
font-size: var(--rsp-fs-400);
|
||||
|
||||
@media(max-width: $rsp-break-s) {
|
||||
justify-content: center;
|
||||
margin: var(--rsp-spacing-xs) 0;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
background-color: var(--rsp-background-block-color);
|
||||
}
|
||||
|
||||
.burst-header-menu {
|
||||
margin: auto 15px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 23px 15px;
|
||||
text-decoration: none;
|
||||
color: var(--rsp-text-color);
|
||||
height: 100%;
|
||||
border-bottom: 4px solid transparent;
|
||||
transition: border 0.3s ease-out;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@media(max-width: $rsp-break-s) {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.active {
|
||||
border-bottom: 4px solid var(--rsp-brand-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-brand-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-header-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
min-height: 52px;
|
||||
select {
|
||||
max-width: 60ch;
|
||||
}
|
||||
@media(max-width: $rsp-break-xxs) {
|
||||
display:none;
|
||||
}
|
||||
@media(max-width: $rsp-break-xs) {
|
||||
.button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.burst-content-area {
|
||||
margin-top: var(--rsp-grid-gap);
|
||||
}
|
||||
|
||||
.burst-header-container {
|
||||
background: var(--rsp-background-block-color);
|
||||
}
|
||||
|
||||
.burst-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: max-content;
|
||||
gap: var(--rsp-grid-gap);
|
||||
min-height: calc(100vh - 32px - 80px - 20px - var(--rsp-grid-gap)); //32px = wordpress bar, 80px = cmplz bar, 20px = margin-top, 20px is grid gap
|
||||
&.burst-settings{
|
||||
grid-template-columns: 350px 1fr 1fr 1fr;
|
||||
}
|
||||
@media only screen and (max-width: $rsp-break-m) {
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
}
|
||||
@media only screen and ( max-width: $rsp-break-s) {
|
||||
max-width:790px;
|
||||
width: calc(100% - var(--rsp-grid-gap) * 2)
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
}
|
||||
|
||||
.burst-grid-item {
|
||||
@include burst-block;
|
||||
transition: all 1s ease;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
flex-basis: 100%;
|
||||
grid-column: span 1;
|
||||
grid-row: span 1;
|
||||
overflow: auto;
|
||||
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
&.burst-disabled {
|
||||
min-height:200px; //add min height on disabled so the settings is visible behind the locked div.
|
||||
}
|
||||
|
||||
&.no-background {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.burst-column-2 {
|
||||
grid-column: span 2;
|
||||
@media(max-width: $rsp-break-m) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
&.burst-row-2 {
|
||||
grid-row: span 2;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: calc(40px + var(--rsp-spacing-s) * 2);
|
||||
@include burst-inline-block-padding;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 4px 0 4px 0;
|
||||
}
|
||||
|
||||
&-controls {
|
||||
font-size: var(--rsp-fs-200);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
}
|
||||
|
||||
&-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include burst-inline-block-padding;
|
||||
flex-grow: 100;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--rsp-grid-margin);
|
||||
width: 100%;
|
||||
min-height: calc(30px + var(--rsp-spacing-s) * 2);
|
||||
box-sizing: border-box;
|
||||
@include burst-inline-block-padding;
|
||||
align-self: flex-end;
|
||||
|
||||
.burst-legend {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-flex-push-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.burst-flex-push-left {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.burst-selected-archive{
|
||||
margin-top:10px;
|
||||
margin-bottom:10px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background-color:var(--rsp-blue-faded);
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-l);
|
||||
&-controls{
|
||||
margin-left:auto;
|
||||
display:flex;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
button.button.burst-btn-reset {
|
||||
margin-left:5px;
|
||||
}
|
||||
button.button-default {
|
||||
display:flex;
|
||||
.burst-icon{
|
||||
margin-top: 7px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-restore_archives {
|
||||
input[type=checkbox]{
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst div[class^=burst-wizard-] {
|
||||
.burst-restore_archives{
|
||||
.burst-table-header{
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-l);
|
||||
}
|
||||
.burst-field-wrap{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.burst-no-archives{
|
||||
padding: var(--rsp-spacing-xl);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
.burst{
|
||||
// burst bullets
|
||||
.burst-bullet {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
flex: 0 0 13px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
background-color: var(--rsp-grey-500);
|
||||
&.rsp-yellow {
|
||||
background-color: var(--rsp-yellow);
|
||||
}
|
||||
|
||||
&.rsp-blue {
|
||||
background-color: var(--rsp-blue);
|
||||
}
|
||||
|
||||
&.rsp-pink {
|
||||
background-color: var(--rsp-pink);
|
||||
}
|
||||
|
||||
&.rsp-red, &.burst-bullet-error {
|
||||
background-color: var(--rsp-red);
|
||||
}
|
||||
|
||||
&.rsp-green, &.burst-bullet-success {
|
||||
background-color: var(--rsp-green);
|
||||
}
|
||||
&.rsp-blue-yellow {
|
||||
background: var(--rsp-blue);
|
||||
background: linear-gradient(77deg, rgba(0,159,255, 1) 0%, rgba(0,159,255, 1) 30%, rgba(244, 191, 62, 1) 70%, rgba(244, 191, 62, 1) 100%);
|
||||
animation: gradient 2s ease infinite;
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
}
|
||||
.burst-legend{
|
||||
width: max-content;
|
||||
color: var(--rsp-text-color-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
line-height: 1;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/* Global Variables */
|
||||
:root {
|
||||
--button-font-size: var(--rsp-fs-300);
|
||||
--button-font-weight: 400;
|
||||
--button-line-height: 2;
|
||||
--button-letter-spacing: 0.5px;
|
||||
--button-transition: all 0.3s ease;
|
||||
--button-min-height: 30px;
|
||||
--button-padding: 0 10px;
|
||||
--button-border-radius: 4px;
|
||||
--button-accent-color: #2271b1;
|
||||
--button-contrast-color: #000;
|
||||
--button-secondary-bg: #fff;
|
||||
}
|
||||
|
||||
/* Button Base Styles */
|
||||
a.burst-button, button.burst-button, input.burst-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
font-size: var(--button-font-size);
|
||||
font-weight: var(--button-font-weight);
|
||||
line-height: var(--button-line-height);
|
||||
letter-spacing: var(--button-letter-spacing);
|
||||
transition: var(--button-transition);
|
||||
min-height: var(--button-min-height);
|
||||
margin: 0;
|
||||
padding: var(--button-padding);
|
||||
border-radius: var(--button-border-radius);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&--primary {
|
||||
background: var(--button-accent-color);
|
||||
color: var(--button-secondary-bg);
|
||||
border: 1px solid var(--button-accent-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--button-accent-color);
|
||||
color: var(--button-secondary-bg);
|
||||
border-color: var(--button-accent-color);
|
||||
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: var(--rsp-grey-100);
|
||||
color: var(--rsp-text-color-light);
|
||||
border: 1px solid var(--rsp-grey-400);
|
||||
|
||||
&:hover {
|
||||
background: var(--rsp-grey-200);
|
||||
color: var(--rsp-text-color);
|
||||
border-color: var(--rsp-grey-400);
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
// red button
|
||||
background: var(--rsp-red);
|
||||
color: var(--rsp-text-color-white);
|
||||
border: 1px solid var(--rsp-red);
|
||||
|
||||
&:hover {
|
||||
background: var(--rsp-red-faded);
|
||||
color: var(--rsp-red);
|
||||
border-color: var(--rsp-red);
|
||||
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&--pro {
|
||||
background: var(--rsp-brand-primary);
|
||||
color: var(--rsp-text-color-white);
|
||||
border: 1px solid var(--rsp-brand-primary-dark);
|
||||
|
||||
&:hover {
|
||||
background: var(--rsp-brand-primary-dark);
|
||||
color: var(--button-secondary-bg);
|
||||
border-color: var(--rsp-brand-primary-darker);
|
||||
box-shadow: 0 0 0 3px var(--rsp-brand-primary-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-button-icon {
|
||||
background: transparent;
|
||||
background: var(--rsp-grey-300);
|
||||
color: #2271b1;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&--delete {
|
||||
&:hover {
|
||||
background: var(--rsp-red-faded);
|
||||
|
||||
svg path {
|
||||
fill: var(--rsp-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst .burst-button.burst-button--date-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(---rsp-filter-padding);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
cursor: pointer;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
color: var(--rsp-text-color-light);
|
||||
background-color: var(--rsp-input-background-color);
|
||||
background: var(--rsp-grey-200);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
|
||||
.burst-icon {
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
.burst {
|
||||
&-grid {
|
||||
h4 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
|
||||
.block {
|
||||
p {
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
|
||||
&__big-number {
|
||||
justify-content: space-between;
|
||||
background: var(--rsp-green-faded);
|
||||
padding: var(--rsp-spacing-xl) var(--rsp-spacing-l);
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
.h0 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
text-align: right;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
h5, p {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__explanation-and-stats {
|
||||
margin: var(--rsp-spacing-l) auto;
|
||||
}
|
||||
}
|
||||
|
||||
.border-to-border {
|
||||
.burst-grid-item-content {
|
||||
padding: 0;
|
||||
|
||||
& > * {
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-to-border.datatable, .border-to-border.burst-today, .border-to-border.burst-goals {
|
||||
.burst-grid-item-content {
|
||||
|
||||
& > * {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-footer {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-item-controls{
|
||||
.burst-filter-button{
|
||||
all: unset;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
aspect-ratio: 1/1;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
background: var(--rsp-grey-200);
|
||||
&:hover, &.active, &:focus{
|
||||
background: var(--rsp-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-real-time .block__explanation-and-stats {
|
||||
margin: var(--rsp-spacing-m) auto;
|
||||
}
|
||||
|
||||
.burst-today, .burst-goals {
|
||||
&-select {
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
padding-block: var(--rsp-spacing-m);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
&-item {
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-block: var(--rsp-spacing-s);
|
||||
justify-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--rsp-white);
|
||||
|
||||
&.active {
|
||||
box-shadow: inset 0 0 3px 2px var(--rsp-green-faded);
|
||||
border: 2px solid var(--rsp-green);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
justify-content: center;
|
||||
font-size: var(--rsp-fs-100);
|
||||
|
||||
.burst-icon-live {
|
||||
animation-name: pulse;
|
||||
animation-duration: 1.5s;
|
||||
animation-timing-function: ease-in;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-play-state: running;
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: flex-start;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
padding-inline: var(--rsp-spacing-l);
|
||||
|
||||
&:nth-of-type(even) {
|
||||
background: var(--rsp-grey-200);
|
||||
}
|
||||
|
||||
&-text {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&-number {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-controls-flex {
|
||||
display: flex;
|
||||
//justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
|
||||
.burst-divider {
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background: var(--rsp-grey-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-today {
|
||||
&-select {
|
||||
background: var(--rsp-green-faded);
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-item.burst-goals {
|
||||
position: relative;
|
||||
|
||||
.burst-goals-select {
|
||||
background: var(--rsp-yellow-faded);
|
||||
}
|
||||
|
||||
|
||||
.information-overlay {
|
||||
background: rgba(47, 47, 47, 0.15);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background: var(--rsp-white);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
|
||||
padding: var(--rsp-spacing-s);
|
||||
padding-left: var(--rsp-spacing-m);
|
||||
padding-right: var(--rsp-spacing-m);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
margin: var(--rsp-spacing-s) 40px;
|
||||
|
||||
/* animation */
|
||||
transform: scale(0);
|
||||
animation: scale-in 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s forwards;
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
transform: scale(0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--rsp-spacing-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.burst-goal-status{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
p{
|
||||
color: var(--rsp-text-color-light);
|
||||
font-size: var(--rsp-fs-200);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
.burst {
|
||||
.burst-status-allowed {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.burst-status-revoked {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.rdt_TableHeadRow, .rdt_TableRow {
|
||||
@include burst-inline-block-padding;
|
||||
}
|
||||
|
||||
.rdt_TableCol, .rdt_TableCell {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.burst-csp-revoked > div:nth-child(-n+3) {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.rdt_Pagination {
|
||||
select + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-empty-data-table {
|
||||
text-align: center;
|
||||
padding: var(--rsp-spacing-xl);
|
||||
}
|
||||
|
||||
.burst-grid-item.datatable {
|
||||
.burst-loading-container {
|
||||
align-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-clickable-row-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
|
||||
.burst-icon {
|
||||
pointer-events: none
|
||||
}
|
||||
}
|
||||
|
||||
.burst-not-clickable-row-item {
|
||||
cursor: default;
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
.burst-datatable-message {
|
||||
padding: var(--rsp-spacing-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.burst-datatable__select-trigger {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
|
||||
&__icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-datatable__select-content {
|
||||
background: var(--rsp-grey-100);
|
||||
z-index: 99;
|
||||
border: 1px solid var(--rsp-grey-400);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-s);
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
animation-duration: 600ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
|
||||
&[data-state='open']{
|
||||
animation-name: slideDownAndFade;
|
||||
}
|
||||
|
||||
@keyframes slideDownAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
min-width: min(100vw, 150px);
|
||||
cursor: pointer;
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
//font-size: 13px;
|
||||
//line-height: 1;
|
||||
//color: var(--violet-11);
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//height: 25px;
|
||||
//padding: 0 35px 0 25px;
|
||||
//position: relative;
|
||||
//user-select: none
|
||||
.burst-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.burst-pill {
|
||||
margin-left: 8px;
|
||||
font-size: var(--rsp-fs-200);
|
||||
}
|
||||
}
|
||||
&__item[data-disabled] {
|
||||
color: var(--rsp-text-grey-200);
|
||||
background-color: var(--rsp-grey-100);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&__item[data-highlighted] {
|
||||
color: var(--rsp-text-color);
|
||||
outline: none;
|
||||
background-color: var(--rsp-green-faded);
|
||||
}
|
||||
&__item[data-state='selected'] {
|
||||
color: var(--rsp-text-color-light);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.burst .burst-error-boundary {
|
||||
padding: 20px;
|
||||
border: 2px solid var(--rsp-border-color);
|
||||
border-radius: 8px;
|
||||
background-color: var(--rsp-grey-200);
|
||||
max-width: 70ch;
|
||||
margin: auto;
|
||||
margin-top: var(--rsp-spacing-l);
|
||||
|
||||
h3 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__copy-error {
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--rsp-border-color);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__error-code,
|
||||
&__error-stack {
|
||||
color: var(--rsp-text-color-light);
|
||||
font-family: monospace;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin-top: var(--rsp-spacing-xs);
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
margin-bottom: var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-bottom: var(--rsp-spacing-s);
|
||||
padding-left: 1.5em;
|
||||
text-indent: -1.5em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.burst-header-container .burst-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
img {
|
||||
margin: auto 0;
|
||||
height: 26px;
|
||||
}
|
||||
.burst-header-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
.burst-header-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.burst-header-menu-item-active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.burst-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
select {
|
||||
max-width: 60ch;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.burst-icon{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg{
|
||||
fill: currentColor;
|
||||
}
|
||||
&.burst-icon-loading{
|
||||
animation: burst-icon-loading 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
@keyframes burst-icon-loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.burst-acquisition-switch{
|
||||
display: flex;
|
||||
min-height: 30px;
|
||||
|
||||
&__option{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
font-size: var(--rsp-fs-300);
|
||||
background: var(--rsp-grey-300);
|
||||
border: var(--rsp-grey-400) 1px solid;
|
||||
border-right-width: 0px;
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-s);
|
||||
color: var(--rsp-text-color-light);
|
||||
cursor: pointer;
|
||||
|
||||
svg{
|
||||
path {
|
||||
fill: var(--rsp-text-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
// first item needs to have border-radius on the left
|
||||
&:first-child{
|
||||
border-top-left-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-left-radius: var(--rsp-border-radius-xs);
|
||||
}
|
||||
// last item needs to have border-radius on the right
|
||||
&:last-child{
|
||||
border-right-width: 1px;
|
||||
border-top-right-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-right-radius: var(--rsp-border-radius-xs);
|
||||
}
|
||||
&:hover{
|
||||
background: var(--rsp-grey-200);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&--selected{
|
||||
background: var(--rsp-white);
|
||||
cursor: default;
|
||||
&:hover{
|
||||
background: var(--rsp-white);
|
||||
}
|
||||
}
|
||||
&--pro{
|
||||
color: var(--rsp-grey-500);
|
||||
svg{
|
||||
path{
|
||||
fill: var(--rsp-grey-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
.burst {
|
||||
.burst-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
|
||||
&__item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
background-color: transparent;
|
||||
align-items: flex-start;
|
||||
|
||||
&.burst-hidden {
|
||||
display: none;
|
||||
}
|
||||
&__pill{
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
outline: 1px solid var(--rsp-input-border-color);
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
margin-top: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--rsp-blue-faded);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px var(--rsp-background-color), 0 0 0 4px var(--rsp-dark-blue);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: var(--rsp-grey-300);
|
||||
cursor: not-allowed;
|
||||
& + label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: var(--rsp-fs-300);
|
||||
color: var(--rsp-text-color-light);
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.burst div[class^=burst-wizard-] {
|
||||
.burst-email_reports {
|
||||
.burst-table-header, .burst-field-description {
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-l);
|
||||
}
|
||||
|
||||
.burst-field-wrap.burst-email_reports {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.burst-email-reports-field__add {
|
||||
margin-top: var(--rsp-spacing-xs);
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-l);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
|
||||
input {
|
||||
min-width: 30ch;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-button-icon--delete {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.burst-warning {
|
||||
margin: var(--rsp-spacing-xs) var(--rsp-spacing-l);
|
||||
color: var(--rsp-color-error);
|
||||
background-color: var(--rsp-red-faded);
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
border: 1px solid var(--rsp-color-error);
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
|
||||
|
||||
.burst {
|
||||
.burst {
|
||||
&-select-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.burst-icon > div {
|
||||
margin-top: 2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
&__trigger {
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
font-size: var(--rsp-fs-300);
|
||||
color: var(--rsp-text-color-light);
|
||||
line-height: 1.5;
|
||||
background-color: var(--rsp-white);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
min-width: 15ch;
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: var(--rsp-brand-primary-faded);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px var(--rsp-brand-primary-faded);
|
||||
}
|
||||
|
||||
&[data-placeholder] {
|
||||
color: var(--rsp-grey-400);
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: var(--rsp-grey-200);
|
||||
color: var(--rsp-grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: var(--radix-select-trigger-width);
|
||||
max-height: calc(var(--radix-select-content-available-height) - 32px - var(--rsp-spacing-s));
|
||||
overflow: hidden;
|
||||
background-color: var(--rsp-white);
|
||||
border-radius: 0 0 var(--rsp-border-radius-xs) var(--rsp-border-radius-xs);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
border-top: none;
|
||||
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&__viewport {
|
||||
}
|
||||
|
||||
&__item {
|
||||
line-height: 1;
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-xs);
|
||||
font-size: var(--rsp-fs-300);
|
||||
color: var(--rsp-text-color-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&[data-disabled] {
|
||||
background: var(--rsp-grey-300);
|
||||
color: var(--rsp-grey-500);
|
||||
//pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&[data-highlighted] {
|
||||
outline: none;
|
||||
background-color: var(--rsp-brand-primary-faded);
|
||||
color: var(--rsp-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
.burst-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: grey;
|
||||
opacity: 0.45;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.burst-modal {
|
||||
max-width: 526px;
|
||||
min-width: 200px;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
background-color: var(--rsp-white);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 25px;
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
|
||||
.burst-modal-header {
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
//border-radius: 12px;
|
||||
h2 {
|
||||
font-size: var(--rsp-fs-600);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.burst-modal-close {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
button {
|
||||
img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-modal-content {
|
||||
position: relative;
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
|
||||
.burst-modal-subtitle {
|
||||
font-weight: 600;
|
||||
font-size: var(--rsp-fs-500);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.burst-modal-description {
|
||||
overflow-wrap: anywhere;
|
||||
margin-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-modal-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.burst-button-help {
|
||||
background-color: #D7263D;
|
||||
color: white;
|
||||
border-color: #D7263D;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
Admin notice
|
||||
*/
|
||||
.cmplz-admin-notice {
|
||||
|
||||
.cmplz-admin-notice-container {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
|
||||
.cmplz-logo img {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.dashicons {
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.burst {
|
||||
.burst-other-plugins .rsp-logo img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.burst-other-plugins-container {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--rsp-fs-300);
|
||||
line-height: 1.7;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.burst-other-plugins-element {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
--rsp-other-plugins-color: var(--rsp-grey-400);
|
||||
|
||||
&.burst-really-simple-ssl {
|
||||
--rsp-other-plugins-color: var(--rsp-yellow);
|
||||
}
|
||||
&.burst-burst-statistics {
|
||||
--rsp-other-plugins-color: var(--rsp-green);
|
||||
}
|
||||
&.burst-updraftplus {
|
||||
--rsp-other-plugins-color: var(--rsp-orange);
|
||||
}
|
||||
&.burst-wp-optimize {
|
||||
--rsp-other-plugins-color: var(--rsp-orange);
|
||||
}
|
||||
|
||||
&.burst-all-in-one-wp-security-and-firewall {
|
||||
--rsp-other-plugins-color: var(--rsp-orange);
|
||||
}
|
||||
|
||||
a {
|
||||
width: max-content;
|
||||
color: var(--rsp-text-color-light);
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-other-plugins-color);
|
||||
text-decoration: underline;
|
||||
|
||||
.burst-bullet {
|
||||
background-color: var(--rsp-other-plugins-color);
|
||||
}
|
||||
|
||||
.burst-other-plugins-content {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-bullet {
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--rsp-other-plugins-color);
|
||||
}
|
||||
|
||||
.burst-other-plugins-content {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.burst-other-plugin-status{
|
||||
min-width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.burst-pill{
|
||||
padding: 2px var(--rsp-spacing-xs);
|
||||
background: var(--rsp-brand-primary);
|
||||
color: var(--rsp-text-color-white);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
$base-color: #ddd;
|
||||
$shine-color: #e8e8e8;
|
||||
$animation-duration: 1.6s;
|
||||
@mixin background-gradient {
|
||||
background-image: linear-gradient(90deg, $base-color 0, $shine-color 40px, $base-color 80px);
|
||||
background-size: 600px;
|
||||
}
|
||||
|
||||
.burst-placeholder {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding-bottom: 24px;
|
||||
color: #1e1e1e;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
flex-grow: 100;
|
||||
|
||||
.burst-placeholder-line {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: 12px;
|
||||
border-radius: 7px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@include background-gradient;
|
||||
animation: shine-lines $animation-duration infinite linear;
|
||||
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(1) {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(2) {
|
||||
width: 86%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(3) {
|
||||
width: 67%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(4) {
|
||||
width: 76%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(5) {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(6) {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(7) {
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(8) {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(9) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(10) {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(11) {
|
||||
width: 62%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(12) {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(13) {
|
||||
width: 86%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(14) {
|
||||
width: 68%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(15) {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(16) {
|
||||
width: 91%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(17) {
|
||||
width: 84%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(18) {
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(19) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.burst-placeholder .burst-placeholder-line:nth-of-type(20) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-placeholder-line ~ .burst-placeholder-line {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes shine-lines {
|
||||
0% {
|
||||
background-position: - 400px;
|
||||
}
|
||||
100% {
|
||||
background-position: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst .burst-page-placeholder .burst-grid-item, .burst-grid-item-placeholder {
|
||||
overflow: hidden !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: 1;
|
||||
animation: slide 2s infinite;
|
||||
background: linear-gradient(103deg, rgba(228, 229, 232, 0) 25%, rgba(228, 229, 232, 0.35) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 75%); /* W3C */
|
||||
}
|
||||
}
|
||||
.burst .burst-grid-item.burst-grid-item-placeholder{
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* animation */
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.burst-loading-container {
|
||||
transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out;
|
||||
|
||||
&.burst-loading {
|
||||
opacity: 0.3;
|
||||
//filter: blur(1px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.burst-popover{
|
||||
background: var(--rsp-grey-100);
|
||||
z-index: 99;
|
||||
border: 1px solid var(--rsp-grey-400);
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
animation-duration: 600ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
|
||||
&[data-state='open']{
|
||||
animation-name: slideDownAndFade;
|
||||
}
|
||||
|
||||
@keyframes slideDownAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
&--date-range{
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__arrow{
|
||||
--rsp-arrow-size: 8px;
|
||||
position: absolute;
|
||||
top: calc( -1 * var(--rsp-arrow-size));
|
||||
right: calc(var(--rsp-arrow-size) * 2 - 3px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: var(--rsp-arrow-size) solid transparent;
|
||||
border-right: var(--rsp-arrow-size) solid transparent;
|
||||
border-bottom: var(--rsp-arrow-size) solid var(--rsp-grey-400);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--rsp-arrow-size));
|
||||
left: calc( -1 * var(--rsp-arrow-size) + 1px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: calc( var(--rsp-arrow-size) - 1px) solid transparent;
|
||||
border-right: calc( var(--rsp-arrow-size) - 1px) solid transparent;
|
||||
border-bottom: calc( var(--rsp-arrow-size) - 1px) solid var(--rsp-grey-100);
|
||||
}
|
||||
}
|
||||
&__header{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 3px;
|
||||
}
|
||||
h5{
|
||||
grid-column: 1 / 2;
|
||||
order: -1;
|
||||
}
|
||||
h6{
|
||||
grid-column: span 2;
|
||||
}
|
||||
p.burst-popover__small-text{
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color-light);
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
&__content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
&__footer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.burst-label-container, .burst-button {//premium pill also occurs in the predefined goals button
|
||||
display:flex;
|
||||
.burst-pro a{
|
||||
margin-left:10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
background-color: #ecf4ed;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
.burst-pro-popover-trigger {
|
||||
// delete all button styles
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 300ms ease-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
|
||||
.burst-pro-popover {
|
||||
background: var(--rsp-grey-100);
|
||||
z-index: 99;
|
||||
border: 1px solid var(--rsp-grey-400);
|
||||
margin: var(--rsp-spacing-xs) 0;
|
||||
padding: var(--rsp-spacing-m) var(--rsp-spacing-l);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-m);
|
||||
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
animation-duration: 600ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
|
||||
&[data-state='open'] {
|
||||
animation-name: slideDownAndFade;
|
||||
}
|
||||
|
||||
@keyframes slideDownAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
--rsp-arrow-size: 8px;
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--rsp-arrow-size));
|
||||
left: calc(var(--rsp-arrow-size) * 2);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: var(--rsp-arrow-size) solid transparent;
|
||||
border-right: var(--rsp-arrow-size) solid transparent;
|
||||
border-bottom: var(--rsp-arrow-size) solid var(--rsp-grey-400);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--rsp-arrow-size));
|
||||
right: calc(-1 * var(--rsp-arrow-size) + 1px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: calc(var(--rsp-arrow-size) - 1px) solid transparent;
|
||||
border-right: calc(var(--rsp-arrow-size) - 1px) solid transparent;
|
||||
border-bottom: calc(var(--rsp-arrow-size) - 1px) solid var(--rsp-grey-100);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
grid-column: 1 / 2;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
&__close {
|
||||
grid-column: 2 / 3;
|
||||
background: none;
|
||||
border: none;
|
||||
transition: transform 300ms ease-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
}
|
||||
|
||||
p.burst-pro-popover__small-text {
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color-light);
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
&__bullet-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
font-size: var(--rsp-fs-400);
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
.burst-grid-item.burst-progress {
|
||||
.burst-grid-item-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.burst-placeholder {
|
||||
@include burst-block-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-progress-block {
|
||||
.burst-progress {
|
||||
overflow: hidden;
|
||||
height: 7px;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
.burst-bar {
|
||||
height: 100%;
|
||||
background-color: var(--rsp-color-success);
|
||||
|
||||
&.burst-orange {
|
||||
background-color: var(--rsp-color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-progress-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include burst-block-padding;
|
||||
padding-block: 0;
|
||||
padding-top: 10px;
|
||||
|
||||
.burst-progress-percentage {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.burst-progress-text-span {
|
||||
margin-left: 35px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
a {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-header-html {
|
||||
display: flex;
|
||||
color: var(--rsp-text-color-light);
|
||||
|
||||
.burst-toggle-active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-task-switcher-container {
|
||||
display: flex;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
|
||||
.burst-task-switcher {
|
||||
&:first-of-type {
|
||||
border-right: 1px solid var(--rsp-grey-400);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-task-switcher {
|
||||
font-size: var(--rsp-fs-200);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-active-filter-remaining .burst-remaining-tasks, .burst-active-filter-all .burst-all-tasks {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Task element, list of tasks
|
||||
*/
|
||||
|
||||
.burst-task-element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--rsp-spacing-m);
|
||||
padding-bottom: var(--rsp-spacing-s);
|
||||
|
||||
.burst-task-message {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.burst-task-form {
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
}
|
||||
|
||||
.burst-task-enable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.burst-task-dismiss {
|
||||
button {
|
||||
all: initial; //remove default button styles
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.5em;
|
||||
color: black;
|
||||
font-family: sans-serif;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-scroll-container {
|
||||
@include burst-block-padding;
|
||||
--rsp-scroll-bg-clr: var(--rsp-dark-blue-faded);
|
||||
//margin-top: 20px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
padding-block: 0;
|
||||
padding-top: var(--rsp-spacing-m);
|
||||
border-radius: 0;
|
||||
background-image: linear-gradient(to top, var(--rsp-scroll-bg-clr), var(--rsp-scroll-bg-clr)),
|
||||
linear-gradient(to top, var(--rsp-scroll-bg-clr), var(--rsp-scroll-bg-clr)),
|
||||
linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0)),
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0));
|
||||
background-position: bottom center, top center, bottom center, top center;
|
||||
background-color: var(--rsp-scroll-bg-clr);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 25px, 100% 25px, 100% 15px, 100% 15px;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: var(--rsp-grey-300);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--rsp-grey-400);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-progress-status-container {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.burst-task-status {
|
||||
display: block;
|
||||
min-width: 96px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
padding: 4px 8px;
|
||||
font-size: var(--rsp-fs-100);
|
||||
font-weight: 600;
|
||||
|
||||
&.burst-completed, &.burst-success {
|
||||
background-color: var(--rsp-green);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
|
||||
&.burst-open {
|
||||
background-color: var(--rsp-color-open);
|
||||
}
|
||||
|
||||
&.burst-error {
|
||||
background-color: var(--rsp-color-error);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
&.burst-sale{
|
||||
background-color: var(--rsp-orange);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
&.burst-warning {
|
||||
background-color: var(--rsp-color-warning);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
&.burst-new{
|
||||
background-color: var(--rsp-dark-blue);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
|
||||
&.burst-pro {
|
||||
background-color: var(--rsp-color-success);
|
||||
color: var(--rsp-text-color-white);
|
||||
}
|
||||
&.burst-loading{
|
||||
background-color: var(--rsp-white);
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
//used in license block
|
||||
&.burst-skeleton{
|
||||
background-color: var(--rsp-grey-400);
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
}
|
||||
|
||||
.burst-plusone {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
margin: 1px 0 -1px 2px;
|
||||
padding: 0 5px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #d63638;
|
||||
color: #fff;
|
||||
font-size: var(--rsp-fs-100);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
.burst {
|
||||
.uplift {
|
||||
font-weight: 500;
|
||||
|
||||
&.positive {
|
||||
color: var(--rsp-color-success);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: var(--rsp-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.block__explanation-and-stats {
|
||||
display: grid;
|
||||
grid-auto-columns: 16px 4fr 1fr;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
grid-auto-flow: column;
|
||||
|
||||
&__right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.uplift {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.burst-h5 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--rsp-fs-200);
|
||||
}
|
||||
|
||||
.burst-icon {
|
||||
align-items: flex-start;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-statistics-container {
|
||||
height: 360px;
|
||||
margin-bottom: var(--rsp-spacing-m);
|
||||
}
|
||||
|
||||
.burst-filter-dropdown-content-body-item {
|
||||
margin-bottom: var(--rsp-spacing-xxs);
|
||||
}
|
||||
|
||||
.burst-data-filters {
|
||||
display: flex;
|
||||
grid-column: span 4;
|
||||
|
||||
.burst-date-range-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.burst {
|
||||
.burst-flag-wrapper{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
.burst-flag {
|
||||
svg {
|
||||
height: var(--rsp-fs-300);
|
||||
width: auto;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,581 @@
|
||||
.rdrCalendarWrapper{
|
||||
color: #000000;
|
||||
font-size: var(--rsp-fs-400);
|
||||
}
|
||||
|
||||
.rdrDateDisplayWrapper{
|
||||
background-color: var(--rsp-green-faded);
|
||||
}
|
||||
|
||||
.rdrDateDisplay{
|
||||
margin: 0.833em;
|
||||
}
|
||||
|
||||
.rdrDateDisplayItem{
|
||||
border-radius: 4px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
|
||||
border: 1px solid transparent;
|
||||
input{
|
||||
cursor: pointer;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
color: #849095;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDateDisplayItemActive{
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.rdrDateDisplayItemActive{
|
||||
input{
|
||||
color: #7d888d
|
||||
}
|
||||
}
|
||||
|
||||
.rdrMonthAndYearWrapper {
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding-top: var(--rsp-spacing-xxs);
|
||||
}
|
||||
|
||||
.rdrMonthAndYearPickers{
|
||||
font-weight: 600;
|
||||
select{
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
outline: 0;
|
||||
color: #3e484f;
|
||||
background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
|
||||
background-position: right 8px center;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
background-color: rgba(0,0,0,0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdrMonthPicker, .rdrYearPicker{
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.rdrNextPrevButton {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 0.833em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background: #EFF2F7;
|
||||
&:hover{
|
||||
background: #E1E7F0;
|
||||
}
|
||||
i {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border-style: solid;
|
||||
margin: auto;
|
||||
transform: translate(-3px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.rdrPprevButton {
|
||||
i {
|
||||
border-width: 4px 6px 4px 4px;
|
||||
border-color: transparent rgb(52, 73, 94) transparent transparent;
|
||||
transform: translate(-3px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.rdrNextButton {
|
||||
i {
|
||||
margin: 0 0 0 7px;
|
||||
border-width: 4px 4px 4px 6px;
|
||||
border-color: transparent transparent transparent rgb(52, 73, 94);
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rdrWeekDays {
|
||||
padding: 0 0.833em;
|
||||
}
|
||||
|
||||
.rdrMonth{
|
||||
padding: 0 0.833em 1.666em 0.833em;
|
||||
.rdrWeekDays {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rdrWeekDay {
|
||||
font-weight: 400;
|
||||
line-height: 2.667em;
|
||||
color: rgb(132, 144, 149);
|
||||
}
|
||||
|
||||
.rdrDay {
|
||||
background: transparent;
|
||||
user-select: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
aspect-ratio: 1.2 / 1;
|
||||
//line-height: 3.000em;
|
||||
//height: 3.000em;
|
||||
text-align: center;
|
||||
color: var(--rsp-text-color);
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayNumber {
|
||||
outline: 0;
|
||||
font-weight: 300;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rdrDayToday .rdrDayNumber span{
|
||||
font-weight: 500;
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 100%;
|
||||
background: var(--rsp-green);
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayToday:not(.rdrDayPassive) {
|
||||
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
|
||||
& ~ .rdrDayNumber span:after{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDay:not(.rdrDayPassive){
|
||||
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
|
||||
& ~ .rdrDayNumber{
|
||||
span{
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.rdrSelected{
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.rdrInRange{}
|
||||
|
||||
.rdrStartEdge{
|
||||
border-top-left-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-left-radius: var(--rsp-border-radius-xs);
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.rdrEndEdge{
|
||||
border-top-right-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-right-radius: var(--rsp-border-radius-xs);
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.rdrSelected{
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
}
|
||||
|
||||
.rdrDayStartOfMonth, .rdrDayStartOfWeek{
|
||||
.rdrInRange, .rdrEndEdge{
|
||||
border-top-left-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-left-radius: var(--rsp-border-radius-xs);
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayEndOfMonth, .rdrDayEndOfWeek{
|
||||
.rdrInRange, .rdrStartEdge{
|
||||
border-top-right-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-right-radius: var(--rsp-border-radius-xs);
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayStartOfMonth, .rdrDayStartOfWeek{
|
||||
.rdrDayInPreview, .rdrDayEndPreview{
|
||||
border-top-left-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-left-radius: var(--rsp-border-radius-xs);
|
||||
border-left-width: 2px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayEndOfMonth, .rdrDayEndOfWeek{
|
||||
.rdrDayInPreview, .rdrDayStartPreview{
|
||||
border-top-right-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-right-radius: var(--rsp-border-radius-xs);
|
||||
border-right-width: 2px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3px;
|
||||
pointer-events: none;
|
||||
border: 0 solid currentColor;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.rdrDayStartPreview{
|
||||
border-top-width: 2px;
|
||||
border-left-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-top-left-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-left-radius: var(--rsp-border-radius-xs);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.rdrDayInPreview{
|
||||
border-top-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.rdrDayEndPreview{
|
||||
border-top-width: 2px;
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-top-right-radius: var(--rsp-border-radius-xs);
|
||||
border-bottom-right-radius: var(--rsp-border-radius-xs);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rdrDefinedRangesWrapper{
|
||||
font-size: 12px;
|
||||
min-width: 160px;
|
||||
width: max-content;
|
||||
border-right: solid 1px #eff2f7;
|
||||
background: #fff;
|
||||
.rdrStaticRangeSelected{
|
||||
color: currentColor;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrStaticRange{
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
outline: 0;
|
||||
border-bottom: 1px solid #eff2f7;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
&:hover, &:focus{
|
||||
.rdrStaticRangeLabel{
|
||||
background: #eff2f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdrStaticRangeLabel{
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
outline: 0;
|
||||
line-height: 18px;
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.rdrInputRanges{
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.rdrInputRange{
|
||||
align-items: center;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.rdrInputRangeInput{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
border: solid 1px rgb(222, 231, 235);
|
||||
margin-right: 10px;
|
||||
color: rgb(108, 118, 122);
|
||||
&:focus, &:hover{
|
||||
border-color: rgb(180, 191, 196);
|
||||
outline: 0;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
|
||||
content: '';
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 1.333em;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rdrDayPassive{
|
||||
pointer-events: none;
|
||||
.rdrDayNumber span{
|
||||
color: #d5dce0;
|
||||
}
|
||||
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayDisabled {
|
||||
background-color: rgb(248, 248, 248);
|
||||
.rdrDayNumber span{
|
||||
color: #aeb9bf;
|
||||
}
|
||||
.rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
|
||||
filter: grayscale(100%) opacity(60%);
|
||||
}
|
||||
}
|
||||
|
||||
.rdrMonthName{
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #849095;
|
||||
padding: var(--rsp-spacing-xxs);
|
||||
}
|
||||
// Calendar
|
||||
.rdrCalendarWrapper {
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rdrDateDisplay{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rdrDateDisplayItem{
|
||||
flex: 1 1;
|
||||
width: 0;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
& + &{
|
||||
margin-left: 0.833em;
|
||||
}
|
||||
input{
|
||||
color: var(--rsp-text-color);
|
||||
text-align: inherit;
|
||||
&:disabled{
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDateDisplayItemActive{}
|
||||
|
||||
.rdrMonthAndYearWrapper {
|
||||
box-sizing: inherit;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.rdrMonthAndYearPickers{
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rdrMonthPicker{}
|
||||
|
||||
.rdrYearPicker{}
|
||||
|
||||
.rdrNextPrevButton {
|
||||
box-sizing: inherit;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rdrPprevButton {}
|
||||
|
||||
.rdrNextButton {}
|
||||
|
||||
.rdrMonths{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rdrMonthsVertical{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rdrMonthsHorizontal > div > div > div{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.rdrMonth{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.rdrWeekDays{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rdrWeekDay {
|
||||
flex-basis: calc(100% / 7);
|
||||
box-sizing: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rdrDays{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rdrDateDisplayWrapper{}
|
||||
|
||||
.rdrMonthName{}
|
||||
|
||||
.rdrInfiniteMonths{
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// DateRangePicker
|
||||
.rdrDateRangeWrapper{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// DateInput
|
||||
.rdrDateInput {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rdrWarning {
|
||||
position: absolute;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.6em;
|
||||
top: 0;
|
||||
right: .25em;
|
||||
color: #FF0000;
|
||||
}
|
||||
}
|
||||
|
||||
// DayCell
|
||||
.rdrDay {
|
||||
box-sizing: inherit;
|
||||
width: calc(100% / 7);
|
||||
position: relative;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rdrDayNumber {
|
||||
display: block;
|
||||
position: relative;
|
||||
span{
|
||||
color: #1d2429;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrDayDisabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.rdrDay {
|
||||
flex-basis: 14.285% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rdrInRange{}
|
||||
|
||||
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rdrDayHovered{}
|
||||
|
||||
.rdrDayActive{}
|
||||
|
||||
// DateRangePicker
|
||||
.rdrDateRangePickerWrapper{
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// DefinedRange
|
||||
.rdrDefinedRangesWrapper{}
|
||||
|
||||
.rdrStaticRanges{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rdrStaticRange{
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.rdrStaticRangeLabel{}
|
||||
|
||||
.rdrInputRanges{}
|
||||
|
||||
.rdrInputRange{
|
||||
display: flex;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.burst {
|
||||
---rsp-filter-padding: 0.3rem 0.9rem;
|
||||
|
||||
.burst-data-filters {
|
||||
gap: var(--rsp-spacing-xs);
|
||||
.burst-data-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
padding: var(---rsp-filter-padding);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
background: var(--rsp-grey-200);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
|
||||
.burst-data-filter__label {
|
||||
font-size: var(--rsp-fs-400);
|
||||
font-weight: 600;
|
||||
line-height: var(--rsp-fs-400);
|
||||
}
|
||||
|
||||
.burst-data-filter-divider, .burst-divider {
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background: var(--rsp-grey-500);
|
||||
}
|
||||
|
||||
.burst-data-filter__value {
|
||||
font-size: var(--rsp-fs-300);
|
||||
line-height: var(--rsp-fs-300);
|
||||
}
|
||||
button{
|
||||
// delete all button styling
|
||||
border: none;
|
||||
background: none;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
// add custom styling
|
||||
padding: auto var(--rsp-spacing-xs);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--animate {
|
||||
opacity: 0;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.burst-click-to-filter{
|
||||
cursor: pointer;
|
||||
//display: block;
|
||||
//border-radius: var(--rsp-border-radius-xs);
|
||||
//padding: var(--rsp-spacing-l) var(--rsp-spacing-xs);
|
||||
//transition: background-color 0.2s ease-in-out;
|
||||
//&:hover{
|
||||
// background: rgba(10, 10, 65, 0.08);
|
||||
//}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.burst{
|
||||
.burst-insights{
|
||||
padding-bottom: var(--rsp-spacing-m);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.burst-tips-tricks-container {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--rsp-fs-300);
|
||||
line-height: 1.7;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.burst-tips-tricks-element {
|
||||
width: calc(50% - var(--rsp-spacing-xxs));
|
||||
@media( max-width: $rsp-break-xs ){
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
color: var(--rsp-text-color-light);
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
min-width: 0; /* or some value */
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-brand-primary);
|
||||
text-decoration: underline;
|
||||
|
||||
.burst-bullet {
|
||||
background-color: var(--rsp-brand-primary);
|
||||
}
|
||||
|
||||
.burst-tips-tricks-content {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-bullet {
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--rsp-grey-300);
|
||||
}
|
||||
.burst-tips-tricks-content {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.#{$rt-namespace}__close-button {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: 0.3s ease;
|
||||
align-self: flex-start;
|
||||
|
||||
&--light {
|
||||
color: #000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
fill: currentColor;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.#{$rt-namespace}__spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid;
|
||||
border-radius: 100%;
|
||||
border-color: var(--toastify-spinner-color-empty-area);
|
||||
border-right-color: var(--toastify-spinner-color);
|
||||
animation: #{$rt-namespace}__spin 0.65s linear infinite;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@keyframes #{$rt-namespace}__trackProgress {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
z-index: var(--toastify-z-index);
|
||||
opacity: 0.7;
|
||||
transform-origin: left;
|
||||
|
||||
&--animated {
|
||||
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
|
||||
}
|
||||
|
||||
&--controlled {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
&--rtl {
|
||||
right: 0;
|
||||
left: initial;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.#{$rt-namespace}__toast {
|
||||
&-theme--dark {
|
||||
background: var(--toastify-color-dark);
|
||||
color: var(--toastify-text-color-dark);
|
||||
}
|
||||
&-theme--light {
|
||||
background: var(--toastify-color-light);
|
||||
color: var(--toastify-text-color-light);
|
||||
}
|
||||
&-theme--colored#{&}--default {
|
||||
background: var(--toastify-color-light);
|
||||
color: var(--toastify-text-color-light);
|
||||
}
|
||||
&-theme--colored#{&}--info {
|
||||
color: var(--toastify-text-color-info);
|
||||
background: var(--toastify-color-info);
|
||||
}
|
||||
&-theme--colored#{&}--success {
|
||||
color: var(--toastify-text-color-success);
|
||||
background: var(--toastify-color-success);
|
||||
}
|
||||
&-theme--colored#{&}--warning {
|
||||
color: var(--toastify-text-color-warning);
|
||||
background: var(--toastify-color-warning);
|
||||
}
|
||||
&-theme--colored#{&}--error {
|
||||
color: var(--toastify-text-color-error);
|
||||
background: var(--toastify-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
&-theme--light {
|
||||
background: var(--toastify-color-progress-light);
|
||||
}
|
||||
&-theme--dark {
|
||||
background: var(--toastify-color-progress-dark);
|
||||
}
|
||||
&--info {
|
||||
background: var(--toastify-color-progress-info);
|
||||
}
|
||||
&--success {
|
||||
background: var(--toastify-color-progress-success);
|
||||
}
|
||||
&--warning {
|
||||
background: var(--toastify-color-progress-warning);
|
||||
}
|
||||
&--error {
|
||||
background: var(--toastify-color-progress-error);
|
||||
}
|
||||
&-theme--colored#{&}--info,
|
||||
&-theme--colored#{&}--success,
|
||||
&-theme--colored#{&}--warning,
|
||||
&-theme--colored#{&}--error {
|
||||
background: var(--toastify-color-transparent);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.#{$rt-namespace}__toast {
|
||||
position: relative;
|
||||
min-height: var(--toastify-toast-min-height);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1rem;
|
||||
padding: 8px;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
border: 1px solid #eeeeee;
|
||||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-height: var(--toastify-toast-max-height);
|
||||
overflow: hidden;
|
||||
font-family: var(--toastify-font-family);
|
||||
cursor: default;
|
||||
direction: ltr;
|
||||
/* webkit only issue #791 */
|
||||
z-index: 0;
|
||||
&--rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
&--close-on-click {
|
||||
cursor: pointer;
|
||||
}
|
||||
&-body {
|
||||
margin: auto 0;
|
||||
flex: 1 1 auto;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
word-break: break-word;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
margin-inline-end: 10px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}--animate {
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.7s;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}--animate-icon {
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
||||
@media #{$rt-mobile} {
|
||||
.#{$rt-namespace}__toast {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.#{$rt-namespace}__toast-container {
|
||||
z-index: var(--toastify-z-index);
|
||||
-webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
|
||||
position: fixed;
|
||||
padding: 4px;
|
||||
width: var(--toastify-toast-width);
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
&--top-left {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
&--top-center {
|
||||
top: calc( 2em + 32px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&--top-right {
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
&--bottom-left {
|
||||
bottom: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
&--bottom-center {
|
||||
bottom: 1em;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&--bottom-right {
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$rt-mobile} {
|
||||
.#{$rt-namespace}__toast-container {
|
||||
width: 100vw;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
&--top-left,
|
||||
&--top-center,
|
||||
&--top-right {
|
||||
top: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&--bottom-left,
|
||||
&--bottom-center,
|
||||
&--bottom-right {
|
||||
bottom: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
&--rtl {
|
||||
right: 0;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
$rt-namespace: 'Toastify';
|
||||
$rt-mobile: 'only screen and (max-width : 480px)' !default;
|
||||
|
||||
:root {
|
||||
--toastify-color-light: var(--rsp-white);
|
||||
--toastify-color-dark: var(--rsp-black);
|
||||
--toastify-color-info: var(--rsp-yellow);
|
||||
--toastify-color-success: var(--rsp-green);
|
||||
--toastify-color-warning: var(--rsp-orange);
|
||||
--toastify-color-error: var(--rsp-red);
|
||||
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
|
||||
|
||||
--toastify-icon-color-info: var(--toastify-color-info);
|
||||
--toastify-icon-color-success: var(--toastify-color-success);
|
||||
--toastify-icon-color-warning: var(--toastify-color-warning);
|
||||
--toastify-icon-color-error: var(--toastify-color-error);
|
||||
|
||||
--toastify-toast-width: 320px;
|
||||
--toastify-toast-background: #fff;
|
||||
--toastify-toast-min-height: 42px;
|
||||
--toastify-toast-max-height: 800px;
|
||||
--toastify-font-family: sans-serif;
|
||||
--toastify-z-index: 9999;
|
||||
|
||||
--toastify-text-color-light: var(--rsp-text-color);
|
||||
--toastify-text-color-dark: var(--rsp-text-color-white);
|
||||
|
||||
//Used only for colored theme
|
||||
--toastify-text-color-info: #fff;
|
||||
--toastify-text-color-success: #fff;
|
||||
--toastify-text-color-warning: #fff;
|
||||
--toastify-text-color-error: #fff;
|
||||
|
||||
--toastify-spinner-color: #616161;
|
||||
--toastify-spinner-color-empty-area: #e0e0e0;
|
||||
|
||||
// Used when no type is provided
|
||||
--toastify-color-progress-light: linear-gradient(
|
||||
to right,
|
||||
#4cd964,
|
||||
#5ac8fa,
|
||||
#007aff,
|
||||
#34aadc,
|
||||
#5856d6,
|
||||
#ff2d55
|
||||
);
|
||||
// Used when no type is provided
|
||||
--toastify-color-progress-dark: #bb86fc;
|
||||
--toastify-color-progress-info: var(--toastify-color-info);
|
||||
--toastify-color-progress-success: var(--toastify-color-success);
|
||||
--toastify-color-progress-warning: var(--toastify-color-warning);
|
||||
--toastify-color-progress-error: var(--toastify-color-error);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
@mixin timing-function {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInRight {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutRight {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInLeft {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutLeft {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInUp {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 3000px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutUp {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceInDown {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
@include timing-function;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -3000px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__bounceOutDown {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__bounce-enter {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__bounceInLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__bounceInRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__bounceInDown;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__bounceInUp;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__bounce-exit {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__bounceOutLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__bounceOutRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__bounceOutUp;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__bounceOutDown;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@keyframes #{$rt-namespace}__flipIn {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
to {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__flipOut {
|
||||
from {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
30% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__flip-enter {
|
||||
animation-name: #{$rt-namespace}__flipIn;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__flip-exit {
|
||||
animation-name: #{$rt-namespace}__flipOut;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@mixin transform {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInRight {
|
||||
from {
|
||||
transform: translate3d(110%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInLeft {
|
||||
from {
|
||||
transform: translate3d(-110%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 110%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -110%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
@include transform;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutRight {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(110%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutLeft {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-110%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutDown {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 500px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__slideOutUp {
|
||||
from {
|
||||
@include transform;
|
||||
}
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -500px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__slide-enter {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__slideInLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__slideInRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__slideInDown;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__slideInUp;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__slide-exit {
|
||||
&--top-left,
|
||||
&--bottom-left {
|
||||
animation-name: #{$rt-namespace}__slideOutLeft;
|
||||
}
|
||||
&--top-right,
|
||||
&--bottom-right {
|
||||
animation-name: #{$rt-namespace}__slideOutRight;
|
||||
}
|
||||
&--top-center {
|
||||
animation-name: #{$rt-namespace}__slideOutUp;
|
||||
}
|
||||
&--bottom-center {
|
||||
animation-name: #{$rt-namespace}__slideOutDown;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@keyframes #{$rt-namespace}__spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@keyframes #{$rt-namespace}__zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$rt-namespace}__zoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__zoom-enter {
|
||||
animation-name: #{$rt-namespace}__zoomIn;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__zoom-exit {
|
||||
animation-name: #{$rt-namespace}__zoomOut;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'toastContainer';
|
||||
@import 'toast';
|
||||
@import 'theme';
|
||||
@import 'closeButton';
|
||||
@import 'progressBar';
|
||||
@import 'icons';
|
||||
|
||||
// entrance and exit animations
|
||||
@import 'animations/bounce.scss';
|
||||
@import 'animations/zoom.scss';
|
||||
@import 'animations/flip.scss';
|
||||
@import 'animations/slide.scss';
|
||||
@import 'animations/spin.scss';
|
||||
@@ -0,0 +1,16 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
@keyframes #{$rt-namespace}__trackProgress {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__progress-bar {
|
||||
animation: #{$rt-namespace}__trackProgress linear 1 forwards;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.burst-tooltip-content {
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
padding: 7px var(--rsp-spacing-xs);
|
||||
font-size: var(--rsp-fs-200);
|
||||
line-height: 1.5;
|
||||
color: var(--rsp-text-color-white);
|
||||
background-color: var(--rsp-black);
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
user-select: none;
|
||||
animation-duration: 400ms;
|
||||
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
will-change: transform, opacity;
|
||||
max-width: 40ch;
|
||||
}
|
||||
.burst-tooltip-content[data-state='delayed-open'][data-side='top'] {
|
||||
animation-name: slideDownAndFade;
|
||||
}
|
||||
.burst-tooltip-content[data-state='delayed-open'][data-side='right'] {
|
||||
animation-name: slideLeftAndFade;
|
||||
}
|
||||
.burst-tooltip-content[data-state='delayed-open'][data-side='bottom'] {
|
||||
animation-name: slideUpAndFade;
|
||||
}
|
||||
.burst-tooltip-content[data-state='delayed-open'][data-side='left'] {
|
||||
animation-name: slideRightAndFade;
|
||||
}
|
||||
|
||||
.burst-tooltip-arrow {
|
||||
fill: var(--rsp-black);
|
||||
}
|
||||
|
||||
@keyframes slideUpAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeftAndFade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.burst-shepherd {
|
||||
--rsp-black: #333;
|
||||
background: var(--rsp-black);
|
||||
color: var(--rsp-white);
|
||||
box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
|
||||
width: min(45ch, 100%);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
z-index: 999;
|
||||
margin: var(--rsp-spacing-s) !important; // this is only used to overwrite an inline style
|
||||
|
||||
.shepherd-arrow, .shepherd-arrow:before {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.shepherd-arrow:before {
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
background: var(--rsp-black);
|
||||
}
|
||||
|
||||
&[data-popper-placement^=top] > .shepherd-arrow {
|
||||
bottom: -8px
|
||||
}
|
||||
|
||||
&[data-popper-placement^=bottom] > .shepherd-arrow {
|
||||
top: -8px
|
||||
}
|
||||
|
||||
&[data-popper-placement^=left] > .shepherd-arrow {
|
||||
right: -8px
|
||||
}
|
||||
|
||||
&[data-popper-placement^=right] > .shepherd-arrow {
|
||||
left: -8px
|
||||
}
|
||||
|
||||
&.shepherd-centered > .shepherd-arrow {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.shepherd-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 30px;
|
||||
padding-inline: var(--rsp-spacing-s);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
|
||||
.shepherd-title {
|
||||
margin: 0;
|
||||
color: var(--rsp-white);
|
||||
}
|
||||
|
||||
button.shepherd-cancel-icon {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: var(--rsp-text-color-white);
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
&:hover {
|
||||
color: var(--rsp-text-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-text {
|
||||
padding-inline: var(--rsp-spacing-s);
|
||||
padding-block: var(--rsp-spacing-xxs);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
color: var(--rsp-white);
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shepherd-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 30px;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
padding-inline: var(--rsp-spacing-s);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
.dashboard_page_burst .shepherd-modal-overlay-container{
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.burst {
|
||||
div[class^="burst-wizard-"] { // starts with selector
|
||||
.burst-helplink {
|
||||
color: var(--rsp-text-color);
|
||||
}
|
||||
|
||||
.burst-grid-item {
|
||||
position: relative; //to ensure the burst-lock stays within the div
|
||||
margin-bottom: var(--rsp-grid-gap);
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
&.burst-column-2{
|
||||
grid-column: span 2;
|
||||
@media(max-width: $rsp-break-s) {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-locked {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
|
||||
.burst-locked-overlay {
|
||||
z-index: 1;
|
||||
top: calc(100% - 95px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
background-color: var(--rsp-grey-100);
|
||||
border: 1px solid var(--rsp-grey-300);
|
||||
@include burst-block-padding;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
margin: var(--rsp-spacing-s);
|
||||
box-shadow: var(--rsp-box-shadow);
|
||||
|
||||
.burst-open {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.burst-progress-status {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-item-footer {
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--rsp-grid-margin);
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
box-sizing: border-box;
|
||||
align-self: flex-end;
|
||||
//position: sticky;
|
||||
//bottom: 0;
|
||||
//@include burst-block-padding;
|
||||
//
|
||||
//&:sticky{
|
||||
// background: #fff;
|
||||
//}
|
||||
|
||||
//position: fixed;
|
||||
//z-index: 1;
|
||||
//bottom: 0;
|
||||
//right: 0;
|
||||
//background: #fff;
|
||||
//padding: 10px 458px 10px 0px;
|
||||
//box-shadow: var(--rsp-box-shadow);
|
||||
//border-top: 1px solid var(--rsp-grey-300);
|
||||
|
||||
.burst-legend {
|
||||
display: flex;
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-add-ip{
|
||||
margin-top: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
.burst {
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] {
|
||||
background-color: var(--rsp-input-background-color);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
color: var(--rsp-input-text-color);
|
||||
}
|
||||
|
||||
div[class^="burst-wizard-"] { // starts with selector
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] {
|
||||
background-color: var(--rsp-input-background-color);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
color: var(--rsp-input-text-color);
|
||||
}
|
||||
|
||||
.components-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.components-flex-item label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.components-input-control__container {
|
||||
max-width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-grid-item-content label {
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
text-transform: unset;
|
||||
box-sizing: border-box;
|
||||
display: inherit;
|
||||
max-width: 100%;
|
||||
z-index: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.components-base-control__field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.components-toggle-control {
|
||||
.components-base-control__field, .components-flex {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.components-form-toggle {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components-form-toggle.is-checked .components-form-toggle__track {
|
||||
background-color: var(--rsp-green);
|
||||
}
|
||||
|
||||
.burst-grid-item {
|
||||
.burst-grid-item-content {
|
||||
padding: var(--rsp-spacing-xs) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-field-wrap, .burst-settings-block-intro {
|
||||
padding-block: var(--rsp-spacing-s);
|
||||
@include burst-inline-block-padding;
|
||||
|
||||
& > .burst-field-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-field-button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.burst-highlight {
|
||||
background-color: transparent;
|
||||
border-left: 4px solid var(--rsp-green);
|
||||
-o-animation: fadeIt 3s ease-in-out;
|
||||
animation: fadeIt 3s ease-in-out;
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIt {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
30% {
|
||||
background-color: var(--rsp-green-faded);
|
||||
}
|
||||
100% {
|
||||
border-right: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
@keyframes fadeIt {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
border-right: 0;
|
||||
}
|
||||
30% {
|
||||
background-color: var(--rsp-green-faded);
|
||||
}
|
||||
100% {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
//switch padding to top, to prevent tasks from getting stuck to text field
|
||||
.burst-license {
|
||||
.burst-task-element {
|
||||
padding-top: var(--rsp-spacing-s);
|
||||
padding-bottom: 0;
|
||||
//limit width of skeleton icon, which causes scrollbars in the side during loading
|
||||
.burst-icon {
|
||||
width:15px;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-license-field {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-user-role-checkbox-blocklist {
|
||||
margin-top: var(--rsp-spacing-xs);
|
||||
|
||||
label {
|
||||
margin-top: var(--rsp-spacing-xxs);
|
||||
font-weight: 400;
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
}
|
||||
|
||||
.burst-class-id-field {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__input {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
|
||||
button {
|
||||
background-color: var(--rsp-input-background-color);
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
border-radius: var(--rsp-border-radius-xs) 0 0 var(--rsp-border-radius-xs);
|
||||
border-right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 0;
|
||||
border-radius: 0 var(--rsp-border-radius-xs) var(--rsp-border-radius-xs) 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-license {
|
||||
.button {
|
||||
margin-top: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
.burst-comment {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,329 @@
|
||||
.burst div[class^=burst-wizard-] {
|
||||
.burst-settings-goals {
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: var(--rsp-spacing-s);
|
||||
margin-top: var(--rsp-spacing-s);
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
background-color: var(--rsp-grey-200);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
|
||||
&__fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--rsp-spacing-xl);
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-l) var(--rsp-spacing-m) var(--rsp-spacing-l);
|
||||
margin-top: var(--rsp-spacing-s);
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
}
|
||||
&__warning {
|
||||
padding: var(--rsp-spacing-xs) var(--rsp-spacing-s);
|
||||
margin: var(--rsp-spacing-xxs) 0;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
opacity: 1;
|
||||
transition: opacity 1.3s ease-in-out;
|
||||
|
||||
color: var(--rsp-red);
|
||||
background-color: var(--rsp-red-faded);
|
||||
border: 1px solid var(--rsp-red);
|
||||
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
align-items: center;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--rsp-green);
|
||||
background-color: var(--rsp-green-faded);
|
||||
border: 1px solid var(--rsp-green);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: var(--rsp-text-color);
|
||||
background-color: var(--rsp-yellow-faded);
|
||||
border: 1px solid var(--rsp-yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
//padding: var(--rsp-spacing-s) var(--rsp-spacing-s);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
border: 1px solid var(--rsp-grey-300);
|
||||
|
||||
summary {
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-s);
|
||||
display: grid;
|
||||
grid-template-columns: 26px 1fr auto auto auto;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-s);
|
||||
list-style: none;
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.components-toggle-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
.components-flex{ gap: 0 }
|
||||
}
|
||||
|
||||
.burst-icon-chevron-down {
|
||||
transition: all .25s ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
padding-bottom: var(--rsp-spacing-s);
|
||||
border-bottom: 1px solid var(--rsp-grey-300);
|
||||
|
||||
.burst-icon-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-field-wrap {
|
||||
padding-inline: 0;
|
||||
padding: 0;
|
||||
padding-top: var(--rsp-spacing-m);
|
||||
}
|
||||
|
||||
.burst-label {
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--rsp-spacing-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__upgrade {
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-s);
|
||||
padding: var(--rsp-spacing-s);
|
||||
background-color: var(--rsp-grey-200);
|
||||
border-radius: var(--rsp-border-radius);
|
||||
margin-top: var(--rsp-spacing-s);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border: 2px solid var(--rsp-grey-300);
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
|
||||
.burst-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-radio-buttons__list {
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(49%, 1fr));
|
||||
gap: var(--rsp-spacing-s);
|
||||
|
||||
&__item {
|
||||
input {
|
||||
&[type='radio']{
|
||||
opacity:0;
|
||||
filter:alpha(opacity=0);
|
||||
position:absolute
|
||||
}
|
||||
|
||||
&[type="radio"]:checked + label {
|
||||
background: var(--rsp-green-faded);
|
||||
border: 2px solid var(--rsp-green);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
background: var(--rsp-white);
|
||||
margin: 1px;
|
||||
border: 1px solid var(--rsp-input-border-color);
|
||||
outline: 1px solid transparent;
|
||||
padding: var(--rsp-spacing-xs);
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto 1fr;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
align-items: center;
|
||||
&.burst-disabled-radio{
|
||||
background:inherit;
|
||||
}
|
||||
.burst-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.burst-class-id, .burst-hook {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: stretch;
|
||||
gap: var(--rsp-spacing-xl);
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.burst-select{
|
||||
&__control{
|
||||
input{
|
||||
outline-style: none;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&__menu{
|
||||
|
||||
}
|
||||
&__custom-option{
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
transition: background ease 0.2s;
|
||||
& > div{
|
||||
display: flex;
|
||||
gap: var(--rsp-spacing-xxs);
|
||||
}
|
||||
&:hover{
|
||||
background: var(--rsp-green-faded);
|
||||
}
|
||||
}
|
||||
|
||||
&__title{
|
||||
font-size: var(--rsp-fs-200);
|
||||
color: var(--rsp-text-color);
|
||||
}
|
||||
&__subtitle{
|
||||
font-size: var(--rsp-fs-100);
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
&__pageview-count{
|
||||
min-width: 45px;
|
||||
font-size: var(--rsp-fs-100);
|
||||
color: var(--rsp-text-color-light);
|
||||
}
|
||||
|
||||
}
|
||||
.burst-click-to-edit{
|
||||
h5{
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.MuiDialog-container .MuiPaper-rounded{
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
}
|
||||
|
||||
.burst-settings-goals__add-goal {
|
||||
display:flex;
|
||||
.burst-button {
|
||||
margin-right:10px;
|
||||
align-self: flex-start;
|
||||
&.burst-inactive {
|
||||
color: var(--rsp-grey-400 );
|
||||
}
|
||||
}
|
||||
}
|
||||
.burst-button-dropdown-container {
|
||||
background: var(--rsp-grey-100);
|
||||
.burst-button {
|
||||
display:flex;
|
||||
.burst-icon {
|
||||
margin-top: 6px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-button-dropdown {
|
||||
background: var(--rsp-grey-100);
|
||||
color: var(--rsp-text-color-light);
|
||||
border: 1px solid var(--rsp-grey-400);
|
||||
width: fit-content;
|
||||
font-size: var(--button-font-size);
|
||||
font-weight: var(--button-font-weight);
|
||||
line-height: var(--button-line-height);
|
||||
letter-spacing: var(--button-letter-spacing);
|
||||
transition: var(--button-transition);
|
||||
min-height: var(--button-min-height);
|
||||
margin: 0;
|
||||
border-radius: var(--button-border-radius);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&__row{
|
||||
display:flex;
|
||||
cursor:pointer;
|
||||
padding: var(--rsp-spacing-xxs) var(--rsp-spacing-xs);
|
||||
gap: var(--rsp-spacing-xs);
|
||||
align-items: center;
|
||||
&:hover{
|
||||
background: var(--rsp-grey-300);
|
||||
}
|
||||
|
||||
&.burst-inactive{
|
||||
color: var(--rsp-grey-400 );
|
||||
}
|
||||
.burst-icon {
|
||||
margin-left: 5px;
|
||||
margin-top:2px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.burst-logo-container {
|
||||
display:flex;
|
||||
.burst-logo-preview {
|
||||
margin-top: 10px;
|
||||
border: 1px var(--rsp-black) dashed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.burst-clickable {
|
||||
cursor: pointer;
|
||||
height: calc(40px + 2 * var(--rsp-spacing-xs));
|
||||
max-width: 100%;
|
||||
border-radius: var(--rsp-border-radius-xs);
|
||||
padding: var(--rsp-spacing-xs);
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
.burst-wizard-menu{
|
||||
height: fit-content;
|
||||
.burst-grid-item-content{
|
||||
padding: 0;
|
||||
padding-bottom: var(--rsp-spacing-l);
|
||||
}
|
||||
}
|
||||
.burst-wizard-menu-items {
|
||||
.burst-menu-item{
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
text-decoration: none;
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
@include burst-inline-block-padding;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
&.burst-active{
|
||||
> a{
|
||||
//text-decoration: underline;
|
||||
color: var(--rsp-green);
|
||||
font-weight: 600;
|
||||
border-left: 4px solid var(--rsp-green);
|
||||
//background-color: #f2e6c966;
|
||||
}
|
||||
}
|
||||
&.burst-featured{
|
||||
a{
|
||||
//padding-block: var(--rsp-spacing-m);
|
||||
//background: var(--rsp-dark-blue-faded);
|
||||
font-weight: 600;
|
||||
flex-wrap: wrap;
|
||||
.burst-menu-item-featured-pill{
|
||||
background: var(--rsp-green);
|
||||
color: var(--rsp-text-color-white);
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.burst-pro{
|
||||
a{
|
||||
background: var(--rsp-dark-blue-faded);
|
||||
flex-wrap: wrap;
|
||||
.burst-menu-item-featured-pill{
|
||||
background: var(--rsp-dark-blue);
|
||||
color: var(--rsp-text-color-white);
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--rsp-border-radius);
|
||||
font-size: var(--rsp-fs-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-pro-menu-item {
|
||||
background: var(--rsp-dark-blue-faded);
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
text-decoration: none;
|
||||
color: var(--rsp-text-color);
|
||||
font-size: var(--rsp-fs-400);
|
||||
padding-block: var(--rsp-spacing-xs);
|
||||
@include burst-inline-block-padding;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.burst-submenu-item{
|
||||
a{
|
||||
padding-left: calc(var(--rsp-spacing-l) + var(--rsp-spacing-m));
|
||||
font-size: var(--rsp-fs-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.burst-wizard-help {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: var(--rsp-spacing-xs);
|
||||
details{
|
||||
font-size: var(--rsp-fs-200);
|
||||
.burst-help-more-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 12px;
|
||||
}
|
||||
summary {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
justify-content: space-between;
|
||||
font-size: var(--rsp-fs-300);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
&::-webkit-details-marker {
|
||||
display:none;
|
||||
}
|
||||
&:first-of-type {
|
||||
list-style-type: none;
|
||||
}
|
||||
.burst-icon{
|
||||
transition: all .25s ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
summary, p {
|
||||
font-size: var(--rsp-fs-200);
|
||||
}
|
||||
details[open]{
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
summary{
|
||||
padding: 0;
|
||||
padding-bottom: var(--rsp-spacing-xs);
|
||||
.burst-icon{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.burst-wizard-help {
|
||||
.burst-help-header {
|
||||
width:100%;
|
||||
display:flex;
|
||||
padding:10px;
|
||||
.burst-help-title{
|
||||
font-size: var(--rsp-fs-400);
|
||||
font-weight: 500;
|
||||
}
|
||||
.burst-help-control {
|
||||
margin-left:auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.burst-wizard-help-notice {
|
||||
width: 100%;
|
||||
@include burst-block;
|
||||
border-radius: var(--rsp-border-radius-s);
|
||||
height: fit-content;
|
||||
background-color: var(--rsp-dark-blue-faded);
|
||||
&.burst-warning {
|
||||
background-color: var(--rsp-yellow-faded);
|
||||
}
|
||||
summary, p{
|
||||
padding: var(--rsp-spacing-s) var(--rsp-spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
.burst{
|
||||
.components-snackbar-list.edit-site-notices{
|
||||
width: max-content;
|
||||
position: fixed;
|
||||
bottom: var(--rsp-spacing-m);
|
||||
right: var(--rsp-spacing-l);
|
||||
& > div{
|
||||
margin-left: auto;
|
||||
}
|
||||
.components-snackbar{
|
||||
@include burst-block;
|
||||
color: var(--rsp-text-color);
|
||||
font-weight:700;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
.burst{
|
||||
/*skeleton*/
|
||||
$panelheight : 38px;
|
||||
$panelborder : 1px;
|
||||
$paneloffset : 3*($panelborder+$panelheight);
|
||||
$rows : 6;
|
||||
.burst-skeleton:empty {
|
||||
margin: auto;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
height: ($rows*$panelheight)+($rows+1)*$panelborder; /* change height to see repeat-y behavior */
|
||||
|
||||
background-image:
|
||||
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 15% ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 ),
|
||||
linear-gradient( #f2f2f2 $panelheight, transparent 0 );
|
||||
|
||||
background-repeat: repeat-y;
|
||||
|
||||
background-size:
|
||||
50px 200px, /* highlight */
|
||||
100% $paneloffset,
|
||||
100% $paneloffset,
|
||||
100% $paneloffset,
|
||||
100% $paneloffset;
|
||||
|
||||
background-position:
|
||||
0 0, /* highlight */
|
||||
$panelborder $panelborder,
|
||||
$panelborder $panelheight+(2*$panelborder),
|
||||
$panelborder (2*$panelheight)+(3*$panelborder),
|
||||
$panelborder (3*$panelheight)+(4*$panelborder);
|
||||
|
||||
background-color:#d6d8db;
|
||||
border-right: $panelborder solid #d6d8db;
|
||||
animation: shine 2.5s infinite;
|
||||
}
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position:
|
||||
100% 0, /* move highlight to right */
|
||||
$panelborder $panelborder,
|
||||
$panelborder $panelheight+(2*$panelborder),
|
||||
$panelborder (2*$panelheight)+(3*$panelborder),
|
||||
$panelborder (3*$panelheight)+(4*$panelborder);
|
||||
}
|
||||
}
|
||||
|
||||
/*loader*/
|
||||
.burst-loader {
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
> div {
|
||||
margin:1px;
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
&.burst-loader-white >div {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.rect2 {
|
||||
-webkit-animation-delay: -1.1s;
|
||||
animation-delay: -1.1s;
|
||||
}
|
||||
|
||||
.rect3 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
.rect4 {
|
||||
-webkit-animation-delay: -0.9s;
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
|
||||
.rect5 {
|
||||
-webkit-animation-delay: -0.8s;
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
}
|
||||
|
||||
.button-primary .burst-loader div {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% { transform: scaleY(0.4) }
|
||||
20% { transform: scaleY(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
} 20% {
|
||||
transform: scaleY(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.burst {
|
||||
|
||||
--rsp-brand-primary-lightest: #ecf4ed;
|
||||
--rsp-brand-primary-lighter: #d2e4d3;
|
||||
--rsp-brand-primary-light: #b7d4b8;
|
||||
--rsp-brand-primary: var(--rsp-green);
|
||||
--rsp-brand-primary-dark: #1e7e1e;
|
||||
--rsp-brand-primary-darker: #1a6c1a;
|
||||
--rsp-brand-primary-darkest: #155515;
|
||||
|
||||
// Plugin specific variables down here please
|
||||
|
||||
--rsp-brand-secondary: var(--rsp-yellow);
|
||||
--rsp-brand-primary-faded: var(--rsp-brand-primary-lightest);
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user