pageflow 15.6.1 → 15.7.0

data/app/assets/stylesheets/pageflow/themes/default/third_party_embed_consent.scss

@@ -0,0 +1,103 @@
+.third_party_embed_opt_in {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &::before {
+    content: image-url("pageflow/themes/default/embed_opt_in.svg");
+    display: block;
+    height: 90px;
+    width: 120px;
+  }
+
+  &-message {
+    margin: 1em 0 1.5em 0;
+  }
+
+  &-button {
+    padding: 10px;
+    background-color: transparent;
+    color: currentColor;
+    border: solid 1px currentColor;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  a {
+    color: currentColor;
+  }
+
+  .consent_given & {
+    display: none;
+  }
+}
+
+.third_party_embed_opt_out_info {
+  display: none;
+  color: #fff;
+  height: 100%;
+  pointer-events: none;
+
+  &-icon,
+  &-tooltip {
+    position: absolute;
+    right: 0;
+    box-sizing: border-box;
+    min-height: 40px;
+    height: 100%;
+    pointer-events: auto;
+  }
+
+  &-icon {
+    border: 0;
+    background-color: transparent;
+    text-align: initial;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 7px 7px;
+    z-index: 2;
+
+    &::before {
+      content: image-url("pageflow/themes/default/embed_opt_out_info.svg");
+      display: block;
+      width: 26px;
+      height: 26px;
+    }
+  }
+
+  &-tooltip {
+    background-color: #000;
+    display: none;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 5px 50px 5px 10px;
+    left: 0;
+    z-index: 1;
+
+    a {
+      color: currentColor;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .third_party_embed_opt_out_info-tooltip {
+      display: flex;
+    }
+  }
+
+  .consent_given & {
+    display: block;
+  }
+}

data/app/assets/stylesheets/pageflow/ui/forms.scss

@@ -1,11 +1,8 @@
 label {
   display: block;
   position: relative;
-  margin-bottom: 2px;
-  text-transform: uppercase;
-  color: #444;
-  font-size: 11px;
-  font-weight: bold;
+  margin-bottom: space(1);
+  font-weight: 500;
 
   .name {
     display: inline-block;
@@ -23,30 +20,62 @@ label:hover span.name {
 
 select,
 textarea,
-input {
-  font-family: Helvetica, Arial, "Sans-Serif";
+[type="text"],
+[type="email"],
+[type="url"],
+[type="password"],
+[type="number"],
+[type="date"],
+[type="datetime-local"],
+[type="month"],
+[type="search"],
+[type="tel"],
+[type="time"],
+[type="week"],
+[multiple] {
   font-size: 13px;
   display: block;
   width: 100%;
-  border: solid 1px #888;
+  border: solid 1px var(--ui-on-surface-color-lighter);
   line-height: 20px;
-  padding: 2px;
+  padding: space(1) space(2);
+  box-sizing: border-box;
+  border-radius: rounded();
+  color: var(--ui-on-surface-color);
+
+  &:focus {
+    border-color: var(--ui-on-surface-color-light);
+    box-shadow: 0 0 0 2px var(--ui-selection-color-light);
+  }
 }
 
-textarea,
-input {
-  padding: 2px;
-  margin: 0 -2px;
+select {
+  padding-right: space(8);
+}
+
+[type="checkbox"] {
+  border-radius: rounded();
+}
+
+[type="checkbox"],
+[type="radio"] {
+  border: solid 1px var(--ui-on-surface-color-light);
+  color: var(--ui-primary-color);
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--ui-surface-color), 0 0 0 4px var(--ui-primary-color-lighter);
+  }
 }
 
 .invalid input,
 .invalid textarea {
-  border: solid 1px red;
+  border: solid 1px var(--ui-error-color);
 }
 
 textarea {
   width: 100%;
   height: 300px;
+  padding-right: space(1);
 }
 
 textarea.short {
@@ -55,17 +84,10 @@ textarea.short {
 
 .radio_input,
 .check_box_input {
-  margin: 5px 0;
+  padding: space(1) 0;
   position: relative;
 
-  input {
-    display: inline;
-    width: auto;
-    vertical-align: middle;
-    margin-left: 5px;
-  }
-
-  /** Make sure the input is on top when an inline help text is displayed */
+  // Make sure the input is on top when an inline help text is displayed
   &:hover input {
     z-index: 4;
     position: relative;
@@ -75,11 +97,12 @@ textarea.short {
     position: static;
     display: inline;
     padding-left: 5px;
+    font-weight: normal;
   }
 
   .inline_help {
     right: -5px;
-    top: 0;
+    top: space(1) * -1;
   }
 }
 
@@ -87,56 +110,15 @@ textarea.short {
   padding-top: 10px;
 }
 
-.page_reference_input {
-  p {
-    margin: 10px 0;
-    color: #444;
-  }
-
-  ul.chapters {
-    margin-top: 10px;
-
-    > li {
-      margin: 0;
-      padding: 0;
-
-      > a:first-child {
-        cursor: default;
-        margin: 0;
-        padding: 0;
-        background-color: #fff;
-
-        .pictogram {
-          display: none;
-        }
-      }
-    }
-  }
-
-  ul.pages {
-    margin: 5px 0 10px 0;
-
-    .pictogram {
-      opacity: 0.5;
-    }
-
-    .used .pictogram {
-      opacity: 0.2;
-    }
-  }
-
-  .add_page {
-    display: none;
-  }
-}
-
 .configuration_editor,
 .configuration_editor_tab {
-  margin: 10px 0;
-  padding-bottom: 20px;
-
   > div {
-    padding: 5px 0;
+    margin: space(2.5) 0;
+  }
+
+  .separator {
+    border-top: solid 1px var(--ui-on-surface-color-lightest);
+    margin: space(4) 0;
   }
 }
 
@@ -150,8 +132,16 @@ textarea.short {
 }
 
 .slider_input {
+  padding: space(1) 0 0;
+
   .slider {
     margin: 10px 10px 0 40px;
+    border: 1px solid var(--ui-on-surface-color-lighter);
+  }
+
+  .ui-slider-handle {
+    background: var(--ui-on-surface-color-lightest-solid);
+    border: solid 1px var(--ui-on-surface-color-lighter-solid);
   }
 
   .value {
@@ -168,30 +158,24 @@ textarea.short {
 }
 
 .validation {
-  margin: 5px -4px 0 -2px;
-  padding: 5px;
-  border: solid 1px #aaa;
+  padding: space(1) 0 0 space(1);
   position: relative;
 
-  &.pending {
-    background-color: #fffdeb;
-  }
-
   &.failed {
-    background-color: #ffdddd;
+    color: var(--ui-error-color);
   }
 
   li {
-    margin: 5px;
+    margin: space(1);
   }
 }
 
 .inline_help {
-  @include background-icon-right($color: #a0c4e0, $font-size: 16px);
+  @include background-icon-right($color: var(--ui-primary-color-lighter), $font-size: 16px);
   @include help-circled-icon;
 
   &:before {
-    top: 3px;
+    top: 5px;
     right: 3px;
     width: 20px;
     height: 17px;
@@ -211,12 +195,14 @@ textarea.short {
   margin: 1px;
 
   &:hover {
+    box-shadow: var(--ui-box-shadow);
     padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 12px;
     margin: 0;
-    background-color: #e4eef6;
-    border: solid 1px #aaa;
+    background: var(--ui-surface-color);
+    border: solid 1px var(--ui-on-surface-color-lighter);
+    border-radius: rounded(sm);
     width: 100%;
     height: auto;
     z-index: 3;
@@ -234,3 +220,12 @@ textarea.short {
 .input-hidden_via_binding {
   display: none;
 }
+
+.input-disabled {
+  select,
+  input,
+  textarea,
+  label .name {
+    opacity: 0.5;
+  }
+}

data/app/assets/stylesheets/pageflow/ui/functions.scss

@@ -0,0 +1,56 @@
+@function space($name) {
+  @return map-get($size-scale, "#{$name}");
+}
+
+@function size($name) {
+  @return map-get($size-scale, "#{$name}");
+}
+
+$size-scale: (
+  "0.5": 0.125rem,
+  "1":   0.25rem,
+  "1.5": 0.375rem,
+  "2":   0.5rem,
+  "2.5": 0.625rem,
+  "3":   0.75rem,
+  "3.5": 0.875rem,
+  "4":   1rem,
+  "5":   1.25rem,
+  "6":   1.5rem,
+  "7":   1.75rem,
+  "8":   2rem,
+  "9":   2.25rem,
+  "10":  2.5rem,
+  "11":  2.75rem,
+  "12":  3rem,
+  "14":  3.5rem,
+  "16":  4rem,
+  "20":  5rem,
+  "24":  6rem,
+  "28":  7rem,
+  "32":  8rem,
+  "36":  9rem,
+  "40":  10rem,
+  "44":  11rem,
+  "48":  12rem,
+  "52":  13rem,
+  "56":  14rem,
+  "60":  15rem,
+  "64":  16rem,
+  "72":  18rem,
+  "80":  20rem,
+  "96":  24rem
+);
+
+@function rounded($name: "base") {
+  @return map-get((
+    "sm": 0.125rem,
+    "base": 0.25rem,
+    "md": 0.375rem,
+    "lg": 0.5rem,
+    "xl": 0.75rem,
+    "2xl":1rem,
+    "3xl": 1.5rem,
+    "full": 9999px
+  ), quote($name));
+}

data/app/assets/stylesheets/pageflow/ui/input/check_box_group_input.scss

@@ -3,13 +3,12 @@
     margin: 5px 0;
 
     input {
-      display: inline;
-      width: auto;
-      margin: 0 5px 0 0;
+      margin: 0 10px 0 0;
     }
 
     label {
       display: inline;
+      font-weight: 400;
     }
   }
 }

data/app/assets/stylesheets/pageflow/ui/input/color_input.scss

@@ -2,24 +2,24 @@
   .minicolors {
     box-sizing: border-box;
     width: 100%;
-    padding-right: 24px;
   }
 
   input {
-    padding-left: 26px;
+    padding-left: 30px;
     width: 100%;
+    height: auto;
   }
 
   .minicolors-input-swatch {
-    top: 3px;
-    left: 2px;
+    top: 5px;
+    left: 5px;
   }
 
   &.is_default input {
-    color: #888;
+    color: var(--ui-on-surface-color-light);
   }
 
   .minicolors-focus input {
-    color: #000;
+    color: var(--ui-on-surface-color);
   }
 }

data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss

@@ -1,26 +1,32 @@
+.extended_select_input,
+.extended_select_input_menu {
+  .ui-widget {
+    font-family: var(--ui-font-family);
+    font-size: var(--ui-font-size);
+  }
+}
+
 .extended_select_input {
-  .ui-selectmenu-button span.ui-selectmenu-text {
-    font-family: Helvetica, Arial, Sans-Serif;
-    font-size: 13px;
+  .ui-selectmenu-button {
+    background: var(--ui-primary-color-lightest);
+    border-color: var(--ui-on-surface-color-lighter);
+    border-radius: rounded();
+    color: var(--ui-on-surface-color);
   }
 }
 
 .extended_select_input_menu {
-  border: solid 1px #aaa;
+  box-shadow: var(--ui-box-shadow);
+  border-radius: rounded();
+  overflow: hidden;
 
-  ul {
-    width: 600px;
-    border: none;
+  .ui-menu {
+    width: 620px;
+    border: 0;
     border-radius: 0;
-  }
-
-  .ui-state-default,
-  .ui-widget-content
-  .ui-state-default,
-  .ui-widget-header
-  .ui-state-default {
-    background: white;
-    border: 1px solid rgb(187, 187, 187);
+    padding: 0 space(2.5) space(2.5) space(2.5);
+    background: var(--ui-primary-color);
+    color: var(--ui-on-primary-color);
   }
 
   .ui-state-hover,
@@ -29,27 +35,44 @@
   .ui-state-focus,
   .ui-widget-content .ui-state-focus,
   .ui-widget-header .ui-state-focus {
-    background: white;
     margin: 0;
-    background: rgb(248, 248, 248);
+    background: var(--ui-on-primary-color-lightest);
+    color: inherit;
   }
 
   .type_pictogram {
     position: absolute;
     width: 25px;
     height: 25px;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    background-repeat: no-repeat;
+    top: space(2);
+    filter: invert(100%);
+    opacity: 0.8;
+  }
+
+  .item-text {
+    font-weight: 500;
+    margin-bottom: space(1);
+  }
+
+  .item-description {
+    font-size: 11px;
+    color: var(--ui-on-primary-color-light);
+    padding-right: space(4);
+    line-height: 1.4;
+  }
+
+  .ui-state-focus {
+    .type_pictogram {
+      opacity: 1;
+    }
+
+    a {
+      color: var(--ui-on-primary-color);
+    }
   }
 
   .text-container {
-    position: absolute;
-    top: 50%;
-    @include transform(translate(0,-50%));
-    width: 66%;
-    margin-left: 20%;
+    margin-left: space(10);
     overflow: hidden;
   }
 
@@ -61,11 +84,11 @@
     @include help-circled-icon;
 
     text-decoration: none;
-    float: right;
-    opacity: 0.2;
+    opacity: 0.1;
     position: absolute;
-    bottom: 3px;
-    right: 7px;
+    bottom: space(2);
+    right: space(2);
+    color: var(--ui-on-primary-color);
 
     &:hover {
       opacity: 1;
@@ -78,29 +101,19 @@
     outline: 0;
     box-sizing: border-box;
     min-height: 90px;
-    padding: 10px 2%;
-    border: 1px solid rgb(242, 242, 242);
+    padding: space(3) space(2);
+    background: transparent;
+    border: 0;
   }
 
-  .ui-selectmenu-optgroup {
+  .ui-menu .ui-selectmenu-optgroup {
     float: left;
     width: 100%;
-    margin: 0 !important;
+    margin: space(2.5) 0 space(1);
+    padding-left: 0;
     border: 0;
-    background-color: rgb(211,211,211);
-  }
-
-  .ui-widget {
-    font-family: Helvetica, Arial, Sans-Serif;
-    font-size: 13px;
-
-    .item-description {
-      font-size: 11px;
-      color: gray;
-    }
-  }
-
-  .ui-state-focus {
-    background: #D2E5FA;
+    font-weight: 700;
+    border-bottom: solid 1px var(--ui-on-primary-color-lighter);
+    box-sizing: border-box;
   }
 }