chore: 🔧 format of codes

Signed-off-by: WaitSpring <[email protected]>

resources/mixins.less

@@ -6,11 +6,11 @@
 @import 'variables.less';
 
 .citizen-card( @border-radius: true ) {
- background-color: var(--color-surface-1);
- box-shadow: var(--box-shadow-dialog);
+ background-color: var( --color-surface-1 );
+ box-shadow: var( --box-shadow-dialog );
 
  & when ( @border-radius ) {
- border-radius: var(--border-radius--medium);
+ border-radius: var( --border-radius--medium );
  }
 }
 
@@ -69,16 +69,16 @@
  left: 0;
  overflow: auto;
  min-width: 16rem;
- max-height: var(--header-card-maxheight);
- margin: var(--space-xs);
+ max-height: var( --header-card-maxheight );
+ margin: var( --space-xs );
  contain: content;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  .citizen-card();
  .citizen-card-hide( top @position );
 
- @media (min-width: @width-breakpoint-tablet) {
+ @media ( min-width: @width-breakpoint-tablet ) {
  & when ( @position = left ) {
  right: unset;
  }
@@ -88,7 +88,7 @@
  }
  }
 
- @media (min-width: @width-breakpoint-desktop) {
+ @media ( min-width: @width-breakpoint-desktop ) {
  & when ( @position = left ) {
  .citizen-card-hide( top left );
  }
@@ -104,7 +104,7 @@
  top: @topOffset;
 
  & when ( @bottomBorder ) {
- border-bottom: 1px solid var(--border-color-base);
+ border-bottom: 1px solid var( --border-color-base );
  }
 
  & when ( @zIndex ) {
@@ -120,9 +120,9 @@
  right: ~'calc( var(--padding-page ) * -1 )';
  left: ~'calc( var(--padding-page ) * -1 )';
  height: 100%;
- -webkit-backdrop-filter: saturate(50%) blur(16px);
- backdrop-filter: saturate(50%) blur(16px);
- background-color: var(--background-color-overlay);
+ -webkit-backdrop-filter: saturate( 50% ) blur( 16px );
+ backdrop-filter: saturate( 50% ) blur( 16px );
+ background-color: var( --background-color-overlay );
  content: '';
  }
 }
@@ -135,7 +135,7 @@
 
 // Set content to be at the center
 .content-center() {
- max-width: var(--width-layout);
+ max-width: var( --width-layout );
  margin-right: auto;
  margin-left: auto;
 }
@@ -179,44 +179,44 @@
 .menu-item-link() {
  display: flex;
  align-items: center;
- color: var(--color-base) !important;
- font-weight: var(--font-weight-medium);
- gap: var(--space-sm);
+ color: var( --color-base ) !important;
+ font-weight: var( --font-weight-medium );
+ gap: var( --space-sm );
 }
 
 .menu-item-link-hover() {
- background-color: var(--background-color-primary--hover);
+ background-color: var( --background-color-primary--hover );
 }
 
 .menu-item-link-active() {
- background-color: var(--background-color-primary--active);
+ background-color: var( --background-color-primary--active );
 }
 
 // Button Styles
 .button-blue() {
- background-color: var(--color-primary);
+ background-color: var( --color-primary );
  color: #fff !important;
  transition: @transition-background, @transition-color;
 }
 
 .button-blue-hover() {
- background-color: var(--color-primary--hover);
+ background-color: var( --color-primary--hover );
 }
 
 .button-blue-active() {
- background-color: var(--color-primary--active);
+ background-color: var( --color-primary--active );
 }
 
 .button-red() {
- background-color: var(--color-destructive);
+ background-color: var( --color-destructive );
  color: #fff !important;
  transition: @transition-background, @transition-color;
 }
 
 .button-red-hover() {
- background-color: var(--color-destructive--hover);
+ background-color: var( --color-destructive--hover );
 }
 
 .button-red-active() {
- background-color: var(--color-destructive--active);
+ background-color: var( --color-destructive--active );
 }

resources/skins.citizen.search/skins.citizen.search.less

@@ -5,7 +5,7 @@
  position: absolute;
  overflow: auto;
  width: 100%;
- max-height: var(--header-card-maxheight);
+ max-height: var( --header-card-maxheight );
  box-sizing: border-box;
  padding: 0.75rem 0 0 0;
  margin: -0.75rem 0 0 0; // Reset <ol> styles
@@ -19,7 +19,7 @@
  &__item {
  .citizen-typeahead {
  &__thumbnail {
- margin-right: var(--space-sm);
+ margin-right: var( --space-sm );
 
  &.citizen-ui-icon {
  width: 100%; // reset width
@@ -32,7 +32,7 @@
  }
 
  &--active {
- background-color: var(--background-color-primary--hover);
+ background-color: var( --background-color-primary--hover );
  }
 
  &--hidden {
@@ -43,12 +43,12 @@
  .citizen-typeahead {
  &__content {
  flex-direction: column;
- padding: var(--space-xl) 0;
+ padding: var( --space-xl ) 0;
  text-align: center;
  }
 
  &__thumbnail {
- margin-bottom: var(--space-sm);
+ margin-bottom: var( --space-sm );
  }
  }
  }
@@ -62,7 +62,7 @@
 
  &.citizen-ui-icon {
  height: 60px;
- background-color: var(--color-surface-3);
+ background-color: var( --color-surface-3 );
 
  &::before {
  background-size: 20px;
@@ -75,17 +75,17 @@
  &--tool {
  .citizen-typeahead {
  &__content {
- padding: var(--space-sm) 0;
- border-top: 1px solid var(--border-color-base);
+ padding: var( --space-sm ) 0;
+ border-top: 1px solid var( --border-color-base );
  }
 
  &__thumbnail {
- height: var(--size-icon);
+ height: var( --size-icon );
  background-color: transparent;
  }
 
  &__description {
- color: var(--color-base);
+ color: var( --color-base );
  }
  }
 
@@ -100,9 +100,9 @@
  &__content {
  display: flex;
  align-items: center;
- padding: var(--space-xs) 0;
- margin: 0 var(--space-sm);
- color: var(--color-base);
+ padding: var( --space-xs ) 0;
+ margin: 0 var( --space-sm );
+ color: var( --color-base );
  }
 
  &__thumbnail {
@@ -111,7 +111,7 @@
  max-width: 70px;
  height: 60px;
  flex-shrink: 0;
- border-radius: var(--border-radius--medium);
+ border-radius: var( --border-radius--medium );
 
  &.citizen-ui-icon::before {
  background-size: contain;
@@ -130,31 +130,31 @@
 
  &__title {
  flex-shrink: 0;
- color: var(--color-base--emphasized);
- font-weight: var(--font-weight-semibold);
+ color: var( --color-base--emphasized );
+ font-weight: var( --font-weight-semibold );
  }
 
  &__highlight {
- color: var(--color-base--subtle);
- font-weight: var(--font-weight-medium);
+ color: var( --color-base--subtle );
+ font-weight: var( --font-weight-medium );
  }
 
  &__query {
- color: var(--color-base--emphasized);
- font-weight: var(--font-weight-semibold);
+ color: var( --color-base--emphasized );
+ font-weight: var( --font-weight-semibold );
  }
 
  &__label {
  display: flex;
- margin-left: var(--space-xs);
- color: var(--color-base);
+ margin-left: var( --space-xs );
+ color: var( --color-base );
  font-size: 0.8125rem;
- gap: var(--space-xxs);
+ gap: var( --space-xxs );
 
  .citizen-ui-icon {
  width: 0.8125rem;
  height: 0.8125rem;
- margin-right: var(--space-xxs);
+ margin-right: var( --space-xxs );
  }
  }
 
@@ -165,7 +165,7 @@
 
  &__description {
  margin-top: 0.1rem;
- color: var(--color-base--subtle);
+ color: var( --color-base--subtle );
  font-size: 0.8125rem;
  }
 
@@ -177,14 +177,14 @@
 
  &__actions {
  position: absolute;
- right: var(--space-sm);
+ right: var( --space-sm );
  }
 
  &__keyboard {
  display: none;
  padding: 0 8px;
- border-radius: var(--border-radius--small);
- background-color: var(--color-surface-1);
+ border-radius: var( --border-radius--small );
+ background-color: var( --color-surface-1 );
  }
 
  &--expanded {
@@ -193,7 +193,7 @@
 }
 
 // HACK: This is as close as we can to detect whether there is a keyboard in CSS
-@media (hover: hover) and (pointer: fine) {
+@media ( hover: hover ) and ( pointer: fine ) {
  .citizen-typeahead {
  &__item--active {
  .citizen-typeahead__keyboard {

resources/skins.citizen.styles/ContentFooter.less

@@ -1,7 +1,7 @@
 .mw-body-footer {
  display: flex;
  flex-direction: column;
- gap: var(--space-xl);
+ gap: var( --space-xl );
  grid-area: footer;
- line-height: var(--line-height-sm);
+ line-height: var( --line-height-sm );
 }

resources/skins.citizen.styles/Drawer.less

@@ -1,32 +1,31 @@
 .citizen-drawer {
  &__card {
- padding: var(--space-xs) 0;
+ padding: var( --space-xs ) 0;
  .citizen-header-card( left );
  }
 
  &__header {
  display: flex;
  align-items: center;
  justify-content: center;
- padding: var(--space-md);
- border-bottom: 1px solid var(--border-color-base);
- gap: var(--space-md);
+ padding: var( --space-md );
+ border-bottom: 1px solid var( --border-color-base );
+ gap: var( --space-md );
  }
 
  // Keep aspect ratio
  &__logo {
  display: flex;
- flex-direction: row;
+ flex-flow: row nowrap;
  align-items: center;
- flex-wrap: nowrap;
-
+
  img {
  width: auto;
  max-height: 3rem;
  }
 
  .mw-logo-wordmark {
- color: var(--color-base--emphasized);
+ color: var( --color-base--emphasized );
  font-size: 1.5rem;
  margin: 0 1rem;
  }
@@ -43,15 +42,15 @@
  display: grid;
  max-width: 92.5vw;
  justify-content: center;
- padding: var(--space-xs) var(--space-md);
+ padding: var( --space-xs ) var( --space-md );
  font-size: 0.875rem; // TODO: Make this a variable
- gap: var(--space-xs);
- grid-template-columns: repeat(auto-fit, 15rem);
+ gap: var( --space-xs );
+ grid-template-columns: repeat( auto-fit, 15rem );
 
  a {
  .menu-item-link;
- padding: 0.625rem var(--space-md); // TODO: Make this a variable
- border-radius: var(--border-radius--small);
+ padding: 0.625rem var( --space-md ); // TODO: Make this a variable
+ border-radius: var( --border-radius--small );
 
  &:hover {
  .menu-item-link-hover;
@@ -78,7 +77,7 @@
  }
 }
 
-@media (min-width: @width-breakpoint-tablet) {
+@media ( min-width: @width-breakpoint-tablet ) {
  .mw-logo-wordmark {
  font-size: 2rem;
  // Sometimes long wiki name will wrap when the menu is too small