@db-ux/core-foundations 2.0.0-0-custom-select-16b8cce → 2.0.1

package/build/ide/db.ide.css

@@ -42,16 +42,16 @@ head {
 	--db-elevation-md: "Changes elevation of element.";
 	--db-elevation-lg: "Changes elevation of element.";
 
-	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-height */
-	--db-border-height-3xs: "Changes border-height of element";
-	--db-border-height-2xs: "Changes border-height of element";
-	--db-border-height-xs: "Changes border-height of element";
-	--db-border-height-sm: "Changes border-height of element";
-	--db-border-height-md: "Changes border-height of element";
-	--db-border-height-lg: "Changes border-height of element";
-	--db-border-height-xl: "Changes border-height of element";
-	--db-border-height-2xl: "Changes border-height of element";
-	--db-border-height-3xl: "Changes border-height of element";
+	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-width */
+	--db-border-width-3xs: "Changes border-width of element";
+	--db-border-width-2xs: "Changes border-width of element";
+	--db-border-width-xs: "Changes border-width of element";
+	--db-border-width-sm: "Changes border-width of element";
+	--db-border-width-md: "Changes border-width of element";
+	--db-border-width-lg: "Changes border-width of element";
+	--db-border-width-xl: "Changes border-width of element";
+	--db-border-width-2xl: "Changes border-width of element";
+	--db-border-width-3xl: "Changes border-width of element";
 
 	/* https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/foundation/border-radius */
 	--db-border-radius-3xs: "Changes border-radius of element";

package/build/styles/_screen-sizes.scss

@@ -1,10 +1,11 @@
 @use "helpers";
+@use "sass:map";
 
-$db-screen-size-xs: 360;
-$db-screen-size-sm: 720;
-$db-screen-size-md: 1024;
-$db-screen-size-lg: 1440;
-$db-screen-size-xl: 1920;
+$db-screen-size-xs: 360; // mobile
+$db-screen-size-sm: 720; // tablet
+$db-screen-size-md: 1024; // small desktop
+$db-screen-size-lg: 1440; // regular desktop
+$db-screen-size-xl: 1920; // large desktop
 
 $db-breakpoint-xs: helpers.px-to-em($db-screen-size-xs);
 $db-breakpoint-sm: helpers.px-to-em($db-screen-size-sm);
@@ -12,7 +13,33 @@ $db-breakpoint-md: helpers.px-to-em($db-screen-size-md);
 $db-breakpoint-lg: helpers.px-to-em($db-screen-size-lg);
 $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 
-@mixin screen($size: "sm", $width: "min") {
+@mixin get-breakpoint-properties() {
+	@property --db-breakpoint-xs {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-xs};
+	}
+
+	@property --db-breakpoint-sm {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-sm};
+	}
+
+	@property --db-breakpoint-md {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-md};
+	}
+
+	@property --db-breakpoint-xl {
+		syntax: "*";
+		inherits: true;
+		initial-value: #{$db-breakpoint-xl};
+	}
+}
+
+@function get-screen-size($size) {
 	$screen: $db-screen-size-sm;
 
 	/* stylelint-disable at-rule-empty-line-before */
@@ -27,6 +54,12 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 	}
 	/* stylelint-enable at-rule-empty-line-before */
 
+	@return $screen;
+}
+
+@mixin screen($size: "sm", $width: "min") {
+	$screen: get-screen-size($size);
+
 	@if ($width == "min") {
 		/* stylelint-disable-next-line media-query-no-invalid */
 		@media screen and (min-width: #{helpers.px-to-em($screen)}) {
@@ -47,3 +80,26 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 		}
 	}
 }
+
+/**
+ * @mixin screen-min-max
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
+ */
+@mixin screen-min-max($data) {
+	$min: "";
+	$max: "";
+
+	@if (map.get($data, "min") != null) {
+		$min: "#{helpers.px-to-em(get-screen-size(map.get($data, "min")))} < ";
+	}
+
+	@if (map.get($data, "max") != null) {
+		$max: " <= #{helpers.px-to-em(get-screen-size(map.get($data, "max")))}";
+	}
+
+	/* stylelint-disable-next-line media-query-no-invalid */
+	@media screen and (#{$min}width#{$max}) {
+		@content;
+	}
+	/* stylelint-disable-next-line at-rule-empty-line-before */
+}

package/build/styles/_variables.scss

@@ -40,15 +40,15 @@ $db-elevation-lg: var(--db-elevation-lg);
 
 /* Border */
 
-$db-border-height-3xs: var(--db-border-height-3xs);
-$db-border-height-2xs: var(--db-border-height-2xs);
-$db-border-height-xs: var(--db-border-height-xs);
-$db-border-height-sm: var(--db-border-height-sm);
-$db-border-height-md: var(--db-border-height-md);
-$db-border-height-lg: var(--db-border-height-lg);
-$db-border-height-xl: var(--db-border-height-xl);
-$db-border-height-2xl: var(--db-border-height-2xl);
-$db-border-height-3xl: var(--db-border-height-3xl);
+$db-border-width-3xs: var(--db-border-width-3xs);
+$db-border-width-2xs: var(--db-border-width-2xs);
+$db-border-width-xs: var(--db-border-width-xs);
+$db-border-width-sm: var(--db-border-width-sm);
+$db-border-width-md: var(--db-border-width-md);
+$db-border-width-lg: var(--db-border-width-lg);
+$db-border-width-xl: var(--db-border-width-xl);
+$db-border-width-2xl: var(--db-border-width-2xl);
+$db-border-width-3xl: var(--db-border-width-3xl);
 
 $db-border-radius-3xs: var(--db-border-radius-3xs);
 $db-border-radius-2xs: var(--db-border-radius-2xs);