pageflow 15.6.1 → 15.7.1

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 {

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

@@ -1,18 +1,14 @@
 .reference_input {
   position: relative;
   white-space: nowrap;
-  height: 80px;
 
   .model_thumbnail {
     width: 60px;
     height: 60px;
     vertical-align: bottom;
     margin-right: 5px;
-    border: solid 1px #888;
-  }
-
-  div.model_thumbnail {
-    float: left;
+    border-radius: rounded();
+    border: solid 1px var(--ui-primary-color-light);
   }
 
   .file_thumbnail {
@@ -21,7 +17,7 @@
 
   div.title {
     position: absolute;
-    top: 20px;
+    top: space(7);
     left: 70px;
     right: 20px;
     overflow: hidden;
@@ -32,20 +28,20 @@
     @include pencil-icon;
 
     position: absolute;
-    top: 53px;
+    bottom: 0;
     right: 0;
   }
 
   .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;
   }
 
   .inline_help {
     white-space: normal;
   }
-}
+}

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

@@ -4,13 +4,16 @@
   }
 
   .list_blank_slate {
-    background-color: #efefef;
-    color: #888;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded();
+    color: var(--ui-on-surface-color-light);
     padding: 10px;
   }
 
   .list_item {
-    background-color: #efefef;
+    background-color: var(--ui-primary-color-lightest);
+    border-radius: rounded();
+    overflow: hidden;
     cursor: default;
     padding: 10px 10px 10px 45px;
     position: relative;
@@ -29,7 +32,6 @@
     width: 35px;
     height: 100%;
     background-size: cover;
-    background-color: #444;
   }
 
   .list_item_thumbnail .thumbnail {
@@ -42,7 +44,8 @@
 
   .list_item_missing_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;
   }
@@ -74,13 +77,13 @@
 
   .list_item_description {
     margin-top: 10px;
-    color: #666;
+    color: var(--ui-on-surface-color-light);
   }
 
   .list_item_buttons {
     position: absolute;
     right: 4px;
-    top: 4px;
+    top: 3px;
     white-space: nowrap;
   }
 
@@ -93,16 +96,16 @@
   }
 
   .list_item_edit_button {
-    @include icon-only-button(#aaa);
+    @include icon-only-button;
     @include pencil-icon;
   }
 
   .list_item_remove_button {
-    @include icon-only-button(#aaa);
+    @include icon-only-button("destructive");
     @include trash-icon;
   }
 
   .sortable-placeholder {
     height: 35px;
   }
-}
+}

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

@@ -1,5 +1,5 @@
 .spinner > div {
-  background-color: #ddd;
+  background-color: var(--ui-on-surface-color-lighter);
   height: 100%;
   width: 6px;
   display: inline-block;

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

@@ -15,7 +15,7 @@
     width: 100%;
     height: 100%;
 
-    background-color: #000;
+    background-color: var(--ui-backdrop-color);
     opacity: 0.8;
   }
 
@@ -37,20 +37,24 @@
     position: relative;
     max-width: 400px;
     top: 20%;
-    border: solid 1px #aaa;
     margin: auto;
     padding: 20px;
-    background-color: #fff;
+    border-radius: rounded();
+    box-shadow: var(--ui-box-shadow-md);
+  }
+
+  p {
+    margin-bottom: space(4);
   }
 
   a.close {
     @include cancel-icon;
-    @include icon-button;
+    @include icon-button("primary");
   }
 
   a.break {
     @include minus-circled-icon;
-    @include icon-button($base-color: #d00);
+    @include icon-button("destructive");
     float: right;
   }
 }