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
GitHub
parent
da73899a10
commit
f461906883
|
|
@ -61,4 +61,3 @@
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,4 +84,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
%route-card section header {
|
||||
display: block;
|
||||
width: 19px;
|
||||
margin-right: 14px
|
||||
margin-right: 14px;
|
||||
}
|
||||
/**/
|
||||
/* resolver */
|
||||
|
|
|
|||
|
|
@ -22,6 +22,6 @@
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
.consul-intention-permission-modal [role="dialog"] {
|
||||
.consul-intention-permission-modal [role='dialog'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@import './components';
|
||||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -14,4 +14,3 @@
|
|||
@extend %frame-blue-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,4 +5,3 @@
|
|||
@extend %list-row-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,3 @@
|
|||
content: 'H';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,3 @@
|
|||
margin-right: 0.3em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -46,4 +46,3 @@
|
|||
%menu-panel-separator:not(:first-child) {
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
.modal-dialog {
|
||||
@extend %modal-dialog;
|
||||
}
|
||||
%modal-dialog [role="document"] {
|
||||
%modal-dialog [role='document'] {
|
||||
@extend %modal-window;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -29,4 +29,3 @@
|
|||
background-color: transparent;
|
||||
@extend %with-logo-kubernetes-color-icon;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
}
|
||||
}
|
||||
& {
|
||||
padding: .5rem 0;
|
||||
padding-left: .5rem;
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
dt::after {
|
||||
content: ':';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
||||
|
|
|
|||
|
|
@ -19,4 +19,3 @@
|
|||
%skip-links:focus-within {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,4 +7,3 @@
|
|||
%skip-links a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,4 +78,4 @@
|
|||
div.stats {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -63,4 +63,4 @@
|
|||
}
|
||||
#metrics-container:hover .sparkline-key-link {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.topology-metrics-source-type {
|
||||
margin: 6px 0 6px 12px;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,4 @@
|
|||
|
||||
span.topology-metrics-loader::after {
|
||||
@extend %with-loading-icon, %as-pseudo;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue