@cdc/dashboard 4.22.10-alpha.1 → 4.22.11

package/src/scss/editor-panel.scss

@@ -1,5 +1,7 @@
 // Shift down for top level Dashboard bar when in edit mode
-.layout-container, .editor-panel + .cdc-dashboard-inner-container, .editor-heading + .cdc-open-viz-module {
+.layout-container,
+.editor-panel + .cdc-dashboard-inner-container,
+.editor-heading + .cdc-open-viz-module {
   position: relative;
   top: 3em;
   .editor-panel {
@@ -11,602 +13,605 @@
 }
 
 .editor-panel {
-    //TODO: Remove after COVE refactor
-    &.cove {
-      @import "@cdc/core/styles/v2/layout/tooltip.scss";
-    }
+  //TODO: Remove after COVE refactor
+  &.cove {
+    @import '@cdc/core/styles/v2/layout/tooltip.scss';
+  }
 
-    .two-col-inputs {
-      display: flex;
-      margin-top: 1em;
-      justify-content: space-between;
-      > label {
-        width: 48%;
-        margin-top: 0 !important
-      }
+  .two-col-inputs {
+    display: flex;
+    margin-top: 1em;
+    justify-content: space-between;
+    > label {
+      width: 48%;
+      margin-top: 0 !important;
     }
-    .helper-tooltip {
-      padding: 5px;
-      max-width: 300px;
+  }
+  .helper-tooltip {
+    padding: 5px;
+    max-width: 300px;
+  }
+  .helper {
+    position: relative;
+    opacity: 0.7;
+    cursor: pointer;
+    width: 17px;
+    height: 17px;
+    align-self: center;
+    margin-left: 0.3rem;
+    margin-top: -0.3rem;
+    border: none !important;
+    box-shadow: none !important;
+    svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
     }
-    .helper {
-      position: relative;
-      opacity: .7;
-      cursor: pointer;
-      width: 17px;
-      height: 17px;
-      align-self: center;
-      margin-left: .3rem;
-      margin-top: -0.3rem;
+  }
+  .divider-heading {
+    display: block;
+    font-size: 1em;
+    margin-top: 1em;
+  }
+  .series-list {
+    list-style: none;
+    border: $lightGray 1px solid;
+    &:empty {
       border: none !important;
-      box-shadow: none !important;
-      svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .divider-heading {
-      display: block;
-      font-size: 1em;
-      margin-top: 1em;
     }
-    .series-list {
-      list-style: none;
-      border: $lightGray 1px solid;
-      &:empty {
-        border: none !important
-      }
-      li {
-        padding: .3em .5em;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: .9em;
-        &:hover {
-          background-color: $lightestGray;
-        }
-        span {
-          font-size: .8em;
-          color: #f00;
-          cursor: pointer;
-        }
-        + li {
-          border-top: $lightGray 1px solid;
-        }
+    li {
+      padding: 0.3em 0.5em;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 0.9em;
+      &:hover {
+        background-color: $lightestGray;
       }
-    }
-    background: #fff;
-    width: $editorWidth;
-    overflow-y: overlay;
-    position: fixed;
-    z-index: 8;
-    display: flex;
-    flex-direction: column;
-    left: 0;
-    top: 48px;
-    bottom: 0;
-    .accordion__heading {
-      background: $lightestGray;
-    }
-    .accordion__item {
-      select {
-        text-transform: capitalize;
+      span {
+        font-size: 0.8em;
+        color: #f00;
+        cursor: pointer;
       }
-      .number-narrow {
-        min-width: auto;
-        width: 75px
+      + li {
+        border-top: $lightGray 1px solid;
       }
     }
-    .form-container {
-      border-right: $lightGray 1px solid;
-      flex-grow: 1;
+  }
+  background: #fff;
+  width: $editorWidth;
+  overflow-y: overlay;
+  position: fixed;
+  z-index: 8;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  top: 48px;
+  bottom: 0;
+  .accordion__heading {
+    background: $lightestGray;
+  }
+  .accordion__item {
+    select {
+      text-transform: capitalize;
     }
-    .guidance-link {
-      margin: 2em 1em 0;
-      padding: .75em 1em;
-      svg {
-        width: 60px;
-        color: $blue;
-        margin-right: 1rem;
-        height: 60px; // IE11
-        path {
-          fill: currentColor;
-        }
-      }
+    .number-narrow {
+      min-width: auto;
+      width: 75px;
     }
-    .warning {
-      color: #D8000C;
-      background-color: #FFD2D2;
-      padding: .75em 1em;
-      margin: 1em 0;
-      font-size: .8em;
-      border: #D8000C 1px solid;
-      border-radius: .4em;
-      strong {
-        font-weight: 600;
-        display: block;
+  }
+  .form-container {
+    border-right: $lightGray 1px solid;
+    flex-grow: 1;
+  }
+  .guidance-link {
+    margin: 2em 1em 0;
+    padding: 0.75em 1em;
+    svg {
+      width: 60px;
+      color: $blue;
+      margin-right: 1rem;
+      height: 60px; // IE11
+      path {
+        fill: currentColor;
       }
     }
-    .accordion__button {
-      cursor: pointer;
-      font-size: 1em;
-      padding: .3em 1em;
-      width: 100%;
-      text-align: left;
-      position: relative;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    }
-    .accordion__panel:first-child { margin-top: 0; }
-    .accordion__button:before {
-      display: inline-block;
-      content: '';
-      height: 7px;
-      width: 7px;
-      margin-right: 1em;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      transform: rotate(-45deg);
-      right: 0;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg) translateY(-50%);
-      transition: .1s all;
+  }
+  .warning {
+    color: #d8000c;
+    background-color: #ffd2d2;
+    padding: 0.75em 1em;
+    margin: 1em 0;
+    font-size: 0.8em;
+    border: #d8000c 1px solid;
+    border-radius: 0.4em;
+    strong {
+      font-weight: 600;
+      display: block;
     }
+  }
+  .accordion__button {
+    cursor: pointer;
+    font-size: 1em;
+    padding: 0.3em 1em;
+    width: 100%;
+    text-align: left;
+    position: relative;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+  .accordion__panel:first-child {
+    margin-top: 0;
+  }
+  .accordion__button:before {
+    display: inline-block;
+    content: '';
+    height: 7px;
+    width: 7px;
+    margin-right: 1em;
+    border-bottom: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    transform: rotate(-45deg);
+    right: 0;
+    position: absolute;
+    top: 50%;
+    transform: rotate(-45deg) translateY(-50%);
+    transition: 0.1s all;
+  }
 
-    .accordion__button[aria-expanded='true']::before,
-    .accordion__button[aria-selected='true']::before {
-      transform: rotate(45deg) translateY(-50%);
-      margin-right: 1.3em;
-      transition: .1s all;
-    }
+  .accordion__button[aria-expanded='true']::before,
+  .accordion__button[aria-selected='true']::before {
+    transform: rotate(45deg) translateY(-50%);
+    margin-right: 1.3em;
+    transition: 0.1s all;
+  }
 
-    .accordion__panel {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 1em 1.25em 2em;
-      animation: fadein 0.2s ease-in;
-      h5 {
-        font-size: .8em;
-      }
+  .accordion__panel {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 1em 1.25em 2em;
+    animation: fadein 0.2s ease-in;
+    h5 {
+      font-size: 0.8em;
     }
+  }
 
-    .advanced {
-      padding: 0 1em 1em;
+  .advanced {
+    padding: 0 1em 1em;
+    text-align: left;
+    p {
+      font-size: 0.8rem;
+    }
+    .advanced-toggle-link {
+      padding-top: 1em;
+      display: block;
       text-align: left;
-      p {
-        font-size: .8rem;
-      }
-      .advanced-toggle-link {
-        padding-top: 1em;
-        display: block;
-        text-align: left;
-        cursor: pointer;
-        text-decoration: underline;
-        span {
-          text-decoration: none;
-          display: inline-block;
-          font-family: monospace;
-          padding-right: 5px;
-        }
-        &:hover {
-          color: rgba(0,0,0,.7);
-        }
-      }
-      textarea {
-        height: 400px;
-        width: 100%;
-        font-size: .9em;
-        padding: .5em;
+      cursor: pointer;
+      text-decoration: underline;
+      span {
+        text-decoration: none;
+        display: inline-block;
         font-family: monospace;
-        box-sizing: border-box
+        padding-right: 5px;
       }
-    }
-
-    @keyframes fadein {
-      0% {
-        opacity: 0;
+      &:hover {
+        color: rgba(0, 0, 0, 0.7);
       }
+    }
+    textarea {
+      height: 400px;
+      width: 100%;
+      font-size: 0.9em;
+      padding: 0.5em;
+      font-family: monospace;
+      box-sizing: border-box;
+    }
+  }
 
-      100% {
-        opacity: 1;
-      }
+  @keyframes fadein {
+    0% {
+      opacity: 0;
     }
 
-    .heading-2 {
-      background: #565656;
-      color: #fff;
-      font-size: 1.1em;
-      padding: .6em 1em;
-      position: relative;
-      border-bottom:#565656 3px solid;
-      z-index: 3;
+    100% {
+      opacity: 1;
     }
+  }
 
-    label {
-      text-transform: uppercase;
-      display: block;
-      font-size: .8em;
-      font-weight: 600;
-      &:not(:first-child) {
-        margin-top: 1em;
-      }
-      span.edit-label {
-        margin-bottom: .3em;
-        display: block;
-      }
-      span.column-heading {
-        font-size: 1em;
-      }
-      &.checkbox {
-        display: flex;
-        span {
-          display: inline;
-        }
-        input {
-          margin-left: 0;
-          width: inherit;
-          display: inline;
-        }
-      }
+  .heading-2 {
+    background: #565656;
+    color: #fff;
+    font-size: 1.1em;
+    padding: 0.6em 1em;
+    position: relative;
+    border-bottom: #565656 3px solid;
+    z-index: 3;
+  }
+
+  label {
+    text-transform: uppercase;
+    display: block;
+    font-size: 0.8em;
+    font-weight: 600;
+    &:not(:first-child) {
+      margin-top: 1em;
     }
-    input[type="text"], input[role="combobox"], input[type="number"], textarea {
-      min-width: 100%;
-      max-width: 100%; // Doing this prevents width of textarea from being changed
+    span.edit-label {
+      margin-bottom: 0.3em;
+      display: block;
     }
-    textarea {
-      min-height: 140px;
+    span.column-heading {
+      font-size: 1em;
     }
-    .header .color-palette li {
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 2.8px;
+    &.checkbox {
+      display: flex;
+      span {
+        display: inline;
+      }
+      input {
+        margin-left: 0;
+        width: inherit;
+        display: inline;
+      }
     }
-    .color-palette {
+  }
+  input[type='text'],
+  input[role='combobox'],
+  input[type='number'],
+  textarea {
+    min-width: 100%;
+    max-width: 100%; // Doing this prevents width of textarea from being changed
+  }
+  textarea {
+    min-height: 140px;
+  }
+  .header .color-palette li {
+    width: 21px;
+    height: 21px;
+    border-radius: 40px;
+    margin-right: 2.8px;
+  }
+  .color-palette {
+    display: flex;
+    max-width: 100%;
+    padding: 0;
+    margin: 0.5em 0 0 0;
+    list-style: none;
+    flex-wrap: wrap;
+    li {
+      width: 45px;
+      height: 23px;
+      margin-right: 4px;
+      margin-bottom: 10px;
       display: flex;
-      max-width: 100%;
-      padding: 0;
-      margin: .5em 0 0 0;
-      list-style: none;
-      flex-wrap: wrap;
-      li {
-        width: 45px;
-        height: 23px;
-        margin-right: 4px;
-        margin-bottom: 10px;
-        display: flex;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        .click-target {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        &.selected {
-          border: rgba(0,0,0, .8) 2px solid;
-        }
-        span {
-          width: 33.3%;
-        }
+      border-radius: 5px;
+      overflow: hidden;
+      cursor: pointer;
+      position: relative;
+      .click-target {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+      &.selected {
+        border: rgba(0, 0, 0, 0.8) 2px solid;
+      }
+      span {
+        width: 33.3%;
       }
     }
+  }
 
-    fieldset {
-      display: block;
-    }
+  fieldset {
+    display: block;
+  }
 
-    .primary-fieldset {
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
+  .primary-fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
 
-    ul.column-edit {
-      list-style: none;
-      li {
-        margin-top: 1em;
-      }
-      .three-col {
-        display: flex;
-        justify-content: space-between;
-        > label {
-          margin-top: 0;
-          width: 30%;
-          display: inline-block;
-          input[type="text"], input[type="number"] {
-            width: 50px;
-          }
+  ul.column-edit {
+    list-style: none;
+    li {
+      margin-top: 1em;
+    }
+    .three-col {
+      display: flex;
+      justify-content: space-between;
+      > label {
+        margin-top: 0;
+        width: 30%;
+        display: inline-block;
+        input[type='text'],
+        input[type='number'] {
+          width: 50px;
         }
       }
     }
+  }
 
-    &.hidden {
-      display: none;
-    }
+  &.hidden {
+    display: none;
+  }
 
-    .emove-column {
-      float: right;
-      text-transform: uppercase;
-      color: #C32B2B;
-      font-size: .7em;
-      line-height: 1.6em;
-      border-radius: 5px;
-      margin: 0 auto;
-      transition: .1s all;
-      border: 0;
-      text-decoration: underline;
-      outline: 0;
-      cursor: pointer;
-      font-weight: bold;
-    }
+  .emove-column {
+    float: right;
+    text-transform: uppercase;
+    color: #c32b2b;
+    font-size: 0.7em;
+    line-height: 1.6em;
+    border-radius: 5px;
+    margin: 0 auto;
+    transition: 0.1s all;
+    border: 0;
+    text-decoration: underline;
+    outline: 0;
+    cursor: pointer;
+    font-weight: bold;
+  }
 
-    .edit-block {
-      padding-left: 1em;
-      border-left: rgba(0, 0, 0, 0.2) 4px solid;
-      transition: .2s all;
-      &:not(:first-child) {
-        margin-top: 2em;
-      }
-      input[type="text"], input[type="number"] {
-        font-size: 1em;
-      }
-      label {
-        margin-top: 0;
-      }
-      label + label {
-        margin-top: 1em;
-      }
-      &:hover {
-        border-left: rgba(0, 0, 0, 0.7) 4px solid;
-        transition: .2s all;
-      }
+  .edit-block {
+    padding-left: 1em;
+    border-left: rgba(0, 0, 0, 0.2) 4px solid;
+    transition: 0.2s all;
+    &:not(:first-child) {
+      margin-top: 2em;
     }
-
-    span.subtext {
-      display: block;
-      color: rgba(0,0,0,.5);
-      text-transform: none;
-      font-weight: normal;
+    input[type='text'],
+    input[type='number'] {
+      font-size: 1em;
     }
-
-    .btn {
-      margin-top: 1em;
+    label {
+      margin-top: 0;
     }
-    .sort-list {
-      list-style: none;
-      > li {
-        margin-right: .3em;
-        margin-bottom: .3em;
-      }
+    label + label {
+      margin-top: 1em;
     }
-    .sort-list li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #D1D1D1;
-      border-radius: 2px;
-      background: #F1F1F1;
-      padding: .4em .6em;
-      font-size: .8em;
-      margin-bottom: .3em;
-      cursor: move;
+    &:hover {
+      border-left: rgba(0, 0, 0, 0.7) 4px solid;
+      transition: 0.2s all;
     }
+  }
 
-    .info {
-      font-size: .8em;
-      line-height: 1.4em;
-      font-style: italic;
-      padding-top: 10px;
-    }
+  span.subtext {
+    display: block;
+    color: rgba(0, 0, 0, 0.5);
+    text-transform: none;
+    font-weight: normal;
+  }
 
-    .react-tags__search {
-      width: 100%;
+  .btn {
+    margin-top: 1em;
+  }
+  .sort-list {
+    list-style: none;
+    > li {
+      margin-right: 0.3em;
+      margin-bottom: 0.3em;
     }
+  }
+  .sort-list li > div {
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid #d1d1d1;
+    border-radius: 2px;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-bottom: 0.3em;
+    cursor: move;
+  }
 
-    .react-tags {
-      position: relative;
-      input.react-tags__search-input {
-        font-size: .8rem;
-      }
-      /* clicking anywhere will focus the input */
-      cursor: text;
-      span {
-        display: inline
-      }
-    }
+  .info {
+    font-size: 0.8em;
+    line-height: 1.4em;
+    font-style: italic;
+    padding-top: 10px;
+  }
 
-    .react-tags.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
+  .react-tags__search {
+    width: 100%;
+  }
 
-    .react-tags__selected {
+  .react-tags {
+    position: relative;
+    input.react-tags__search-input {
+      font-size: 0.8rem;
+    }
+    /* clicking anywhere will focus the input */
+    cursor: text;
+    span {
       display: inline;
     }
+  }
 
-    .react-tags__selected-tag {
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #D1D1D1;
-      border-radius: 2px;
-      background: #F1F1F1;
-      padding: .4em .6em;
-      font-size: .8em;
-      margin-right: .3em;
-      margin-bottom: .3em;
-    }
+  .react-tags.is-focused {
+    border-color: rgba(0, 0, 0, 0.7);
+  }
 
-    .react-tags__selected-tag:after {
-      content: '\2715';
-      color: #AAA;
-      margin-left: 8px;
-    }
+  .react-tags__selected {
+    display: inline;
+  }
 
-    .react-tags__selected-tag:hover,
-    .react-tags__selected-tag:focus {
-      border-color: #B1B1B1;
-    }
+  .react-tags__selected-tag {
+    display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid #d1d1d1;
+    border-radius: 2px;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-right: 0.3em;
+    margin-bottom: 0.3em;
+  }
 
-    .react-tags__search {
-      display: inline-block;
+  .react-tags__selected-tag:after {
+    content: '\2715';
+    color: #aaa;
+    margin-left: 8px;
+  }
 
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-    }
+  .react-tags__selected-tag:hover,
+  .react-tags__selected-tag:focus {
+    border-color: #b1b1b1;
+  }
 
-    @media screen and (min-width: 30em) {
+  .react-tags__search {
+    display: inline-block;
 
-      .react-tags__search {
-        /* this will become the offsetParent for suggestions */
-        position: relative;
-      }
+    /* prevent autoresize overflowing the container */
+    max-width: 100%;
+  }
 
+  @media screen and (min-width: 30em) {
+    .react-tags__search {
+      /* this will become the offsetParent for suggestions */
+      position: relative;
     }
+  }
 
-    .react-tags__search input {
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
+  .react-tags__search input {
+    /* prevent autoresize overflowing the container */
+    max-width: 100%;
 
-      /* emove styles and layout from this element */
-      margin: 0;
-      outline: none;
-      padding: .5em .3em;
+    /* emove styles and layout from this element */
+    margin: 0;
+    outline: none;
+    padding: 0.5em 0.3em;
 
-      /* match the font styles */
-      font-size: inherit;
-      line-height: inherit;
-    }
+    /* match the font styles */
+    font-size: inherit;
+    line-height: inherit;
+  }
 
-    .react-tags__search input::-ms-clear {
-      display: none;
-    }
+  .react-tags__search input::-ms-clear {
+    display: none;
+  }
+
+  .react-tags__suggestions {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+  }
 
+  @media screen and (min-width: 30em) {
     .react-tags__suggestions {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
+      width: 240px;
     }
+  }
 
-    @media screen and (min-width: 30em) {
-
-      .react-tags__suggestions {
-        width: 240px;
-      }
+  .react-tags__suggestions ul {
+    margin: 4px -1px;
+    padding: 0;
+    list-style: none;
+    background: white;
+    border: 1px solid #d1d1d1;
+    border-radius: 2px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  }
 
-    }
+  .react-tags__suggestions li {
+    border-bottom: 1px solid #ddd;
+    padding: 6px 8px;
+  }
 
-    .react-tags__suggestions ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #D1D1D1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
+  .react-tags__suggestions li mark {
+    text-decoration: underline;
+    background: none;
+    font-weight: 600;
+  }
 
-    .react-tags__suggestions li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-    }
+  .react-tags__suggestions li:hover {
+    cursor: pointer;
+    background: #eee;
+  }
 
-    .react-tags__suggestions li mark {
-      text-decoration: underline;
-      background: none;
-      font-weight: 600;
-    }
+  .react-tags__suggestions li.is-active {
+    background: #b7cfe0;
+  }
 
-    .react-tags__suggestions li:hover {
-      cursor: pointer;
-      background: #eee;
-    }
+  .react-tags__suggestions li.is-disabled {
+    opacity: 0.5;
+    cursor: auto;
+  }
 
-    .react-tags__suggestions li.is-active {
-      background: #b7cfe0;
-    }
+  .current-viz-list {
+    margin: 0.5em 0;
+    padding-left: 1.25em;
 
-    .react-tags__suggestions li.is-disabled {
-      opacity: 0.5;
-      cursor: auto;
+    li button {
+      float: right;
+      margin: 0 0.5em;
+      border: 1px solid gray;
     }
+  }
 
-    .current-viz-list {
-      margin: 0.5em 0;
-      padding-left: 1.25em;
+  .viz-icon {
+    background-color: #fff;
+    color: #565656;
+    border: #797979 1px solid;
+    padding: 10px;
+    margin: 1em;
 
-      li button {
-        float: right;
-        margin: 0 0.5em;
-        border: 1px solid gray;
-      }
+    span {
+      text-transform: none;
+      font-size: 1em;
+      margin-top: 1em;
     }
 
-    .viz-icon {
-      background-color: #FFF;
-      color: #565656;
-      border: #797979 1px solid;
-      padding: 10px;
-      margin: 1em;
-
-      span {
-        text-transform: none;
-        font-size: 1em;
-        margin-top: 1em;
-      }
-
-      &:hover {
-        background: #F2F2F2;
-        transition: .2s all;
-      }
+    &:hover {
+      background: #f2f2f2;
+      transition: 0.2s all;
+    }
 
-      svg {
-          display: block;
-          margin: .5em auto;
-          box-sizing: border-box;
-          width: 100px;
-          height: 75px;
-          path {
-            fill: currentColor
-          }
+    svg {
+      display: block;
+      margin: 0.5em auto;
+      box-sizing: border-box;
+      width: 100px;
+      height: 75px;
+      path {
+        fill: currentColor;
       }
     }
+  }
 }
 .editor-toggle {
-  background: #F2F2F2;
+  background: #f2f2f2;
   border-radius: 60px;
   color: #000;
   font-size: 1em;
   border: 0;
   position: fixed;
   z-index: 99;
-  transition: .1s background;
+  transition: 0.1s background;
   cursor: pointer;
   width: 25px;
   height: 25px;
   left: 307px;
   top: calc(3em + 10px);
-  box-shadow: rgba(0,0,0,.5) 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   &:before {
     top: 43%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
-    content: "\00ab";
+    content: '\00ab';
   }
   &.collapsed {
     left: 1em;
     margin-left: 0;
     &:before {
-    content: "\00bb";
-   }
+      content: '\00bb';
+    }
   }
   &:hover {
-    background: rgba(255,255,255,1)
+    background: rgba(255, 255, 255, 1);
   }
 }
 
@@ -616,15 +621,15 @@
 
 .subheading-3 {
   margin-top: 1em;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
   display: block;
 }
 
 .drag-grid {
   display: flex;
   flex-wrap: wrap;
-  column-gap: .5em;
-  row-gap: .5em;
+  column-gap: 0.5em;
+  row-gap: 0.5em;
   .widget {
     width: 120px;
     height: 100px;
@@ -640,11 +645,11 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      font-size: .8em;
+      font-size: 0.8em;
       svg {
         width: 50px;
         height: 50px;
-        margin-bottom: .5em;
+        margin-bottom: 0.5em;
       }
     }
   }