@simple-reporting/base 1.0.37 → 1.0.38

package/dev/src/assets/scss/general.scss

@@ -1,12 +1,21 @@
 @use 'srl';
+@use "srl/fa";
 @use 'sass:string';
 @use 'sass:map';
-@use 'components/round-button';
-@use 'components/icons';
+@use "components/button";
+@use "components/fontawesome";
+//@use 'components/icons';
 
 $font-weight-bold: map.get(srl.$meta, font, weight, bold);
 
+@include srl.system-add-root-style('srl-default-border-radius', srl.system-size-unit(16, pt));
+@include srl.system-add-root-style('srl-default-border-radius', srl.system-size-unit(16));
+
+@include srl.system-add-root-style('srl-model-flex-direction', column);
+@include srl.system-add-root-style('srl-model-flex-direction', row, tablet-pt, up);
+
 body {
+  @include srl.typography-paragraph();
   background: srl.colors-white-1000();
   color: srl.colors-black-1000();
 }
@@ -60,4 +69,22 @@ span {
   &[class*="key-figure"] {
     white-space: nowrap;
   }
+}
+
+.srl-highlight {
+  color: srl.colors-primary-1000();
+}
+
+.srl-flex {
+  display: flex;
+  flex-direction: srl.system-root-style(srl-model-flex-direction);
+  gap: var(--srl-gutter-column-gap);
+}
+
+.srl-justify-self-center {
+  justify-self: center;
+}
+
+.text-center {
+  text-align: center;
 }

package/dev/src/assets/scss/margins.scss

@@ -0,0 +1,57 @@
+@use "srl";
+@use "srl/system";
+@use "sass:list";
+
+@mixin srl-component-margin($spacing-rules) {
+  @each $pair, $margin in $spacing-rules {
+    $from: list.nth($pair, 1);
+    $to: list.nth($pair, 2);
+
+    @if $to == '*' {
+      #{$from} + * {
+        @include srl.spacer-margin-top($margin);
+      }
+    } @else {
+      #{$from} + #{$to} {
+        @include srl.spacer-margin-top($margin);
+      }
+    }
+
+    @if system.$build == "pdf" {
+      @if $to == '*' {
+        #{$from}-first + *,
+        #{$from}-last + * {
+          @include srl.spacer-margin-top($margin);
+        }
+      } @else {
+        #{$from}-first + #{$to}-first,
+        #{$from}-last + #{$to}-first {
+          @include srl.spacer-margin-top($margin);
+        }
+      }
+    } @else {
+      $wrappers: null;
+
+      @if system.$build != "xbrl" {
+        $wrappers: ('.srl-nested-container');
+      } @else {
+        $wrappers: ('.srl-nested-container', '.ixbrl-element');
+      }
+      @each $wrapper in $wrappers {
+        @if $to == '*' {
+          #{$from} + #{$wrapper}:has(:first-child),
+          #{$wrapper}:has(#{$from}:last-child) + * {
+            @include srl.spacer-margin-top($margin);
+          }
+        } @else {
+          #{$from} + #{$wrapper}:has(#{$to}:first-child),
+          #{$wrapper}:has(#{$from}:last-child) + #{$to},
+          #{$wrapper}:has(#{$from}:first-child) + #{$wrapper}:has(#{$to}:last-child),
+          #{$wrapper}:has(#{$from}:last-child) + #{$wrapper}:has(#{$to}:first-child) {
+            @include srl.spacer-margin-top($margin);
+          }
+        }
+      }
+    }
+  }
+}

package/dev/src/assets/scss/pdf.scss

@@ -1,5 +1,4 @@
 @use 'srl';
-@use 'placeholders';
 @use 'print';
 @use 'sass:map';
 
@@ -101,34 +100,3 @@ img {
     break-before: avoid;
   }
 }
-
-/*
-  Layout
-*/
-.srl-grid {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  .srl-grid {
-    display: block;
-  }
-}
-
-.srl-grid__inner {
-  @include srl.grid-pdf-flex-col(6);
-
-  .srl-wide-width & {
-    @include srl.grid-pdf-flex-col(8);
-  }
-}
-
-.srl-grid__aside {
-  @extend %srl-trim-margins;
-  @include srl.grid-pdf-flex-col(2);
-}
-
-.srl-grid__content {
-  @extend %srl-trim-margins;
-  @include srl.grid-pdf-flex-col(6);
-}

package/dev/src/assets/scss/placeholders/breakout-grid.scss

@@ -0,0 +1,34 @@
+@use "srl/helpers";
+@use "srl/system";
+@use "srl/grid";
+
+%srl-breakout-grid-base {
+  @include grid.media-up(desktop) {
+    display: grid;
+    gap: var(--srl-gutter-column-gap);
+    grid-template-columns:
+    [full-start] minmax(0, 1fr)
+    [content-start] repeat(var(--srl-gutter-columns), [col] minmax(0, calc((min(100vw, calc(var(--srl-container-max-width) - calc(var(--srl-gutter-column-gap) * 2))) - calc(var(--srl-gutter-columns) - 1) * var(--srl-gutter-column-gap)) / var(--srl-gutter-columns))))
+    [content-end] minmax(0, 1fr)
+    [full-end];
+  }
+}
+
+%srl-breakout-grid-inner {
+  @include system.add-root-style(srl-breakout-grid-from, content-start);
+  @include system.add-root-style(srl-breakout-grid-to, content-end);
+
+  @include grid.media-up(desktop) {
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: subgrid;
+    position: relative;
+    grid-row: 1;
+    grid-column: system.root-style(srl-breakout-grid-from) / system.root-style(srl-breakout-grid-from);
+  }
+}
+
+@mixin srl-breakout-grid-from-to($from: "full-start", $to: "full-end") {
+  grid-column: $from / $to;
+}

package/dev/src/assets/scss/placeholders/button.scss

@@ -0,0 +1,230 @@
+@use "srl/system";
+@use "srl/colors";
+@use "srl/spacer";
+@use "srl/typography";
+@use "srl/fa";
+@use "srl/button";
+
+$animation-duration: .3s;
+
+@include system.add-root-style(srl-button-color, colors.black-1000());
+@include system.add-root-style(srl-button-bg-color, colors.white-1000());
+@include system.add-root-style(srl-button-brd-color, colors.grey-600());
+@include system.add-root-style(srl-button-brd-size, system.size-unit(1));
+@include system.add-root-style(srl-button-height, 3.5em);
+@include system.add-root-style(srl-button-gap, spacer.get(100));
+@include system.add-root-style(srl-button-brd-radius, calc( 3.5em / 2 ));
+@include system.add-root-style(srl-button-padding-inline, spacer.get(300));
+@include system.add-root-style(srl-button-image-size, 1em);
+
+@include system.add-root-style(srl-button-hover-color, colors.white-1000());
+@include system.add-root-style(srl-button-hover-bg-color, colors.grey-600());
+@include system.add-root-style(srl-button-hover-brd-color, colors.grey-600());
+
+@include system.add-root-style(srl-button-focus-color, colors.white-1000());
+@include system.add-root-style(srl-button-focus-bg-color, colors.primary-1000());
+@include system.add-root-style(srl-button-focus-brd-color, colors.primary-1000());
+
+@include system.add-root-style(srl-button-active-color, colors.white-1000());
+@include system.add-root-style(srl-button-active-bg-color, colors.primary-1000());
+@include system.add-root-style(srl-button-active-brd-color, colors.primary-1000());
+
+%srl-button {
+  @include typography.button-text();
+  column-gap: system.root-style(srl-button-gap);
+  height: system.root-style(srl-button-height);
+  align-items: center;
+  justify-content: center;
+  color: var( --srl-button-color-override, system.root-style(srl-button-color) );
+  background-color: var( --srl-button-bg-color-override, system.root-style(srl-button-bg-color) );
+  padding-inline: system.root-style(srl-button-padding-inline);
+  border: system.root-style(srl-button-brd-size) solid var( --srl-button-brd-color-override, system.root-style(srl-button-brd-color) );
+  border-radius: system.root-style(srl-button-brd-radius);
+  text-decoration: none;
+  text-box-trim: trim-both;
+  cursor: pointer;
+
+  &:not([hidden]) {
+    display: inline-flex;
+  }
+
+  @if (system.$build == 'app') {
+    transition:
+            color $animation-duration ease-out,
+            background-color $animation-duration ease-out,
+            border-color $animation-duration ease-out,
+            border-radius $animation-duration ease-out;
+  }
+
+  &:hover {
+    color: var(--srl-button-color-override, system.root-style(srl-button-hover-color));
+    background-color: var(--srl-button-bg-color-override, system.root-style(srl-button-hover-bg-color));
+    border-color: var(--srl-button-brd-color-override, system.root-style(srl-button-hover-brd-color));
+  }
+
+  &:focus,
+  &:focus-visible {
+    color: var(--srl-button-color-override, system.root-style(srl-button-focus-color));
+    background-color: var(--srl-button-bg-color-override, system.root-style(srl-button-focus-bg-color));
+    border-color: var(--srl-button-brd-color-override, system.root-style(srl-button-focus-brd-color));
+    outline: none   ;
+
+    &[aria-expanded="false"] {
+      color: var( --srl-button-color-override, system.root-style(srl-button-color) );
+      background-color: var( --srl-button-bg-color-override, system.root-style(srl-button-bg-color) );
+      border: system.root-style(srl-button-brd-size) solid var( --srl-button-brd-color-override, system.root-style(srl-button-brd-color) );
+    }
+  }
+
+  img, svg {
+    width: auto;
+    height: system.root-style(srl-button-image-size);
+    color: inherit;
+  }
+
+  &.srl-active,
+  &[aria-expanded="true"],
+  &[aria-selected="true"],
+  &[aria-current="page"]
+  {
+    color: system.root-style(srl-button-active-color);
+    background-color: system.root-style(srl-button-active-bg-color);
+    border-color: system.root-style(srl-button-active-brd-color);
+  }
+}
+
+%srl-button--ghost {
+  --srl-typo-button-text-font-family: inherit;
+  --srl-typo-button-text-font-size: inherit;
+  --srl-typo-button-text-font-weight: inherit;
+  --srl-typo-button-text-line-height: inherit;
+  --srl-button-color: inherit;
+  --srl-button-bg-color: transparent;
+  --srl-button-brd-radius: 0;
+  --srl-button-height: auto;
+  --srl-button-brd-size: 0;
+  --srl-button-padding-inline: 0;
+  --srl-button-hover-color: inherit;
+  --srl-button-hover-bg-color: transparent;
+  --srl-button-hover-brd-color: transparent;
+  --srl-button-focus-color: inherit;
+  --srl-button-focus-bg-color: transparent;
+  --srl-button-focus-brd-color: transparent;
+  --srl-button-active-color: inherit;
+  --srl-button-active-bg-color: transparent;
+  --srl-button-active-brd-color: transparent;
+}
+
+%srl-button--icon {
+  --srl-button-brd-radius: 50%;
+  --srl-button-padding-block: 0;
+  --srl-button-padding-inline: .9em;
+  --srl-button-image-size: 1.3em;
+  width: system.size-unit(49);
+  height: system.size-unit(49);
+
+  [class*=srl-icon] {
+    @include fa.size(20);
+  }
+
+  &::before {
+    font-size: system.size-unit(17.5) !important;
+  }
+}
+
+%srl-button--white {
+  --srl-button-color: #{colors.black-1000()};
+  --srl-button-bg-color: #{colors.white-1000()};
+  --srl-button-brd-color: #{colors.white-1000()};
+  --srl-button-hover-color: #{colors.white-1000()};
+  --srl-button-hover-bg-color: #{colors.primary-1000()};
+  --srl-button-hover-brd-color: #{colors.primary-1000()};
+  --srl-button-focus-color: #{colors.white-1000()};
+  --srl-button-focus-bg-color: #{colors.secondary-1000()};
+  --srl-button-focus-brd-color: #{colors.secondary-1000()};
+  --srl-button-active-color: #{colors.white-1000()};
+  --srl-button-active-bg-color: #{colors.secondary-1000()};
+  --srl-button-active-brd-color: #{colors.secondary-1000()};
+}
+
+%srl-button--primary {
+  --srl-button-color: #{colors.white-1000()};
+  --srl-button-bg-color: #{colors.primary-1000()};
+  --srl-button-brd-color: #{colors.primary-1000()};
+  --srl-button-hover-color: #{colors.primary-1000()};
+  --srl-button-hover-bg-color: #{colors.white-1000()};
+  --srl-button-hover-brd-color: #{colors.black-1000()};
+  --srl-button-focus-color: #{colors.white-1000()};
+  --srl-button-focus-bg-color: #{colors.secondary-1000()};
+  --srl-button-focus-brd-color: #{colors.secondary-1000()};
+  --srl-button-active-color: #{colors.white-1000()};
+  --srl-button-active-bg-color: #{colors.secondary-1000()};
+  --srl-button-active-brd-color: #{colors.secondary-1000()};
+}
+
+%srl-button--secondary {
+  --srl-button-color: #{colors.white-1000()};
+  --srl-button-bg-color: #{colors.secondary-1000()};
+  --srl-button-brd-color: #{colors.secondary-1000()};
+  --srl-button-hover-color: #{colors.secondary-1000()};
+  --srl-button-hover-bg-color: #{colors.white-1000()};
+  --srl-button-hover-brd-color: #{colors.black-1000()};
+  --srl-button-focus-color: #{colors.white-1000()};
+  --srl-button-focus-bg-color: #{colors.primary-1000()};
+  --srl-button-focus-brd-color: #{colors.primary-1000()};
+  --srl-button-active-color: #{colors.white-1000()};
+  --srl-button-active-bg-color: #{colors.primary-1000()};
+  --srl-button-active-brd-color: #{colors.primary-1000()};
+}
+
+%srl-button--transparent-white {
+  --srl-button-color: #{colors.white-1000()};
+  --srl-button-bg-color: transparent;
+  --srl-button-brd-color: transparent;
+  --srl-button-hover-color: #{colors.white-1000()};
+  --srl-button-hover-bg-color: transparent;
+  --srl-button-hover-brd-color: #{colors.white-1000()};
+  --srl-button-focus-color: #{colors.white-1000()};
+  --srl-button-focus-bg-color: #{colors.primary-1000()};
+  --srl-button-focus-brd-color: #{colors.primary-1000()};
+  --srl-button-active-color: #{colors.white-1000()};
+  --srl-button-active-bg-color: #{colors.primary-1000()};
+  --srl-button-active-brd-color: #{colors.primary-1000()};
+}
+
+%srl-button--transparent-black {
+  --srl-button-color: #{colors.black-1000()};
+  --srl-button-bg-color: transparent;
+  --srl-button-brd-color: transparent;
+  --srl-button-hover-color: #{colors.black-1000()};
+  --srl-button-hover-bg-color: transparent;
+  --srl-button-hover-brd-color: #{colors.black-1000()};
+  --srl-button-focus-color: #{colors.white-1000()};
+  --srl-button-focus-bg-color: #{colors.primary-1000()};
+  --srl-button-focus-brd-color: #{colors.primary-1000()};
+  --srl-button-active-color: #{colors.white-1000()};
+  --srl-button-active-bg-color: #{colors.primary-1000()};
+  --srl-button-active-brd-color: #{colors.primary-1000()};
+}
+
+%srl-button__switch-hover {
+  --srl-button-color-override: var(--srl-button-hover-color);
+  --srl-button-bg-color-override: var(--srl-button-hover-bg-color);
+  --srl-button-brd-color-override: var(--srl-button-hover-brd-color);
+}
+
+%srl-button__switch-focus {
+  --srl-button-color-override: var(--srl-button-focus-color);
+  --srl-button-bg-color-override: var(--srl-button-focus-bg-color);
+  --srl-button-brd-color-override: var(--srl-button-focus-brd-color);
+}
+
+%srl-button__switch-active {
+  --srl-button-color-override: var(--srl-button-active-color);
+  --srl-button-bg-color-override: var(--srl-button-active-bg-color);
+  --srl-button-brd-color-override: var(--srl-button-active-brd-color);
+}
+
+%srl-button__switch {
+  @include button.switch(".srl-button");
+}

package/dev/src/assets/scss/placeholders/fontawesome.scss

@@ -0,0 +1,7 @@
+
+@use "sass:string";
+@use "srl/fa";
+
+%srl-icon-base {
+  @include fa.base();
+}