pageflow 15.6.1 → 15.7.0

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

@@ -1,12 +1,7 @@
-
 .choose_importer_box {
-  position: absolute;
-  top: 20px;
-  left: 10px;
-  bottom: 20px;
-  right: 20px;
+  min-width: 500px;
+  min-height: 400px;
   max-width: 1100px;
-  height: 75vh;
 
   .content {
     display: table;
@@ -17,12 +12,8 @@
   }
 
   .footer {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-
     .close {
-      @include icon-button(#888);
+      @include icon-button;
     }
   }
 }
@@ -35,9 +26,16 @@
     vertical-align: middle;
 
     button.importer {
-      padding: 5px;
+      border: 0;
+      border-radius: rounded();
+      padding: space(4);
       font-size: 16px;
       cursor: pointer;
+      background-color: var(--ui-surface-color);
+
+      &:hover {
+        background-color: var(--ui-selection-color-lighter);
+      }
     }
   }
 }
@@ -63,48 +61,34 @@
   left: 10px;
   bottom: 20px;
   right: 20px;
+  min-width: 880px;
   max-width: 1100px;
   height: 75vh;
 
   .content_panel {
+    min-height: 0;
+    flex: 1;
     width: 100%;
   }
 
   .footer {
-    width: 100%;
-    position: absolute;
-    bottom: 20px;
-    right: 23px;
-    margin-bottom: -15px;
     .import {
-      @include icon-button();
+      @include icon-button("primary");
+      @include down-icon;
     }
 
     .close {
-      @include icon-button(#888);
+      @include icon-button;
     }
   }
 
   .disclaimer {
+    @include background-icon-left($color: var(--ui-on-surface-color));
     @include info-circled-icon;
-    text-align: left;
-    font-size: 25px;
     position: absolute;
-    left: 44px;
-    width: 25px;
-    height: 30px;
-    overflow: hidden;
-    background-color: #a9a9a959;
-
-    &:hover {
-      width: 75%;
-    }
-
-    p {
-      position: absolute;
-      top: 5px;
-      left: 30px;
-      font-size: 0.4em;
-    }
+    text-align: left;
+    font-size: 10px;
+    width: 60%;
+    padding-left: space(10);
   }
 }

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

@@ -1,7 +1,3 @@
-$file-meta-data-label-color: #888 !default;
-$file-meta-data-icon-link-color: #555 !default;
-$file-meta-data-active-icon-link-color: #000 !default;
-
 .file_meta_data {
   margin-left: -65px;
   white-space: normal;
@@ -22,7 +18,7 @@ $file-meta-data-active-icon-link-color: #000 !default;
     font-weight: normal;
     text-align: right;
     font-size: 11px;
-    color: $file-meta-data-label-color;
+    color: var(--ui-on-surface-color-light);
   }
 
   td {
@@ -35,7 +31,7 @@ $file-meta-data-active-icon-link-color: #000 !default;
 
   .edit {
     @include background-icon-center($font-size: 15px,
-                                    $color: $file-meta-data-icon-link-color);
+                                    $color: var(--ui-primary-color-light));
     @include pencil-icon;
 
     display: inline-block;
@@ -45,7 +41,7 @@ $file-meta-data-active-icon-link-color: #000 !default;
     margin-top: -2px;
 
     &:hover {
-      @include background-icon-color($file-meta-data-active-icon-link-color);
+      @include background-icon-color(var(--ui-primary-color));
     }
   }
 }

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

@@ -1,29 +1,9 @@
 &.file_settings_dialog {
   .box {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    bottom: 20px;
-    right: 20px;
-    max-width: 1100px;
-    max-height: 800px;
-    background-color: #eee;
-  }
-
-  .content {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    bottom: 50px;
-    left: 20px;
-    overflow: auto;
-  }
-
-  .footer {
-    position: absolute;
-    right: 20px;
-    bottom: 10px;
-    left: 20px;
+    min-width: 500px;
+    min-height: 400px;
+    max-width: 800px;
+    max-height: 600px;
   }
 
   .edit_file {

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

@@ -1,6 +1,6 @@
 .file_stage_items {
-  border-top: solid 1px #aaa;
-  border-bottom: solid 1px #aaa;
+  border-top: solid 1px var(--ui-on-surface-color-lighter);
+  border-bottom: solid 1px var(--ui-on-surface-color-lighter);
   padding-bottom: 5px;
   margin-bottom: 5px;
 }
@@ -9,34 +9,33 @@
   white-space: normal;
 
   &.indented {
-    @include background-icon-center($left: 20px, $color: #bbb);
+    @include background-icon-center($left: 20px, $color: var(--ui-on-surface-color-lighter));
     padding: 10px 0 5px 60px;
     margin-left: -60px;
   }
 
   &.stand_alone {
-    @include background-icon-center($left: 31px, $color: #bbb);
+    @include background-icon-center($left: 31px, $color: var(--ui-on-surface-color-lighter));
     padding-left: 70px;
-}
+  }
 
   &.action_required,
   &.active {
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color));
     @include background-icon-animation(blink);
   }
 
   &.finished {
-    @include background-icon-color(#444);
+    @include background-icon-color(var(--ui-primary-color));
   }
 
   &.failed {
-    @include background-icon-color(#c22);
+    @include background-icon-color(var(--ui-error-color));
   }
 
   .percent {
-    color: #444;
+    color: var(--ui-on-surface-color-light);
     font-size: 12px;
-    font-weight: bold;
   }
 
   .error_message {
@@ -55,4 +54,4 @@
   &.encoding {
     @include cog-icon;
   }
-}
+}

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

@@ -6,13 +6,9 @@
     height: 100%;
   }
 
-  .pictogram:hover {
-    background-color: #333;
-  }
-
   .pictogram {
-    background-color: #444;
-    @include background-icon-center($color: #eee, $font-size: 30px);
+    background-color: var(--ui-on-surface-color-light-solid);
+    @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
     @include background-icon-animation(blink);
 
     &.audio {
@@ -63,13 +59,13 @@
 
 .expandable {
   .file_thumbnail {
-    @include background-icon-left($color: #fff, $left: 70%, $top: 85%);
+    @include background-icon-left($color: var(--ui-on-primary-color), $left: 70%, $top: 85%);
     @include down-open-icon;
 
     &:before {
       z-index: 1;
       opacity: 0.4;
-      text-shadow: #000 1px 0px 4px;
+      text-shadow: var(--ui-on-surface-color) 1px 0 4px;
     }
 
     &:hover:before {

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

@@ -1,8 +1,9 @@
 ul.files {
-  margin-top: 10px;
+  margin-top: space(2);
 
   > li {
-    background-color: #eee;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded();
     margin-bottom: 2px;
     position: relative;
     padding: 37px 10px 0 70px;
@@ -18,7 +19,7 @@ ul.files {
   li.blank_slate {
     text-align: center;
     padding: 10px 5px 20px 5px;
-    color: #888;
+    color: var(--ui-on-surface-color-light);
   }
 
   .file_thumbnail {
@@ -52,9 +53,8 @@ ul.files {
   a.settings,
   a.cancel,
   a.confirm,
-  a.remove,
   a.retry {
-    @include icon-only-button(#aaa);
+    @include icon-only-button();
   }
 
   a.settings {
@@ -62,6 +62,7 @@ ul.files {
   }
 
   a.remove {
+    @include icon-only-button("destructive");
     @include trash-icon;
   }
 
@@ -78,7 +79,7 @@ ul.files {
   }
 
   a.select {
-    @include button(#590);
+    @include simple-button("primary");
 
     padding-left: 5px;
     padding-right: 5px;

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

@@ -1,12 +1,7 @@
 .files_explorer {
   .box {
-    height: 100%;
-    @include box-sizing(border-box);
-
-    h2 {
-      margin: 0;
-      position: absolute;
-    }
+    min-width: 500px;
+    min-height: 400px;
   }
 
   ul {
@@ -15,58 +10,46 @@
     list-style: none;
   }
 
-
-  .panels {
-    padding-top: 30px;
-    padding-bottom: 50px;
-    height: 100%;
-    @include box-sizing(border-box);
-  }
-
-  .entries_panel, .files_panel {
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
-    border: 1px solid #ddd;
+  .entries_panel,
+  .files_panel {
     overflow: auto;
   }
 
   .entries_panel {
     width: 20%;
+    padding: 0 space(1) 0 space(1);
+    margin: 0 space(1) 0 space(-1);
 
     li.blank_slate {
       text-align: center;
       padding: 10px 5px 20px 5px;
-      color: #888;
+      color: var(--ui-on-surface-color-light);
     }
   }
 
   .files_panel {
-    width: 77%;
+    flex: 1;
+    border-left: solid 1px var(--ui-on-surface-color-lighter);
+    padding-left: space(4);
 
     .tabs_view {
       height: 100%;
       position: relative;
 
       .tabs_view-container {
-        @include position(absolute, 37px  0 0px 0);
+        @include position(absolute, 37px  0 0 0);
         height: auto;
       }
     }
   }
 
-  .footer {
-    width: 98%;
-    @include position(absolute, 0 37px 14px 0);
-  }
-
   .close {
     @include cancel-icon;
-    @include icon-button(#888);
+    @include icon-button;
   }
 
   .ok {
     @include check-icon;
-    @include icon-button();
+    @include icon-button("primary");
   }
 }

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

@@ -2,30 +2,32 @@ ul.files_gallery {
   margin-top: 10px;
 
   > li {
-    background-color: #eee;
     margin-bottom: 2px;
     position: relative;
     overflow: hidden;
     float: left;
     text-align: center;
-    padding: 10px 5px 5px 5px;
-
-    width: 20%;
-    min-width: 110px;
-    max-width: 180px;
-
+    padding: space(2);
+    width: 120px;
     cursor: pointer;
+    border: solid 3px transparent;
+    border-radius: rounded();
+
+    &:hover {
+      background-color: var(--ui-selection-color-lighter);
+    }
 
     &.active {
-      background-color: $highlight-color;
+      background-color: var(--ui-selection-color-lighter);
+      border: solid 3px var(--ui-selection-color);
     }
 
     &.disabled {
+      background-color: transparent;
       opacity: 0.5;
-
       cursor: default;
 
-      @include background-icon-right(#18A507, 22px, 18px);
+      @include background-icon-right(var(--ui-primary-color), 22px, 18px);
       @include check-icon;
     }
   }
@@ -33,7 +35,7 @@ ul.files_gallery {
   li.blank_slate {
     text-align: center;
     padding: 10px 5px 20px 5px;
-    color: #888;
+    color: var(--ui-primary-color-light);
   }
 
   .file_thumbnail {
@@ -41,6 +43,8 @@ ul.files_gallery {
     width: 100px;
     display: block;
     margin: auto;
+    border-radius: rounded();
+    overflow: hidden;
   }
 
   .file_name {

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

@@ -3,11 +3,10 @@
 
   &-banner {
     display: block;
-    padding: 7px 10px;
-    margin: 0 -10px;
-    background-color: #f9f1b7;
-    border-top: solid 1px #e4dc9d;
-    border-bottom: solid 1px #e4dc9d;
+    padding: space(2);
+    border-radius: rounded();
+    background-color: var(--ui-selection-color-lighter);
+    margin-top: space(2);
   }
 
   &-filter_name {
@@ -19,7 +18,7 @@
     @include cancel-icon;
 
     position: absolute;
-    right: 7px;
-    top: 15px;
+    right: space(4);
+    top: space(4);
   }
 }

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

@@ -8,6 +8,10 @@
 
   z-index: 5;
 
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  color: var(--ui-on-surface-color);
+
   &:before {
     content: " ";
     position: absolute;
@@ -15,9 +19,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #000;
-
-    opacity: 0.2;
+    background-color: var(--ui-backdrop-color);
   }
 
   .box {
@@ -27,17 +29,16 @@
     min-height: 200px;
     height: 50%;
     top: 10%;
-    border: solid 1px #aaa;
     margin: auto;
     padding: 20px;
-    background-color: #fff;
+    background-color: var(--ui-surface-color);
+    border-radius: rounded();
     padding-bottom: 100px;
   }
 
   a.close {
     @include cancel-icon;
     @include icon-button;
-
   }
 
   h2 {
@@ -68,12 +69,12 @@
     a {
       display: block;
       text-decoration: none;
-      color: #000;
+      color: var(--ui-on-surface-color);
       padding: 5px;
     }
 
     a:hover {
-      background-color: #eee;
+      background-color: var(--ui-selection-color-lighter);
     }
 
     .expandable > a {
@@ -84,16 +85,16 @@
 
     .expanded > a {
       @include up-open-mini-icon;
-      background-color: #eee;
+      background-color: var(--ui-primary-color-lightest);
     }
 
     .active > a {
-      background-color: #D2E5FA;
+      background-color: var(--ui-selection-color-light);
     }
 
     li ul {
       display: none;
-      border-bottom: solid 1px #ddd;
+      border-bottom: solid 1px var(--ui-on-surface-color-lightest);
     }
 
     .expanded ul {
@@ -117,7 +118,7 @@
     margin-left: 5px;
     padding-left: 20px;
     padding-right: 5px;
-    border-left: solid 1px #888;
+    border-left: solid 1px var(--ui-on-surface-color-lighter);
 
     h1 {
       margin: 0 0 10px 0;
@@ -136,6 +137,10 @@
       font-size: 16px;
       line-height: 26px;
     }
+
+    a {
+      color: var(--ui-primary-color);
+    }
   }
 
   .footer {
@@ -152,13 +157,13 @@
   img {
     float: right;
     margin: 5px;
-    border: solid 1px #888;
     padding: 1px;
   }
 }
 
 .editor .help_button {
-  @include background-icon-right($color: #a0c4e0, $font-size: 16px, $right: 5px, $top: 7px);
+  @include background-icon-right($color: var(--ui-primary-color),
+                                 $font-size: 16px, $right: 5px, $top: 5px);
   @include help-circled-icon;
 
   padding: 7px 30px 0 5px;

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

@@ -1,5 +1,5 @@
 .help_image {
-  border: solid 1px #444;
+  border: solid 1px var(--ui-on-surface-color-lighter);
   display: block;
   margin: 5px auto;
 }

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

@@ -2,4 +2,23 @@
   p {
     margin-bottom: 1em;
   }
+
+  .shortcuts {
+    dt {
+      display: inline-block;
+      margin-top: 0.5em;
+    }
+
+    dd {
+      margin: 0.5em 0 0.5em 6px;
+    }
+
+    kbd {
+      border: solid 1px currentColor;
+      border-radius: 4px;
+      padding: 3px 5px;
+      display: inline-block;
+      font-size: 11px;
+    }
+  }
 }

data/app/assets/stylesheets/pageflow/editor/inputs/file_input.scss

@@ -1,23 +1,19 @@
 .file_input {
   position: relative;
   white-space: nowrap;
-  height: 80px;
 
   .file_thumbnail {
     width: 60px;
     height: 60px;
     vertical-align: bottom;
     margin-right: 5px;
-    border: solid 1px #888;
-  }
-
-  div.file_thumbnail {
-    float: left;
+    border-radius: rounded();
+    border: solid 1px var(--ui-primary-color-light);
   }
 
   div.file_name {
     position: absolute;
-    top: 20px;
+    top: space(7);
     left: 70px;
     right: 20px;
     overflow: hidden;
@@ -28,16 +24,16 @@
     @include pencil-icon;
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     right: 0;
   }
 
   a.unset {
-    @include icon-only-button($base-color: #d00);
+    @include icon-only-button("destructive");
     @include cancel-circled-icon;
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     right: 35px;
   }
 
@@ -48,7 +44,7 @@
     }
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     left: 70px;
   }
 

data/app/assets/stylesheets/pageflow/editor/inputs/file_processing_state_display.scss

@@ -1,6 +1,5 @@
 .file_processing_state_display {
   position: relative;
-  margin-top: -6px;
 
   &:before {
     content: "";
@@ -9,7 +8,6 @@
     left: 0;
     width: 62px;
     height: 100%;
-    background-color: #eee;
   }
 
   &-empty {