pages_core 3.12.0 → 3.12.1

data/app/assets/images/pages/admin/angle-down-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>

data/app/assets/images/pages/admin/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 21 27"><path d="M192.558 93.535V965.14h704.884V372.968L625.182 93.5l-432.624.035ZM829.087 395 595.166 159.719v235.294L829.087 395Z" style="fill:#fff" transform="matrix(.0298 0 0 .0298 -5.737 -1.754)"/></svg>

data/app/assets/stylesheets/pages_core/admin/components/archive.css

@@ -0,0 +1,6 @@
+.archive-index {
+  & .count {
+    font-weight: normal;
+    color: var(--text-light-color);
+  }
+}

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

@@ -1,7 +1,7 @@
 .attachments {
   margin-bottom: 40px;
 
-  .drop-target {
+  & .drop-target {
     position: relative;
     width: 100%;
     text-align: center;
@@ -12,47 +12,49 @@
       margin-top: 0px;
     }
 
-    .upload-button {
+    & .upload-button {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       min-height: 150px;
-      background: $c-background-disabled;
+      background: var(--background-disabled-color);
     }
   }
 
-  .attachment {
-    border-bottom: 1px solid $c-border;
+  & .attachment {
+    border-bottom: 1px solid var(--border-color);
     padding: 16px 0px 16px 40px;
     cursor: pointer;
     background: #fff;
     transition: padding-left 50ms ease-in-out,
                 background 150ms ease-in-out;
 
-    .attachment-info {
+    & .attachment-info {
       transition: all 50ms ease-in-out;
     }
 
     &.drop-placeholder {
       font-size: 14px;
       margin-top: -1px;
-      border-top: 1px solid $c-border;
-      background: $c-background-disabled;
+      border-top: 1px solid var(--border-color);
+      background: var(--background-disabled-color);
       text-align: center;
-      color: $c-text-light;
+      color: var(--text-light-color);
       padding: 24px 0px;
     }
 
     &.uploading,
     &.placeholder {
       padding-left: 56px;
-      background: $c-background-disabled;
-      .attachment-info {
+      background: var(--background-disabled-color);
+
+      & .attachment-info {
         opacity: 0.5;
       }
-      .actions {
+
+      & .actions {
         display: none;
       }
     }
@@ -61,13 +63,14 @@
       margin-bottom: 0px;
     }
 
-    .actions {
+    & .actions {
       float: right;
     }
 
-    h3 {
+    & h3 {
       margin: 0px 0px 12px 0px;
-      .icon {
+
+      & .icon {
         display: block;
         float: left;
         margin-left: -40px;
@@ -75,21 +78,23 @@
       }
     }
 
-    p {
+    & p {
       &:last-child {
         margin-bottom: 0px;
       }
     }
 
-    button {
+    & button {
       cursor: pointer;
-      border: 1px solid $c-border;
+      border: 1px solid var(--border-color);
       border-radius: 3px;
-      background: $c-button;
+      background: var(--button-color);
       padding: 5px 20px;
       font-size: 12px;
-      color: $c-text;
-      &:hover, &:focus {
+      color: var(--text-color);
+
+      &:hover,
+      &:focus {
         background: #fff;
       }
     }
@@ -99,29 +104,31 @@
 .attachment-editor {
   width: 60vw;
   min-height: 450px;
-  @include breakpoint-mobile {
+
+  @media --mobile {
     width: 100%;
     height: 100%;
   }
 
-  form {
+  & form {
     width: 100%;
 
-    .buttons {
+    & .buttons {
       margin-top: 24px;
     }
 
-    .embed-code {
-      input[type=text] {
+    & .embed-code {
+      & input[type=text] {
         width: 50%;
         max-width: 100px;
         margin-right: 8px;
       }
     }
 
-    textarea,
-    input[type=text] {
+    & textarea,
+    & input[type=text] {
       max-width: 100%;
+
       &.description {
         height: 100px;
       }

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

@@ -1,123 +1,125 @@
-@import 'ReactCrop';
-@import 'font-awesome';
-@import 'admin/vars';
-@import 'admin/mixins/**/*';
-@import 'admin/components/**/*';
-@import 'admin/controllers/**/*';
-
-body {
-  background: $c-background;
-  color: $c-text;
-}
-
-body, td, th {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 16px 0;
-}
-
-img {
-  border: 0;
-}
-
-small {
-  font-size: 0.9em;
-  color: $c-text-light;
-}
-
-th {
-  text-align: left;
-}
-
-.hr {
-  border-top: 1px solid $c-border;
-  hr {
-    display: none;
-  }
-}
-
-div.content {
-  margin: 0 32px;
-}
-
-table.show th,
-td {
-  font-weight: normal;
-  padding: 2px 16px 2px 0;
-}
-
-.errorExplanation {
-  background-color: #ffd;
-  border-bottom:  1px solid #dda;
-  margin: -32px -32px 16px -32px;
-  padding: 0px 32px;
-  color: #333;
-
-  h2 {
-    font-weight: normal;
-    font-size: 1.4em;
-    margin: 0 -32px 16px -32px;
-    padding:  8px 32px;
-    background-color: $c-red;
-    color: #fff;
-  }
-
-  p {
-    margin-bottom: 0;
-    padding: 0;
-  }
-
-  ul {
-    padding:  0;
-    list-style-position: inside;
-  }
-
-  ul li {
-    font-weight:  bold;
-  }
-}
-
-.flash {
-  background: #fffbdf;
-  border-bottom: 1px solid #ccc9b2;
-  margin: -32px -32px 32px -32px;
-  padding: 16px 32px;
-  font-weight: bold;
-  color: #6f2d1b;
-  font-size: 1.2em;
-}
-
-div.paginator {
-  margin: 32px 0;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: $c-text-light;
-}
-
-img.thumbnail {
-  border: 1px solid #555;
-}
-
-li .actions {
-  font-weight: normal;
-  display:  inline;
-  font-size: 12px;
-  color: $c-text-light;
-  margin-top: 1px;
-}
-
-.clearfix:after {
-  content: ".";
-  display: block;
-  height: 0;
-  font-size: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.clearfix {
-  display: inline-table;
-}
+body {
+  background: var(--background-color);
+  color: var(--text-color);
+}
+
+body,
+td,
+th {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 16px 0;
+}
+
+img {
+  border: 0;
+}
+
+small {
+  font-size: 0.9em;
+  color: var(--text-light-color);
+}
+
+th {
+  text-align: left;
+}
+
+.hr {
+  border-top: 1px solid var(--border-color);
+
+  & hr {
+    display: none;
+  }
+}
+
+div.content {
+  margin: 0 32px;
+}
+
+table.show th,
+td {
+  font-weight: normal;
+  padding: 2px 16px 2px 0;
+}
+
+.errorExplanation {
+  background-color: #ffd;
+  border-bottom: 1px solid #dda;
+  margin: -32px -32px 16px -32px;
+  padding: 0px 32px;
+  color: #333;
+
+  & h2 {
+    font-weight: normal;
+    font-size: 1.4em;
+    margin: 0 -32px 16px -32px;
+    padding: 8px 32px;
+    background-color: var(--red);
+    color: #fff;
+  }
+
+  & p {
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  & ul {
+    padding: 0;
+    list-style-position: inside;
+  }
+
+  & ul li {
+    font-weight: bold;
+  }
+}
+
+.flash {
+  background: #fffbdf;
+  border-bottom: 1px solid #ccc9b2;
+  margin: -32px -32px 32px -32px;
+  padding: 16px 32px;
+  font-weight: bold;
+  color: #6f2d1b;
+  font-size: 1.2em;
+}
+
+div.paginator {
+  margin: 32px 0;
+  font-size: 1.5em;
+  font-weight: bold;
+  color: var(--text-light-color);
+}
+
+img.thumbnail {
+  border: 1px solid #555;
+}
+
+li .actions {
+  font-weight: normal;
+  display: inline;
+  font-size: 12px;
+  color: var(--text-light-color);
+  margin-top: 1px;
+}
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  display: inline-table;
+}

data/app/assets/stylesheets/pages_core/admin/components/forms.css

@@ -0,0 +1,223 @@
+main form {
+  margin: 16px 32px;
+}
+
+form {
+  & .field {
+    margin: 16px 0;
+    padding: 0;
+
+    & input[type=text],
+    & input[type=password],
+    & input[type=email],
+    & textarea {
+      transition: border-color 150ms ease-out;
+    }
+
+    & label {
+      display: block;
+      padding: 0;
+      margin: 0 0 4px 0;
+      font-weight: bold;
+      font-size: 13px;
+      color: var(--text-color);
+      transition: color 150ms ease-out;
+
+      &.check-box,
+      &.radio-button {
+        font-weight: normal;
+      }
+
+      &.radio-button {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+
+    & .description {
+      color: var(--text-light-color);
+      margin: 0 0 6px 0;
+    }
+  }
+
+  & .field-with-warning {
+    & input[type=text],
+    & input[type=password],
+    & input[type=email],
+    & textarea {
+      border-color: var(--red-light);
+    }
+
+    & label {
+      color: var(--red);
+    }
+  }
+
+  & .field-with-errors {
+    background: var(--red-invert);
+    border-top: 1px solid var(--red-light);
+    border-bottom: 1px solid var(--red-light);
+    margin: 0 -32px -1px -32px;
+    padding: 12px 32px 16px 32px;
+
+    & label {
+      color: var(--red);
+    }
+  }
+
+  & .row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -16px;
+
+    & .field {
+      margin-right: 16px;
+
+      &.text-field {
+        flex-grow: 1;
+        min-width: 300px;
+      }
+    }
+
+    & input[type=text],
+    & input[type=password] {
+      width: 100%;
+      max-width: none;
+    }
+  }
+
+  & .date-range-select {
+    & .date {
+      line-height: 34px;
+      display: inline-block;
+      white-space: nowrap;
+
+      & .date-select {
+        display: inline-block;
+      }
+
+      & input[type=text] {
+        display: inline;
+        width: auto;
+        min-width: auto;
+        margin-left: 12px;
+        padding: 4px 6px;
+      }
+    }
+
+    & .to {
+      margin: 0px 8px;
+    }
+  }
+
+  & .page-dates {
+    margin-bottom: 40px;
+
+    & .toggles {
+      & label {
+        font-weight: normal;
+        display: inline-block;
+        margin-right: 12px;
+
+        & input {
+          margin-right: 6px;
+        }
+
+        &.disabled {
+          color: var(--text-light-color);
+        }
+      }
+    }
+
+    & .remove-dates {
+      margin-top: 12px;
+    }
+  }
+}
+
+.fieldWithErrors {
+  display: table;
+  padding: 1px;
+  padding-right: 22px;
+  background: transparent url("pages/admin/warning-icon.gif") right 5px no-repeat;
+}
+
+input[type=text],
+input[type=password],
+textarea {
+  width: 100%;
+  max-width: 450px;
+  min-width: 200px;
+  border: 1px solid var(--border-color);
+  box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.03);
+  padding: 8px 10px;
+  line-height: 1.4;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+
+  &:disabled {
+    border-color: var(--border-color-light);
+    color: var(--text-light-color);
+  }
+
+  &.warn {
+    border-color: red;
+  }
+}
+
+main .login-form input[type=text],
+main .login-form input[type=password],
+input[type=text].large,
+input[type=password].large {
+  font-size: 1.4em;
+}
+
+fieldset {
+  padding: 0px;
+  margin: 0px;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+}
+
+button,
+select {
+  appearance: none;
+  cursor: inherit;
+  font-family: var(--font-os-sans);
+  font-size: 13px;
+  color: var(--text-color);
+  line-height: 1.5;
+  border: 1px solid var(--button-border-color);
+  border-radius: 5px;
+  padding: 0.25em 0.75em;
+  background: var(--button-color);
+  box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.25);
+
+  &:hover {
+    background-color: var(--button-color-hover);
+  }
+
+  &:disabled {
+    color: var(--text-light-color);
+    opacity: 0.8;
+
+    &:hover {
+      background-color: var(--button-color);
+    }
+  }
+}
+
+select {
+  padding-right: 2em;
+  background-image: url("pages/admin/angle-down-solid.svg");
+  background-position: top 50% right 0.5em;
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+  margin-bottom: 0.25em;
+}
+
+form.button-to {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}