pages_core 3.5.1 → 3.6.0

data/app/assets/stylesheets/pages/admin/components/buttons.scss

@@ -3,3 +3,21 @@ form.button-to {
   margin: 0;
   padding: 0;
 }
+
+// button, a.button {
+//   display: inline-block;
+//   background: #fff;
+//   color: $c-text-light;
+//   line-height: 34px;
+//   border: 1px solid $c-border;
+//   padding: 0px 30px;
+//   border-radius: 5px;
+//   cursor: pointer;
+//   text-decoration: none;
+//   font-size: 14px;
+
+//   &[type=submit] {
+//     border-color: $c-text-light;
+//     color: $c-text;
+//   }
+// }

data/app/assets/stylesheets/pages/admin/components/forms.scss

@@ -7,30 +7,99 @@ form {
     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: #444;
+      color: $c-text;
+      transition: color 150ms ease-out;
+
+      &.check-box, &.radio-button {
+        font-weight: normal;
+      }
+      &.radio-button {
+        display: inline-block;
+        margin-right: 10px;
+      }
     }
 
     .description {
-      color: #888;
+      color: $c-text-light;
       margin: 0 0 6px 0;
     }
   }
 
+  .field-with-warning {
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    textarea {
+      border-color: mix($c-border, $c-red, 75%);
+    }
+    label {
+      color: $c-red;
+    }
+  }
+
   .field-with-errors {
-    background: #fff0f3;
-    border-top: 1px solid #ffd0d3;
-    border-bottom: 1px solid #ffd0d3;
+    background: $c-red-invert;
+    border-top: 1px solid mix($c-red-invert, $c-red, 90%);
+    border-bottom: 1px solid mix($c-red-invert, $c-red, 90%);
     margin: 0 -32px -1px -32px;
     padding: 12px 32px 16px 32px;
 
     label {
-      color: #c00007;
+      color: $c-red;
+    }
+  }
+
+  .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: $c-text-light;
+        }
+      }
+    }
+    .remove-dates {
+      margin-top: 12px;
     }
   }
 }
@@ -42,23 +111,25 @@ form {
   background: transparent image-url("pages/admin/warning-icon.gif") right 5px no-repeat;
 }
 
-main {
-  input[type=text],
-  input[type=password],
-  textarea {
-    border: 1px solid #d4d4d4;
-    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;
+input[type=text],
+input[type=password],
+textarea {
+  width: 100%;
+  max-width: 450px;
+  min-width: 200px;
+  border: 1px solid $c-border;
+  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: $c-border-light;
+    color: $c-text-light;
   }
 
-  input[type=text],
-  input[type=password] {
-    width: 100%;
-    max-width: 450px;
-    min-width: 200px;
+  &.warn {
+    border-color: red;
   }
 }
 
@@ -69,3 +140,10 @@ input[type=password] {
     font-size: 1.4em;
   }
 }
+
+fieldset {
+  padding: 0px;
+  margin: 0px;
+  border: none;
+  border-bottom: 1px solid $c-border;
+}

data/app/assets/stylesheets/pages/admin/components/header.scss

@@ -1,13 +1,7 @@
 header {
-  //display: block;
-  background: #000;
-  height: 82px;
-  //clear: both;
-  color: #ddd;
-  font-size: 11px;
-  text-shadow: 0 0 0 #000;
-  -moz-opacity: 0.9999;
-  border-bottom: 1px solid #555;
+  background: $c-background-invert;
+  height: 86px;
+  color: $c-text-invert;
 
   a,
   a:visited {
@@ -15,7 +9,7 @@ header {
     border: 0;
     padding: 0;
     margin: 0;
-    color: #fff;
+    color: $c-text-invert;
   }
 
   #logo {
@@ -28,7 +22,7 @@ header {
   }
 
   #site-name {
-    color: #fff;
+    color: $c-text-invert;
     position: absolute;
     top: 15px;
     left: 52px;
@@ -48,12 +42,12 @@ header {
   }
 
   .user {
-    font-size: 12px;
+    font-size: 13px;
     position: absolute;
     top: 20px;
     right: 16px;
     .separator {
-      color: #777;
+      color: $c-text-light;
       margin: 0 4px;
     }
   }
@@ -81,21 +75,18 @@ header {
       margin: 0;
       padding: 0;
       font-weight: normal;
-      font-size: 12px;
+      font-size: 13px;
     }
 
     a,
     a:visited {
-      background: #484848;
-      border-left: 1px solid #383838;
-      border-right: 1px solid #383838;
-      color: #fff;
-      text-shadow: #404040 1px 1px 1px;
+      background: #333;
+      color: $c-text-invert;
       display: block;
       float: left;
       padding: 0 15px;
-      padding-top: 8px;
-      height: 28px;
+      line-height: 32px;
+      height: 32px;
       margin: 0 2px 0 0;
       text-decoration: none;
     }
@@ -104,10 +95,7 @@ header {
     a.current,
     a.current:visited {
       @include vertical-gradient(#cfcfcf, #fefefe);
-      border-left: 1px solid #fefefe;
-      border-right: 1px solid #fefefe;
-      color: #000;
-      text-shadow: #fff 1px 1px 1px;
+      color: $c-text;
     }
   }
 }
@@ -126,10 +114,10 @@ header {
   }
 
   li.current {
-    background: #fff;
+    background: $c-background;
     padding: 5px 16px;
     border: 1px solid #cae6f1;
-    border-bottom: 1px solid #fff;
+    border-bottom: 1px solid $c-background;
     a,
     a:visited {
       text-decoration: none;
@@ -144,7 +132,7 @@ header {
   padding: 16px 32px;
   display: block;
   border-bottom: 1px solid #d4eaf4;
-  color: #000;
+  color: $c-text;
 
   em {
     font-style: normal;

data/app/assets/stylesheets/pages/admin/components/image_editor.scss

@@ -0,0 +1,195 @@
+.editable-image {
+  cursor: pointer;
+  display: block;
+  transition: transform 200ms, box-shadow 200ms, border-color 200ms ease-out;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.0);
+  border: 1px solid #fff;
+  position: relative;
+  -webkit-perspective: 1000;
+
+  .alt-warning {
+    position: absolute;
+    bottom: 5px;
+    right: 6px;
+    font-size: 14px;
+    color: $c-warn-light;
+    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0);
+  }
+
+  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);
+  }
+}
+
+.image-editor {
+  width: 80vw;
+  height: 80vh;
+  display: flex;
+  @include breakpoint-mobile {
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  .toolbars {
+    .aspect-ratios {
+      border-top: 0px;
+    }
+  }
+
+  .visual {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .image-container {
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+    background: #ddd;
+    background-image: image-url("pages/admin/image-editor-bg.png");
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid $c-border;
+    border-top: 0px;
+
+    .image-wrapper {
+      position: absolute;
+      flex-grow: 0;
+
+      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        position: relative;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+      .ReactCrop {
+        width: 100%;
+        background-color: transparent;
+      }
+      .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;
+          width: 33.33%;
+          height: 100%;
+          left: 33.33%;
+        }
+        &:after {
+          border-top-width: 1px;
+          border-bottom-width: 1px;
+          width: 100%;
+          height: 33.33%;
+          top: 33.33%;
+        }
+      }
+      .ReactCrop--active .ReactCrop__crop-selection {
+        &:before, &:after {
+          opacity: 0.75;
+        }
+      }
+    }
+
+    .loading {
+      color: $c-text-light;
+    }
+  }
+
+  form {
+    width: 300px;
+    display: block;
+    margin-left: 20px;
+
+    textarea {
+      max-width: 100%;
+      &.caption {
+        height: 100px;
+      }
+    }
+
+    .embed-code {
+      input {
+        width: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    @include breakpoint-mobile {
+      width: 100%;
+      margin-left: 0px;
+      padding-bottom: 20px;
+      textarea.caption {
+        height: inherit;
+      }
+    }
+  }
+
+  .focal-editor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    overflow: hidden;
+
+    .focal-point {
+      &:after {
+        content: "";
+        display: block;
+        width: 32px;
+        height: 32px;
+        border-radius: 16px;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        margin-left: -4px;
+        margin-top: -4px;
+        transition: all 200ms ease-out;
+      }
+
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border: 3px solid rgba(222, 255, 255, 0.5);
+      border-radius: 15px;
+      margin-left: -15px;
+      margin-top: -15px;
+      top: 0px;
+      left: 0px;
+      touch-action: none;
+      user-select: none;
+      cursor: pointer;
+      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms,
+                  border-color 200ms ease-out;
+      &:hover {
+        &:after {
+          width: 42px;
+          height: 42px;
+          border-radius: 21px;
+        }
+        border-color: rgba(222, 255, 255, 0.9);
+        width: 40px;
+        height: 40px;
+        border-radius: 20px;
+        margin-left: -20px;
+        margin-top: -20px;
+      }
+    }
+  }
+}