alchemy_cms 7.4.5 → 8.0.0.a

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

@@ -1,3 +1,7 @@
+:root {
+  --datepicker-font-size: var(--font-size_medium);
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;
@@ -9,7 +13,7 @@
   animation: none;
   direction: ltr;
   border: 0;
-  font-size: $default-font-size;
+  font-size: var(--datepicker-font-size);
   line-height: 24px;
   border-radius: 5px;
   position: absolute;
@@ -18,19 +22,8 @@
   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);
+  background: var(--datepicker-bg-color);
+  box-shadow: var(--datepicker-box-shadow);
 }
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
@@ -71,11 +64,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 +81,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 +122,20 @@
   bottom: 100%;
 }
 .flatpickr-calendar.arrowTop:before {
-  border-bottom-color: var(--color-grey_light);
+  border-bottom-color: var(--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(--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 +152,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 +177,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 +210,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 +255,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 +277,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(--border-color);
   top: 26%;
 }
 .numInputWrapper span.arrowDown {
@@ -293,7 +286,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(--border-color);
   top: 40%;
 }
 .numInputWrapper span svg {
@@ -342,10 +335,10 @@
   display: inline-block;
 }
 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
-  border-bottom-color: rgba(0, 0, 0, 0.9);
+  border-bottom-color: var(--border-color);
 }
 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
-  border-top-color: rgba(0, 0, 0, 0.9);
+  border-top-color: var(--border-color);
 }
 .flatpickr-current-month input.cur-year {
   background: transparent;
@@ -500,8 +493,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 +502,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 +535,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 +565,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 +584,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 +595,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,
@@ -628,11 +621,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 +638,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;
@@ -731,8 +724,8 @@ span.flatpickr-weekday {
   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;

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

@@ -1,3 +1,17 @@
+@use "../extends";
+@use "../mixins";
+
+:root {
+  --form-field-margin: var(--spacing-1) 0;
+  --form-field-height: 31px;
+  --form-field-addon-width: 30px;
+  --form-field-border-width: var(--border-width_small);
+  --form-field-border-style: var(--border-style);
+  --form-field-padding: var(--spacing-1) var(--spacing-2);
+  --form-field-font-size: var(--font-size_medium);
+  --form-field-line-height: 1.25;
+}
+
 textarea,
 input[type="url"],
 input[type="number"],
@@ -15,13 +29,13 @@ input[type="search"],
 }
 
 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 +62,7 @@ textarea {
   text-align: right;
 
   &.too-long {
-    color: $error_text_color;
+    color: var(--notice-error-text-color);
   }
 }
 
@@ -66,12 +80,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

@@ -1,3 +1,11 @@
+@use "../extends";
+@use "../mixins";
+
+:root {
+  --form-left-column-width: 35%;
+  --form-right-column-width: 65%;
+}
+
 form {
   #main_content > &.alchemy {
     max-width: 600px;
@@ -16,7 +24,7 @@ form {
   }
 
   .control-label {
-    @include form-label;
+    @include mixins.form-label;
   }
 
   .inline-label {
@@ -27,7 +35,7 @@ form {
 
   .input {
     padding: var(--spacing-1) 0;
-    @include clearfix;
+    @include mixins.clearfix;
 
     input[type="url"],
     input[type="number"],
@@ -39,7 +47,7 @@ form {
     .select2-container,
     .autocomplete_tag_list,
     .tinymce_container {
-      width: $form-right-width;
+      width: var(--form-right-column-width);
       float: right;
     }
 
@@ -69,7 +77,7 @@ form {
     }
 
     &.boolean {
-      margin-left: $form-left-width;
+      margin-left: var(--form-left-column-width);
 
       label {
         width: 100%;
@@ -92,9 +100,9 @@ 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)
       );
       text-align: left;
     }
@@ -111,8 +119,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 +129,7 @@ form {
     }
 
     label {
-      color: $error_text_color;
+      color: var(--notice-error-text-color);
     }
   }
 
@@ -130,9 +138,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 +148,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 +183,7 @@ form {
 
       &.second {
         left: unset;
-        right: $form-field-addon-width;
+        right: var(--form-field-addon-width);
 
         select {
           border-right-width: 0;
@@ -193,11 +205,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 +224,7 @@ form {
   }
 
   .control_group {
-    width: $form-right-width;
+    width: var(--form-right-column-width);
     padding-top: var(--spacing-1);
     float: right;
   }
@@ -222,8 +234,8 @@ 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);

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

@@ -1,3 +1,11 @@
+@use "base";
+@use "navigation";
+
+:root {
+  --header-height: 29px;
+  --header-border-bottom: var(--border-default);
+}
+
 alchemy-overlay {
   visibility: hidden;
   position: fixed;
@@ -7,7 +15,7 @@ alchemy-overlay {
   height: 100%;
   z-index: 400000;
   background-color: transparent;
-  transition: all $transition-duration $transition-easing;
+  transition: all var(--transition-duration) var(--transition-easing);
   transition-delay: 0;
 
   &.visible {
@@ -45,15 +53,15 @@ div#overlay_text_box {
   margin-bottom: 0;
 
   &:not(:hover) {
-    background-color: $main-menu-bg-color;
+    background-color: var(--main-menu-bg-color);
   }
 }
 
 #header {
   display: flex;
-  height: $header-height;
-  background: $header-background;
-  border-bottom: $default-border;
+  height: var(--header-height);
+  background: var(--header-background);
+  border-bottom: var(--header-border-bottom);
   position: relative;
 
   a:hover {
@@ -64,11 +72,11 @@ div#overlay_text_box {
     align-items: center;
     padding: var(--spacing-1) var(--spacing-2);
     background-color: var(--color-grey_light);
-    text-shadow: $text-shadow-light;
+    text-shadow: var(--text-shadow-light);
     @extend .disable-user-select;
     @extend .locked_page;
     cursor: default;
-    border-bottom-color: $toolbar-bg-color;
+    border-bottom-color: var(--toolbar-bg-color);
   }
 
   .page_name {
@@ -83,30 +91,26 @@ div#overlay_text_box {
   padding-top: 84px;
   padding-right: var(--spacing-2);
   padding-bottom: var(--spacing-2);
-  padding-left: calc(#{$collapsed-main-menu-width} + var(--spacing-2));
+  padding-left: calc(var(--main-menu-width) + var(--spacing-2));
   z-index: 0;
   width: 100%;
   height: 100%;
-
-  @media screen and (min-width: $large-screen-break-point) {
-    padding-left: calc(#{$main-menu-width} + var(--spacing-2));
-  }
 }
 
 #user_info {
   display: flex;
   align-items: center;
-  height: $header-height;
+  height: var(--header-height);
   padding-left: var(--spacing-2);
   margin-left: auto;
-  border-bottom: $default-border;
-  background-color: $header-background;
+  border-bottom: var(--border-default);
+  background-color: var(--header-background);
 
   select {
     background-color: transparent;
     border: none;
     border-radius: 0;
-    border-left: $default-border;
+    border-left: var(--border-default);
   }
 
   .current-user-name {

data/app/stylesheets/alchemy/admin/hints.scss

@@ -0,0 +1,5 @@
+.like-hint-tooltip {
+  cursor: help;
+  --sl-tooltip-background-color: var(--hint-background-color);
+  --sl-tooltip-color: var(--hint-text-color);
+}

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

@@ -1,3 +1,12 @@
+:root {
+  --icon-size-xs: 0.75rem;
+  --icon-size-sm: 0.875rem;
+  --icon-size-1x: 1rem;
+  --icon-size-md: 1.3rem;
+  --icon-size-xl: 1.5rem;
+  --icon-size-xxl: 1.6rem;
+}
+
 alchemy-icon {
   display: inline-flex;
   align-items: center;
@@ -17,7 +26,7 @@ alchemy-icon {
 }
 
 .icon {
-  fill: var(--color-icon, currentColor);
+  fill: var(--icon-color, currentColor);
   width: var(--icon-size, var(--icon-size-md));
   height: var(--icon-size, var(--icon-size-md));
 

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

@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .alchemy-image-overlay {
   &.open {
     background-color: rgba(0, 0, 0, 0.6);
@@ -80,7 +82,7 @@
   .icon {
     font-size: 2em;
     color: var(--color-grey_light);
-    text-shadow: 0 0 4px var(--color-text);
+    text-shadow: 0 0 4px var(--text-color);
     transition: color var(--image-overlay-transition-duration) linear;
 
     &:hover {
@@ -94,7 +96,7 @@
   position: absolute;
   top: 0;
   background-color: var(--color-grey_light);
-  box-shadow: -2px 0 4px -2px var(--color-text);
+  box-shadow: -2px 0 4px -2px var(--text-color);
   transition: right var(--image-overlay-transition-duration)
     var(--image-overlay-transition-easing);
 }
@@ -135,7 +137,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 1.2em;
-    color: var(--color-icon);
+    color: var(--icon-color);
     transition: transform var(--image-overlay-transition-duration)
       var(--image-overlay-transition-easing);
   }
@@ -174,8 +176,8 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
-    box-shadow: 0 0 var(--spacing-2) var(--color-text);
-    background: $thumbnail-background;
+    box-shadow: 0 0 var(--spacing-2) var(--text-color);
+    background: var(--thumbnail-background);
     vertical-align: middle;
     cursor: default;
   }
@@ -266,20 +268,20 @@
   .icon {
     --icon-size: 4em;
     fill: var(--color-grey_light);
-    filter: drop-shadow(0 0 4px var(--color-icon));
+    filter: drop-shadow(0 0 4px var(--icon-color));
     transition: all var(--image-overlay-transition-duration) linear;
     vertical-align: middle;
   }
 
   .previous-picture {
     left: 0;
-    @include border-right-radius($default-border-radius);
+    @include mixins.border-right-radius(var(--border-radius_medium));
   }
 
   .next-picture {
     right: calc(
       var(--image-overlay-form-width) + var(--picture-overlay-handle-width)
     );
-    @include border-left-radius($default-border-radius);
+    @include mixins.border-left-radius(var(--border-radius_medium));
   }
 }

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

@@ -1,6 +1,6 @@
 img {
   opacity: 1;
-  transition: opacity $transition-duration;
+  transition: opacity var(--transition-duration);
 
   &.loading {
     opacity: 0;

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

@@ -0,0 +1,5 @@
+@use "../mixins";
+
+.label {
+  @include mixins.label-base($margin: 0, $padding: 0 var(--spacing-2));
+}