pages_core 3.13.0 → 3.15.0

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

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

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

@@ -1,18 +1,17 @@
 .attachments {
   margin-bottom: 40px;
 
-  & .drop-target {
+  .drop-target {
     position: relative;
     width: 100%;
     text-align: center;
-    line-height: 1.6;
     margin-top: 20px;
 
     &:first-child {
       margin-top: 0px;
     }
 
-    & .upload-button {
+    .upload-button {
       width: 100%;
       display: flex;
       flex-direction: column;
@@ -23,19 +22,21 @@
     }
   }
 
-  & .attachment {
+  .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;
+    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;
+      font-size: 0.875rem;
       margin-top: -1px;
       border-top: 1px solid var(--border-color);
       background: var(--background-disabled-color);
@@ -49,11 +50,11 @@
       padding-left: 56px;
       background: var(--background-disabled-color);
 
-      & .attachment-info {
+      .attachment-info {
         opacity: 0.5;
       }
 
-      & .actions {
+      .actions {
         display: none;
       }
     }
@@ -62,14 +63,16 @@
       margin-bottom: 0px;
     }
 
-    & .actions {
+    .actions {
       float: right;
+      display: flex;
+      gap: 0.25rem;
     }
 
-    & h3 {
+    h3 {
       margin: 0px 0px 12px 0px;
 
-      & .icon {
+      .icon {
         display: block;
         float: left;
         margin-left: -40px;
@@ -77,26 +80,11 @@
       }
     }
 
-    & p {
+    p {
       &:last-child {
         margin-bottom: 0px;
       }
     }
-
-    & button {
-      cursor: pointer;
-      border: 1px solid var(--border-color);
-      border-radius: 3px;
-      background: var(--button-color);
-      padding: 5px 20px;
-      font-size: 12px;
-      color: var(--text-color);
-
-      &:hover,
-      &:focus {
-        background: #fff;
-      }
-    }
   }
 }
 
@@ -109,23 +97,23 @@
     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 {

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

@@ -3,29 +3,11 @@ body {
   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);
 }
 
@@ -42,7 +24,7 @@ th {
 }
 
 div.content {
-  margin: 0 32px;
+  margin: 1.5rem 2rem;
 }
 
 table.show th,
@@ -51,54 +33,6 @@ td {
   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;
 }
@@ -106,7 +40,6 @@ img.thumbnail {
 li .actions {
   font-weight: normal;
   display: inline;
-  font-size: 12px;
   color: var(--text-light-color);
   margin-top: 1px;
 }

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: 4rem;
+        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,30 @@ form.button-to {
   margin: 0;
   padding: 0;
 }
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.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);
+    }
+  }
+}