mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
Bartosz-DoandStarDev
a508bb6c3e
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
231 lines
14 KiB
SCSS
231 lines
14 KiB
SCSS
@use '../config' as *;
|
|
|
|
.bg-pattern-diagonal {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
|
|
background-clip: padding-box;
|
|
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-diagonal-2 {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
|
|
background-clip: padding-box;
|
|
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-dots {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: 5px;
|
|
--#{$prefix}pattern-dot: 0.5px;
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 20%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot)), radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot));
|
|
background-position:
|
|
0 0,
|
|
calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
|
|
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-rectangles {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
background-image:
|
|
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
|
|
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
|
|
background-position:
|
|
-1px -1px,
|
|
calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
|
|
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-lines {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
|
|
background-position: -1px -1px;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-lines-vertical {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
|
|
background-position: -1px -1px;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-grid {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
|
|
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
|
background-position:
|
|
-1px -1px,
|
|
-1px -1px;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-grid-diagonal {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
|
|
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
|
background-position: center center;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-blueprint {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
|
|
background-size:
|
|
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
|
|
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
|
|
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
|
|
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
|
background-position:
|
|
-3px -3px,
|
|
-3px -3px,
|
|
-2px -2px,
|
|
-2px -2px;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-cross-dots {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
|
|
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
|
background-position:
|
|
0 0,
|
|
var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-circles {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image:
|
|
radial-gradient(circle at center top, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
|
|
radial-gradient(circle at right center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%);
|
|
background-position: 0 0;
|
|
background-size: calc(var(--#{$prefix}pattern-size) * 3) calc(var(--#{$prefix}pattern-size) * 3);
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-diagonal-stripes {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
|
background-repeat: no-repeat;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-diagonal-stripes-2 {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
|
background-repeat: no-repeat;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-zigzag {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background:
|
|
linear-gradient(135deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
|
|
linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
|
|
linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
|
|
linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
|
|
background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-vertical-stripes {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(90deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
.bg-pattern-horizontal-stripes {
|
|
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
|
--#{$prefix}pattern-size: #{$pattern-size};
|
|
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
|
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
|
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
|
background-position: -1px -1px;
|
|
background-clip: padding-box;
|
|
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
|
}
|
|
|
|
// Color variants
|
|
@each $color, $value in $theme-colors {
|
|
.bg-pattern-#{$color} {
|
|
--#{$prefix}pattern-color: #{$value};
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
$sizes: (
|
|
'sm': $pattern-size-sm,
|
|
'md': $pattern-size-md,
|
|
'lg': $pattern-size-lg,
|
|
'xl': $pattern-size-xl,
|
|
);
|
|
|
|
@each $size, $value in $sizes {
|
|
.bg-pattern-#{$size} {
|
|
--#{$prefix}pattern-size: #{$value};
|
|
}
|
|
}
|