luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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
This commit is contained in:
John Cowen 2021-05-27 13:23:54 +01:00 committed by GitHub
parent da73899a10
commit f461906883
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 79 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/packages/consul-ui/app/components/app-view/index.scss
View File

@ -61,4 +61,3 @@
display: flex; display: flex;
} }
} }

4
ui/packages/consul-ui/app/components/app/index.scss
View File

@ -4,7 +4,7 @@
[role='banner'] { [role='banner'] {
@extend %main-header-horizontal; @extend %main-header-horizontal;
} }
[role="banner"] > label { [role='banner'] > label {
@extend %main-nav-horizontal-toggle-button; @extend %main-nav-horizontal-toggle-button;
} }
.app > input[id] { .app > input[id] {
@ -44,7 +44,6 @@ main {
transition-property: margin-left; transition-property: margin-left;
} }
@media #{$--sidebar-open} { @media #{$--sidebar-open} {
%main-nav-horizontal-toggle + header > div > nav:first-of-type { %main-nav-horizontal-toggle + header > div > nav:first-of-type {
left: 0; left: 0;
@ -73,4 +72,3 @@ main {
margin-left: 0; margin-left: 0;
} }
} }

8
ui/packages/consul-ui/app/components/collapsible-notices/index.scss
View File

@ -1,10 +1,10 @@
.collapsible-notices { .collapsible-notices {
display: grid; display: grid;
grid-template-columns: auto 168px;; grid-template-columns: auto 168px;
grid-template-rows: auto 55px; grid-template-rows: auto 55px;
grid-template-areas: grid-template-areas:
"notices notices" 'notices notices'
". toggle-button"; '. toggle-button';
&.collapsed p { &.collapsed p {
display: none; display: none;
} }
@ -28,4 +28,4 @@
button.collapse::before { button.collapse::before {
@extend %with-chevron-up-mask, %as-pseudo; @extend %with-chevron-up-mask, %as-pseudo;
} }
} }

1
ui/packages/consul-ui/app/components/consul/auth-method/index.scss
View File

@ -84,4 +84,3 @@
} }
} }
} }

2
ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss
View File

@ -95,7 +95,7 @@
%route-card section header { %route-card section header {
display: block; display: block;
width: 19px; width: 19px;
margin-right: 14px margin-right: 14px;
} }
/**/ /**/
/* resolver */ /* resolver */

2
ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
View File

@ -22,6 +22,6 @@
float: right; float: right;
} }
} }
.consul-intention-permission-modal [role="dialog"] { .consul-intention-permission-modal [role='dialog'] {
width: 100%; width: 100%;
} }

2
ui/packages/consul-ui/app/components/consul/intention/form/index.scss
View File

@ -1,6 +1,6 @@
.consul-intention-action-warn-modal { .consul-intention-action-warn-modal {
.modal-dialog-window { .modal-dialog-window {
max-width: 450px; max-width: 450px;
} }
.modal-dialog-body p { .modal-dialog-body p {
font-size: $typo-size-600; font-size: $typo-size-600;

1
ui/packages/consul-ui/app/components/consul/intention/list/index.scss
View File

@ -1,4 +1,3 @@
@import './components'; @import './components';
@import './skin'; @import './skin';
@import './layout'; @import './layout';

4
ui/packages/consul-ui/app/components/consul/intention/permission/form/layout.scss
View File

@ -1,8 +1,8 @@
.consul-intention-permission-form { .consul-intention-permission-form {
h2 { h2 {
padding-top: 1.4em; padding-top: 1.4em;
margin-top: .2em; margin-top: 0.2em;
margin-bottom: .6em; margin-bottom: 0.6em;
} }
.consul-intention-permission-header-form { .consul-intention-permission-header-form {
margin-top: 10px; margin-top: 10px;

1
ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
View File

@ -14,4 +14,3 @@
@extend %frame-blue-200; @extend %frame-blue-200;
} }
} }

1
ui/packages/consul-ui/app/components/consul/intention/permission/header/list/index.scss
View File

@ -5,4 +5,3 @@
@extend %list-row-200; @extend %list-row-200;
} }
} }

1
ui/packages/consul-ui/app/components/consul/intention/permission/header/list/skin.scss
View File

@ -4,4 +4,3 @@
content: 'H'; content: 'H';
} }
} }

4
ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
View File

@ -3,7 +3,7 @@
@extend %h200; @extend %h200;
border-bottom: $decor-border-200; border-bottom: $decor-border-200;
border-color: $gray-200; border-color: $gray-200;
padding-bottom: .2em; padding-bottom: 0.2em;
margin-bottom: .5em; margin-bottom: 0.5em;
} }
} }

1
ui/packages/consul-ui/app/components/consul/lock-session/list/index.scss
View File

@ -8,4 +8,3 @@
margin-right: 0.3em; margin-right: 0.3em;
display: inline; display: inline;
} }

6
ui/packages/consul-ui/app/components/filter-bar/layout.scss
View File

@ -16,7 +16,6 @@
.popover-menu > [type='checkbox'] + label button { .popover-menu > [type='checkbox'] + label button {
padding-left: 1.5rem !important; padding-left: 1.5rem !important;
padding-right: 1.5rem !important; padding-right: 1.5rem !important;
} }
.popover-menu [role='menuitem'] { .popover-menu [role='menuitem'] {
justify-content: normal !important; justify-content: normal !important;
@ -32,13 +31,14 @@
position: relative; position: relative;
z-index: 4; z-index: 4;
width: 100%; width: 100%;
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
} }
} }
@media #{$--lt-horizontal-selects} { @media #{$--lt-horizontal-selects} {
.filter-bar { .filter-bar {
.filters, .sort { .filters,
.sort {
display: none; display: none;
} }
} }

3
ui/packages/consul-ui/app/components/filter-bar/skin.scss
View File

@ -4,7 +4,8 @@
border-bottom: $decor-border-100; border-bottom: $decor-border-100;
border-color: $gray-200; border-color: $gray-200;
} }
.filters, .sort { .filters,
.sort {
.popover-menu > [type='checkbox']:checked + label button { .popover-menu > [type='checkbox']:checked + label button {
color: $blue-500; color: $blue-500;
background-color: $gray-100; background-color: $gray-100;

6
ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
View File

@ -1,12 +1,12 @@
.hashicorp-consul { .hashicorp-consul {
[role="banner"] nav .dcs { [role='banner'] nav .dcs {
@extend %main-nav-vertical-hoisted; @extend %main-nav-vertical-hoisted;
left: 100px; left: 100px;
} }
[role="banner"] nav .dcs .popover-menu[aria-label]::before { [role='banner'] nav .dcs .popover-menu[aria-label]::before {
display: none; display: none;
} }
[role="banner"] a svg { [role='banner'] a svg {
fill: var(--brand-600); fill: var(--brand-600);
} }
.docs-link a::after { .docs-link a::after {

3
ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
View File

@ -22,7 +22,7 @@
@extend %main-nav-vertical-action; @extend %main-nav-vertical-action;
} }
%main-nav-vertical .popover-menu { %main-nav-vertical .popover-menu {
margin-top: .5rem; margin-top: 0.5rem;
} }
%main-nav-vertical .popover-menu .menu-panel { %main-nav-vertical .popover-menu .menu-panel {
top: 37px !important; top: 37px !important;
@ -50,4 +50,3 @@
%main-nav-vertical label + div { %main-nav-vertical label + div {
@extend %main-nav-vertical-menu-panel; @extend %main-nav-vertical-menu-panel;
} }

14
ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
View File

@ -20,20 +20,20 @@
// items, left and right aligned. We should remove this and look to use // items, left and right aligned. We should remove this and look to use
// align-self for anything that needs right aligning instead. // align-self for anything that needs right aligning instead.
%main-nav-vertical [role="menuitem"] { %main-nav-vertical [role='menuitem'] {
justify-content: flex-start !important; justify-content: flex-start !important;
} }
%main-nav-vertical [role="menuitem"] span { %main-nav-vertical [role='menuitem'] span {
margin-left: .5rem; margin-left: 0.5rem;
} }
%main-nav-vertical-action, %main-nav-vertical-action,
%main-nav-vertical li:not([role="separator"]) > span, %main-nav-vertical li:not([role='separator']) > span,
%main-nav-vertical [role="separator"] { %main-nav-vertical [role='separator'] {
display: block; display: block;
padding: 7px 25px; padding: 7px 25px;
} }
%main-nav-vertical [role="separator"] { %main-nav-vertical [role='separator'] {
margin-top: .7rem; margin-top: 0.7rem;
padding-bottom: 0; padding-bottom: 0;
} }

10
ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
View File

@ -8,7 +8,7 @@
color: inherit; color: inherit;
font-size: inherit; font-size: inherit;
} }
%main-nav-vertical [role="separator"] { %main-nav-vertical [role='separator'] {
@extend %p3; @extend %p3;
text-transform: uppercase; text-transform: uppercase;
font-weight: $typo-weight-medium; font-weight: $typo-weight-medium;
@ -23,10 +23,10 @@
background-color: var(--gray-050); background-color: var(--gray-050);
color: var(--gray-700); color: var(--gray-700);
} }
%main-nav-vertical li:not([role="separator"]) > span { %main-nav-vertical li:not([role='separator']) > span {
color: var(--gray-300); color: var(--gray-300);
} }
%main-nav-vertical [role="separator"] { %main-nav-vertical [role='separator'] {
color: var(--gray-600); color: var(--gray-600);
} }
%main-nav-vertical-action { %main-nav-vertical-action {
@ -43,8 +43,8 @@
%main-nav-vertical .popover-menu[aria-label]::before { %main-nav-vertical .popover-menu[aria-label]::before {
content: attr(aria-label); content: attr(aria-label);
display: block; display: block;
margin-top: -.5rem; margin-top: -0.5rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
%main-nav-vertical .is-local span:last-of-type { %main-nav-vertical .is-local span:last-of-type {
@extend %pill-200; @extend %pill-200;

1
ui/packages/consul-ui/app/components/menu-panel/skin.scss
View File

@ -46,4 +46,3 @@
%menu-panel-separator:not(:first-child) { %menu-panel-separator:not(:first-child) {
border-color: var(--gray-300); border-color: var(--gray-300);
} }

2
ui/packages/consul-ui/app/components/modal-dialog/index.scss
View File

@ -6,6 +6,6 @@
.modal-dialog { .modal-dialog {
@extend %modal-dialog; @extend %modal-dialog;
} }
%modal-dialog [role="document"] { %modal-dialog [role='document'] {
@extend %modal-window; @extend %modal-window;
} }

2
ui/packages/consul-ui/app/components/modal-dialog/layout.scss
View File

@ -11,7 +11,7 @@
%modal-dialog table { %modal-dialog table {
min-height: 149px; min-height: 149px;
} }
%modal-dialog > div:first-child { %modal-dialog > div:first-child {
@extend %modal-dialog-overlay; @extend %modal-dialog-overlay;
} }
%modal-dialog, %modal-dialog,

1
ui/packages/consul-ui/app/components/notice/index.scss
View File

@ -29,4 +29,3 @@
background-color: transparent; background-color: transparent;
@extend %with-logo-kubernetes-color-icon; @extend %with-logo-kubernetes-color-icon;
} }

27
ui/packages/consul-ui/app/components/overlay/none.scss
View File

@ -13,17 +13,17 @@
outline: 0; outline: 0;
transition-property: transform, visibility, opacity; transition-property: transform, visibility, opacity;
} }
&[data-animation=fade][data-state=hidden] { &[data-animation='fade'][data-state='hidden'] {
opacity: 0; opacity: 0;
} }
&[data-inertia][data-state=visible] { &[data-inertia][data-state='visible'] {
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11); 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; opacity: 0;
} }
&[data-inertia][data-state=visible] { &[data-inertia][data-state='visible'] {
transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11); transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
} }
& { & {
background-color: $white; background-color: $white;
@ -33,23 +33,23 @@
.tippy-arrow { .tippy-arrow {
@extend %overlay-tail; @extend %overlay-tail;
} }
&[data-placement^=bottom] > .tippy-arrow { &[data-placement^='bottom'] > .tippy-arrow {
@extend %overlay-tail-bottom; @extend %overlay-tail-bottom;
} }
&[data-placement^=top] > .tippy-arrow { &[data-placement^='top'] > .tippy-arrow {
@extend %overlay-tail-top; @extend %overlay-tail-top;
} }
&[data-placement^=left] > .tippy-arrow { &[data-placement^='left'] > .tippy-arrow {
@extend %overlay-tail-left; @extend %overlay-tail-left;
} }
&[data-placement^=right] > .tippy-arrow { &[data-placement^='right'] > .tippy-arrow {
@extend %overlay-tail-right; @extend %overlay-tail-right;
} }
} }
%overlay-tail { %overlay-tail {
--size: 5px; --size: 5px;
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
} }
} }
@ -65,7 +65,7 @@
} }
%overlay-tail-bottom { %overlay-tail-bottom {
& { & {
top: 0 top: 0;
} }
&::before { &::before {
left: 0; left: 0;
@ -84,11 +84,10 @@
} }
%overlay-tail-right { %overlay-tail-right {
& { & {
left: 0 left: 0;
} }
&::before { &::before {
left: calc(0px - var(--size)); left: calc(0px - var(--size));
transform-origin: center right; transform-origin: center right;
} }
} }

7
ui/packages/consul-ui/app/components/overlay/square-tail.scss
View File

@ -1,4 +1,4 @@
[data-theme~="square-tail"] { [data-theme~='square-tail'] {
.tippy-arrow { .tippy-arrow {
--size: 18px; --size: 18px;
left: calc(0px - (var(--size) / 2)) !important; left: calc(0px - (var(--size) / 2)) !important;
@ -15,7 +15,7 @@
position: absolute; position: absolute;
left: 1px; left: 1px;
} }
&[data-placement^=top] { &[data-placement^='top'] {
& { & {
bottom: -10px; bottom: -10px;
} }
@ -31,7 +31,7 @@
bottom: calc(0px - var(--size)); bottom: calc(0px - var(--size));
} }
} }
&[data-placement^=bottom] { &[data-placement^='bottom'] {
& { & {
top: -10px; top: -10px;
} }
@ -48,4 +48,3 @@
} }
} }
} }

4
ui/packages/consul-ui/app/components/search-bar/index.scss
View File

@ -25,8 +25,8 @@
} }
} }
& { & {
padding: .5rem 0; padding: 0.5rem 0;
padding-left: .5rem; padding-left: 0.5rem;
} }
dt::after { dt::after {
content: ':'; content: ':';

1
ui/packages/consul-ui/app/components/skip-links/index.scss
View File

@ -1,3 +1,2 @@
@import './skin'; @import './skin';
@import './layout'; @import './layout';

1
ui/packages/consul-ui/app/components/skip-links/layout.scss
View File

@ -19,4 +19,3 @@
%skip-links:focus-within { %skip-links:focus-within {
top: 0px; top: 0px;
} }

1
ui/packages/consul-ui/app/components/skip-links/skin.scss
View File

@ -7,4 +7,3 @@
%skip-links a { %skip-links a {
color: inherit; color: inherit;
} }

10
ui/packages/consul-ui/app/components/tooltip/index.scss
View File

@ -1,4 +1,4 @@
.tippy-box[data-theme~=tooltip] { .tippy-box[data-theme~='tooltip'] {
& { & {
@extend %tooltip-bubble; @extend %tooltip-bubble;
} }
@ -8,16 +8,16 @@
.tippy-arrow { .tippy-arrow {
@extend %tooltip-tail; @extend %tooltip-tail;
} }
&[data-placement^=bottom] > .tippy-arrow { &[data-placement^='bottom'] > .tippy-arrow {
@extend %tooltip-tail-bottom; @extend %tooltip-tail-bottom;
} }
&[data-placement^=top] > .tippy-arrow { &[data-placement^='top'] > .tippy-arrow {
@extend %tooltip-tail-top; @extend %tooltip-tail-top;
} }
&[data-placement^=left] > .tippy-arrow { &[data-placement^='left'] > .tippy-arrow {
@extend %tooltip-tail-left; @extend %tooltip-tail-left;
} }
&[data-placement^=right] > .tippy-arrow { &[data-placement^='right'] > .tippy-arrow {
@extend %tooltip-tail-right; @extend %tooltip-tail-right;
} }
} }

2
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -78,4 +78,4 @@
div.stats { div.stats {
border-top: 1px solid $gray-200; border-top: 1px solid $gray-200;
} }
} }

7
ui/packages/consul-ui/app/components/topology-metrics/layout.scss
View File

@ -5,9 +5,9 @@
grid-template-columns: 2fr 1fr 2fr 1fr 2fr; grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
grid-template-rows: 50px 1fr 50px; grid-template-rows: 50px 1fr 50px;
grid-template-areas: grid-template-areas:
"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 metrics up-lines up-cards'
"down-cards down-lines . up-lines up-cards"; 'down-cards down-lines . up-lines up-cards';
} }
// Grid Layout // Grid Layout
@ -67,4 +67,3 @@
} }
} }
} }

5
ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
View File

@ -1,13 +1,14 @@
.topology-metrics-popover { .topology-metrics-popover {
> button { > button {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
background-color: $white; background-color: $white;
padding: 1px 1px; padding: 1px 1px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
&:active, &:focus { &:active,
&:focus {
outline: none; outline: none;
} }
&:disabled { &:disabled {

2
ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
View File

@ -63,4 +63,4 @@
} }
#metrics-container:hover .sparkline-key-link { #metrics-container:hover .sparkline-key-link {
visibility: visible; visibility: visible;
} }

14
ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
View File

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

2
ui/packages/consul-ui/app/components/topology-metrics/source-type/index.scss
View File

@ -1,4 +1,4 @@
.topology-metrics-source-type { .topology-metrics-source-type {
margin: 6px 0 6px 12px; margin: 6px 0 6px 12px;
display: table; display: table;
} }

4
ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
View File

@ -6,7 +6,7 @@
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
dl { dl {
display:flex; display: flex;
padding-bottom: 12px; padding-bottom: 12px;
} }
dt { dt {
@ -19,4 +19,4 @@
span { span {
padding-bottom: 12px; padding-bottom: 12px;
} }
} }

2
ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
View File

@ -15,4 +15,4 @@
span.topology-metrics-loader::after { span.topology-metrics-loader::after {
@extend %with-loading-icon, %as-pseudo; @extend %with-loading-icon, %as-pseudo;
} }

4
ui/packages/consul-ui/package.json
View File

@ -19,7 +19,7 @@
"_lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests", "_lint:dev:js": "eslint -c .dev.eslintrc.js --fix ./*.js ./.*.js app config lib server tests",
"format": "npm-run-all format:*", "format": "npm-run-all format:*",
"format:js": "prettier --write \"{app,config,lib,server,vendor,tests}/**/*.js\" ./*.js ./.*.js", "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": "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: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}", "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": [ "{app,config,lib,server,vendor,tests}/**/*.js": [
"prettier --write" "prettier --write"
], ],
"app/styles/**/*.*": [ "app/**/*.scss": [
"prettier --write" "prettier --write"
] ]
}, },