pages_core 3.14.0 → 3.15.1

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

@@ -1,25 +1,35 @@
 main form {
-  margin: 16px 32px;
+  margin: 1.5rem 2rem;
 }
 
 form {
-  & .field {
-    margin: 16px 0;
+  .field {
+    margin: 1.5rem 0;
     padding: 0;
+    @mixin child-margins;
+
+    .date-select {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+      .time {
+        width: 5rem;
+        min-width: 2rem;
+      }
+    }
 
-    & input[type="text"],
-    & input[type="password"],
-    & input[type="email"],
-    & textarea {
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    textarea {
       transition: border-color 150ms ease-out;
     }
 
-    & label {
+    label {
       display: block;
       padding: 0;
       margin: 0 0 4px 0;
-      font-weight: bold;
-      font-size: 13px;
+      font-weight: var(--bold-weight);
       color: var(--text-color);
       transition: color 150ms ease-out;
 
@@ -34,43 +44,44 @@ form {
       }
     }
 
-    & .description {
+    .description {
+      display: block;
       color: var(--text-light-color);
       margin: 0 0 6px 0;
     }
   }
 
-  & .field-with-warning {
-    & input[type="text"],
-    & input[type="password"],
-    & input[type="email"],
-    & textarea {
+  .field-with-warning {
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    textarea {
       border-color: var(--red-light);
     }
 
-    & label {
+    label {
       color: var(--red);
     }
   }
 
-  & .field-with-errors {
+  .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 {
+    label {
       color: var(--red);
     }
   }
 
-  & .row {
+  .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -16px;
 
-    & .field {
+    .field {
       margin-right: 16px;
 
       &.text-field {
@@ -79,24 +90,20 @@ form {
       }
     }
 
-    & input[type="text"],
-    & input[type="password"] {
+    input[type="text"],
+    input[type="password"] {
       width: 100%;
       max-width: none;
     }
   }
 
-  & .date-range-select {
-    & .date {
+  .date-range-select {
+    .date {
       line-height: 34px;
       display: inline-block;
       white-space: nowrap;
 
-      & .date-select {
-        display: inline-block;
-      }
-
-      & input[type="text"] {
+      input[type="text"] {
         display: inline;
         width: auto;
         min-width: auto;
@@ -105,21 +112,21 @@ form {
       }
     }
 
-    & .to {
+    .to {
       margin: 0px 8px;
     }
   }
 
-  & .page-dates {
+  .page-dates {
     margin-bottom: 40px;
 
-    & .toggles {
-      & label {
+    .toggles {
+      label {
         font-weight: normal;
         display: inline-block;
         margin-right: 12px;
 
-        & input {
+        input {
           margin-right: 6px;
         }
 
@@ -129,7 +136,7 @@ form {
       }
     }
 
-    & .remove-dates {
+    .remove-dates {
       margin-top: 12px;
     }
   }
@@ -151,10 +158,11 @@ textarea {
   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;
+  padding: 0.5rem 0.75rem;
+
+  &.tight {
+    padding: 0.25rem 0.5rem;
+  }
 
   &:disabled {
     border-color: var(--border-color-light);
@@ -166,13 +174,6 @@ textarea {
   }
 }
 
-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;
@@ -180,12 +181,18 @@ fieldset {
   border-bottom: 1px solid var(--border-color);
 }
 
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
 button,
 select {
   appearance: none;
   cursor: inherit;
   font-family: var(--font-os-sans);
-  font-size: 13px;
+  font-size: 0.875rem;
   color: var(--text-color);
   line-height: 1.5;
   border: 1px solid var(--button-border-color);
@@ -194,6 +201,10 @@ select {
   background: var(--button-color);
   box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.25);
 
+  .icon {
+    margin-right: 8px;
+  }
+
   &:hover {
     background-color: var(--button-color-hover);
   }
@@ -206,6 +217,27 @@ select {
       background-color: var(--button-color);
     }
   }
+
+  &.primary {
+    background: var(--text-color);
+    border-color: var(--text-color);
+    color: var(--text-invert-color);
+    box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.2);
+    &:hover {
+      box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &.transparent {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0.25rem 0.25rem;
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
 }
 
 select {
@@ -222,3 +254,32 @@ form.button-to {
   margin: 0;
   padding: 0;
 }
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 2rem;
+  @mixin child-margins;
+}
+
+.inline-form {
+  display: flex;
+  input {
+    flex: 1 1 auto;
+    border-right: none;
+    &:focus {
+      z-index: 20;
+    }
+  }
+  button {
+    border-radius: 0px;
+    white-space: nowrap;
+    border-right: none;
+    &:last-child {
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border-right: 1px solid var(--button-border-color);
+    }
+  }
+}

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

@@ -1,10 +1,13 @@
 header {
   background: var(--background-invert-color);
-  height: 86px;
+  padding: 1.25rem 1rem 0rem 1rem;
   color: var(--text-invert-color);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 
-  & a,
-  & a:visited {
+  a,
+  a:visited {
     background: none;
     border: 0;
     padding: 0;
@@ -12,44 +15,38 @@ header {
     color: var(--text-invert-color);
   }
 
-  & .logo {
-    position: absolute;
-    z-index: 2;
-    top: 11px;
-    left: 16px;
-    width: 21px;
-    height: 27px;
+  .logo {
+    background: url("pages/admin/icon.svg");
+    background-repeat: no-repeat;
+    min-height: 27px;
+    padding-left: 38px;
   }
 
-  & .site-name {
+  .site-name {
     color: var(--text-invert-color);
-    position: absolute;
-    top: 15px;
-    left: 52px;
+    flex-grow: 1;
 
-    & h1 {
+    h1 {
       margin: 0;
       padding: 0;
-      font-family: Arial, Helvetica, sans-serif;
       display: inline;
-      font-size: 20px;
+      font-size: 1.4rem;
+      letter-spacing: -0.04rem;
       font-weight: normal;
 
-      & a {
-        font-weight: bold;
+      a {
+        font-weight: 800;
         text-decoration: none;
         padding-right: 6px;
       }
     }
   }
 
-  & .user {
-    font-size: 13px;
-    position: absolute;
-    top: 20px;
-    right: 16px;
+  .user {
+    display: flex;
+    align-items: center;
 
-    & a {
+    a {
       border-left: 1px solid var(--text-light-color);
       padding-left: 10px;
       margin-left: 6px;
@@ -62,35 +59,32 @@ header {
     }
   }
 
-  & .tabs {
-    position: absolute;
-    top: 54px;
-    height: 29px;
-    left: 16px;
-    right: 8px;
+  .tabs {
+    display: flex;
+    overflow: scroll;
+    width: 100%;
+    gap: 8px;
 
-    & ul {
-      padding: 0;
-      margin: 0 8px 0 0;
+    ul {
+      padding: 0px;
+      margin: 0px;
       list-style-type: none;
-      display: block;
-      float: left;
+      display: flex;
+      gap: 4px;
 
       &.account {
-        float: right;
+        flex-grow: 1;
+        justify-content: flex-end;
       }
     }
 
-    & li {
-      display: inline;
+    li {
       margin: 0;
       padding: 0;
-      font-weight: normal;
-      font-size: 13px;
     }
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       background: #333;
       color: var(--text-invert-color);
       display: block;
@@ -98,13 +92,13 @@ header {
       padding: 0 15px;
       line-height: 32px;
       height: 32px;
-      margin: 0 2px 0 0;
+      margin: 0px;
       text-decoration: none;
     }
 
-    & a:hover,
-    & a.current,
-    & a.current:visited {
+    a:hover,
+    a.current,
+    a.current:visited {
       background: linear-gradient(to bottom, #cfcfcf 0%, #fefefe 100%);
       color: var(--text-color);
     }
@@ -116,22 +110,22 @@ header {
   margin: 24px 0px -12px -18px;
   padding: 0;
 
-  & li {
+  li {
     color: hsla(0, 0%, 0%, 0.25);
     display: inline;
     background: transparent;
     padding: 6px 17px;
-    font-weight: bold;
   }
 
-  & li.current {
+  li.current {
     background: var(--background-color);
     padding: 5px 16px;
     border: 1px solid #cae6f1;
     border-bottom: 1px solid var(--background-color);
+    font-weight: var(--bold-weight);
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       text-decoration: none;
       color: #444;
     }
@@ -146,15 +140,19 @@ header {
   border-bottom: 1px solid #d4eaf4;
   color: var(--text-color);
 
-  & em {
+  h3 {
+    font-weight: var(--bold-weight);
+  }
+
+  em {
     font-style: normal;
     color: #4a5357;
   }
 
-  & .links {
+  .links {
     float: right;
 
-    & a {
+    a {
       border-left: 1px solid #779cb3;
       padding-left: 8px;
       margin-left: 8px;
@@ -166,14 +164,14 @@ header {
       }
 
       &.current {
-        font-weight: bold;
+        font-weight: var(--bold-weight);
         text-decoration: none;
         color: var(--text-color);
       }
     }
   }
 
-  & .separator {
+  .separator {
     color: #779cb3;
     margin: 0 4px;
   }
@@ -182,6 +180,6 @@ header {
 main .page-description h3 {
   margin: 0;
   padding: 0;
-  font-size: 13px;
+  font-size: 0.875rem;
   text-shadow: #e9f6ff 1px 1px 1px;
 }

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

@@ -1,30 +1,33 @@
 .editable-image {
   cursor: pointer;
   display: block;
-  transition: transform 200ms, box-shadow 200ms, border-color 200ms ease-out;
+  transition:
+    transform 200ms,
+    box-shadow 200ms,
+    border-color 200ms ease-out;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0);
   border: 1px solid #fff;
   position: relative;
   -webkit-perspective: 1000;
 
-  & .alt-warning {
+  .alt-warning {
     position: absolute;
     bottom: 5px;
     right: 6px;
-    font-size: 14px;
+    font-size: 1rem;
     color: var(--background-warning-color);
     text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
     z-index: 100;
   }
 
-  & img {
+  img {
     display: block;
   }
 
   &:hover {
     border-color: rgba(20, 20, 20, 0.5);
     transform: scale(1.01) translate(0px, -1px);
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -39,19 +42,19 @@
     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%;
@@ -61,7 +64,11 @@
       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;
+    background-position:
+      0 0,
+      6px 0,
+      6px -6px,
+      0px 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -69,7 +76,7 @@
     border: 1px solid var(--border-color);
     border-top: 0px;
 
-    & .image-wrapper {
+    .image-wrapper {
       position: absolute;
       flex-grow: 0;
 
@@ -77,18 +84,18 @@
         position: relative;
       }
 
-      & img {
+      img {
         display: block;
         width: 100%;
         height: auto;
       }
 
-      & .ReactCrop {
+      .ReactCrop {
         width: 100%;
         background-color: transparent;
       }
 
-      & .ReactCrop__crop-selection {
+      .ReactCrop__crop-selection {
         &:before,
         &:after {
           content: "";
@@ -115,7 +122,7 @@
         }
       }
 
-      & .ReactCrop--active .ReactCrop__crop-selection {
+      .ReactCrop--active .ReactCrop__crop-selection {
         &:before,
         &:after {
           opacity: 0.75;
@@ -123,17 +130,17 @@
       }
     }
 
-    & .loading {
+    .loading {
       color: var(--text-light-color);
     }
   }
 
-  & form {
+  form {
     width: 300px;
     display: block;
     margin-left: 20px;
 
-    & textarea {
+    textarea {
       max-width: 100%;
 
       &.caption {
@@ -141,8 +148,8 @@
       }
     }
 
-    & .embed-code {
-      & input {
+    .embed-code {
+      input {
         width: 50%;
         margin-right: 8px;
       }
@@ -153,20 +160,20 @@
       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;
@@ -190,7 +197,11 @@
       touch-action: none;
       user-select: none;
       cursor: pointer;
-      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms,
+      transition:
+        border-radius 200ms,
+        margin 200ms,
+        width 200ms,
+        height 200ms,
         border-color 200ms ease-out;
 
       &:hover {