decidim-decidim_awesome 0.10.2 → 0.10.3

data/app/packs/stylesheets/decidim/decidim_awesome/admin/constraints.scss

@@ -1,49 +1,93 @@
 .constraints-editor {
   background: #f6f6f6;
   padding: 1rem;
-  margin: -.5rem 0 2rem;
+  margin: 0.5rem 0 2rem;
   border-radius: 5px;
 
-  .constraints-list {
-    padding: 0;
-    // margin:0 0 1em 0 ;
-    li {
-      margin: 0 1em 0 0;
-      padding: 0;
+  h5 {
+    font-weight: 600;
+    color: rgb(62 76 92 / var(--tw-text-opacity));
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  .label {
+    font-weight: normal;
+    font-size: 0.8rem;
+    padding: 0.3rem 0.5rem;
+
+    &.participatory_space_manifest {
+      background-color: #f7b230;
+      color: #000;
     }
 
-    .label {
-      &.participatory_space_manifest {
-        background-color: #f7b230;
-      }
+    &.participatory_space_slug {
+      background-color: #19b380;
+      color: #fff;
+    }
 
-      &.participatory_space_slug {
-        background-color: #19b380;
-      }
+    &.component_manifest {
+      background-color: #b31919;
+      color: #fff;
+    }
 
-      &.component_manifest {
-        background-color: #b31919;
-      }
+    &.component_id {
+      background-color: #ee449c;
+      color: #fff;
+    }
 
-      &.component_id {
-        background-color: #ee449c;
+    &.constraint {
+      &-none {
+        background-color: #ff3000;
+        color: #fff;
       }
+    }
+  }
 
-      &.constraint {
-        &-none {
-          background-color: #ff3000;
-        }
-      }
+  .constraints-list {
+    margin: 16px 20px;
+    padding: 0 20px 0 0;
+    list-style-type: disc;
+
+    li {
+      margin: 0 1em 0 0;
+      padding: 0;
     }
 
-    a {
+    button.edit-condition,
+    a.delete-condition {
       margin-left: 1rem;
     }
 
+    button.edit-condition {
+      color: $secondary-color;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
     &.inactive {
       .label:not(.constraint-none) {
         filter: saturate(10%);
       }
     }
+
+    &.no-items {
+      margin: 0;
+      padding-bottom: 14px;
+      list-style-type: none;
+    }
+  }
+
+  .flash[hidden] {
+    display: none;
+  }
+
+  .add-condition .icon {
+    width: 11px;
+    height: 11px;
+    margin-right: 0.3rem;
   }
 }

data/app/packs/stylesheets/decidim/decidim_awesome/admin/custom_fields.scss

@@ -9,44 +9,58 @@
   &:first-child {
     margin-left: 0;
   }
+
   $colors: (
-    "primary": #{$primary},
-    "secondary": #{$secondary},
-    "success": #{$success},
-    "warning": #{$warning},
-    "alert": #{$alert},
-    "highlight": #{$highlight},
-    "highlight_alternative": #{$highlight_alternative}
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "warning": $warning,
+    "alert": $alert,
+    "highlight": $highlight,
+    "highlight_alternative": $highlight_alternative,
   );
 
   @each $name, $color in $colors {
     &.#{$name} {
-      background-color: #{$color};
+      background-color: $color;
     }
   }
 }
 
-.tabs-content {
-  .proposal_custom_field {
-    display: none;
-  }
-}
-
 .proposal_custom_fields {
   &_editor {
     background-color: #e0e0e0;
-    padding: .5em .5em 1em;
+    padding: 0.5em 0.5em 1em;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 
+    ul.frmb,
+    .form-wrap.form-builder .frmb li.form-field,
+    .form-wrap.form-builder .stage-wrap.empty {
+      background-color: $body-background;
+      margin-right: 0.5rem;
+
+      .field-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .field-actions .btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
     label {
       display: inline-block;
       max-width: 100%;
-      font-weight: 600 !important;
+      font-weight: $global-weight-bold !important;
     }
 
     li[type] {
-      display: inherit;
+      display: block;
       width: 100%;
       height: inherit;
       margin: inherit;
@@ -72,22 +86,15 @@
       color: #555;
       background-color: #fff;
       border: 1px solid #ccc;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
       margin: 0;
       padding: 6px 12px;
     }
   }
-
-  &_container {
-    .constraints-editor {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
 }
 
-// Custom fields tunning
+// Custom fields tuning
 .rendered-form .form-control.ql-container {
   height: auto !important;
 }

data/app/packs/stylesheets/decidim/decidim_awesome/admin/user_picker.scss

@@ -21,9 +21,9 @@
 
     .is-admin {
       &::before {
-        content: '⛔';
+        content: "⛔";
         display: inline-block;
-        margin-right: .3em;
+        margin-right: 0.3em;
       }
 
       text-decoration: line-through;

data/app/packs/stylesheets/decidim/decidim_awesome/awesome_admin.scss

@@ -8,13 +8,13 @@
 
 .pokecode-credits {
   float: right;
-  margin: 0 1em .5em 0;
+  margin: 0 1em 0.5em 0;
 
   // position: absolute;
   // bottom: 0;
   // right: 0;
   // margin: 1em;
-  font-size: .8em;
+  font-size: 0.8em;
 }
 
 .decidim_awesome {
@@ -69,6 +69,6 @@ tbody tr.menu_hack-addition {
 
 .secondary-nav {
   li .icon {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
 }

data/app/packs/stylesheets/decidim/decidim_awesome/awesome_admin_global.scss

@@ -0,0 +1,28 @@
+@import "stylesheets/decidim/decidim_awesome/shared/spinner";
+@import "stylesheets/decidim/decidim_awesome/admin/intergram_fixes";
+@import "stylesheets/decidim/decidim_awesome/forms/custom_fields";
+
+.component__show {
+  &_private_data {
+    &-grid {
+      background-color: $body-background;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+      margin: 1rem 0;
+      padding: 0.5rem;
+
+      .date_info {
+        font-style: italic;
+        color: $medium-gray;
+        font-size: 0.875rem;
+        margin-top: 1rem;
+
+        a {
+          font-style: normal;
+          color: $secondary-color;
+        }
+      }
+    }
+  }
+}

data/app/packs/stylesheets/decidim/decidim_awesome/awesome_application.scss

@@ -2,16 +2,17 @@
 @import "stylesheets/decidim/decidim_awesome/editors/markdown_editor";
 @import "stylesheets/decidim/decidim_awesome/editors/quill_editor";
 @import "stylesheets/decidim/decidim_awesome/forms/autosave";
+@import "stylesheets/decidim/decidim_awesome/forms/custom_fields";
 @import "stylesheets/decidim/decidim_awesome/voting/voting_cards";
 
 .decidim_awesome-custom_fields {
   dd {
-    >div:last-child {
+    > div:last-child {
       margin-bottom: 1rem;
     }
 
     &[name="textarea"] {
-      >div > p {
+      > div > p {
         margin-top: 1rem;
         margin-bottom: 0;
       }

data/app/packs/stylesheets/decidim/decidim_awesome/awesome_map/map.scss

@@ -45,7 +45,7 @@
 
   .leaflet-control-layers-list {
     hr {
-      margin: .5em 0;
+      margin: 0.5em 0;
     }
 
     b {
@@ -55,13 +55,13 @@
 
     label {
       line-height: 1;
-      font-size: .8rem;
-      margin: 0 .5em .5em;
+      font-size: 0.8rem;
+      margin: 0 0.5em 0.5em;
 
       i {
         display: inline-block;
-        width: .8rem;
-        height: .8rem;
+        width: 0.8rem;
+        height: 0.8rem;
         background-color: var(--primary);
       }
     }
@@ -72,7 +72,7 @@
   }
 
   .map-legend {
-    background: rgba(255, 255, 255, .8);
+    background: rgba(255, 255, 255, 0.8);
     padding: 1em;
     border: 2px solid #bbb;
     border-radius: 4px;
@@ -83,7 +83,7 @@
     cursor: pointer;
 
     &::after {
-      content: '';
+      content: "";
       width: 0;
       height: 0;
       border-left: 5px solid transparent;
@@ -112,10 +112,10 @@
       display: none;
 
       i {
-        margin-left: .5em;
+        margin-left: 0.5em;
         display: inline-block;
-        width: .8rem;
-        height: .8rem;
+        width: 0.8rem;
+        height: 0.8rem;
         border-radius: 50%;
         background-color: var(-- primary);
       }
@@ -144,11 +144,11 @@
       line-height: 1;
       background-color: #f0f0f0;
       border-radius: 5px;
-      margin: .5rem;
-      padding: .5rem;
+      margin: 0.5rem;
+      padding: 0.5rem;
 
       span {
-        margin: 0 .5rem 2px 0;
+        margin: 0 0.5rem 2px 0;
       }
 
       input {
@@ -157,8 +157,8 @@
     }
 
     .awesome_map-toggle_all_tags {
-      margin: .5rem 1rem;
-      font-size: .875rem;
+      margin: 0.5rem 1rem;
+      font-size: 0.875rem;
     }
 
     .hashtags-container,

data/app/packs/stylesheets/decidim/decidim_awesome/editors/quill_editor.scss

@@ -24,7 +24,7 @@
 }
 
 .editor.hashtags__container {
-  >p.help-text {
+  > p.help-text {
     margin-top: -1rem;
     margin-bottom: 1.5rem;
   }
@@ -32,8 +32,8 @@
 
 // For quill editors in custom fields
 .form-control[type="richtext"] {
-  >p.help-text {
-    margin-top: .2rem !important;
+  > p.help-text {
+    margin-top: 0.2rem !important;
   }
 
   .ql-snow.ql-toolbar {

data/app/packs/stylesheets/decidim/decidim_awesome/forms/autosave.scss

@@ -1,10 +1,10 @@
 .awesome_autosave-notice {
-  background-color: rgba(var(--success-rgb), .8);
+  background-color: rgba(var(--success-rgb), 0.8);
   position: fixed;
   top: 0;
   right: 0;
   margin: 2em;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   border-radius: 4px;
   border: 1px solid var(--success);
   font-weight: 600;
@@ -12,6 +12,6 @@
   z-index: 1000;
 
   &.error {
-    background-color: rgba(var(--alert-rgb), .8);
+    background-color: rgba(var(--alert-rgb), 0.8);
   }
 }

data/app/packs/stylesheets/decidim/decidim_awesome/forms/custom_fields.scss

@@ -0,0 +1,187 @@
+.decidim_awesome-custom_fields {
+  &.private_body {
+    padding: 1.5rem 1rem;
+    margin-top: 2rem;
+    border: 1px solid $medium-gray;
+    border-radius: $global-radius;
+    background-color: $medium-gray;
+    color: $black;
+    font-weight: $global-weight-normal;
+  }
+
+  .private_body-disclosure {
+    margin: -1rem 0 2rem;
+    font-size: 1.125rem;
+    font-style: italic;
+
+    svg {
+      display: inline-block;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-right: 0.5rem;
+      vertical-align: bottom;
+    }
+  }
+
+  dt {
+    font-family: $body-font-family;
+    font-weight: $global-weight-bold;
+  }
+
+  dd {
+    padding: 0;
+  }
+
+  .proposal_custom_field {
+    h1 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 2.5rem;
+      margin-top: 1rem;
+    }
+
+    h2 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 2rem;
+      margin-top: 1rem;
+    }
+
+    h3 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 1.75rem;
+      margin-top: 1rem;
+    }
+
+    h4 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 1.5rem;
+      margin-top: 1rem;
+    }
+
+    h5 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 1.125rem;
+      margin-top: 1rem;
+    }
+
+    h6 {
+      font-family: $body-font-family;
+      font-weight: $global-weight-bold;
+      font-size: 1rem;
+      margin-top: 1rem;
+    }
+
+    p {
+      margin-top: 1rem;
+    }
+
+    label {
+      font-size: 0.875rem;
+      font-weight: $global-weight-bold;
+
+      .tooltip-element {
+        margin: 0;
+        padding: 0;
+        visibility: hidden;
+        display: block;
+
+        &::before {
+          visibility: visible;
+          font-size: 0.75rem;
+          color: $medium-gray;
+          font-weight: $global-weight-normal;
+          font-style: italic;
+          content: attr(tooltip);
+        }
+      }
+    }
+
+    .form-group:not(:first-of-type) {
+      margin-top: 1.5rem;
+    }
+
+    .form-control {
+      width: 100%;
+      display: block;
+
+      &:not(.reset-defaults) {
+        display: inline-block;
+        padding: 0.5rem 1rem;
+        border: 1px solid $medium-gray;
+        outline: 1px solid transparent;
+        border-radius: $global-radius;
+        background-color: $body-background;
+        color: $black;
+        font-weight: $global-weight-normal;
+
+        &:focus {
+          outline: 2px solid $secondary-color;
+        }
+
+        &:disabled {
+          background-color: $light-gray;
+          color: $medium-gray;
+          cursor: not-allowed;
+        }
+
+        &.sm {
+          padding: 0.25rem;
+          font-size: 0.875rem;
+        }
+
+        &.sm-icon {
+          padding: 0.25rem 0.25rem 0.25rem 1.5rem;
+          font-size: 0.875rem;
+        }
+
+        &.is-invalid-input:not(:focus) {
+          outline: 2px solid $alert-color;
+        }
+      }
+
+      &:not(select) {
+        &:read-only {
+          background-color: $light-gray;
+          border: 0;
+          color: $medium-gray;
+        }
+      }
+    }
+
+    .formbuilder-checkbox {
+      > label {
+        font-weight: $global-weight-normal;
+      }
+    }
+
+    .formbuilder-autocomplete {
+      position: relative;
+
+      .formbuilder-autocomplete-list {
+        z-index: 20;
+        max-height: 13rem;
+        outline: 1px solid transparent;
+        border-radius: $global-radius;
+        border: 1px solid $medium-gray;
+        color: $black;
+        font-weight: $global-weight-normal;
+        display: none;
+
+        li {
+          cursor: pointer;
+          border-radius: $global-radius;
+          padding: 0.5rem 1rem;
+          background-color: $body-background;
+
+          &.active-option {
+            background-color: $light-gray;
+          }
+        }
+      }
+    }
+  }
+}

data/app/packs/stylesheets/decidim/decidim_awesome/shared/spinner.scss

@@ -0,0 +1,47 @@
+// Loading spinner does not ocuppy all the width and height as the new spinner-container
+.loading-spinner {
+  position: relative;
+  cursor: wait;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    border: 4px solid;
+    border-color: transparent transparent $secondary-color transparent;
+    z-index: 20;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.alert {
+    &::before {
+      border-color: transparent transparent $alert-color transparent;
+    }
+  }
+
+  &.warning {
+    &::before {
+      border-color: transparent transparent $warning-color transparent;
+    }
+  }
+
+  &.primary {
+    &::before {
+      border-color: transparent transparent $primary-color transparent;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}