pageflow 15.6.1 → 15.7.1

data/app/assets/stylesheets/pageflow/editor/menu.scss

@@ -1,7 +1,7 @@
 ul.menu {
   margin-top: 10px;
   margin-bottom: 10px;
-  border-top: 1px solid #bbb;
+  border-top: 1px solid var(--ui-on-surface-color-lightest);
 
   li {
     position: relative;
@@ -9,10 +9,10 @@ ul.menu {
 
   a:first-child {
     @include right-open-icon;
-    @include background-icon-right($color: #888);
+    @include background-icon-right($color: var(--ui-primary-color-light));
 
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid var(--ui-on-surface-color-lightest);
     display: block;
-    padding: 10px 10px;
+    padding: space(2.5);
   }
-}
+}

data/app/assets/stylesheets/pageflow/editor/notifications.scss

@@ -1,7 +1,6 @@
 .notifications {
-  background-color: #fff;
-  border-bottom: solid 1px #ccc;
-  color: #888;
+  border-bottom: solid 1px var(--ui-on-surface-color-lightest);
+  color: var(--ui-on-surface-color-light);
   font-size: 11px;
 
   margin: -10px -10px 10px -10px;
@@ -35,40 +34,42 @@
   }
 
   li {
-    @include background-icon-left($font-size: 15px, $left: 15px, $color: #888);
+    @include background-icon-left($font-size: 15px, $left: 15px, $color: var(--ui-primary-color-light));
     padding: 4px 10px 4px 35px;
   }
 
   li.uploading {
     @include background-icon-animation(blink);
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color-light));
     @include up-bold-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.saving {
     @include background-icon-animation(blink);
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color-light));
     @include arrows-ccw-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.failed {
     @include background-icon-animation(blink);
-    @include background-icon-color(#d00);
+    @include background-icon-color(var(--ui-error-color));
     @include attention-icon;
-    color: #444;
+    color: var(--ui-primary-color-light);
     display: none;
   }
 
   li.confirmable_files {
-    @include background-icon-left($font-size: 15px, $top: 15px, $left: 15px, $color: #888);
+    @include background-icon-left($font-size: 15px, $top: 15px, $left: 15px, $color: var(--ui-primary-color));
     @include background-icon-animation(blink);
     @include bell-icon;
-    background-color: #D2E5FA;
-    color: #000;
+    margin: space(1) space(1) space(1) 0;
+    background-color: var(--ui-selection-color-lighter);
+    border-radius: rounded(md);
+    color: var(--ui-on-surface-color);
     padding-top: 8px;
     display: none;
   }
@@ -76,4 +77,4 @@
   li.saved {
     @include check-icon;
   }
-}
+}

data/app/assets/stylesheets/pageflow/editor/other_entry_item.scss

@@ -1,12 +1,16 @@
 .other_entry_item {
   width: 100%;
-  padding: 4px 0;
+
+  &:hover {
+    background-color: var(--ui-selection-color-lighter);
+  }
 
   &.active {
-    background-color: $highlight-color;
+    background-color: var(--ui-selection-color-light);
   }
 
   a {
-    padding-left: 4px;
+    display: block;
+    padding: space(2);
   }
 }

data/app/assets/stylesheets/pageflow/editor/outline.scss

@@ -1,18 +1,50 @@
 ul.outline {
   &.navigatable li a:first-child {
     @include right-open-icon;
-    @include background-icon-right($color: #888);
+    @include background-icon-right($color: var(--ui-primary-color-light));
+  }
+
+  .drag_handle {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    line-height: 8px;
+    vertical-align: middle;
+    padding: 0 space(1.5) 0 space(0.5);
+    font-family: "entypo";
+    font-size: 10px;
+    opacity: 0.6;
+
+    &::before {
+      content: "\e75f";
+    }
+
+    &::after {
+      content: "\e75c";
+    }
+  }
+
+  .draggable .drag_handle {
+    display: inline-flex;
+    cursor: move;
+  }
+
+  a:hover .drag_handle {
+    opacity: 1;
   }
 
   li {
     position: relative;
-    background-color: #fff;
+    background-color: var(--ui-surface-color);
 
     > div:first-child,
     > a:first-child {
       display: block;
-      padding: 10px 10px 10px 70px;
-      background-color: #efefef;
+      padding: space(2.5) space(2.5) space(2.5) 70px;
+      background-color: var(--ui-primary-color-lightest);
+      border-radius: rounded();
+      overflow: hidden;
     }
 
     &.creating > a:first-child {
@@ -26,7 +58,7 @@ ul.outline {
     }
 
     &.active > a {
-      background-color: #D2E5FA;
+      background-color: var(--ui-selection-color-light);
     }
 
     &.draggable {
@@ -45,7 +77,7 @@ ul.outline {
       width: 35px;
       background-repeat: no-repeat;
       background-position: 3px 45%;
-      opacity: 0.2;
+      opacity: 0.3;
     }
 
     .page_thumbnail {
@@ -64,34 +96,40 @@ ul.outline {
       }
     }
 
-    &.display_in_navigation .type_pictogram {
-      opacity: 0.5;
+    &.hide_in_navigation a {
+      color: var(--ui-on-surface-color-light);
+    }
+
+    &.ui-sortable-helper {
+      box-shadow: var(--ui-box-shadow-xl);
     }
   }
 }
 
 ul.chapters {
   > li {
-    margin-bottom: 10px;
-    padding: 0 10px 10px 30px;
-
-    > a > .pictogram {
-      background-image: image-url("pageflow/chapter_pictogram_small.png");
-    }
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded();
+    margin-bottom: space(2.5);
+    padding: 0 space(2.5) space(2.5);
 
     > a:first-child {
-      margin: 0 -10px 0 -30px;
-      padding-left: 30px;
+      padding-left: 0;
+      background-color: transparent;
     }
 
     .number {
       font-weight: bold;
     }
   }
+
+  > .sortable-placeholder {
+    border: 0;
+  }
 }
 
 ul.pages {
-  margin: 20px 0 10px 0;
+  margin: 0 0 space(2.5) 0;
 
   > li {
     margin-bottom: 2px;
@@ -109,6 +147,6 @@ ul.dragged {
 }
 
 .sortable-placeholder {
-  outline: 1px dotted #aaa;
-  background-color: inherit !important;
+  outline: 1px dotted var(--ui-on-surface-color-lighter);
+  border-radius: rounded();
 }

data/app/assets/stylesheets/pageflow/editor/page_links.scss

@@ -9,23 +9,25 @@ div.page_links {
   }
 
   a.edit {
-    @include icon-only-button(#aaa);
+    @include icon-only-button;
     @include pencil-icon;
     position: absolute;
     right: 40px;
-    top: 4px;
+    top: 3px;
   }
 
   a.remove {
-    @include icon-only-button(#aaa);
+    @include icon-only-button("destructive");
     @include trash-icon;
     position: absolute;
     right: 4px;
-    top: 4px;
+    top: 3px;
   }
 
   li {
     margin-bottom: 2px;
+    border-radius: rounded();
+    overflow: hidden;
 
     > div:first-child {
       padding-left: 45px;
@@ -38,7 +40,7 @@ div.page_links {
 
     .label {
       margin-top: 10px;
-      color: #666;
+      color: var(--ui-on-surface-color-light);
     }
 
     .thumbnail,
@@ -49,12 +51,12 @@ div.page_links {
       height: 100%;
       width: 35px;
       background-size: cover;
-      background-color: #444;
     }
 
     .missing_page_thumbnail {
       @include attention-icon;
-      @include background-icon-center($color: #fff);
+      @include background-icon-center($color: var(--ui-error-color));
+      background-color: var(--ui-error-surface-color);
       display: none;
       position: absolute;
     }
@@ -63,4 +65,4 @@ div.page_links {
       display: block;
     }
   }
-}
+}

data/app/assets/stylesheets/pageflow/editor/page_selection.scss

@@ -1,31 +1,10 @@
 .page_selection {
   .box {
-    top: 5%;
-    width: 90%;
     max-width: 400px;
     max-height: 745px;
-    padding-bottom: 20px;
-    height: 80%;
   }
 
-  .wrapper {
-    background-color: #fff;
-    padding-right: 10px;
-
-    overflow: hidden;
-    overflow-y: scroll;
-
-    position: absolute;
-    top: 70px;
-    bottom: 70px;
-    left: 0;
-    right: 10px;
-
-    .storyline_picker_select_region {
-      margin: 0 10px 20px 30px;
-    }
-
-    h2,
+  .content {
     .add_page,
     .add_chapter {
       display: none;
@@ -36,10 +15,4 @@
       outline: none;
     }
   }
-
-  .footer {
-    position: absolute;
-    bottom: 20px;
-    right: 10px;
-  }
-}
+}

data/app/assets/stylesheets/pageflow/editor/publish_entry.scss

@@ -31,10 +31,10 @@
   }
 
   .notice {
-    @include background-icon-left($left: 10px, $top: 18px);
-
+    @include background-icon-left($color: var(--ui-primary-color), $left: 10px, $top: 18px);
+    background-color: var(--ui-selection-color-lighter);
+    border-radius: rounded(md);
     padding: 10px 10px 10px 40px;
-    border-bottom: solid 1px #aaa;
 
     &.files_pending {
       @include hourglass-icon;
@@ -67,7 +67,7 @@
     margin: 5px 0 0 0;
 
     &.invalid {
-      border: 1px solid red;
+      border: 1px solid var(--ui-error-color);
     }
   }
 
@@ -132,7 +132,7 @@
   }
 
   .save {
-    @include icon-button;
+    @include icon-button("primary");
     @include check-icon;
 
     margin-top: 15px;
@@ -140,6 +140,5 @@
 
   &.publishing .save {
     @include hourglass-icon;
-    @include icon-button($base-color: #aaa);
   }
 }

data/app/assets/stylesheets/pageflow/editor/quotas.scss

@@ -8,10 +8,9 @@
   }
 
   .quota_state {
-    @include background-icon-left($left: 7px, $top: 18px);
+    @include background-icon-left($left: 10px, $top: 18px);
     @include gauge-icon;
 
     padding: 10px 10px 10px 40px;
-    border-bottom: solid 1px #aaa;
   }
-}
+}

data/app/assets/stylesheets/pageflow/editor/select_button.scss

@@ -3,7 +3,7 @@
   float: right;
 
   button {
-    @include icon-button;
+    @include icon-button("primary");
     @include up-icon;
   }
 
@@ -18,28 +18,34 @@
 
     padding: 10px;
 
-    top: 14px;
+    top: 18px;
     right: -10px;
   }
 
   .dropdown-menu {
     position: relative;
-    background-color: #eee;
-    border: 1px solid #ccc;
+    background-color: var(--ui-surface-color);
+    border: 1px solid var(--ui-on-surface-color-lighter);
+    border-radius: rounded(sm);
+    box-shadow: var(--ui-box-shadow);
+    padding: 1px;
 
     li {
       padding: 7px 10px;
       cursor: pointer;
+
+      &:hover {
+        background-color: var(--ui-selection-color-light);
+      }
     }
   }
 
-
   &:hover .dropdown {
     @include transition(visibility 0ms, opacity 100ms, top 200ms);
     visibility: visible;
     pointer-events: auto;
 
-    top: 18px;
+    top: 20px;
     opacity: 1;
   }
 }

data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss

@@ -4,9 +4,5 @@
   right: 0;
   left: 0;
 
-  font-family: Helvetica, Arial, "Sans-Serif";
-  font-size: 13px;
-
-  border-top: solid 1px #aaa;
-  background-color: #fff;
+  border-top: solid 1px var(--ui-on-surface-color-lighter);
 }

data/app/assets/stylesheets/pageflow/editor/storyline_picker.scss

@@ -1,12 +1,16 @@
 .storyline_picker {
   position: relative;
 
+  .storyline_picker_storylines {
+    position: relative;
+  }
+
   .add_storyline,
   .edit_storyline {
     @include icon-only-button;
     display: none;
     position: absolute;
-    top: 11px;
+    bottom: 0;
   }
 
   .add_storyline {
@@ -29,4 +33,4 @@
       display: block;
     }
   }
-}
+}

data/app/assets/stylesheets/pageflow/editor/text_tracks.scss

@@ -1,39 +1,23 @@
 .text_tracks {
-  $table-cell-color: #eee;
-
-  height: 700px;
-
   .text_tracks_container {
-    background-color: #fff;
-    min-height: 100%;
+    margin-top: space(4);
+    display: flex;
   }
 
   .files_upload_panel {
-    position: absolute;
-    top: 60px;
-    right: 370px;
-    bottom: 50px;
-    left: 20px;
-    overflow: auto;
+    flex: 1;
+    margin-right: space(8);
   }
 
   .selected_file_panel {
-    position: absolute;
-    right: 20px;
-    top: 60px;
-    width: 330px;
+    width: 300px;
   }
 
   .table_view {
     width: 100%;
   }
 
-  td {
-    background-color: $table-cell-color;
-  }
-
   .upload {
-    position: relative;
-    top: 12px;
+    margin-top: space(4);
   }
 }

data/app/assets/stylesheets/pageflow/editor/widgets.scss

@@ -18,11 +18,11 @@
   }
 
   .settings {
-    @include icon-only-button(#aaa);
+    @include icon-only-button;
     @include cog-icon;
     display: none;
     position: absolute;
     right: 0;
-    top: 19px;
+    bottom: 5px;
   }
 }

data/app/assets/stylesheets/pageflow/editor/wysihtml5.scss

@@ -4,28 +4,26 @@
   position: relative;
 
   > a {
-    @include background-icon-center($font-size: 12px);
+    @include background-icon-center($color: var(--ui-on-surface-color-light), $font-size: 12px);
     @include hidden-text;
-
     margin: 0;
     display: inline-block;
     width: 25px;
     height: 25px;
     vertical-align: top;
-
-    border: solid 1px #eee;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded(sm);
 
     &:hover {
-      background-color: #eee;
+      background-color: var(--ui-primary-color-lighter);
     }
   }
 
-  > .wysihtml5-command-active {
-    border: solid 1px #bbb;
-    background-color: #ddd;
+  > a.wysihtml5-command-active {
+    background-color: var(--ui-primary-color-light);
+    @include background-icon-color(var(--ui-on-primary-color));
   }
 
-
   [data-wysihtml5-command="bold"] {
     @include font-bold-icon;
   }
@@ -86,31 +84,35 @@
 
   .fragment_link_panel {
     display: none;
-    margin: 0 -2px;
+    margin-bottom: space(2);
+  }
 
-    label {
-      margin: -1px 2px;
+  .url_link_panel {
+    label span {
+      display: inline-block;
+      width: 84%;
+      vertical-align: middle;
+      line-height: 15px;
     }
   }
 
   .link_type_select {
+    margin-bottom: space(2);
+
     label {
       display: inline;
+      margin-right: space(2);
     }
   }
 
   .open_in_new_tab_section {
     position: relative;
-    margin: 4px -4px 0 0;
+    margin-top: space(2);
     padding-right: 20px;
 
     label {
       z-index: 4;
     }
-
-    .inline_help {
-      top: -3px;
-    }
   }
 
   .internal {
@@ -118,10 +120,7 @@
   }
 
   label input {
-    display: inline;
-    width: 15px;
-    margin: 5px 0;
-    vertical-align: middle;
+    margin-right: space(1);
 
     &:focus {
       outline: none;
@@ -129,19 +128,26 @@
   }
 
   .dialog {
+    box-shadow: var(--ui-box-shadow);
     position: absolute;
     top: 30px;
     left: -2px;
     right: -6px;
-    padding: 5px 10px;
-
-    background-color: #fff;
-    border: solid 1px #444;
+    padding: space(4);
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    background-color: var(--ui-surface-color);
+    z-index: 10;
 
     .button {
-      @include button;
+      @include simple-button;
+      padding: 5px 10px;
+      margin-top: 0.5rem;
+    }
+
+    [data-wysihtml5-dialog-action="save"] {
+      @include simple-button("primary");
       padding: 5px 10px;
-      margin-top: 5px;
+      margin-top: 0.5rem;
     }
   }
 
@@ -153,7 +159,7 @@
     pointer-events: none;
     border-top: solid 10px transparent;
     border-right: solid 10px transparent;
-    border-bottom: solid 10px #222;
+    border-bottom: solid 10px var(--ui-on-surface-color-lighter);
     border-left: solid 10px transparent;
   }
 
@@ -165,7 +171,7 @@
     pointer-events: none;
     border-top: solid 9px transparent;
     border-right: solid 9px transparent;
-    border-bottom: solid 9px #fff;
+    border-bottom: solid 9px var(--ui-surface-color);
     border-left: solid 9px transparent;
   }
 }