alchemy_cms 7.2.7 → 7.3.0

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

@@ -1,25 +1,28 @@
 #clipboard_items {
-
   ul {
     list-style-type: none;
-    margin: 0 0 8px;
+    margin: 0 0 var(--spacing-2);
     padding: 0;
     height: 220px;
     overflow-y: auto;
     overflow-x: hidden;
 
     li {
-      padding: 2*$default-padding;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2);
       border: $default-border;
       background-color: white;
       border-radius: $default-border-radius;
 
       &.elements {
-        background-color: $medium-gray;
+        background-color: var(--color-grey_light);
       }
 
-      > .icon {
-        margin-right: $default-padding;
+      .icon_button {
+        margin-left: auto;
+        cursor: pointer;
       }
     }
   }

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

@@ -1,34 +1,34 @@
 #dashboard {
   overflow: auto;
-  padding: 4 * $default-padding 0;
+  padding: var(--spacing-4) 0;
   width: 100%;
   position: relative;
 
   h1 {
     font-size: 1.5em;
-    margin: 0 0 8px 8px;
+    margin: 0 0 var(--spacing-2) var(--spacing-2);
   }
 
   p {
-    margin: 0 0 16px 8px;
+    margin: 0 0 var(--spacing-4) var(--spacing-2);
   }
 
   .column {
     width: 50%;
     float: left;
-    padding-right: 16px;
+    padding-right: var(--spacing-4);
   }
 
   .widget {
-    margin-bottom: 16px;
+    margin-bottom: var(--spacing-4);
 
     h2 {
-      padding: 2 * $default-padding;
+      padding: var(--spacing-2);
       margin-bottom: 0;
     }
 
     p {
-      margin: 4px 0;
+      margin: var(--spacing-1) 0;
     }
 
     table {
@@ -60,7 +60,7 @@
 
   > span {
     display: inline-flex;
-    gap: $default-padding;
+    gap: var(--spacing-1);
     align-items: center;
 
     &.hidden {

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

@@ -58,7 +58,7 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog,
 .alchemy-image-overlay-dialog {
   position: relative;
-  max-width: calc(100vw - 16px);
+  max-width: calc(100vw - var(--spacing-4));
   display: inline-block;
   vertical-align: middle;
   text-align: left;
@@ -66,14 +66,14 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog {
   white-space: normal;
-  margin: 2 * $default-margin;
+  margin: var(--spacing-2);
   @include border-top-radius($default-border-radius);
   box-shadow: $dialog-box-shadow;
   background-color: $dialog-background-color;
   transition: min-height $dialog-transition-duration ease-in-out;
 
   div#jscropper {
-    padding: 2 * $default-padding;
+    padding: var(--spacing-2);
 
     .thumbnail_background {
       width: 800px;
@@ -85,15 +85,15 @@ $dialog-transition-duration: 150ms;
     .info.message,
     alchemy-message[type="info"] {
       position: absolute;
-      right: 2 * $default-padding;
+      right: var(--spacing-2);
       width: 256px;
     }
 
     .info.message,
     alchemy-message[type="info"] {
-      top: 2 * $default-padding;
-      margin: 0 0 0 8px;
-      padding: 0 8px 0 32px;
+      top: var(--spacing-2);
+      margin: 0 0 0 var(--spacing-2);
+      padding: 0 var(--spacing-2) 0 var(--spacing-8);
     }
 
     .jcrop-holder {
@@ -107,12 +107,12 @@ $dialog-transition-duration: 150ms;
 
     form {
       padding: 0;
-      bottom: 2 * $default-padding;
-      margin-left: 8px;
+      bottom: var(--spacing-2);
+      margin-left: var(--spacing-2);
 
       button {
         margin-bottom: 0;
-        width: calc(50% - #{$default-padding});
+        width: calc(50% - var(--spacing-1));
       }
 
       button[type="submit"] {
@@ -125,7 +125,7 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog-header {
   display: flex;
   align-items: center;
-  gap: $default-padding;
+  gap: var(--spacing-1);
   position: relative;
   height: $dialog-header-height;
   padding: $dialog-header-padding;
@@ -139,7 +139,7 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog-title {
   flex-grow: 1;
   font-weight: bold;
-  padding: 0 $default-padding;
+  padding: 0 var(--spacing-1);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -158,19 +158,19 @@ $dialog-transition-duration: 150ms;
 
 .alchemy-dialog-body {
   position: relative;
-  color: $text-color;
+  color: var(--color-text);
 
   .message,
   alchemy-message {
-    margin: 8px;
+    margin: var(--spacing-2);
   }
 
   &.padded {
-    padding: 4 * $default-padding;
+    padding: var(--spacing-4);
 
     .message,
     alchemy-message {
-      margin: 0 0 8px 0;
+      margin: 0 0 var(--spacing-2) 0;
     }
   }
 
@@ -179,20 +179,20 @@ $dialog-transition-duration: 150ms;
 
     label {
       float: left;
-      margin-top: 12px;
+      margin-top: var(--spacing-3);
     }
   }
 }
 
 .alchemy-dialog-buttons {
-  padding-top: 4 * $default-padding;
+  padding-top: var(--spacing-4);
   text-align: right;
 
   button:first-child {
-    margin-right: 2 * $default-margin;
+    margin-right: var(--spacing-2);
   }
 }
 
 #overlay_tabs {
-  margin: -4 * $default-padding;
+  margin: calc(-1 * var(--spacing-4));
 }