framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pull in v11.0.1 from upstream

Browse Source
This commit is contained in:
Steve Ross
2025-10-30 21:40:17 +00:00
parent 586da211df ddf23d2c29
commit 010160ce46
62 changed files with 9276 additions and 6170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/css/global/variables/_breakpoints.scss Normal file
View File

@@ -0,0 +1,33 @@
@use "sass:math";
$px: math.div(1, 16);
$screen-xxs: 22.5em !default;
$screen-xs: 30.0em !default;
$screen-sm: 48.0em !default;
$screen-md: 62.0em !default;
$screen-lg: 75.0em !default;
$screen-xl: 87.5em !default;
$screen-xxl: 100.0em !default;
$screen-xxxl: 120.0em !default;
// So media queries don"t overlap when required
$screen-xxs-max: ($screen-xs - $px) !default;
$screen-xs-max: ($screen-sm - $px) !default;
$screen-sm-max: ($screen-md - $px) !default;
$screen-md-max: ($screen-lg - $px) !default;
$screen-lg-max: ($screen-xl - $px) !default;
$screen-xl-max: ($screen-xxl - $px) !default;
$screen-xxl-max: ($screen-xxxl - $px) !default;
// Breakpoints
$breakpoints: (
"screen-xxs": $screen-xxs,
"screen-xs": $screen-xs,
"screen-sm": $screen-sm,
"screen-md": $screen-md,
"screen-lg": $screen-lg,
"screen-xl": $screen-xl,
"screen-xxl": $screen-xxl,
"screen-xxxl": $screen-xxxl,
);

105
resources/css/global/variables/_colours.scss Normal file
View File

@@ -0,0 +1,105 @@
@use "sass:color";
//== Status
$success: #39b54a;
$error: #be1e2d;
$alert: #eed202;
//== Brand Colours
$primary: #337ab7;
$secondary: #5bc0de;
$tertiary: invert($primary);
$quaternary: invert($secondary);
//== Primary Tints
$primary-darkest: color.adjust($primary, $lightness: -30%);
$primary-darker: color.adjust($primary, $lightness: -20%);
$primary-dark: color.adjust($primary, $lightness: -10%);
$primary-light: color.adjust($primary, $lightness: 10%);
$primary-lighter: color.adjust($primary, $lightness: 20%);
$primary-lightest: color.adjust($primary, $lightness: 30%);
//== Secondary Tints
$secondary-darkest: color.adjust($secondary, $lightness: -30%);
$secondary-darker: color.adjust($secondary, $lightness: -20%);
$secondary-dark: color.adjust($secondary, $lightness: -10%);
$secondary-light: color.adjust($secondary, $lightness: 10%);
$secondary-lighter: color.adjust($secondary, $lightness: 20%);
$secondary-lightest: color.adjust($secondary, $lightness: 30%);
//== Tertiary Tints
$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
$tertiary-light: color.adjust($tertiary, $lightness: 10%);
$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
//== quaternary Tints
$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
$quaternary-light: color.adjust($quaternary, $lightness: 10%);
$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
//== Shades
$white: white;
$grey-lightest: color.adjust(black, $lightness: 95%);
$grey-lighter: color.adjust(black, $lightness: 80%);
$grey-light: color.adjust(black, $lightness: 70%);
$grey: color.adjust(black, $lightness: 50%);
$grey-dark: color.adjust(black, $lightness: 40%);
$grey-darker: color.adjust(black, $lightness: 20%);
$grey-darkest: color.adjust(black, $lightness: 05%);
$black: black;
//## Colour Array (used in generating colour classes).
$colors: (
// shades
"black": $black,
"grey-darkest": $grey-darkest,
"grey-darker": $grey-darker,
"grey-dark": $grey-dark,
"grey-light": $grey-light,
"grey-lighter": $grey-lighter,
"grey-lightest": $grey-lightest,
"white": $white,
// status
"error": $error,
"success": $success,
"alert": $alert,
// brand
"primary": $primary,
"secondary": $secondary,
"tertiary": $tertiary,
"quaternary": $quaternary,
// primary tints
"primary-darkest": $primary-darkest,
"primary-darker": $primary-darker,
"primary-dark": $primary-dark,
"primary-light": $primary-light,
"primary-lighter": $primary-lighter,
"primary-lightest": $primary-lightest,
// secondary tints
"secondary-darkest": $secondary-darkest,
"secondary-darker": $secondary-darker,
"secondary-dark": $secondary-dark,
"secondary-light": $secondary-light,
"secondary-lighter": $secondary-lighter,
"secondary-lightest": $secondary-lightest,
// tertiary tints
"tertiary-darkest": $tertiary-darkest,
"tertiary-darker": $tertiary-darker,
"tertiary-dark": $tertiary-dark,
"tertiary-light": $tertiary-light,
"tertiary-lighter": $tertiary-lighter,
"tertiary-lightest": $tertiary-lightest,
// quaternary tints
"quaternary-darkest": $quaternary-darkest,
"quaternary-darker": $quaternary-darker,
"quaternary-dark": $quaternary-dark,
"quaternary-light": $quaternary-light,
"quaternary-lighter": $quaternary-lighter,
"quaternary-lightest": $quaternary-lightest,
);

43
resources/css/global/variables/_spacing.scss Normal file
View File

@@ -0,0 +1,43 @@
@use "sass:math";
$offCanvasWidth: 17.5em;
$brandWidth: 9em !default;
$brandHeight: 3em !default;
$tileAspectRatio: math.div(400, 640) * 100%;
$heroAspectRatio: math.div(593, 1920) * 100vw;
$slideAspectRatio: math.div(733, 1920) * 100vw;
$sectionSmallest: 0.500em;
$sectionSmaller: 1.000em;
$sectionSmall: 1.500em;
$sectionMedium: 3.000em;
$sectionLarge: 5.000em;
$sectionLarger: 7.500em;
$sectionLargest: 10.000em;
$containerLarge: 73.125em;
$containerMedium: 60.000em;
$containerSmall: 50.000em;
$containerNarrow: 34.000em;
$innerLarger: 5.000em;
$innerLarger: 3.000em;
$innerLarge: 2.000em;
$innerMedium: 1.500em;
$innerSmall: 1.000em;
$innerSmaller: 0.750em;
$innerSmallest: 0.500em;
$borderRadiusLargeer: 1.500em;
$borderRadiusLarge: 1.000em;
$borderRadius: 1.000em;
$borderRadiusSmall: 0.500em;
$borderRadiusSmaller: 0.250em;
$borderThin: 0.0625em;
$borderWidth: 0.1250em;
$borderThick: 0.2500em;
$borderThicker: 0.5000em;
$borderThickest: 1.0000em;