@cdc/chart 1.3.4 → 4.22.11

package/src/scss/editor-panel.scss

@@ -1,6 +1,6 @@
 //TODO: Remove after COVE refactor
 .cove {
-  @import "@cdc/core/styles/v2/layout/tooltip.scss";
+  @import '@cdc/core/styles/v2/layout/tooltip.scss';
 }
 
 .editor-panel {
@@ -25,7 +25,7 @@
 
     > label {
       width: 48%;
-      margin-top: 0 !important
+      margin-top: 0 !important;
     }
   }
 
@@ -36,12 +36,12 @@
 
   .helper {
     position: relative;
-    opacity: .7;
+    opacity: 0.7;
     cursor: pointer;
     width: 17px;
     height: 17px;
     align-self: center;
-    margin-left: .3rem;
+    margin-left: 0.3rem;
     margin-top: -0.3rem;
     border: none !important;
     box-shadow: none !important;
@@ -66,15 +66,15 @@
     border: $lightGray 1px solid;
 
     &:empty {
-      border: none !important
+      border: none !important;
     }
 
     li {
-      padding: .3em .5em;
+      padding: 0.3em 0.5em;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      font-size: .9em;
+      font-size: 0.9em;
 
       &:hover {
         background-color: $lightestGray;
@@ -132,7 +132,7 @@
       }
 
       .series-list__dropdown {
-        font-size: .8em;
+        font-size: 0.8em;
       }
 
       .series-list__remove {
@@ -167,7 +167,7 @@
 
     .number-narrow {
       min-width: auto;
-      width: 75px
+      width: 75px;
     }
   }
 
@@ -178,7 +178,7 @@
 
   .guidance-link {
     margin: 2em 1em 0;
-    padding: .75em 1em;
+    padding: 0.75em 1em;
 
     svg {
       width: 60px;
@@ -192,13 +192,13 @@
   }
 
   .warning {
-    color: #D8000C;
-    background-color: #FFD2D2;
-    padding: .75em 1em;
+    color: #d8000c;
+    background-color: #ffd2d2;
+    padding: 0.75em 1em;
     margin: 1em 0;
-    font-size: .8em;
-    border: #D8000C 1px solid;
-    border-radius: .4em;
+    font-size: 0.8em;
+    border: #d8000c 1px solid;
+    border-radius: 0.4em;
 
     strong {
       font-weight: 600;
@@ -209,7 +209,7 @@
   .accordion__button {
     cursor: pointer;
     font-size: 1em;
-    padding: .3em 1em;
+    padding: 0.3em 1em;
     width: 100%;
     text-align: left;
     position: relative;
@@ -227,14 +227,14 @@
       position: absolute;
       top: 50%;
       transform: rotate(-45deg) translateY(-50%);
-      transition: .1s all;
+      transition: 0.1s all;
     }
 
     &[aria-expanded='true']::before {
       transform: rotate(45deg) translateY(-50%);
       transform-origin: right;
       margin-right: 1.3em;
-      transition: .1s all;
+      transition: 0.1s all;
     }
   }
 
@@ -248,7 +248,7 @@
     }
 
     h5 {
-      font-size: .8em;
+      font-size: 0.8em;
     }
   }
 
@@ -257,7 +257,7 @@
     text-align: left;
 
     p {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
 
     .advanced-toggle-link {
@@ -265,7 +265,6 @@
       display: block;
       text-align: left;
       cursor: pointer;
-      color: rgba(0, 0, 0, .5);
       text-decoration: underline;
 
       span {
@@ -276,17 +275,17 @@
       }
 
       &:hover {
-        color: rgba(0, 0, 0, .7);
+        color: rgba(0, 0, 0, 0.7);
       }
     }
 
     textarea {
       height: 400px;
       width: 100%;
-      font-size: .9em;
-      padding: .5em;
+      font-size: 0.9em;
+      padding: 0.5em;
       font-family: monospace;
-      box-sizing: border-box
+      box-sizing: border-box;
     }
   }
 
@@ -304,16 +303,17 @@
     background: #565656;
     color: #fff;
     font-size: 1.1em;
-    padding: .6em 1em;
+    padding: 0.6em 1em;
     position: relative;
     border-bottom: #565656 3px solid;
     z-index: 3;
   }
 
+  legend,
   label {
     text-transform: uppercase;
     display: block;
-    font-size: .8em;
+    font-size: 0.8em;
     font-weight: 600;
     user-select: none;
 
@@ -322,7 +322,7 @@
     }
 
     span.edit-label {
-      margin-bottom: .3em;
+      margin-bottom: 0.3em;
       display: block;
     }
 
@@ -341,7 +341,33 @@
     }
   }
 
-  input[type="text"], input[role="combobox"], input[type="number"], textarea {
+  legend {
+    font-weight: normal;
+    margin-bottom: 0.3em;
+  }
+
+  legend + span {
+    float: left;
+  }
+
+  .radio-label {
+    font-weight: normal;
+  }
+
+  .accordion__panel fieldset:not(:first-child) {
+    margin-top: 1em;
+  }
+
+  .accordion__panel fieldset {
+    label:not(:first-child) {
+      margin-top: 0rem;
+    }
+  }
+
+  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
   }
@@ -350,7 +376,7 @@
     min-height: 140px;
   }
 
-  .header .color-palette li {
+  .header .color-palette button {
     width: 21px;
     height: 21px;
     border-radius: 40px;
@@ -361,11 +387,11 @@
     display: flex;
     max-width: 100%;
     padding: 0;
-    margin: .5em 0 0 0;
+    margin: 0.5em 0 0 0;
     list-style: none;
     flex-wrap: wrap;
 
-    li {
+    button {
       width: 45px;
       height: 23px;
       margin-right: 4px;
@@ -375,6 +401,7 @@
       overflow: hidden;
       cursor: pointer;
       position: relative;
+      padding: 0;
 
       .click-target {
         position: absolute;
@@ -385,17 +412,22 @@
       }
 
       &.selected {
-        border: rgba(0, 0, 0, .8) 2px solid;
+        border: rgba(0, 0, 0, 0.8) 2px solid;
       }
 
       span {
         width: 33.3%;
+        height: 100%;
       }
     }
   }
 
   fieldset {
     display: block;
+
+    .float-left {
+      float: left;
+    }
   }
 
   .primary-fieldset {
@@ -420,7 +452,8 @@
         width: 30%;
         display: inline-block;
 
-        input[type="text"], input[type="number"] {
+        input[type='text'],
+        input[type='number'] {
           width: 50px;
         }
       }
@@ -430,12 +463,12 @@
   .emove-column {
     float: right;
     text-transform: uppercase;
-    color: #C32B2B;
-    font-size: .7em;
+    color: #c32b2b;
+    font-size: 0.7em;
     line-height: 1.6em;
     border-radius: 5px;
     margin: 0 auto;
-    transition: .1s all;
+    transition: 0.1s all;
     border: 0;
     text-decoration: underline;
     outline: 0;
@@ -446,13 +479,14 @@
   .edit-block {
     padding-left: 1em;
     border-left: rgba(0, 0, 0, 0.2) 4px solid;
-    transition: .2s all;
+    transition: 0.2s all;
 
     &:not(:first-child) {
       margin-top: 2em;
     }
 
-    input[type="text"], input[type="number"] {
+    input[type='text'],
+    input[type='number'] {
       font-size: 1em;
     }
 
@@ -466,13 +500,13 @@
 
     &:hover {
       border-left: rgba(0, 0, 0, 0.7) 4px solid;
-      transition: .2s all;
+      transition: 0.2s all;
     }
   }
 
   span.subtext {
     display: block;
-    color: rgba(0, 0, 0, .5);
+    color: rgba(0, 0, 0, 0.5);
     text-transform: none;
     font-weight: normal;
   }
@@ -485,25 +519,25 @@
     list-style: none;
 
     > li {
-      margin-right: .3em;
-      margin-bottom: .3em;
+      margin-right: 0.3em;
+      margin-bottom: 0.3em;
     }
   }
 
   .sort-list li > div {
     display: block;
     box-sizing: border-box;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-bottom: .3em;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-bottom: 0.3em;
     cursor: move;
   }
 
   .info {
-    font-size: .8em;
+    font-size: 0.8em;
     line-height: 1.4em;
     font-style: italic;
     padding-top: 10px;
@@ -517,14 +551,14 @@
     position: relative;
 
     input.react-tags__search-input {
-      font-size: .8rem;
+      font-size: 0.8rem;
     }
 
     /* clicking anywhere will focus the input */
     cursor: text;
 
     span {
-      display: inline
+      display: inline;
     }
   }
 
@@ -539,24 +573,24 @@
   .react-tags__selected-tag {
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
-    background: #F1F1F1;
-    padding: .4em .6em;
-    font-size: .8em;
-    margin-right: .3em;
-    margin-bottom: .3em;
+    background: #f1f1f1;
+    padding: 0.4em 0.6em;
+    font-size: 0.8em;
+    margin-right: 0.3em;
+    margin-bottom: 0.3em;
   }
 
   .react-tags__selected-tag:after {
     content: '\2715';
-    color: #AAA;
+    color: #aaa;
     margin-left: 8px;
   }
 
   .react-tags__selected-tag:hover,
   .react-tags__selected-tag:focus {
-    border-color: #B1B1B1;
+    border-color: #b1b1b1;
   }
 
   .react-tags__search {
@@ -567,12 +601,10 @@
   }
 
   @media screen and (min-width: 30em) {
-
     .react-tags__search {
       /* this will become the offsetParent for suggestions */
       position: relative;
     }
-
   }
 
   .react-tags__search input {
@@ -582,7 +614,7 @@
     /* emove styles and layout from this element */
     margin: 0;
     outline: none;
-    padding: .5em .3em;
+    padding: 0.5em 0.3em;
 
     /* match the font styles */
     font-size: inherit;
@@ -611,7 +643,7 @@
     padding: 0;
     list-style: none;
     background: white;
-    border: 1px solid #D1D1D1;
+    border: 1px solid #d1d1d1;
     border-radius: 2px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   }
@@ -641,7 +673,7 @@
     cursor: auto;
   }
 
-  [type="radio"] {
+  input[type='radio'] {
     border: 1px solid #8c8f94;
     border-radius: 50%;
     margin-right: 5px;
@@ -649,27 +681,27 @@
 }
 
 .editor-toggle {
-  background: #F2F2F2;
+  background: #f2f2f2;
   border-radius: 60px;
   color: #000;
   font-size: 1em;
   border: 0;
   position: fixed;
   z-index: 100;
-  transition: .1s background;
+  transition: 0.1s background;
   cursor: pointer;
   width: 25px;
   height: 25px;
   left: 307px;
   top: 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 {
@@ -677,12 +709,12 @@
     margin-left: 0;
 
     &:before {
-      content: "\00bb";
+      content: '\00bb';
     }
   }
 
   &:hover {
-    background: rgba(255, 255, 255, 1)
+    background: rgba(255, 255, 255, 1);
   }
 }