diff --git a/source/_patterns/01-elements/_color-imports-temp/.gitignore b/source/_patterns/01-elements/_color-imports-temp/.gitignore new file mode 100644 index 00000000000..aebc411a9a2 --- /dev/null +++ b/source/_patterns/01-elements/_color-imports-temp/.gitignore @@ -0,0 +1 @@ +*.scss \ No newline at end of file diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index ae22fdb5356..4da0ae8eb7f 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -3,80 +3,87 @@ %form-element { border-radius: 4px; + border: none; color: $form-elements-color; - caret-color: $db-color-red-500; + // caret-color: $db-color-red-500; - --formElement---borderTopColor: var(--formElement---borderColor, transparent); - --formElement---borderRightColor: var( - --formElement---borderColor, - transparent - ); - --formElement---borderBottomColor: var( - --formElement---borderColor, - #{$form-elements-semitransparent-border-bottom-color} - ); - --formElement---borderLeftColor: var( - --formElement---borderColor, - transparent - ); + // --formElement---borderTopColor: var( + // --formElement---borderColor, + // transparent + // ); + // --formElement---borderRightColor: var( + // --formElement---borderColor, + // transparent + // ); + // --formElement---borderBottomColor: var( + // --formElement---borderColor, + // #{$form-elements-semitransparent-border-bottom-color} + // ); + // --formElement---borderLeftColor: var( + // --formElement---borderColor, + // transparent + // ); // Description styles & ~ .description { - font-size: to-rem($pxValue: 14); - color: $db-color-cool-gray-500; + // font-size: to-rem($pxValue: 14); + // color: $db-color-cool-gray-500; - padding: to-rem($pxValue: 6) to-rem($pxValue: 10); + padding: to-rem($pxValue: 6) 0.5rem; } } // ### Style variations // Semitransparent %form-element-semitransparent { - background-color: $form-elements-semitransparent-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-semitransparent-border-bottom-color}; + //background-color: $form-elements-semitransparent-background-color; + + @extend %db-bg-neutral-transparent-semi; + + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-semitransparent-border-bottom-color}; } // White %form-element-white { - background-color: $form-elements-white-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-white-border-bottom-color}; + // background-color: $form-elements-white-background-color; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-white-border-bottom-color}; } // Solid %form-element-solid { - background-color: $form-elements-solid-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-solid-border-bottom-color}; + // background-color: $form-elements-solid-background-color; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-solid-border-bottom-color}; } // Outline %form-element-outline { background-color: transparent; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - --formElement---borderColor: #{$form-elements-outline-border-color}; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // --formElement---borderColor: #{$form-elements-outline-border-color}; } diff --git a/source/_patterns/01-elements/_form-elements.variables.scss b/source/_patterns/01-elements/_form-elements.variables.scss index 1859f4293b7..f80541ab270 100644 --- a/source/_patterns/01-elements/_form-elements.variables.scss +++ b/source/_patterns/01-elements/_form-elements.variables.scss @@ -1,38 +1,36 @@ -$form-elements-color: $db-color-cool-gray-700 !default; +@import "_color-imports-temp/variables"; +@import "_color-imports-temp/color-classes"; +@import "_color-imports-temp/color-placeholder"; + +$form-elements-color: $db-colors-neutral-on-bg-enabled; $form-elements-border-radius: 4px !default; -$form-elements---borderTop: 1px solid var(--formElement---borderTopColor) !default; -$form-elements---borderRight: 1px solid var(--formElement---borderRightColor) !default; -$form-elements---borderBottom: 1px solid var(--formElement---borderBottomColor) !default; -$form-elements---borderLeft: 1px solid var(--formElement---borderLeftColor) !default; +// $form-elements---borderTop: 1px solid var(--formElement---borderTopColor) !default; +// $form-elements---borderRight: 1px solid var(--formElement---borderRightColor) !default; +// $form-elements---borderBottom: 1px solid var(--formElement---borderBottomColor) !default; +// $form-elements---borderLeft: 1px solid var(--formElement---borderLeftColor) !default; // ### Style variations ### // Semitransparent -$form-elements-semitransparent-background-color: rgba( - $db-color-cool-gray-700, - 0.05 -) !default; -$form-elements-semitransparent-border-bottom-color: rgba( - $db-color-cool-gray-700, - 0.5 -) !default; +// $form-elements-semitransparent-background-color: rgba(0, 0, 0, 0.04) !default; +// $form-elements-semitransparent-border-bottom-color: rgba( +// $db-color-cool-gray-700, +// 0.5 +// ) !default; -// White -$form-elements-white-background-color: $db-color-white !default; -$form-elements-white-border-bottom-color: rgba( - $db-color-cool-gray-700, - 0.5 -) !default; +// // White +// $form-elements-white-background-color: $db-color-white !default; +// $form-elements-white-border-bottom-color: rgba( +// $db-color-cool-gray-700, +// 0.5 +// ) !default; -// Solid -$form-elements-solid-background-color: $db-color-cool-gray-100 !default; -$form-elements-solid-border-bottom-color: rgba( - $db-color-cool-gray-700, - 0.5 -) !default; +// // Solid +// $form-elements-solid-background-color: $db-color-cool-gray-100 !default; +// $form-elements-solid-border-bottom-color: rgba(0, 0, 0, 0.04) !default; -// Outline -$form-elements-outline-border-color: rgba( - $db-color-cool-gray-700, - 0.25 -) !default; +// // Outline +// $form-elements-outline-border-color: rgba( +// $db-color-cool-gray-700, +// 0.25 +// ) !default; diff --git a/source/_patterns/01-elements/input/_input.variables.scss b/source/_patterns/01-elements/input/_input.variables.scss index 21c0a2e8078..f680bf0e0da 100644 --- a/source/_patterns/01-elements/input/_input.variables.scss +++ b/source/_patterns/01-elements/input/_input.variables.scss @@ -1,4 +1,155 @@ $icons-path: "../../../icons/" !default; @import "../../../css/helpers/functions"; -$input---color: $db-color-cool-gray-700 !default; +@import "../_color-imports-temp/variables"; +@import "../_color-imports-temp/color-classes"; +@import "../_color-imports-temp/color-placeholder"; + +@import "../../00-base/icons/icons.variables"; +@import "../../00-base/icons/icons.helpers"; + +$input---color: $db-colors-secondary-enabled !default; + +$db-input-sizes: ( + "xs": 24px, + "s": 32px, + "m": 40px, + "l": 48px, + "xl": 64px +); + +$db-input-font-sizes: ( + "xs": 12, + "s": 12, + "m": 14, + "l": 16, + "xl": 20 +); + +$db-input-lineheight: ( + "xs": + to-rem( + $pxValue: 18 + ), + "s": + to-rem( + $pxValue: 18 + ), + "m": + to-rem( + $pxValue: 21 + ), + "l": + to-rem( + $pxValue: 24 + ), + "xl": + to-rem( + $pxValue: 30 + ) +); + +@mixin input--sizes() { + @each $size in (xl l m s xs) { + // $stroke-width: 3px; + // @if $size == s or $size == xs { + // $stroke-width: 2px; + // } + //.#{$prefix}loadingindicator--size-#{$size} { + // &%size-#{$size} { + + $padding-top: to-rem( + $pxValue: 16 + ); + $padding-right: $db-spacing-s; + $padding-left: $db-spacing-s; + $padding-bottom: calc($db-spacing-s - 4px); + + @if $size == s or $size == xs { + $padding-top: 0.5rem; + $padding-bottom: 0.5rem; + } + + &%size-#{$size} { + font-size: to-rem($pxValue: map-get($db-input-font-sizes, $size)); + line-height: map-get($db-input-lineheight, $size); + height: map-get($db-input-sizes, $size); + + padding: $db-spacing-s $db-spacing-s; + //&:not(:placeholder-shown) { + padding-top: $padding-top; + padding-bottom: $padding-bottom; + + &::placeholder { + font-size: to-rem( + $pxValue: map-get($db-input-font-sizes, $size) + ); + } + + & ~ .description { + font-size: to-rem( + $pxValue: map-get($db-input-font-sizes, $size) + ); + } + } + } +} + +// TODO rename +@mixin input-label-size($size) { + $transformScale: 1.1; + + @if $size == xs { + $transformScale: 0.75; + } + + @if $size == xl { + $transformScale: 1.35; + } + + font-size: to-rem($pxValue: map-get($db-input-font-sizes, $size)); + transform: translate( + $db-spacing-s, + -#{to-rem( + $pxValue: + calc(map-get($db-input-font-sizes, $size) * $transformScale) + + map-get($db-input-font-sizes, $size) + )} + ); +} + +// TODO rename +@mixin input-label-translation($size) { + @if $size == xs or $size == s { + transition: opacity 0.08s, transform 0.15s; + opacity: 0; + //transform: translate($db-spacing-s, -#{to-rem($pxValue: calc(map-get($db-input-font-sizes, $size) * 1.2) + map-get($db-input-font-sizes, $size))}) scale(0.7); + } + @if $size != xs and $size != s { + $transformScale: 2.9; + + @if $size == xl { + $transformScale: 3.2; + } + + transition: transform + 0.25s + cubic-bezier( + 0.075, + 0.82, + 0.165, + 1 + ); // TODO replace with transistion function + transform: translate( + $db-spacing-s, + -#{to-rem( + $pxValue: + calc( + map-get($db-input-font-sizes, $size) * + $transformScale + ) + )} + ) + scale(0.7); + } +} diff --git a/source/_patterns/01-elements/input/input-sizes.hbs b/source/_patterns/01-elements/input/input-sizes.hbs new file mode 100644 index 00000000000..3e054241b45 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.hbs @@ -0,0 +1,6 @@ +
+{{#each sizes}} + data-size="{{size}}": +
{{> elements-input type=../type label=../label placeholder=../placeholder }}
+{{/each }} +
diff --git a/source/_patterns/01-elements/input/input-sizes.json b/source/_patterns/01-elements/input/input-sizes.json new file mode 100644 index 00000000000..30587697ef9 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.json @@ -0,0 +1,27 @@ +{ + "sizes": [ + { + "size": "xs", + "label": "Small" + }, + { + "size": "s", + "label": "Small" + }, + { + "size": "m", + "label": "Medium (default, data-size attribute is optional)" + }, + { + "size": "l", + "label": "Large" + }, + { + "size": "xl", + "label": "Extra Large" + } + ], + "type": "text", + "placeholder": "z.B. DB User", + "label": "Textlabel" +} diff --git a/source/_patterns/01-elements/input/input-sizes.md b/source/_patterns/01-elements/input/input-sizes.md new file mode 100644 index 00000000000..8a5277013a5 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.md @@ -0,0 +1,4 @@ +--- +title: Input sizes +order: 1 +--- diff --git a/source/_patterns/01-elements/input/input-variations.json b/source/_patterns/01-elements/input/input-variations.json index fa7a74fa541..17a1e102489 100644 --- a/source/_patterns/01-elements/input/input-variations.json +++ b/source/_patterns/01-elements/input/input-variations.json @@ -1,20 +1,24 @@ { "variations": [ { - "variant": "semitransparent", - "id": "input16" + "variant": "error", + "message": "Error Message", + "description": "Error Message Description" }, { - "variant": "white", - "id": "input17" + "variant": "warning", + "message": "Warning Message", + "description": "Warning Message Description" }, { - "variant": "solid", - "id": "input18" + "variant": "success", + "message": "Success Message", + "description": "Success Message Description" }, { - "variant": "outline", - "id": "input19" + "variant": "warning", + "message": "Warning", + "description": "Warning Message Description" } ], "type": "text", diff --git a/source/_patterns/01-elements/input/input.hbs b/source/_patterns/01-elements/input/input.hbs index 6d8dc1f1841..2f01b79934b 100644 --- a/source/_patterns/01-elements/input/input.hbs +++ b/source/_patterns/01-elements/input/input.hbs @@ -11,11 +11,13 @@ {{{ validation }}} {{#if datalist }} list="datalist{{ id }}"{{/if }} aria-labelledby="{{ id }}-label" - {{#if variant}} data-variant="{{variant}}"{{/if }}> + {{#if variant}} data-variant="{{variant}}"{{/if }} + {{#if size}} data-size="{{size}}"{{/if }}> + {{#if description }}{{{ description }}}

{{/if }} {{#if datalist }} {{#each datalistItems }} diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss index 544a3e34826..b16b01c31ca 100644 --- a/source/_patterns/01-elements/input/input.scss +++ b/source/_patterns/01-elements/input/input.scss @@ -6,19 +6,43 @@ .elm-input { @extend %form-element; - font-size: to-rem($pxValue: 16); - line-height: to-rem($pxValue: 24); + // font-size: to-rem($pxValue: 16); + // line-height: to-rem($pxValue: 24); - color: $input---color; + @include input--sizes(); + @extend %size-m; // default + + // color: $input---color; width: 100%; max-width: 100%; - height: to-rem($pxValue: 44); + //height: to-rem($pxValue: 40); - padding: $db-spacing-s $db-spacing-m; - &:not(:placeholder-shown) { - padding-top: to-rem($pxValue: 16); - padding-bottom: 0; + // padding: $db-spacing-s $db-spacing-m; + //&:not(:placeholder-shown) { + // padding-top: to-rem($pxValue: 16); + // padding-bottom: 0; + //} + + // ### Size variations + &[data-size="xs"] { + @extend %size-xs; + } + + &[data-size="s"] { + @extend %size-s; + } + + &[data-size="m"] { + @extend %size-m; + } + + &[data-size="l"] { + @extend %size-l; + } + + &[data-size="xl"] { + @extend %size-xl; } // * TODO: to get evaluated @@ -29,9 +53,31 @@ // TODO: Evaluate whether those could get moved to ../_form-elements.scss &:focus, - &:hover { + &:not(:placeholder-shown) { &:not(:disabled) { - --formElement---borderColor: #{$db-color-cool-gray-400}; + + .elm-label { + @include input-label-translation(m); + } + + &[data-size="xs"] + .elm-label { + @include input-label-translation(xs); + } + + &[data-size="s"] + .elm-label { + @include input-label-translation(s); + } + + &[data-size="m"] + .elm-label { + @include input-label-translation(m); + } + + &[data-size="l"] + .elm-label { + @include input-label-translation(l); + } + + &[data-size="xl"] + .elm-label { + @include input-label-translation(xl); + } } } @@ -72,46 +118,61 @@ // position: absolute; // left: calc(#{to-em($pxValue: 10)} - 1px); - transition: opacity, transform 250ms; + // transition: opacity, transform 250ms; // Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html @media (prefers-reduced-motion: reduce) { transition-duration: 0.01s !important; } } & + .elm-label { - transform: translate($db-spacing-m, -#{to-rem($pxValue: 41)}); - font-size: to-rem($pxValue: 12); + // font-size: to-rem($pxValue: 14); display: block; + pointer-events: none; + transform-origin: left; + // color: $db-color-cool-gray-500; - color: $db-color-cool-gray-500; + @include input-label-size(m); - margin-bottom: -#{to-rem($pxValue: 18)}; + // transform: translate($db-spacing-s, -#{to-rem($pxValue: 16 + 14)}); + // margin-bottom: -#{to-rem($pxValue: 18)}; & + .description { - margin-top: 0; - } - } - &[placeholder] { - &:placeholder-shown { - & + label { - opacity: 0; - } + margin-top: -1.5rem; } } + // &[placeholder] { + // &:placeholder-shown { + // & + label { + // // opacity: 0; + // } + // } + // } &::placeholder { - color: $db-color-cool-gray-500; + //color: $db-color-cool-gray-500; + opacity: 0; + //font-size: to-rem($pxValue: 14); + } + + &:focus { + &::placeholder { + opacity: 0.5; + } } // TODO: Evaluate whether those could get moved to ../_form-elements.scss // Validation &:required { &:valid:not([aria-invalid]) { - --formElement---borderColor: #{$db-color-green-600}; + //--formElement---borderColor: #{$db-color-green-600}; } &:invalid { &:not(:placeholder-shown) { - --formElement---borderColor: #{$db-color-red-500}; + @extend %db-bg-critical-transparent-semi; + + & + .elm-label { + color: $db-colors-critical-on-bg-enabled; + } } } } @@ -119,18 +180,94 @@ --formElement---borderColor: #{$db-color-red-500}; } - // ### Style variations - &[data-variant="semitransparent"] { - @extend %form-element-semitransparent; + // ### variations + &[data-variant="error"] { + @extend %db-bg-critical-transparent-semi; + + & + .elm-label { + color: $db-colors-critical-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-critical; + display: flex; + justify-content: space-between; + max-width: 30rem; + + &::after { + content: " "; + position: relative; + display: block; + width: 20px; + height: 20px; + background-color: aquamarine; + top: -2rem; + @include icon(glyph(error-triangle), 20, "filled"); + } + } } - &[data-variant="white"] { - @extend %form-element-white; + &[data-variant="warning"] { + @extend %db-bg-warning-transparent-semi; + + & + .elm-label { + color: $db-colors-warning-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-warning; + } } - &[data-variant="solid"] { - @extend %form-element-solid; + &[data-variant="success"] { + @extend %db-bg-success-transparent-semi; + + & + .elm-label { + color: $db-colors-success-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-success; + } } - &[data-variant="outline"] { - @extend %form-element-outline; + &[data-variant="information"] { + @extend %db-bg-information-transparent-semi; + + & + .elm-label { + color: $db-colors-information-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-information; + } + } + + &[data-size="xs"] { + & + .elm-label { + @include input-label-size(xs); + } + } + + &[data-size="s"] { + & + .elm-label { + @include input-label-size(s); + } + } + + &[data-size="m"] { + & + .elm-label { + @include input-label-size(m); + } + } + + &[data-size="l"] { + & + .elm-label { + @include input-label-size(l); + } + } + + &[data-size="xl"] { + & + .elm-label { + @include input-label-size(xl); + } } } diff --git a/source/css/pattern-scaffolding.css b/source/css/pattern-scaffolding.css index 456a1298c91..58ea6ab7019 100644 --- a/source/css/pattern-scaffolding.css +++ b/source/css/pattern-scaffolding.css @@ -99,6 +99,15 @@ font-size: 1rem; } +/** +* used for input +**/ +.box-with-border { + border: 1px solid rgba(0, 0, 0, 0.06); + padding: 0 1rem 1rem; + margin: 0 0 2rem; +} + /** * For placeholder only block * 1) Used for placeholder blocks for layouts