RubyGems - alchemy_cms - Versions diffs - 7.4.10 → 8.0.0.b - Mend

alchemy_cms 7.4.10 → 8.0.0.b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of alchemy_cms might be problematic. Click here for more details.

Files changed (425) hide show

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/errors.scss RENAMED Viewed

@@ -5,7 +5,7 @@
   margin-bottom: var(--spacing-2);
   border: 1px solid #d08f91;
   color: #690001;
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
   h2 {
     font-size: 1.2em;
@@ -22,10 +22,10 @@ div.errors {
   padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-7);
   border-width: 1px;
   border-style: solid;
-  border-radius: $default-border-radius;
-  border-color: $error_border_color;
-  color: $error_text_color;
-  background-color: $error_background_color;
+  border-radius: var(--border-radius_medium);
+  border-color: var(--notice-error-border-color);
+  color: var(--notice-error-text-color);
+  background-color: var(--notice-error-background-color);
   display: none;
   ul {

data/app/stylesheets/alchemy/admin/filters.scss ADDED Viewed

@@ -0,0 +1,57 @@
+div#filter_bar,
+div#sorting_select {
+  margin-top: var(--spacing-2);
+}
+.filter-input {
+  margin: var(--spacing-2) 0;
+  label:not(:has(input[type="checkbox"])) {
+    display: block;
+    font-weight: bold;
+    font-size: var(--font-size_medium);
+    margin-bottom: var(--spacing-2);
+  }
+  label:has(input[type="checkbox"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    cursor: pointer;
+  }
+  &:has(select):not(:last-child) {
+    margin-bottom: var(--spacing-4);
+  }
+}
+.applied-filters {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: var(--spacing-2) 0 var(--spacing-4) 0;
+}
+.applied-filter {
+  display: inline-flex;
+  justify-content: space-between;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
+  border-radius: var(--border-radius_medium);
+  border: 1px solid var(--border-color);
+  background-color: var(--tag-active-background-color);
+  color: var(--tag-active-text-color);
+  white-space: nowrap;
+  font-weight: normal;
+  .applied-filter-label {
+    font-weight: var(--font-weight_bold);
+  }
+  .dismiss-filter {
+    display: inline-flex;
+    justify-content: center;
+    width: var(--spacing-4);
+    color: var(--tag-active-text-color);
+  }
+}

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/flatpickr.scss RENAMED Viewed

@@ -1,5 +1,5 @@
 .flatpickr-calendar {
-  background: transparent;
+  background: var(--datepicker-bg-color);
   opacity: 0;
   display: none;
   text-align: center;
@@ -8,8 +8,8 @@
   -webkit-animation: none;
   animation: none;
   direction: ltr;
-  border: 0;
-  font-size: $default-font-size;
+  border: 1px solid var(--datepicker-border-color);
+  font-size: var(--datepicker-font-size);
   line-height: 24px;
   border-radius: 5px;
   position: absolute;
@@ -18,19 +18,7 @@
   box-sizing: border-box;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
-  background: var(--color-white);
-  -webkit-box-shadow:
-    1px 0 0 var(--color-grey_light),
-    -1px 0 0 var(--color-grey_light),
-    0 1px 0 var(--color-grey_light),
-    0 -1px 0 var(--color-grey_light),
-    0 3px 13px rgba(0, 0, 0, 0.08);
-  box-shadow:
-    1px 0 0 var(--color-grey_light),
-    -1px 0 0 var(--color-grey_light),
-    0 1px 0 var(--color-grey_light),
-    0 -1px 0 var(--color-grey_light),
-    0 3px 13px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--datepicker-box-shadow);
 }
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
@@ -71,11 +59,11 @@
   .dayContainer:nth-child(n + 2)
   .flatpickr-day.inRange:nth-child(7n + 1) {
   -webkit-box-shadow:
-    -2px 0 0 var(--color-grey_light),
-    5px 0 0 var(--color-grey_light);
+    -2px 0 0 var(--datepicker-selected-bg-color),
+    5px 0 0 var(--datepicker-selected-bg-color);
   box-shadow:
-    -2px 0 0 var(--color-grey_light),
-    5px 0 0 var(--color-grey_light);
+    -2px 0 0 var(--datepicker-selected-bg-color),
+    5px 0 0 var(--datepicker-selected-bg-color);
 }
 .flatpickr-calendar .hasWeeks .dayContainer,
 .flatpickr-calendar .hasTime .dayContainer {
@@ -88,7 +76,7 @@
 }
 .flatpickr-calendar.hasTime .flatpickr-time {
   height: 40px;
-  border-top: 1px solid var(--color-grey_light);
+  border-top: var(--border-default);
 }
 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
   height: auto;
@@ -129,20 +117,20 @@
   bottom: 100%;
 }
 .flatpickr-calendar.arrowTop:before {
-  border-bottom-color: var(--color-grey_light);
+  border-bottom-color: var(--datepicker-border-color);
 }
 .flatpickr-calendar.arrowTop:after {
-  border-bottom-color: var(--color-white);
+  border-bottom-color: var(--datepicker-bg-color);
 }
 .flatpickr-calendar.arrowBottom:before,
 .flatpickr-calendar.arrowBottom:after {
   top: 100%;
 }
 .flatpickr-calendar.arrowBottom:before {
-  border-top-color: var(--color-grey_light);
+  border-top-color: var(--datepicker-border-color);
 }
 .flatpickr-calendar.arrowBottom:after {
-  border-top-color: var(--color-white);
+  border-top-color: var(--datepicker-bg-color);
 }
 .flatpickr-calendar:focus {
   outline: 0;
@@ -159,8 +147,8 @@
 }
 .flatpickr-months .flatpickr-month {
   background: transparent;
-  color: rgba(0, 0, 0, 0.9);
-  fill: rgba(0, 0, 0, 0.9);
+  color: var(--datepicker-text-color);
+  fill: var(--datepicker-text-color);
   height: 34px;
   line-height: 1;
   text-align: center;
@@ -184,8 +172,8 @@
   height: 34px;
   padding: 10px;
   z-index: 3;
-  color: rgba(0, 0, 0, 0.9);
-  fill: rgba(0, 0, 0, 0.9);
+  color: var(--datepicker-text-color);
+  fill: var(--datepicker-text-color);
 }
 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
@@ -217,11 +205,11 @@
       /*rtl:end:ignore*/
 .flatpickr-months .flatpickr-prev-month:hover,
 .flatpickr-months .flatpickr-next-month:hover {
-  color: var(--color-grey_dark);
+  color: var(--datepicker-text-color);
 }
 .flatpickr-months .flatpickr-prev-month:hover svg,
 .flatpickr-months .flatpickr-next-month:hover svg {
-  fill: var(--color-orange_dark);
+  fill: var(--datepicker-text-hover-color);
 }
 .flatpickr-months .flatpickr-prev-month svg,
 .flatpickr-months .flatpickr-next-month svg {
@@ -262,7 +250,7 @@
   line-height: 50%;
   opacity: 0;
   cursor: pointer;
-  border: $default-border;
+  border: var(--border-default);
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -284,7 +272,7 @@
 .numInputWrapper span.arrowUp:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-bottom: 4px solid $default-border-color;
+  border-bottom: 4px solid var(--icon-color);
   top: 26%;
 }
 .numInputWrapper span.arrowDown {
@@ -293,7 +281,7 @@
 .numInputWrapper span.arrowDown:after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid $default-border-color;
+  border-top: 4px solid var(--icon-color);
   top: 40%;
 }
 .numInputWrapper span svg {
@@ -341,12 +329,6 @@
   width: 7ch\0;
   display: inline-block;
 }
-.flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: rgba(0, 0, 0, 0.9);
-}
-.flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: rgba(0, 0, 0, 0.9);
-}
 .flatpickr-current-month input.cur-year {
   background: transparent;
   -webkit-box-sizing: border-box;
@@ -444,7 +426,7 @@ span.flatpickr-weekday {
   cursor: default;
   font-size: 90%;
   background: transparent;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--datepicker-weekday-text-color);
   line-height: 1;
   margin: 0;
   text-align: center;
@@ -500,8 +482,8 @@ span.flatpickr-weekday {
   opacity: 1;
 }
 .dayContainer + .dayContainer {
-  -webkit-box-shadow: -1px 0 0 var(--color-grey_light);
-  box-shadow: -1px 0 0 var(--color-grey_light);
+  -webkit-box-shadow: -1px 0 0 var(--datepicker-selected-bg-color);
+  box-shadow: -1px 0 0 var(--datepicker-selected-bg-color);
 }
 .flatpickr-day {
   background: none;
@@ -509,7 +491,7 @@ span.flatpickr-weekday {
   border-radius: 150px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  color: #393939;
+  color: var(--datepicker-text-color);
   cursor: pointer;
   font-weight: 400;
   width: 14.2857143%;
@@ -542,17 +524,17 @@ span.flatpickr-weekday {
 .flatpickr-day.nextMonthDay:focus {
   cursor: pointer;
   outline: 0;
-  background: var(--color-grey_light);
-  border-color: var(--color-grey_light);
+  background: var(--datepicker-day-hover-bg);
+  border-color: var(--datepicker-day-hover-bg);
 }
 .flatpickr-day.today {
-  border-color: var(--color-grey_dark);
+  border-color: var(--datepicker-today-border-color);
 }
 .flatpickr-day.today:hover,
 .flatpickr-day.today:focus {
-  border-color: var(--color-grey_dark);
-  background: var(--color-grey_dark);
-  color: var(--color-white);
+  border-color: var(--datepicker-today-hover-bg-color);
+  background: var(--datepicker-today-hover-bg-color);
+  color: var(--datepicker-today-hover-text-color);
 }
 .flatpickr-day.selected,
 .flatpickr-day.startRange,
@@ -572,11 +554,11 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-  background: var(--color-blue_medium);
+  background: var(--datepicker-selected-bg-color);
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: var(--color-white);
-  border-color: var(--color-blue_medium);
+  color: var(--datepicker-selected-text-color);
+  border-color: var(--datepicker-selected-bg-color);
 }
 .flatpickr-day.selected.startRange,
 .flatpickr-day.startRange.startRange,
@@ -591,8 +573,8 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-  -webkit-box-shadow: -10px 0 0 var(--color-blue_medium);
-  box-shadow: -10px 0 0 var(--color-blue_medium);
+  -webkit-box-shadow: -10px 0 0 var(--datepicker-selected-bg-color);
+  box-shadow: -10px 0 0 var(--datepicker-selected-bg-color);
 }
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
@@ -602,11 +584,11 @@ span.flatpickr-weekday {
 .flatpickr-day.inRange {
   border-radius: 0;
   -webkit-box-shadow:
-    -5px 0 0 var(--color-grey_light),
-    5px 0 0 var(--color-grey_light);
+    -5px 0 0 var(--datepicker-day-hover-bg),
+    5px 0 0 var(--datepicker-day-hover-bg);
   box-shadow:
-    -5px 0 0 var(--color-grey_light),
-    5px 0 0 var(--color-grey_light);
+    -5px 0 0 var(--datepicker-day-hover-bg),
+    5px 0 0 var(--datepicker-day-hover-bg);
 }
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover,
@@ -615,7 +597,7 @@ span.flatpickr-weekday {
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-  color: rgba(57, 57, 57, 0.3);
+  color: var(--text-color-muted);
   background: transparent;
   border-color: transparent;
   cursor: default;
@@ -628,11 +610,11 @@ span.flatpickr-weekday {
 .flatpickr-day.week.selected {
   border-radius: 0;
   -webkit-box-shadow:
-    -5px 0 0 var(--color-blue_medium),
-    5px 0 0 var(--color-blue_medium);
+    -5px 0 0 var(--datepicker-selected-bg-color),
+    5px 0 0 var(--datepicker-selected-bg-color);
   box-shadow:
-    -5px 0 0 var(--color-blue_medium),
-    5px 0 0 var(--color-blue_medium);
+    -5px 0 0 var(--datepicker-selected-bg-color),
+    5px 0 0 var(--datepicker-selected-bg-color);
 }
 .flatpickr-day.hidden {
   visibility: hidden;
@@ -645,8 +627,8 @@ span.flatpickr-weekday {
 }
 .flatpickr-weekwrapper .flatpickr-weeks {
   padding: 0 12px;
-  -webkit-box-shadow: 1px 0 0 var(--color-grey_light);
-  box-shadow: 1px 0 0 var(--color-grey_light);
+  -webkit-box-shadow: 1px 0 0 var(--datepicker-selected-bg-color);
+  box-shadow: 1px 0 0 var(--datepicker-selected-bg-color);
 }
 .flatpickr-weekwrapper .flatpickr-weekday {
   float: none;
@@ -708,12 +690,6 @@ span.flatpickr-weekday {
   height: 40px;
   float: left;
 }
-.flatpickr-time .numInputWrapper span.arrowUp:after {
-  border-bottom-color: #393939;
-}
-.flatpickr-time .numInputWrapper span.arrowDown:after {
-  border-top-color: #393939;
-}
 .flatpickr-time.hasSeconds .numInputWrapper {
   width: 26%;
 }
@@ -725,20 +701,21 @@ span.flatpickr-weekday {
   -webkit-box-shadow: none;
   box-shadow: none;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--border-radius_medium);
   text-align: center;
   margin: 0;
   padding: 0;
   height: inherit;
   line-height: inherit;
-  color: $form-field-text-color;
-  font-size: 14px;
+  color: var(--form-field-text-color);
+  font-size: var(--form-field-font-size);
   position: relative;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
+  top: -1px;
 }
 .flatpickr-time input.flatpickr-hour {
   font-weight: bold;
@@ -778,7 +755,8 @@ span.flatpickr-weekday {
 .flatpickr-time .flatpickr-am-pm:hover,
 .flatpickr-time input:focus,
 .flatpickr-time .flatpickr-am-pm:focus {
-  background: var(--color-grey_very_light);
+  background: var(--form-field-background-color);
+  box-shadow: inset 0 0 1px 2px var(--focus-color) !important;
 }
 .flatpickr-input[readonly] {
   cursor: pointer;

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/form_fields.scss RENAMED Viewed

@@ -1,3 +1,6 @@
+@use "../extends";
+@use "../mixins";
 textarea,
 input[type="url"],
 input[type="number"],
@@ -8,20 +11,16 @@ input[type="search"],
 .thin_border,
 .input_field {
   @extend %default-input-style;
-  &.dirty {
-    background-color: #fff8df;
-  }
 }
 input[type="checkbox"] {
-  transition: $transition-duration;
+  transition: var(--transition-duration);
   &:focus {
-    @include default-focus-style(
+    @include mixins.default-focus-style(
       $box-shadow: (
-        inset 0 0 0 1px $focus-color,
-        0 0 0 1px $focus-color
+        inset 0 0 0 1px var(--focus-color),
+        0 0 0 1px var(--focus-color)
       )
     );
   }
@@ -48,7 +47,7 @@ textarea {
   text-align: right;
   &.too-long {
-    color: $error_text_color;
+    color: var(--notice-error-text-color);
   }
 }
@@ -66,12 +65,12 @@ fieldset {
 ::-webkit-input-placeholder {
   line-height: 1.5;
-  color: $default-border-color;
+  color: var(--border-color);
 }
 .page-publication-date-fields {
   padding-bottom: var(--spacing-1);
-  @include clearfix;
+  @include mixins.clearfix;
   &.hidden {
     display: none;

data/app/{assets/stylesheets → stylesheets}/alchemy/admin/forms.scss RENAMED Viewed

@@ -1,3 +1,6 @@
+@use "../extends";
+@use "../mixins";
 form {
   #main_content > &.alchemy {
     max-width: 600px;
@@ -16,7 +19,7 @@ form {
   }
   .control-label {
-    @include form-label;
+    @include mixins.form-label;
   }
   .inline-label {
@@ -27,7 +30,7 @@ form {
   .input {
     padding: var(--spacing-1) 0;
-    @include clearfix;
+    @include mixins.clearfix;
     input[type="url"],
     input[type="number"],
@@ -39,7 +42,7 @@ form {
     .select2-container,
     .autocomplete_tag_list,
     .tinymce_container {
-      width: $form-right-width;
+      width: var(--form-right-column-width);
       float: right;
     }
@@ -69,7 +72,7 @@ form {
     }
     &.boolean {
-      margin-left: $form-left-width;
+      margin-left: var(--form-left-column-width);
       label {
         width: 100%;
@@ -92,9 +95,10 @@ form {
     }
     &.language_locale small.error {
-      @include form-hint(
-        $background-color: $error_background_color,
-        $border-color: $error_border_color
+      @include mixins.form-hint(
+        $background-color: var(--notice-error-background-color),
+        $border-color: var(--notice-error-border-color),
+        $color: var(--notice-error-text-color)
       );
       text-align: left;
     }
@@ -111,8 +115,8 @@ form {
     .select2-choice,
     .select2-choices {
-      border-color: $error_border_color;
-      color: $error_text_color;
+      border-color: var(--notice-error-border-color);
+      color: var(--notice-error-text-color);
       margin-bottom: var(--spacing-1);
       input[type="text"] {
@@ -121,7 +125,7 @@ form {
     }
     label {
-      color: $error_text_color;
+      color: var(--notice-error-text-color);
     }
   }
@@ -130,9 +134,9 @@ form {
   }
   small.error {
-    color: $error_text_color;
+    color: var(--notice-error-text-color);
     display: block;
-    margin-left: $form-left-width;
+    margin-left: var(--form-left-column-width);
     line-height: 1.5em;
     clear: both;
     text-align: right;
@@ -140,7 +144,11 @@ form {
   }
   .input-addon {
-    width: $form-field-addon-width;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--form-field-addon-width);
+    height: var(--form-field-height);
     position: absolute;
     bottom: var(--spacing-2);
     --select-background-image: none;
@@ -171,7 +179,7 @@ form {
       &.second {
         left: unset;
-        right: $form-field-addon-width;
+        right: var(--form-field-addon-width);
         select {
           border-right-width: 0;
@@ -193,11 +201,11 @@ form {
     }
     .left-column {
-      width: $form-right-width;
+      width: var(--form-right-column-width);
     }
     .right-column {
-      width: $form-left-width;
+      width: var(--form-left-column-width);
     }
     button,
@@ -212,7 +220,7 @@ form {
   }
   .control_group {
-    width: $form-right-width;
+    width: var(--form-right-column-width);
     padding-top: var(--spacing-1);
     float: right;
   }
@@ -222,12 +230,11 @@ form {
   }
   .input .hint {
-    @include form-hint;
-    margin-left: $form-left-width;
+    @include mixins.form-hint;
+    margin-left: var(--form-left-column-width);
     a[href] {
-      color: var(--color-grey_very_dark);
-      text-decoration: underline;
+      color: var(--hint-text-link-color);
     }
   }