Empty State
Mixins
root-container
@mixin root-container() { ... }
@mixin root-container() { /* stylelint-disable-next-line property-no-unknown */ container: kib-empty-state / inline-size; max-width: settings.$container-width; margin: auto; text-align: center; }
content-grid
@mixin content-grid() { ... }
@mixin content-grid() { display: flex; gap: settings.$content-gap; flex-direction: column; align-items: center; /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include content-grid-lg; } }
Description
Main content grid
Parameters
None.
Requires
- [mixin]
content-grid-lg
- [variable]
content-gap
- [variable]
breakpoint-lg
media
@mixin media() { ... }
@mixin media() { width: 100%; max-width: settings.$media-size-sm; > img, > svg, > video, > canvas, > iframe, > figure, > picture { max-width: inherit; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-md}) { @include media-md; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include media-lg; } }
Description
Media container
Parameters
None.
Requires
- [mixin]
media-md
- [mixin]
media-lg
- [variable]
media-size-sm
- [variable]
breakpoint-md
- [variable]
breakpoint-lg
content
@mixin content() { ... }
@mixin content() { flex-grow: 1; display: flex; flex-direction: column; gap: spacing.get('s4'); max-width: settings.$container-width-no-media; margin: 0 auto; }
heading
@mixin heading() { ... }
@mixin heading() { @include typography.style-as('display-6'); color: color.get('text', 'primary'); margin: 0; /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-md}) { @include heading-md; } /* stylelint-disable-next-line scss/at-rule-no-unknown */ @container kib-empty-state (min-width: #{settings.$breakpoint-lg}) { @include heading-lg; } }
Description
Main heading
Parameters
None.
Requires
- [mixin]
heading-md
- [mixin]
heading-lg
- [function]
get
- [variable]
breakpoint-md
- [variable]
breakpoint-lg
messaging
@mixin messaging() { ... }
@mixin messaging() { @include typography.style-as('paragraph-2'); color: color.get('text', 'secondary'); :last-child { margin-bottom: 0; } }
media-md
@mixin media-md() { ... }
@mixin media-md() { max-width: settings.$media-size-md; }
Description
Media container medium sized
Parameters
None.
Requires
- [variable]
media-size-md
Used by
- [mixin]
media
media-lg
@mixin media-lg() { ... }
@mixin media-lg() { max-width: settings.$media-size-lg; }
Description
Media container large sized
Parameters
None.
Requires
- [variable]
media-size-lg
Used by
- [mixin]
media
heading-md
@mixin heading-md() { ... }
@mixin heading-md() { @include typography.style-as('display-4'); }
heading-lg
@mixin heading-lg() { ... }
@mixin heading-lg() { @include typography.style-as('display-3'); margin: spacing.get('s6', 0, 0); }
content-grid-lg
@mixin content-grid-lg() { ... }
@mixin content-grid-lg() { flex-direction: row; align-items: flex-start; justify-content: center; text-align: left; }
Variables
container-width
$container-width: unit.rem(688px);
container-width-no-media
$container-width-no-media: unit.rem(454px);
media-size-sm
$media-size-sm: unit.rem(200px);
media-size-md
$media-size-md: unit.rem(250px);
media-size-lg
$media-size-lg: unit.rem(270px);
content-gap
$content-gap: spacing.get('s6');
breakpoint-md
$breakpoint-md: unit.rem(384px);