alchemy_cms 7.2.6 → 7.3.0

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

@@ -18,11 +18,19 @@
   box-sizing: border-box;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
-  background: $white;
-  -webkit-box-shadow: 1px 0 0 $medium-gray, -1px 0 0 $medium-gray,
-    0 1px 0 $medium-gray, 0 -1px 0 $medium-gray, 0 3px 13px rgba(0, 0, 0, 0.08);
-  box-shadow: 1px 0 0 $medium-gray, -1px 0 0 $medium-gray, 0 1px 0 $medium-gray,
-    0 -1px 0 $medium-gray, 0 3px 13px rgba(0, 0, 0, 0.08);
+  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);
 }
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
@@ -62,8 +70,12 @@
   .flatpickr-days
   .dayContainer:nth-child(n + 2)
   .flatpickr-day.inRange:nth-child(7n + 1) {
-  -webkit-box-shadow: -2px 0 0 $medium-gray, 5px 0 0 $medium-gray;
-  box-shadow: -2px 0 0 $medium-gray, 5px 0 0 $medium-gray;
+  -webkit-box-shadow:
+    -2px 0 0 var(--color-grey_light),
+    5px 0 0 var(--color-grey_light);
+  box-shadow:
+    -2px 0 0 var(--color-grey_light),
+    5px 0 0 var(--color-grey_light);
 }
 .flatpickr-calendar .hasWeeks .dayContainer,
 .flatpickr-calendar .hasTime .dayContainer {
@@ -76,7 +88,7 @@
 }
 .flatpickr-calendar.hasTime .flatpickr-time {
   height: 40px;
-  border-top: 1px solid $medium-gray;
+  border-top: 1px solid var(--color-grey_light);
 }
 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
   height: auto;
@@ -117,20 +129,20 @@
   bottom: 100%;
 }
 .flatpickr-calendar.arrowTop:before {
-  border-bottom-color: $medium-gray;
+  border-bottom-color: var(--color-grey_light);
 }
 .flatpickr-calendar.arrowTop:after {
-  border-bottom-color: $white;
+  border-bottom-color: var(--color-white);
 }
 .flatpickr-calendar.arrowBottom:before,
 .flatpickr-calendar.arrowBottom:after {
   top: 100%;
 }
 .flatpickr-calendar.arrowBottom:before {
-  border-top-color: $medium-gray;
+  border-top-color: var(--color-grey_light);
 }
 .flatpickr-calendar.arrowBottom:after {
-  border-top-color: $white;
+  border-top-color: var(--color-white);
 }
 .flatpickr-calendar:focus {
   outline: 0;
@@ -205,11 +217,11 @@
       /*rtl:end:ignore*/
 .flatpickr-months .flatpickr-prev-month:hover,
 .flatpickr-months .flatpickr-next-month:hover {
-  color: $dark-gray;
+  color: var(--color-grey_dark);
 }
 .flatpickr-months .flatpickr-prev-month:hover svg,
 .flatpickr-months .flatpickr-next-month:hover svg {
-  fill: $dark-orange;
+  fill: var(--color-orange_dark);
 }
 .flatpickr-months .flatpickr-prev-month svg,
 .flatpickr-months .flatpickr-next-month svg {
@@ -245,7 +257,7 @@
   position: absolute;
   right: 0;
   width: 14px;
-  padding: 0 4px 0 2px;
+  padding: 0 var(--spacing-1) 0 var(--spacing-0);
   height: 50%;
   line-height: 50%;
   opacity: 0;
@@ -488,8 +500,8 @@ span.flatpickr-weekday {
   opacity: 1;
 }
 .dayContainer + .dayContainer {
-  -webkit-box-shadow: -1px 0 0 $medium-gray;
-  box-shadow: -1px 0 0 $medium-gray;
+  -webkit-box-shadow: -1px 0 0 var(--color-grey_light);
+  box-shadow: -1px 0 0 var(--color-grey_light);
 }
 .flatpickr-day {
   background: none;
@@ -530,17 +542,17 @@ span.flatpickr-weekday {
 .flatpickr-day.nextMonthDay:focus {
   cursor: pointer;
   outline: 0;
-  background: $medium-gray;
-  border-color: $medium-gray;
+  background: var(--color-grey_light);
+  border-color: var(--color-grey_light);
 }
 .flatpickr-day.today {
-  border-color: $dark-gray;
+  border-color: var(--color-grey_dark);
 }
 .flatpickr-day.today:hover,
 .flatpickr-day.today:focus {
-  border-color: $dark-gray;
-  background: $dark-gray;
-  color: $white;
+  border-color: var(--color-grey_dark);
+  background: var(--color-grey_dark);
+  color: var(--color-white);
 }
 .flatpickr-day.selected,
 .flatpickr-day.startRange,
@@ -560,11 +572,11 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-  background: $blue;
+  background: var(--color-blue_medium);
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: $white;
-  border-color: $blue;
+  color: var(--color-white);
+  border-color: var(--color-blue_medium);
 }
 .flatpickr-day.selected.startRange,
 .flatpickr-day.startRange.startRange,
@@ -579,8 +591,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 $blue;
-  box-shadow: -10px 0 0 $blue;
+  -webkit-box-shadow: -10px 0 0 var(--color-blue_medium);
+  box-shadow: -10px 0 0 var(--color-blue_medium);
 }
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
@@ -589,8 +601,12 @@ span.flatpickr-weekday {
 }
 .flatpickr-day.inRange {
   border-radius: 0;
-  -webkit-box-shadow: -5px 0 0 $medium-gray, 5px 0 0 $medium-gray;
-  box-shadow: -5px 0 0 $medium-gray, 5px 0 0 $medium-gray;
+  -webkit-box-shadow:
+    -5px 0 0 var(--color-grey_light),
+    5px 0 0 var(--color-grey_light);
+  box-shadow:
+    -5px 0 0 var(--color-grey_light),
+    5px 0 0 var(--color-grey_light);
 }
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover,
@@ -611,8 +627,12 @@ span.flatpickr-weekday {
 }
 .flatpickr-day.week.selected {
   border-radius: 0;
-  -webkit-box-shadow: -5px 0 0 $blue, 5px 0 0 $blue;
-  box-shadow: -5px 0 0 $blue, 5px 0 0 $blue;
+  -webkit-box-shadow:
+    -5px 0 0 var(--color-blue_medium),
+    5px 0 0 var(--color-blue_medium);
+  box-shadow:
+    -5px 0 0 var(--color-blue_medium),
+    5px 0 0 var(--color-blue_medium);
 }
 .flatpickr-day.hidden {
   visibility: hidden;
@@ -625,8 +645,8 @@ span.flatpickr-weekday {
 }
 .flatpickr-weekwrapper .flatpickr-weeks {
   padding: 0 12px;
-  -webkit-box-shadow: 1px 0 0 $medium-gray;
-  box-shadow: 1px 0 0 $medium-gray;
+  -webkit-box-shadow: 1px 0 0 var(--color-grey_light);
+  box-shadow: 1px 0 0 var(--color-grey_light);
 }
 .flatpickr-weekwrapper .flatpickr-weekday {
   float: none;
@@ -758,7 +778,7 @@ span.flatpickr-weekday {
 .flatpickr-time .flatpickr-am-pm:hover,
 .flatpickr-time input:focus,
 .flatpickr-time .flatpickr-am-pm:focus {
-  background: $light-gray;
+  background: var(--color-grey_very_light);
 }
 .flatpickr-input[readonly] {
   cursor: pointer;

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

@@ -18,10 +18,12 @@ input[type="checkbox"] {
   transition: $transition-duration;
 
   &:focus {
-    @include default-focus-style($box-shadow: (
-      inset 0 0 0 1px $focus-color,
-      0 0 0 1px $focus-color
-    ));
+    @include default-focus-style(
+      $box-shadow: (
+        inset 0 0 0 1px $focus-color,
+        0 0 0 1px $focus-color
+      )
+    );
   }
 }
 
@@ -32,7 +34,7 @@ input[type="search"] {
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration  {
+input[type="search"]::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
@@ -68,7 +70,7 @@ fieldset {
 }
 
 .page-publication-date-fields {
-  padding-bottom: $default-padding;
+  padding-bottom: var(--spacing-1);
   @include clearfix;
 
   &.hidden {

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

@@ -1,7 +1,7 @@
 form {
   #main_content > &.alchemy {
     max-width: 600px;
-    padding: 2 * $default-padding;
+    padding: var(--spacing-2);
     margin: 2em auto;
   }
 
@@ -26,7 +26,7 @@ form {
   }
 
   .input {
-    padding: $default-padding 0;
+    padding: var(--spacing-1) 0;
     @include clearfix;
 
     input[type="url"],
@@ -61,7 +61,7 @@ form {
 
     select,
     .select2-container {
-      margin: 4px 0;
+      margin: var(--spacing-1) 0;
     }
 
     &.boolean {
@@ -71,18 +71,18 @@ form {
         width: 100%;
         text-align: left;
         padding: 0;
-        margin: $default-margin 0;
+        margin: var(--spacing-1) 0;
         float: none;
-        margin-left: 4px;
+        margin-left: var(--spacing-1);
       }
     }
 
     label.checkbox {
       display: block;
-      margin: $default-margin 0;
+      margin: var(--spacing-1) 0;
 
       input {
-        margin-right: $default-margin;
+        margin-right: var(--spacing-1);
         margin-left: 1px;
       }
     }
@@ -109,7 +109,7 @@ form {
     .select2-choices {
       border-color: $error_border_color;
       color: $error_text_color;
-      margin-bottom: 4px;
+      margin-bottom: var(--spacing-1);
 
       input[type="text"] {
         box-shadow: none;
@@ -121,6 +121,10 @@ form {
     }
   }
 
+  input:invalid:focus {
+    @extend %field-with-error;
+  }
+
   small.error {
     color: $error_text_color;
     display: block;
@@ -134,7 +138,7 @@ form {
   .input-addon {
     width: $form-field-addon-width;
     position: absolute;
-    bottom: 2 * $default-padding;
+    bottom: var(--spacing-2);
     --select-background-image: none;
 
     select {
@@ -177,11 +181,11 @@ form {
   .inline-input {
     align-items: center;
     display: flex;
-    margin: 0 -1 * $default-margin;
+    margin: 0 calc(-1 * var(--spacing-1));
 
     .left-column,
     .right-column {
-      padding: 0 $default-padding;
+      padding: 0 var(--spacing-1);
     }
 
     .left-column {
@@ -205,7 +209,7 @@ form {
 
   .control_group {
     width: $form-right-width;
-    padding-top: $default-margin;
+    padding-top: var(--spacing-1);
     float: right;
   }
 
@@ -218,18 +222,18 @@ form {
     margin-left: $form-left-width;
 
     a[href] {
-      color: $very-dark-gray;
+      color: var(--color-grey_very_dark);
       text-decoration: underline;
     }
   }
 
   .submit {
-    padding: $default-padding 0;
+    padding: var(--spacing-1) 0;
     text-align: right;
   }
 
   .input-column {
-    padding: 0 $default-padding;
+    padding: 0 var(--spacing-1);
 
     input[type] {
       float: none;
@@ -254,5 +258,5 @@ form {
 
 .input-column > label {
   display: block;
-  margin-top: $default-margin + 1;
+  margin-top: calc(var(--spacing-1) + 1);
 }

data/app/assets/stylesheets/alchemy/{frame.scss → admin/frame.scss}

@@ -62,8 +62,8 @@ div#overlay_text_box {
 
   .page_status_and_name {
     align-items: center;
-    padding: $default-padding 2 * $default-padding;
-    background-color: $medium-gray;
+    padding: var(--spacing-1) var(--spacing-2);
+    background-color: var(--color-grey_light);
     text-shadow: $text-shadow-light;
     @extend .disable-user-select;
     @extend .locked_page;
@@ -72,7 +72,7 @@ div#overlay_text_box {
   }
 
   .page_name {
-    margin-right: $default-margin;
+    margin-right: var(--spacing-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -81,15 +81,15 @@ div#overlay_text_box {
 
 #main_content {
   padding-top: 84px;
-  padding-right: 8px;
-  padding-bottom: 8px;
-  padding-left: $collapsed-main-menu-width + 8px;
+  padding-right: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
+  padding-left: calc(#{$collapsed-main-menu-width} + var(--spacing-2));
   z-index: 0;
   width: 100%;
   height: 100%;
 
   @media screen and (min-width: $large-screen-break-point) {
-    padding-left: $main-menu-width + 8px;
+    padding-left: calc(#{$main-menu-width} + var(--spacing-2));
   }
 }
 
@@ -97,7 +97,7 @@ div#overlay_text_box {
   display: flex;
   align-items: center;
   height: $header-height;
-  padding-left: 2 * $default-padding;
+  padding-left: var(--spacing-2);
   margin-left: auto;
   border-bottom: $default-border;
   background-color: $header-background;
@@ -110,6 +110,6 @@ div#overlay_text_box {
   }
 
   .current-user-name {
-    padding-right: 2 * $default-padding;
+    padding-right: var(--spacing-2);
   }
 }

data/app/assets/stylesheets/alchemy/{image_library.scss → admin/image_library.scss}

@@ -24,11 +24,11 @@ $image-overlay-transition-easing: ease-in;
     }
 
     .zoomed-picture-background {
-      padding-right: 2 * $default-padding;
+      padding-right: var(--spacing-2);
     }
 
     .alchemy-image-overlay-close {
-      right: $picture-overlay-handle-width + 2 * $default-padding;
+      right: $picture-overlay-handle-width + var(--spacing-2);
     }
 
     .next-picture {
@@ -50,7 +50,7 @@ $image-overlay-transition-easing: ease-in;
   height: 100%;
 
   > .message {
-    margin: 2 * $default-margin;
+    margin: var(--spacing-2);
     max-width: 400px;
   }
 }
@@ -62,21 +62,22 @@ $image-overlay-transition-easing: ease-in;
   align-items: center;
   width: 32px;
   height: 32px;
-  top: 2 * $default-padding;
-  right: 2 * $default-padding + $picture-overlay-handle-width +
-    $image-overlay-form-width;
+  top: var(--spacing-2);
+  right: calc(
+    var(--spacing-2) + #{$picture-overlay-handle-width} + #{$image-overlay-form-width}
+  );
   cursor: pointer;
   transition: right $image-overlay-transition-duration
     $image-overlay-transition-easing;
 
   .icon {
     font-size: 2em;
-    color: $medium-gray;
-    text-shadow: 0 0 $default-padding $text-color;
+    color: var(--color-grey_light);
+    text-shadow: 0 0 4px var(--color-text);
     transition: color $image-overlay-transition-duration linear;
 
     &:hover {
-      color: $white;
+      color: var(--color-white);
     }
   }
 }
@@ -85,8 +86,8 @@ $image-overlay-transition-easing: ease-in;
 .picture-overlay-handle {
   position: absolute;
   top: 0;
-  background-color: $medium-gray;
-  box-shadow: -2px 0 $default-padding -2px $text-color;
+  background-color: var(--color-grey_light);
+  box-shadow: -2px 0 4px -2px var(--color-text);
   transition: right $image-overlay-transition-duration
     $image-overlay-transition-easing;
 }
@@ -95,8 +96,7 @@ $image-overlay-transition-easing: ease-in;
   right: 0;
   width: $image-overlay-form-width;
   height: 100%;
-  padding: 2 * $default-padding 4 * $default-padding 2 * $default-padding
-    $default-padding;
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-1);
   overflow: auto;
 
   form .control-label,
@@ -128,24 +128,25 @@ $image-overlay-transition-easing: ease-in;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 1.2em;
-    color: $text-color;
+    color: var(--color-icon);
     transition: transform $image-overlay-transition-duration
       $image-overlay-transition-easing;
   }
 
   &:hover {
-    background-color: darken($medium-gray, 5%);
+    background-color: hsl(0deg, 0%, 89%);
   }
 }
 
 .zoomed-picture-background {
   width: 100%;
   height: 100%;
-  padding-top: 2 * $default-padding;
-  padding-right: $image-overlay-form-width + 2 * $default-padding +
-    $picture-overlay-handle-width;
-  padding-bottom: 2 * $default-padding;
-  padding-left: 2 * $default-padding;
+  padding-top: var(--spacing-2);
+  padding-right: calc(
+    #{$image-overlay-form-width} + var(--spacing-2) + #{$picture-overlay-handle-width}
+  );
+  padding-bottom: var(--spacing-2);
+  padding-left: var(--spacing-2);
   margin: 0 auto;
   text-align: center;
   cursor: pointer;
@@ -165,7 +166,7 @@ $image-overlay-transition-easing: ease-in;
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    box-shadow: 0 0 2 * $default-margin $text-color;
+    box-shadow: 0 0 var(--spacing-2) var(--color-text);
     background: $thumbnail-background;
     vertical-align: middle;
     cursor: default;
@@ -174,10 +175,10 @@ $image-overlay-transition-easing: ease-in;
 
 .picture-file-infos,
 .picture-usage-info {
-  padding: 2 * $default-padding 0;
+  padding: var(--spacing-2) 0;
 
   .message {
-    margin: 2 * $default-padding 0;
+    margin: var(--spacing-2) 0;
   }
 }
 
@@ -185,8 +186,8 @@ $image-overlay-transition-easing: ease-in;
   h3 {
     display: flex;
     align-items: center;
-    gap: $default-padding;
-    padding: 4px 8px 0;
+    gap: var(--spacing-1);
+    padding: var(--spacing-1) var(--spacing-2) 0;
     margin: 0;
   }
 
@@ -196,14 +197,14 @@ $image-overlay-transition-easing: ease-in;
   }
 
   .list {
-    margin: 2 * $default-margin 0;
+    margin: var(--spacing-2) 0;
 
     li {
       display: flex;
       align-items: center;
-      gap: $default-padding;
-      padding: 2 * $default-padding;
-      border-radius: $default-border-radius;
+      gap: var(--spacing-1);
+      padding: var(--spacing-2);
+      border-radius: var(--border-radius_medium);
       white-space: normal;
       margin-bottom: 1em;
     }
@@ -237,8 +238,8 @@ $image-overlay-transition-easing: ease-in;
     .icon {
       width: 32px;
       height: 32px;
-      fill: $white;
-      filter: drop-shadow(0 0 1px $very-dark-gray);
+      fill: var(--color-white);
+      filter: drop-shadow(0 0 1px var(--color-grey_very_dark));
     }
 
     &:hover {
@@ -252,8 +253,8 @@ $image-overlay-transition-easing: ease-in;
 
   .icon {
     --icon-size: 4em;
-    fill: $medium-gray;
-    filter: drop-shadow(0 0 $default-padding $text-color);
+    fill: var(--color-grey_light);
+    filter: drop-shadow(0 0 4px var(--color-icon));
     transition: all $image-overlay-transition-duration linear;
     vertical-align: middle;
   }

data/app/assets/stylesheets/alchemy/admin/labels.scss

@@ -0,0 +1,3 @@
+.label {
+  @include label-base($margin: 0, $padding: 0 var(--spacing-2));
+}

data/app/assets/stylesheets/alchemy/{list_filter.scss → admin/list_filter.scss}

@@ -4,15 +4,15 @@ alchemy-list-filter {
 
   > alchemy-icon {
     position: absolute;
-    left: 8px;
+    left: var(--spacing-2);
     top: 50%;
     transform: translateY(-50%);
   }
 
   .js_filter_field {
     width: 100%;
-    padding-left: 28px;
-    padding-right: 24px;
+    padding-left: var(--spacing-7);
+    padding-right: var(--spacing-6);
     margin: 0;
 
     form .input & {
@@ -25,7 +25,7 @@ alchemy-list-filter {
     display: flex;
     visibility: hidden;
     position: absolute;
-    right: 4px;
+    right: var(--spacing-1);
     top: 50%;
     transform: translateY(-50%);
     width: 16px;

data/app/assets/stylesheets/alchemy/{lists.scss → admin/lists.scss}

@@ -1,5 +1,6 @@
-ul, ol {
-  padding-left: 16px;
+ul,
+ol {
+  padding-left: var(--spacing-4);
   margin-top: 1em;
   margin-bottom: 1em;
 
@@ -22,11 +23,11 @@ ul.list {
       overflow: hidden;
       background-color: transparent;
       font-weight: bold;
-      padding: $default-padding 2*$default-padding;
-      margin-bottom: 2*$default-margin;
+      padding: var(--spacing-1) var(--spacing-2);
+      margin-bottom: var(--spacing-2);
 
       .list-secondary {
-        color: $text-color;
+        color: var(--color-text);
       }
     }
 
@@ -52,10 +53,11 @@ ul.list {
     max-width: 65%;
   }
 
-  .list-secondary, .right {
+  .list-secondary,
+  .right {
     float: right;
     text-align: left;
     width: 30%;
-    color: $dark-gray;
+    color: var(--color-grey_dark);
   }
 }