pages_core 3.5.1 → 3.6.0

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

@@ -1,15 +1,18 @@
 .sidebar {
-  background: #f5f5f5;
+  background: $c-background-disabled;
   box-shadow: inset 5px 0px 5px rgba(0, 0, 0, 0.05);
   line-height: 1.3;
-  color: #454545;
+  color: $c-text;
 
   h2 {
-    margin: 16px 0 -8px 0;
-    padding: 0 0 8px 0;
-    color: #424140;
+    margin: 20px 0 0px 0;
+    padding: 0 0 10px 0;
+    color: $c-text;
     font-size: 18px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid $c-border;
+    &:first-child {
+      margin-top: 16px;
+    }
   }
 
   ul {

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

@@ -1,39 +1,42 @@
 .tag-editor {
+  margin-top: 10px;
   margin-bottom: 1.5em;
-  max-width: 600px;
 
   .tags {
     line-height: 1.5;
   }
 
   .tag {
+    font-size: 13px;
     cursor: pointer;
     display: block;
     float: left;
     margin: 0 5px 5px 0;
-    padding: 4px 5px;
-    background: #f8f8f8;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    line-height: 1;
+    padding: 0px 10px;
+    background: $c-background-disabled;
+    border-radius: 5px;
+    line-height: 26px;
+    line-height: 36px;
     min-width: 40px;
+    transition: all 200ms ease-out;
 
     input {
-      float: left;
-      margin: 2px 0 0 0;
+      margin: 2px 3px 0 0;
     }
 
     .name {
-      float: left;
       padding: 1px 5px;
       margin: 0;
     }
 
     &.enabled {
-      background: #396e97;
-      border-color: #274b67;
+      //background: #396e97;
+      //border-color: #274b67;
+      //text-shadow: #274b67 1px 1px 1px;
+
       color: #fff;
-      text-shadow: #274b67 1px 1px 1px;
+      background: $c-link;
+      background: $c-blue-dark;
     }
   }
 
@@ -44,11 +47,13 @@
   }
 
   input.add-tag {
-    margin: 0 4px 0 0;
-    padding: 4px 3px 3px 3px;
+    margin-top: 0px;
+    border-radius: 5px;
+    //margin: 0 4px 0 0;
+    //padding: 4px 3px 3px 3px;
 
     &.example {
-      color: #888;
+      color: $c-text-light;
     }
   }
 }

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

@@ -2,75 +2,5 @@ textarea.rich {
   margin-top: -32px;
   padding-top: 8px + 32px;
   width: 100%;
-}
-
-.rich-text-toolbar {
-  @extend %clearfix;
-  position: relative;
-  display: block;
-  list-style: none;
-  border-top: 1px solid #d7d7d7;
-  border-bottom: 1px solid #d7d7d7;
-  background-color: #fafafa;
-  margin: 0px 1px 0px 1px;
-  padding: 0px 10px 0px 0px;
-  line-height: 30px;
-  width: auto;
-  box-shadow: 0px 1px 1px #fff;
-
-  li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .button {
-    float: left;
-
-    a {
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      display: block;
-      cursor: pointer;
-      width: 35px;
-      float: left;
-      border-left: 1px solid #fff;
-      border-right: 1px solid #d7d7d7;
-      color: #555;
-      font-size: 14px;
-      background-color: #F6F6F6;
-      &:focus,
-      &:hover {
-        color: #000;
-        background: #fdfdfd;
-      }
-
-      // font-awesome doesn't have h1-h6, so we'll apply some tricks
-      &.header {
-        vertical-align: bottom;
-        i {
-          margin-left: -6px;
-        }
-        i:after {
-          font-family: Helvetica, Georgia, serif;
-          font-weight: bold;
-          font-size: 13px;
-          display: inline-block;
-          position: absolute;
-          bottom: 3px;
-        }
-        &.h1 i::after { content: "1" }
-        &.h2 i::after { content: "2" }
-        &.h3 i::after { content: "3" }
-        &.h4 i::after { content: "4" }
-        &.h5 i::after { content: "5" }
-        &.h6 i::after { content: "6" }
-      }
-    }
-
-    span {
-      display: none;
-    }
-  }
+  max-width: none;
 }

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

@@ -0,0 +1,51 @@
+.toast-wrapper {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  z-index: 200;
+
+  .toast {
+    font-size: 14px;
+    display: inline-block;
+    background: $c-background-invert;
+    color: white;
+    margin: 20px auto 0px auto;
+    padding: 15px 30px;
+    min-width: 50%;
+    text-align: left;
+    animation-duration: 500ms;
+    animation-name: toast-appear;
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-fill-mode: forwards;
+
+    &.error {
+      background: $c-red;
+    }
+
+    &.fadeout {
+      animation-duration: 300ms;
+      animation-name: toast-disappear;
+      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+    }
+  }
+}
+
+@keyframes toast-appear {
+  from {
+    transform: translateZ(0px) translateY(60px);
+  }
+  to {
+    transform: translateZ(0px) translateY(0px);
+  }
+}
+
+@keyframes toast-disappear {
+  from {
+    transform: translateZ(0px) translateY(0px);
+  }
+  to {
+    transform: translateZ(0px) translateY(60px);
+  }
+}

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

@@ -0,0 +1,108 @@
+.toolbar {
+  @extend %clearfix;
+  position: relative;
+  display: block;
+  list-style: none;
+  margin: 0px;
+  border: 1px solid $c-border;
+  background-color: #fafafa;
+  padding: 0px 10px 0px 0px;
+  line-height: 30px;
+  width: auto;
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .info {
+    float: right;
+    color: $c-text-lighter;
+    padding: 0px 10px;
+  }
+
+  .label {
+    float: left;
+    padding: 0px 10px;
+    color: $c-text-light;
+    border-right: 1px solid $c-border;
+  }
+
+  .button,
+  button {
+    float: left;
+    display: inline;
+    margin: 0px;
+    padding: 0px 7px;
+    height: 30px;
+    vertical-align: middle;
+    line-height: 30px;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+    min-width: 35px;
+    border: 0px;
+    border-left: 1px solid #fff;
+    border-right: 1px solid $c-border;
+    color: $c-text-light;
+    font-size: 12px;
+    background-color: $c-button;
+    transition: all 200ms ease-out;
+
+    i.fa {
+      font-size: 14px;
+    }
+
+    &:focus,
+    &:hover {
+      color: $c-text;
+      background: #fdfdfd;
+    }
+
+    &[disabled] {
+      opacity: 0.33;
+      cursor: default;
+      &:focus, &:hover {
+        color: $c-text-light;
+        background: inherit;
+      }
+    }
+
+    &.active {
+      color: $c-text-invert;
+      background: #666;
+      border-left: 1px solid #555;
+      border-right: 1px solid #888;
+    }
+
+    // font-awesome doesn't have h1-h6, so we'll apply some tricks
+    &.header {
+      vertical-align: bottom;
+      i {
+        margin-left: -6px;
+      }
+      i:after {
+        font-family: Helvetica, Georgia, serif;
+        font-weight: bold;
+        font-size: 13px;
+        display: inline-block;
+        position: absolute;
+        bottom: 3px;
+      }
+      &.h1 i::after { content: "1" }
+      &.h2 i::after { content: "2" }
+      &.h3 i::after { content: "3" }
+      &.h4 i::after { content: "4" }
+      &.h5 i::after { content: "5" }
+      &.h6 i::after { content: "6" }
+    }
+  }
+
+  &.rich-text {
+    margin: 0px 1px 0px 1px;
+    border-left: none;
+    border-right: none;
+    box-shadow: 0px 1px 1px #fff;
+  }
+}

data/app/assets/stylesheets/pages/admin/controllers/pages.scss

@@ -104,37 +104,25 @@
   }
 }
 
-.news-item-list {
+.news-item-list,
+.calendar-item-list {
   .name {
     line-height: 1.5;
-  }
-
-  .name .name_link {
-    font-weight: bold;
-  }
-
-  .name .status_label {
-    color: #666;
+    small {
+      font-weight: normal;
+    }
   }
 
   .draft,
   .hidden,
   .autopublish,
   .reviewed {
-    background: #f4f4f4;
+    background: $c-background-disabled;
   }
 
   .pinned .name {
-    background: #fff8e8;
     background: transparent image-url("pages/admin/list-table-pin-blue.gif") no-repeat 13px 50%;
   }
-
-  .draft .name,
-  .hidden .name,
-  .autopublish .name,
-  .autopublish .reviewed {
-    background: transparent image-url("pages/admin/list-table-pin-disabled.gif") no-repeat 13px 50%;
-  }
 }
 
 .edit-page {
@@ -158,7 +146,7 @@
   main & input.page_title {
     font-weight: bold;
     font-size: 1.4em;
-    color: #222;
+    color: $c-text;
   }
 }
 
@@ -175,7 +163,7 @@
   }
   li {
     line-height: 30px;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $c-border;
     &:first-child {
       border-top: 0px;
     }
@@ -190,7 +178,7 @@
     height: 30px;
   }
   .ui-sortable-helper {
-    border: 1px solid #ddd !important;
+    border: 1px solid $c-border !important;
     background: rgba(250, 250, 250, 0.8);
   }
 }

data/app/assets/stylesheets/pages/admin/controllers/users.scss

@@ -1,3 +1,3 @@
 table.users tr.invite td {
-  color: #888;
-}
+  color: $c-text-light;
+}

data/app/assets/stylesheets/pages/admin/vars.scss

@@ -1,8 +1,30 @@
-$breakpoint-mobile: 720px;
+$breakpoint-mobile: 900px;
 
-$c-link: #1d7195;
+$c-red: #c00007;
+$c-red-invert: #fff0f3;
+$c-green: #19ac1e;
+$c-blue: #1d7195;
+$c-blue-dark: darken($c-blue, 15%);
+
+$c-warn-light: #ffdfa0;
+
+$c-background: #fff;
+$c-background-invert: #000;
+$c-background-disabled: #f8f8f8;
+
+$c-text: #111;
+$c-text-light: #666;
+$c-text-lighter: #999;
+$c-text-invert: #fff;
+
+$c-border: #ddd;
+$c-border-light: #eee;
+
+$c-link: $c-blue;
 $c-link-hover: darken($c-link, 10%);
-$c-create: #19ac1e;
+$c-create: $c-green;
 $c-create-hover: darken($c-create, 10%);
-$c-delete: #a21402;
+$c-delete: $c-red;
 $c-delete-hover: darken($c-delete, 10%);
+
+$c-button: #f6f6f6;