🚀. Socket Launch Week Day 2:Introducing Manifest Alerts.Learn more →
@kern-ux/native
Advanced tools
@kern-ux/native - npm Package Compare versions
| .kern-input-group { | ||
| display: flex; | ||
| align-items: stretch; | ||
| width: 100%; | ||
| gap: var(--kern-metric-space-x-small); | ||
| flex-wrap: wrap; | ||
| .kern-input-group-text { | ||
| display: flex; | ||
| align-items: center; | ||
| border-radius: var(--kern-metric-border-radius-small, 2px); | ||
| border-bottom-width: var(--kern-metric-border-width-default, 2px); | ||
| padding-top: var(--kern-metric-space-none, 0px); | ||
| padding-right: var(--kern-metric-space-default, 16px); | ||
| padding-bottom: var(--kern-metric-space-none, 0px); | ||
| padding-left: var(--kern-metric-space-default, 16px); | ||
| border-bottom: 2px solid var(--kern-color-form-input-border, #171a2b); | ||
| color: var(--kern-color-layout-text-muted, #404565); | ||
| height: var(--kern-metric-dimension-x-large, 48px); | ||
| //flex: 1 0 auto; | ||
| &--readonly { | ||
| border-bottom: 2px solid var(--kern-color-layout-border, #a5aac3); | ||
| color: var(--kern-color-layout-text-muted, #404565); | ||
| } | ||
| &--disabled { | ||
| opacity: var(--kern-action-state-opacity-disabled, 0.4); | ||
| background-color: var(--kern-color-form-input-background, #f7f7f9); | ||
| } | ||
| } | ||
| .kern-btn { | ||
| flex: 1 0 auto; | ||
| .kern-label { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| .kern-form-input__input { | ||
| border-radius: var(--kern-metric-border-radius-small, 2px); | ||
| flex: 999 1 220px; | ||
| } | ||
| } |
| /** | ||
| * @file _spacing.scss | ||
| * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team | ||
| * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team | ||
| * @date 05.09.2025 | ||
| * @modified 26.11.2025 | ||
| * @@VERSION@@ | ||
| * @brief Styles für die Spacing-Komponente. | ||
| */ | ||
| // Import grid breakpoints and spacing config | ||
| @use '../utilities/maps'; | ||
| // Basis Margin Auto (Mobile First) | ||
| .kern-m-auto { margin: auto; } | ||
| .kern-mt-auto { margin-top: auto; } | ||
| .kern-mr-auto { margin-right: auto; } | ||
| .kern-mb-auto { margin-bottom: auto; } | ||
| .kern-ml-auto { margin-left: auto; } | ||
| .kern-mx-auto { margin-left: auto; margin-right: auto; } // Die häufigste Anwendung | ||
| .kern-my-auto { margin-top: auto; margin-bottom: auto; } | ||
| // Margin Utilities | ||
| @each $key, $value in maps.$spaces { | ||
| .kern-m-#{$key} { margin: #{$value}; } | ||
| .kern-mt-#{$key} { margin-top: #{$value}; } | ||
| .kern-mr-#{$key} { margin-right: #{$value}; } | ||
| .kern-mb-#{$key} { margin-bottom: #{$value}; } | ||
| .kern-ml-#{$key} { margin-left: #{$value}; } | ||
| .kern-mx-#{$key} { margin-left: #{$value}; margin-right: #{$value}; } | ||
| .kern-my-#{$key} { margin-top: #{$value}; margin-bottom: #{$value}; } | ||
| } | ||
| // Padding Utilities | ||
| @each $key, $value in maps.$spaces { | ||
| .kern-p-#{$key} { padding: #{$value}; } | ||
| .kern-pt-#{$key} { padding-top: #{$value}; } | ||
| .kern-pr-#{$key} { padding-right: #{$value}; } | ||
| .kern-pb-#{$key} { padding-bottom: #{$value}; } | ||
| .kern-pl-#{$key} { padding-left: #{$value}; } | ||
| .kern-px-#{$key} { padding-left: #{$value}; padding-right: #{$value}; } | ||
| .kern-py-#{$key} { padding-top: #{$value}; padding-bottom: #{$value}; } | ||
| } | ||
| // Responsive Spacing Utilities (mit Breakpoints) | ||
| @each $breakpoint, $min-width in maps.$grid-breakpoints { | ||
| @if $min-width > 0 { | ||
| @media (min-width: #{$min-width}) { | ||
| // Responsive Margin Auto (innerhalb Media Query) | ||
| .kern-m-auto-#{$breakpoint} { margin: auto; } | ||
| .kern-mt-auto-#{$breakpoint} { margin-top: auto; } | ||
| .kern-mr-auto-#{$breakpoint} { margin-right: auto; } | ||
| .kern-mb-auto-#{$breakpoint} { margin-bottom: auto; } | ||
| .kern-ml-auto-#{$breakpoint} { margin-left: auto; } | ||
| .kern-mx-auto-#{$breakpoint} { margin-left: auto; margin-right: auto; } | ||
| .kern-my-auto-#{$breakpoint} { margin-top: auto; margin-bottom: auto; } | ||
| @each $key, $value in maps.$spaces { | ||
| // Responsive Margin Utilities | ||
| .kern-m-#{$key}-#{$breakpoint} { margin: #{$value}; } | ||
| .kern-mt-#{$key}-#{$breakpoint} { margin-top: #{$value}; } | ||
| .kern-mr-#{$key}-#{$breakpoint} { margin-right: #{$value}; } | ||
| .kern-mb-#{$key}-#{$breakpoint} { margin-bottom: #{$value}; } | ||
| .kern-ml-#{$key}-#{$breakpoint} { margin-left: #{$value}; } | ||
| .kern-mx-#{$key}-#{$breakpoint} { margin-left: #{$value}; margin-right: #{$value}; } | ||
| .kern-my-#{$key}-#{$breakpoint} { margin-top: #{$value}; margin-bottom: #{$value}; } | ||
| // Responsive Padding Utilities | ||
| .kern-p-#{$key}-#{$breakpoint} { padding: #{$value}; } | ||
| .kern-pt-#{$key}-#{$breakpoint} { padding-top: #{$value}; } | ||
| .kern-pr-#{$key}-#{$breakpoint} { padding-right: #{$value}; } | ||
| .kern-pb-#{$key}-#{$breakpoint} { padding-bottom: #{$value}; } | ||
| .kern-pl-#{$key}-#{$breakpoint} { padding-left: #{$value}; } | ||
| .kern-px-#{$key}-#{$breakpoint} { padding-left: #{$value}; padding-right: #{$value}; } | ||
| .kern-py-#{$key}-#{$breakpoint} { padding-top: #{$value}; padding-bottom: #{$value}; } | ||
| } | ||
| } | ||
| } @else { | ||
| // Für xs (0px) Breakpoint - ohne Media Query | ||
| // Responsive Margin Auto (für xs Breakpoint) | ||
| .kern-m-auto-#{$breakpoint} { margin: auto; } | ||
| .kern-mt-auto-#{$breakpoint} { margin-top: auto; } | ||
| .kern-mr-auto-#{$breakpoint} { margin-right: auto; } | ||
| .kern-mb-auto-#{$breakpoint} { margin-bottom: auto; } | ||
| .kern-ml-auto-#{$breakpoint} { margin-left: auto; } | ||
| .kern-mx-auto-#{$breakpoint} { margin-left: auto; margin-right: auto; } | ||
| .kern-my-auto-#{$breakpoint} { margin-top: auto; margin-bottom: auto; } | ||
| @each $key, $value in maps.$spaces { | ||
| // Responsive Margin Utilities | ||
| .kern-m-#{$key}-#{$breakpoint} { margin: #{$value}; } | ||
| .kern-mt-#{$key}-#{$breakpoint} { margin-top: #{$value}; } | ||
| .kern-mr-#{$key}-#{$breakpoint} { margin-right: #{$value}; } | ||
| .kern-mb-#{$key}-#{$breakpoint} { margin-bottom: #{$value}; } | ||
| .kern-ml-#{$key}-#{$breakpoint} { margin-left: #{$value}; } | ||
| .kern-mx-#{$key}-#{$breakpoint} { margin-left: #{$value}; margin-right: #{$value}; } | ||
| .kern-my-#{$key}-#{$breakpoint} { margin-top: #{$value}; margin-bottom: #{$value}; } | ||
| // Responsive Padding Utilities | ||
| .kern-p-#{$key}-#{$breakpoint} { padding: #{$value}; } | ||
| .kern-pt-#{$key}-#{$breakpoint} { padding-top: #{$value}; } | ||
| .kern-pr-#{$key}-#{$breakpoint} { padding-right: #{$value}; } | ||
| .kern-pb-#{$key}-#{$breakpoint} { padding-bottom: #{$value}; } | ||
| .kern-pl-#{$key}-#{$breakpoint} { padding-left: #{$value}; } | ||
| .kern-px-#{$key}-#{$breakpoint} { padding-left: #{$value}; padding-right: #{$value}; } | ||
| .kern-py-#{$key}-#{$breakpoint} { padding-top: #{$value}; padding-bottom: #{$value}; } | ||
| } | ||
| } | ||
| } |
| /** | ||
| * @file _flex-grid-system.scss | ||
| * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team | ||
| * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team | ||
| * @date 17.04.2025 | ||
| * @modified 23.05.2025 | ||
| * @@VERSION@@ | ||
| * @brief Styles für die Flex-Grid-System. | ||
| * | ||
| * Diese Datei enthält die CSS-Regeln, um die Flex funktionalität mit Klassen zu steuern | ||
| */ | ||
| @use "sass:map"; | ||
| @use '../utilities/maps'; | ||
| // ============================================ | ||
| // I. VARIABLEN & KONFIGURATION | ||
| // ============================================ | ||
| $prefix: 'kern-'; | ||
| $gaps: ( | ||
| none: var(--kern-metric-space-none), | ||
| xxs: var(--kern-metric-space-2x-small), | ||
| xs: var(--kern-metric-space-x-small), | ||
| sm: var(--kern-metric-space-small), | ||
| md: var(--kern-metric-space-default), | ||
| lg: var(--kern-metric-space-large), | ||
| xl: var(--kern-metric-space-x-large), | ||
| ); | ||
| $breakpoints: ( | ||
| sm: 576px, | ||
| md: 768px, | ||
| lg: 992px, | ||
| xl: 1200px, | ||
| xxl: 1600px | ||
| ); | ||
| // Geteilte Maps für Flex/Grid (Justify, Align) | ||
| $layout-justification: ( | ||
| start: flex-start, | ||
| end: flex-end, | ||
| center: center, | ||
| between: space-between, | ||
| around: space-around, | ||
| evenly: space-evenly, | ||
| // stretch: stretch wurde entfernt, da ungültig für justify-content | ||
| ); | ||
| $layout-alignments: ( | ||
| start: flex-start, | ||
| end: flex-end, | ||
| center: center, | ||
| stretch: stretch, | ||
| baseline: baseline, | ||
| ); | ||
| $flex-directions: ( | ||
| row: row, | ||
| col: column, | ||
| row-reverse: row-reverse, | ||
| col-reverse: column-reverse, | ||
| ); | ||
| $flex-wrap-options: ( | ||
| wrap: wrap, | ||
| nowrap: nowrap, | ||
| wrap-reverse: wrap-reverse, | ||
| ); | ||
| // MAXIMALE DEFINITIONEN FÜR GRID-TEMPLATES | ||
| $max-grid-cols: 12; | ||
| $max-grid-rows: 6; | ||
| // AUTO-GRÖSSEN FÜR GRID | ||
| $grid-auto-sizes: ( | ||
| auto: auto, | ||
| min: min-content, | ||
| max: max-content, | ||
| fr: minmax(0, 1fr) | ||
| ); | ||
| // Display Utilities | ||
| $display-types: ( | ||
| block: block, | ||
| inline-block: inline-block, | ||
| inline: inline, | ||
| hidden: none, | ||
| ); | ||
| // Overflow Utilities | ||
| $overflow-types: ( | ||
| auto: auto, | ||
| hidden: hidden, | ||
| visible: visible, | ||
| scroll: scroll, | ||
| ); | ||
| // ============================================ | ||
| // II. MIXINS | ||
| // ============================================ | ||
| // Mixin für Media Queries (Mobile First) | ||
| @mixin respond-to($breakpoint) { | ||
| @if map.has-key($breakpoints, $breakpoint) { | ||
| @media (min-width: map.get($breakpoints, $breakpoint)) { | ||
| @content; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Generiert ALLE Container-Eigenschaften (Flex, Grid, Gap, Justify, Align-Items). | ||
| * Schema: kern-[Eigenschaft]-[Wert][-[BP]] | ||
| */ | ||
| @mixin generate-container-classes($suffix: '') { | ||
| // Display | ||
| .#{$prefix}flex#{$suffix} { display: flex; } | ||
| .#{$prefix}inline-flex#{$suffix} { display: inline-flex; } | ||
| .#{$prefix}grid#{$suffix} { | ||
| display: grid; | ||
| grid-template-columns: repeat(#{$max-grid-cols}, minmax(0, 1fr)); // Default $max-grid-cols = 12 | ||
| // gap: map.get($gaps, lg); | ||
| } | ||
| .#{$prefix}inline-grid#{$suffix} { display: inline-grid; } | ||
| // Additional Display Types | ||
| @each $key, $value in $display-types { | ||
| .#{$prefix}#{$key}#{$suffix} { display: $value; } | ||
| } | ||
| // Flex Direction & Wrap | ||
| @each $key, $value in $flex-directions { | ||
| .#{$prefix}flex-#{$key}#{$suffix} { flex-direction: $value; } | ||
| } | ||
| @each $key, $value in $flex-wrap-options { | ||
| .#{$prefix}flex-#{$key}#{$suffix} { flex-wrap: $value; } | ||
| } | ||
| // Flex Order | ||
| @for $i from 0 through 12 { | ||
| .#{$prefix}order-#{$i}#{$suffix} { order: $i; } | ||
| } | ||
| .#{$prefix}order-first#{$suffix} { order: -9999; } | ||
| .#{$prefix}order-last#{$suffix} { order: 9999; } | ||
| // Geteilte Alignment (Justify, Items, Content) | ||
| @each $key, $value in $layout-justification { | ||
| .#{$prefix}justify-content-#{$key}#{$suffix} { justify-content: $value; } | ||
| .#{$prefix}align-content-#{$key}#{$suffix} { align-content: $value; } | ||
| } | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}align-items-#{$key}#{$suffix} { align-items: $value; } | ||
| } | ||
| // Justify Items (für Grid) | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}justify-items-#{$key}#{$suffix} { justify-items: $value; } | ||
| } | ||
| // Place Items & Place Content (Shorthand für Grid) | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}place-items-#{$key}#{$suffix} { place-items: $value; } | ||
| } | ||
| @each $key, $value in $layout-justification { | ||
| .#{$prefix}place-content-#{$key}#{$suffix} { place-content: $value; } | ||
| } | ||
| // Grid Templates | ||
| @for $i from 1 through $max-grid-cols { | ||
| .#{$prefix}grid-cols-#{$i}#{$suffix} { grid-template-columns: repeat($i, minmax(0, 1fr)); } | ||
| } | ||
| @for $i from 1 through $max-grid-rows { | ||
| .#{$prefix}grid-rows-#{$i}#{$suffix} { grid-template-rows: repeat($i, minmax(0, 1fr)); } | ||
| } | ||
| .#{$prefix}grid-cols-none#{$suffix} { grid-template-columns: none; } | ||
| .#{$prefix}grid-rows-none#{$suffix} { grid-template-rows: none; } | ||
| // Grid Auto Flow & Auto Tracks | ||
| .#{$prefix}grid-flow-row#{$suffix} { grid-auto-flow: row; } | ||
| .#{$prefix}grid-flow-col#{$suffix} { grid-auto-flow: column; } | ||
| .#{$prefix}grid-flow-dense#{$suffix} { grid-auto-flow: dense; } | ||
| .#{$prefix}grid-flow-row-dense#{$suffix} { grid-auto-flow: row dense; } | ||
| .#{$prefix}grid-flow-col-dense#{$suffix} { grid-auto-flow: column dense; } | ||
| // Grid Auto Columns & Rows | ||
| @each $name, $value in $grid-auto-sizes { | ||
| .#{$prefix}auto-cols-#{$name}#{$suffix} { grid-auto-columns: #{$value}; } | ||
| .#{$prefix}auto-rows-#{$name}#{$suffix} { grid-auto-rows: #{$value}; } | ||
| } | ||
| // Geteilte Gaps | ||
| @each $name, $value in $gaps { | ||
| .#{$prefix}gap-#{$name}#{$suffix} { gap: #{$value}; } | ||
| .#{$prefix}gap-x-#{$name}#{$suffix} { column-gap: #{$value}; } | ||
| .#{$prefix}gap-y-#{$name}#{$suffix} { row-gap: #{$value}; } | ||
| } | ||
| // Overflow Utilities | ||
| @each $key, $value in $overflow-types { | ||
| .#{$prefix}overflow-#{$key}#{$suffix} { overflow: $value; } | ||
| .#{$prefix}overflow-x-#{$key}#{$suffix} { overflow-x: $value; } | ||
| .#{$prefix}overflow-y-#{$key}#{$suffix} { overflow-y: $value; } | ||
| } | ||
| } | ||
| /** | ||
| * Generiert ALLE Item-Eigenschaften (Col/Row Span/Start, Flex Grow/Shrink, Align Self). | ||
| * Schema: kern-[Eigenschaft]-[Wert][-[BP]] | ||
| */ | ||
| @mixin generate-item-classes($suffix: '') { | ||
| // Grid Col Span/Start/End | ||
| @for $i from 1 through $max-grid-cols { | ||
| .#{$prefix}col-#{$i}#{$suffix} { grid-column: auto / span $i; } | ||
| } | ||
| @for $i from 1 through ($max-grid-cols + 1) { | ||
| .#{$prefix}col-start-#{$i}#{$suffix} { grid-column-start: $i; } | ||
| .#{$prefix}col-end-#{$i}#{$suffix} { grid-column-end: $i; } | ||
| } | ||
| // Grid Col Special Values | ||
| .#{$prefix}col-full#{$suffix} { grid-column: 1 / -1; } | ||
| .#{$prefix}col-auto#{$suffix} { grid-column: auto; } | ||
| .#{$prefix}col-start-auto#{$suffix} { grid-column-start: auto; } | ||
| .#{$prefix}col-end-auto#{$suffix} { grid-column-end: auto; } | ||
| // Grid Row Span/Start/End | ||
| @for $i from 1 through $max-grid-rows { | ||
| .#{$prefix}row-#{$i}#{$suffix} { grid-row: auto / span $i; } | ||
| } | ||
| @for $i from 1 through ($max-grid-rows + 1) { | ||
| .#{$prefix}row-start-#{$i}#{$suffix} { grid-row-start: $i; } | ||
| .#{$prefix}row-end-#{$i}#{$suffix} { grid-row-end: $i; } | ||
| } | ||
| // Grid Row Special Values | ||
| .#{$prefix}row-full#{$suffix} { grid-row: 1 / -1; } | ||
| .#{$prefix}row-auto#{$suffix} { grid-row: auto; } | ||
| .#{$prefix}row-start-auto#{$suffix} { grid-row-start: auto; } | ||
| .#{$prefix}row-end-auto#{$suffix} { grid-row-end: auto; } | ||
| // 3. Flex Item Properties (Erweitert) | ||
| .#{$prefix}flex-1#{$suffix} { flex: 1 1 0%; } | ||
| .#{$prefix}flex-auto#{$suffix} { flex: 1 1 auto; } | ||
| .#{$prefix}flex-initial#{$suffix} { flex: 0 1 auto; } | ||
| .#{$prefix}flex-none#{$suffix} { flex: none; } | ||
| @for $i from 0 through $max-grid-cols { | ||
| .#{$prefix}flex-grow-#{$i}#{$suffix} { flex-grow: $i; } | ||
| } | ||
| .#{$prefix}flex-grow#{$suffix} { flex-grow: 1; } | ||
| .#{$prefix}flex-grow-0#{$suffix} { flex-grow: 0; } | ||
| .#{$prefix}flex-shrink#{$suffix} { flex-shrink: 1; } | ||
| .#{$prefix}flex-shrink-0#{$suffix} { flex-shrink: 0; } | ||
| // Flex Basis | ||
| .#{$prefix}basis-auto#{$suffix} { flex-basis: auto; } | ||
| .#{$prefix}basis-0#{$suffix} { flex-basis: 0; } | ||
| .#{$prefix}basis-full#{$suffix} { flex-basis: 100%; } | ||
| .#{$prefix}basis-1-2#{$suffix} { flex-basis: 50%; } | ||
| .#{$prefix}basis-1-3#{$suffix} { flex-basis: 33.333333%; } | ||
| .#{$prefix}basis-2-3#{$suffix} { flex-basis: 66.666667%; } | ||
| .#{$prefix}basis-1-4#{$suffix} { flex-basis: 25%; } | ||
| .#{$prefix}basis-3-4#{$suffix} { flex-basis: 75%; } | ||
| // // Optional für Flexbox-Spalten um die Prozentwerte erweitern | ||
| // @for $i from 1 through $max-grid-cols { | ||
| // .#{$prefix}flex-col-#{$i}#{$suffix} { | ||
| // flex: 0 0 calc(100% / #{$max-grid-cols} * #{$i}); | ||
| // } | ||
| // } | ||
| // 4. Align Self | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}align-self-#{$key}#{$suffix} { align-self: $value; } | ||
| } | ||
| .#{$prefix}align-self-auto#{$suffix} { align-self: auto; } | ||
| // Justify Self (für Grid) | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}justify-self-#{$key}#{$suffix} { justify-self: $value; } | ||
| } | ||
| .#{$prefix}justify-self-auto#{$suffix} { justify-self: auto; } | ||
| // Place Self (Shorthand für Grid) | ||
| @each $key, $value in $layout-alignments { | ||
| .#{$prefix}place-self-#{$key}#{$suffix} { place-self: $value; } | ||
| } | ||
| .#{$prefix}place-self-auto#{$suffix} { place-self: auto; } | ||
| } | ||
| /** | ||
| * Generiert zusätzliche Utility-Klassen | ||
| */ | ||
| @mixin generate-utility-classes($suffix: '') { | ||
| // Aspect Ratio (moderne Browser) | ||
| .#{$prefix}aspect-square#{$suffix} { aspect-ratio: 1 / 1; } | ||
| .#{$prefix}aspect-video#{$suffix} { aspect-ratio: 16 / 9; } | ||
| .#{$prefix}aspect-auto#{$suffix} { aspect-ratio: auto; } | ||
| // Min/Max Width | ||
| .#{$prefix}min-w-0#{$suffix} { min-width: 0; } | ||
| .#{$prefix}min-w-full#{$suffix} { min-width: 100%; } | ||
| .#{$prefix}max-w-full#{$suffix} { max-width: 100%; } | ||
| .#{$prefix}max-w-none#{$suffix} { max-width: none; } | ||
| // Min/Max Height | ||
| .#{$prefix}min-h-0#{$suffix} { min-height: 0; } | ||
| .#{$prefix}min-h-full#{$suffix} { min-height: 100%; } | ||
| .#{$prefix}min-h-screen#{$suffix} { min-height: 100vh; } | ||
| .#{$prefix}max-h-full#{$suffix} { max-height: 100%; } | ||
| .#{$prefix}max-h-screen#{$suffix} { max-height: 100vh; } | ||
| // Width & Height | ||
| .#{$prefix}w-full#{$suffix} { width: 100%; } | ||
| .#{$prefix}w-auto#{$suffix} { width: auto; } | ||
| .#{$prefix}w-screen#{$suffix} { width: 100vw; } | ||
| .#{$prefix}h-full#{$suffix} { height: 100%; } | ||
| .#{$prefix}h-auto#{$suffix} { height: auto; } | ||
| .#{$prefix}h-screen#{$suffix} { height: 100vh; } | ||
| } | ||
| // Defaukt Stack | ||
| .kern-stack { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: map.get(maps.$spaces, md); | ||
| } | ||
| @mixin generate-stack-classes($suffix: '') { | ||
| @each $name, $value in maps.$spaces { | ||
| @if $name { | ||
| .#{$prefix}stack-#{$name}#{$suffix} { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: $value; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| // ============================================ | ||
| // III. GENERIERUNG (MOBILE FIRST) | ||
| // ============================================ | ||
| // 1. Mobile First Basis-Klassen (Suffix: '') | ||
| @include generate-container-classes(''); | ||
| @include generate-item-classes(''); | ||
| @include generate-utility-classes(''); | ||
| @include generate-stack-classes(''); | ||
| // 2. Responsive Klassen (Suffix: -sm, -md, etc.) | ||
| @each $key, $value in $breakpoints { | ||
| @include respond-to($key) { | ||
| @include generate-container-classes('-#{$key}'); | ||
| @include generate-item-classes('-#{$key}'); | ||
| @include generate-utility-classes('-#{$key}'); | ||
| @include generate-stack-classes('-#{$key}'); | ||
| } | ||
| } | ||
| // Fixes for old grid | ||
| .kern-container-fluid, .kern-container { | ||
| &:has(.kern-grid) { | ||
| padding:0; | ||
| } | ||
| } |
+20
-0
@@ -0,1 +1,21 @@ | ||
| # [2.5.0](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.4.0...v2.5.0) (2026-03-16) | ||
| ### Bug Fixes | ||
| * fix the positioning of the legend in fieldset for safari [#200](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/200) ([578809d](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/578809d5b6ac9d621bba80253d34e63c6e29f018)) | ||
| * rename [secure] semantic token for loader [#233](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/233) ([adf96ed](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/adf96ed94b783d75b9242aacea9dca58760804a6)) | ||
| * set fieldset width to min-width auto to prevent overflow [#199](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/199) ([3cd7275](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/3cd7275390e0ea7832b8e7c206e2d355fee046a4)) | ||
| * **sr-only-mobile:** change max-width from 767px to 575px ([7b60e9a](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/7b60e9a05e8a1688afab1777e697086627bdaaf9)) | ||
| * **Table:** numerical table entries should not wrap [#193](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/193) ([cb4156d](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/cb4156dc23ed887637cc40a9ee1ee674627fc83b)) | ||
| * **Tokens:** correct --kern-color-layout-background-inverted variable [#205](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/205) ([b711415](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/b711415ea7d0c9744ff47faa918fdf57048a134c)) | ||
| ### Features | ||
| * **Badge:** add a small badge variant [#154](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/154) ([4259ce2](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/4259ce283a8abca3ecc1ac77107778b3e2ef09ba)) | ||
| * **Button:** add new small button, with a sufficient clickable area for accessibility [#153](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/153) ([116b4c3](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/116b4c3cda85e2e7d88e5140f61d0b8793efe2e5)) | ||
| * **InputGroup:** add input group component [#197](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/197) ([5c4b5c6](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/5c4b5c6a9cb597f50d09f05b1b5d4d770fae0cc4)) | ||
| * **Styles:** add utility classes for spacing, flexbox, and css grid [#173](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/173) [#196](https://gitlab.opencode.de/kern-ux/kern-ux-plain/issues/196) ([d204a81](https://gitlab.opencode.de/kern-ux/kern-ux-plain/commit/d204a81debca64eb7c4886d8a01b1788e6bd492f)) | ||
| # [2.4.0](https://gitlab.opencode.de/kern-ux/kern-ux-plain/compare/v2.3.2...v2.4.0) (2025-11-21) | ||
@@ -2,0 +22,0 @@ |
+14
-3
| { | ||
| "name": "@kern-ux/native", | ||
| "version": "2.4.0", | ||
| "description": "Das Native Package beinhaltet alle zur Komponenten-Bibliothek gehörenden Styles.", | ||
| "version": "2.5.0", | ||
| "description": "Native Styles und Komponenten-Bibliothek für das KERN-UX Design System. Beinhaltet CSS, Fonts und KERN-Komponenten.", | ||
| "author": "Kern-UX", | ||
| "license": "EUPL-1.2", | ||
| "type": "module", | ||
| "homepage": "https://kern-ux.de", | ||
| "bugs": { | ||
| "url": "https://gitlab.opencode.de/kern-ux/kern-ux-plain/-/issues" | ||
| }, | ||
| "repository": { | ||
@@ -26,3 +30,10 @@ "type": "git", | ||
| ], | ||
| "keywords": [], | ||
| "keywords": [ | ||
| "kern-ux", | ||
| "design-system", | ||
| "native", | ||
| "css-library", | ||
| "dachmarke", | ||
| "ux" | ||
| ], | ||
| "scripts": { | ||
@@ -29,0 +40,0 @@ "start": "npm run dev", |
@@ -8,3 +8,3 @@ @use "../utilities/mixins"; | ||
| * @date 16.12.2024 | ||
| * @modified 30.07.2025 | ||
| * @modified 16.12.2025 | ||
| * @@VERSION@@ | ||
@@ -66,6 +66,3 @@ * @brief Styles für die Alert-Komponente. | ||
| .kern-icon { | ||
| width: var(--kern-component-alert-icon-size, 32px); | ||
| min-width: var(--kern-component-alert-icon-size, 32px); | ||
| height: var(--kern-component-alert-icon-size, 32px); | ||
| min-height: var(--kern-component-alert-icon-size, 32px); | ||
| @include mixins.icon-large; | ||
| } | ||
@@ -72,0 +69,0 @@ } |
@@ -1,3 +0,1 @@ | ||
| @use "../utilities/mixins"; | ||
| /** | ||
@@ -8,3 +6,3 @@ * @file _badge.scss | ||
| * @date 16.12.2024 | ||
| * @modified 30.07.2025 | ||
| * @modified 13.01.2026 | ||
| * @@VERSION@@ | ||
@@ -19,2 +17,4 @@ * @brief Styles für die Badge-Komponente. | ||
| @use "../utilities/mixins"; | ||
| .kern-badge { | ||
@@ -28,2 +28,4 @@ display: inline-flex; | ||
| .kern-label { | ||
| // @include mixins.label-default; | ||
| @include mixins.label-small; | ||
| padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); | ||
@@ -33,4 +35,3 @@ } | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| @include mixins.icon-default; | ||
| } | ||
@@ -46,2 +47,3 @@ | ||
| } | ||
| } | ||
@@ -79,2 +81,33 @@ | ||
| &--small { | ||
| padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| border: none; | ||
| &.kern-badge--info { | ||
| box-shadow: inset 0 0 0 1px var(--kern-color-feedback-info, #006490); | ||
| } | ||
| &.kern-badge--success { | ||
| box-shadow: inset 0 0 0 1px var(--kern-color-feedback-success, #006B51); | ||
| } | ||
| &.kern-badge--warning { | ||
| box-shadow: inset 0 0 0 1px var(--kern-color-feedback-warning, #8A4F00); | ||
| } | ||
| &.kern-badge--danger { | ||
| box-shadow: inset 0 0 0 1px var(--kern-color-feedback-danger, #BD0F09); | ||
| } | ||
| .kern-label { | ||
| @include mixins.label-small; | ||
| padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px); | ||
| } | ||
| .kern-icon { | ||
| @include mixins.icon-small; | ||
| } | ||
| } | ||
| } |
@@ -0,2 +1,4 @@ | ||
| @use "sass:map"; | ||
| @use "../utilities/mixins"; | ||
| @use '../utilities/maps'; | ||
@@ -8,3 +10,3 @@ /** | ||
| * @date 16.12.2024 | ||
| * @modified 30.09.2025 | ||
| * @modified 08.01.2026 | ||
| * @@VERSION@@ | ||
@@ -60,2 +62,19 @@ * @brief Styles für die Button-Komponente. | ||
| // // Tooltip | ||
| // // In HTML Button add data-tooltip="VW kopieren" | ||
| // &:hover::after { | ||
| // content: attr(data-tooltip); | ||
| // position: absolute; | ||
| // bottom: 125%; | ||
| // left: 50%; | ||
| // transform: translateX(-50%); | ||
| // background-color: var(--kern-color-layout-text-default, #171A2B); | ||
| // color: var(--kern-color-action-on-default, #fff); | ||
| // padding: var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-small, 8px); | ||
| // border-radius: var(--kern-metric-border-radius-default, 4px); | ||
| // white-space: nowrap; | ||
| // font-size: var(--kern-font-size-12, 0.75rem); | ||
| // z-index: 100000; | ||
| // } | ||
| &:has(.kern-sr-only) { | ||
@@ -66,3 +85,3 @@ width: var(--kern-metric-dimension-x-large, 48px); | ||
| &:has(.kern-sr-only-mobile) { | ||
| @media (max-width: 767px) { | ||
| @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) { | ||
| width: var(--kern-metric-dimension-x-large, 48px); | ||
@@ -150,2 +169,4 @@ } | ||
| text-decoration: underline; | ||
| text-decoration-skip-ink: none; | ||
| text-underline-offset: var(--kern-3, 3px); | ||
| } | ||
@@ -173,2 +194,72 @@ | ||
| } | ||
| &--x-small { | ||
| position: relative; | ||
| min-height: var(--kern-metric-dimension-large, 32px); | ||
| padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px); | ||
| margin-top: var(--kern-metric-space-small, 8px); | ||
| margin-bottom: var(--kern-metric-space-small, 8px); | ||
| .kern-label { | ||
| font-size: var(--kern-typography-font-size-static-small, 16px); | ||
| padding: var(--kern-metric-space-none, 0) var(--kern-metric-space-small, 8px) var(--kern-metric-space-none, 0) var(--kern-metric-space-x-small, 4px); | ||
| } | ||
| .kern-icon { | ||
| @include mixins.icon-small; | ||
| } | ||
| // Klickflächen vergrössern | ||
| &::before { | ||
| content: ""; | ||
| display: block; | ||
| position: absolute; | ||
| top: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| right: var(--kern-metric-space-none, 0); | ||
| bottom: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| left: var(--kern-metric-space-none, 0); | ||
| background: transparent; | ||
| } | ||
| &:has(.kern-sr-only) { | ||
| width: var(--kern-metric-dimension-large, 32px); | ||
| margin: var(--kern-metric-space-small, 8px); | ||
| &::before { | ||
| right: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| left: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| } | ||
| } | ||
| &:has(.kern-sr-only-mobile) { | ||
| @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) { | ||
| width: var(--kern-metric-dimension-large, 32px); | ||
| margin: var(--kern-metric-space-small, 8px); | ||
| &::before { | ||
| right: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| left: calc(var(--kern-metric-space-small, 8px) * -1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .kern-btn-wrapper { | ||
| display: flex; | ||
| gap: var(--kern-metric-space-small, 8px); | ||
| flex-wrap: wrap; | ||
| &:has(.kern-btn--x-small) { | ||
| &:has(.kern-sr-only) { | ||
| gap: var(--kern-metric-space-none, 0px); | ||
| } | ||
| &:has(.kern-sr-only-mobile) { | ||
| @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) { | ||
| gap: var(--kern-metric-space-none, 0px); | ||
| } | ||
| } | ||
| } | ||
| } |
@@ -110,8 +110,7 @@ @use "../utilities/mixins"; | ||
| text-decoration-style: solid; | ||
| text-decoration-skip-ink: auto; | ||
| text-decoration-thickness: var(--kern-1, 1px); | ||
| /* 4.762% */ | ||
| text-underline-offset: var(--kern-2, 2px); | ||
| text-decoration-skip-ink: none; | ||
| text-underline-offset: var(--kern-3, 3px); | ||
| /* 9.524% */ | ||
| text-underline-position: from-font; | ||
@@ -118,0 +117,0 @@ &:after { |
@@ -8,3 +8,3 @@ @use "../utilities/mixins"; | ||
| * @date 16.12.2024 | ||
| * @modified 20.10.2025 | ||
| * @modified 16.12.2025 | ||
| * @@VERSION@@ | ||
@@ -141,6 +141,3 @@ * @brief Styles für die Checkbox und Radio Komponente. | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| min-width: var(--kern-metric-dimension-default, 24px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| @include mixins.icon-default; | ||
| } | ||
@@ -147,0 +144,0 @@ } |
@@ -60,3 +60,3 @@ /** | ||
| @media (max-width: 576px) { | ||
| @media (max-width: map.get(maps.$grid-breakpoints, sm)) { | ||
| flex-direction: column; | ||
@@ -63,0 +63,0 @@ } |
@@ -8,3 +8,3 @@ @use "../utilities/mixins"; | ||
| * @date 16.12.2024 | ||
| * @modified 17.07.2025 | ||
| * @modified 16.12.2025 | ||
| * @@VERSION@@ | ||
@@ -20,6 +20,3 @@ * @brief Styles für die Fieldset Komponenten. | ||
| @include mixins.normalize; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: var(--kern-metric-space-none, 0px); | ||
| min-width: auto; | ||
@@ -60,2 +57,3 @@ &--error { | ||
| .kern-hint { | ||
| clear: left; | ||
| margin-bottom: var(--kern-metric-space-small, 8px); | ||
@@ -65,2 +63,3 @@ } | ||
| &__body { | ||
| clear: left; | ||
| width: 100%; | ||
@@ -80,8 +79,5 @@ display: flex; | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| min-width: var(--kern-metric-dimension-default, 24px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| @include mixins.icon-default; | ||
| } | ||
| } | ||
| } |
@@ -6,3 +6,3 @@ /** | ||
| * @date 16.12.2024 | ||
| * @modified 30.07.2025 | ||
| * @modified 16.12.2025 | ||
| * @@VERSION@@ | ||
@@ -24,6 +24,3 @@ * @brief Styles für die Icon Komponente. | ||
| display: inline-block; | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| min-width: var(--kern-metric-dimension-default, 24px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| @include mixins.icon-default; | ||
@@ -30,0 +27,0 @@ @each $name, $size in icons.$sizes { |
@@ -8,3 +8,3 @@ @use "../utilities/mixins"; | ||
| * @date 16.12.2024 | ||
| * @modified 30.09.2025 | ||
| * @modified 16.12.2025 | ||
| * @@VERSION@@ | ||
@@ -63,2 +63,3 @@ * @brief Styles für die Form Input Komponenten. | ||
| align-self: stretch; | ||
| width: 100%; | ||
@@ -207,6 +208,3 @@ border-radius: var(--kern-metric-border-radius-small, 2px); | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| min-width: var(--kern-metric-dimension-default, 24px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| @include mixins.icon-default; | ||
| } | ||
@@ -213,0 +211,0 @@ |
@@ -17,3 +17,3 @@ /** | ||
| box-sizing: border-box; | ||
| border-width: 10px; | ||
| border-width: var(--kern-10, 10px);; | ||
| border-style: solid; | ||
@@ -37,3 +37,3 @@ border-color: var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader-background) var(--kern-color-feedback-loader); | ||
| content: ''; | ||
| height: var(--semantic-size-xs, 10px); | ||
| height: var(--kern-10, 10px); | ||
| background: var(--kern-color-feedback-loader); | ||
@@ -40,0 +40,0 @@ position: absolute; |
@@ -33,2 +33,9 @@ @use "../utilities/mixins"; | ||
| .kern-table__cell { | ||
| &--action { | ||
| padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); | ||
| text-wrap: nowrap; | ||
| } | ||
| } | ||
| .kern-table__header { | ||
@@ -67,5 +74,10 @@ font-weight: var(--kern-typography-font-weight-semi-bold, 600); | ||
| padding: calc(var(--kern-metric-baseline-body-default-padding-top, 6px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-default-padding-bottom, 2px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); | ||
| &--numeric { | ||
| text-align: right; | ||
| text-wrap: nowrap; | ||
| } | ||
| &--action { | ||
| text-align: right; | ||
| } | ||
| @media (forced-colors: active) { | ||
@@ -76,2 +88,10 @@ border-bottom: 1px solid transparent; | ||
| &__cell { | ||
| &--action { | ||
| padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)); | ||
| text-wrap: nowrap; | ||
| } | ||
| } | ||
| &__header { | ||
@@ -94,4 +114,4 @@ font-weight: var(--kern-typography-font-weight-semi-bold, 600); | ||
| // TODO: eine bessere Lösung für Schatten finden! | ||
| // Scroling shadow | ||
| // // TODO: eine bessere Lösung für Schatten finden! | ||
| // // Scroling shadow | ||
| // background: | ||
@@ -98,0 +118,0 @@ // linear-gradient(90deg, white 30%, rgba(255,255,255,0)), |
@@ -0,3 +1,12 @@ | ||
| @use "sass:map"; | ||
| @use '../core/utilities/mixins'; | ||
| @use '../core/utilities/maps'; | ||
| *, | ||
| *:before, | ||
| *:after { | ||
| // Verhindert, dass Padding/Border die Breite (z.B. w-full) vergrößern | ||
| box-sizing: border-box; | ||
| } | ||
| html { | ||
@@ -7,16 +16,22 @@ @include mixins.normalize; | ||
| -webkit-text-size-adjust: 100%; | ||
| /* 2 */ | ||
| box-sizing: border-box; | ||
| // Verhindert Layout-Sprünge beim Einblenden von Scrollbalken | ||
| scrollbar-gutter: stable; | ||
| } | ||
| *, | ||
| *:before, | ||
| *:after { | ||
| box-sizing: inherit; | ||
| } | ||
| body { | ||
| background-color: var(--kern-color-layout-background-default); | ||
| // Standard-Textausrichtung für Flex-Container-Inhalte | ||
| // text-rendering: optimizeLegibility; | ||
| // -webkit-font-smoothing: antialiased; | ||
| } | ||
| // Bilder reagieren standardmäßig auf deine Grid-Spalten | ||
| img, picture, video, canvas, svg { | ||
| display: block; | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
| // Theme | ||
| [data-kern-theme="dark"], | ||
@@ -64,3 +79,3 @@ .kern-dark, | ||
| @media (max-width: 767px) { | ||
| @media (max-width: calc(map.get(maps.$grid-breakpoints, sm) - 1px)) { | ||
| @include mixins.kern-sr-only; | ||
@@ -67,0 +82,0 @@ } |
@@ -19,2 +19,3 @@ // KERN Base | ||
| @use "components/input"; | ||
| @use "components/input-group"; | ||
| @use "components/kopfzeile"; | ||
@@ -41,4 +42,7 @@ @use "components/loader"; | ||
| @use "layout/grid"; | ||
| @use "layout/utilities"; | ||
| @use "layout/spacing"; | ||
| // @use "layout/stack"; | ||
| // KERN Theme | ||
| @use 'tokens/index'; // Dachmarke Theme 2.0 |
@@ -33,8 +33,8 @@ /** | ||
| // KERN Columns | ||
| [class^="kern-col"], | ||
| [class*="kern-col"] { | ||
| padding: math.div($grid-gutter, 2); | ||
| box-sizing: border-box; | ||
| } | ||
| // // KERN Columns | ||
| // [class^="kern-col"], | ||
| // [class*="kern-col"] { | ||
| // padding: math.div($grid-gutter, 2); | ||
| // box-sizing: border-box; | ||
| // } | ||
@@ -47,5 +47,24 @@ | ||
| max-width: map.get(maps.$grid-breakpoints, "xxl"); | ||
| // KERN Columns | ||
| .kern-row { | ||
| [class^="kern-col"], | ||
| [class*="kern-col"] { | ||
| padding: math.div($grid-gutter, 2); | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| } | ||
| &-container-fluid { | ||
| @extend %container-base; | ||
| // KERN Columns | ||
| .kern-row { | ||
| [class^="kern-col"], | ||
| [class*="kern-col"] { | ||
| padding: math.div($grid-gutter, 2); | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
| } | ||
@@ -82,48 +101,2 @@ | ||
| // Alignment | ||
| // All items | ||
| &-align-items { | ||
| &-start { | ||
| align-items: flex-start !important; | ||
| } | ||
| &-center { | ||
| align-items: center !important; | ||
| } | ||
| &-end { | ||
| align-items: flex-end !important; | ||
| } | ||
| } | ||
| // Item self | ||
| &-align-self { | ||
| &-start { | ||
| align-self: flex-start !important; | ||
| } | ||
| &-center { | ||
| align-self: center !important; | ||
| } | ||
| &-end { | ||
| align-self: flex-end !important; | ||
| } | ||
| } | ||
| // Horizontal alignment | ||
| &-justify-content { | ||
| &-start { | ||
| justify-content: flex-start !important; | ||
| } | ||
| &-center { | ||
| justify-content: center !important; | ||
| } | ||
| &-end { | ||
| justify-content: flex-end !important; | ||
| } | ||
| &-around { | ||
| justify-content: space-around !important; | ||
| } | ||
| &-between { | ||
| justify-content: space-between !important; | ||
| } | ||
| &-evenly { | ||
| justify-content: space-evenly !important; | ||
| } | ||
| } | ||
| } | ||
@@ -133,9 +106,12 @@ | ||
| @for $i from 1 through $grid-columns { | ||
| .kern-col-#{$i} { | ||
| flex: 0 0 auto; | ||
| width: (math.div(100%, $grid-columns) * $i); | ||
| .kern-row { | ||
| .kern-col-#{$i} { | ||
| flex: 0 0 auto; | ||
| width: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| .kern-col-offset-#{$i} { | ||
| margin-left: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| } | ||
| .kern-col-offset-#{$i} { | ||
| margin-left: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| } | ||
@@ -152,13 +128,15 @@ | ||
| .kern-col-#{$name}-offset-0 { | ||
| margin-left: 0; | ||
| } | ||
| .kern-row { | ||
| .kern-col-#{$name}-offset-0 { | ||
| margin-left: 0; | ||
| } | ||
| @for $i from 1 through $grid-columns { | ||
| .kern-col-#{$name}-#{$i} { | ||
| width: (math.div(100%, $grid-columns) * $i); | ||
| @for $i from 1 through $grid-columns { | ||
| .kern-col-#{$name}-#{$i} { | ||
| width: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| .kern-col-#{$name}-offset-#{$i} { | ||
| margin-left: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| } | ||
| .kern-col-#{$name}-offset-#{$i} { | ||
| margin-left: (math.div(100%, $grid-columns) * $i); | ||
| } | ||
| } | ||
@@ -165,0 +143,0 @@ } |
@@ -69,3 +69,3 @@ /** | ||
| --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue)); | ||
| --kern-color-layout-background-overlay: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity // INFO: Excluded from Theming | ||
@@ -140,3 +140,3 @@ | ||
| --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); | ||
| --kern-color-layout-background-overlay: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue) / var(--kern-color-action-state-opacity-overlay)); // opacity | ||
@@ -143,0 +143,0 @@ |
@@ -10,6 +10,5 @@ @use "../utilities/mixins"; | ||
| text-decoration-style: solid; | ||
| text-decoration-skip-ink: auto; | ||
| text-decoration-skip-ink: none; | ||
| text-decoration-thickness: var(--kern-1, 1px); /* 5.556% */ | ||
| text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */ | ||
| text-underline-position: from-font; | ||
| text-underline-offset: var(--kern-3, 3px); | ||
@@ -31,6 +30,5 @@ display: inline-flex; | ||
| text-decoration-style: solid; | ||
| text-decoration-skip-ink: auto; | ||
| text-decoration-skip-ink: none; | ||
| text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */ | ||
| text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */ | ||
| text-underline-position: from-font; | ||
| text-underline-offset: var(--kern-3, 3px); | ||
| } | ||
@@ -60,3 +58,3 @@ } | ||
| &--small { | ||
| &--x-small { | ||
| gap: var(--kern-metric-space-2x-small, 2px); | ||
@@ -67,6 +65,3 @@ @include mixins.body-small; | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-small, 20px); | ||
| height: var(--kern-metric-dimension-small, 20px); | ||
| min-width: var(--kern-metric-dimension-small, 20px); | ||
| min-height: var(--kern-metric-dimension-small, 20px); | ||
| @include mixins.icon-small; | ||
| } | ||
@@ -73,0 +68,0 @@ } |
@@ -24,6 +24,3 @@ @use "../utilities/mixins"; | ||
| .kern-icon { | ||
| width: var(--kern-metric-dimension-small, 20px); | ||
| height: var(--kern-metric-dimension-small, 20px); | ||
| min-width: var(--kern-metric-dimension-small, 20px); | ||
| min-height: var(--kern-metric-dimension-small, 20px); | ||
| @include mixins.icon-small; | ||
| } | ||
@@ -58,2 +55,3 @@ } | ||
| } | ||
| } |
@@ -17,2 +17,3 @@ /** | ||
| $account-circle: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm146.5-204.5Q340-521 340-580t40.5-99.5Q421-720 480-720t99.5 40.5Q620-639 620-580t-40.5 99.5Q539-440 480-440t-99.5-40.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>'); | ||
| $add: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z"/></svg>'); | ||
@@ -32,2 +33,3 @@ $arrow-down: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>'); | ||
| $danger: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-361q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Z"/></svg>'); | ||
| $dehaze: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M120-680v-80h720v80H120Zm0 480v-80h720v80H120Zm0-240v-80h720v80H120Z"/></svg>'); | ||
| $delete: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280Zm160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280Z"/></svg>'); | ||
@@ -44,2 +46,3 @@ $download: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800q17 0 28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5ZM240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360q17 0 28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360q17 0 28.5 11.5T800-320v80q0 33-23.5 56.5T720-160H240Z"/></svg>'); | ||
| $keyboard-double-arrow-right: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M383-480 228-636q-11-11-11.5-27.5T228-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L284-268q-11 11-27.5 11.5T228-268q-11-11-11-28t11-28l155-156Zm264 0L492-636q-11-11-11.5-27.5T492-692q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L548-268q-11 11-27.5 11.5T492-268q-11-11-11-28t11-28l155-156Z"/></svg>'); | ||
| $language: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5ZM480-162q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>'); | ||
| $logout: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z"/></svg>'); | ||
@@ -63,2 +66,3 @@ $mail: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" height="" viewBox="0 -960 960 960" width="" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-287q5 0 10.5-1.5T501-453l283-177q8-5 12-12.5t4-16.5q0-20-17-30t-35 1L480-520 212-688q-18-11-35-.5T160-659q0 10 4 17.5t12 11.5l283 177q5 3 10.5 4.5T480-447Z"/></svg>'); | ||
| $icons: ( | ||
| "account-circle": $account-circle, | ||
| "add": $add, | ||
@@ -78,2 +82,3 @@ "arrow-down": $arrow-down, | ||
| "danger": $danger, | ||
| "dehaze": $dehaze, | ||
| "delete": $delete, | ||
@@ -91,2 +96,3 @@ "download": $download, | ||
| "logout": $logout, | ||
| "language": $language, | ||
| "mail": $mail, | ||
@@ -93,0 +99,0 @@ "more-vert": $more-vert, |
@@ -16,2 +16,12 @@ $grid-breakpoints: ( | ||
| xxl: 1536px | ||
| ); | ||
| $spaces: ( | ||
| none: var(--kern-metric-space-none), | ||
| xxs: var(--kern-metric-space-2x-small), | ||
| xs: var(--kern-metric-space-x-small), | ||
| sm: var(--kern-metric-space-small), | ||
| md: var(--kern-metric-space-default), | ||
| lg: var(--kern-metric-space-large), | ||
| xl: var(--kern-metric-space-x-large), | ||
| ); |
| /** | ||
| * @file _mixims.scss | ||
| * @file _mixins.scss | ||
| * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team | ||
@@ -14,2 +14,4 @@ * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team | ||
| @use '../utilities/icons'; | ||
| // Text Base | ||
@@ -195,3 +197,33 @@ @mixin text-base { | ||
| // Icons | ||
| @mixin icon-small { | ||
| width: var(--kern-metric-dimension-small, 20px); | ||
| height: var(--kern-metric-dimension-small, 20px); | ||
| min-width: var(--kern-metric-dimension-small, 20px); | ||
| min-height: var(--kern-metric-dimension-small, 20px); | ||
| } | ||
| @mixin icon-default { | ||
| width: var(--kern-metric-dimension-default, 24px); | ||
| height: var(--kern-metric-dimension-default, 24px); | ||
| min-width: var(--kern-metric-dimension-default, 24px); | ||
| min-height: var(--kern-metric-dimension-default, 24px); | ||
| } | ||
| @mixin icon-large { | ||
| width: var(--kern-metric-dimension-large, 32px); | ||
| height: var(--kern-metric-dimension-large, 32px); | ||
| min-width: var(--kern-metric-dimension-large, 32px); | ||
| min-height: var(--kern-metric-dimension-large, 32px); | ||
| } | ||
| @mixin icon-x-large { | ||
| width: var(--kern-metric-dimension-x-large, 48px); | ||
| height: var(--kern-metric-dimension-x-large, 48px); | ||
| min-width: var(--kern-metric-dimension-x-large, 48px); | ||
| min-height: var(--kern-metric-dimension-x-large, 48px); | ||
| } | ||
| @mixin kern-sr-only { | ||
@@ -198,0 +230,0 @@ width: 1px !important; |
@@ -58,3 +58,3 @@ /** | ||
| --kern-color-layout-background-hued: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue)); | ||
| } | ||
@@ -101,3 +101,3 @@ | ||
| --kern-color-layout-background-hued: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-black-lightness) var(--kern-black-chroma) var(--kern-black-hue)); | ||
| --kern-color-layout-background-inverted: oklch(var(--kern-white-lightness) var(--kern-white-chroma) var(--kern-white-hue)); | ||
| } | ||
@@ -104,0 +104,0 @@ |
| @use "../../core/index.scss"; | ||
| // @import "./theme"; // Diese Datei wird nicht verwendet, KERN Theme wird in core definiert | ||
| // @use "./theme"; // Diese Datei wird nicht verwendet, KERN Theme wird in core definiert |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Fixed alerts
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
6383435
5.46%- Number of package files
100
3.09%- Lines of code
15650
106.22%- Number of low maintenance alerts
0
-100%- Number of low quality alerts
0
-100%No dependency changes