@simple-reporting/base 1.0.37 → 1.0.38

package/livingdocs/040.Media/010.table/scss/general.scss

@@ -1,5 +1,7 @@
 @use 'srl';
 @use 'sass:map';
+@use "@/assets/scss/margins";
+@use "spacing-variations";
 
 $table-border-regular: map.get(srl.$meta, table, border, regular);
 $table-border-bold: map.get(srl.$meta, table, border, bold);
@@ -13,329 +15,346 @@ $table-border-bold: map.get(srl.$meta, table, border, bold);
   display: block;
 }
 
+@include margins.srl-component-margin(spacing-variations.$margins);
+
 .srl-table__container {
   overflow: auto;
   scroll-snap-type: x mandatory;
   position: relative;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  min-width: 100%;
-  margin: 0;
-  table-layout: fixed;
-
-  .responsive-table & {
-    table-layout: auto;
-  }
 
-  @-moz-document url-prefix() {
-    border-collapse: inherit;
+  & > div {
+    @extend %srl-grid-base;
   }
 }
 
-th,
-td {
-  /*
-  General cell styles
-  */
-  @include srl.typography-table-cell-regular();
-  padding: (
-          srl.spacer-get(map.get(srl.$meta, table, padding, regular, top))
-          srl.spacer-get(map.get(srl.$meta, table, padding, regular, right))
-          srl.spacer-get(map.get(srl.$meta, table, padding, regular, bottom))
-          srl.spacer-get(map.get(srl.$meta, table, padding, regular, left))
-  );
-  vertical-align: #{map.get(srl.$meta, table, vertical-align)};
-  border-bottom: (
-          srl.system-root-style(srl-table-border-regular-width)
-          map.get($table-border-regular, style)
-          srl.colors-get(map.get($table-border-regular, color))
-  );
-
-  /*
-  Font colors
-  */
-  &[class*="fcprimary"] {
-    color: srl.colors-primary-1000();
-  }
+.srl-table-container {
+  @extend %srl-regular-width;
 
-  /*
-  Font Sizes
-  */
-  &[class*="head"] {
-    font-size: srl.typography-get-font-size('table-head-strong');
-    line-height: srl.typography-get-line-height('table-head-strong');
+  .srl-wide-width & {
+    @extend %srl-wide-width;
   }
+}
 
-  /*
-  Font Weights
-  */
-  &[class*="head"] {
-    font-weight: srl.typography-get-font-weight('table-head-strong');
-  }
+/*
+  Has to be wrapped so it doesn't interfere with the local dev tools
+*/
+.srl-table {
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    min-width: 100%;
+    margin: 0;
+    table-layout: fixed;
 
-  &[class*="regular"] {
-    font-weight: srl.typography-get-font-weight('table-cell-regular');
-  }
+    .responsive-table & {
+      table-layout: auto;
+    }
 
-  &[class*="bold"] {
-    font-weight: srl.typography-get-font-weight('table-cell-strong');
+    @-moz-document url-prefix() {
+      border-collapse: inherit;
+    }
   }
 
-  /*
-  Paddings
-  */
-
-  /*
-  Borders
-  */
-  &[class*='head'] {
-    border-bottom: (
-            srl.system-root-style(srl-table-border-bold-width)
-            map.get($table-border-bold, style)
-            srl.colors-get(map.get($table-border-bold, color))
+  th,
+  td {
+    /*
+    General cell styles
+    */
+    @include srl.typography-table-cell-regular();
+    padding: (
+            srl.spacer-get(map.get(srl.$meta, table, padding, regular, top))
+            srl.spacer-get(map.get(srl.$meta, table, padding, regular, right))
+            srl.spacer-get(map.get(srl.$meta, table, padding, regular, bottom))
+            srl.spacer-get(map.get(srl.$meta, table, padding, regular, left))
     );
-  }
-
-  &[class*='linetop'] {
-    border-top: (
+    vertical-align: #{map.get(srl.$meta, table, vertical-align)};
+    border-bottom: (
             srl.system-root-style(srl-table-border-regular-width)
             map.get($table-border-regular, style)
             srl.colors-get(map.get($table-border-regular, color))
     );
-  }
 
-  &[class*='blinetop'] {
-    border-top: (
-            srl.system-root-style(srl-table-border-bold-width)
-            map.get($table-border-bold, style)
-            srl.colors-get(map.get($table-border-bold, color))
-    );
-  }
+    /*
+    Font colors
+    */
+    &[class*="fcprimary"] {
+      color: srl.colors-primary-1000();
+    }
 
-  &[class*='nolinetop'] {
-    border-top: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            transparent
-    );
+    /*
+    Font Sizes
+    */
+    &[class*="head"] {
+      font-size: srl.typography-get-font-size('table-head-strong');
+      line-height: srl.typography-get-line-height('table-head-strong');
+    }
+
+    /*
+    Font Weights
+    */
+    &[class*="head"] {
+      font-weight: srl.typography-get-font-weight('table-head-strong');
+    }
 
+    &[class*="regular"] {
+      font-weight: srl.typography-get-font-weight('table-cell-regular');
+    }
+
+    &[class*="bold"] {
+      font-weight: srl.typography-get-font-weight('table-cell-strong');
+    }
+
+    /*
+    Paddings
+    */
+
+    /*
+    Borders
+    */
     &[class*='head'] {
-      border-top-width: srl.system-root-style(srl-table-border-regular-width)
+      border-bottom: (
+              srl.system-root-style(srl-table-border-bold-width)
+              map.get($table-border-bold, style)
+              srl.colors-get(map.get($table-border-bold, color))
+      );
     }
-  }
 
-  &[class*='linebottom'] {
-    border-bottom: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            srl.colors-get(map.get($table-border-regular, color))
-    );
-  }
+    &[class*='linetop'] {
+      border-top: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              srl.colors-get(map.get($table-border-regular, color))
+      );
+    }
 
-  &[class*='blinebottom'] {
-    border-bottom: (
-            srl.system-root-style(srl-table-border-bold-width)
-            map.get($table-border-bold, style)
-            srl.colors-get(map.get($table-border-bold, color))
-    );
-  }
+    &[class*='blinetop'] {
+      border-top: (
+              srl.system-root-style(srl-table-border-bold-width)
+              map.get($table-border-bold, style)
+              srl.colors-get(map.get($table-border-bold, color))
+      );
+    }
 
-  &[class*='nolinebottom'] {
-    border-bottom: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            transparent
-    );
+    &[class*='nolinetop'] {
+      border-top: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              transparent
+      );
 
-    &[class*="head"] {
-      border-bottom-width: srl.system-root-style(srl-table-border-regular-width);
+      &[class*='head'] {
+        border-top-width: srl.system-root-style(srl-table-border-regular-width)
+      }
     }
-  }
 
-  &[class*='lineleft'] {
-    border-left: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            srl.colors-get(map.get($table-border-regular, color))
-    );
-  }
+    &[class*='linebottom'] {
+      border-bottom: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              srl.colors-get(map.get($table-border-regular, color))
+      );
+    }
 
-  &[class*='blineleft'] {
-    border-left: (
-            srl.system-root-style(srl-table-border-bold-width)
-            map.get($table-border-bold, style)
-            srl.colors-get(map.get($table-border-bold, color))
-    );
-  }
+    &[class*='blinebottom'] {
+      border-bottom: (
+              srl.system-root-style(srl-table-border-bold-width)
+              map.get($table-border-bold, style)
+              srl.colors-get(map.get($table-border-bold, color))
+      );
+    }
 
-  &[class*='nolineleft'] {
-    border-left: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            transparent
-    );
-  }
+    &[class*='nolinebottom'] {
+      border-bottom: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              transparent
+      );
 
-  &[class*='lineright'] {
-    border-right: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            srl.colors-get(map.get($table-border-regular, color))
-    );
-  }
+      &[class*="head"] {
+        border-bottom-width: srl.system-root-style(srl-table-border-regular-width);
+      }
+    }
 
-  &[class*='blineright'] {
-    border-right: (
-            srl.system-root-style(srl-table-border-bold-width)
-            map.get($table-border-bold, style)
-            srl.colors-get(map.get($table-border-bold, color))
-    );
-  }
+    &[class*='lineleft'] {
+      border-left: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              srl.colors-get(map.get($table-border-regular, color))
+      );
+    }
 
-  &[class*='nolineright'] {
-    border-right: (
-            srl.system-root-style(srl-table-border-regular-width)
-            map.get($table-border-regular, style)
-            transparent
-    );
-  }
+    &[class*='blineleft'] {
+      border-left: (
+              srl.system-root-style(srl-table-border-bold-width)
+              map.get($table-border-bold, style)
+              srl.colors-get(map.get($table-border-bold, color))
+      );
+    }
 
-  /*
-  Indents
-  */
-  &[class*="ind"] {
-    &:first-child {
-      padding-left: srl.spacer-get(200);
+    &[class*='nolineleft'] {
+      border-left: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              transparent
+      );
     }
-  }
 
-  &[class*="ind_ind"] {
-    &:first-child {
-      padding-left: srl.spacer-get(400);
+    &[class*='lineright'] {
+      border-right: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              srl.colors-get(map.get($table-border-regular, color))
+      );
     }
-  }
 
-  &[class*="ind_ind_ind"] {
-    &:first-child {
-      padding-left: srl.spacer-get(800);
+    &[class*='blineright'] {
+      border-right: (
+              srl.system-root-style(srl-table-border-bold-width)
+              map.get($table-border-bold, style)
+              srl.colors-get(map.get($table-border-bold, color))
+      );
     }
-  }
 
-  /*
-  Cell Backgrounds
-  DEFINE HERE; DIFFERENT CSS CLASSES IN EVERY PROJECT
-  */
-  @for $i from 1 through 10 {
-    $suffix: "#{$i}";
+    &[class*='nolineright'] {
+      border-right: (
+              srl.system-root-style(srl-table-border-regular-width)
+              map.get($table-border-regular, style)
+              transparent
+      );
+    }
 
-    @if $i < 10 {
-      $suffix: "0#{$i}";
+    /*
+    Indents
+    */
+    &[class*="ind"] {
+      &:first-child {
+        padding-left: srl.spacer-get(200);
+      }
     }
 
-    &[class*="background-#{$suffix}"] {
-      background-color: srl.system-root-style(srl-table-background-#{$suffix}, transparent);
+    &[class*="ind_ind"] {
+      &:first-child {
+        padding-left: srl.spacer-get(400);
+      }
     }
-  }
 
-  &[class*="background-01"],
-  &[class*="background-02"],
-  &[class*="background-03"],
-  &[class*="background-04"],
-  &[class*="background-05"],
-  &[class*="background-06"],
-  &[class*="background-07"],
-  &[class*="background-08"],
-  &[class*="background-09"],
-  &[class*="background-10"] {
-    &.head {
-      color: black;
+    &[class*="ind_ind_ind"] {
+      &:first-child {
+        padding-left: srl.spacer-get(800);
+      }
     }
-  }
 
-  /*
-  Alignments
-  */
-  &[class*="horizontal-left"] {
-    text-align: left;
-  }
+    /*
+    Cell Backgrounds
+    DEFINE HERE; DIFFERENT CSS CLASSES IN EVERY PROJECT
+    */
+    @for $i from 1 through 10 {
+      $suffix: "#{$i}";
 
-  &[class*="horizontal-center"] {
-    text-align: center;
-  }
+      @if $i < 10 {
+        $suffix: "0#{$i}";
+      }
 
-  &[class*="horizontal-right"] {
-    text-align: right;
-  }
+      &[class*="background-#{$suffix}"] {
+        background-color: srl.system-root-style(srl-table-background-#{$suffix}, transparent);
+      }
+    }
 
-  &[class*='srl-vertical-top'],
-  &[class*='vatop'] {
-    vertical-align: top;
-  }
+    &[class*="background-01"],
+    &[class*="background-02"],
+    &[class*="background-03"],
+    &[class*="background-04"],
+    &[class*="background-05"],
+    &[class*="background-06"],
+    &[class*="background-07"],
+    &[class*="background-08"],
+    &[class*="background-09"],
+    &[class*="background-10"] {
 
-  &[class*='srl-vertical-middle'],
-  &[class*='vamiddle'] {
-    vertical-align: middle;
-  }
+    }
 
-  &[class*='srl-vertical-bottom'],
-  &[class*='vabottom'] {
-    vertical-align: bottom;
-  }
+    /*
+    Alignments
+    */
+    &[class*="horizontal-left"] {
+      text-align: left;
+    }
 
-  /*
-  Responsive CSS tables
-  */
-  &:first-child {
-    .responsive-table & {
-      background: white;
-      position: sticky;
-      left: 0;
-      z-index: 2;
+    &[class*="horizontal-center"] {
+      text-align: center;
     }
 
-    &:not(:first-child) {
-      .responsive-table & {
-        position: relative;
-        z-index: 1;
-      }
+    &[class*="horizontal-right"] {
+      text-align: right;
     }
 
-    .has-shadow & {
-      box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
+    &[class*='srl-vertical-top'],
+    &[class*='vatop'] {
+      vertical-align: top;
     }
-  }
 
-  &:nth-child(2) {
-    .has-shadow & {
-      padding-left: calc(#{srl.spacer-get(map.get(srl.$meta, table, padding, regular, left))} + 24px);
+    &[class*='srl-vertical-middle'],
+    &[class*='vamiddle'] {
+      vertical-align: middle;
+    }
+
+    &[class*='srl-vertical-bottom'],
+    &[class*='vabottom'] {
+      vertical-align: bottom;
     }
-  }
 
-  /*
-  Paragraphs and spans
-  */
-  p span {
-    white-space: pre-line;
+    /*
+    Responsive CSS tables
+    */
+    &:first-child {
+      .responsive-table & {
+        background: white;
+        position: sticky;
+        left: 0;
+        z-index: 2;
+      }
 
-    &[class*="srl-number"] {
-      white-space: nowrap;
+      &:not(:first-child) {
+        .responsive-table & {
+          position: relative;
+          z-index: 1;
+        }
+      }
+
+      .has-shadow & {
+        box-shadow: 0 15px 15px rgba(0, 0, 0, 0.1);
+      }
     }
 
-    &:empty {
-      &:before {
-        content: " ";
+    &:nth-child(2) {
+      .has-shadow & {
+        padding-left: calc(#{srl.spacer-get(map.get(srl.$meta, table, padding, regular, left))} + 24px);
       }
     }
 
-    &.mms-notes-separator {
-      display: inline-block;
+    /*
+    Paragraphs and spans
+    */
+    p span {
+      white-space: pre-line;
+
+      &[class*="srl-number"] {
+        white-space: nowrap;
+      }
 
-      &:before {
-        content: map.get(srl.$meta, table, notes-separator);
+      &:empty {
+        &:before {
+          content: " ";
+        }
+      }
+
+      &.mms-notes-separator {
         display: inline-block;
+
+        &:before {
+          content: map.get(srl.$meta, table, notes-separator);
+          display: inline-block;
+        }
       }
     }
   }

package/livingdocs/040.Media/010.table/scss/pdf.scss

@@ -1,32 +1,16 @@
 @use 'srl';
 @use 'sass:map';
 
-$table-cells-width-in-mm: false;
+$table-cells-width-in-mm: map.get(srl.$meta, table, cells-width-in-mm);
 
 .srl-table {
   break-inside: avoid;
 }
 
-.srl-table__container > div {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.srl-table-container {
-  @include srl.grid-pdf-flex-col(6);
-
-  .srl-wide-width & {
-    @include srl.grid-pdf-flex-col(8);
-  }
-}
-
 @if $table-cells-width-in-mm == true {
   .srl-table-container {
     width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    @extend %srl-grid-base;
   }
 
   table {

package/livingdocs/040.Media/010.table/scss/web.scss

@@ -1,20 +1 @@
 @use "srl";
-@use "@/assets/scss/placeholders";
-
-.srl-table__container > div {
-  @extend %srl-grid-base;
-}
-
-.srl-table-container {
-  @extend %srl-regular-width;
-
-  .srl-wide-width & {
-    @extend %srl-wide-width;
-  }
-}
-
-.note-link {
-  @media (prefers-reduced-motion: reduce) {
-    transition-duration: 0s;
-  }
-}

package/livingdocs/040.Media/010.table/scss/xbrl.scss

@@ -1,12 +1,13 @@
 @use 'general';
-@use "@/assets/scss/placeholders";
 
-.srl-table__container > div,
+/*
+  Extra instruction for XBRL, because structure of tagged tables
+  is different from original tables
+*/
 .srl-table__container > .srl-table {
   @extend %srl-grid-base;
 }
 
-.srl-table-container,
 .srl-table__container > .srl-table > table {
   @extend %srl-regular-width;
 

package/livingdocs/040.Media/020.image/scss/_spacing-variations.scss

@@ -0,0 +1,7 @@
+$margins: (
+  ('.srl-image', '*'): 800,
+  ('.srl-image', '.srl-columns'): 400,
+  ('.srl-image', '.srl-pdf-pagebreak'): 800,
+  ('.srl-image', '.srl-anchor'): 800,
+  ('.srl-image', '.srl-background-container'): 1600,
+)