Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Background 

<!-- Default -->
<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-black"></div>
                <p class="color-panel__description">
                    -bg-black
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray"></div>
                <p class="color-panel__description">
                    -bg-gray
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-white"></div>
                <p class="color-panel__description">
                    -bg-white
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-active-red"></div>
                <p class="color-panel__description">
                    -bg-active-red
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-dynamic-green"></div>
                <p class="color-panel__description">
                    -bg-dynamic-green
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-transparent"></div>
                <p class="color-panel__description">
                    -bg-transparent
                </p>
            </div>

        </div>
    </div>
</div>


<!-- Grays -->
<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray-darker"></div>
                <p class="color-panel__description">
                    -bg-gray-darker
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray-dark"></div>
                <p class="color-panel__description">
                    -bg-gray-dark
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray-light"></div>
                <p class="color-panel__description">
                    -bg-gray-light
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray-lighter"></div>
                <p class="color-panel__description">
                    -bg-gray-lighter
                </p>
            </div>

        </div>
    </div>
</div>


<!-- Theme -->
<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-primary"></div>
                <p class="color-panel__description">
                    -bg-primary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-secondary"></div>
                <p class="color-panel__description">
                    -bg-secondary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-tertiary"></div>
                <p class="color-panel__description">
                    -bg-tertiary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-success"></div>
                <p class="color-panel__description">
                    -bg-success
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-danger"></div>
                <p class="color-panel__description">
                    -bg-danger
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-dark"></div>
                <p class="color-panel__description">
                    -bg-dark
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-light"></div>
                <p class="color-panel__description">
                    -bg-light
                </p>
            </div>

        </div>
    </div>
</div>


{{render '@helper-color-palette' _self.context}}
 
/* Default */
{
  "colors": [
    {
      "prefix": "-bg-",
      "color": "black"
    },
    {
      "prefix": "-bg-",
      "color": "gray"
    },
    {
      "prefix": "-bg-",
      "color": "white"
    },
    {
      "prefix": "-bg-",
      "color": "active-red"
    },
    {
      "prefix": "-bg-",
      "color": "dynamic-green"
    },
    {
      "prefix": "-bg-",
      "color": "transparent"
    }
  ]
}


/* Grays */
{
  "colors": [
    {
      "prefix": "-bg-",
      "color": "gray-darker"
    },
    {
      "prefix": "-bg-",
      "color": "gray-dark"
    },
    {
      "prefix": "-bg-",
      "color": "gray-light"
    },
    {
      "prefix": "-bg-",
      "color": "gray-lighter"
    }
  ]
}


/* Theme */
{
  "colors": [
    {
      "prefix": "-bg-",
      "color": "primary"
    },
    {
      "prefix": "-bg-",
      "color": "secondary"
    },
    {
      "prefix": "-bg-",
      "color": "tertiary"
    },
    {
      "prefix": "-bg-",
      "color": "success"
    },
    {
      "prefix": "-bg-",
      "color": "danger"
    },
    {
      "prefix": "-bg-",
      "color": "dark"
    },
    {
      "prefix": "-bg-",
      "color": "light"
    }
  ]
}
  • Content: 
    /* Background */

@mixin make-backgrounds($colors) {
  @each $name, $color in $colors {
    .-bg-#{$name} {
      @include background-variant($color, true);
    }
  }
}

body,
.-bg-white {
  --btn-background-arrow: #{$secondary};
  --btn-foreground-arrow: #{$black};
  --btn-arrow-color: #{$white};
  --btn-arrow-text-color: #{$white};
}

[class*='-bg-']:not(.-bg-white) {
  --btn-background-arrow: #{$white};
  --btn-foreground-arrow: #{$black};
  --btn-arrow-color: #{$secondary};
  --btn-arrow-text-color: #{$black};
}

.-bg-secondary,
.-bg-gray-darker,
.-bg-primary {
  --list-hook-color: #{$white};
}

[class*='-bg-']:not(.-bg-secondary):not(.-bg-gray-darker):not(.-bg-primary) {
  --list-hook-color: #{$secondary};
}

body,
[class*='-bg-']:not(.-bg-primary):not(.-bg-secondary):not(.-bg-black):not(.-bg-gray):not(.-bg-gray-darker):not(.-bg-gray-dark) {
  --line-separator-color: #{$gray-dark};
}

.-bg-primary,
.-bg-secondary,
.-bg-black,
.-bg-gray,
.-bg-gray-darker,
.-bg-gray-dark {
  --line-separator-color: #{$white};
}

@include make-backgrounds($colors);
@include make-backgrounds($theme-colors);

.-bgimg {
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  &.-parallax {
    background-attachment: fixed;
  }

  .container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    > * {
      width: 100%;
    }
  }
}

.-bgvideo {
  position: relative;
  overflow: hidden;

  .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }

  &.-drop-content {
    @include breakpoint(pre-medium down) {
      .background-video {
        position: initial;
        transform: none;
      }

      .container-wrapper {
        /* stylelint-disable declaration-no-important */
        min-height: auto !important;
      }
    }
  }
}
  • URL: /components/raw/background/_background.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/background/_background.scss
  • Size: 2 KB

There are no notes for this item.