No notes defined.
<!-- Default -->
<label class="label is-required" for="field-uniqueID">Bezeichnung</label>
<!-- Optional -->
<label class="label is-optional" for="field-uniqueID">Bezeichnung</label>
<!-- Valid -->
<label class="label is-required" data-invalid="false" for="field-uniqueID">Bestätigt</label>
<!-- Invalis -->
<label class="label is-required" data-invalid="true" for="field-uniqueID">Fehlerhaft</label>
<!-- Disabled -->
<label class="label is-required" data-disabled="true" for="field-uniqueID">Disabled</label>
{{#if label}}<label class="label{{#if is-required}} is-required{{else}} is-optional{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}{{#id}} for="field-{{.}}"{{/id}}>{{{label}}}</label>{{/if}}
/* Default */
{
"id": "uniqueID",
"label": "Bezeichnung",
"is-required": true
}
/* Optional */
{
"id": "uniqueID",
"label": "Bezeichnung",
"is-required": false
}
/* Valid */
{
"id": "uniqueID",
"label": "Bestätigt",
"is-required": true,
"is-valid": true
}
/* Invalis */
{
"id": "uniqueID",
"label": "Fehlerhaft",
"is-required": true,
"is-invalid": true
}
/* Disabled */
{
"id": "uniqueID",
"label": "Disabled",
"is-required": true,
"is-disabled": true
}
@import "_label.settings.psi";
@import "_label.settings";
@import "_label.styles";
%label {
&::after {
font-weight: $_font-weight;
}
@at-root [lang="pl"] .is-optional &::after,
[lang="pl"] &.is-optional::after {
content: "\00a0#{$label-marker--opional--pl}#{$label_supplement}" !important;
}
}
$label_supplement: "" !default;
$label-marker--opional: "– optional" !default;
$label-marker--opional--pl: "– opcjonalnie" !default;
$label_color: $_text-color !default;
$label_styles: (
text-size: small,
font-weight: $_font-weight--bold,
color: $label_color,
) !default;
$label_supplement: ":" !default;
$label_marker--required: "" !default;
$label-marker--optional: "(optional)" !default;
$label_color: $_text-color !default;
$label_color--invalid: $_negative-color !default;
$label_color--valid: $_positive-color !default;
$label_color--disabled: $_disabled-color !default;
$label_marker_icons: (
valid: '<svg width="16" height="16" viewBox="0 0 16 16" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM12.3088 6.08812C12.6336 5.64147 12.5348 5.01605 12.0882 4.69121C11.6415 4.36637 11.0161 4.46512 10.6913 4.91178L7.43565 9.38827L5.25927 6.84916C4.89985 6.42983 4.26855 6.38127 3.84923 6.74069C3.4299 7.10011 3.38134 7.73141 3.74076 8.15074L6.74076 11.6507C6.93984 11.883 7.23427 12.0114 7.53992 11.9992C7.84558 11.9869 8.12883 11.8355 8.30875 11.5881L12.3088 6.08812Z"/></svg>',
invalid: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C8.35567 1 8.68457 1.18891 8.86378 1.49613L15.8638 13.4961C16.0442 13.8054 16.0455 14.1876 15.8671 14.4981C15.6888 14.8086 15.3581 15 15 15H1C0.641935 15 0.311196 14.8086 0.132858 14.4981C-0.0454804 14.1876 -0.0441976 13.8054 0.136221 13.4961L7.13622 1.49613C7.31543 1.18891 7.64433 1 8 1ZM9 6.5C9 5.94772 8.55229 5.5 8 5.5C7.44772 5.5 7 5.94772 7 6.5L7 12C7 12.5523 7.44772 13 8 13C8.55229 13 9 12.5523 9 12V6.5Z" fill="{{color}}"/></svg>',
) !default;
$label_marker_size: 16px;
$label_marker_gutter: .5ch;
$label_marker_styles: (
margin-top: (-.5 * $label_marker_size),
margin-bottom: (-.5 * $label_marker_size),
margin-left: $label_marker_gutter,
order: 99,
) !default;
$label_styles: (
font-size: 1rem,
font-weight: $_font-weight--bold,
color: $label_color,
) !default;
$label_states: (
default: $label_styles,
valid: (
color: $label_color--valid,
),
invalid: (
color: $label_color--invalid,
),
disabled: (
color: $label_color--disabled,
),
) !default;
%label {
@include stack-spacing();
user-select: none;
cursor: pointer;
display: flex;
align-items: center;
@include state-styles($label_states);
@if $label_supplement == null or $label_supplement == false {
$label_supplement: "";
}
@if $label_supplement != "" {
&::after {
content: $label_supplement;
}
}
&:not([for]){
cursor: default;
}
a {
@extend %link;
position: relative;
z-index: 1;
}
[data-invalid="false"] &,
&[data-invalid="false"],
&--valid {
@include state-styles($label_states, valid);
}
[data-invalid="true"] &,
&[data-invalid="true"],
&--invalid {
@include state-styles($label_states, invalid);
}
[data-disabled="true"] &,
&[data-disabled="true"],
&--disabled {
cursor: default;
pointer-events: none;
@include state-styles($label_states, disabled);
}
// Modern way: Mark label without own modifier
*:has(> [aria-invalid="false"]) > & {
@include state-styles($label_states, valid);
}
*:has(> [aria-invalid="true"]) > & {
@include state-styles($label_states, invalid);
}
@if meta.global-variable-exists("label_marker_icons") {
&::before {
content: "";
width: $label_marker_size;
height: $label_marker_size;
background: center center no-repeat;
background-size: contain;
display: none;
@include styles($label_marker_styles);
}
@if meta.type-of($label_marker_icons) == "map" and map.get($label_marker_icons, valid) {
[data-invalid="false"] &,
&[data-invalid="false"],
&--valid {
&::before {
display: block;
background-image: svg-url(map.get($label_marker_icons, valid), $label_color--valid);
}
}
}
@if meta.type-of($label_marker_icons) == "map" and map.get($label_marker_icons, invalid) {
[data-invalid="true"] &,
&[data-invalid="true"],
&--invalid {
&::before {
display: block;
background-image: svg-url(map.get($label_marker_icons, invalid), $label_color--invalid);
}
}
}
}
&--required {
&::after {
@if $label_marker--required and $label_marker--required != "" {
content: "\00a0#{$label_marker--required}#{$label_supplement}" !important;
} else {
content: "#{$label_supplement}" !important;
}
}
}
&--optional {
&::after {
@if $label_marker--optional and $label_marker--optional != "" {
content: "\00a0#{$label_marker--optional}#{$label_supplement}" !important;
} else {
content: "#{$label_supplement}" !important;
}
}
}
@at-root .is-required &,
&.is-required {
@extend %label--required;
}
@at-root .is-optional &,
&.is-optional {
@extend %label--optional;
}
}
.label {
@extend %label;
}