@inkline/inkline/components/IHeader/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Header
 */
.header {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  transition-property: var(--header--transition-property, background-color);
  transition-duration: var(--header--transition-duration, var(--transition-duration));
  transition-timing-function: var(--header--transition-timing-function, var(--transition-timing-function));
  color: var(--header--color);
  background: var(--header--background);
  padding: var(--header--padding, var(--header--padding-top, 10rem) var(--header--padding-right, 0) var(--header--padding-bottom, 10rem) var(--header--padding-left, 0));
  /* stylelint-disable selector-list-comma-newline-after */
  /* stylelint-enable */
}
.header > .container,
.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header .h1,
.header .h2,
.header .h3,
.header .h4,
.header .h5,
.header .h6 {
  margin-top: 0;
}
.header.-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: unset;
  background-size: cover;
}
.header.-fullscreen {
  padding: 0;
  align-items: center;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}

/**
 * Color variants
 */
.header.-primary {
  --header--background: var(--header--primary--background, var(--color-primary));
  --header--color: var(--header--primary--color, var(--contrast-text-color-primary));
}
.header.-light {
  --header--background: var(--header--light--background, var(--color-light));
  --header--color: var(--header--light--color, var(--contrast-text-color-light));
}
.header.-dark {
  --header--background: var(--header--dark--background, var(--color-dark));
  --header--color: var(--header--dark--color, var(--contrast-text-color-dark));
}

/**
 * Size variants
 */
.header.-sm {
  --header--padding-top: var(
      --header--sm--padding-top,
      calc(10rem * var(--size-multiplier-xs))
  );
  --header--padding-right: var(--header--sm--padding-right, 0);
  --header--padding-bottom: var(
      --header--sm--padding-bottom,
      calc(10rem * var(--size-multiplier-xs))
  );
  --header--padding-left: var(--header--sm--padding-left, 0);
}
.header.-md {
  --header--padding-top: var(
      --header--md--padding-top,
      calc(10rem * var(--size-multiplier-md))
  );
  --header--padding-right: var(--header--md--padding-right, 0);
  --header--padding-bottom: var(
      --header--md--padding-bottom,
      calc(10rem * var(--size-multiplier-md))
  );
  --header--padding-left: var(--header--md--padding-left, 0);
}
.header.-lg {
  --header--padding-top: var(
      --header--lg--padding-top,
      calc(10rem * var(--size-multiplier-xl))
  );
  --header--padding-right: var(--header--lg--padding-right, 0);
  --header--padding-bottom: var(
      --header--lg--padding-bottom,
      calc(10rem * var(--size-multiplier-xl))
  );
  --header--padding-left: var(--header--lg--padding-left, 0);
}