@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/theme/_search-page.scss

@@ -0,0 +1,249 @@
+// 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 {
+        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,12 +27,14 @@ li::marker {
   line-height: 32px;
 }
 
+header .navigation .item {
+  font-family: $page-font;
+}
+
 .content-area,
 .breadcrumbs {
-  p > a,
-  li > a,
-  .breadcrumb a {
-    color: $blue-for-grey-contrast;
+  a:not(.card-primary-link, .label) {
+    color: var(--link-foreground-color, var(--theme-foreground-color));
     text-decoration: underline;
   }
 }
@@ -91,7 +93,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 +174,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,25 @@ $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;
+}

package/src/theme/_widgets.scss

@@ -6,21 +6,22 @@
 #sidebar-properties,
 #sidebar-metadata {
   .field.widget {
-    .buttons {
+    .buttons-widget {
       display: flex;
       align-items: center;
+      gap: 4px;
 
-      button {
+      .buttons-widget-option {
         padding: 5px;
         border-radius: 3px;
-        margin-right: 3px;
         aspect-ratio: 1/1;
         font-size: 1em;
         line-height: initial;
+
         &[data-hovered='true'] {
           box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
         }
-        &.active {
+        &[data-selected='true'] {
           box-shadow: inset 0 0 0 1px var(--border-color-pressed, #2996da);
         }
 
@@ -88,20 +89,18 @@ span.color-contrast-label {
 }
 
 .color-swatch-widget {
-  .buttons {
-    flex: 1 1 100%;
-    margin: 1rem 0 0.5rem;
-    text-align: center;
+  .react-aria-RadioGroup {
+    gap: 5px;
   }
 
-  button {
+  .color-swatch-option-handler {
     position: relative;
     width: 32px;
     height: 32px;
     padding: 1rem;
     border: 2px solid #ccc;
     border-radius: 100%;
-    margin-right: 0.25rem;
+    cursor: pointer;
 
     &.active {
       border: 2px solid red;
@@ -120,26 +119,15 @@ span.color-contrast-label {
   }
 }
 
-.color-swatch-widget button {
+.color-swatch-widget .color-swatch-option-handler {
   background-color: var(--theme-color);
+  color: var(--theme-foreground-color);
 }
 
-.color-swatch-widget .button.grey,
-.color-swatch-widget .button.grey.active,
-.color-swatch-widget .ui.grey.button:hover {
-  background-color: var(--theme-color);
-}
-.color-swatch-widget .button.active,
-.color-swatch-widget .button.active:hover {
-  background-color: var(--theme-color);
-}
-
-.buttons-widget {
-  button {
-    &[data-disabled] {
-      border-color: var(--border-color-disabled);
-      color: var(--text-color-disabled);
-    }
+.buttons-widget-option {
+  &[data-disabled] {
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
   }
 }
 

package/src/theme/blocks/_accordion.scss

@@ -26,6 +26,7 @@
       & > span,
       .input-accordion-title {
         @include introduction();
+        max-width: calc(100% - 50px); // 100% - svg height
         color: $darkGrey;
       }
 
@@ -67,6 +68,7 @@
 
       .block.image {
         figure {
+          margin-top: 0;
           &.right {
             margin-left: 20px;
           }
@@ -91,13 +93,18 @@
         }
       }
 
-      .block.teaser {
+      .block.teaser,
+      .block.listing {
         .card-inner .card-summary {
-          h2.title {
-            padding: 0px;
-            margin-bottom: 20px !important;
+          .title {
+            padding: 0;
             background: none;
             text-transform: none;
+            @include text-heading-h2();
+
+            @container (max-width: #{$largest-mobile-screen}) {
+              @include text-heading-h3();
+            }
           }
         }
       }

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 {
@@ -173,11 +133,20 @@
       content: '';
       opacity: 0.75;
     }
+    figure figcaption:not(:has(strong.title)) {
+      display: none;
+    }
+    figure:not(:has(figcaption strong.title)):after {
+      display: none;
+    }
   }
 
   .block-editor-image {
     padding: 0;
     margin: 0.5rem !important;
+    figure {
+      max-width: unset;
+    }
   }
 
   .block.listing {
@@ -294,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;
@@ -321,14 +285,6 @@
 
     .two,
     .three {
-      .teaser {
-        .teaser-item .content {
-          h2 {
-            margin-bottom: $spacing-small !important;
-            @include text-heading-h3();
-          }
-        }
-      }
       .image {
         figcaption {
           .title {
@@ -355,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 {
@@ -415,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)