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

package/src/theme/_layout.scss

@@ -54,6 +54,12 @@
   }
 }
 
+@mixin adjustEditContainerFullWidth() {
+  max-width: calc(100% - 2 * $spacing-medium);
+  margin-right: auto;
+  margin-left: auto;
+}
+
 // Container adjustments for dealing correctly with absolute positioned elements
 @mixin container-preference-order($zindex) {
   position: relative;
@@ -146,32 +152,40 @@ footer {
   @include default-container-width();
   @include adjustMarginsToContainer($default-container-width);
 }
-// External link Styling
+// External & Mail link Styling
 
-// Slate Style External Links
+// Slate Style External & Mail Links
 .content-area .ui.container,
 .content-area .q.container,
 .content-area .a.container {
-  a.external:after,
-  a.external:after {
+  a.external:not(.card-primary-link):after {
     @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
   }
+  p a[href^='mailto:']:after {
+    @include mail-link-icon();
+    margin-top: -25px;
+    margin-left: 3px;
+  }
 }
 .content-area #page-edit .ui.container,
 .content-area .q.container,
 .content-area .a.container {
-  a.external:after,
-  a.external:after {
+  a.external:not(.card-primary-link):after {
     @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
   }
+  p a[href^='mailto:']:after {
+    @include mail-link-icon();
+    margin-top: -25px;
+    margin-left: 3px;
+  }
 }
 
 /*
-External link removal for all the blocks.
+External & Mail link removal for all the blocks.
 */
 .content-area #page-edit .ui.container,
 .content-area .q.container,
@@ -180,8 +194,10 @@ External link removal for all the blocks.
   .block.listing,
   .block.image,
   .block.teaser {
-    a.external:after,
-    a.external:after {
+    a.external:not(.card-primary-link):after {
+      display: none;
+    }
+    p a[href^='mailto:']:after {
       display: none;
     }
   }
@@ -200,16 +216,6 @@ External link removal for all the blocks.
   & > p,
   & > span,
   & > blockquote,
-  & > .block.image.align.left.medium,
-  & > .block.image.align.left.small,
-  & > .block.image.align.right.medium,
-  & > .block.video.align.left,
-  & > .block.video.align.right,
-  & > .block.maps.align.left,
-  & > .block.maps.align.right,
-  & > .block.image.align.right.small,
-  & > .block.video.align.center .video-inner,
-  & > .block.maps.align.center .maps-inner,
   .download-event,
   .block.separator.has--align--left .line,
   .block.separator.has--align--center .line,
@@ -222,16 +228,6 @@ External link removal for all the blocks.
   }
 
   & > h1.documentFirstHeading,
-  & > .block.image.align.left,
-  & > .block.image.align.right,
-  & > .block.image.align.center,
-  & > .block.image.align.wide figure,
-  & > .block.video.align.left,
-  & > .block.video.align.right,
-  & > .block.maps.align.left,
-  & > .block.maps.align.right,
-  & > .block.video.align.wide .video-inner,
-  & > .block.maps.align.wide .maps-inner,
   & > .block.__button,
   & > .block.eventMetadata .details-container,
   & > .block.listing .listing-item,
@@ -241,36 +237,22 @@ External link removal for all the blocks.
   & > .block.search.grid,
   & > .block.rssBlock,
   & > .block.search .searchBlock-container,
-  &> .block.eventsearch .search-block-event,
+  & > .block.eventsearch .search-block-event,
+  & > .block h2.block-title,
   & > .block h2.headline,
   & > .block.heading .heading-wrapper,
-  & > .block.teaser .teaser-item.default,
-  & > .block.teaser .card-inner, // deprecate when category is in place
+  & > .block.teaser,
   & > .block.highlight .teaser-description-title,
   & > table,
   & > .table-of-contents,
   & > .accordion-block,
-  & > .slate blockquote {
+  & > .slate blockquote,
+  & > .block.banner.has--block-width--layout .banner-inner-container .text {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
   }
 
-  & > .block.teaser,
-  & > .block.image.align.full,
-  & > .block.video.align.full,
-  & > .block.maps.align.full {
-    @include layout-container-width();
-  }
-
   /* Styling align left and right in mobile view */
-  .block.video.align.right .video-inner,
-  .block.video.align.left .video-inner,
-  .block.maps.align.right iframe,
-  .block.maps.align.left iframe {
-    @container (max-width: #{$largest-mobile-screen}) {
-      width: 100%;
-    }
-  }
 
   & > h1.documentFirstHeading {
     @include adjustMarginsToContainer($default-container-width);
@@ -280,6 +262,13 @@ External link removal for all the blocks.
     // This is the default spacing in between same-color blocks
     margin-bottom: $block-vertical-space;
 
+    // Listing followed by another listing (same bg) without headline: 40px gap
+    &.listing.next--has--same--backgroundColor.next--is--same--block-type:has(
+        + .block.listing:not(.has--headline)
+      ) {
+      margin-bottom: $spacing-medium;
+    }
+
     // Default side margins on smaller screens
     &.has--block-width--narrow {
       @include adjustMarginsToContainer($narrow-container-width);
@@ -295,7 +284,7 @@ External link removal for all the blocks.
       @include adjustMarginsToContainer($default-container-width);
     }
 
-    &.has--block-width--layout {
+    &:not(.banner).has--block-width--layout {
       @include adjustMarginsToContainer($layout-container-width);
     }
   }
@@ -314,6 +303,9 @@ External link removal for all the blocks.
   [class*='block-editor-']:not(.contained) {
     @include layout-container-width();
     @include adjustMarginsToEditContainer($layout-container-width);
+    &.has--block-width--full {
+      @include adjustEditContainerFullWidth();
+    }
   }
 }
 
@@ -321,14 +313,6 @@ External link removal for all the blocks.
 #page-add,
 #page-edit {
   .block.slate .slate-editor,
-  .block-editor-image.left.medium,
-  .block-editor-image.left.small,
-  .block-editor-image.right.medium,
-  .block-editor-image.right.small,
-  .block-editor-video.align.left,
-  .block-editor-video.align.right,
-  .block-editor-video.center .video-inner,
-  .block.maps.align.center .maps-inner,
   .block-editor-separator.has--align--left
     .block.separator.inner
     .block.separator
@@ -347,17 +331,6 @@ External link removal for all the blocks.
   }
 
   .block-editor-title h1,
-  .block-editor-image.left.large,
-  .block-editor-image.right.large,
-  .block-editor-image.wide figure, // Wide images are always large
-  .block-editor-image.wide.large figure,
-  .block-editor-video.align.left,
-  .block-editor-video.align.right,
-  .block.maps.align.left,
-  .block.maps.align.right,
-  .block.video.align.wide .video-inner,
-  .block.maps.align.wide .maps-inner,
-
   .block.introduction .slate-editor,
   .block.heading .heading-wrapper,
   .block-editor-listing .items,
@@ -378,21 +351,12 @@ External link removal for all the blocks.
   }
 
   .block-editor-slate,
-  .block-editor-image,
   .block-editor-slider,
   .block-editor-teaser,
   .block-editor-separator.has--align--left {
     @include layout-container-width();
     @include adjustMarginsToEditContainer($layout-container-width);
   }
-
-  /* Styling align left and right in mobile view */
-  .block.video.align.right .video-inner,
-  .block.video.align.left .video-inner {
-    @container (max-width: #{$largest-mobile-screen}) {
-      width: 100%;
-    }
-  }
 }
 
 // Grids adjustments (has to be paired with collections/grid.variables)

package/src/theme/_mobile-sticky-menu.scss

@@ -0,0 +1,92 @@
+.mobile-sticky-menu {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  display: flex;
+  display: none;
+  width: 100%;
+  height: 100px;
+  flex-direction: column;
+  background-color: var(--sticky-menu-color, #555);
+  @media only screen and (max-width: $largest-mobile-screen) {
+    display: block;
+  }
+
+  .embla {
+    position: relative;
+    --slide-size: 33%;
+
+    .embla__button {
+      display: flex;
+      height: 100px;
+      align-items: center;
+      padding: 0px;
+      border: none;
+      background-color: transparent;
+      color: var(--sticky-menu-foreground-color, #fff);
+      cursor: pointer;
+      font-size: 30px;
+    }
+    .embla__button--prev {
+      position: absolute;
+      top: 0px;
+      left: -5px;
+    }
+    .embla__button--next {
+      position: absolute;
+      top: 0px;
+      right: -5px;
+    }
+    .embla__viewport {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      width: 85%;
+
+      .embla__container {
+        display: flex;
+        height: 100px;
+        touch-action: pan-y pinch-zoom;
+        touch-action: pan-x;
+
+        .embla__slide {
+          min-width: 0;
+          flex: 0 0 var(--slide-size);
+          padding: 0px;
+          margin: 0px;
+          transform: translate3d(0, 0, 0);
+
+          .image-wrapper {
+            display: block;
+            width: 65px;
+            height: 65px;
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          li {
+            list-style: none;
+          }
+
+          span {
+            display: block;
+            color: var(--sticky-menu-foreground-color, #fff);
+            font-size: 10px;
+            font-weight: 700;
+            line-height: 12px;
+          }
+
+          a {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            padding: 5px 10px 15px 10px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/_search-page.scss

@@ -0,0 +1,250 @@
+// Styles for kitconcept.solr search page
+.section-search #page-search {
+  & > .ui.container {
+    max-width: var(--default-container-width) !important;
+    padding: 0 !important;
+  }
+}
+#page-search {
+  .total-bar {
+    margin-bottom: 75px;
+    h2 {
+      margin-top: $spacing-medium;
+      font-size: 48px;
+      font-weight: 700 !important;
+      line-height: 60px; /* 125% */
+    }
+  }
+  .searchTabs.ui.top.attached.tabular.menu {
+    --solr-search-facet-tab-inactive-color: var(--accent-color);
+
+    border-radius: 0;
+    .searchTab {
+      padding: $spacing-small 10px;
+      border: 1px solid var(--accent-color) !important;
+      border-radius: 0 !important;
+      margin-bottom: 0;
+      cursor: pointer;
+      span {
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 12px; /* 120% */
+        text-transform: capitalize;
+
+        .searchCounter.circular.label {
+          min-width: 22px;
+          background: color-mix(
+            in srgb,
+            var(--accent-color) 50%,
+            var(--accent-foreground-color)
+          );
+          color: var(--primary-color, #fff);
+          font-weight: 400;
+        }
+      }
+
+      &.active {
+        .searchCounter.circular.label {
+          background-color: var(--primary-foreground-color) !important;
+          color: var(--primary-color, #fff) !important;
+        }
+        cursor: auto;
+      }
+      &:not(.active) {
+        color: var(--accent-foreground-color);
+
+        svg {
+          color: var(--accent-foreground-color);
+        }
+
+        &:hover {
+          color: color-mix(
+            in srgb,
+            var(--accent-color) 20%,
+            var(--accent-foreground-color)
+          );
+
+          svg {
+            color: color-mix(
+              in srgb,
+              var(--accent-color) 20%,
+              var(--accent-foreground-color)
+            );
+          }
+        }
+      }
+      svg {
+        display: inline;
+        margin-right: 5px;
+        vertical-align: bottom;
+      }
+    }
+  }
+  #content {
+    #content-core {
+      max-width: var(--default-container-width);
+      &.layout-grid {
+        // Person results
+        .tileItem.personResultItem {
+          .itemWrapper {
+            flex-direction: column;
+            .itemImageWrapper {
+              width: 125px;
+              height: 125px;
+              margin-bottom: $spacing-small;
+              svg:has(+ img.profileImage) {
+                display: none;
+              }
+              img.profileImage,
+              svg.icon {
+                width: 125px !important;
+                height: 125px !important;
+              }
+            }
+            .itemContent {
+              max-width: 90%;
+              padding-right: $spacing-medium;
+              .tileHeadline {
+                margin: 10px 0 15px 0;
+                font-size: 18px;
+                line-height: 24px; /* 133.333% */
+              }
+              .jobTitle {
+                margin-bottom: 15px;
+                color: var(--primary-foreground-color);
+                font-size: 18px;
+                line-height: 24px; /* 133.333% */
+              }
+              .tileFooter {
+                * {
+                  vertical-align: unset;
+                }
+                .itemField {
+                  display: block;
+                  padding: 0;
+                  border: none;
+                  margin-bottom: 5px;
+
+                  font-size: 18px;
+
+                  line-height: 24px; /* 133.333% */
+                  svg.icon {
+                    width: 20px !important;
+                    margin-right: 10px;
+                    vertical-align: text-top;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      &.layout-list {
+        // Person results
+        .tileItem.personResultItem {
+          .tileHeadline {
+            margin-top: 10px;
+            font-size: 18px;
+            line-height: 24px;
+          }
+          .jobTitle {
+            margin: 15px 0;
+            margin-bottom: 15px;
+            color: var(--primary-foreground-color);
+            font-size: 18px;
+            line-height: 24px; /* 133.333% */
+          }
+          .tileFooter {
+            svg.icon {
+              width: 20px !important;
+              margin-right: 10px;
+              vertical-align: text-top;
+            }
+          }
+        }
+      }
+
+      .pagination.menu {
+        border-radius: 0;
+        background: var(--accent-color);
+        --link-foreground-color: var(--accent-foreground-color);
+
+        a.item {
+          color: var(--accent-foreground-color);
+
+          &.active {
+            background: var(--accent-foreground-color) !important;
+            color: var(--accent-color) !important;
+          }
+
+          &.disabled {
+            opacity: 0.8;
+          }
+        }
+      }
+    }
+
+    .searchConditions.ui {
+      width: 265px;
+      margin-right: $spacing-medium;
+      .searchConditionsFieldHeader {
+        font-size: 18px;
+        line-height: 24px; /* 133.333% */
+        .searchConditionsFieldSearch {
+          margin-top: $spacing-small;
+          input {
+            height: 60px;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            border: none;
+            border-radius: 0;
+            font-size: 18px;
+            line-height: 24px; /* 133.333% */
+          }
+          i.search.icon {
+            opacity: 1;
+            &::before {
+              transform: scale(2) scaleX(-1);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Basic mobile styles
+@media only screen and (max-width: $largest-mobile-screen) {
+  #page-search {
+    #content {
+      .searchContentWrapper {
+        flex-direction: column;
+      }
+      .searchConditions.ui {
+        width: 100%;
+        margin-right: 0;
+      }
+      #content-core {
+        .search-items {
+          grid-template-columns: 100%;
+        }
+        &.layout-list,
+        &.layout-grid {
+          .tileItem {
+            .itemContent {
+              min-width: 0;
+            }
+            .tileFooter {
+              .itemField {
+                display: block;
+                border: none;
+                overflow-wrap: break-word;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/_typo-custom.scss

@@ -27,13 +27,20 @@ li::marker {
   line-height: 32px;
 }
 
-.content-area,
-.breadcrumbs {
-  p > a,
-  li > a,
-  .breadcrumb a {
-    color: $blue-for-grey-contrast;
-    text-decoration: underline;
+header .navigation .item {
+  font-family: $page-font;
+}
+
+.public-ui,
+.cms-ui.view-editview {
+  .content-area,
+  .breadcrumbs {
+    a:not(.card-primary-link, .label, .item, .link-container) {
+      color: var(--link-foreground-color, var(--theme-foreground-color));
+      font: inherit;
+      line-height: inherit;
+      text-decoration: underline;
+    }
   }
 }
 
@@ -91,7 +98,8 @@ h1.documentFirstHeading:last-child {
 }
 
 // Block Title
-.block h2.headline {
+.block h2.headline,
+.block h2.block-title {
   @include block-title();
   @include vertical-space-block-title();
 }
@@ -171,3 +179,11 @@ h4 {
     user-select: none;
   }
 }
+
+// Control panel view
+body.view-controlpanelview {
+  h3.ui.icon.header {
+    @include add(size, s);
+    @include add(height, m);
+  }
+}

package/src/theme/_variables.scss

@@ -126,7 +126,6 @@ $secondary-grey: #ececec !default;
 
   // Header
   --header-background: var(--primary-color);
-  --header-foreground: var(--primary-foreground-color);
 
   //Footer
   --footer-background: var(--secondary-color);
@@ -146,8 +145,8 @@ $secondary-grey: #ececec !default;
 
   // 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);
+  // Uncomment following line to turn <a> links into a different color than the theme foreground color
+  // --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: calc(16 / 9);
@@ -433,9 +432,46 @@ $line-heights: (
   display: inline-block;
   width: 11px;
   height: 11px;
-  background-color: var(--link-foreground-color, #0070a2);
+  background-color: var(
+    --theme-foreground-color,
+    var(--link-foreground-color, #0070a2)
+  );
   content: '';
   mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'/%3E%3C/svg%3E")
     no-repeat center;
   white-space: nowrap;
 }
+@mixin mail-link-icon() {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background-color: var(
+    --theme-foreground-color,
+    var(--link-foreground-color, #0070a2)
+  );
+  content: '';
+  mask: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='envelope' class='svg-inline--fa fa-envelope fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat center;
+  white-space: nowrap;
+}
+
+@mixin floated-figure($align) {
+  max-width: calc(var(--default-container-width) / 2 - 10px);
+  height: auto;
+  margin-bottom: $spacing-small;
+
+  @if $align == 'right' {
+    margin-left: $spacing-small;
+    float: right;
+  } @else {
+    margin-right: $spacing-small;
+    float: left;
+  }
+
+  @media only screen and (max-width: #{$largest-mobile-screen}) {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    float: none;
+  }
+}