@kitconcept/volto-light-theme 5.0.0 → 6.0.0-alpha.0

package/src/theme/_footer.scss

@@ -1,5 +1,5 @@
 #footer {
-  margin-top: $footer-vertical-spacing-top;
+  margin-top: 0;
   text-align: center;
 
   .footer {
@@ -33,18 +33,21 @@
 
       li {
         padding: 0 7px;
-        border-right: 1px solid #205c90;
         font-size: 18px;
 
-        &:last-of-type {
-          border: none;
-        }
         a {
           color: $blue-for-grey-contrast;
         }
       }
     }
 
+    ul.footer-links li {
+      border-right: 1px solid #205c90;
+      &:last-of-type {
+        border: none;
+      }
+    }
+
     .logo {
       margin: 5rem 0 1.8rem 0;
     }

package/src/theme/_header.scss

@@ -131,7 +131,6 @@
         width: 100%;
         height: 90px;
         padding-top: 2rem;
-        background-color: $lightgrey;
         transition:
           top 500ms ease-in-out,
           height 600ms ease-in-out;
@@ -139,7 +138,7 @@
 
         &.active {
           top: 0;
-          height: 190px;
+          height: 188px;
 
           @media only screen and (max-width: $largest-mobile-screen) {
             height: calc(100vh - 130px);
@@ -179,8 +178,6 @@
                 width: 70%;
                 padding-left: 0;
                 margin-right: 1rem;
-                background-color: $lightgrey;
-                color: $black;
                 font-size: 1.5rem;
 
                 @media only screen and (min-width: $tablet-breakpoint) and (max-width: 788px) {
@@ -188,7 +185,6 @@
                 }
 
                 &::placeholder {
-                  color: $black;
                   opacity: 0.5;
                 }
               }
@@ -208,7 +204,7 @@
                 }
 
                 svg {
-                  fill: $black !important;
+                  fill: $black;
                 }
               }
             }
@@ -422,7 +418,7 @@ body.has-toolbar.has-sidebar {
       position: absolute;
       bottom: -49px;
       width: 100%;
-      border-bottom: 9px solid $black;
+      border-bottom: 9px solid var(--accent-color, $black);
       content: '';
     }
   }
@@ -517,7 +513,6 @@ body.has-toolbar.has-sidebar {
           li {
             padding: 0;
             padding-bottom: 10px;
-            color: $white;
 
             a {
               padding-bottom: 0;

package/src/theme/_layout.scss

@@ -2,6 +2,10 @@
   --layout-container-width: #{$layout-container-width};
   --default-container-width: #{$default-container-width};
   --narrow-container-width: #{$narrow-container-width};
+
+  --align-right: end;
+  --align-left: start;
+  --align-center: center;
 }
 
 @mixin narrow-container-width() {
@@ -29,6 +33,12 @@
   margin-left: auto;
 }
 
+@mixin variable-container-width() {
+  max-width: var(--block-width, --layout-container-width);
+  margin-right: auto;
+  margin-left: auto;
+}
+
 // One still cannot use CSS custom properties directly on @container queries
 @mixin adjustMarginsToContainer($width) {
   @container (max-width: #{$width + 2 * $horizontal-space-small-screens}) {
@@ -178,8 +188,6 @@ External link removal for all the blocks.
   & > .block.image.align.right.small,
   & > .block.video.align.center .video-inner,
   & > .block.maps.align.center .maps-inner,
-  .block.image.align.center figure,
-  .event-details,
   .download-event,
   .block.separator.has--align--left .line,
   .block.separator.has--align--center .line,
@@ -212,8 +220,6 @@ External link removal for all the blocks.
   & > .block.search .searchBlock-container,
   & > .block h2.headline,
   & > .block.heading .heading-wrapper,
-  & > .block.separator.has--align--full .line,
-  & > .block.introduction .block-container,
   & > .block.teaser .teaser-item.default,
   & > .block.highlight .teaser-description-title,
   & > table,
@@ -246,8 +252,21 @@ External link removal for all the blocks.
   }
 
   & > .block {
-    // This is the default, same color spacing for all blocks
+    // This is the default spacing in between same-color blocks
     margin-bottom: $block-vertical-space;
+
+    // Default side margins on smaller screens
+    &.has--block-width--narrow {
+      @include adjustMarginsToContainer($narrow-container-width);
+    }
+
+    &:not(.highlight, .teaser, .gridBlock, .slider).has--block-width--default {
+      @include adjustMarginsToContainer($default-container-width);
+    }
+
+    &.has--block-width--layout {
+      @include adjustMarginsToContainer($layout-container-width);
+    }
   }
 
   &:last-child {
@@ -275,7 +294,6 @@ External link removal for all the blocks.
   .block-editor-image.left.small,
   .block-editor-image.right.medium,
   .block-editor-image.right.small,
-  .block-editor-image.center figure,
   .block-editor-video.align.left,
   .block-editor-video.align.right,
   .block-editor-video.center .video-inner,
@@ -314,7 +332,6 @@ External link removal for all the blocks.
   .block-editor-listing .items,
   .block-editor-listing .listing.message,
   .block-editor-search .searchBlock-container,
-  .block-editor-separator.has--align--full .block.separator .line,
   .block.teaser.has--align--center,
   .block.eventMetadata .details-container,
   .block-editor-teaser .teaser-item.default,

package/src/theme/_typo-custom.scss

@@ -32,7 +32,7 @@ li::marker {
   p > a,
   li > a,
   .breadcrumb a {
-    color: $blue-for-grey-contrast !important;
+    color: $blue-for-grey-contrast;
     text-decoration: underline;
   }
 }

package/src/theme/_variables.scss

@@ -44,12 +44,6 @@ $layout-container-width: 1440px !default;
 $default-container-width: 940px !default;
 $narrow-container-width: 620px !default;
 
-// Rest of theme variables
-:root {
-  --text-color: #666;
-  --text-size: 18px;
-}
-
 // Colors
 $white: #fff !default;
 $veryLightGrey: #eee !default;
@@ -65,8 +59,97 @@ $greySmoke: #e4e8ec !default;
 $darkBlue: #023d6b !default;
 $secondary-grey: #ececec !default;
 
+// Register custom properties
+@property --background {
+  inherits: true;
+  initial-value: #fff;
+  syntax: '<color>';
+}
+
+@property --text-color {
+  inherits: true;
+  initial-value: #666;
+  syntax: '<color>';
+}
+
+@property --text-size {
+  inherits: true;
+  initial-value: 18px;
+  syntax: '<length> | <percentage>';
+}
+
+@property --primary-color {
+  inherits: true;
+  initial-value: #fff;
+  syntax: '<color>';
+}
+
+@property --primary-foreground-color {
+  inherits: true;
+  initial-value: #000;
+  syntax: '<color>';
+}
+
+@property --secondary-color {
+  inherits: true;
+  initial-value: #ecebeb;
+  syntax: '<color>';
+}
+
+@property --secondary-foreground-color {
+  inherits: true;
+  initial-value: #000;
+  syntax: '<color>';
+}
+
+@property --accent-color {
+  inherits: true;
+  initial-value: #ecebeb;
+  syntax: '<color>';
+}
+
+@property --accent-foreground-color {
+  inherits: true;
+  initial-value: #000;
+  syntax: '<color>';
+}
+
+:root {
+  --background: initial;
+  --text-color: initial;
+  --primary-color: var(--background);
+
+  // Header
+  --header-background: var(--primary-color);
+  --header-foreground: var(--primary-foreground-color);
+
+  //Footer
+  --footer-background: var(--secondary-color);
+  --footer-foreground: var(--secondary-foreground-color);
+
+  // Fat Menu
+  --fatmenu-background: var(--accent-color);
+  --fatmenu-foreground: var(--accent-foreground-color);
+
+  // Breadcrumbs
+  --breadcrumbs-background: var(--accent-color);
+  --breadcrumbs-foreground: var(--accent-foreground-color);
+
+  // Search bar
+  --search-background: var(--accent-color);
+  --search-foreground: var(--accent-foreground-color);
+
+  // Link color
+  --link-color: #0070a2;
+  // Comment out following line to turn <a> links the same color as the text
+  --link-foreground-color: var(--link-color);
+
+  // It is possible to set an aspect ratio for all images, using the folowing CSS custom property:
+  // --image-aspect-ratio: 16/9;
+}
+
 // Image Aspect Ratio
-$aspect-ratio: var(--image-aspect-ratio, 16/9) !default;
+$aspect-ratio: 16/9 !default;
 
 // Weights
 $thin: 100 !default;
@@ -99,7 +182,7 @@ $grid-block-vertical-spacing-top: $spacing-xlarge !default;
 $grid-block-vertical-spacing-bottom: $spacing-xlarge !default;
 
 @mixin vertical-space-h1() {
-  margin-top: $spacing-medium;
+  padding-top: $spacing-medium;
   margin-bottom: $spacing-xlarge;
   @media only screen and (max-width: $largest-mobile-screen) {
     margin-bottom: $spacing-large;
@@ -143,11 +226,11 @@ $grid-block-vertical-spacing-bottom: $spacing-xlarge !default;
 }
 
 @mixin vertical-space-button() {
-  margin-top: $spacing-xlarge;
-  margin-bottom: $spacing-xlarge;
+  padding-top: $spacing-xlarge;
+  padding-bottom: $spacing-xlarge;
   @media only screen and (max-width: $largest-mobile-screen) {
-    margin-top: $spacing-large;
-    margin-bottom: $spacing-large;
+    padding-top: $spacing-large;
+    padding-bottom: $spacing-large;
   }
 }
 

package/src/theme/_widgets.scss

@@ -0,0 +1,102 @@
+#sidebar-properties {
+  .field.widget {
+    .buttons {
+      display: flex;
+      align-items: center;
+
+      button {
+        padding: 5px;
+        border-radius: 3px;
+        margin-right: 3px;
+        aspect-ratio: 1/1;
+        font-size: 1em;
+        line-height: initial;
+        &[data-hovered='true'] {
+          box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
+        }
+        &.active {
+          box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
+        }
+
+        svg.icon {
+          margin: 0 !important;
+          opacity: 0.9;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+}
+
+.field.color {
+  .eight.wide.column {
+    flex-direction: row;
+    align-items: center;
+
+    input {
+      padding-left: 8px;
+      line-height: 1;
+    }
+  }
+}
+
+.react-aria-ColorSwatch {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
+
+.theme-picker-widget {
+  .buttons {
+    flex: 1 1 100%;
+    margin: 1rem 0 0.5rem;
+    text-align: center;
+  }
+
+  button {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    padding: 1rem;
+    border: 2px solid #ccc;
+    border-radius: 100%;
+    margin-right: 0.25rem;
+
+    &.active {
+      border: 2px solid red;
+
+      &:after {
+        position: absolute;
+        top: -0.25rem;
+        right: -0.25rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 100%;
+        background-color: red;
+        content: '';
+      }
+    }
+  }
+}
+
+.theme-picker-widget button {
+  background-color: var(--theme-color);
+}
+
+// TODO: Remove when layers are in place
+.theme-picker-widget .button.grey,
+.theme-picker-widget .button.grey.active,
+.theme-picker-widget .ui.grey.button:hover {
+  background-color: var(--theme-color);
+}
+.theme-picker-widget .button.active,
+.theme-picker-widget .button.active:hover {
+  background-color: var(--theme-color);
+}
+
+.buttons-widget {
+  button {
+    &[data-disabled] {
+      border-color: var(--border-color-disabled);
+      color: var(--text-color-disabled);
+    }
+  }
+}

package/src/theme/blocks/_accordion.scss

@@ -13,11 +13,10 @@
     }
     .title.accordion-title {
       padding: 20px 0 20px 0;
-      background-color: unset;
 
       & > svg {
         height: 50px !important;
-        fill: $grey !important;
+        fill: $grey;
         transform: rotate(-90deg);
       }
 
@@ -32,7 +31,7 @@
       }
 
       &.active > svg {
-        fill: $black !important;
+        fill: $black;
         transform: rotate(180deg);
       }
     }
@@ -83,7 +82,6 @@
             padding: 0;
             margin-bottom: 10px;
             background-color: transparent;
-            color: $grey;
             text-transform: none;
             @include marginal-title();
           }

package/src/theme/blocks/_button.scss

@@ -1,52 +1,53 @@
 .block.__button {
+  margin-bottom: 0 !important;
   .button.container {
-    @include narrow-container-width();
+    display: grid;
+    justify-content: var(--block-alignment);
+    text-align: unset !important;
 
+    @include variable-container-width();
     @include vertical-space-button();
   }
 
   p + & {
     .button.container {
-      margin-top: 60px;
+      padding-top: 60px;
       @container (max-width: #{$largest-mobile-screen}) {
-        margin-top: 40px;
+        padding-top: 40px;
       }
     }
   }
 
-  button {
-    margin: 0;
+  .separator + & {
+    .button.container {
+      padding-top: 0;
+      @container (max-width: #{$largest-mobile-screen}) {
+        padding-top: 0;
+      }
+    }
   }
-}
 
-.block-editor-__button.has--buttonAlign--wide {
-  .button.container {
-    @include default-container-width();
+  & + .gridBlock {
+    margin-top: 0 !important;
+    .headline {
+      margin-top: 0 !important;
+    }
   }
-}
 
-.block.__button.has--buttonAlign--wide {
-  .button.container {
-    @include default-container-width();
+  &:last-child {
+    .button.container {
+      padding-bottom: 0;
+    }
   }
-}
 
-.block.__button .ui.button {
-  padding: 8px 20px;
-  border: 1px solid $black;
-  border-radius: unset;
-  background: none;
-  color: $black;
-
-  @include body-text-bold();
-}
-
-.block.__button .ui.button:focus,
-.block.__button .ui.button:hover {
-  background-color: $black;
-  color: $white;
-}
+  .ui.button {
+    padding: 8px 20px;
+    border: 1px solid $black;
+    border-radius: unset;
+    margin: 0;
+    background: none;
+    color: $black;
 
-.block-editor-__button.has--backgroundColor--grey {
-  background-color: $lightgrey;
+    @include body-text-bold();
+  }
 }

package/src/theme/blocks/_eventMetadata.scss

@@ -29,6 +29,9 @@
             font-size: 24px;
             font-weight: 300;
             line-height: 33px;
+            overflow-wrap: break-word;
+            word-break: break-word;
+            word-wrap: break-word;
             p,
             a {
               margin-top: 10px;
@@ -46,6 +49,10 @@
           }
         }
       }
+
+      @container (max-width: #{$largest-mobile-screen} ) {
+        flex-direction: column;
+      }
     }
     .event-button {
       padding-top: 50px;

package/src/theme/blocks/_grid.scss

@@ -34,8 +34,8 @@
   }
 
   .block.teaser {
+    padding-top: 0;
     margin-bottom: 0;
-    background-color: $lightgrey;
 
     // External link icon
     a.external {
@@ -44,6 +44,10 @@
       }
     }
 
+    a {
+      text-decoration: none;
+    }
+
     .teaser-item {
       height: 100%;
 
@@ -95,8 +99,6 @@
   .slate:not(.inner) {
     padding: 40px 20px 20px 20px;
     margin: 0;
-    background-color: $lightgrey;
-
     p {
       padding: 0;
       margin-bottom: 20px;
@@ -182,13 +184,6 @@
       ) {
       margin-top: unset;
     }
-    &:not(.grid) {
-      .listing-item,
-      .listing-item:last-child {
-        padding-bottom: 40px !important;
-        border-bottom: 1px solid $black !important;
-      }
-    }
 
     &.grid {
       .listing-item {
@@ -207,6 +202,12 @@
     padding: 0;
     margin: 0.5rem 0.5rem 0.5rem 0.5rem !important;
   }
+
+  & + .block.__button {
+    .button.container {
+      padding-top: 0 !important;
+    }
+  }
 }
 
 #page-edit .block-editor-gridBlock,
@@ -324,32 +325,6 @@
   }
 }
 
-.block.gridBlock.has--backgroundColor--grey,
-#page-add .block-editor-gridBlock.has--backgroundColor--grey,
-#page-edit .block-editor-gridBlock.has--backgroundColor--grey {
-  background-color: $lightgrey;
-  .teaser-item {
-    background: white;
-  }
-  .slate {
-    background-color: $white;
-  }
-
-  .slate-editor {
-    background-color: $white !important;
-  }
-
-  .slate:not(.inner) {
-    background-color: $white !important;
-  }
-
-  .grid-block-image {
-    .block.image {
-      background: white;
-    }
-  }
-}
-
 // Teasers in grids specific
 #page-document .block.gridBlock .block.teaser {
   margin-bottom: 0;

package/src/theme/blocks/_highlight.scss

@@ -15,6 +15,7 @@ $black: #000 !default;
   .highlight-description {
     a {
       @include introduction();
+      text-decoration: none;
     }
   }