console,account: Refactor stylus files to match new stylelint rules

pkg/webui/account/views/front/front.styl

@@ -44,7 +44,7 @@
   background-image: url('../../../assets/img/layout/bg/login-visual.jpg')
   background-size: cover
   background-position: left
-  box-shadow: inset 60px 0 60px rgba(0,0,0,0.08)
+  box-shadow: inset 60px 0 60px rgba(0,0,0,.08)
 
 +media-query($bp.l)
   .visual
@@ -82,9 +82,9 @@
 .title
   color: var(--c-text-brand-normal)
   margin-top: 0
-  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background: linear-gradient(right, 0% var(--c-text-brand-normal), var(--c-text-brand-normal-active))
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
   font-weight: 200
   font-size: $fs.xl3
   +media-query($bp.s)
@@ -110,8 +110,8 @@
     flex-direction: row
   +media-query($bp.s)
     button, a
-      margin-bottom: $cs.s !important
-      margin-right: 0 !important
+      margin-bottom: $cs.s
+      margin-right: 0
 
 .footer
   position: fixed

pkg/webui/account/views/overview/overview.styl

@@ -14,5 +14,5 @@
 
 .top
   padding: $ls.xl 0
-  diplay: flex
+  display: flex
   justify-content: center

pkg/webui/components/button/button.styl

@@ -186,6 +186,7 @@
 
   &.busy:not(.naked),
   &.busy
+    // stylelint-disable-next-line declaration-no-important
     color: transparent !important
     position: relative
     svg
@@ -225,5 +226,7 @@
     margin-right: $cs.xs
 
     +media-query($bp.s)
+      // stylelint-disable declaration-no-important
       margin-bottom: $cs.s !important
       margin-right: 0 !important
+      // stylelint-enable declaration-no-important

pkg/webui/components/checkbox/checkbox.styl

@@ -32,7 +32,7 @@
   color: var(--c-text-neutral-light)
 
   .checkbox
-    opacity .4
+    opacity: .4
 
 .checkbox
   position: relative
@@ -63,7 +63,7 @@
   input:checked ~ .checkmark:after
     opacity: 1
     transform: rotate(45deg) scale(1) translate(-50%, -50%)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .checkmark
     border-color: var(--c-text-brand-normal)

pkg/webui/components/dropdown/dropdown.styl

@@ -18,7 +18,7 @@ ul.dropdown
   border: 1px solid var(--c-border-neutral-normal)
   list-style-type: none
   background: var(--c-bg-neutral-min)
-  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, .06)
   position: absolute
   padding: $cs.xs
   width: max-content

pkg/webui/components/footer/footer.styl

@@ -23,33 +23,33 @@ $fh = 'calc(%s - 1px)' % $footer-height
   flex: none
   background-color: var(--c-bg-neutral-min)
   box-sizing: border-box
-  
+
   +media-query-min($bp.xs)
     padding-left: $cs.xs
     height: $footer-height
   +media-query($bp.xs)
     min-height: $footer-height * 2
     flex-direction: column
-  
+
   .language
     position: relative
     height: 100%
 
     &-dropdown
       bottom: $fh
       left: 0
-  
+
   &.transparent
     +media-query-min($bp.s)
       .footer-section
         border: 0
         background-color: transparent
 
         &.interactive:hover
-          background-color: rgba(255,255,2555,0.1)
+          background-color: rgba(255,255,2555,.1)
 
       .right
-          color: var(--c-bg-neutral-min)
+        color: var(--c-bg-neutral-min)
 
 .link
   color: var(--c-text-neutral-light)
@@ -79,7 +79,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     width: 100%
     justify-content: space-between
     align-items: center
-  
+
 .footer-section
   height: $fh
   display: flex
@@ -91,7 +91,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
 
   &:not(.interactive)
     padding: 0 $cs.s
-  
+
   &-button
     reset-button()
     text-decoration: none
@@ -103,7 +103,7 @@ $fh = 'calc(%s - 1px)' % $footer-height
     & > div
       display: flex
       align-items: center
-    
+
   &:not(.primary)
     border-normal('left')
     background-color: var(--c-bg-neutral-min)
@@ -113,6 +113,6 @@ $fh = 'calc(%s - 1px)' % $footer-height
   &.primary
     background-color: var(--c-text-brand-normal)
     color: var(--c-bg-neutral-min)
-    
+
     &.interactive:hover
       background-color: hoverize(var(--c-text-brand-normal))

pkg/webui/components/form/field/field.styl

@@ -37,7 +37,7 @@
   &:not(.has-tooltip)
     &.required
       .label::after
-        margin-left: 0.1rem
+        margin-left: .1rem
 
   &.grow
     flex-grow: 1
@@ -132,7 +132,7 @@
 
       &:not(:last-child)
         margin: 0 0 $cs.s 0
-  
+
     .tooltip-links
       display: flex
       justify-content: space-between
@@ -187,4 +187,4 @@
   color: var(--c-text-warning-normal)
 
 .disabled .info-area
-    color: var(--c-text-neutral-light)
+  color: var(--c-text-neutral-light)

pkg/webui/components/icon/story.styl

@@ -14,7 +14,7 @@
 
 .wrapper
   span:first-child
-      margin-right: .6rem
+    margin-right: .6rem
 
   div
     border-dark()

pkg/webui/components/key-value-map/key-value-map.styl

@@ -17,4 +17,4 @@
   flex-grow: 1
 
   &-index-as-key
-    flex-grow: 0.25
+    flex-grow: .25

pkg/webui/components/link/link.styl

@@ -52,7 +52,7 @@
   nudge('up', 2px)
   margin-left: .11rem
   margin-right: .1rem
-  font-size: 0.9rem
+  font-size: .9rem
 
 .doc-icon
   nudge('up')

pkg/webui/components/map/map.styl

@@ -18,6 +18,7 @@
   height: 100%
 
 .click
+  // stylelint-disable-next-line declaration-no-important
   cursor: crosshair !important
 
 .container
@@ -29,6 +30,8 @@
   &.widget
     height: 25rem
 
+// stylelint-disable
+
   :global {
   .leaflet-pane,
   .leaflet-tile,
@@ -618,3 +621,5 @@
     border-right-color: #fff
     }
   }
+
+// stylelint-enable

pkg/webui/components/mobile-menu/mobile-menu.styl

@@ -27,15 +27,15 @@ ul.mobile-dropdown
       padding: $cs.l 0
 
   hr
-    height: 0.35rem
+    height: .35rem
     margin: 0
 
 .user-header
   display: flex
   justify-content: space-between
   padding: $cs.xl $cs.l
   align-items: center
-  border-top: 0.35rem solid var(--c-border-neutral-light)
+  border-top: .35rem solid var(--c-border-neutral-light)
 
 .user-icon
   margin-right: $cs.xs

pkg/webui/components/notification/details/details.styl

@@ -24,11 +24,11 @@
     background-color: var(--c-bg-neutral-semilight)
     color: var(--c-text-neutral-heavy)
     font-size: $fs.s
-    y-overflow: auto
     padding: $cs.s
     color: var(--c-text-neutral-heavy)
     margin: (-1 * $ls.m) 0 0 0
     box-sizing: border-box
 
   &-button
+    // stylelint-disable-next-line declaration-no-important
     margin-right: 0 !important

pkg/webui/components/panel/toggle/toggle.styl

@@ -31,7 +31,7 @@
 
     &-active
       color: var(--c-text-neutral-min)
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .05)
       background: var(--c-bg-neutral-heavy)
       font-weight: $fwv2.regular
 

pkg/webui/components/profile-dropdown/profile-dropdown.styl

@@ -17,6 +17,7 @@
   position: relative
 
   button
+    // stylelint-disable-next-line declaration-no-important
     padding: 0 $cs.s !important
 
 .brand-logo

pkg/webui/components/radio-button/radio-button.styl

@@ -30,7 +30,7 @@
   color: var(--c-text-neutral-light)
 
   .dot
-    opacity .4
+    opacity: .4
 
 .radio
   nudge('up')
@@ -61,7 +61,7 @@
   input:checked ~ .dot:after
     opacity: 1
     transform: scale(1)
-    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.40) $ad.xs
+    transition: all $ad.s cubic-bezier(.12, .4, .29, 1.4) $ad.xs
 
   input:focus ~ .dot
     border-color: var(--c-text-brand-normal)

pkg/webui/components/select/select.styl

@@ -16,6 +16,7 @@
   input-width-classes()
   // Overwriting react-select styling in global scope.
 
+  // stylelint-disable
   :global(.select__option)
     padding: $cs.xs $cs.s
   :global(.select__option--is-selected)
@@ -65,3 +66,4 @@
 
     .remove-option-button
       float: right
+  // stylelint-enable

pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl

@@ -24,13 +24,13 @@
     overflow: hidden
     border-radius: $br.l
     width: 2.5rem
-    transition: 0.3s 0s all cubic-bezier(0.770, 0.000, 0.175, 1.000)
+    transition: .3s 0s all cubic-bezier(.77, , .175, 1)
     top: 0
     left: 0
     z-index: $zi.slight
 
     &:hover
-      transition: 0.3s 0.2s all cubic-bezier(0.770, 0.000, 0.175, 1.000)
+      transition: .3s .2s all cubic-bezier(.77, , .175, 1)
       width: 100%
 
       // Reveal the button label.
@@ -60,7 +60,7 @@
 
   &-button
     border-radius: $br.l
-    padding: 0 $cs.xs 0 0.73rem
+    padding: 0 $cs.xs 0 .73rem
     background-color: var(--c-bg-neutral-heavy)
     position: relative
     display: inline-flex
@@ -79,7 +79,7 @@
     justify-content: flex-start
 
     span:last-child
-      transition: 0.2s 0.2s all ease-in-out
+      transition: .2s .2s all ease-in-out
       opacity: 0
 
     &:not(:disabled)

pkg/webui/components/sidebar/search-button/search-button.styl

@@ -22,16 +22,16 @@
   align-items: center
   padding: $cs.xxs $cs.xxs
   gap: $cs.xxs
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, .06)
   background: var(--c-bg-neutral-min)
   border: 1px solid var(--c-border-neutral-semilight)
   border-radius: $br.l
-  transition: border-color 0.08s linear, box-shadow 0.08s linear, color 0.08s linear
+  transition: border-color .08s linear, box-shadow .08s linear, color .08s linear
 
 
   &:hover
     color: var(--c-text-neutral-min-hover)
-    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08)
+    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .08)
 
   &.is-minimized
     justify-content: center

pkg/webui/components/sidebar/side-footer/side-footer.styl

@@ -47,6 +47,7 @@
     margin-left: $cs.xxs
 
   .support-button > button
+    // stylelint-disable-next-line declaration-no-important
     width: 100% !important
     justify-content: flex-start
 

pkg/webui/components/sidebar/switcher/switcher.styl

@@ -16,7 +16,7 @@
   border-radius: $br.l
   border: 1px solid var(--c-border-neutral-light)
   background: var(--c-bg-neutral-min)
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.06)
+  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, .06)
   display: flex
   gap: $cs.xxs
   justify-content: center