@kitconcept/volto-light-theme 8.0.0-alpha.17 → 8.0.0-alpha.19

package/src/theme/blocks/_grid.scss

@@ -37,13 +37,6 @@
     padding-top: 0;
     margin-bottom: 0;
 
-    // External link icon
-    a.external {
-      .card-summary h2:after {
-        @include external-link-icon();
-      }
-    }
-
     a {
       text-decoration: none;
     }
@@ -55,39 +48,6 @@
         ) !important;
       }
     }
-
-    .teaser-item {
-      height: 100%;
-
-      .image-wrapper {
-        margin-bottom: $spacing-medium;
-
-        img {
-          position: relative;
-        }
-      }
-      .content {
-        padding: 0 $spacing-small $spacing-small $spacing-small;
-        @include body-text();
-
-        .headline {
-          margin-bottom: $spacing-small;
-          letter-spacing: 1px;
-          text-transform: uppercase;
-          @include headtitle1();
-        }
-
-        h2 {
-          padding: 0;
-          margin-bottom: $spacing-small !important;
-          @include text-heading-h3();
-        }
-
-        p {
-          margin-bottom: $spacing-small;
-        }
-      }
-    }
   }
 
   .block-editor-teaser {
@@ -303,11 +263,6 @@
 #page-add .block-editor-gridBlock .block.gridBlock {
   @media only screen and (min-width: $largest-mobile-screen) {
     .one {
-      .block.teaser .teaser-item .content h2 {
-        margin-bottom: $spacing-medium !important;
-        @include text-heading-h2();
-      }
-
       .slate {
         h2 {
           margin-bottom: $spacing-medium !important;
@@ -330,14 +285,6 @@
 
     .two,
     .three {
-      .teaser {
-        .teaser-item .content {
-          h2 {
-            margin-bottom: $spacing-small !important;
-            @include text-heading-h3();
-          }
-        }
-      }
       .image {
         figcaption {
           .title {
@@ -364,26 +311,6 @@
     }
 
     .four {
-      .teaser {
-        .teaser-item {
-          .image-wrapper {
-            margin-bottom: $spacing-small !important;
-          }
-          .content {
-            .headline {
-              @include headtitle2();
-            }
-            h2 {
-              margin-bottom: $spacing-small !important;
-              @include text-heading-h4();
-            }
-            p {
-              margin-bottom: 0;
-            }
-          }
-        }
-      }
-
       .image {
         figcaption {
           .title {
@@ -424,10 +351,6 @@
   margin-bottom: 0;
 }
 
-.block.gridBlock h2.title {
-  margin-bottom: $spacing-small !important;
-}
-
 // Watch out for the following rule, it is used to override the default
 // behavior of the block editor when selecting a block but it stopped working
 // if the z-index is still -1 (from 6.0.0-alpha.0)

package/src/theme/blocks/_listing.scss

@@ -15,38 +15,54 @@
 .block-editor-search,
 .block.rssBlock,
 .block-editor-rssBlock {
-  &.next--has--same--backgroundColor.next--is--same--block-type,
-  &.next--is--__button {
-    .listing-item:last-child {
-      padding-bottom: 40px !important;
-      border-bottom: 1px solid vas(--theme-font-color, black);
+  .items {
+    padding: 0;
+    margin: 0;
+    & + .pagination-wrapper {
+      margin-top: $spacing-xlarge;
+      @container (max-width: #{$largest-mobile-screen}) {
+        margin-top: $spacing-large;
+      }
+    }
+    &:not(:has(+ .pagination-wrapper)) {
+      .listing-item:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+        margin-bottom: 0;
+
+        .card-inner {
+          padding-bottom: 0;
+        }
+      }
     }
   }
 
-  .items + .pagination-wrapper {
-    margin-top: 80px;
-    @container (max-width: #{$largest-mobile-screen}) {
-      margin-top: 60px;
+  &.next--has--same--backgroundColor.next--is--same--block-type:not(
+      :last-child
+    ),
+  &.next--is--__button {
+    .items > .listing-item:last-child {
+      border-bottom: 1px solid var(--theme-font-color, black);
+    }
+  }
+  &.next--is--__button {
+    margin-bottom: 0 !important;
+    .listing-item:last-child {
+      padding-bottom: $spacing-medium !important;
     }
   }
 
   .listing-item {
-    padding-bottom: 40px !important;
     border-bottom: 1px solid $black;
     margin-bottom: 40px;
+    .card-summary {
+      padding: 0;
 
-    a.external {
-      .listing-body h2:after {
-        @include external-link-icon();
+      p:empty {
+        display: none;
       }
     }
 
-    &:last-child {
-      padding-bottom: 0 !important;
-      border-bottom: none !important;
-      margin-bottom: 0;
-    }
-
     img {
       object-fit: cover;
     }
@@ -54,44 +70,15 @@
     .card-inner a {
       display: inline;
     }
-  }
-
-  h2.headline {
-    @container (max-width: #{$default-container-width + 2 * 20px}) {
-      margin-right: 20px !important;
-      margin-left: 20px !important;
-    }
-  }
-
-  // Default variation
-  &.default,
-  & .default-variation {
-    .headline {
-      @include block-title();
-    }
 
-    .listing-item {
-      .card-summary {
-        padding-top: unset;
-        padding-bottom: unset;
-      }
-      .headline {
-        margin-bottom: 20px;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        @include headtitle1();
-      }
-      h2 {
-        margin-top: 0;
-        margin-bottom: $spacing-medium;
-        @include text-heading-h2();
-      }
-      p {
-        margin-bottom: 0;
-        @include body-text();
-      }
-      p:empty {
-        display: none;
+    .title {
+      display: block;
+      margin-top: 0;
+      margin-bottom: $spacing-medium !important;
+      @include text-heading-h2();
+      @container (max-width: #{$largest-mobile-screen}) {
+        @include text-heading-h3();
+        margin-bottom: $spacing-small;
       }
     }
   }
@@ -100,44 +87,21 @@
   &.summary,
   & .summary-variation {
     .listing-item {
-      padding-top: 0 !important;
-
       .card {
-        width: 100%;
         .card-inner .image-wrapper {
           flex: 0 0 220px;
           img {
+            width: 220px;
             max-width: 100%;
+            height: min-content;
+            @container (max-width: #{$largest-mobile-screen}) {
+              width: 100%;
+              min-width: 335px;
+              margin-bottom: $spacing-small;
+            }
           }
         }
       }
-
-      img {
-        width: 220px;
-        height: min-content;
-        aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
-        @container (max-width: #{$largest-mobile-screen}) {
-          width: 100%;
-          min-width: 335px;
-          margin-bottom: 20px;
-        }
-      }
-      .headline {
-        margin-bottom: 20px;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        @include headtitle1();
-      }
-      h3 {
-        margin-top: 0 !important;
-        margin-bottom: 40px !important;
-        color: $black;
-        @include text-heading-h2();
-        @container (max-width: #{$largest-mobile-screen}) {
-          @include text-heading-h3();
-          margin-bottom: 20px !important;
-        }
-      }
     }
   }
 
@@ -159,15 +123,10 @@
         flex-direction: column;
 
         .listing-item {
-          padding-bottom: 20px !important;
+          padding-bottom: $spacing-small !important;
         }
       }
     }
-    .headline {
-      @include block-title();
-      margin-right: 0 !important;
-      margin-left: 0 !important;
-    }
     .listing-item {
       align-items: normal;
       border-bottom: none;
@@ -208,35 +167,16 @@
         .card-inner {
           .image-wrapper {
             img {
-              width: 100%;
               margin: 0;
-              aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
             }
           }
           .card-summary {
-            padding: 0 $spacing-small $spacing-medium $spacing-small;
-            margin-top: $spacing-medium;
-
-            .headline {
-              padding: 0 !important;
-              margin-bottom: $spacing-small;
-              letter-spacing: 1px;
-              text-transform: uppercase;
-              @include headtitle1();
-              @include word-break();
-            }
+            padding: $spacing-medium $spacing-small 0 $spacing-small;
 
-            h2 {
-              margin: 0 0 $spacing-small 0;
+            .title {
+              margin: 0 0 $spacing-small 0 !important;
               @include text-heading-h3();
             }
-            p {
-              margin-bottom: 0;
-              @include body-text();
-            }
-            p:empty {
-              display: none;
-            }
           }
         }
       }
@@ -459,21 +399,6 @@
 #page-edit .block-editor-listing.has--backgroundColor--grey,
 .block.listing.has--backgroundColor--grey {
   background-color: $lightgrey;
-
-  &.grid {
-    .listing-item {
-      .card-container {
-        background-color: $white;
-      }
-    }
-  }
-  .block.listing.grid {
-    .listing-item {
-      .card-container {
-        background-color: $white;
-      }
-    }
-  }
 }
 
 .listing-item .headline span:not(:last-child)::after {

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,124 +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 {
-      margin-bottom: 0 !important;
-      .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;
     }
   }
 }