You are here

Home » API reference » Dashboards with Layout Builder 8

dashboard.css in Dashboards with Layout Builder 8

Same filename and directory in other branches
  1. 2.0.x css/dashboard.css
.toolbar-bar .toolbar-item.toolbar-menu-administration-dashboard:before {
  background-image: url("../images/dashboard.svg");
}

@keyframes pulse-throbber {
  0% {
    opacity: 1;
    transform: scaley(1);
  }
  100% {
    opacity: 0.2;
    transform: scaley(0.5);
  }
}

.dashboard-layout-builder-form span[data-big-pipe-placeholder-id],
.dashboards-container span[data-big-pipe-placeholder-id] {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 6px;
  height: 30px;
  background: rebeccaPurple;
  animation: pulse-throbber 0.2s infinite;
  animation-delay: 0.0666666667s;
  animation-direction: alternate;
}

.dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:before,
.dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:after,
.dashboards-container span[data-big-pipe-placeholder-id]:before,
.dashboards-container span[data-big-pipe-placeholder-id]:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: rebeccaPurple;
  top: 0;
  animation: pulse-throbber 0.2s infinite;
  animation-direction: alternate;
}

.dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:before,
.dashboards-container span[data-big-pipe-placeholder-id]:before {
  left: -12px;
}

.dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:after,
.dashboards-container span[data-big-pipe-placeholder-id]:after {
  left: 12px;
  animation-delay: 0.1333333333s;
}

File

css/dashboard.css
View source 
  1. .toolbar-bar .toolbar-item.toolbar-menu-administration-dashboard:before {

  2.   background-image: url("../images/dashboard.svg");

  3. }

  4. 

  5. @keyframes pulse-throbber {

  6.   0% {

  7.     opacity: 1;

  8.     transform: scaley(1);

  9.   }

  10.   100% {

  11.     opacity: 0.2;

  12.     transform: scaley(0.5);

  13.   }

  14. }

  15. 

  16. .dashboard-layout-builder-form span[data-big-pipe-placeholder-id],

  17. .dashboards-container span[data-big-pipe-placeholder-id] {

  18.   position: relative;

  19.   display: block;

  20.   margin: 20px auto;

  21.   width: 6px;

  22.   height: 30px;

  23.   background: rebeccaPurple;

  24.   animation: pulse-throbber 0.2s infinite;

  25.   animation-delay: 0.0666666667s;

  26.   animation-direction: alternate;

  27. }

  28. 

  29. .dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:before,

  30. .dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:after,

  31. .dashboards-container span[data-big-pipe-placeholder-id]:before,

  32. .dashboards-container span[data-big-pipe-placeholder-id]:after {

  33.   content: "";

  34.   position: absolute;

  35.   display: block;

  36.   width: 100%;

  37.   height: 100%;

  38.   background: rebeccaPurple;

  39.   top: 0;

  40.   animation: pulse-throbber 0.2s infinite;

  41.   animation-direction: alternate;

  42. }

  43. 

  44. .dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:before,

  45. .dashboards-container span[data-big-pipe-placeholder-id]:before {

  46.   left: -12px;

  47. }

  48. 

  49. .dashboard-layout-builder-form span[data-big-pipe-placeholder-id]:after,

  50. .dashboards-container span[data-big-pipe-placeholder-id]:after {

  51.   left: 12px;

  52.   animation-delay: 0.1333333333s;

  53. }