@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/theme/blocks/_maps.scss

@@ -1,50 +1,76 @@
-.block.maps {
-  iframe {
-    height: unset;
-    aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
-  }
-  &.align.left {
+.block.maps,
+.block-editor-maps {
+  margin-top: $spacing-large;
+  margin-bottom: $spacing-large;
+  .maps-inner {
+    @include variable-container-width();
+
     iframe {
       height: unset;
-      margin-right: 20px !important;
-      margin-bottom: 20px !important;
       aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
-      @container (max-width: #{$largest-mobile-screen}) {
-        margin-bottom: $spacing-large !important;
-      }
     }
-    margin-top: $spacing-large;
-    margin-bottom: 0 !important;
   }
-  &.align.right {
-    iframe {
-      height: unset;
-      margin-bottom: 20px !important;
-      margin-left: 20px !important;
-      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
-      @container (max-width: #{$largest-mobile-screen}) {
-        margin-bottom: $spacing-large !important;
-      }
+  &.has--block-alignment--left {
+    .maps-inner {
+      width: 100%;
+      @include floated-figure('left');
     }
-    margin-top: $spacing-large;
-    margin-bottom: 0 !important;
   }
 
-  &.wide,
-  &.full,
-  &.center {
-    margin-top: $spacing-large;
-    margin-bottom: $spacing-large;
+  &.has--block-alignment--right {
+    .maps-inner {
+      width: 100%;
+      @include floated-figure('right');
+    }
+  }
+  &.has--block-alignment--left,
+  &.has--block-alignment--right {
+    margin-bottom: 0 !important;
+    @container (max-width: #{$largest-mobile-screen}) {
+      margin-bottom: $spacing-large !important;
+    }
   }
 
-  &.align.full iframe {
+  &.has--block-width--full iframe {
     max-height: 600px;
   }
+}
 
-  &.align.right iframe,
-  &.align.left iframe {
-    @container (max-width: #{$largest-mobile-screen}) {
-      margin-bottom: $spacing-large !important;
+#page-document .blocks-group-wrapper > .block.maps {
+  @include variable-container-width();
+}
+
+#page-document .blocks-group-wrapper {
+  // Unfortunately needed to have more specificity than the top one
+  // TODO: Remove when using layers and the BMv3
+  & > .block.maps.has--block-width--default {
+    @include adjustMarginsToContainer($default-container-width);
+  }
+  & > .block.maps.has--block-width--layout {
+    @include adjustMarginsToContainer($layout-container-width);
+  }
+  & > .block.maps.has--block-width--narrow {
+    @include adjustMarginsToContainer($narrow-container-width);
+  }
+}
+
+// Edit block overrides
+#page-edit,
+#page-add {
+  .block-editor-maps {
+    &.has--block-alignment--right,
+    &.has--block-alignment--left {
+      .block .block:not(.inner)::before {
+        z-index: 1;
+      }
+    }
+    .block.inner .block .block {
+      z-index: 2;
+      @include variable-container-width();
+
+      &:before {
+        display: none;
+      }
     }
   }
 }

package/src/theme/blocks/_search.scss

@@ -2,11 +2,10 @@
 #page-add,
 #page-edit {
   .block.search {
+    &.next--has--same--backgroundColor.next--is--same--block-type {
+      margin-bottom: $spacing-xlarge;
+    }
     &.grid {
-      .card-container > img {
-        width: 100% !important;
-      }
-
       .listing-item:last-child {
         padding-bottom: 0;
         border-bottom: none;

package/src/theme/blocks/_table.scss

@@ -13,6 +13,7 @@
   th {
     padding: $spacing-small;
     border-color: #c1c1c1;
+    border-bottom: none;
     background: $darkGrey;
     color: $white;
     p {

package/src/theme/blocks/_teaser.scss

@@ -1,8 +1,3 @@
-// Override the Image component `aspect-ratio`
-.teaser-item .image-wrapper img {
-  aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
-}
-
 // Block Teaser Standalone
 #page-document .block.teaser {
   @include vertical-space-teaser();
@@ -19,123 +14,18 @@
     }
   }
 
-  a.external {
-    .card-summary h2:after {
-      @include external-link-icon();
-    }
-  }
-
-  .teaser-item:not(.placeholder) {
-    align-items: start;
-    padding-bottom: 40px; // same as vertical spacing in margin-bottom
-    border-bottom: 1px solid $black;
-  }
-
-  .image-wrapper {
-    width: 100%;
-  }
-
-  &.has--align--left,
-  &.has--align--right {
-    .card-inner {
-      padding-bottom: 40px;
-    }
-
-    .teaser-item.default {
-      display: flex;
-
-      .image-wrapper {
-        align-self: flex-start;
-      }
-
-      @media only screen and (max-width: $largest-mobile-screen) {
-        flex-direction: column !important;
-      }
-    }
-  }
-
-  &.has--align--left {
-    .teaser-item.default {
-      flex-direction: row;
-
-      .image-wrapper {
-        margin-right: 20px;
-
-        @media only screen and (max-width: $largest-mobile-screen) {
-          margin-right: 0;
-          margin-bottom: 26px;
-        }
-      }
-    }
-  }
-
-  &.has--align--right {
-    .teaser-item.default {
-      flex-direction: row-reverse;
-
-      .image-wrapper {
-        margin-right: 0px;
-        margin-left: 20px;
-
-        @media only screen and (max-width: $largest-mobile-screen) {
-          margin-bottom: 26px;
-          margin-left: 0;
-        }
-      }
-    }
-  }
-
-  &.has--align--center {
-    .teaser-item.default {
-      display: block;
-      a {
-        display: block;
-      }
-
-      .image-wrapper {
-        margin-bottom: 26px;
-        @container (max-width: #{$largest-mobile-screen}) {
-          margin: 0 0 20px 0 !important;
-        }
-      }
-    }
-  }
-
-  .card-summary {
-    .headline {
-      margin-bottom: 20px;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-      @include headtitle1();
-    }
-    h2 {
-      margin-top: 0;
-      margin-bottom: 20px;
-      @include text-heading-h2();
-      @container (max-width: #{$largest-mobile-screen}) {
-        @include text-heading-h3();
-        margin-bottom: 20px;
-      }
-    }
-    p {
-      margin: 0;
-      @include body-text();
-    }
-  }
-
   &.is--last--of--block-type,
   &.next--has--different--backgroundColor {
-    .card-inner,
-    .teaser-item.default {
+    .card-inner {
       padding-bottom: 0;
       border-bottom: none;
     }
-    &.next--is--__button {
-      .card-inner,
-      .teaser-item.default {
-        padding-bottom: 40px;
-        border-bottom: 1px solid;
-      }
+  }
+  &.next--is--__button {
+    margin-bottom: 0 !important;
+    .card-inner {
+      padding-bottom: $spacing-medium;
+      border-bottom: 1px solid;
     }
   }
 }

package/src/theme/blocks/_toc.scss

@@ -1,8 +1,9 @@
 .table-of-contents {
   .ui.bulleted.list {
     li {
+      line-height: 30px;
       a {
-        text-decoration: underline;
+        line-height: inherit;
       }
 
       &::before {

package/src/theme/card.scss

@@ -1,24 +1,27 @@
 .card {
+  // Base
   position: relative;
+  width: 100%;
   transition: box-shadow 0.15s ease;
-}
 
-.card:has(> a):hover,
-.card:has(> a):focus-within {
-  cursor: pointer;
-}
+  &:has(.card-primary-link) {
+    cursor: pointer;
 
-.card a {
-  inset: 0; /* top:0 right:0 bottom:0 left:0 */
-  text-decoration: none; /* remove default underline */
-}
+    // Primary card link stretched via ::after pseudo-element
+    .card-summary .card-primary-link {
+      color: inherit;
+      font: inherit;
 
-.card .card-summary,
-.card .card-summary * {
-  user-select: text; /* explicit for clarity */
-}
+      &::after {
+        position: absolute;
+        z-index: 0;
+        content: '';
+        inset: 0;
+      }
+    }
+  }
 
-.card {
+  // Image
   .image-wrapper {
     width: 100%;
 
@@ -30,48 +33,90 @@
       aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
     }
   }
+  &:not(.contained) .card-inner {
+    padding-bottom: $spacing-medium;
 
-  .card-summary {
-    padding-top: 40px;
-    padding-bottom: 40px;
+    @container (max-width: #{$largest-mobile-screen}) {
+      padding-top: 0;
+    }
+  }
+  .previous--has--different--backgroundColor & .card-inner {
+    padding-top: 0;
+  }
 
+  // Summary
+  :not(.has--align--left, .has--align--right) > & .card-summary {
+    padding-top: $spacing-medium;
+  }
+  .card-summary {
+    @container (max-width: #{$largest-mobile-screen}) {
+      padding-top: $spacing-small !important;
+    }
     .headline {
-      margin-bottom: 20px;
+      margin-bottom: $spacing-small;
       letter-spacing: 1px;
       text-transform: uppercase;
       @include headtitle1();
     }
-    h2 {
+
+    .title {
       margin-top: 0;
-      margin-bottom: 20px;
+      margin-bottom: $spacing-small !important; // Override margin from volto
       @include text-heading-h2();
+
       @container (max-width: #{$largest-mobile-screen}) {
         @include text-heading-h3();
-        margin-bottom: 20px;
+        margin-bottom: $spacing-small;
       }
     }
+
     p {
       margin: 0;
       @include body-text();
+
+      &:empty {
+        display: none;
+      }
     }
   }
-}
 
-// Variants
-// // Contained
-.card {
-  .contained & .card-inner {
-    background: var(--theme-high-contrast-color);
+  // Common styles for link icon overlay
+  .card-link-icon {
+    position: absolute;
+    z-index: 10;
+    top: 0px;
+    right: 0px;
+    filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.5));
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    button {
+      border: none;
+      border-radius: 50%;
+      background: rgba(236, 235, 235, 0.75);
+      cursor: pointer;
+    }
+  }
+
+  &:hover .card-link-icon,
+  &:focus-within .card-link-icon {
+    opacity: 1;
   }
 
+  // Additional links within the card
+  a:not(.card-primary-link) {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  // Contained
   .contained & .card-summary {
-    padding-right: 20px;
-    padding-left: 20px;
+    padding-right: $spacing-small;
+    padding-left: $spacing-small;
   }
-}
 
-// // Side-aligned
-.card {
+  // Side-aligned
   .has--align--left:not(.contained) &,
   .has--align--right:not(.contained) & {
     .card-inner {
@@ -80,84 +125,60 @@
       .image-wrapper {
         flex: 1 1 50%;
 
-        @media only screen and (max-width: $largest-mobile-screen) {
-          margin-right: 0;
-          margin-bottom: 26px;
+        @container (max-width: #{$largest-mobile-screen}) {
+          margin: 0;
         }
       }
 
       .card-summary {
-        // width: 50%;
         flex: 1 1 50%;
-        padding: 0;
+        // padding: 0;
       }
     }
   }
 
   .has--align--left:not(.contained) & {
     .image-wrapper {
-      margin-right: 20px;
+      margin-right: $spacing-small;
     }
   }
 
-  .has--align--right & {
+  .has--align--right:not(.contained) & {
     .card-inner {
       flex-direction: row-reverse;
     }
 
     .image-wrapper {
-      margin-right: 0px;
-      margin-left: 20px;
+      margin-right: 0;
+      margin-left: $spacing-small;
     }
   }
-}
 
-@container (max-width: #{$largest-mobile-screen}) {
-  .card {
+  @container (max-width: #{$largest-mobile-screen}) {
     .has--align--left:not(.contained) &,
     .has--align--right:not(.contained) & {
       .card-inner {
         display: block;
       }
+
       .image-wrapper {
         margin-right: 0;
         margin-left: 0;
       }
     }
   }
-}
-
-// Heading sizes
-@container (min-width: #{$largest-mobile-screen}) {
-  .card {
-    .card-summary {
-      .one & h2 {
-        margin-bottom: 40px !important;
-        @include text-heading-h2();
-      }
-      .two & h2,
-      .three & h2 {
-        @include text-heading-h3();
-      }
-      .four & h2 {
-        @include text-heading-h4();
-      }
-    }
-  }
-}
 
-// Listing
-.card {
+  // Listing
   .card-listing & .card-inner {
     display: flex;
 
     .image-wrapper {
       flex: 0 1 var(--card-listing-image-size, 220px);
-      margin-right: 20px;
+      margin-right: $spacing-small;
 
-      @media only screen and (max-width: $largest-mobile-screen) {
+      @container (max-width: #{$largest-mobile-screen}) {
         margin-right: 0;
-        margin-bottom: 26px;
+        margin-bottom: $spacing-small;
       }
     }
 
@@ -167,3 +188,49 @@
     }
   }
 }
+
+// Hides the link icon in edit and add page
+#page-edit .card-link-icon,
+#page-add .card-link-icon {
+  display: none;
+}
+
+// Cards in columns
+@container (min-width: #{$largest-mobile-screen}) {
+  .card {
+    .card-inner {
+      .one & {
+        .card-summary {
+          padding-top: $spacing-medium;
+        }
+        .title {
+          margin-bottom: $spacing-medium !important; // Override margin from volto
+          @include text-heading-h2();
+        }
+      }
+
+      .two &,
+      .three & {
+        .card-summary {
+          padding-top: $spacing-medium;
+        }
+        .title {
+          @include text-heading-h3();
+        }
+      }
+
+      .four & {
+        .card-summary {
+          padding-top: $spacing-small;
+        }
+        padding-bottom: $spacing-small;
+        .headline {
+          @include headtitle2();
+        }
+        .title {
+          @include text-heading-h4();
+        }
+      }
+    }
+  }
+}

package/src/theme/main.scss

@@ -36,12 +36,16 @@
 @import 'blocks/eventMetadata';
 @import 'blocks/rss';
 @import 'blocks/eventSearch';
+@import 'blocks/form';
 @import 'blocks/error-boundary';
 @import 'sticky-menu';
+@import 'mobile-sticky-menu';
 @import 'card';
 @import 'insets';
 @import 'person';
 @import 'notfound';
+@import 'search-page';
+@import 'export_import';
 
 @import 'temp';
 

package/src/theme/notfound.scss

@@ -1,3 +1,5 @@
+.view-editview.is-anonymous,
+.view-unauthorized,
 .page-not-found {
   .content-area {
     @include default-container-width();

package/src/theme/person.scss

@@ -166,11 +166,17 @@ body .block.gridBlock .contained .person-teaser .card-inner {
   display: flex;
   align-items: center;
   margin-bottom: $spacing-small;
+  svg {
+    margin-right: 0.25em;
+  }
 }
 
 .summary-room-phone {
   display: flex;
   gap: $spacing-small;
+  svg {
+    margin-right: 0.25em;
+  }
 }
 
 // One person teaser in Grid, edit mode
@@ -214,7 +220,7 @@ body .block.gridBlock .contained .person-teaser .card-inner {
 
         img {
           width: 100%;
-          height: 100%;
+          height: 100% !important;
           object-fit: cover;
           object-position: center;
         }

package/src/theme/sticky-menu.scss

@@ -10,7 +10,7 @@ body.cms-ui .sticky-menu {
   transform: translateY(-50%);
   transition: all 0.2s linear;
 
-  @media (min-height: 920px) {
+  @media (min-height: 969px) {
     top: 373px;
     transform: none;
   }
@@ -21,7 +21,9 @@ body.cms-ui .sticky-menu {
     flex-direction: column;
     padding: 0;
     margin: 0;
+    gap: 1px;
     list-style: none;
+    text-align: center;
 
     li a {
       display: flex;
@@ -34,24 +36,24 @@ body.cms-ui .sticky-menu {
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }
 
     li {
       display: flex;
-      height: 93px;
+      min-height: 97px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-bottom: 2px;
+      padding: 5px 10px;
       background: var(--sticky-menu-color, #555);
       color: var(--sticky-menu-foreground-color, #fff);
       font-family: Inter;
       font-size: 10px;
       font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 180% */
+      line-height: 12px;
       text-transform: capitalize;
     }