pages_core 3.12.0 → 3.12.1

data/app/assets/stylesheets/{pages/admin/components/header.scss → pages_core/admin/components/header.css}

@@ -1,18 +1,18 @@
 header {
-  background: $c-background-invert;
+  background: var(--background-invert-color);
   height: 86px;
-  color: $c-text-invert;
+  color: var(--text-invert-color);
 
-  a,
-  a:visited {
+  & a,
+  & a:visited {
     background: none;
     border: 0;
     padding: 0;
     margin: 0;
-    color: $c-text-invert;
+    color: var(--text-invert-color);
   }
 
-  .logo {
+  & .logo {
     position: absolute;
     z-index: 2;
     top: 11px;
@@ -21,19 +21,21 @@ header {
     height: 27px;
   }
 
-  .site-name {
-    color: $c-text-invert;
+  & .site-name {
+    color: var(--text-invert-color);
     position: absolute;
     top: 15px;
     left: 52px;
-    h1 {
+
+    & h1 {
       margin: 0;
       padding: 0;
       font-family: Arial, Helvetica, sans-serif;
       display: inline;
       font-size: 20px;
       font-weight: normal;
-      a {
+
+      & a {
         font-weight: bold;
         text-decoration: none;
         padding-right: 6px;
@@ -41,36 +43,45 @@ header {
     }
   }
 
-  .user {
+  & .user {
     font-size: 13px;
     position: absolute;
     top: 20px;
     right: 16px;
-    .separator {
-      color: $c-text-light;
-      margin: 0 4px;
+
+    & a {
+      border-left: 1px solid var(--text-light-color);
+      padding-left: 10px;
+      margin-left: 6px;
+
+      &:first-of-type {
+        border-left: none;
+        padding-left: 0px;
+        margin-left: 0px;
+      }
     }
   }
 
-  .tabs {
+  & .tabs {
     position: absolute;
     top: 54px;
     height: 29px;
     left: 16px;
     right: 8px;
 
-    ul {
+    & ul {
       padding: 0;
       margin: 0 8px 0 0;
       list-style-type: none;
       display: block;
       float: left;
+
       &.account {
         float: right;
       }
     }
 
-    li {
+    & li {
       display: inline;
       margin: 0;
       padding: 0;
@@ -78,10 +89,10 @@ header {
       font-size: 13px;
     }
 
-    a,
-    a:visited {
+    & a,
+    & a:visited {
       background: #333;
-      color: $c-text-invert;
+      color: var(--text-invert-color);
       display: block;
       float: left;
       padding: 0 15px;
@@ -91,35 +102,36 @@ header {
       text-decoration: none;
     }
 
-    a:hover,
-    a.current,
-    a.current:visited {
-      @include vertical-gradient(#cfcfcf, #fefefe);
-      color: $c-text;
+    & a:hover,
+    & a.current,
+    & a.current:visited {
+      background: linear-gradient(to bottom, #cfcfcf 0%, #fefefe 100%);
+      color: var(--text-color);
     }
   }
 }
 
 .content-tabs {
   list-style-type: none;
-  margin: 24px 0px -11px -18px;
+  margin: 24px 0px -12px -18px;
   padding: 0;
 
-  li {
-    color: hsla(0,0%,0%,0.25);
+  & li {
+    color: hsla(0, 0%, 0%, 0.25);
     display: inline;
     background: transparent;
     padding: 6px 17px;
     font-weight: bold;
   }
 
-  li.current {
-    background: $c-background;
+  & li.current {
+    background: var(--background-color);
     padding: 5px 16px;
     border: 1px solid #cae6f1;
-    border-bottom: 1px solid $c-background;
-    a,
-    a:visited {
+    border-bottom: 1px solid var(--background-color);
+
+    & a,
+    & a:visited {
       text-decoration: none;
       color: #444;
     }
@@ -127,31 +139,49 @@ header {
 }
 
 .page-description {
-  @include vertical-gradient(#dceef6, #e7f3f9);
+  background: linear-gradient(to bottom, #dceef6 0%, #e7f3f9 100%);
   margin: 0;
   padding: 16px 32px;
   display: block;
   border-bottom: 1px solid #d4eaf4;
-  color: $c-text;
+  color: var(--text-color);
 
-  em {
+  & em {
     font-style: normal;
     color: #4a5357;
   }
 
-  main & h3 {
-    margin: 0;
-    padding: 0;
-    font-size: 13px;
-    text-shadow: #E9F6FF 1px 1px 1px;
-  }
-
-  .links {
+  & .links {
     float: right;
+
+    & a {
+      border-left: 1px solid #779cb3;
+      padding-left: 8px;
+      margin-left: 8px;
+
+      &:first-of-type {
+        border-left: none;
+        padding-left: 0px;
+        margin-left: 0px;
+      }
+
+      &.current {
+        font-weight: bold;
+        text-decoration: none;
+        color: var(--text-color);
+      }
+    }
   }
 
-  .separator {
-    color: #779CB3;
+  & .separator {
+    color: #779cb3;
     margin: 0 4px;
   }
 }
+
+main .page-description h3 {
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  text-shadow: #e9f6ff 1px 1px 1px;
+}

data/app/assets/stylesheets/{pages/admin/components/image_editor.scss → pages_core/admin/components/image_editor.css}

@@ -7,17 +7,17 @@
   position: relative;
   -webkit-perspective: 1000;
 
-  .alt-warning {
+  & .alt-warning {
     position: absolute;
     bottom: 5px;
     right: 6px;
     font-size: 14px;
-    color: $c-warn-light;
+    color: var(--background-warning-color);
     text-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0);
     z-index: 100;
   }
 
-  img {
+  & img {
     display: block;
   }
 
@@ -32,38 +32,41 @@
   width: 80vw;
   height: 80vh;
   display: flex;
-  @include breakpoint-mobile {
+
+  @media --mobile {
     width: 100%;
     height: 100%;
     flex-direction: column;
   }
 
-  .toolbars {
-    .aspect-ratios {
+  & .toolbars {
+    & .aspect-ratios {
       border-top: 0px;
     }
   }
 
-  .visual {
+  & .visual {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
   }
 
-  .image-container {
+  & .image-container {
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
-    background: #ddd;
-    background-image: image-url("pages/admin/image-editor-bg.png");
+    background: #e5e5e5;
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(135deg, transparent 75%, #fff 75%);
+    background-size: 12px 12px;
+    background-position: 0 0, 6px 0, 6px -6px, 0px 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: 1px solid $c-border;
+    border: 1px solid var(--border-color);
     border-top: 0px;
 
-    .image-wrapper {
+    & .image-wrapper {
       position: absolute;
       flex-grow: 0;
 
@@ -71,23 +74,27 @@
         position: relative;
       }
 
-      img {
+      & img {
         display: block;
         width: 100%;
         height: auto;
       }
-      .ReactCrop {
+
+      & .ReactCrop {
         width: 100%;
         background-color: transparent;
       }
-      .ReactCrop__crop-selection {
-        &:before, &:after {
+
+      & .ReactCrop__crop-selection {
+        &:before,
+        &:after {
           content: "";
           position: absolute;
           border: 0px solid rgb(200, 200, 200);
           opacity: 0.25;
           transition: opacity 200ms ease-out;
         }
+
         &:before {
           border-left-width: 1px;
           border-right-width: 1px;
@@ -95,6 +102,7 @@
           height: 100%;
           left: 33.33%;
         }
+
         &:after {
           border-top-width: 1px;
           border-bottom-width: 1px;
@@ -103,55 +111,59 @@
           top: 33.33%;
         }
       }
-      .ReactCrop--active .ReactCrop__crop-selection {
-        &:before, &:after {
+
+      & .ReactCrop--active .ReactCrop__crop-selection {
+        &:before,
+        &:after {
           opacity: 0.75;
         }
       }
     }
 
-    .loading {
-      color: $c-text-light;
+    & .loading {
+      color: var(--text-light-color);
     }
   }
 
-  form {
+  & form {
     width: 300px;
     display: block;
     margin-left: 20px;
 
-    textarea {
+    & textarea {
       max-width: 100%;
+
       &.caption {
         height: 100px;
       }
     }
 
-    .embed-code {
-      input {
+    & .embed-code {
+      & input {
         width: 50%;
         margin-right: 8px;
       }
     }
 
-    @include breakpoint-mobile {
+    @media --mobile {
       width: 100%;
       margin-left: 0px;
       padding-bottom: 20px;
-      textarea.caption {
+
+      & textarea.caption {
         height: inherit;
       }
     }
   }
 
-  .focal-editor {
+  & .focal-editor {
     position: absolute;
     width: 100%;
     height: 100%;
     touch-action: none;
     overflow: hidden;
 
-    .focal-point {
+    & .focal-point {
       &:after {
         content: "";
         display: block;
@@ -163,7 +175,6 @@
         margin-top: -4px;
         transition: all 200ms ease-out;
       }
-
       position: absolute;
       width: 30px;
       height: 30px;
@@ -176,8 +187,8 @@
       touch-action: none;
       user-select: none;
       cursor: pointer;
-      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms,
-                  border-color 200ms ease-out;
+      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms, border-color 200ms ease-out;
+
       &:hover {
         &:after {
           width: 42px;

data/app/assets/stylesheets/{pages/admin/components/image_grid.scss → pages_core/admin/components/image_grid.css}

@@ -1,51 +1,54 @@
-$grid-image-padding: 7px;
-
 .image-grid {
+  --image-padding: 7px;
   margin-bottom: 40px;
   display: flex;
 
-  @include breakpoint-mobile {
+  @media --mobile {
     flex-direction: column;
   }
 
-  input[type=file] {
+  & input[type=file] {
     display: none;
   }
 
-  h3 {
-    margin: 10px $grid-image-padding 10px $grid-image-padding;
-    border-bottom: 1px solid $c-border;
+  & h3 {
+    margin: 10px var(--image-padding) 10px var(--image-padding);
+    border-bottom: 1px solid var(--border-color);
     padding-bottom: 5px;
   }
 
-  img {
+  & img {
     display: block;
     width: 100%;
     height: auto;
-    min-height: 1px; // Hack for IE11
+    min-height: 1px; /* Hack for IE11 */
   }
 
-  .grid-image {
-    padding: $grid-image-padding;
+  & .grid-image {
+    padding: var(--image-padding);
+
     &.placeholder {
       opacity: 0.25;
     }
+
     &.uploading {
-      -webkit-user-select: none;
       user-select: none;
       opacity: 0.5;
       overflow: hidden;
-      .temp-image {
+
+      & .temp-image {
         position: relative;
         cursor: pointer;
         overflow: hidden;
         background: #000;
       }
-      img {
+
+      & img {
         filter: blur(20px);
         opacity: 0.75;
       }
-      span {
+
+      & span {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -54,111 +57,110 @@ $grid-image-padding: 7px;
         border-radius: 20px;
         margin-top: -20px;
         margin-left: -20px;
-        border: 5px solid transparentize(#fff, 0.1);
+        border: 5px solid rgba(255, 255, 255, 0.9);
         border-right-color: transparent;
         text-indent: -9000px;
         overflow: hidden;
         animation: rotate-spinner 0.8s infinite linear;
       }
     }
-    .file-placeholder,
-    .placeholder {
+
+    & .file-placeholder,
+    & .placeholder {
       position: relative;
       vertical-align: middle;
-      background: $c-background-disabled;
-      border: 2px dashed $c-border;
+      background: var(--background-disabled-color);
+      border: 2px dashed var(--border-color);
       width: 100%;
       padding-bottom: 100%;
-      span {
-        color: $c-text-light;
+
+      & span {
+        color: var(--text-light-color);
         text-shadow: none;
       }
     }
-    .actions {
+
+    & .actions {
       margin-top: 7px;
       display: flex;
+      gap: 4px;
       flex-direction: row;
       visibility: hidden;
 
-      @include breakpoint-mobile {
+      @media --mobile {
         visibility: visible;
       }
 
-      button {
-        cursor: pointer;
-        border: 1px solid $c-border;
-        border-radius: 3px;
-        background: $c-button;
-        display: flex-item;
+      & button {
         flex: 1;
-        padding: 5px;
-        font-size: 12px;
-        color: $c-text;
-        &:hover, &:focus {
-          background: #fff;
-        }
       }
     }
+
     &:hover {
-      .actions {
+      & .actions {
         visibility: visible;
       }
     }
   }
 
-  .primary-image {
+  & .primary-image {
     width: 33.33%;
-    @include breakpoint-mobile {
+
+    @media --mobile {
       width: 100%;
     }
 
-    .drop-target {
+    & .drop-target {
       position: relative;
       width: 100%;
       padding-bottom: 66.67%;
       text-align: center;
       line-height: 1.6;
-      > .upload-button {
+
+      & > .upload-button {
         position: absolute;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        top: $grid-image-padding;
-        bottom: $grid-image-padding;
-        left: $grid-image-padding;
-        right: $grid-image-padding;
+        top: var(--image-padding);
+        bottom: var(--image-padding);
+        left: var(--image-padding);
+        right: var(--image-padding);
         min-height: 150px;
-        background: $c-background-disabled;
+        background: var(--background-disabled-color);
       }
     }
   }
 
-  .grid {
+  & .grid {
     width: 100%;
-    .images {
+
+    & .images {
       position: relative;
       display: flex;
       flex-wrap: wrap;
 
-      .grid-image {
+      & .grid-image {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         width: 16.66%;
-        @include breakpoint-max(1150px) {
+
+        @media --narrow {
           width: 50%;
         }
 
-        @include breakpoint-mobile {
+        @media --mobile {
           width: 50%;
         }
       }
     }
 
-    .editable-image {
+    & .editable-image {
       padding-bottom: 75%;
-      img {
+
+      & img {
         position: absolute;
         top: 0px;
         left: 0px;
@@ -169,34 +171,39 @@ $grid-image-padding: 7px;
       }
     }
 
-    .drop-target {
-      margin: 10px $grid-image-padding;
+    & .drop-target {
+      margin: 10px var(--image-padding);
       padding-top: 10px;
-      button {
+
+      & button {
         margin: 0px 7px;
       }
     }
   }
 
   &.with-primary-image {
-    .grid {
+    & .grid {
       width: 66.67%;
-      @include breakpoint-mobile {
+
+      @media --mobile {
         width: 100%;
       }
     }
-    .images .grid-image {
+
+    & .images .grid-image {
       width: 25%;
-      @include breakpoint-max(1150px) {
+
+      @media --narrow {
         width: 50%;
       }
-      @include breakpoint-mobile {
+
+      @media --mobile {
         width: 50%;
       }
     }
   }
 
-  .drag-image {
+  & .drag-image {
     position: absolute;
     width: 150px;
     z-index: 100;
@@ -204,6 +211,11 @@ $grid-image-padding: 7px;
 }
 
 @keyframes rotate-spinner {
-  0%    { transform: rotate(0deg); }
-  100%  { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }