Merge pull request #5493 from consuldemocracy/properties_alphabetical_order

Add properties-alphabetical-order Stylelint rule
2024-07-22 17:50:12 +02:00
parent 2361efb1b5 2ccf725815
commit 6628b0f67e
31 changed files with 219 additions and 218 deletions
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -51,6 +51,7 @@ rules:
      name: include
      hasBlock: true
    - rules
+  order/properties-alphabetical-order: true
  scss/at-else-closing-brace-space-after: always-intermediate
  scss/at-else-empty-line-before: never
  scss/at-extend-no-missing-placeholder: true
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -273,8 +273,8 @@ $table-header:   #ecf1f6;
 }

 .sortable thead th:hover {
-  text-decoration: underline;
  cursor: pointer;
+  text-decoration: underline;
 }

 .no-margin-bottom {
@@ -302,8 +302,8 @@ $table-header:   #ecf1f6;
  }

  &::before {
-    content: "\f0d8";
    bottom: 0;
+    content: "\f0d8";
  }

  &::after {
@@ -331,8 +331,8 @@ code {
 }

 .content-type {
-  white-space: nowrap;
  padding-right: $line-height;
+  white-space: nowrap;

  label {
    margin-left: 0 !important;
@@ -402,8 +402,8 @@ code {

 .moderation-description {
  max-height: rem-calc(65);
-  overflow: hidden;
  max-width: rem-calc(700);
+  overflow: hidden;

  &:hover {
    max-height: rem-calc(1000);
@@ -581,8 +581,8 @@ table {
 }

 .markdown-editor .markdown-preview {
-  overflow-y: auto;
  height: 15em;
+  overflow-y: auto;
 }

 .markdown-editor textarea {
@@ -590,12 +590,12 @@ table {
 }

 .markdown-editor.fullscreen {
-  z-index: 9999;
-  width: 100%;
  height: 100%;
+  left: 0;
  position: fixed;
  top: 0;
-  left: 0;
+  width: 100%;
+  z-index: 9999;
 }

 .markdown-editor.fullscreen .markdown-preview {
@@ -698,17 +698,17 @@ table {
  }

  a {
-    line-height: 3rem;
    color: $delete;
+    line-height: 3rem;

    span {
      text-decoration: underline;
    }

    .icon-x {
-      vertical-align: sub;
-      text-decoration: none;
      line-height: 0;
+      text-decoration: none;
+      vertical-align: sub;
    }

    &:active,
@@ -746,8 +746,8 @@ table {
    }

    .markdown-editor-header {
-      vertical-align: top;
      display: inline-block;
+      vertical-align: top;

      @include breakpoint(medium) {
        line-height: 3rem;
@@ -756,10 +756,10 @@ table {

    .truncate {
      @include breakpoint(medium) {
-        width: 40vw;
-        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 40vw;
      }
    }

@@ -775,10 +775,10 @@ table {

    input {
      font-size: $small-font-size;
-      padding: 0.5em 1em;
-      margin-left: 0;
      margin-bottom: 0;
+      margin-left: 0;
      margin-top: 1rem;
+      padding: 0.5em 1em;

      @include breakpoint(medium) {
        margin: 0.5rem;
@@ -804,21 +804,21 @@ table {
    margin-bottom: 1rem;

    small {
+      color: $text-medium;
      display: block;
      margin-top: -1rem;
-      color: $text-medium;

      @include breakpoint(medium) {
-        margin-left: 0.25rem;
        display: inline-block;
+        margin-left: 0.25rem;
        margin-top: 0;
      }
    }
  }

  .fullscreen-container {
-    text-align: center;
    background: #ccdbe6;
+    text-align: center;

    .markdown-editor-header,
    .markdown-editor-buttons {
@@ -826,21 +826,21 @@ table {
    }

    span {
-      text-decoration: none;
      font-size: $small-font-size;
+      text-decoration: none;
    }

    .icon-expand {
-      margin-left: 0.25rem;
-      vertical-align: sub;
-      text-decoration: none;
      line-height: 0;
+      margin-left: 0.25rem;
+      text-decoration: none;
+      vertical-align: sub;
    }
  }

  .markdown-preview {
-    font-family: $font-family-serif;
    border: 1px solid #cacaca;
+    font-family: $font-family-serif;
    margin-bottom: 2rem;

    h1,
@@ -873,10 +873,10 @@ table {
    }

    .fullscreen-container {
-      text-align: left;
      background: $admin-color;
-      padding: 0.5rem 1rem;
      margin-bottom: 0;
+      padding: 0.5rem 1rem;
+      text-align: left;
    }

    .legislation-draft-version-body {
@@ -893,8 +893,8 @@ table {
    }

    .markdown-preview {
-      padding: 1rem;
      border: 0;
+      padding: 1rem;

      @include breakpoint(medium) {
        padding: 1rem 2rem;
@@ -907,38 +907,38 @@ table {
 // --------------

 .map {
-  width: 100%;
  height: 350px;
+  width: 100%;

  .map-marker {
-    visibility: visible;
-    position: absolute;
    left: 50%;
-    top: 50%;
    margin-top: -5px;
+    position: absolute;
+    top: 50%;
+    visibility: visible;

    .map-icon {
-      width: 30px;
-      height: 30px;
-      border-radius: 50% 50% 50% 0;
      background: #00cae9;
+      border-radius: 50% 50% 50% 0;
+      height: 30px;
      transform: rotate(-45deg);
+      width: 30px;
    }

    .map-icon::after {
+      background: #fff;
+      border-radius: 50%;
      content: "";
-      width: 14px;
      height: 14px;
      margin: 8px 0 0 8px;
-      background: #fff;
      position: absolute;
-      border-radius: 50%;
+      width: 14px;
    }
  }

  .map-attributtion {
-    visibility: visible;
    height: auto;
+    visibility: visible;
  }
 }

@@ -947,8 +947,8 @@ table {
 }

 .map-attributtion {
-  visibility: hidden;
  height: 0;
+  visibility: hidden;
 }

 // 10. Budgets
@@ -965,8 +965,8 @@ table {
 .advanced-filters-content {
  background: $highlight;
  clear: both;
-  padding: calc(#{$line-height} / 2);
  margin: $line-height 0;
+  padding: calc(#{$line-height} / 2);

  .filter {
    display: inline-block;
@@ -1004,9 +1004,9 @@ table {

 .columns-selector-wrapper {
  background: $light-gray;
-  padding: 2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
+  padding: 2rem;

  .column-selector-item {
    display: inline-block;
--- a/app/assets/stylesheets/admin/budgets/heading_mode.scss
+++ b/app/assets/stylesheets/admin/budgets/heading_mode.scss
@@ -54,9 +54,9 @@
  }

  p {
+    flex-grow: 1;
    font-size: $small-font-size;
    font-style: italic;
-    flex-grow: 1;
  }

  a {
--- a/app/assets/stylesheets/admin/dashboard/index.scss
+++ b/app/assets/stylesheets/admin/dashboard/index.scss
@@ -1,7 +1,7 @@
 .admin-dashboard-index {
  > header h2 {
-    text-transform: uppercase;
    border-bottom: 1px solid $border;
+    text-transform: uppercase;
  }

  address {
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -6,8 +6,8 @@
  ul {
    list-style-type: none;
    margin-bottom: 0;
-    margin-#{$global-left}: 0;
    padding: 0;
+    margin-#{$global-left}: 0;
  }

  > ul > li > :first-child {
@@ -113,8 +113,8 @@

  li {
    ul {
-      margin-left: calc(#{$line-height * 2} / 3);
      border-left: 1px solid $sidebar-hover;
+      margin-left: calc(#{$line-height * 2} / 3);
      padding-left: calc(#{$line-height} / 2);
    }

--- a/app/assets/stylesheets/admin/search.scss
+++ b/app/assets/stylesheets/admin/search.scss
@@ -25,8 +25,8 @@

    input:not([type="button"], [type="checkbox"], [type="file"], [type="radio"], [type="submit"]) {
      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
      border-right: 0;
+      border-top-right-radius: 0;
    }
  }

--- a/app/assets/stylesheets/annotator_overrides.scss
+++ b/app/assets/stylesheets/annotator_overrides.scss
@@ -7,8 +7,8 @@
 }

 .annotator-hl {
-  cursor: pointer;
  background: rgba(255, 249, 218, 0.75);
+  cursor: pointer;

  &.weight-1 {
    background: hsla(50, 100%, 93%, 0.5);
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -4,19 +4,19 @@
 /* Autocomplete
 ----------------------------------*/
 .ui-autocomplete {
-  position: absolute;
  cursor: default;
+  position: absolute;
 }

 /* Menu
 ----------------------------------*/
 .ui-menu {
-  list-style: none;
-  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
-  display: block;
  background: $body-background;
  border: 1px solid $border;
+  display: block;
  font-size: $small-font-size;
+  list-style: none;
+  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);

  .ui-menu-item {

--- a/app/assets/stylesheets/budgets/investments-list.scss
+++ b/app/assets/stylesheets/budgets/investments-list.scss
@@ -14,8 +14,8 @@
    border-radius: rem-calc(6);
    display: flex;
    flex-direction: column;
-    padding: 0;
    margin-bottom: calc(#{$line-height} / 2);
+    padding: 0;
    position: relative;
    width: 100%;

@@ -39,8 +39,8 @@
      display: flex;
      flex: 1;
      flex-direction: column;
-      padding: 0 rem-calc(12) rem-calc(6);
      min-height: $line-height * 8;
+      padding: 0 rem-calc(12) rem-calc(6);

      .investment-project-info {
        flex: 1;
--- a/app/assets/stylesheets/community.scss
+++ b/app/assets/stylesheets/community.scss
@@ -5,8 +5,8 @@
  }

  .panel {
-    min-height: auto;
    margin: 0.375rem 0;
+    min-height: auto;

    .button {
      margin-top: $line-height;
@@ -19,8 +19,8 @@
  .comment-body {
    display: inline-block;
    float: left;
-    margin-right: $line-height;
    margin-bottom: $line-height;
+    margin-right: $line-height;
  }
 }

@@ -34,8 +34,8 @@
  .comments {

    .first-comment {
-      margin-top: $line-height;
      margin-bottom: $line-height;
+      margin-top: $line-height;
    }
  }
 }
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -202,9 +202,9 @@
  }

  .label {
+    left: 0;
    position: absolute;
    top: 20px;
-    left: 0;
  }

  h4 {
@@ -531,16 +531,16 @@

    .overflow-image {
      background-position: center;
-      background-size: cover;
      background-repeat: no-repeat;
+      background-size: cover;
      overflow: hidden;
      position: relative;
    }
  }

  .poster-content {
-    max-width: 90%;
    margin: 0 auto;
+    max-width: 90%;

    h2 {
      color: $text-medium;
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -73,8 +73,8 @@
  }

  td {
-    padding: 0;
    border-right: 1px solid $border;
+    padding: 0;

    &:last-child {
      border-right: 0;
@@ -82,9 +82,9 @@

    span,
    a {
-      text-align: center;
-      line-height: $line-height;
      color: inherit;
+      line-height: $line-height;
+      text-align: center;
    }
  }
 }
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -2,13 +2,13 @@

@font-face {
  font-family: "icons";
+  font-style: normal;
+  font-weight: normal;
  src: font-url("icons.eot");
  src: font-url("icons.eot?#iefix") format("embedded-opentype"),
    font-url("icons.woff") format("woff"),
    font-url("icons.ttf") format("truetype"),
    font-url("icons.svg#icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
 }

 [data-icon]::before,
@@ -284,31 +284,31 @@
 }

 .icon-quote-before::before {
-  content: "";
-  background-size: cover;
-  display: block;
-  width: 60px;
-  height: 60px;
  background-image: url("quote_before_blue.png");
  background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: block;
+  height: 60px;
+  width: 60px;
 }

 .icon-quote-after::before {
-  content: "";
-  background-size: cover;
-  display: block;
-  width: 60px;
-  height: 60px;
  background-image: url("quote_after_blue.png");
  background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: block;
+  height: 60px;
+  width: 60px;
 }

 .icon-finger::before {
-  content: "";
-  background-size: cover;
-  display: inline-block;
-  width: 50px;
-  height: 50px;
  background-image: url("finger.png");
  background-repeat: no-repeat;
+  background-size: cover;
+  content: "";
+  display: inline-block;
+  height: 50px;
+  width: 50px;
 }
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -432,8 +432,8 @@ button,

    > nav {
      flex: 20%;
-      min-width: $side-menu-min-width;
      max-width: max-content;
+      min-width: $side-menu-min-width;

      + * {
        flex: 80%;
@@ -1092,8 +1092,8 @@ form {
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  font-size: rem-calc(32);
-  line-height: rem-calc(32);
  height: rem-calc(32);
+  line-height: rem-calc(32);
  vertical-align: top;
 }

@@ -1173,8 +1173,8 @@ form {
  }

  .time {
-    font-size: $small-font-size;
    color: $text-medium;
+    font-size: $small-font-size;
  }
 }

@@ -1448,8 +1448,8 @@ table {
  padding-bottom: $line-height * 4;

  h2 {
-    margin: 0;
    font-weight: bold;
+    margin: 0;

    span {
      font-size: rem-calc(18);
@@ -1556,8 +1556,8 @@ table {

  .comment-user {
    margin-top: calc(#{$line-height} / 4);
-    padding: calc(#{$line-height} / 4) 0;
    overflow: hidden;
+    padding: calc(#{$line-height} / 4) 0;

    &.level-1,
    &.level-2,
@@ -1839,9 +1839,9 @@ table {
    }

    h4 {
-      margin-top: 0;
-      margin-bottom: $line-height;
      font-size: rem-calc(18);
+      margin-bottom: $line-height;
+      margin-top: 0;
      min-height: 0;
    }

@@ -1874,9 +1874,9 @@ table {
    .proposals-inner,
    .budget-investments-inner {
      border: 1px solid $border;
-      padding: $line-height;
      margin-right: $line-height;
      max-height: rem-calc(500);
+      padding: $line-height;

      @include breakpoint(small) {
        max-height: rem-calc(600);
@@ -2076,9 +2076,9 @@ table {
  }

  .background-header {
+    background: $highlight;
    clip-path: ellipse(60% 80% at 50% 0%);
    height: $line-height * 2;
-    background: $highlight;
    margin-top: rem-calc(-48);

    @include breakpoint($global-width) {
@@ -2201,9 +2201,9 @@ table {
    color: #fff;
    font-size: rem-calc(24);
    line-height: rem-calc(24);
-    text-transform: uppercase;
    padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
    position: absolute;
+    text-transform: uppercase;
    width: 100%;
    z-index: 3;

@@ -2241,8 +2241,8 @@ table {
  .date-of-birth {
    select {
      float: left;
-      width: 30%;
      margin-right: calc(#{$line-height} / 4);
+      width: 30%;
    }
  }
 }
--- a/app/assets/stylesheets/layout/admin_header.scss
+++ b/app/assets/stylesheets/layout/admin_header.scss
@@ -19,8 +19,8 @@

      .account-menu {
        border-bottom: 0;
-        padding-bottom: 0;
        margin-bottom: 0;
+        padding-bottom: 0;

        a {
          font-weight: normal;
--- a/app/assets/stylesheets/layout/remote_translations_button.scss
+++ b/app/assets/stylesheets/layout/remote_translations_button.scss
@@ -1,8 +1,8 @@
 .remote-translations-button {
  @include info-colors;
  font-size: $small-font-size;
-  text-align: center;
  padding: rem-calc(6);
+  text-align: center;

  [type="submit"] {
    @include link;
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -1,9 +1,9 @@
 .legislation {
-  margin: 0 0 $line-height;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 0;
  box-shadow: 0 1px 3px 0 #dee0e3;
+  margin: 0 0 $line-height;
  min-height: 12rem;
  padding: 2rem 0 0;
 }
@@ -23,8 +23,8 @@
 }

 .legislation-calendar-info p {
-  font-size: $small-font-size;
  color: $text-medium;
+  font-size: $small-font-size;
  margin-bottom: 0;
 }

@@ -33,10 +33,10 @@
  padding-top: 1rem;

  h4 {
-    font-size: rem-calc(16);
-    margin-left: 0.25rem;
-    margin-bottom: 0;
    color: #61686e;
+    font-size: rem-calc(16);
+    margin-bottom: 0;
+    margin-left: 0.25rem;

    @include breakpoint(medium) {
      margin-left: 0;
@@ -44,8 +44,8 @@
  }

  p {
-    margin-left: 0.25rem;
    font-size: $small-font-size;
+    margin-left: 0.25rem;

    @include breakpoint(medium) {
      margin-left: 0;
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -65,10 +65,10 @@

    @include breakpoint(large) {
      background: #fafafa;
-      display: inline-block;
      border-bottom: 0;
      border-top-left-radius: rem-calc(6);
      border-top-right-radius: rem-calc(6);
+      display: inline-block;
      margin-bottom: 0;
      margin-right: calc(#{$line-height} / 4);
      margin-top: 0;
@@ -135,9 +135,9 @@

    .debate-type {
      @include brand-color;
-      text-transform: uppercase;
-      font-weight: 700;
      font-size: $small-font-size;
+      font-weight: 700;
+      text-transform: uppercase;

      .icon-debates {
        margin-left: rem-calc(3);
@@ -151,13 +151,13 @@

  .debate-meta,
  .debate-meta a {
-    font-size: $small-font-size;
    color: #6d6d6d;
+    font-size: $small-font-size;
  }

  .debate-info {
-    padding: rem-calc(16);
    background: #f4f4f4;
+    padding: rem-calc(16);
  }
 }

@@ -235,8 +235,8 @@
  }

  .debate-questions {
-    position: relative;
    list-style: none;
+    position: relative;

    .control {
      background: #fff;
@@ -257,8 +257,8 @@
    }

    .control input {
-      position: absolute;
      opacity: 0;
+      position: absolute;
      z-index: -1;
    }

@@ -272,18 +272,18 @@
    }

    .control-indicator {
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      display: block;
-      width: rem-calc(16);
-      height: rem-calc(16);
-      line-height: rem-calc(16);
-      font-size: 65%;
-      text-align: center;
      border: 2px solid #9c9c9c;
+      display: block;
+      font-size: 65%;
+      height: rem-calc(16);
+      left: 15px;
+      line-height: rem-calc(16);
      pointer-events: none;
+      position: absolute;
+      text-align: center;
+      top: 15px;
      user-select: none;
+      width: rem-calc(16);
    }
  }
 }
@@ -292,25 +292,25 @@
 // ---------------------------

 .draft-panels {
-  position: relative;
  padding: rem-calc(32) 0;
+  position: relative;

  .draft-chooser {

    h3 {
-      vertical-align: top;
      display: inline-block;
      font-weight: 400;
      margin-right: rem-calc(8);
+      vertical-align: top;
    }

    span {
-      margin-left: rem-calc(4);
-      font-style: italic;
-      font-size: $small-font-size;
      color: $text-medium;
-      vertical-align: top;
+      font-size: $small-font-size;
+      font-style: italic;
      line-height: rem-calc(37);
+      margin-left: rem-calc(4);
+      vertical-align: top;
    }

    .select-box {
@@ -321,13 +321,13 @@
      }

      select {
-        margin-bottom: 0;
        display: block;
+        margin-bottom: 0;
      }

      span {
-        vertical-align: inherit;
        font-style: normal;
+        vertical-align: inherit;
      }

      .see-changes {
@@ -394,20 +394,20 @@
    }

    .draft-panel {
-      text-transform: uppercase;
+      background: #f2f2f2;
+      color: #696969;
+      font-size: $small-font-size;
      font-weight: 700;
      padding: rem-calc(8) rem-calc(16);
-      color: #696969;
-      background: #f2f2f2;
-      font-size: $small-font-size;
+      text-transform: uppercase;

      .icon-comments {
        margin-right: rem-calc(4);
      }

      .icon-banner {
-        line-height: 0;
        color: $text-medium;
+        line-height: 0;
        vertical-align: sub;
      }
    }
@@ -415,9 +415,9 @@
    .draft-index {
      ul:first-child {
        font-size: rem-calc(16);
-        text-decoration: underline;
        margin-left: rem-calc(36);
        margin-top: $line-height;
+        text-decoration: underline;
      }

      ul {
@@ -428,30 +428,30 @@
        }

        .open::before {
-          cursor: pointer;
-          position: absolute;
-          margin-left: rem-calc(-20);
-          font-family: "icons";
          content: "\58";
+          cursor: pointer;
+          font-family: "icons";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
+          margin-left: rem-calc(-20);
+          position: absolute;
        }

        .closed::before {
-          cursor: pointer;
-          position: absolute;
-          margin-left: rem-calc(-20);
-          font-family: "icons";
          content: "\5a";
+          cursor: pointer;
+          font-family: "icons";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
+          margin-left: rem-calc(-20);
+          position: absolute;
        }
      }
    }

    .draft-text {
-      position: relative;
      padding: rem-calc(16);
+      position: relative;

      @include breakpoint(medium) {
        margin: 0 auto;
@@ -475,11 +475,11 @@
      }

      .anchor::before {
-        display: none;
-        content: "#";
        color: $text-medium;
-        position: absolute;
+        content: "#";
+        display: none;
        left: 0;
+        position: absolute;

        @include breakpoint(medium) {
          left: 24px;
@@ -530,14 +530,14 @@
        width: rem-calc(50);

        .draft-panel {
-          line-height: 1;
+          color: #696969;
          display: block;
          font-size: $small-font-size;
-          text-transform: uppercase;
          font-weight: 700;
-          color: #696969;
+          line-height: 1;
          padding: 0;
          text-align: center;
+          text-transform: uppercase;

          .icon-banner::before,
          .icon-comments::before {
@@ -547,8 +547,8 @@

          .panel-title {
            display: block;
-            transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+            transform: rotate(-90deg);
          }
        }
      }
@@ -558,11 +558,11 @@
      border-right: 0;

      .show-comments {
-        width: 105%;
        background: #fafafa;
-        padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
        border: 1px solid $border;
        margin-bottom: rem-calc(16);
+        padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
+        width: 105%;

        p {
          margin-bottom: 0;
@@ -590,11 +590,11 @@
      }

      .comment-box {
-        padding: rem-calc(4);
        background: #f9f9f9;
        border: 1px solid $border;
        display: block;
        margin-bottom: rem-calc(32);
+        padding: rem-calc(4);

        .button {
          font-size: $small-font-size;
@@ -606,14 +606,14 @@
        }

        .comment-header {
-          padding-bottom: rem-calc(8);
-          margin-bottom: rem-calc(16);
          border-bottom: 1px solid $border;
+          margin-bottom: rem-calc(16);
+          padding-bottom: rem-calc(8);

          a .icon-expand {
            color: #838383;
-            font-size: $small-font-size;
            float: right;
+            font-size: $small-font-size;
          }
        }

@@ -622,20 +622,20 @@
        }

        .comment-input {
-          padding-bottom: rem-calc(64);
+          border-bottom: 1px solid $border;
          margin-bottom: rem-calc(16);
          margin-top: rem-calc(16);
-          border-bottom: 1px solid $border;
+          padding-bottom: rem-calc(64);

          .comment-advice {
-            border-top: 1px solid #d0d0d0;
-            border-right: 1px solid #d0d0d0;
+            background: #dfdfdf;
            border-left: 1px solid #d0d0d0;
-            width: 100%;
-            padding: rem-calc(8);
+            border-right: 1px solid #d0d0d0;
+            border-top: 1px solid #d0d0d0;
            display: inline-block;
            font-size: $small-font-size;
-            background: #dfdfdf;
+            padding: rem-calc(8);
+            width: 100%;

            .icon-proposals {
              color: #838383;
@@ -648,38 +648,38 @@
          }

          textarea {
-            border-radius: 0;
-            box-shadow: none;
            border-bottom: 1px solid #d0d0d0;
-            border-right: 1px solid #d0d0d0;
            border-left: 1px solid #d0d0d0;
-            width: 100%;
+            border-radius: 0;
+            border-right: 1px solid #d0d0d0;
+            box-shadow: none;
            height: rem-calc(200);
            margin-bottom: rem-calc(8);
+            width: 100%;
          }

          .comment-actions {
            .cancel-comment {
              color: #87a3b9;
-              text-decoration: underline;
-              font-size: $small-font-size;
              display: inline-block;
+              font-size: $small-font-size;
+              text-decoration: underline;
            }
          }
        }

        .comment {
          border-bottom: 1px solid $border;
-          padding-bottom: calc(#{$line-height} / 2);
-          margin-bottom: rem-calc(16);
          font-size: $small-font-size;
+          margin-bottom: rem-calc(16);
+          padding-bottom: calc(#{$line-height} / 2);

          .comment-text {
            margin-bottom: rem-calc(8);

            p {
-              line-height: 1.5;
              font-size: $small-font-size;
+              line-height: 1.5;

              &:last-child {
                margin-bottom: rem-calc(8);
@@ -696,8 +696,8 @@
                display: inline-block;

                &::after {
-                  content: "|";
                  color: #838383;
+                  content: "|";
                }
              }

@@ -708,16 +708,16 @@

            .comment-votes {
              color: #838383;
-              float: right;
              display: inline-block;
+              float: right;

              .comment-votes-number {
-                margin-right: rem-calc(4);
                display: inline-block;
+                margin-right: rem-calc(4);

                &::after {
-                  margin-left: rem-calc(4);
                  content: "|";
+                  margin-left: rem-calc(4);
                }
              }
            }
@@ -741,16 +741,16 @@
      margin-bottom: rem-calc(16);

      &::before {
-        margin-right: rem-calc(4);
        content: "—";
+        margin-right: rem-calc(4);
      }
    }
  }

  .changes-link {
    display: block;
-    margin-left: rem-calc(16);
    font-size: $small-font-size;
+    margin-left: rem-calc(16);

    @include breakpoint(medium) {
      display: inline-block;
@@ -763,11 +763,11 @@
      }

      .icon-external {
-        text-decoration: none;
        color: #999;
        line-height: 0;
-        vertical-align: sub;
        margin-left: rem-calc(8);
+        text-decoration: none;
+        vertical-align: sub;
      }

      &:active,
@@ -786,10 +786,10 @@

  .comment-section {
    background: #fafafa;
-    padding: rem-calc(16);
    border: 1px solid #dee0e3;
-    margin-top: rem-calc(4);
    margin-bottom: rem-calc(16);
+    margin-top: rem-calc(4);
+    padding: rem-calc(16);
  }

  .comment {
@@ -801,9 +801,9 @@
      }

      .icon-expand {
-        text-decoration: none;
        color: #999;
        line-height: 0;
+        text-decoration: none;
      }

      .icon-expand {
@@ -830,10 +830,10 @@

  .comment-section {
    background: #fafafa;
-    padding: rem-calc(16);
    border: 1px solid #dee0e3;
-    margin-top: rem-calc(4);
    margin-bottom: rem-calc(16);
+    margin-top: rem-calc(4);
+    padding: rem-calc(16);
  }

  .comment {
@@ -845,9 +845,9 @@

      .icon-expand,
      .icon-comments {
-        text-decoration: none;
        color: #999;
        line-height: 0;
+        text-decoration: none;
      }

      .icon-expand {
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -95,8 +95,8 @@
    display: block;
    height: 1.75em;
    position: absolute;
-    transform: translateY(-50%);
    top: 50%;
+    transform: translateY(-50%);
    width: 1.75em;
  }

--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -47,20 +47,20 @@

      &::after {
        background: $body-background;
-        content: "";
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
+        content: "";
        display: block;
+        height: 100%;
        position: absolute;
        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
        top: 0;
-        height: 100%;
        width: $polygon-size;
      }
    }

    &::before {
-      top: -$border-width;
      height: calc(100% + #{$border-width * 2});
+      top: -$border-width;
    }

    h1 {
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -100,8 +100,8 @@
    content: "";
    height: 100%;
    position: absolute;
-    top: 0;
    right: 100%;
+    top: 0;
    width: 100vw;
  }
 }
--- a/app/assets/stylesheets/mixins/orbit_bullets.scss
+++ b/app/assets/stylesheets/mixins/orbit_bullets.scss
@@ -1,17 +1,17 @@
@mixin orbit-bullets {
  @include disable-mouse-outline;
-  position: relative;
-  margin-top: $orbit-bullet-margin-top;
  margin-bottom: $orbit-bullet-margin-bottom;
+  margin-top: $orbit-bullet-margin-top;
+  position: relative;
  text-align: center;

  button {
-    width: $orbit-bullet-diameter;
-    height: $orbit-bullet-diameter;
-    margin: $orbit-bullet-margin;
+    background-color: $orbit-bullet-background;

    border-radius: 50%;
-    background-color: $orbit-bullet-background;
+    height: $orbit-bullet-diameter;
+    margin: $orbit-bullet-margin;
+    width: $orbit-bullet-diameter;

    &:hover {
      background-color: $orbit-bullet-background-active;
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -1,8 +1,8 @@
@mixin direct-uploads {

  .cached-image {
-    max-width: rem-calc(150);
    max-height: rem-calc(150);
+    max-width: rem-calc(150);
  }

  .progress-bar-placeholder {
@@ -39,13 +39,13 @@
  }

  .progress-bar {
-    width: 100%;
    background-color: $light-gray;
+    width: 100%;
  }

  .file-name {
-    padding-left: 0;
    margin-top: 0;
+    padding-left: 0;

    &:empty {
      display: none;
@@ -59,8 +59,8 @@

  .loading-bar {
    height: 5px;
-    width: 0;
    transition: width 500ms ease-out;
+    width: 0;

    &.uploading {
      background-color: $dark-gray;
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -18,8 +18,8 @@

      color: #ecf00b;
      font-size: $circle-icon-size;
-      position: absolute;
      left: $notification-icon-size - rem-calc(5);
+      position: absolute;
      top: calc(#{$menu-link-top-padding} - #{$circle-icon-size} / 2);

      @include breakpoint(medium) {
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -268,10 +268,10 @@
  blockquote {
    clear: both;
    color: #4c4c4c;
-    margin-top: rem-calc(12);
-    padding-top: 0;
    font-size: rem-calc(15);
    line-height: rem-calc(30);
+    margin-top: rem-calc(12);
+    padding-top: 0;
  }

  .video-link {
@@ -612,8 +612,8 @@
    }

    .total-votes {
-      font-weight: bold;
      float: right;
+      font-weight: bold;
      line-height: $line-height * 2;

      @include breakpoint(medium) {
@@ -691,8 +691,8 @@
 .budget-investment-show {

  figure {
-    margin: rem-calc(10) 0 0;
    display: inline-block;
+    margin: rem-calc(10) 0 0;

    figcaption {
      font-size: $small-font-size;
@@ -752,8 +752,8 @@
  @include full-width-background;
  @include full-width-border(bottom, 1px solid #eee);
  background: #fafafa;
-  margin-top: -$line-height;
  margin-bottom: $line-height;
+  margin-top: -$line-height;
  padding-bottom: calc(#{$line-height} / 2);
  padding-top: $line-height;

@@ -959,10 +959,10 @@
    .supported {
      background: none;
      border: 0;
+      font-size: $small-font-size;
      margin-bottom: 0;
      margin-top: 0;
      padding: 0;
-      font-size: $small-font-size;
    }
  }

@@ -1010,9 +1010,9 @@
    &::after {
      border-bottom: 2px solid #fff;
      content: "";
+      display: block;
      margin: 0 auto;
      padding-top: calc(#{$line-height} / 2);
-      display: block;
      width: 20%;
    }
  }
@@ -1300,8 +1300,8 @@

    img {
      height: $line-height * 9;
-      min-width: 100%;
      max-width: none;
+      min-width: 100%;
      transition-duration: 0.3s;
      transition-property: transform;
    }
@@ -1349,9 +1349,9 @@
 .successful .panel {

  .icon-successful {
+    border-bottom: 60px solid transparent;
    border-right: 60px solid #ffd200;
    border-top: 0;
-    border-bottom: 60px solid transparent;
    height: 0;
    position: absolute;
    right: 0;
@@ -1490,18 +1490,18 @@
 .zoom-link {
  @extend %body-colors;
  border-radius: rem-calc(48);
+  cursor: pointer;
  font-size: rem-calc(24);
  font-weight: bold;
  height: rem-calc(48);
  line-height: rem-calc(48);
-  right: 12px;
  padding-top: rem-calc(4);
  position: absolute;
+  right: 12px;
  text-align: center;
  top: 24px;
  width: rem-calc(48);
  z-index: 9;
-  cursor: pointer;

  &:hover {
    @include brand-secondary-background;
@@ -1564,8 +1564,8 @@
      &::after {
        background: #92ba48;
        border-radius: rem-calc(20);
-        content: "\6c";
        color: #fff;
+        content: "\6c";
        font-family: "icons" !important;
        font-size: rem-calc(12);
        padding: calc(#{$line-height} / 4);
--- a/app/assets/stylesheets/polls/poll.scss
+++ b/app/assets/stylesheets/polls/poll.scss
@@ -13,8 +13,8 @@
  }

  .icon-poll-answer {
-    border-top: 0;
    border-bottom: 60px solid transparent;
+    border-top: 0;
    height: 0;
    position: absolute;
    right: 0;
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -7,8 +7,8 @@
      color: $sdg-text;
      display: flex;
      margin: calc(#{$line-height} / 2) 0;
-      text-shadow: 0 0 1px $black;
      min-width: fit-content;
+      text-shadow: 0 0 1px $black;

      &::after {
        align-self: stretch;
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -22,8 +22,8 @@
    }

    legend {
-      font-weight: normal;
      font-style: italic;
+      font-weight: normal;
    }
  }

@@ -44,9 +44,9 @@
  }

  .help-text {
-    font-weight: normal;
-    font-style: italic;
    font-size: $base-font-size;
+    font-style: italic;
+    font-weight: normal;
  }

  .input-section {
--- a/app/assets/stylesheets/shared/advanced_search.scss
+++ b/app/assets/stylesheets/shared/advanced_search.scss
@@ -30,8 +30,8 @@
  > [aria-expanded] {
    @include xy-gutters;
    @include link;
-    margin-top: $line-height;
    margin-bottom: $line-height;
+    margin-top: $line-height;
    max-width: max-content;

    @include breakpoint(medium) {
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -23,8 +23,8 @@
  }

  .section-title {
-    font-size: rem-calc(24);
    border-bottom: 1px solid $border;
+    font-size: rem-calc(24);
  }

  .stats-group {
@@ -134,8 +134,8 @@
    }

    th {
-      font-weight: bold;
      font-size: rem-calc(21);
+      font-weight: bold;

      &.gender {
        opacity: 0;
@@ -157,8 +157,8 @@
    td {

      &.gender {
-        font-weight: bold;
        font-size: rem-calc(21);
+        font-weight: bold;
        text-align: left;
      }

--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -15,8 +15,8 @@
  .feed-proposals,
  .feed-debates {
    display: flex;
-    margin-top: $line-height;
    flex-direction: column;
+    margin-top: $line-height;

    .feed-content {
      flex-grow: 1;