@kitconcept/volto-light-theme 1.0.0-rc.5 → 1.0.0-rc.7

package/src/theme/_layout.scss

@@ -38,22 +38,16 @@ $narrow-container-width: 620px !default;
 
 // One still cannot use CSS custom properties directly on @container queries
 @mixin adjustMarginsToContainer($width) {
-  // Next two ones are mostly aesthetical if you don't want to "see" the jump - PoC (WIP)
-  // transition: margin 1s ease;
-
-  // @container (max-width: #{$width + 5px}) {
-  //   margin-right: 5px;
-  //   margin-left: 5px;
-  // }
-
-  // @container (max-width: #{$width}) {
-  //   margin-right: 0px;
-  //   margin-left: 0px;
-  // }
+  @container (max-width: #{$width + 2 * $horizontal-space-small-screens}) {
+    margin-right: $horizontal-space-small-screens;
+    margin-left: $horizontal-space-small-screens;
+  }
+}
 
-  @container (max-width: #{$width - 1}) {
-    margin-right: 20px;
-    margin-left: 20px;
+@mixin adjustMarginsToEditContainer($width) {
+  @container (max-width: #{$width + 2 * $spacing-medium}) {
+    margin-right: $spacing-medium;
+    margin-left: $spacing-medium;
   }
 }
 
@@ -115,12 +109,16 @@ footer {
   @include layout-container-width();
 }
 
-.header-wrapper .header,
-.breadcrumbs .breadcrumb {
+.header-wrapper .header {
   @include layout-container-width();
   @include adjustMarginsToContainer($layout-container-width);
 }
 
+.breadcrumbs .breadcrumb {
+  @include default-container-width();
+  @include adjustMarginsToContainer($default-container-width);
+}
+
 // Content Layout Styling
 #page-document .blocks-group-wrapper {
   & > h2,
@@ -166,6 +164,7 @@ footer {
   & > .block.introduction .block-container,
   & > .block.teaser .teaser-item.default,
   & > .table-of-contents,
+  & > .accordion-block,
   & > .slate blockquote {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
@@ -199,7 +198,7 @@ footer {
 #page-edit {
   [class*='block-editor-'] {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 
@@ -218,7 +217,7 @@ footer {
   .block-editor-codeBlock,
   .block-editor-mermaidBlock {
     @include narrow-container-width();
-    @include adjustMarginsToContainer($narrow-container-width);
+    @include adjustMarginsToEditContainer($narrow-container-width);
   }
 
   .block-editor-title h1,
@@ -236,7 +235,7 @@ footer {
   .block-editor-teaser .teaser-item.default,
   .block-editor-toc {
     @include default-container-width();
-    @include adjustMarginsToContainer($default-container-width);
+    @include adjustMarginsToEditContainer($default-container-width);
   }
 
   .block-editor-slate,
@@ -245,7 +244,7 @@ footer {
   .block-editor-teaser,
   .block-editor-separator.has--align--left {
     @include layout-container-width();
-    @include adjustMarginsToContainer($layout-container-width);
+    @include adjustMarginsToEditContainer($layout-container-width);
   }
 }
 
@@ -257,17 +256,28 @@ footer {
 .block.gridBlock .grid-items,
 .block.gridBlock h2.headline {
   @include default-container-width();
-  // Adding 2 * 20px (one for each side) we force the container to extend the value of
-  // the gutter
-  max-width: calc(var(--default-container-width) + 2 * 20px);
+  // Adding 2 * 10px (one for each side) we force the container to extend the value of
+  // the gutter to match the other blocks margin.
+  max-width: calc(var(--default-container-width) + 2 * 10px);
 }
 
-.block.gridBlock {
-  .ui.grid > .column:not(.row):first-child {
-    padding-left: 20px;
+// Custom adjustMarginsToContainer() for grids
+// $default-container-width + 2 * 20px to compensate the width of the gutter on each side
+// (2 * (10px from the margin + 10px from the inner padding of the column))
+// It's a media query because we have to cancel the one imposed by SemanticUI Grid
+@media only screen and (max-width: $default-container-width + 2 * 20px) {
+  .block.gridBlock {
+    margin-right: 10px;
+    margin-left: 10px;
   }
-  .ui.grid > .column:not(.row):last-child {
-    padding-right: 20px;
+}
+
+// We have to adjust the inner headings also because of the extra margin added in the
+// above rule
+#page-document .blocks-group-wrapper > .block h2.headline {
+  @container (max-width: #{$default-container-width + 2 * 20px}) {
+    margin-right: 10px;
+    margin-left: 10px;
   }
 }
 

package/src/theme/_variables.scss

@@ -73,6 +73,15 @@ $bold: 700 !default;
 $extra-bold: 800 !default;
 $bolder: 900 !default;
 
+// Spacing
+$spacing-small: 20px !default;
+$spacing-medium: 40px !default;
+$spacing-large: 60px !default;
+$spacing-xlarge: 80px !default;
+
+// Horizontal Spacing
+$horizontal-space-small-screens: $spacing-small !default;
+
 // Vertical Spacing
 $block-vertical-space: 25px !default;
 

package/src/theme/blocks/_accordion.scss

@@ -2,3 +2,54 @@
 .block.accordion [data-rbd-draggable-context-id] {
   margin-bottom: 2rem;
 }
+
+.accordion-block {
+  .ui.styled.accordion {
+    border-top: 1px solid $black;
+
+    &:last-child {
+      border-bottom: 1px solid $black;
+    }
+    .title.accordion-title {
+      padding: 20px 0 20px 0;
+      background-color: unset;
+
+      & > svg {
+        height: 50px !important;
+        fill: $grey !important;
+        transform: rotate(-90deg);
+      }
+
+      & > span {
+        @include introduction();
+        color: $darkGrey;
+      }
+
+      &.active > span {
+        color: $black;
+      }
+
+      &.active > svg {
+        fill: $black !important;
+        transform: rotate(180deg);
+      }
+    }
+
+    .block.listing {
+      &:first-child {
+        margin-top: 0;
+      }
+      .listing-item:last-child {
+        border-bottom: none !important;
+      }
+    }
+
+    .block:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .content {
+      padding: 0;
+    }
+  }
+}

package/src/theme/blocks/_grid.scss

@@ -129,6 +129,9 @@
   }
 
   .block.listing {
+    &.previous--has--same--backgroundColor:not(.has--headline) {
+      margin-top: 0;
+    }
     h2 {
       margin-bottom: 40px !important;
     }
@@ -144,7 +147,7 @@
 
   .block-editor-empty {
     padding: 0;
-    margin: 1rem 0.5rem 1rem 0.5rem !important;
+    margin: 0.5rem 0.5rem 0.5rem 0.5rem !important;
   }
 }
 

package/src/theme/blocks/_listing.scss

@@ -58,7 +58,7 @@
       padding-top: 0 !important;
 
       img {
-        width: 25%;
+        width: 220px;
         height: min-content;
         aspect-ratio: $aspect-ratio;
       }
@@ -91,6 +91,16 @@
       @include block-title();
     }
     .listing-item {
+      padding-bottom: 0 !important;
+      border-bottom: none !important;
+      margin-right: auto !important;
+      margin-bottom: 0 !important;
+      margin-left: auto !important;
+
+      @media only screen and (max-width: $largest-mobile-screen) {
+        margin: 0 !important;
+      }
+
       @media only screen and (min-width: $tablet-breakpoint) {
         width: 50%;
 
@@ -121,12 +131,10 @@
         }
       }
 
-      padding-bottom: 0 !important;
-      border-bottom: none !important;
-      margin-bottom: 0 !important;
-
       &:last-child:nth-child(2n + 1) {
-        margin-left: 0 !important;
+        @media only screen and (min-width: $largest-mobile-screen) {
+          margin-left: 0 !important;
+        }
       }
 
       .card-container {
@@ -177,9 +185,14 @@
     }
   }
 
-  &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+  &.previous--has--same--backgroundColor:not(.has--headline) {
     margin-top: 200px;
   }
+
+  .documentFirstHeading
+    + &.previous--has--same--backgroundColor:not(.has--headline) {
+    margin-top: 0;
+  }
 }
 
 #page-add .block-editor-listing.has--backgroundColor--grey,

package/src/theme/collections/grid.variables

@@ -1,7 +1,4 @@
-// We want the separation between cells in grids to be 1rem only
+// We want the separation between cells in grids to be $horizontal-space-small-screens
+// Keep in sync with _variables.scss $horizontal-space-small-screens
 @gutterWidth: 20px;
 @rowSpacing: 20px;
-
-// This has to be 2 * 20px because it's going to be 1/2 in the source.
-@stackableGutter: 2 * 20px;
-