When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.
@use "scss/core/breakpoint/breakpoint";
@include breapoint.break([breakpoint]) {
// css here
@@ -28,6 +29,9 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
+@use 'sass:map';
+@use 'sass:string';
+
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@@ -65,30 +69,30 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
$min: 0;
$max: 0;
- @if str-length($bp) == 2 {
+ @if string.length($bp) == 2 {
// only a single break point was received
- $min: map-get($points, $bp);
- $max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
+ $min: map.get($points, $bp);
+ $max: map.get($points, nth(map.keys($points), index(map.keys($points), $bp) + 1));
} @else {
- @if str-slice($bp, 0, 1) == "-" {
+ @if string.slice($bp, 0, 1) == "-" {
// no lower breakpoint was received
$min: null;
- $max: map-get($points, str-slice($bp, 2, 3));
+ $max: map.get($points, string.slice($bp, 2, 3));
} @else {
- $min: map-get($points, unquote(str-slice($bp, 0, 2)));
+ $min: map.get($points, string.unquote(string.slice($bp, 0, 2)));
- @if str-length($bp) == 3 {
+ @if string.length($bp) == 3 {
// no upper break point was received
$max: null;
} @else {
- $max: map-get($points, str-slice($bp, 4, 5));
+ $max: map.get($points, string.slice($bp, 4, 5));
}
}
}
diff --git a/public/patterns/core/colours/index.html b/public/patterns/core/colours/index.html
index ba3336d..1f30fe9 100644
--- a/public/patterns/core/colours/index.html
+++ b/public/patterns/core/colours/index.html
@@ -291,7 +291,7 @@
-
+
:root {
--colour-blue: #2e51a1;
@@ -339,6 +339,6 @@
}
}
-
+