_patterns_strips.scss

@mixin maas-p-strip--dark {
  $color-suru-grey-1: rgba(216, 216, 216, 0.54);
  $color-suru-grey-2: rgba(228, 228, 228, 0.54);
  $color-suru-grey-3: #333;
  $color-suru-grey-4: #262626;
  $color-suru-grey-5: #171717;
  $color-suru-grey-6: #181818;
  $color-suru-grey-7: #2d2d2d;
  $color-suru-grey-8: #383838;
  $color-suru-grey-9: #2e2e2e;
  $color-suru-grey-10: #393939;

  .p-takeover--dark {
    background-blend-mode: multiply, multiply, normal, normal;
    background-color: $color-dark;
    background-image:
      linear-gradient(
        to bottom left,
        $color-suru-grey-1 0,
        $color-suru-grey-1 49.9%,
        transparent 50%
      ),
      linear-gradient(
        to bottom right,
        $color-suru-grey-2 0,
        $color-suru-grey-2 49.9%,
        transparent 50%
      ),
      linear-gradient(
        to top left,
        $color-x-light 0%,
        $color-x-light 49.3%,
        transparent 50%,
        transparent 100%
      ),
      linear-gradient(
        201deg,
        $color-suru-grey-3 0%,
        $color-suru-grey-4 46%,
        $color-dark 90%
      );
    background-position: top right, top left, right bottom -1px, left top;
    background-repeat: no-repeat;
    background-size: 74% 99.83%, 68% 91%, 103.8% 20.26%, 100% 99.8%;
    color: $color-x-light;
    margin: 0;
    padding-bottom: 11rem;
    padding-top: 6rem;
  }

  .p-takeover--no-overlays {
    // copy of ubuntu.com's .p-takeover--compliance found at https://ubuntu.com/takeovers
    background-image:
      linear-gradient(
        44deg,
        $color-suru-grey-5 0%,
        $color-suru-grey-6 9%,
        $color-suru-grey-4 34%,
        $color-suru-grey-7 67%,
        $color-suru-grey-8 88%,
        $color-suru-grey-9 100%,
        $color-suru-grey-10 100%
      );
  }
}