No notes defined.
<!-- Default -->
<span class="hint">Ich bin ein Hinweis.</span>
<!-- Information -->
<span class="hint is-information">Ich bin eine Information.</span>
<!-- Confirmation -->
<span class="hint is-confirmation">Ich bin eine Bestätigung.</span>
<!-- Warning -->
<span class="hint is-warning">Ich bin eine Warnung.</span>
<!-- Error -->
<span class="hint is-error">Ich bin die Fehlerbeschreibung.</span>
<!-- Error -->
<span class="hint" data-disabled="true">Ich bin ein Hinweis für ein nicht aktives Feld.</span>
<span class="hint{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}>{{{content}}}</span>
/* Default */
{
"content": "Ich bin ein Hinweis."
}
/* Information */
{
"content": "Ich bin eine Information.",
"modifier": "is-information"
}
/* Confirmation */
{
"content": "Ich bin eine Bestätigung.",
"modifier": "is-confirmation"
}
/* Warning */
{
"content": "Ich bin eine Warnung.",
"modifier": "is-warning"
}
/* Error */
{
"content": "Ich bin die Fehlerbeschreibung.",
"modifier": "is-error"
}
/* Error */
{
"content": "Ich bin ein Hinweis für ein nicht aktives Feld.",
"is-disabled": true
}
@function hint_get-icon(
$icon_name: information,
$is-inverted: false,
){
$svg: "";
@if map-has-key($hint_icons, $icon_name) == false {
@return $svg;
}
$color: null;
$colors: map-get($hint_colors, $icon_name);
@if type-of($colors) == map {
@if $is-inverted {
$color: map-get($colors, icon-color--inverted);
} @else {
$color: map-get($colors, icon-color);
}
}
@if $color == null {
$color: currentColor;
}
$svg: map-get($hint_icons, $icon_name);
$svg: str-replace($svg, "{{color}}", "#{$color}");
@return $svg;
}
$hint_font-size: smallest !default;
$hint_color: $_text-color !default;
@import "_hint.helpers";
@import "_hint.settings";
@import "_hint.styles";
$hint_font-size: small !default;
$hint_color: $_minor-color !default;
$hint_information-color: $_information-color !default;
$hint_confirmation-color: $_positive-color !default;
$hint_warning-color: $_warning-color !default;
$hint_error-color: $_negative-color !default;
$hint_styles: (
color: $hint_color,
) !default;
$hint_colors: (
information: (
color: $_information-color,
icon-color: $_information-accent-color,
icon-color--inverted: $_information-background-color,
),
confirmation: (
color: $_positive-color,
icon-color: $_positive-accent-color,
icon-color--inverted: $_positive-background-color,
),
warning: (
color: $_warning-color,
icon-color: $_warning-accent-color,
icon-color--inverted: $_warning-background-color,
),
error: (
color: $_negative-color,
icon-color: $_negative-accent-color,
icon-color--inverted: $_negative-background-color,
),
disabled: (
color: $_disabled-color,
icon-color: $_disabled-color,
icon-color--inverted: $_disabled-color,
),
) !default;
$hint_states: (
default: $hint_styles,
information: (
color: map-get(map-get($hint_colors, information), color),
),
confirmation: (
color: map-get(map-get($hint_colors, confirmation), color),
),
warning: (
color: map-get(map-get($hint_colors, warning), color),
),
error: (
color: map-get(map-get($hint_colors, error), color),
),
disabled: (
color: map-get(map-get($hint_colors, disabled), color),
),
) !default;
$hint_icons: (
information: '<svg width="20" height="20" viewBox="0 0 20 20" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM10.2165 6.66739C10.9071 6.66739 11.4669 6.10758 11.4669 5.41704C11.4669 4.72649 10.9071 4.16669 10.2165 4.16669C9.52598 4.16669 8.96618 4.72649 8.96618 5.41704C8.96618 6.10758 9.52598 6.66739 10.2165 6.66739ZM8.73223 7.86783C8.26279 7.86783 7.88223 8.24839 7.88223 8.71783C7.88223 9.18727 8.26279 9.56783 8.73223 9.56783H9.56599V13.7264H8.73223C8.26279 13.7264 7.88223 14.1069 7.88223 14.5764C7.88223 15.0458 8.26279 15.4264 8.73223 15.4264H12.0767C12.5461 15.4264 12.9267 15.0458 12.9267 14.5764C12.9267 14.1069 12.5461 13.7264 12.0767 13.7264H11.266V8.71783C11.266 8.24839 10.8854 7.86783 10.416 7.86783H8.73223Z"/></svg>',
confirmation: '<svg width="20" height="20" viewBox="0 0 20 20" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM15.8202 6.8011C16.0992 6.42354 16.0192 5.89131 15.6417 5.61234C15.2641 5.33337 14.7319 5.4133 14.4529 5.79086L9.23314 12.8554L5.863 10.1746C5.49562 9.88233 4.96089 9.94325 4.66865 10.3106C4.37641 10.678 4.43733 11.2127 4.80471 11.505L8.86418 14.7341C9.04472 14.8777 9.27587 14.9418 9.50457 14.9116C9.73327 14.8814 9.93987 14.7596 10.077 14.574L15.8202 6.8011Z"/></svg>',
warning: '<svg width="20" height="20" viewBox="0 0 20 20" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.474 0.89639C10.8548 -0.298799 9.14525 -0.298796 8.52598 0.896393L0.188337 16.988C-0.384231 18.0931 0.417776 19.4119 1.66236 19.4119H18.3376C19.5822 19.4119 20.3842 18.0931 19.8117 16.988L11.474 0.89639ZM10.0008 5.56378C10.4703 5.56378 10.8508 5.94434 10.8508 6.41378V11.4115C10.8508 11.8809 10.4703 12.2615 10.0008 12.2615C9.53137 12.2615 9.15082 11.8809 9.15082 11.4115V6.41378C9.15082 5.94434 9.53137 5.56378 10.0008 5.56378ZM11.2512 14.7619C11.2512 15.4524 10.6914 16.0122 10.0008 16.0122C9.31027 16.0122 8.75047 15.4524 8.75047 14.7619C8.75047 14.0714 9.31027 13.5116 10.0008 13.5116C10.6914 13.5116 11.2512 14.0714 11.2512 14.7619Z"/></svg>',
error: '<svg width="20" height="20" viewBox="0 0 20 20" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10.8508 5.41378C10.8508 4.94434 10.4703 4.56378 10.0008 4.56378C9.53137 4.56378 9.15082 4.94434 9.15082 5.41378V10.4115C9.15082 10.8809 9.53137 11.2615 10.0008 11.2615C10.4703 11.2615 10.8508 10.8809 10.8508 10.4115V5.41378ZM10.0008 15.0122C10.6914 15.0122 11.2512 14.4524 11.2512 13.7619C11.2512 13.0714 10.6914 12.5116 10.0008 12.5116C9.31027 12.5116 8.75047 13.0714 8.75047 13.7619C8.75047 14.4524 9.31027 15.0122 10.0008 15.0122Z"/></svg>',
);
$hint_icons: (
information: hint_get-icon(information),
information--inverted: hint_get-icon(information, $is-inverted: true),
confirmation: hint_get-icon(confirmation),
confirmation--inverted: hint_get-icon(confirmation, $is-inverted: true),
warning: hint_get-icon(warning),
warning--inverted: hint_get-icon(warning, $is-inverted: true),
error: hint_get-icon(error),
error--inverted: hint_get-icon(error, $is-inverted: true),
);
%hint {
display: block;
@include stack-spacing(small);
@include state-styles($hint_states);
@if map-get($_font-sizes, default) and map-get(map-get($_font-sizes, default), $hint_font-size) {
@include font-size($hint_font-size);
} @else {
font-size: $hint_font-size;
}
}
%hint--information,
%hint--confirmation,
%hint--warning,
%hint--error {
$icon_size: 20px;
$icon_gap: 8px;
position: relative;
display: flex;
align-items: center;
&:not(:empty)::before {
content: "";
display: inline-block;
width: $icon_size;
height: $icon_size;
margin-right: $icon_gap;
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
}
%hint--information {
@include state-styles($hint_states, information);
&::before {
background-image: svg-url(map-get($hint_icons, information));
}
}
%hint--confirmation {
@include state-styles($hint_states, confirmation);
&::before {
background-image: svg-url(map-get($hint_icons, confirmation));
}
}
%hint--warning {
@include state-styles($hint_states, warning);
&::before {
background-image: svg-url(map-get($hint_icons, warning));
}
}
%hint--error {
@include state-styles($hint_states, error);
&::before {
background-image: svg-url(map-get($hint_icons, error));
}
}
%hint--disabled {
@include state-styles($hint_states, disabled);
}
%hint {
&.is-information {
@extend %hint--information;
}
&.is-confirmation {
@extend %hint--confirmation;
}
&.is-warning {
@extend %hint--warning;
}
&.is-error {
@extend %hint--error;
}
&[data-disabled="true"] {
@extend %hint--disabled;
}
}
.hint {
@extend %hint;
}