From ea633ff1c7061e7e6590c2a4d94efafb9d17116d Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Fri, 13 Dec 2024 15:35:32 +0100 Subject: [PATCH] [border_css_util] implement css helper class Signed-off-by: Thorsten Scherler --- src/main/scss/abstracts/_border.scss | 61 ++++++++++++++++++++++++++++ src/main/scss/abstracts/_index.scss | 1 + 2 files changed, 62 insertions(+) create mode 100644 src/main/scss/abstracts/_border.scss diff --git a/src/main/scss/abstracts/_border.scss b/src/main/scss/abstracts/_border.scss new file mode 100644 index 000000000000..44ec619edd26 --- /dev/null +++ b/src/main/scss/abstracts/_border.scss @@ -0,0 +1,61 @@ +@use "theme"; + +$positions: ( + t: "top", + r: "right", + b: "bottom", + l: "left" +); +$styles: ( + solid: "solid", + dashed: "dashed", + dotted: "dotted", + double: "double", + hidden: "hidden", + none: "none" +); +$base-unit: 1px; +$borderStyle: solid; +$borderColor: black; +.jenkins-border { + --border-style: #{$borderStyle}; + --border-color: #{$borderColor}; + border: #{$base-unit} var(--border-style) var(--border-color); + + @each $position, $pos in $positions { + &-#{$position} { + border: 0 var(--border-style) var(--border-color); + border-#{$pos}-width: $base-unit !important; + border-#{$pos}-style: var(--border-style, #{$borderStyle}); + border-#{$pos}-color: var(--border-color, #{$borderColor}); + @for $size from 0 through 15 { + &-#{$size} { + border: 0 var(--border-style, #{$borderStyle}) var(--border-color, #{$borderColor}); + border-#{$pos}-width: $size * $base-unit !important; + border-#{$pos}-style: var(--border-style, #{$borderStyle}); + border-#{$pos}-color: var(--border-color, #{$borderColor}); + } + } + } + } + @for $size from 0 through 15 { + &-#{$size} { + border: 0 var(--border-style, #{$borderStyle}) var(--border-color, #{$borderColor}); + border-width: $size * $base-unit !important; + } + } + @each $key, $value in theme.$colors { + &-#{$key} { + border: 0 var(--border-style, #{$borderStyle}) var(--border-color, #{$borderColor}); + --border-color: #{$value}; + border-color: var(--border-color) !important; + } + } + @each $key, $value in $styles { + &-#{$key} { + border: 0 var(--border-style, #{$borderStyle}) var(--border-color, #{$borderColor}); + --border-style: #{$value}; + border-style: var(--border-style) !important; + } + } +} \ No newline at end of file diff --git a/src/main/scss/abstracts/_index.scss b/src/main/scss/abstracts/_index.scss index 4ac76fba5a00..b94ebf7439e4 100644 --- a/src/main/scss/abstracts/_index.scss +++ b/src/main/scss/abstracts/_index.scss @@ -1,2 +1,3 @@ +@use "border"; @use "colors"; @use "theme";