@simple-reporting/base 1.0.39 → 1.0.41

package/livingdocs/120.Startpage/030.teaser-quote/scss/web.scss

@@ -0,0 +1,125 @@
+@use "srl";
+@use "spacing-variations";
+
+@include srl.spacer-component-margin(spacing-variations.$margins);
+
+.srl-teaser-quote {
+  position: relative;
+  @extend %srl-breakout-grid-base;
+}
+
+.srl-teaser-quote__image-container {
+  aspect-ratio: 393 / 702;
+
+  @include srl.grid-media-up(tablet-pt) {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 834 / 702;
+    overflow: clip;
+    grid-row: 1;
+    grid-column: full-start / full-end;
+  }
+
+  @include srl.grid-media-up(desktop-large) {
+    aspect-ratio: 1728 / 702;
+  }
+}
+
+.srl-teaser-quote__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.srl-teaser-quote__image-container:has(.srl-teaser-quote__image--mobile) {
+  .srl-teaser-quote__image--desktop {
+    display: none;
+  }
+
+  .srl-teaser-quote__image--mobile {
+    display: block;
+  }
+
+  @include srl.grid-media-up(tablet-pt) {
+    .srl-teaser-quote__image--desktop {
+      display: block;
+    }
+    .srl-teaser-quote__image--mobile {
+      display: none;
+    }
+  }
+}
+
+.srl-teaser-quote__title-container,
+.srl-teaser-quote__content-container {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+}
+
+.srl-teaser-quote__content-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: var(--srl-container-padding, unset);
+  margin-bottom: var(--srl-container-padding, unset);
+  padding-inline: var(--srl-container-padding);
+
+  @include srl.grid-media-up(tablet-ls) {
+    padding-inline: 0;
+    grid-column: content-start / content-end;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    grid-row: 1;
+    margin-top: srl.system-size-unit(106);
+    margin-bottom: srl.system-size-unit(106);
+  }
+
+  @include srl.grid-media-up(desktop) {
+    margin-top: srl.spacer-get(800);
+    margin-bottom: srl.spacer-get(800);
+  }
+}
+
+.srl-teaser-quote__content {
+  padding: srl.spacer-get(300);
+
+  @include srl.grid-media-up(tablet-ls) {
+    align-self: end;
+    grid-column: col 4 / content-end;
+  }
+
+  @include srl.grid-media-up(desktop) {
+    align-self: end;
+    z-index: 1;
+    grid-column: col 7 / content-end;
+    border-radius: 16px;
+
+    .srl-reverse & {
+      grid-column: content-start / col 7;
+    }
+  }
+}
+
+.srl-teaser-quote__title-container {
+  @include srl.grid-media-up(tablet-ls) {
+    grid-column: content-start / content-end;
+  }
+}

package/livingdocs/120.Startpage/030.teaser-quote/teaser-quote.html

@@ -0,0 +1,53 @@
+<div
+  class="srl-teaser-quote"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
+  <div class="srl-teaser-quote__alt-text" doc-editable="alt-tag" doc-toggle="show-alt-text"
+       data-alt-text-source="alt">
+    Write the alt text here (optional, but recommended)
+  </div>
+
+  <div class="srl-teaser-quote__image-container">
+    <img class="srl-teaser-quote__image srl-teaser-quote__image--desktop" doc-image="image" data-alt-text-target="alt">
+    <img class="srl-teaser-quote__image srl-teaser-quote__image--mobile" doc-image="image-mobile" data-alt-text-target="alt">
+  </div>
+
+  <div class="srl-teaser-quote__content-container">
+    <div class="srl-teaser-quote__title-container">
+      <h2 class="srl-title-h2">
+        <span class="srl-title-h2__number-text-container">
+          <span class="srl-title-h2__text" doc-editable="title-h2">
+            Continually coordinate interactive infrastructures for goal-oriented
+          </span>
+        </span>
+      </h2>
+    </div>
+    <div class="srl-teaser-quote__content srl-bg-sand-1000">
+      <blockquote class="srl-quote">
+        <div class="srl-quote__text">
+          <p class="srl-quote__quote srl-linkable" doc-editable="quote-text">
+            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+          </p>
+          <cite class="srl-quote__cite">
+            <p class="srl-quote__name" doc-editable="quote-name" doc-optional>
+              Max Mustermann
+            </p>
+            <p class="srl-quote__position" doc-editable="quote-position" doc-optional>
+              CEO
+            </p>
+          </cite>
+        </div>
+      </blockquote>
+      <div class="srl-button-container">
+        <div class="srl-button-container__inner">
+          <a doc-link="href" class="srl-button srl-button-icon-arrow-right-after">
+            <i class="srl-button__icon srl-icon srl-icon-arrow-right" aria-hidden="true"></i>
+            <span class="srl-button__text" doc-editable="button-text">Button</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/livingdocs/120.Startpage/040.teaser/ld-conf.json

@@ -0,0 +1,23 @@
+{
+  "name": "teaser",
+  "label": "Teaser",
+  "properties": [
+    "icon",
+    "reverse"
+  ],
+  "directives": {
+    "show-alt-text": {
+      "type": "toggle",
+      "label": "Show alt text",
+      "default": false
+    },
+    "image-mobile": {
+      "imageRatios": ["16:9"],
+      "allowOriginalRatio": false
+    },
+    "image": {
+      "imageRatios": ["16:9"],
+      "allowOriginalRatio": false
+    }
+  }
+}

package/livingdocs/120.Startpage/040.teaser/scss/_spacing-variations.scss

@@ -0,0 +1,3 @@
+$margins: (
+  ('.srl-teaser', '*'): 3200,
+)

package/livingdocs/120.Startpage/040.teaser/scss/app.scss

@@ -0,0 +1,2 @@
+@use "srl";
+@use "web";

package/livingdocs/120.Startpage/040.teaser/scss/editor.scss

@@ -0,0 +1,6 @@
+@use "srl";
+@use "web";
+
+.srl-teaser__alt-text {
+  grid-column: content-start / content-end;
+}

package/livingdocs/120.Startpage/040.teaser/scss/web.scss

@@ -0,0 +1,72 @@
+@use "srl";
+@use "spacing-variations";
+
+.srl-teaser {
+  @extend %srl-breakout-grid-base;
+}
+
+@include srl.spacer-component-margin(spacing-variations.$margins);
+
+.srl-teaser__image-container {
+  @include srl.grid-media-up(desktop) {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 16 / 9;
+    overflow: clip;
+    grid-row: 1;
+    grid-column: full-start / col 11;
+
+    .srl-reverse & {
+      grid-column: col 3 / full-end;
+    }
+  }
+}
+
+.srl-teaser__image-container:has(.srl-teaser__image--mobile) {
+  .srl-teaser__image--desktop {
+    display: none;
+  }
+
+  .srl-teaser__image--mobile {
+    display: block;
+  }
+
+  @include srl.grid-media-up(tablet-pt) {
+    .srl-teaser__image--desktop {
+      display: block;
+    }
+    .srl-teaser__image--mobile {
+      display: none;
+    }
+  }
+}
+
+.srl-teaser__content-container {
+  @include srl.grid-media-up(desktop) {
+    margin: 0;
+    padding: 0;
+    grid-column: content-start / content-end;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    grid-row: 1;
+  }
+}
+
+.srl-teaser__content {
+  padding: var(--srl-container-padding, unset);
+  width: auto;
+  grid-column-end: span 4;
+
+  @include srl.grid-media-up(desktop) {
+    padding: var(--srl-spacer-300, unset);
+    border-radius: 16px;
+    align-self: center;
+    z-index: 1;
+    grid-column: col 6 / content-end;
+
+    .srl-reverse & {
+      grid-column: content-start / col 8;
+    }
+  }
+}

package/livingdocs/120.Startpage/040.teaser/teaser.html

@@ -0,0 +1,39 @@
+<div
+  class="srl-teaser"
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
+  <div class="srl-teaser__alt-text" doc-editable="alt-tag" doc-toggle="show-alt-text"
+       data-alt-text-source="alt">
+    Write the alt text here (optional, but recommended)
+  </div>
+
+  <div class="srl-teaser__image-container">
+    <img class="srl-teaser__image srl-teaser__image--desktop" doc-image="image" data-alt-text-target="alt">
+    <img class="srl-teaser__image srl-teaser__image--mobile" doc-image="image-mobile" data-alt-text-target="alt">
+  </div>
+
+  <div class="srl-teaser__content-container">
+    <div class="srl-teaser__content srl-bg-sand-1000">
+      <h2 class="srl-title-h2">
+        <span class="srl-title-h2__number-text-container">
+          <span class="srl-title-h2__text" doc-editable="title-h2">Vorsorge</span>
+        </span>
+      </h2>
+      <div class="srl-lead">
+        <p class="srl-lead__text" doc-editable="lead">
+          Lorem ipsum dolor sit amet, consete ur sadipscing elitr, sed diam nonumy.
+        </p>
+      </div>
+      <div class="srl-button-container">
+        <div class="srl-button-container__inner">
+          <a doc-link="href" class="srl-button srl-button-icon-arrow-right-after">
+            <i class="srl-button__icon srl-icon srl-icon-arrow-right" aria-hidden="true"></i>
+            <span class="srl-button__text" doc-editable="button-text">Button</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/livingdocs/130.Hosting_Components/010.download-center/download-center.html

@@ -1,6 +1,10 @@
-<srl-ld-download-center>
+<srl-ld-download-center
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-download-center" data-remove-from-web="complete">
-    <span class="srl-download-center__editor-text" data-remove-from-pdf="complete">
+    <span class="srl-download-center__editor-text">
       Placeholder for download list
     </span>
   </div>

package/livingdocs/130.Hosting_Components/020.search/scss/web.scss

@@ -16,12 +16,16 @@ Search form
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  background-color: srl.colors-grey-600();
+  background-color: srl.colors-white-1000();
+  border: 1px solid srl.colors-grey-200();
   border-radius: srl.system-root-style(srl-default-border-radius);
   overflow: hidden;
 
   &:hover {
     @extend %srl-button__switch-hover;
+    //background: srl.colors-white-1000();
+
+    /*
     background-color: srl.colors-secondary-1000();
     .srl-search-form__button {
       background-color: srl.colors-secondary-1000();
@@ -31,48 +35,13 @@ Search form
         color: srl.colors-grey-800();
       }
     }
+    */
   }
 
   &:has(input:focus) {
+    background: srl.colors-sand-600();
     @extend %srl-button__switch-focus;
-    background-color: srl.colors-secondary-1000();
-    .srl-search-form__input {
-      color: srl.colors-primary-1000();
-      &::placeholder {
-        color: srl.colors-primary-800();
-      }
-    }
-    .srl-search-form__button {
-      background-color: srl.colors-secondary-1000();
-      border-color: srl.colors-primary-1000();
-
-      svg {
-        color: srl.colors-primary-1000();
-      }
-    }
-  }
-
-  /*
-  &:has(input:focus-visible) {
-    background-color: srl.colors-primary-200();
-    border: srl.system-size-unit(1) solid srl.colors-primary-1000();
-    .srl-search-form__input {
-      color: srl.colors-grey-600();
-      &::placeholder {
-        color: srl.colors-grey-400();
-      }
-    }
-    .srl-search-form__button {
-      background-color: srl.colors-primary-200();
-      border-color: srl.colors-grey-600();
-
-      svg {
-        color: srl.colors-grey-600();
-      }
-    }
   }
-
-   */
 }
 
 .srl-search-form__label {
@@ -118,12 +87,6 @@ Search form
 .srl-search-form__button {
   position: absolute;
   right: srl.spacer-get(400);
-  background-color: srl.colors-grey-600();
-  border-color: srl.colors-grey-800();
-
-  svg {
-    color: srl.colors-grey-800();
-  }
 }
 
 /*
@@ -133,6 +96,10 @@ Search results
   @include srl.spacer-margin-top(200);
 }
 
+.srl-search-results__nav + * {
+  @include srl.spacer-margin-top(400);
+}
+
 .srl-search-results__list {
   list-style: none;
   margin: 0;

package/livingdocs/130.Hosting_Components/020.search/search.html

@@ -1,4 +1,10 @@
-<srl-ld-search use-auto-search use-more-results>
+<srl-ld-search
+  use-auto-search
+  use-more-results
+  data-remove-from-pdf="complete"
+  data-remove-from-word="complete"
+  data-remove-from-xhtml="complete"
+>
   <div class="srl-search" data-remove-from-web="complete">
     <span class="srl-search__editor-text">
       Placeholder for search form

package/livingdocs/130.Hosting_Components/020.search/search.vue

@@ -391,7 +391,7 @@ function setWindowState(index: number) {
           />
           <button
             tabindex="-2"
-            class="srl-button srl-button--icon"
+            class="srl-search-form__button srl-button srl-button--icon"
             type="button"
             :aria-label="$t('search.search')"
             @click="submitSearch"