pageflow 15.6.1 → 15.7.1

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;
   }
-}
+}

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

@@ -1,8 +1,3 @@
-$drop-down-button-menu-background-color: #eee !default;
-$drop-down-button-menu-active-item-background-color: #ddd !default;
-$drop-down-button-menu-disabled-item-text-color: #ddd !default;
-$drop-down-button-menu-border-color: #aaa !default;
-
 .drop_down_button {
   display: inline-block;
   position: relative;
@@ -25,8 +20,10 @@ $drop-down-button-menu-border-color: #aaa !default;
   position: absolute;
   z-index: 1;
   padding: 1px;
-  border: solid 1px $drop-down-button-menu-border-color;
-  background-color: $drop-down-button-menu-background-color;
+  border: solid 1px var(--ui-on-surface-color-lighter);
+  border-radius: rounded(sm);
+  box-shadow: var(--ui-box-shadow);
+  background-color: var(--ui-surface-color);
 
   &.is_visible {
     @include transition(visibility 0ms, opacity 100ms);
@@ -47,7 +44,7 @@ $drop-down-button-menu-border-color: #aaa !default;
     cursor: pointer;
 
     &:hover {
-      background-color: $drop-down-button-menu-active-item-background-color;
+      background-color: var(--ui-selection-color-light);
     }
   }
 
@@ -66,7 +63,7 @@ $drop-down-button-menu-border-color: #aaa !default;
   }
 
   &.is_disabled a {
-    color: $drop-down-button-menu-disabled-item-text-color;
+    opacity: 0.5;
 
     &:hover {
       background-color: inherit;
@@ -83,7 +80,7 @@ $drop-down-button-menu-border-color: #aaa !default;
   }
 
   ul {
-    border-bottom: solid 1px $drop-down-button-menu-border-color;
+    border-bottom: solid 1px var(--ui-on-surface-color-lighter);
     padding-bottom: 1px;
     margin-bottom: 1px;
   }

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

@@ -10,7 +10,7 @@
 
   &-desktop_icon,
   &-phone_icon {
-    @include background-icon-center($color: #444, $font-size: 16px);
+    @include background-icon-center($color: var(--ui-on-surface-color), $font-size: 16px);
     width: 40px;
     height: 100%;
   }
@@ -28,19 +28,19 @@
   &-track,
   &-thumb {
     position: absolute;
-    background-color: #1976d2;
   }
 
   &-track {
+    background-color: var(--ui-on-surface-color-lighter);
     top: 8px;
     left: 40px;
     border-radius: 7px;
-    opacity: 0.5;
     width: 34px;
     height: 14px;
   }
 
   &-thumb {
+    background-color: var(--ui-primary-color);
     top: 5px;
     left: 37px;
     width: 20px;
@@ -58,10 +58,5 @@
     .emulation_mode_button-wrapper {
       opacity: 0.4;
     }
-
-    .emulation_mode_button-track,
-    .emulation_mode_button-thumb {
-      background-color: #000;
-    }
   }
 }

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

@@ -1,5 +1,5 @@
 .failure {
-  @include background-icon-left($color: #d00, $top: 25px);
+  @include background-icon-left($color: var(--ui-error-color), $top: 25px);
   @include attention-icon;
 
   padding: 10px 0 0 40px;
@@ -20,7 +20,7 @@
 
 .failure_icon {
   @include attention-icon;
-  @include background-icon-center($color: #d00);
+  @include background-icon-center($color: var(--ui-error-color));
 
   display: none;
   position: absolute;
@@ -33,4 +33,4 @@
 .failed > ul.menu > li > .failure_icon,
 .failed > a > .failure_icon {
   display: block;
-}
+}

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 {