ui: Fixup prettier for scss files and run (#10296)

* ui: Ensure prettier makes all our scss files pretty * Run prettier on all our scss files
4 years ago · ddee7afbb9
40 changed files with 79 additions and 95 deletions
--- a/ui/packages/consul-ui/app/components/app-view/index.scss
+++ b/ui/packages/consul-ui/app/components/app-view/index.scss
@ -61,4 +61,3 @@
    display: flex;
  }
 }
-
--- a/ui/packages/consul-ui/app/components/app/index.scss
+++ b/ui/packages/consul-ui/app/components/app/index.scss
@ -4,7 +4,7 @@
 [role='banner'] {
  @extend %main-header-horizontal;
 }
-[role="banner"] > label {
+[role='banner'] > label {
  @extend %main-nav-horizontal-toggle-button;
 }
 .app > input[id] {
@ -44,7 +44,6 @@ main {
  transition-property: margin-left;
 }

-
@media #{$--sidebar-open} {
  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
    left: 0;
@ -73,4 +72,3 @@ main {
    margin-left: 0;
  }
 }
-
--- a/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
+++ b/ui/packages/consul-ui/app/components/collapsible-notices/index.scss
@ -1,10 +1,10 @@
 .collapsible-notices {
  display: grid;
-  grid-template-columns: auto 168px;;
+  grid-template-columns: auto 168px;
  grid-template-rows: auto 55px;
  grid-template-areas:
-    "notices notices"
-    ". toggle-button";
+    'notices notices'
+    '. toggle-button';
  &.collapsed p {
    display: none;
  }
@ -28,4 +28,4 @@
  button.collapse::before {
    @extend %with-chevron-up-mask, %as-pseudo;
  }
-}
+}
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@ -84,4 +84,3 @@
    }
  }
 }
-
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
@ -95,7 +95,7 @@
 %route-card section header {
  display: block;
  width: 19px;
-  margin-right: 14px
+  margin-right: 14px;
 }
 /**/
 /* resolver */
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
@ -22,6 +22,6 @@
    float: right;
  }
 }
-.consul-intention-permission-modal [role="dialog"] {
+.consul-intention-permission-modal [role='dialog'] {
  width: 100%;
 }
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.scss
@ -1,6 +1,6 @@
 .consul-intention-action-warn-modal {
  .modal-dialog-window {
-      max-width: 450px;
+    max-width: 450px;
  }
  .modal-dialog-body p {
    font-size: $typo-size-600;
--- a/ui/packages/consul-ui/app/components/consul/intention/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/index.scss
@ -1,4 +1,3 @@
@import './components';
@import './skin';
@import './layout';
-
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
@ -1,8 +1,8 @@
 .consul-intention-permission-form {
  h2 {
    padding-top: 1.4em;
-    margin-top: .2em;
-    margin-bottom: .6em;
+    margin-top: 0.2em;
+    margin-bottom: 0.6em;
  }
  .consul-intention-permission-header-form {
    margin-top: 10px;
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
@ -14,4 +14,3 @@
    @extend %frame-blue-200;
  }
 }
-
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
@ -5,4 +5,3 @@
    @extend %list-row-200;
  }
 }
-
--- a/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
@ -4,4 +4,3 @@
    content: 'H';
  }
 }
-
--- a/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
@ -3,7 +3,7 @@
    @extend %h200;
    border-bottom: $decor-border-200;
    border-color: $gray-200;
-    padding-bottom: .2em;
-    margin-bottom: .5em;
+    padding-bottom: 0.2em;
+    margin-bottom: 0.5em;
  }
 }
--- a/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
@ -8,4 +8,3 @@
  margin-right: 0.3em;
  display: inline;
 }
-
--- a/ui/packages/consul-ui/app/components/filter-bar/layout.scss
+++ b/ui/packages/consul-ui/app/components/filter-bar/layout.scss
@ -16,7 +16,6 @@
  .popover-menu > [type='checkbox'] + label button {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
-
  }
  .popover-menu [role='menuitem'] {
    justify-content: normal !important;
@ -32,13 +31,14 @@
      position: relative;
      z-index: 4;
      width: 100%;
-      margin-bottom: .3rem;
+      margin-bottom: 0.3rem;
    }
  }
 }
@media #{$--lt-horizontal-selects} {
  .filter-bar {
-    .filters, .sort {
+    .filters,
+    .sort {
      display: none;
    }
  }
--- a/ui/packages/consul-ui/app/components/filter-bar/skin.scss
+++ b/ui/packages/consul-ui/app/components/filter-bar/skin.scss
@ -4,7 +4,8 @@
    border-bottom: $decor-border-100;
    border-color: $gray-200;
  }
-  .filters, .sort {
+  .filters,
+  .sort {
    .popover-menu > [type='checkbox']:checked + label button {
      color: $blue-500;
      background-color: $gray-100;
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@ -1,12 +1,12 @@
 .hashicorp-consul {
-  [role="banner"] nav .dcs {
+  [role='banner'] nav .dcs {
    @extend %main-nav-vertical-hoisted;
    left: 100px;
  }
-  [role="banner"] nav .dcs .popover-menu[aria-label]::before {
+  [role='banner'] nav .dcs .popover-menu[aria-label]::before {
    display: none;
  }
-  [role="banner"] a svg {
+  [role='banner'] a svg {
    fill: var(--brand-600);
  }
  .docs-link a::after {
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
@ -22,7 +22,7 @@
  @extend %main-nav-vertical-action;
 }
 %main-nav-vertical .popover-menu {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
 }
 %main-nav-vertical .popover-menu .menu-panel {
  top: 37px !important;
@ -50,4 +50,3 @@
 %main-nav-vertical label + div {
  @extend %main-nav-vertical-menu-panel;
 }
-
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
@ -20,20 +20,20 @@
 // items, left and right aligned. We should remove this and look to use
 // align-self for anything that needs right aligning instead.

-%main-nav-vertical [role="menuitem"] {
+%main-nav-vertical [role='menuitem'] {
  justify-content: flex-start !important;
 }
-%main-nav-vertical [role="menuitem"] span {
-  margin-left: .5rem;
+%main-nav-vertical [role='menuitem'] span {
+  margin-left: 0.5rem;
 }
 %main-nav-vertical-action,
-%main-nav-vertical li:not([role="separator"]) > span,
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical li:not([role='separator']) > span,
+%main-nav-vertical [role='separator'] {
  display: block;
  padding: 7px 25px;
 }
-%main-nav-vertical [role="separator"] {
-  margin-top: .7rem;
+%main-nav-vertical [role='separator'] {
+  margin-top: 0.7rem;
  padding-bottom: 0;
 }

--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@ -8,7 +8,7 @@
  color: inherit;
  font-size: inherit;
 }
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical [role='separator'] {
  @extend %p3;
  text-transform: uppercase;
  font-weight: $typo-weight-medium;
@ -23,10 +23,10 @@
  background-color: var(--gray-050);
  color: var(--gray-700);
 }
-%main-nav-vertical li:not([role="separator"]) > span {
+%main-nav-vertical li:not([role='separator']) > span {
  color: var(--gray-300);
 }
-%main-nav-vertical [role="separator"] {
+%main-nav-vertical [role='separator'] {
  color: var(--gray-600);
 }
 %main-nav-vertical-action {
@ -43,8 +43,8 @@
 %main-nav-vertical .popover-menu[aria-label]::before {
  content: attr(aria-label);
  display: block;
-  margin-top: -.5rem;
-  margin-bottom: .5rem;
+  margin-top: -0.5rem;
+  margin-bottom: 0.5rem;
 }
 %main-nav-vertical .is-local span:last-of-type {
  @extend %pill-200;
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@ -46,4 +46,3 @@
 %menu-panel-separator:not(:first-child) {
  border-color: var(--gray-300);
 }
-
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
@ -6,6 +6,6 @@
 .modal-dialog {
  @extend %modal-dialog;
 }
-%modal-dialog [role="document"] {
+%modal-dialog [role='document'] {
  @extend %modal-window;
 }
--- a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
@ -11,7 +11,7 @@
 %modal-dialog table {
  min-height: 149px;
 }
-%modal-dialog > div:first-child  {
+%modal-dialog > div:first-child {
  @extend %modal-dialog-overlay;
 }
 %modal-dialog,
--- a/ui/packages/consul-ui/app/components/notice/index.scss
+++ b/ui/packages/consul-ui/app/components/notice/index.scss
@ -29,4 +29,3 @@
  background-color: transparent;
  @extend %with-logo-kubernetes-color-icon;
 }
-
--- a/ui/packages/consul-ui/app/components/overlay/none.scss
+++ b/ui/packages/consul-ui/app/components/overlay/none.scss
@ -13,17 +13,17 @@
    outline: 0;
    transition-property: transform, visibility, opacity;
  }
-  &[data-animation=fade][data-state=hidden] {
+  &[data-animation='fade'][data-state='hidden'] {
    opacity: 0;
  }
-  &[data-inertia][data-state=visible] {
-    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  }
-  &[data-animation=fade][data-state=hidden] {
+  &[data-animation='fade'][data-state='hidden'] {
    opacity: 0;
  }
-  &[data-inertia][data-state=visible] {
-    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  }
  & {
    background-color: $white;
@ -33,23 +33,23 @@
  .tippy-arrow {
    @extend %overlay-tail;
  }
-  &[data-placement^=bottom] > .tippy-arrow {
+  &[data-placement^='bottom'] > .tippy-arrow {
    @extend %overlay-tail-bottom;
  }
-  &[data-placement^=top] > .tippy-arrow {
+  &[data-placement^='top'] > .tippy-arrow {
    @extend %overlay-tail-top;
  }
-  &[data-placement^=left] > .tippy-arrow {
+  &[data-placement^='left'] > .tippy-arrow {
    @extend %overlay-tail-left;
  }
-  &[data-placement^=right] > .tippy-arrow {
+  &[data-placement^='right'] > .tippy-arrow {
    @extend %overlay-tail-right;
  }
 }
 %overlay-tail {
  --size: 5px;
  &::before {
-    content: "";
+    content: '';
    position: absolute;
  }
 }
@ -65,7 +65,7 @@
 }
 %overlay-tail-bottom {
  & {
-    top: 0
+    top: 0;
  }
  &::before {
    left: 0;
@ -84,11 +84,10 @@
 }
 %overlay-tail-right {
  & {
-    left: 0
+    left: 0;
  }
  &::before {
    left: calc(0px - var(--size));
    transform-origin: center right;
  }
 }
-
--- a/ui/packages/consul-ui/app/components/overlay/square-tail.scss
+++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
@ -1,4 +1,4 @@
-[data-theme~="square-tail"] {
+[data-theme~='square-tail'] {
  .tippy-arrow {
    --size: 18px;
    left: calc(0px - (var(--size) / 2)) !important;
@ -15,7 +15,7 @@
    position: absolute;
    left: 1px;
  }
-  &[data-placement^=top] {
+  &[data-placement^='top'] {
    & {
      bottom: -10px;
    }
@ -31,7 +31,7 @@
      bottom: calc(0px - var(--size));
    }
  }
-  &[data-placement^=bottom] {
+  &[data-placement^='bottom'] {
    & {
      top: -10px;
    }
@ -48,4 +48,3 @@
    }
  }
 }
-
--- a/ui/packages/consul-ui/app/components/search-bar/index.scss
+++ b/ui/packages/consul-ui/app/components/search-bar/index.scss
@ -25,8 +25,8 @@
      }
    }
    & {
-      padding: .5rem 0;
-      padding-left: .5rem;
+      padding: 0.5rem 0;
+      padding-left: 0.5rem;
    }
    dt::after {
      content: ':';
--- a/ui/packages/consul-ui/app/components/skip-links/index.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/index.scss
@ -1,3 +1,2 @@
@import './skin';
@import './layout';
-
--- a/ui/packages/consul-ui/app/components/skip-links/layout.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/layout.scss
@ -19,4 +19,3 @@
 %skip-links:focus-within {
  top: 0px;
 }
-
--- a/ui/packages/consul-ui/app/components/skip-links/skin.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/skin.scss
@ -7,4 +7,3 @@
 %skip-links a {
  color: inherit;
 }
-
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@ -1,4 +1,4 @@
-.tippy-box[data-theme~=tooltip] {
+.tippy-box[data-theme~='tooltip'] {
  & {
    @extend %tooltip-bubble;
  }
@ -8,16 +8,16 @@
  .tippy-arrow {
    @extend %tooltip-tail;
  }
-  &[data-placement^=bottom] > .tippy-arrow {
+  &[data-placement^='bottom'] > .tippy-arrow {
    @extend %tooltip-tail-bottom;
  }
-  &[data-placement^=top] > .tippy-arrow {
+  &[data-placement^='top'] > .tippy-arrow {
    @extend %tooltip-tail-top;
  }
-  &[data-placement^=left] > .tippy-arrow {
+  &[data-placement^='left'] > .tippy-arrow {
    @extend %tooltip-tail-left;
  }
-  &[data-placement^=right] > .tippy-arrow {
+  &[data-placement^='right'] > .tippy-arrow {
    @extend %tooltip-tail-right;
  }
 }
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@ -78,4 +78,4 @@
  div.stats {
    border-top: 1px solid $gray-200;
  }
-}
+}
--- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
@ -5,9 +5,9 @@
  grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
-    "down-cards down-lines . up-lines up-cards"
-    "down-cards down-lines metrics up-lines up-cards"
-    "down-cards down-lines . up-lines up-cards";
+    'down-cards down-lines . up-lines up-cards'
+    'down-cards down-lines metrics up-lines up-cards'
+    'down-cards down-lines . up-lines up-cards';
 }

 // Grid Layout
@ -67,4 +67,3 @@
    }
  }
 }
-
--- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@ -1,13 +1,14 @@
 .topology-metrics-popover {
  > button {
    position: absolute;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
    background-color: $white;
    padding: 1px 1px;
    &:hover {
      cursor: pointer;
    }
-    &:active, &:focus {
+    &:active,
+    &:focus {
      outline: none;
    }
    &:disabled {
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
@ -63,4 +63,4 @@
 }
 #metrics-container:hover .sparkline-key-link {
  visibility: visible;
-}
+}
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
@ -50,9 +50,9 @@
    }
  }

-  div.tooltip:before{
-    content:'';
-    display:block;
+  div.tooltip:before {
+    content: '';
+    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
@ -69,9 +69,9 @@
 // Key modal
 .sparkline-key {
  h3::before {
-      @extend %with-info-circle-fill-mask, %as-pseudo;
-      margin: 2px 3px 0 0;
-      font-size: 14px;
+    @extend %with-info-circle-fill-mask, %as-pseudo;
+    margin: 2px 3px 0 0;
+    font-size: 14px;
  }

  h3 {
@ -99,4 +99,4 @@
  @extend %with-info-circle-fill-mask, %as-pseudo;
  margin: 1px 3px 0 0;
  font-size: 12px;
-}
+}
--- a/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
@ -1,4 +1,4 @@
 .topology-metrics-source-type {
  margin: 6px 0 6px 12px;
  display: table;
-}
+}
--- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
@ -6,7 +6,7 @@
  align-items: stretch;
  width: 100%;
  dl {
-    display:flex;
+    display: flex;
    padding-bottom: 12px;
  }
  dt {
@ -19,4 +19,4 @@
  span {
    padding-bottom: 12px;
  }
-}
+}
--- a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@ -15,4 +15,4 @@

 span.topology-metrics-loader::after {
  @extend %with-loading-icon, %as-pseudo;
-}
+}
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@ -19,7 +19,7 @@
    "_lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests",
    "format": "npm-run-all format:*",
    "format:js": "prettier --write \"{app,config,lib,server,vendor,tests}/**/*.js\" ./*.js ./.*.js",
-    "format:sass": "prettier --write \"app/styles/**/*.*.scss\"",
+    "format:sass": "prettier --write \"app/**/*.scss\"",
    "start": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
    "start:staging": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020} --environment staging",
    "start:consul": "ember serve --proxy=${CONSUL_HTTP_ADDR:-http://localhost:8500} --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
@ -49,7 +49,7 @@
    "{app,config,lib,server,vendor,tests}/**/*.js": [
      "prettier --write"
    ],
-    "app/styles/**/*.*": [
+    "app/**/*.scss": [
      "prettier --write"
    ]
  },