Peter Makowski has proposed merging
~petermakowski/maas-site-manager:enable-stylelint into maas-site-manager:main.
Commit message:
enable stylelint
- fix existing stylelint errors
Requested reviews:
MAAS Committers (maas-committers)
For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/442220
--
Your team MAAS Committers is requested to review the proposed merge of
~petermakowski/maas-site-manager:enable-stylelint into maas-site-manager:main.
diff --git a/frontend/package.json b/frontend/package.json
index 1acaffe..a834207 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,8 @@
"preview": "vite preview",
"playwright-test": "playwright test",
"playwright-ui": "playwright test --ui",
- "lint": "npmPkgJsonLint . && tsc && eslint . --ext .ts,.tsx",
- "lint-fix": "eslint . --ext .ts,.tsx --fix",
+ "lint": "npmPkgJsonLint . && tsc && eslint . --ext .ts,.tsx && stylelint src/**/*.scss",
+ "lint-fix": "eslint . --ext .ts,.tsx --fix && stylelint src/**/*.scss --fix",
"upgrade-all": "yarn-upgrade-all -E"
},
"dependencies": {
diff --git a/frontend/src/_patterns_icons.scss b/frontend/src/_patterns_icons.scss
index 41dedd6..249ea08 100644
--- a/frontend/src/_patterns_icons.scss
+++ b/frontend/src/_patterns_icons.scss
@@ -8,22 +8,25 @@
.p-icon--sidebar-toggle {
@extend %icon;
- @include maas-icon-sidebar-collapse();
+ @include maas-icon-sidebar-collapse;
}
.p-icon--maas {
@extend %icon;
- @include maas-icon-maas-logo();
+ @include maas-icon-maas-logo;
}
.p-icon--status-ready {
@extend %icon;
+
background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4a4 4 0 110 8 4 4 0 010-8z' fill='#{vf-url-friendly-color(#D3E4ED)}' fill-rule='nonzero'/%3E%3C/svg%3E");
}
+
.p-icon--status-deployed {
@extend %icon;
@include vf-icon-status-small($color-x-dark);
}
+
.p-icon--status-allocated {
@extend %icon;
@include vf-icon-status-small($color-information);
diff --git a/frontend/src/_patterns_typography.scss b/frontend/src/_patterns_typography.scss
index a629d0f..516faa3 100644
--- a/frontend/src/_patterns_typography.scss
+++ b/frontend/src/_patterns_typography.scss
@@ -1,9 +1,11 @@
.p-heading--small {
@extend %table-header-label;
+
color: $color-dark;
margin-bottom: $sp-unit * 0.25;
text-transform: uppercase;
}
+
.is-dark {
.p-heading--small {
color: $color-light;
diff --git a/frontend/src/_settings.scss b/frontend/src/_settings.scss
index 0588138..bdcb88c 100644
--- a/frontend/src/_settings.scss
+++ b/frontend/src/_settings.scss
@@ -2,11 +2,9 @@
// Vanilla settings:
$grid-max-width: math.div(1920, 16) * 1rem;
-
$breakpoint-xx-large: 1920px;
$side-navigation-z-index: 103;
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
$application-layout--breakpoint-side-nav-expanded: $breakpoint-xx-large;
-
$increase-font-size-on-larger-screens: false;
-
$assets-path: "/assets/fonts/";
diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
index 972f9d4..f34cdf0 100644
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -1,52 +1,67 @@
.u-flex {
display: flex !important;
}
+
.u-flex--large {
@media (min-width: $breakpoint-large) {
display: flex !important;
}
}
+
.u-flex--align-end {
align-items: flex-end !important;
}
+
.u-flex--justify-end {
justify-content: flex-end !important;
}
+
.u-flex--justify-between {
justify-content: space-between !important;
}
+
.u-flex--column {
flex-direction: column !important;
}
+
.u-flex--column-x-small {
@media (max-width: $breakpoint-x-small) {
flex-direction: column !important;
}
}
+
.u-flex--grow {
flex-grow: 1 !important;
}
+
.u-flex--wrap {
flex-wrap: wrap !important;
}
+
.u-capitalize {
text-transform: capitalize !important;
}
+
.u-no-wrap {
white-space: nowrap !important;
}
+
.u-no-border {
border: 0 !important;
}
+
.u-padding-top--medium {
padding-top: $spv--medium !important;
}
+
.u-width--100 {
width: 100% !important;
}
+
.u-no-padding {
padding: 0 !important;
}
+
// hide elements visually, but keep them accessible to screen readers
.u-visually-hidden {
position: absolute !important;
diff --git a/frontend/src/components/MainLayout/_MainLayout.scss b/frontend/src/components/MainLayout/_MainLayout.scss
index a9e170b..ae08fec 100644
--- a/frontend/src/components/MainLayout/_MainLayout.scss
+++ b/frontend/src/components/MainLayout/_MainLayout.scss
@@ -2,9 +2,11 @@
display: flex;
flex-direction: column;
overflow: hidden;
+
@media (min-width: $breakpoint-small) {
flex-direction: row;
}
+
.l-main__nav {
flex-shrink: 0;
@@ -12,11 +14,13 @@
height: 100vh;
}
}
+
.l-main__content {
width: 100%;
overflow-y: auto;
}
}
+
.l-aside.is-maas-site-manager {
background: $color-x-light;
}
diff --git a/frontend/src/components/Meter/_Meter.scss b/frontend/src/components/Meter/_Meter.scss
index 2593c24..b1a4280 100644
--- a/frontend/src/components/Meter/_Meter.scss
+++ b/frontend/src/components/Meter/_Meter.scss
@@ -1,5 +1,5 @@
$meter-height: $sp-unit * 1.75;
-$meter-height--small: $sp-unit * 1.5;
+$meter-height-small: $sp-unit * 1.5;
.p-meter {
margin-bottom: $sp-unit * 1.5;
@@ -40,8 +40,8 @@ $meter-height--small: $sp-unit * 1.5;
padding-top: $sp-unit * 0.75;
.p-meter__bar {
- border-radius: $meter-height--small;
- height: $meter-height--small;
+ border-radius: $meter-height-small;
+ height: $meter-height-small;
margin-bottom: $sp-unit * 0.75;
}
diff --git a/frontend/src/components/Navigation/_Navigation.scss b/frontend/src/components/Navigation/_Navigation.scss
index 5b97ae3..93dbc97 100644
--- a/frontend/src/components/Navigation/_Navigation.scss
+++ b/frontend/src/components/Navigation/_Navigation.scss
@@ -1,23 +1,51 @@
.l-navigation {
@include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
+
+ .l-navigation__controls {
+ margin-left: auto;
+ padding-top: 0.65rem;
+ z-index: $side-navigation-z-index + 1;
+
+ @include vf-transition($property: #{opacity, visibility, transform, background}, $duration: fast);
+
+ @media only screen and (min-width: ($breakpoint-small + 1)) {
+ opacity: 1;
+ visibility: visible;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-top: 0;
+ transform: translateX(1rem) translateY(2.6rem);
+ }
+
+ @media only screen and (min-width: ($breakpoint-xx-large)) {
+ display: none;
+ }
+ }
+
&:hover,
&:focus-within,
&.is-pinned {
grid-area: nav;
+
@media only screen and (min-width: ($breakpoint-small + 1)) {
position: static;
}
+
.l-navigation__controls {
opacity: 1;
visibility: visible;
+
button {
- background-color: rgba(255, 255, 255, 0.05);
+ background-color: rgb(255 255 255 / 5%);
}
+
@media only screen and (min-width: ($breakpoint-small + 1)) {
transform: translateX(#{$application-layout--side-nav-width-expanded - 3rem}) translateY(0.8rem);
}
}
}
+
&.is-collapsed {
.l-navigation-collapse-toggle,
.l-navigation__controls {
@@ -26,35 +54,21 @@
}
}
}
+
.l-navigation__drawer {
// ensures the drawer never exceeds the viewport width on mobile
max-width: 100vw;
}
- .l-navigation__controls {
- margin-left: auto;
- padding-top: 0.65rem;
- z-index: $side-navigation-z-index + 1;
- @include vf-transition($property: #{opacity, visibility, transform, background}, $duration: fast);
- @media only screen and (min-width: ($breakpoint-small + 1)) {
- opacity: 1;
- visibility: visible;
- position: absolute;
- top: 0;
- left: 0;
- padding-top: 0;
- transform: translateX(1rem) translateY(2.6rem);
- }
- @media only screen and (min-width: ($breakpoint-xx-large)) {
- display: none;
- }
- }
+
.l-navigation--item-icon {
margin-right: $sph--small;
}
}
+
.p-panel.is-dark {
.p-panel__header {
background-color: inherit;
+
@include vf-transition($property: #{width, box-shadow, background}, $duration: fast);
}
@@ -63,6 +77,7 @@
text-decoration: none;
display: flex;
flex-direction: column;
+
@media only screen and (max-width: ($breakpoint-small)) {
margin-top: 1.25rem;
margin-bottom: 0;
@@ -71,11 +86,13 @@
.p-panel__logo-name {
@extend %vf-heading-4;
- font-size: #{map-get($font-sizes, h4)}rem;
- line-height: map-get($line-heights, x-small);
+
+ font-size: #{map_get($font-sizes, h4)}rem;
+ line-height: map_get($line-heights, x-small);
margin-bottom: 1.25rem !important;
padding-top: 0.051rem !important;
margin-left: 2rem !important;
+
@media only screen and (min-width: ($breakpoint-small + 1)) {
margin-left: 2.5rem !important;
}
@@ -84,20 +101,26 @@
.p-panel__content {
padding-top: 0;
}
+
.p-side-navigation--icons {
- & > .p-side-navigation__list:last-of-type::after {
- content: "";
- }
.p-side-navigation__list::after {
left: 1rem;
opacity: 1;
}
+
+ & > .p-side-navigation__list:last-of-type::after {
+ content: "";
+ }
+
.no-divider::after {
left: 1rem;
opacity: 0;
}
+
.p-side-navigation__footer {
+ // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
@extend .p-side-navigation__text;
+
padding-left: 1.5rem;
transition-duration: 0ms;
}
@@ -106,9 +129,11 @@
.p-navigation__tagged-logo {
min-width: auto;
}
+
.p-navigation__tagged-logo .p-navigation__logo-tag {
height: 2.3rem;
left: 1rem;
+
@media only screen and (min-width: ($breakpoint-small + 1)) {
left: 1.5rem;
}
@@ -119,6 +144,7 @@
text-align: left;
justify-content: flex-start;
}
+
.p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item .p-side-navigation__link {
padding-left: 4rem;
}
diff --git a/frontend/src/components/Popover/_Popover.scss b/frontend/src/components/Popover/_Popover.scss
index 9e5d701..c9c670d 100644
--- a/frontend/src/components/Popover/_Popover.scss
+++ b/frontend/src/components/Popover/_Popover.scss
@@ -2,6 +2,8 @@
@extend %vf-bg--x-light;
@extend %vf-has-box-shadow;
@extend %vf-has-round-corners;
+
+ width: 13.5rem;
z-index: 10;
}
%popover-grid {
@@ -11,10 +13,6 @@
padding: $spv--small $spv--large;
}
-.p-popover {
- width: 13.5rem;
-}
-
.p-popover__header {
margin: 0 $sph--large;
}
@@ -25,11 +23,11 @@
.p-popover__secondary {
@extend %popover-grid;
+
background: $color-light;
}
.p-popover__separator {
- grid-column-start: 1;
- grid-column-end: 4;
+ grid-column: 1 4;
margin-top: $spv--small;
}
diff --git a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
index a8e0e28..3a2d251 100644
--- a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
+++ b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
@@ -2,7 +2,7 @@
transition-duration: 0.165s;
transition-property: width, box-shadow, background;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- background: #444444;
+ background: #444;
width: 0;
height: 0;
visibility: hidden;
@@ -11,10 +11,12 @@
visibility: visible;
width: 100%;
height: 100%;
+
@media (min-width: $breakpoint-small) {
width: $application-layout--side-nav-width-expanded;
}
}
+
.p-side-navigation__drawer {
background: inherit;
transform: none;
@@ -22,11 +24,14 @@
max-width: 100%;
height: inherit;
}
+
.p-side-navigation__title {
@extend %vf-heading-4;
+
padding-left: 1.5rem;
margin-bottom: 2rem !important;
}
+
.p-side-navigation__text,
.p-side-navigation__item--title .p-side-navigation__item .p-side-navigation__link {
@media (min-width: $breakpoint-small) {
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss b/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
index 98cbc27..cbeec0f 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
+++ b/frontend/src/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/_ColumnsVisibilityControl.scss
@@ -1,16 +1,18 @@
.columns-visibility-checkbox {
- &:first-of-type label {
- padding-top: $sph--small;
- }
label {
padding: 0 $sph--large $sph--x-small $sph--large;
width: 100%;
- text-indent: 0
+ text-indent: 0;
+ }
+
+ &:first-of-type label {
+ padding-top: $sph--small;
}
}
[class^="p-button"].has-icon.columns-visibility-toggle {
@extend %vf-input-elements;
+
padding-left: $spv--small;
text-align: left;
width: 100%;
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss b/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
index 631f8c0..f183a4c 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
+++ b/frontend/src/components/SitesList/SitesTable/SitesTableControls/_SitesTableControls.scss
@@ -3,6 +3,7 @@
width: 100%;
margin-left: 0;
margin-right: 0;
+
@media (min-width: $breakpoint-large) {
width: auto;
margin: 0 1rem;
diff --git a/frontend/src/components/SitesList/SitesTable/_SitesTable.scss b/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
index 35397ae..03a559d 100644
--- a/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
+++ b/frontend/src/components/SitesList/SitesTable/_SitesTable.scss
@@ -4,12 +4,14 @@ $connection-status-icon-width: 1.5rem;
thead th:first-child {
width: 3rem;
}
+
td.connection,
th.connection {
.connection__text {
padding-left: $connection-status-icon-width;
}
}
+
.sites-table-row--muted {
td:not(.name) {
&,
@@ -18,11 +20,13 @@ $connection-status-icon-width: 1.5rem;
}
}
}
+
.status-icon {
display: inline-block;
position: relative;
padding-left: $connection-status-icon-width;
}
+
.status-icon::before {
content: "\00B7";
font-size: 5rem;
@@ -31,15 +35,19 @@ $connection-status-icon-width: 1.5rem;
top: -6px;
color: transparent;
}
+
.status-icon.is-lost::before {
color: #c7162b;
}
+
.status-icon.is-stable::before {
color: #0e8420;
}
+
.status-icon.is-unknown::before {
color: #cdcdcd;
}
+
.p-checkbox.is-label-visually-hidden .p-checkbox__label {
position: absolute;
width: 1px;
diff --git a/frontend/src/components/TokensCreate/_TokensCreate.scss b/frontend/src/components/TokensCreate/_TokensCreate.scss
index 3fc3031..32de4af 100644
--- a/frontend/src/components/TokensCreate/_TokensCreate.scss
+++ b/frontend/src/components/TokensCreate/_TokensCreate.scss
@@ -2,13 +2,16 @@
.tokens-create__heading {
margin-bottom: $sph--x-large;
}
+
hr.tokens-create__separator {
margin-bottom: $sph--large;
}
+
.tokens-create__buttons {
display: flex;
justify-content: flex-end;
width: 100%;
+
a,
button {
margin-left: $sph--large;
diff --git a/frontend/src/components/TokensList/_TokensList.scss b/frontend/src/components/TokensList/_TokensList.scss
index 64694b2..3171cbd 100644
--- a/frontend/src/components/TokensList/_TokensList.scss
+++ b/frontend/src/components/TokensList/_TokensList.scss
@@ -1,6 +1,5 @@
.tokens-list-header {
@media only screen and (min-width: $breakpoint-small) {
-
position: sticky;
top: -0.75rem;
background-color: white;
diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
index f3ee36a..2dd28ec 100644
--- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
+++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
@@ -1,4 +1,9 @@
.tokens-table {
+ td,
+ th {
+ vertical-align: middle;
+ }
+
thead th:first-child {
width: 3rem;
}
@@ -31,11 +36,6 @@
}
}
- td,
- th {
- vertical-align: middle;
- }
-
.token-cell {
width: 100%;
display: flex;
diff --git a/frontend/src/components/base/TablePagination/_TablePagination.scss b/frontend/src/components/base/TablePagination/_TablePagination.scss
index c663d8f..3c96af4 100644
--- a/frontend/src/components/base/TablePagination/_TablePagination.scss
+++ b/frontend/src/components/base/TablePagination/_TablePagination.scss
@@ -18,6 +18,7 @@
.u__left-rotate {
transform: rotate(90deg);
}
+
.u__right-rotate {
transform: rotate(-90deg);
}
@@ -34,16 +35,16 @@
}
// Remove input arrows
+
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
- -webkit-appearance: none;
+ appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
- -moz-appearance: textfield;
appearance: textfield;
}
--
Mailing list: https://launchpad.net/~sts-sponsors
Post to : sts-sponsors@lists.launchpad.net
Unsubscribe : https://launchpad.net/~sts-sponsors
More help : https://help.launchpad.net/ListHelp
