pageflow 15.5.0 → 15.7.0

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

@@ -1,13 +1,8 @@
 .background_positioning {
   .box {
-    top: 5%;
-    width: 90%;
+    min-width: 500px;
+    min-height: 400px;
     max-width: 1000px;
-    max-height: 745px;
-    padding-bottom: 20px;
-    overflow: hidden;
-    height: 80%;
-    overflow-y: scroll;
   }
 
   label {
@@ -18,33 +13,6 @@
     font-size: 12px;
   }
 
-  ul.screens {
-    border-bottom: solid 1px #aaa;
-    padding: 0;
-
-    li {
-      display: inline-block;
-      list-style: none;
-      padding: 5px 10px;
-      margin-bottom: 1px;
-      background-color: #eee;
-
-      a {
-        text-decoration: none;
-        color: #000;
-      }
-
-      &:hover {
-        background-color: #ddd;
-      }
-
-      &.active {
-        background-color: #D2E5FA;
-        font-weight: bold;
-      }
-    }
-  }
-
   .wrapper {
     text-align: center;
     margin: 35px;
@@ -52,7 +20,7 @@
 
   .previews {
     overflow: scroll;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
     margin-bottom: 20px;
 
@@ -68,14 +36,14 @@
     vertical-align: middle;
 
     .image {
-      border: solid 1px #444;
+      outline: solid 1px var(--ui-on-surface-color-light);
       background-size: cover;
     }
 
     .label {
       padding: 3px 0;
       font-size: 11px;
-      color: #444;
+      color: var(--ui-on-surface-color-light);
     }
   }
 
@@ -85,7 +53,7 @@
     height: 100%;
 
     img {
-      border: solid 1px #444;
+      outline: solid 1px var(--ui-on-surface-color-light);
       display: block;
       max-height: 300px;
       max-width: 600px;
@@ -96,22 +64,7 @@
   .slider {
     position: absolute;
     border: none;
-    background: #ddd;
-
-    a {
-      @include background-icon-center($font-size: 20px);
-      @include arrow-combo-icon;
-      position: absolute;
-      display: block;
-      width: 40px;
-      height: 40px;
-      margin: 0;
-      background-color: #fff;
-      border: solid 1px #888;
-      border-radius: 4px;
-      left: auto;
-      top: auto;
-    }
+    background: var(--ui-on-surface-color-lightest);
 
     &.horizontal {
       bottom: -10px;
@@ -146,29 +99,30 @@
     white-space: nowrap;
 
     input {
-      width: 45px;
+      display: inline;
+      width: 55px;
       height: 25px;
       box-sizing: border-box;
-      text-align: right;
+      padding-right: space(1);
     }
 
     &.horizontal {
-      left: -65px;
+      left: -80px;
       bottom: -26px;
     }
 
     &.vertical {
-      left: 100%;
-      top: -30px;
+      left: 115%;
+      top: 0;
     }
   }
 
   a.save {
     @include check-icon;
-    @include icon-button;
+    @include icon-button("primary");
   }
 
   a.close {
-    @include icon-button(#888);
+    @include icon-button;
   }
 }

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

@@ -3,6 +3,7 @@
 @import "pageflow/fonts";
 
 @import "pageflow/jquery_ui";
+@import "pageflow/ui/normalize";
 @import "pageflow/ui";
 @import "pageflow/animations";
 
@@ -24,12 +25,14 @@
   @import "./change_theme";
   @extend %pageflow-ui;
 
-  font-family: Helvetica, Arial, "Sans-Serif";
-  font-size: 13px;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
 
   padding: 0;
   display: block;
-  background-color: #ddd;
+  background-color: var(--ui-surface-color);
+  border: 0;
+  color: var(--ui-on-surface-color);
   overflow: hidden;
 
   * {
@@ -38,10 +41,8 @@
   }
 
   h2 {
-    font-size: 11px;
-    text-transform: uppercase;
-    font-weight: normal;
-    color: #444;
+    font-size: inherit;
+    font-weight: 500;
     margin: 15px 0 5px 0;
   }
 
@@ -51,7 +52,7 @@
   }
 
   a {
-    color: #000;
+    color: var(--ui-on-surface-color);
     text-decoration: none;
   }
 
@@ -93,18 +94,18 @@
 
   a.publish {
     @include eye-icon;
-    @include icon-button;
+    @include icon-button("primary");
     float: right;
   }
 
   a.close {
     @include cancel-icon;
-    @include icon-button(#888);
+    @include icon-button;
   }
 
   a.back {
     @include left-open-icon;
-    @include icon-button(#888);
+    @include icon-button;
   }
 
   a.add_chapter,
@@ -114,13 +115,13 @@
   }
 
   a.destroy {
-    @include icon-button(#d00);
+    @include icon-button("destructive");
     @include trash-icon;
     float: right;
   }
 
   a.upload {
-    @include icon-button;
+    @include icon-button("primary");
     @include up-icon;
     float: right;
   }
@@ -144,6 +145,20 @@ main.ui-layout-pane {
   background-color: #000;
 }
 
+.ui-layout-resizer {
+  background-color: var(--ui-surface-color);
+  border: 0;
+  border-left: solid 1px var(--ui-on-surface-color-lightest);
+  border-top-left-radius: rounded(sm);
+  border-bottom-left-radius: rounded(sm);
+}
+
+.ui-layout-toggler {
+  border: 0;
+  border-top-right-radius: rounded(lg);
+  border-bottom-right-radius: rounded(lg);
+}
+
 main > div {
   height: 100%;
 

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

@@ -6,8 +6,8 @@
   letter-spacing: 0.01em;
   text-align: center;
   padding: 5% 25%;
-  background-color: #fff;
-  color: #333;
+  background-color: var(--ui-surface-color);
+  color: var(--ui-on-surface-color);
   height: 100%;
 
   h2 {
@@ -15,7 +15,7 @@
     font-weight: normal;
     letter-spacing: 0.02em;
     text-transform: uppercase;
-    color: #999;
+    color: var(--ui-on-surface-color-light);
 
     &:before {
       content: "";
@@ -26,7 +26,7 @@
       background-size: 33px 45px;
       background-repeat: no-repeat;
       background-image: image-url("pageflow/editor/blank_entry/logo.png");
-      opacity: 0.3;
+      opacity: 0.6;
     }
   }
 
@@ -39,8 +39,8 @@
     display: inline-block;
     text-align: left;
     padding: 20px 50px;
-    border-bottom: solid 1px #aaa;
-    border-top: solid 1px #aaa;
+    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
+    border-top: solid 1px var(--ui-on-surface-color-lighter);
   }
 
   li {

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

@@ -1,58 +1,29 @@
 &.change_theme {
   .box {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    bottom: 20px;
-    right: 20px;
     max-width: 1100px;
-    max-height: 650px;
-    background-color: #eee;
-  }
-
-  .content {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    bottom: 50px;
-    left: 20px;
-    overflow: auto;
-    overflow-y: scroll;
-    background-color: #fff;
-
-    >div {
-      padding: 10px;
-    }
-  }
-
-  .footer {
-    position: absolute;
-    right: 20px;
-    bottom: 10px;
-    left: 20px;
+    max-height: 670px;
+    min-width: 600px;
+    min-height: 300px;
   }
 
   .themes_panel {
-    position: absolute;
-    top: 60px;
-    left: 20px;
     width: 330px;
+    overflow: auto;
   }
 
   .preview_panel {
-    position: absolute;
-    top: 68px;
-    right: 30px;
-    left: 370px;
-    bottom: 50px;
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.25rem;
+    border-left: solid 1px var(--ui-on-surface-color-lightest);
+    padding-left: 1rem;
+    position: relative;
   }
 
   .use_theme {
-    @include button(#590);
-  }
-
-  .theme_name {
-    margin: 10px;
+    @include simple-button;
   }
 
   .button_or_checkmark {
@@ -63,52 +34,38 @@
 
   .theme_in_use {
     font-size: 35px;
+    line-height: space(4);
   }
 
   li {
     position: relative;
-    line-height: 60px;
-    background-color: #eeeeee;
-    margin: 10px;
+    margin: 0 space(1) space(1) 0;
+    padding: space(4);
 
-    .active {
-      background-color: #d2e5fa;
+    &.active {
+      background-color: var(--ui-selection-color-lighter);
     }
   }
 
-  h2.themes_header {
-    display: block;
-    font-size: 1.5em;
-    font-weight: bold;
-    text-transform: none;
-    position: absolute;
-    top: 25px;
-    left: 30px;
-  }
-
-  h2.preview_header {
-    font-size: 14px;
-    text-transform: none;
-  }
-
   .preview_image_region {
-    margin-bottom: 30px;
-    border: 1px solid #eee;
-    padding-top: 71%;
     position: relative;
+    min-height: 0;
+    flex: 1;
+    margin-top: 1rem;
   }
 
   .preview_image {
-    position: absolute;
-    top: 0;
-    max-width: 100%;
+    position: relative;
     z-index: 2;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
   }
 
   .loading {
     position: absolute;
-    top: 50px;
-    z-index: 1;
-    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 }

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

@@ -5,9 +5,9 @@
 // See entry_type/scrolled/package/src/editor/buttons.module.css
 
 .primary_icon_button {
-  @include icon-button;
+  @include icon-button("primary");
 }
 
 .secondary_icon_button {
-  @include icon-button(#888);
+  @include icon-button;
 }

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

@@ -1,6 +1,5 @@
 .confirm_encoding {
   .blank_slate {
-    background-color: #fff;
     margin: 10px 0;
     padding: 20px 0;
 
@@ -14,66 +13,49 @@
     }
   }
 
+  .intro {
+    p {
+      margin-top: space(3);
+    }
+  }
+
   ul.confirmable_files {
     margin-bottom: 15px;
 
     li {
-      background-color: #eee;
-      margin-bottom: 2px;
-      position: relative;
-      padding: 10px 10px 0 30px;
-      white-space: nowrap;
-      overflow: hidden;
-      height: 23px;
+      background-color: var(--ui-primary-color-lightest);
+      margin-bottom: space(1);
+      display: flex;
+      padding: space(2);
+      border-radius: rounded();
+      align-items: center;
     }
 
     input[type=checkbox] {
       display: block;
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      width: auto;
-      height: auto;
     }
 
     .file_name {
-      position: absolute;
-      left: 30px;
-      top: 9px;
-      right: 100px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
       font-weight: normal;
-      font-size: 13px;
+      margin: 0 space(2);
     }
 
     .duration {
-      position: absolute;
-      right: 50px;
-      top: 9px;
+      color: var(--ui-on-surface-color-light);
     }
 
     .actions {
-      position: absolute;
-      right: 10px;
-      top: 3px;
-      text-align: right;
-
-      a {
-        float: left;
-        margin-left: 5px;
-      }
+      margin-left: space(2);
     }
 
     a.remove {
-      @include icon-only-button(#aaa);
+      @include icon-only-button("destructive");
       @include trash-icon;
     }
   }
 
   button.confirm {
-    @include icon-button;
+    @include icon-button("primary");
     @include check-icon;
 
     &.checking {
@@ -81,4 +63,4 @@
       @include background-icon-animation(blink);
     }
   }
-}
+}

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

@@ -1,66 +1,39 @@
 &.confirm_upload {
   .box {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    bottom: 20px;
-    right: 20px;
+    min-width: 500px;
+    min-height: 400px;
     max-width: 1100px;
-    background-color: #eee;
-  }
-
-  .uploadable_files {
-    margin-right: 10px;
-
-    &.is_empty {
-      display: none;
-    }
-  }
-
-  .files_panel,
-  .selected_file_panel {
-    position: absolute;
-    top: 80px;
   }
 
   .files_panel {
-    right: 370px;
-    bottom: 50px;
-    left: 20px;
     overflow: auto;
+    flex: 1;
   }
 
   .selected_file_panel {
-    position: absolute;
-    right: 20px;
+    margin-left: space(6);
     width: 330px;
   }
 
-  .configuration_editor_tab {
-    border: solid 1px #ddd;
-    background-color: #fff;
-    padding: 10px 10px 20px 12px;
-    margin: 0;
+  .uploadable_files {
+    margin: 0 space(2) space(4) 0;
+
+    &.is_empty {
+      display: none;
+    }
   }
 
   .table_view {
     width: 100%;
   }
 
-  .footer {
-    position: absolute;
-    right: 20px;
-    bottom: 10px;
-    left: 20px;
-  }
-
   .upload {
-    @include icon-button;
+    @include icon-button("primary");
     @include up-icon;
   }
 
   .close {
-    @include icon-button(#888);
+    @include icon-button;
     @include cancel-icon;
   }
 }

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

@@ -14,35 +14,62 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #000;
-    opacity: 0.5;
+    background-color: var(--ui-backdrop-color);
   }
 
   .box {
-    position: relative;
-    border: solid 1px #aaa;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: space(10);
+    right: space(10);
+    bottom: space(10);
+    left: space(10);
     margin: auto;
-    padding: 20px;
-    background-color: #fff;
+    padding: space(4) space(6);
+    background-color: var(--ui-surface-color);
+    border-radius: rounded();
+    box-shadow: var(--ui-box-shadow-md);
+  }
+
+  .content,
+  .panels {
+    flex: 1;
+    min-height: 0;
+    margin-bottom: space(4);
+  }
+
+  .panels {
+    display: flex;
   }
 
-  h2,
-  h3 {
-    margin: 0 0 10px 0;
+  .content {
+    padding: 0 space(2) 0 space(2);
+    margin-left: space(-2);
+    overflow: auto;
   }
 
   .dialog-header {
     font-size: 17px;
     font-weight: bold;
-    margin: 0 0 10px 0;
+    margin: 0 0 space(4) 0;
+  }
+
+  .dialog-sub_header {
+    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
+    margin: 0;
+    padding: space(1) 0;
+  }
+
+  .dialog-hint {
+    margin-bottom: space(4);
   }
 
   .footer {
-    clear: left;
     text-align: right;
   }
 
-  a.close {
+  .close {
     @include cancel-icon;
     @include icon-button;
   }

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

@@ -1,8 +1,8 @@
 .disabled_atmo_indicator {
-  @include background-icon-center($color: #fff, $font-size: 30px);
+  @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
   @include mute-icon;
 
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--ui-on-surface-color-light);
   border-radius: 5px;
   width: 50px;
   height: 50px;
@@ -10,4 +10,4 @@
   &:hover {
     opacity: 0.5;
   }
-}
+}