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

package/src/theme/blocks/_image.scss

@@ -4,145 +4,85 @@ figure {
   margin: 0;
 }
 
-.block.image.has--block-width--full figcaption {
-  padding-right: 25px;
-  padding-left: 25px;
-}
-
-.block.image {
+.block.image,
+.block-editor-image {
+  --align-left: left;
+  --align-center: none;
+  --align-right: right;
   margin: 0;
+  margin-top: $spacing-large;
 
-  &.align.left,
-  &.align.right {
-    // This is to equal the heading margin in case of the
-    // floating image + heading use case
-    // It matches the mocks for standalone images anyways
-    margin-top: $spacing-large;
-    margin-bottom: 0 !important;
+  &.has--block-width--full {
+    figcaption {
+      padding-right: 25px;
+      padding-left: 25px;
+    }
   }
 
   &.has--block-width--default,
+  &.has--block-width--layout,
   &.has--block-width--narrow,
   &.has--block-width--full {
-    figure:not(.left, .right) {
+    figure {
       margin-top: $spacing-large;
       margin-bottom: $spacing-large;
     }
   }
 
-  figure {
-    img {
-      width: 100% !important;
-      height: auto;
-      aspect-ratio: var(--image-aspect-ratio, auto);
-    }
-
-    &.right {
-      margin-bottom: 20px;
-      margin-left: 20px;
-      float: right;
-
-      @container (max-width: #{$largest-mobile-screen}) {
-        margin-bottom: $spacing-large;
-      }
+  &.has--block-alignment--left,
+  &.has--block-alignment--right {
+    margin-bottom: 0 !important;
 
-      img {
-        margin-right: 0 !important;
-        margin-bottom: 0px;
-        margin-left: 0 !important;
-        float: none;
-      }
+    &:has(+ h2) {
+      margin-top: $spacing-xlarge;
     }
 
-    &.left {
-      margin-right: 20px;
-      margin-bottom: 20px;
-      float: left;
-
+    figure {
+      margin-top: 0 !important;
+      margin-bottom: $spacing-small;
       @container (max-width: #{$largest-mobile-screen}) {
+        max-width: unset !important;
         margin-bottom: $spacing-large;
       }
 
       img {
-        margin-right: 0 !important;
-        margin-bottom: 0px;
+        margin: 0 !important;
         float: none;
       }
     }
-
-    &.left,
-    &.right {
-      &.large {
-        width: 50%;
-        height: auto;
-
-        @media only screen and (max-width: 768px) {
-          width: 100%;
-        }
-      }
-
-      &.medium {
-        width: 50%;
-        height: auto;
-        @media only screen and (max-width: 768px) {
-          width: 100%;
-        }
+    &.small {
+      figure {
+        max-width: 220px;
       }
+    }
 
-      &.small {
-        width: 25%;
-        height: auto;
-        @media only screen and (max-width: 768px) {
-          width: 100%;
-        }
+    &.medium {
+      figure {
+        max-width: 300px;
       }
     }
+  }
 
-    &.wide,
-    &.full {
-      margin-top: $spacing-large;
-      margin-bottom: $spacing-large;
+  &.has--block-alignment--left {
+    figure {
+      @include floated-figure('left');
     }
+  }
 
-    &.center {
-      width: 100% !important;
-      margin-right: auto !important;
-      margin-bottom: $spacing-large;
-      margin-left: auto !important;
-      object-fit: cover;
-
-      img {
-        height: auto;
-        margin-right: initial;
-        margin-left: initial;
-      }
-
-      &.large,
-      &.medium,
-      &.small {
-        width: 100% !important;
-      }
-
-      &.large {
-        figcaption {
-          text-align: start;
-        }
-      }
-
-      &.medium {
-        figcaption {
-          width: 100%;
-          margin-right: auto;
-          margin-left: auto;
-          text-align: start;
-        }
-      }
+  &.has--block-alignment--right {
+    figure {
+      @include floated-figure('right');
     }
   }
 
-  img {
-    max-width: 100% !important;
-    height: auto;
+  figure {
+    width: 100%;
+    img {
+      width: 100% !important;
+      max-width: 100% !important;
+      height: auto;
+      aspect-ratio: var(--image-aspect-ratio, auto);
+    }
   }
 }
 
@@ -181,72 +121,36 @@ figcaption {
 
 // video block
 
-#page-document .block.video.align.left,
-.block.video.align.left,
-#page-document .block.video.align.right,
-.block.video.align.right {
-  @include default-container-width;
-}
-
-#page-document .block.video.align.center figure,
-.block.video.align.center figure {
-  @include default-container-width;
-}
-
-.block.video {
-  .figure {
-    width: 100%;
-  }
-
-  &.full figcaption {
-    padding-right: 25px;
-    padding-left: 25px;
-  }
-
-  &.wide,
-  &.full,
-  &.center {
-    margin-top: $spacing-large;
-    margin-bottom: $spacing-large;
-  }
-
-  &.align.left.has--backgroundColor--grey figure,
-  &.align.right.has--backgroundColor--grey figure {
-    padding-top: 25px;
-  }
+.block.video,
+.block-editor-video {
+  margin-top: $spacing-large;
+  .video-inner {
+    @include variable-container-width();
 
-  &.align.left.has--backgroundColor--grey,
-  &.align.right.has--backgroundColor--grey {
-    margin-top: 0px;
-    margin-bottom: 0px;
+    .placeholder {
+      width: 100% !important;
+    }
   }
-
-  &.align.left,
-  &.align.right {
-    margin-top: $spacing-large;
-    margin-bottom: 0 !important;
-
+  &.has--block-alignment--left {
     .video-inner {
-      margin-bottom: 20px !important;
-      @media only screen and (max-width: $tablet-breakpoint) {
-        width: 100%;
-      }
-      @container (max-width: #{$largest-mobile-screen}) {
-        margin-bottom: $spacing-large !important;
-      }
+      width: 100%;
+      @include floated-figure('left');
     }
+  }
 
-    img {
-      margin: 0 !important;
+  &.has--block-alignment--right {
+    .video-inner {
+      width: 100%;
+      @include floated-figure('right');
     }
   }
-
-  &.align.left .video-inner {
-    margin-right: 20px !important;
+  figure {
+    width: 100%;
   }
 
-  &.align.right .video-inner {
-    margin-left: 20px !important;
+  &.has--block-width--full figcaption {
+    padding-right: 25px;
+    padding-left: 25px;
   }
 }
 
@@ -371,35 +275,46 @@ figcaption {
   }
 }
 
-// Image block overrides
-#page-edit,
-#page-add {
-  .block-editor-image figure.center {
-    @include variable-container-width();
-  }
-
-  .block-editor-image.default figure {
-    max-width: var(--default-container-width);
-  }
-}
-
-#page-document .blocks-group-wrapper > .block.image.align.center {
-  @include variable-container-width();
-}
-#page-document .blocks-group-wrapper > .block.image.align.center figure {
+#page-document .blocks-group-wrapper > .block.image,
+#page-document .blocks-group-wrapper > .block.video {
   @include variable-container-width();
 }
 
 #page-document .blocks-group-wrapper {
-  & > .block.image.align.center.has--block-width--default {
-    // Unfortunately needed to have more specificity than the top one
-    // TODO: Remove when using layers and the BMv3
+  // Unfortunately needed to have more specificity than the top one
+  // TODO: Remove when using layers and the BMv3
+  & > .block.image.has--block-width--default,
+  & > .block.video.has--block-width--default {
     @include adjustMarginsToContainer($default-container-width);
   }
-  & > .block.image.align.center.has--block-width--layout {
+  & > .block.image.has--block-width--layout,
+  & > .block.video.has--block-width--layout {
     @include adjustMarginsToContainer($layout-container-width);
   }
-  & > .block.image.align.center.has--block-width--narrow {
+  & > .block.image.has--block-width--narrow,
+  & > .block.video.has--block-width--narrow {
     @include adjustMarginsToContainer($narrow-container-width);
   }
 }
+
+// Edit block overrides
+#page-edit,
+#page-add {
+  .block-editor-image,
+  .block-editor-video {
+    &.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/_listing.scss

@@ -15,79 +15,73 @@
 .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);
+      .card-inner {
+        padding-bottom: $spacing-medium;
+      }
+    }
+  }
+  &.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;
+    margin-bottom: $spacing-medium;
+    .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;
     }
-  }
 
-  h2.headline {
-    @container (max-width: #{$default-container-width + 2 * 20px}) {
-      margin-right: 20px !important;
-      margin-left: 20px !important;
+    .card-inner a {
+      display: inline;
     }
-  }
 
-  // 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;
       }
     }
   }
@@ -96,44 +90,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;
-        }
-      }
     }
   }
 
@@ -155,15 +126,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;
@@ -202,37 +168,19 @@
       .card {
         flex-grow: 1;
         .card-inner {
+          padding-bottom: $spacing-medium !important;
           .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;
-            }
           }
         }
       }
@@ -455,21 +403,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 {