@porscheinformatik/clr-addons 11.2.0 → 12.1.0

package/src/header.clr-addons.scss

@@ -1,377 +0,0 @@
-@mixin sliding-nav-positioning($top: 0, $right: auto, $bottom: 0, $left: 0) {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-  background: var(--clr-nav-background-color);
-  z-index: $clr-sliding-panel-z-index;
-  height: 100vh;
-}
-
-@mixin vertical-nav-link-colors() {
-  color: var(--clr-vertical-nav-item-color);
-
-  &.active {
-    color: var(--clr-vertical-nav-item-active-color);
-    background-color: var(--clr-vertical-nav-active-bg-color);
-
-    .nav-icon {
-      fill: var(--clr-vertical-nav-icon-active-color);
-    }
-  }
-}
-
-@mixin menu-trigger($right: auto, $left: 0, $transformX: $clr-sliding-panel-width + 0.5rem) {
-  position: fixed;
-  top: 0;
-  right: $right;
-  left: $left;
-  z-index: $clr-sliding-panel-z-index;
-  transform: translateX($transformX);
-  transition: $clr-trigger-animation;
-
-  &::after {
-    content: none;
-  }
-}
-
-.header-actions > .dropdown .dropdown-toggle.nav-icon clr-icon:not([shape^='caret']) {
-  height: 1.1rem;
-  width: 1.1rem;
-}
-
-@media screen and (max-width: map-get($clr-grid-breakpoints, lg)) and (min-width: map-get($clr-grid-breakpoints, md)) {
-  .main-container {
-    .header-hamburger-trigger,
-    .header-overflow-trigger {
-      display: inline-block;
-
-      border: none;
-      background: none;
-      cursor: pointer;
-      font-size: 1rem;
-      height: var(--clr-header-height);
-      width: var(--clr-header-height);
-      padding: 0 0 0.2rem 0;
-      //4px to vertically align the trigger lines. display flex was not working on all browsers.
-      text-align: center;
-      white-space: nowrap;
-      color: var(--clr-header-font-color);
-      opacity: var(--clr-header-nav-opacity);
-
-      &:enabled:hover {
-        opacity: var(--clr-header-nav-hover-opacity);
-      }
-
-      &:focus {
-        outline-offset: -0.208333rem; //So that the outline styles aren't hidden because of the browser
-      }
-    }
-
-    .header-nav.clr-nav-level-1,
-    .subnav.clr-nav-level-1,
-    .sub-nav.clr-nav-level-1,
-    .sidenav.clr-nav-level-1,
-    .clr-vertical-nav.clr-nav-level-1 {
-      @include sliding-nav-positioning();
-      transform: translateX(-1 * $clr-sliding-panel-width);
-      transition: $clr-sliding-panel-animation;
-    }
-
-    .header-nav.clr-nav-level-2,
-    .subnav.clr-nav-level-2,
-    .sub-nav.clr-nav-level-2,
-    .sidenav.clr-nav-level-2,
-    .clr-vertical-nav.clr-nav-level-2 {
-      @include sliding-nav-positioning(0, 0, 0, auto);
-      transform: translateX($clr-sliding-panel-width);
-      transition: $clr-sliding-panel-animation;
-    }
-
-    .subnav.clr-nav-level-1,
-    .sub-nav.clr-nav-level-1,
-    .subnav.clr-nav-level-2,
-    .sub-nav.clr-nav-level-2 {
-      .nav,
-      aside {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      aside {
-        justify-content: center;
-        width: 100%;
-      }
-
-      //Such deep nesting is unfortunately required here because we don't want
-      //navs which are not subnav to behave in a similar way.
-      // TODO: more specificity in classname is preferable to nesting...
-      .nav {
-        padding-left: 0;
-
-        .nav-item {
-          height: 1.5rem;
-          margin-right: 0;
-        }
-
-        .nav-link {
-          padding: 0 0.5rem 0 1rem;
-          width: 100%;
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          border-radius: var(--clr-global-borderradius) 0 0 var(--clr-global-borderradius);
-
-          @include vertical-nav-link-colors();
-
-          &:hover,
-          &.active {
-            box-shadow: none;
-          }
-        }
-      }
-    }
-
-    .sidenav.clr-nav-level-1,
-    .sidenav.clr-nav-level-2 {
-      .nav-link {
-        &:hover,
-        &.active {
-          color: inherit;
-          background: var(
-            --clr-responsive-nav-hover-bg
-          ); // Is the menu that showsup when the viewport is narrow (x-axis)
-        }
-      }
-    }
-
-    .sidenav.clr-nav-level-1,
-    .sidenav.clr-nav-level-2,
-    .clr-vertical-nav.clr-nav-level-1,
-    .clr-vertical-nav.clr-nav-level-2 {
-      border-right: none;
-    }
-
-    .header-overflow-trigger {
-      position: relative;
-
-      &::after {
-        display: inline-block;
-        position: absolute;
-        content: '';
-        background: var(--clr-header-font-color);
-        opacity: var(--clr-header-divider-opacity);
-        height: calc(var(--clr-header-height) - 1rem);
-        width: var(--clr-global-borderwidth);
-        top: 0.5rem;
-        left: 0;
-      }
-    }
-
-    .header {
-      .branding {
-        max-width: 10rem;
-        min-width: 0;
-        overflow: hidden;
-      }
-
-      .header-hamburger-trigger + .branding {
-        padding-left: 0;
-
-        //TODO: deprecate .clr-icon, .logo
-        .clr-icon,
-        .logo,
-        clr-icon {
-          display: none;
-        }
-      }
-
-      .branding + .header-overflow-trigger,
-      .header-nav + .header-overflow-trigger {
-        margin-left: auto;
-      }
-    }
-
-    &.open-hamburger-menu,
-    &.open-overflow-menu {
-      .header {
-        .header-backdrop {
-          position: fixed;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          background: var(--clr-responsive-nav-header-backdrop-bg-color, black);
-          opacity: var(--clr-responsive-nav-header-backdrop-opacity, 0.85);
-          cursor: pointer;
-          z-index: $clr-sliding-panel-backdrop-z-index;
-        }
-
-        .header-nav.clr-nav-level-1,
-        .header-nav.clr-nav-level-2 {
-          .nav-link {
-            flex: 0 0 auto;
-
-            .nav-icon,
-            .fa {
-              display: none;
-            }
-
-            .nav-text {
-              display: inline-block;
-              color: var(--clr-sliding-panel-text-color);
-              line-height: 1rem;
-              padding: 0.25rem 0 0.25rem 1rem;
-              white-space: normal;
-              font-weight: normal;
-            }
-
-            opacity: 1;
-
-            .nav-icon + .nav-text {
-              display: inline-block;
-            }
-
-            @include vertical-nav-link-colors();
-
-            &.active > .nav-text {
-              color: inherit;
-            }
-          }
-        }
-      }
-
-      .clr-vertical-nav .nav-trigger {
-        display: none;
-      }
-    }
-
-    &.open-hamburger-menu {
-      .header {
-        .branding {
-          position: fixed;
-          top: 0;
-          left: 0;
-          overflow: hidden;
-          width: $clr-sliding-panel-width;
-          max-width: $clr-sliding-panel-width;
-          z-index: $clr-sliding-panel-z-index + 1;
-          padding-left: 1rem;
-
-          & > .nav-link {
-            overflow: hidden;
-          }
-
-          //deprecate .clr-icon, .logo
-          .clr-icon,
-          .logo,
-          clr-icon {
-            display: inline-block;
-          }
-
-          .title {
-            color: var(--clr-sliding-panel-text-color);
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-        }
-      }
-
-      .header-hamburger-trigger {
-        @include menu-trigger();
-
-        > span {
-          background: transparent;
-
-          &::before,
-          &::after {
-            left: 0.15rem;
-            transform-origin: 9%;
-            transition: $clr-trigger-animation;
-          }
-
-          &::before {
-            transform: rotate(45deg);
-          }
-
-          &::after {
-            transform: rotate(-45deg);
-          }
-        }
-      }
-
-      .header-nav.clr-nav-level-1,
-      .subnav.clr-nav-level-1,
-      .sub-nav.clr-nav-level-1,
-      .sidenav.clr-nav-level-1,
-      .clr-vertical-nav.clr-nav-level-1 {
-        padding-top: calc(var(--clr-header-height) + 1rem);
-        transform: translateX(0);
-        transition: $clr-sliding-panel-animation;
-        width: $clr-sliding-panel-width;
-        max-width: $clr-sliding-panel-width;
-
-        .sidenav-content {
-          padding-bottom: 1rem;
-        }
-      }
-    }
-
-    &.open-overflow-menu {
-      .header-nav.clr-nav-level-2,
-      .subnav.clr-nav-level-2,
-      .sub-nav.clr-nav-level-2,
-      .sidenav.clr-nav-level-2,
-      .clr-vertical-nav.clr-nav-level-2 {
-        transform: translateX(0);
-        transition: $clr-sliding-panel-animation;
-        width: $clr-sliding-panel-width;
-        max-width: $clr-sliding-panel-width;
-      }
-
-      .header-nav.clr-nav-level-2,
-      .subnav.clr-nav-level-2,
-      .sub-nav.clr-nav-level-2 {
-        padding-top: 1rem;
-      }
-
-      .header-overflow-trigger {
-        @include menu-trigger(0, auto, (-1 * ($clr-sliding-panel-width + 0.5rem)));
-
-        > span {
-          background: transparent;
-
-          &::before,
-          &::after {
-            height: 0.1rem;
-            width: 1.2rem;
-            left: -0.3rem;
-            transform-origin: -3%;
-            transition: $clr-trigger-animation;
-          }
-
-          &::before {
-            transform: rotate(45deg);
-          }
-
-          &::after {
-            transform: rotate(-45deg);
-          }
-        }
-      }
-    }
-  }
-}
-
-.open-hamburger-menu .header-hamburger-trigger,
-.open-overflow-menu .header-overflow-trigger {
-  span::before {
-    background-color: white;
-  }
-  span::after {
-    background-color: white;
-  }
-}

package/src/history/history.scss

@@ -1,25 +0,0 @@
-@include exports('history.clr-addons') {
-  .history-container {
-    padding: 15px;
-  }
-
-  .history {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: -1rem;
-    list-style: none;
-    font-size: 13px;
-  }
-
-  .history-item {
-    cursor: pointer;
-    + .history-item {
-      padding-left: 0.5rem;
-      &::before {
-        content: '/';
-        display: inline-block;
-        padding-right: 0.5rem;
-      }
-    }
-  }
-}

package/src/letter-avatar/letter-avatar.scss

@@ -1,27 +0,0 @@
-@include exports('letter-avatar.clr-addons') {
-  .avatar-circle {
-    display: flex;
-  }
-
-  .avatar-initials {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: #707070;
-    border-radius: 100%;
-    color: var(--white);
-    font-weight: 500;
-    letter-spacing: normal;
-    text-transform: uppercase;
-    font-size: 0.8em;
-  }
-
-  :hover,
-  :focus-within {
-    > .clr-avatar .avatar-initials {
-      background-color: var(--clr-btn-link-color);
-      cursor: default;
-    }
-  }
-}

package/src/location-bar/location-bar-node/location-bar-node.component.scss

@@ -1,54 +0,0 @@
-@include exports('location-bar-node.clr-addons') {
-  .location-bar-node {
-    .btn {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .dropdown {
-      .dropdown-menu {
-        max-width: 12.5rem;
-      }
-    }
-
-    .unselectable-node {
-      display: inline-block;
-      padding: 0 0.5rem;
-      text-transform: uppercase;
-      font-size: 0.458333rem;
-      font-weight: 500;
-      letter-spacing: 0.073em;
-      max-width: 15rem;
-    }
-
-    .last-level {
-      font-weight: 700;
-    }
-
-    .btn {
-      min-width: unset;
-
-      &:focus {
-        outline: none;
-        font-weight: 700;
-        color: var(--clr-btn-default-hover-color);
-
-        .unselected {
-          color: var(--clr-btn-default-hover-color);
-        }
-      }
-    }
-
-    .dropdown .dropdown-toggle .caret-icon {
-      top: 30%;
-    }
-
-    .unselected {
-      margin-top: -0.14rem;
-    }
-
-    .selected-child {
-      background: var(--clr-global-selection-color);
-    }
-  }
-}

package/src/main-nav-group/main-nav-group.scss

@@ -1,156 +0,0 @@
-@include exports('main-nav-group.clr-addons') {
-  header,
-  .header {
-    .header-nav .nav-link {
-      text-align: left;
-
-      &:first-of-type::before,
-      &:last-of-type::after {
-        display: none;
-      }
-    }
-  }
-
-  .main-container:not(.open-hamburger-menu) .header-nav {
-    @media screen and (max-width: map-get($clr-grid-breakpoints, lg)) {
-      .header-overflow {
-        display: none;
-      }
-    }
-
-    .collapsible {
-      opacity: 1;
-      cursor: pointer;
-
-      &:hover .nav-text {
-        opacity: 1;
-      }
-
-      .nav-text {
-        opacity: 0.65;
-        cursor: pointer;
-
-        & clr-icon {
-          position: relative;
-          transform: unset;
-          top: 0;
-          left: 0.2rem;
-          width: 0.5rem;
-          height: 0.5rem;
-        }
-      }
-
-      .nav-list {
-        display: none;
-
-        .nav-link {
-          color: var(--clr-dropdown-item-color);
-          opacity: 1;
-          padding: 1px 1rem 0;
-          height: 1.25rem;
-          line-height: 1.25rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-
-          &:hover {
-            background-color: var(--clr-dropdown-bg-hover-color);
-          }
-
-          &.active {
-            background: var(--clr-dropdown-selection-color);
-            color: var(--clr-dropdown-active-text-color);
-          }
-        }
-      }
-
-      input[type='checkbox']:checked ~ .nav-list {
-        visibility: visible;
-        display: flex;
-      }
-    }
-  }
-
-  .main-container.open-hamburger-menu .header .header-nav {
-    &.clr-nav-level-1 .header-overflow {
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-
-      .nav-link .nav-text {
-        font-weight: var(--clr-font-weight-bold);
-        padding-right: 1.5rem;
-      }
-    }
-
-    .nav-link {
-      padding: 0;
-    }
-
-    .collapsible {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-
-      .nav-text {
-        cursor: pointer;
-      }
-
-      &.nav-link:hover {
-        background-color: transparent;
-      }
-
-      clr-icon {
-        position: absolute;
-        top: 0.4rem;
-        right: 0.5rem;
-        left: unset;
-        transform: rotate(-90deg);
-        width: 0.666667rem;
-        height: 0.666667rem;
-      }
-
-      .nav-list {
-        display: none;
-      }
-
-      input[type='checkbox']:checked {
-        ~ label clr-icon {
-          transform: unset;
-        }
-        ~ .nav-list {
-          display: flex;
-          visibility: visible;
-          position: relative;
-          background: transparent;
-          border: 0;
-          box-shadow: 0 0;
-          padding: 0;
-
-          .nav-link {
-            padding: 0 1.5rem 0 2rem;
-            height: 1.5rem;
-            line-height: 1.5rem;
-          }
-        }
-      }
-    }
-  }
-
-  .main-nav-group {
-    &.active .collapsible.active .nav-text {
-      opacity: 0.99;
-    }
-
-    .collapsible {
-      &:active,
-      &:hover {
-        outline-width: 0;
-      }
-
-      > input[type='checkbox'] {
-        display: none;
-      }
-    }
-  }
-}

package/src/mixins.scss

@@ -1,38 +0,0 @@
-$imported-modules: () !default;
-@mixin exports($name) {
-  //check if they have been imported
-  @if (index($imported-modules, $name) == null) {
-    $imported-modules: append($imported-modules, $name) !global;
-    @content;
-  }
-}
-
-@function deHexColorString($colorStr) {
-  @if str-index($colorStr, 'white') != null {
-    @return 'ffffff';
-  }
-  @if str-index($colorStr, 'black') != null {
-    @return '000000';
-  }
-  @if str-index($colorStr, '#') == null {
-    @return $colorStr;
-  }
-  @return str-slice($colorStr, 2);
-}
-
-$svg_data: 'data:image/svg+xml;charset=utf8';
-
-@function generateSpinnerIcon($fillBgColor: #000000, $fillSnakeColor: #0077b8, $opacityBg: 0.15) {
-  $spinner-icon: '%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23' +
-    deHexColorString($fillBgColor + '') + '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%20' +
-    $opacityBg +
-    '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23' +
-    deHexColorString($fillSnakeColor + '') /* the blue, smaller part of the ring*/ +
-    '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A';
-  @return url('#{$svg_data},#{$spinner-icon}');
-}
-
-@function generateEmptyTreetablePlaceholder() {
-  $placeholder-image: '%3Csvg%20viewBox%3D%220%200%2060%2072%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22path-1%22%20cx%3D%2230%22%20cy%3D%2261.7666667%22%20rx%3D%2215.4512904%22%20ry%3D%224.73333333%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20maskContentUnits%3D%22userSpaceOnUse%22%20maskUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2230.9025808%22%20height%3D%229.46666667%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Oval-10%22%20stroke%3D%22%23C1DFEF%22%20mask%3D%22url(%23mask-2)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22square%22%20stroke-dasharray%3D%223%2C6%2C3%2C5%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M38.4613647%2C18.1642456%20L30.9890137%2C34.9141846%20L31%2C47%20L32.5977783%2C46.5167236%20L32.5977783%2C34.9141846%20L51.0673218%2C15.7560425%20C51.0673218%2C15.7560425%2048.6295166%2C16.6542969%2044.9628906%2C17.3392334%20C41.2962646%2C18.0241699%2038.4613647%2C18.1642456%2038.4613647%2C18.1642456%20Z%22%20id%3D%22Path-195%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.74639226%2C12.5661855%20L4.62065726%2C12.1605348%20L5.3515414%2C11.1625044%20L5.77622385%2C11.159939%20L6.20936309%2C12.5573481%20L4.74639226%2C12.5661855%20Z%20M6.20936309%2C12.5573481%20L6.32542632%2C12.9317954%20L28.4963855%2C34.8796718%20L28.4963855%2C47.8096691%20L32.6%2C46.4836513%20L32.6%2C34.8992365%20L53.973494%2C12.7035813%20L53.973494%2C12.2688201%20L6.20936309%2C12.5573481%20Z%20M55.373494%2C10.8603376%20L55.373494%2C13.2680664%20L34%2C35.4637216%20L34%2C47.5025401%20L27.0963855%2C49.7333333%20L27.0963855%2C35.4637219%20L5.09179688%2C13.680542%20L4.31325301%2C11.1687764%20L55.373494%2C10.8603376%20Z%22%20id%3D%22Path-149%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22Oval-9%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2230%22%20cy%3D%2211.785654%22%20rx%3D%2226%22%20ry%3D%226.78565401%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M30%2C17.171308%20C36.8772177%2C17.171308%2043.3112282%2C16.4610701%2048.0312371%2C15.2292106%20C50.2777611%2C14.6428977%2052.0507619%2C13.9579677%2053.2216231%2C13.2354973%20C54.1938565%2C12.6355886%2054.6%2C12.1175891%2054.6%2C11.785654%20C54.6%2C11.4537189%2054.1938565%2C10.9357194%2053.2216231%2C10.3358107%20C52.0507619%2C9.61334032%2050.2777611%2C8.92841034%2048.0312371%2C8.34209746%20C43.3112282%2C7.11023795%2036.8772177%2C6.4%2030%2C6.4%20C23.1227823%2C6.4%2016.6887718%2C7.11023795%2011.9687629%2C8.34209746%20C9.72223886%2C8.92841034%207.94923814%2C9.61334032%206.77837689%2C10.3358107%20C5.8061435%2C10.9357194%205.4%2C11.4537189%205.4%2C11.785654%20C5.4%2C12.1175891%205.8061435%2C12.6355886%206.77837689%2C13.2354973%20C7.94923814%2C13.9579677%209.72223886%2C14.6428977%2011.9687629%2C15.2292106%20C16.6887718%2C16.4610701%2023.1227823%2C17.171308%2030%2C17.171308%20Z%20M30%2C18.571308%20C15.6405965%2C18.571308%204%2C15.5332672%204%2C11.785654%20C4%2C8.03804078%2015.6405965%2C5%2030%2C5%20C44.3594035%2C5%2056%2C8.03804078%2056%2C11.785654%20C56%2C15.5332672%2044.3594035%2C18.571308%2030%2C18.571308%20Z%22%20id%3D%22Oval-9-Copy%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.2608643%2C7.14562988%20L22.727356%2C16.9047241%20C22.727356%2C16.9047241%2015.3006592%2C16.3911743%2010.276001%2C14.7511597%20C5.25134277%2C13.111145%205.38031006%2C11.8284302%205.38031006%2C11.6882935%20C5.38031006%2C10.4832831%208.16633152%2C9.41877716%2011.114563%2C8.57324219%20C14.549319%2C7.58817492%2018.2608643%2C7.14562988%2018.2608643%2C7.14562988%20Z%22%20id%3D%22Path-196%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
-  @return url('#{$svg_data},#{$placeholder-image}');
-}