Build CSS

This commit is contained in:
github-actions[bot] 2024-12-31 05:18:39 +00:00
parent ddf41a191a
commit 951aae3801
77 changed files with 7702 additions and 7702 deletions

View file

@ -1,33 +1,33 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/container") and $enable-classes {
/**
* Container
*/
#{$parent-selector} .container,
#{$parent-selector} .container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing);
}
#{$parent-selector} .container {
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/container") and $enable-classes {
/**
* Container
*/
#{$parent-selector} .container,
#{$parent-selector} .container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(#{$css-var-prefix}spacing);
padding-left: var(#{$css-var-prefix}spacing);
}
#{$parent-selector} .container {
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}

View file

@ -1,53 +1,53 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/document") {
/**
* Document
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Change the line height in all browsers (opinionated)
// 2. Breaks words to prevent overflow in all browsers (opinionated)
// 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2
tab-size: 2; // 3
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/document") {
/**
* Document
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// 1. Add border box sizing in all browsers (opinionated)
// 2. Backgrounds do not repeat by default (opinionated)
*,
*::before,
*::after {
box-sizing: border-box; // 1
background-repeat: no-repeat; // 2
}
// 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Add vertical alignment inheritance in all browsers (opinionated)
::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Change the line height in all browsers (opinionated)
// 2. Breaks words to prevent overflow in all browsers (opinionated)
// 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5
background-color: var(#{$css-var-prefix}background-color);
color: var(#{$css-var-prefix}color);
font-weight: var(#{$css-var-prefix}font-weight);
font-size: var(#{$css-var-prefix}font-size);
line-height: var(#{$css-var-prefix}line-height); // 1
font-family: var(#{$css-var-prefix}font-family);
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2
tab-size: 2; // 3
}
}

View file

@ -1,26 +1,26 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
#{$parent-selector} .grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid;
grid-template-columns: 1fr;
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for children in overflow
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/grid") and $enable-classes {
/**
* Grid
* Minimal grid system with auto-layout columns
*/
#{$parent-selector} .grid {
grid-column-gap: var(#{$css-var-prefix}grid-column-gap);
grid-row-gap: var(#{$css-var-prefix}grid-row-gap);
display: grid;
grid-template-columns: 1fr;
@if map.get($breakpoints, "md") {
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
& > * {
min-width: 0; // HACK for children in overflow
}
}
}

View file

@ -1,67 +1,67 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// add smooth scrolling
html {
scroll-behavior: smooth;
}
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
//
#{$parent-selector} #{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular vertical spacings for <header>, <main>, <footer>
@else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
}
}
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
//
// add smooth scrolling
html {
scroll-behavior: smooth;
}
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
//
#{$parent-selector} #{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular vertical spacings for <header>, <main>, <footer>
@else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
}
}
}
}

View file

@ -1,12 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
/**
* Overflow auto
*/
#{$parent-selector} .overflow-auto {
overflow: auto;
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/overflow-auto") and $enable-classes {
/**
* Overflow auto
*/
#{$parent-selector} .overflow-auto {
overflow: auto;
}
}

View file

@ -1,105 +1,105 @@
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
@if map.get($modules, "layout/row") and $enable-classes {
$helper-cols: "";
$helper-offset: "";
/*--- CSS Grid ---*/
#{$parent-selector} .row-fluid,
#{$parent-selector} .row {
display: grid;
grid-template-columns: repeat($row-columns, 1fr);
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
&.align-center {
align-items: center;
}
&.align-start {
align-items: start;
}
&.align-end {
align-items: end;
}
> [class*="col"] > *,
> [class|="col"] > *,
> [class~="col"] > * {
margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
}
}
#{$parent-selector} .row {
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
margin: 0 auto;
}
/* Defining columns spans and offsets */
// Loop through all column spans and define the .grid-column-end number
@for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$col} {
grid-column-end: span $col;
}
@if $col == 1 {
$helper-cols: ".col-1";
} @else {
$helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
}
}
// Loop through all column offsets and define the .grid-column-start number
@for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$offset} {
grid-column-start: $offset + 1;
}
@if $offset == 0 {
$helper-offset: ".offset-0";
} @else {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
}
}
// Defines media queries for each breakpoint and loops through both spans
// and offsets to set grid-column-end and grid-column-start
// Loop through breakpoints and generate media queries
@each $breakpoint, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "viewport")) {
@for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$breakpoint}-#{$col} {
grid-column-end: span $col;
}
@if ($breakpoint != "sm") {
$helper-cols: #{$helper-cols} +
", #{$parent-selector} .col-" +
#{$breakpoint} +
"-" +
#{$col};
}
}
@for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
grid-column-start: $offset + 1;
}
@if ($breakpoint != "sm") {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
}
}
}
}
}
/* CSS Grid Media Queries */
// Sets the columns to be col-12 with a starting column of 1
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
@media (max-width: $sm-size) {
//[class*="col-"] {
#{$helper-cols} {
grid-column-end: span $row-columns;
}
//[class*="offset-"] {
#{$helper-offset} {
grid-column-start: 1;
}
}
}
@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
@if map.get($modules, "layout/row") and $enable-classes {
$helper-cols: "";
$helper-offset: "";
/*--- CSS Grid ---*/
#{$parent-selector} .row-fluid,
#{$parent-selector} .row {
display: grid;
grid-template-columns: repeat($row-columns, 1fr);
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
&.align-center {
align-items: center;
}
&.align-start {
align-items: start;
}
&.align-end {
align-items: end;
}
> [class*="col"] > *,
> [class|="col"] > *,
> [class~="col"] > * {
margin: var(#{$css-var-prefix}block-spacing-vertical) auto;
}
}
#{$parent-selector} .row {
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
margin: 0 auto;
}
/* Defining columns spans and offsets */
// Loop through all column spans and define the .grid-column-end number
@for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$col} {
grid-column-end: span $col;
}
@if $col == 1 {
$helper-cols: ".col-1";
} @else {
$helper-cols: #{$helper-cols} + ", #{$parent-selector} .col-" + #{$col};
}
}
// Loop through all column offsets and define the .grid-column-start number
@for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$offset} {
grid-column-start: $offset + 1;
}
@if $offset == 0 {
$helper-offset: ".offset-0";
} @else {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
}
}
// Defines media queries for each breakpoint and loops through both spans
// and offsets to set grid-column-end and grid-column-start
// Loop through breakpoints and generate media queries
@each $breakpoint, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "viewport")) {
@for $col from 1 through $row-columns {
#{$parent-selector} .col-#{$breakpoint}-#{$col} {
grid-column-end: span $col;
}
@if ($breakpoint != "sm") {
$helper-cols: #{$helper-cols} +
", #{$parent-selector} .col-" +
#{$breakpoint} +
"-" +
#{$col};
}
}
@for $offset from 0 through $row-columns - 1 {
#{$parent-selector} .offset-#{$breakpoint}-#{$offset} {
grid-column-start: $offset + 1;
}
@if ($breakpoint != "sm") {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
}
}
}
}
}
/* CSS Grid Media Queries */
// Sets the columns to be col-12 with a starting column of 1
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
@media (max-width: $sm-size) {
//[class*="col-"] {
#{$helper-cols} {
grid-column-end: span $row-columns;
}
//[class*="offset-"] {
#{$helper-offset} {
grid-column-start: 1;
}
}
}

View file

@ -1,12 +1,12 @@
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/section") {
/**
* Section
*/
#{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
}
}
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/section") {
/**
* Section
*/
#{$parent-selector} section {
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
}
}