gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Reprocess CSS to be not minimised.

Browse Source
This commit is contained in:
A McIlwraith
2025-12-23 09:12:49 -05:00
parent 37762504a4
commit cfd23cd1a3
21 changed files with 1071 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/patterns/core/breakpoint/index.html
View File

@@ -21,6 +21,7 @@
<p>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. </p>
<tabset id="breakpoints">
<div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include breapoint.break([breakpoint]) {
// css here
@@ -28,6 +29,9 @@
<pre class="language-sass">//- 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));
}
}
}