init
This commit is contained in:
commit
ce362f6236
7
css/.gitignore
vendored
Normal file
7
css/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.DS_Store
|
||||||
|
./node_modules
|
||||||
|
**node_modules
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
10315
css/compiled.css
Normal file
10315
css/compiled.css
Normal file
File diff suppressed because it is too large
Load Diff
1
css/compiled.css.map
Normal file
1
css/compiled.css.map
Normal file
File diff suppressed because one or more lines are too long
1
css/compiled.mini.css
Normal file
1
css/compiled.mini.css
Normal file
File diff suppressed because one or more lines are too long
241
css/package-lock.json
generated
Normal file
241
css/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,241 @@
|
||||||
|
{
|
||||||
|
"name": "css",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.3.3",
|
||||||
|
"sass": "^1.77.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"peer": true,
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/anymatch": {
|
||||||
|
"version": "3.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||||
|
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||||
|
"dependencies": {
|
||||||
|
"normalize-path": "^3.0.0",
|
||||||
|
"picomatch": "^2.0.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/binary-extensions": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||||
|
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/bootstrap": {
|
||||||
|
"version": "5.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
|
||||||
|
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/twbs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/bootstrap"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/braces": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||||
|
"dependencies": {
|
||||||
|
"fill-range": "^7.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/chokidar": {
|
||||||
|
"version": "3.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||||
|
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||||
|
"dependencies": {
|
||||||
|
"anymatch": "~3.1.2",
|
||||||
|
"braces": "~3.0.2",
|
||||||
|
"glob-parent": "~5.1.2",
|
||||||
|
"is-binary-path": "~2.1.0",
|
||||||
|
"is-glob": "~4.0.1",
|
||||||
|
"normalize-path": "~3.0.0",
|
||||||
|
"readdirp": "~3.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 8.10.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://paulmillr.com/funding/"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"fsevents": "~2.3.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/fill-range": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||||
|
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||||
|
"dependencies": {
|
||||||
|
"to-regex-range": "^5.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/fsevents": {
|
||||||
|
"version": "2.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
|
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/glob-parent": {
|
||||||
|
"version": "5.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||||
|
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||||
|
"dependencies": {
|
||||||
|
"is-glob": "^4.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/immutable": {
|
||||||
|
"version": "4.3.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
|
||||||
|
"integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
|
||||||
|
},
|
||||||
|
"node_modules/is-binary-path": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||||
|
"dependencies": {
|
||||||
|
"binary-extensions": "^2.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-extglob": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-glob": {
|
||||||
|
"version": "4.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||||
|
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||||
|
"dependencies": {
|
||||||
|
"is-extglob": "^2.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-number": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.12.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/normalize-path": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/picomatch": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/jonschlinkert"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/readdirp": {
|
||||||
|
"version": "3.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||||
|
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||||
|
"dependencies": {
|
||||||
|
"picomatch": "^2.2.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/sass": {
|
||||||
|
"version": "1.77.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
|
||||||
|
"integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
|
||||||
|
"dependencies": {
|
||||||
|
"chokidar": ">=3.0.0 <4.0.0",
|
||||||
|
"immutable": "^4.0.0",
|
||||||
|
"source-map-js": ">=0.6.2 <2.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"sass": "sass.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/source-map-js": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/to-regex-range": {
|
||||||
|
"version": "5.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||||
|
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"is-number": "^7.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
css/package.json
Normal file
9
css/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"build": "sass ./scss/base.scss ./compiled.css"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.3.3",
|
||||||
|
"sass": "^1.77.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
111
css/scss/base.scss
Normal file
111
css/scss/base.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
@import '../node_modules/bootstrap/scss/functions';
|
||||||
|
|
||||||
|
// override variables
|
||||||
|
|
||||||
|
@import './bootstrap/variables';
|
||||||
|
@import '../node_modules/bootstrap/scss/variables';
|
||||||
|
@import '../node_modules/bootstrap/scss/variables-dark';
|
||||||
|
|
||||||
|
// override maps
|
||||||
|
@import './bootstrap/maps';
|
||||||
|
|
||||||
|
@import '../node_modules/bootstrap/scss/maps';
|
||||||
|
@import '../node_modules/bootstrap/scss/mixins';
|
||||||
|
@import '../node_modules/bootstrap/scss/root';
|
||||||
|
|
||||||
|
@import '../node_modules/bootstrap/scss/utilities';
|
||||||
|
@import '../node_modules/bootstrap/scss/reboot';
|
||||||
|
|
||||||
|
// override typography
|
||||||
|
|
||||||
|
@import './bootstrap/typography';
|
||||||
|
@import '../node_modules/bootstrap/scss/type';
|
||||||
|
@import './bootstrap/accordion';
|
||||||
|
@import '../node_modules/bootstrap/scss/transitions';
|
||||||
|
@import '../node_modules/bootstrap/scss/badge';
|
||||||
|
@import '../node_modules/bootstrap/scss/card';
|
||||||
|
@import '../node_modules/bootstrap/scss/grid';
|
||||||
|
@import '../node_modules/bootstrap/scss/containers';
|
||||||
|
@import '../node_modules/bootstrap/scss/helpers';
|
||||||
|
@import '../node_modules/bootstrap/scss/buttons';
|
||||||
|
@import './bootstrap/utilities';
|
||||||
|
|
||||||
|
@function contrast-ratio($color1, $color2) {
|
||||||
|
// Calculate the relative luminance for each color
|
||||||
|
$luminance1: luminance($color1);
|
||||||
|
$luminance2: luminance($color2);
|
||||||
|
|
||||||
|
// Calculate the contrast ratio
|
||||||
|
$contrastRatio: if(
|
||||||
|
$luminance1 > $luminance2,
|
||||||
|
calc(($luminance1 + 0.05) / ($luminance2 + 0.05)),
|
||||||
|
calc(($luminance2 + 0.05) / ($luminance1 + 0.05))
|
||||||
|
);
|
||||||
|
|
||||||
|
// Return the contrast ratio
|
||||||
|
@return $contrastRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function get-contrasting-text-color($background-color, $min-contrast-ratio: 4.5) {
|
||||||
|
// Calculate relative luminance
|
||||||
|
$rel-lum: luminance($background-color);
|
||||||
|
$bg-lum: if($rel-lum > 0.5, $rel-lum, 1 - $rel-lum);
|
||||||
|
// Calculate contrast ratio
|
||||||
|
$light-contrast: contrast-ratio($light, $background-color);
|
||||||
|
$dark-contrast: contrast-ratio($dark, $background-color);
|
||||||
|
|
||||||
|
// Determine the text color based on contrast ratio and minimum threshold
|
||||||
|
@if (calc($bg-lum * $dark-contrast) >= $min-contrast-ratio) {
|
||||||
|
@return $dark;
|
||||||
|
} @else if (calc($bg-lum * $light-contrast) >= $min-contrast-ratio) {
|
||||||
|
@return $light;
|
||||||
|
} @else {
|
||||||
|
@return if($light-contrast > $dark-contrast, $light, $dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $hex in $all-colors {
|
||||||
|
.bg-#{$color} {
|
||||||
|
background-color: $hex;
|
||||||
|
color: get-contrasting-text-color($hex);
|
||||||
|
}
|
||||||
|
.bg-gradient-#{$color} {
|
||||||
|
--#{$prefix}gradient-start:0%;
|
||||||
|
--#{$prefix}gradient-end:100%;
|
||||||
|
--#{$prefix}gradient-to: transparent;
|
||||||
|
|
||||||
|
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $hex in $theme-colors {
|
||||||
|
.bg-gradient-#{$color} {
|
||||||
|
--#{$prefix}gradient-start:0%;
|
||||||
|
--#{$prefix}gradient-end:100%;
|
||||||
|
--#{$prefix}gradient-to: transparent;
|
||||||
|
|
||||||
|
@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $hex in $all-colors {
|
||||||
|
.border-#{$color} {
|
||||||
|
--#{$prefix}border-color: #{$hex};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@import '../node_modules/bootstrap/scss/utilities/api';
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
162
css/scss/bootstrap/_accordion.scss
Normal file
162
css/scss/bootstrap/_accordion.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
//
|
||||||
|
// Base styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.accordion {
|
||||||
|
// scss-docs-start accordion-css-vars
|
||||||
|
--#{$prefix}accordion-color: #{$accordion-color};
|
||||||
|
--#{$prefix}accordion-bg: #{$accordion-bg};
|
||||||
|
--#{$prefix}accordion-transition: #{$accordion-transition};
|
||||||
|
--#{$prefix}accordion-border-color: #{$accordion-border-color};
|
||||||
|
--#{$prefix}accordion-border-width: #{$accordion-border-width};
|
||||||
|
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
|
||||||
|
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
|
||||||
|
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
|
||||||
|
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
|
||||||
|
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
|
||||||
|
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
|
||||||
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
|
||||||
|
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
|
||||||
|
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
|
||||||
|
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
|
||||||
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
|
||||||
|
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
|
||||||
|
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
|
||||||
|
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
|
||||||
|
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
|
||||||
|
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
|
||||||
|
// scss-docs-end accordion-css-vars
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
|
||||||
|
font-size: inherit;
|
||||||
|
color: var(--#{$prefix}accordion-btn-color);
|
||||||
|
text-align: left; // Reset button style
|
||||||
|
background-color: var(--#{$prefix}accordion-btn-bg);
|
||||||
|
border: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
overflow-anchor: none;
|
||||||
|
@include transition(var(--#{$prefix}accordion-transition));
|
||||||
|
|
||||||
|
&:not(.collapsed) {
|
||||||
|
color: var(--#{$prefix}accordion-active-color);
|
||||||
|
background-color: var(--#{$prefix}accordion-active-bg);
|
||||||
|
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0
|
||||||
|
var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background-image: var(--#{$prefix}accordion-btn-active-icon);
|
||||||
|
transform: var(--#{$prefix}accordion-btn-icon-transform);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accordion icon
|
||||||
|
&::after {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: var(--#{$prefix}accordion-btn-icon-width);
|
||||||
|
height: var(--#{$prefix}accordion-btn-icon-width);
|
||||||
|
margin-left: auto;
|
||||||
|
content: '';
|
||||||
|
background-image: var(--#{$prefix}accordion-btn-icon);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: var(--#{$prefix}accordion-btn-icon-width);
|
||||||
|
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 3;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-item {
|
||||||
|
color: var(--#{$prefix}accordion-color);
|
||||||
|
background-color: var(--#{$prefix}accordion-bg);
|
||||||
|
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
|
||||||
|
|
||||||
|
> .accordion-header .accordion-button {
|
||||||
|
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only set a border-radius on the last item if the accordion is collapsed
|
||||||
|
&:last-of-type {
|
||||||
|
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
||||||
|
|
||||||
|
> .accordion-header .accordion-button {
|
||||||
|
&.collapsed {
|
||||||
|
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .accordion-collapse {
|
||||||
|
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-body {
|
||||||
|
padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flush accordion items
|
||||||
|
//
|
||||||
|
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||||
|
|
||||||
|
.accordion-flush {
|
||||||
|
> .accordion-item {
|
||||||
|
border-right: 0;
|
||||||
|
border-left: 0;
|
||||||
|
@include border-radius(0);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// stylelint-disable selector-max-class
|
||||||
|
> .accordion-header .accordion-button {
|
||||||
|
&,
|
||||||
|
&.collapsed {
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// stylelint-enable selector-max-class
|
||||||
|
|
||||||
|
> .accordion-collapse {
|
||||||
|
@include border-radius(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-dark-mode {
|
||||||
|
@include color-mode(dark) {
|
||||||
|
.accordion-button::after {
|
||||||
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
||||||
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
79
css/scss/bootstrap/_colors.scss
Normal file
79
css/scss/bootstrap/_colors.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
$primary-100: tint-color($primary, 80%) !default;
|
||||||
|
$primary-200: tint-color($primary, 60%) !default;
|
||||||
|
$primary-300: tint-color($primary, 40%) !default;
|
||||||
|
$primary-400: tint-color($primary, 20%) !default;
|
||||||
|
$primary-500: $primary !default;
|
||||||
|
$primary-600: shade-color($primary, 20%) !default;
|
||||||
|
$primary-700: shade-color($primary, 40%) !default;
|
||||||
|
$primary-800: shade-color($primary, 60%) !default;
|
||||||
|
$primary-900: shade-color($primary, 80%) !default;
|
||||||
|
|
||||||
|
$secondary-100: tint-color($secondary, 80%) !default;
|
||||||
|
$secondary-200: tint-color($secondary, 60%) !default;
|
||||||
|
$secondary-300: tint-color($secondary, 40%) !default;
|
||||||
|
$secondary-400: tint-color($secondary, 20%) !default;
|
||||||
|
$secondary-500: $secondary !default;
|
||||||
|
$secondary-600: shade-color($secondary, 20%) !default;
|
||||||
|
$secondary-700: shade-color($secondary, 40%) !default;
|
||||||
|
$secondary-800: shade-color($secondary, 60%) !default;
|
||||||
|
$secondary-900: shade-color($secondary, 80%) !default;
|
||||||
|
|
||||||
|
$success-100: tint-color($success, 80%) !default;
|
||||||
|
$success-200: tint-color($success, 60%) !default;
|
||||||
|
$success-300: tint-color($success, 40%) !default;
|
||||||
|
$success-400: tint-color($success, 20%) !default;
|
||||||
|
$success-500: $success !default;
|
||||||
|
$success-600: shade-color($success, 20%) !default;
|
||||||
|
$success-700: shade-color($success, 40%) !default;
|
||||||
|
$success-800: shade-color($success, 60%) !default;
|
||||||
|
$success-900: shade-color($success, 80%) !default;
|
||||||
|
|
||||||
|
$warning-100: tint-color($warning, 80%) !default;
|
||||||
|
$warning-200: tint-color($warning, 60%) !default;
|
||||||
|
$warning-300: tint-color($warning, 40%) !default;
|
||||||
|
$warning-400: tint-color($warning, 20%) !default;
|
||||||
|
$warning-500: $warning !default;
|
||||||
|
$warning-600: shade-color($warning, 20%) !default;
|
||||||
|
$warning-700: shade-color($warning, 40%) !default;
|
||||||
|
$warning-800: shade-color($warning, 60%) !default;
|
||||||
|
$warning-900: shade-color($warning, 80%) !default;
|
||||||
|
|
||||||
|
$info-100: tint-color($info, 80%) !default;
|
||||||
|
$info-200: tint-color($info, 60%) !default;
|
||||||
|
$info-300: tint-color($info, 40%) !default;
|
||||||
|
$info-400: tint-color($info, 20%) !default;
|
||||||
|
$info-500: $info !default;
|
||||||
|
$info-600: shade-color($info, 20%) !default;
|
||||||
|
$info-700: shade-color($info, 40%) !default;
|
||||||
|
$info-800: shade-color($info, 60%) !default;
|
||||||
|
$info-900: shade-color($info, 80%) !default;
|
||||||
|
|
||||||
|
$danger-100: tint-color($danger, 80%) !default;
|
||||||
|
$danger-200: tint-color($danger, 60%) !default;
|
||||||
|
$danger-300: tint-color($danger, 40%) !default;
|
||||||
|
$danger-400: tint-color($danger, 20%) !default;
|
||||||
|
$danger-500: $danger !default;
|
||||||
|
$danger-600: shade-color($danger, 20%) !default;
|
||||||
|
$danger-700: shade-color($danger, 40%) !default;
|
||||||
|
$danger-800: shade-color($danger, 60%) !default;
|
||||||
|
$danger-900: shade-color($danger, 80%) !default;
|
||||||
|
|
||||||
|
$light-100: tint-color($light, 80%) !default;
|
||||||
|
$light-200: tint-color($light, 60%) !default;
|
||||||
|
$light-300: tint-color($light, 40%) !default;
|
||||||
|
$light-400: tint-color($light, 20%) !default;
|
||||||
|
$light-500: $light !default;
|
||||||
|
$light-600: shade-color($light, 20%) !default;
|
||||||
|
$light-700: shade-color($light, 40%) !default;
|
||||||
|
$light-800: shade-color($light, 60%) !default;
|
||||||
|
$light-900: shade-color($light, 80%) !default;
|
||||||
|
|
||||||
|
$dark-100: tint-color($dark, 80%) !default;
|
||||||
|
$dark-200: tint-color($dark, 60%) !default;
|
||||||
|
$dark-300: tint-color($dark, 40%) !default;
|
||||||
|
$dark-400: tint-color($dark, 20%) !default;
|
||||||
|
$dark-500: $dark !default;
|
||||||
|
$dark-600: shade-color($dark, 20%) !default;
|
||||||
|
$dark-700: shade-color($dark, 40%) !default;
|
||||||
|
$dark-800: shade-color($dark, 60%) !default;
|
||||||
|
$dark-900: shade-color($dark, 80%) !default;
|
||||||
119
css/scss/bootstrap/_maps.scss
Normal file
119
css/scss/bootstrap/_maps.scss
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
@import 'colors';
|
||||||
|
|
||||||
|
$theme-colors: (
|
||||||
|
'primary': $primary,
|
||||||
|
'secondary': $secondary,
|
||||||
|
'success': $success,
|
||||||
|
'info': $info,
|
||||||
|
'warning': $warning,
|
||||||
|
'danger': $danger,
|
||||||
|
'light': $light,
|
||||||
|
'dark': $dark
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$primary-map: (
|
||||||
|
'primary-100': $primary-100,
|
||||||
|
'primary-200': $primary-200,
|
||||||
|
'primary-300': $primary-300,
|
||||||
|
'primary-400': $primary-400,
|
||||||
|
'primary-500': $primary-500,
|
||||||
|
'primary-600': $primary-600,
|
||||||
|
'primary-700': $primary-700,
|
||||||
|
'primary-800': $primary-800,
|
||||||
|
'primary-900': $primary-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$secondary-map: (
|
||||||
|
'secondary-100': $secondary-100,
|
||||||
|
'secondary-200': $secondary-200,
|
||||||
|
'secondary-300': $secondary-300,
|
||||||
|
'secondary-400': $secondary-400,
|
||||||
|
'secondary-500': $secondary-500,
|
||||||
|
'secondary-600': $secondary-600,
|
||||||
|
'secondary-700': $secondary-700,
|
||||||
|
'secondary-800': $secondary-800,
|
||||||
|
'secondary-900': $secondary-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$success-map: (
|
||||||
|
'success-100': $success-100,
|
||||||
|
'success-200': $success-200,
|
||||||
|
'success-300': $success-300,
|
||||||
|
'success-400': $success-400,
|
||||||
|
'success-500': $success-500,
|
||||||
|
'success-600': $success-600,
|
||||||
|
'success-700': $success-700,
|
||||||
|
'success-800': $success-800,
|
||||||
|
'success-900': $success-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$warning-map: (
|
||||||
|
'warning-100': $warning-100,
|
||||||
|
'warning-200': $warning-200,
|
||||||
|
'warning-300': $warning-300,
|
||||||
|
'warning-400': $warning-400,
|
||||||
|
'warning-500': $warning-500,
|
||||||
|
'warning-600': $warning-600,
|
||||||
|
'warning-700': $warning-700,
|
||||||
|
'warning-800': $warning-800,
|
||||||
|
'warning-900': $warning-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$info-map: (
|
||||||
|
'info-100': $info-100,
|
||||||
|
'info-200': $info-200,
|
||||||
|
'info-300': $info-300,
|
||||||
|
'info-400': $info-400,
|
||||||
|
'info-500': $info-500,
|
||||||
|
'info-600': $info-600,
|
||||||
|
'info-700': $info-700,
|
||||||
|
'info-800': $info-800,
|
||||||
|
'info-900': $info-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$danger-map: (
|
||||||
|
'danger-100': $danger-100,
|
||||||
|
'danger-200': $danger-200,
|
||||||
|
'danger-300': $danger-300,
|
||||||
|
'danger-400': $danger-400,
|
||||||
|
'danger-500': $danger-500,
|
||||||
|
'danger-600': $danger-600,
|
||||||
|
'danger-700': $danger-700,
|
||||||
|
'danger-800': $danger-800,
|
||||||
|
'danger-900': $danger-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$light-map: (
|
||||||
|
'light-100': $light-100,
|
||||||
|
'light-200': $light-200,
|
||||||
|
'light-300': $light-300,
|
||||||
|
'light-400': $light-400,
|
||||||
|
'light-500': $light-500,
|
||||||
|
'light-600': $light-600,
|
||||||
|
'light-700': $light-700,
|
||||||
|
'light-800': $light-800,
|
||||||
|
'light-900': $light-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$dark-map: (
|
||||||
|
'dark-100': $dark-100,
|
||||||
|
'dark-200': $dark-200,
|
||||||
|
'dark-300': $dark-300,
|
||||||
|
'dark-400': $dark-400,
|
||||||
|
'dark-500': $dark-500,
|
||||||
|
'dark-600': $dark-600,
|
||||||
|
'dark-700': $dark-700,
|
||||||
|
'dark-800': $dark-800,
|
||||||
|
'dark-900': $dark-900
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$all-colors: map-merge-multiple(
|
||||||
|
$primary-map,
|
||||||
|
$secondary-map,
|
||||||
|
$success-map,
|
||||||
|
$info-map,
|
||||||
|
$warning-map,
|
||||||
|
$danger-map,
|
||||||
|
$light-map,
|
||||||
|
$dark-map
|
||||||
|
);
|
||||||
67
css/scss/bootstrap/_typography.scss
Normal file
67
css/scss/bootstrap/_typography.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
%heading {
|
||||||
|
margin-top: 0; // 1
|
||||||
|
margin-bottom: .25em;
|
||||||
|
font-family: $headings-font-family;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-style: $headings-font-style;
|
||||||
|
font-weight: $headings-font-weight;
|
||||||
|
color: var(--#{$prefix}heading-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
|
||||||
|
text-decoration: $link-decoration;
|
||||||
|
text-underline-offset: 0.25rem;
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
&:hover {
|
||||||
|
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
|
||||||
|
text-decoration: $link-hover-decoration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h1-font-size);
|
||||||
|
line-height: 1.48;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h2-font-size);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h3-font-size);
|
||||||
|
line-height: 1.52;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h4-font-size);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h5-font-size);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %heading;
|
||||||
|
@include font-size($h6-font-size);
|
||||||
|
line-height: 1.52;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 80ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternative {
|
||||||
|
font-family: $display-font-family;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
210
css/scss/bootstrap/_utilities.scss
Normal file
210
css/scss/bootstrap/_utilities.scss
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
$utilities: map-merge(
|
||||||
|
$utilities,
|
||||||
|
(
|
||||||
|
'color':
|
||||||
|
map-merge(
|
||||||
|
map-get($utilities, 'color'),
|
||||||
|
(
|
||||||
|
values: map-merge(map-get(map-get($utilities, 'color'), 'values'), ($all-colors))
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'text-wrap': (
|
||||||
|
property: 'text-wrap',
|
||||||
|
values: wrap nowrap pretty balance,
|
||||||
|
class: 'text-wrap'
|
||||||
|
),
|
||||||
|
'font-family': (
|
||||||
|
property: 'font-family',
|
||||||
|
values: (
|
||||||
|
'sans': $headings-font-family,
|
||||||
|
'serif': $font-family-base,
|
||||||
|
'serif-alt': $display-font-family,
|
||||||
|
'mono': $font-family-code
|
||||||
|
),
|
||||||
|
class: 'font-family'
|
||||||
|
),
|
||||||
|
'width': (
|
||||||
|
property: width,
|
||||||
|
class: w,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
1: $spacer * 0.25,
|
||||||
|
2: $spacer * 0.5,
|
||||||
|
3: $spacer,
|
||||||
|
4: $spacer * 1.5,
|
||||||
|
5: $spacer * 3,
|
||||||
|
6: $spacer * 6,
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'height': (
|
||||||
|
property: height,
|
||||||
|
class: h,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
1: $spacer * 0.25,
|
||||||
|
2: $spacer * 0.5,
|
||||||
|
3: $spacer,
|
||||||
|
4: $spacer * 1.5,
|
||||||
|
5: $spacer * 3,
|
||||||
|
6: $spacer * 6,
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'inset': (
|
||||||
|
property: inset,
|
||||||
|
class: inset,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
1: $spacer * 0.25,
|
||||||
|
2: $spacer * 0.5,
|
||||||
|
3: $spacer,
|
||||||
|
4: $spacer * 1.5,
|
||||||
|
5: $spacer * 3,
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'rounded-tl': (
|
||||||
|
property: border-top-left-radius,
|
||||||
|
class: rounded-tl,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-radius),
|
||||||
|
0: 0,
|
||||||
|
1: var(--#{$prefix}border-radius-sm),
|
||||||
|
2: var(--#{$prefix}border-radius),
|
||||||
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
|
5: var(--#{$prefix}border-radius-xxl),
|
||||||
|
circle: 50%,
|
||||||
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'rounded-bl': (
|
||||||
|
property: border-bottom-left-radius,
|
||||||
|
class: rounded-bl,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-radius),
|
||||||
|
0: 0,
|
||||||
|
1: var(--#{$prefix}border-radius-sm),
|
||||||
|
2: var(--#{$prefix}border-radius),
|
||||||
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
|
5: var(--#{$prefix}border-radius-xxl),
|
||||||
|
circle: 50%,
|
||||||
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'rounded-tr': (
|
||||||
|
property: border-top-right-radius,
|
||||||
|
class: rounded-tr,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-radius),
|
||||||
|
0: 0,
|
||||||
|
1: var(--#{$prefix}border-radius-sm),
|
||||||
|
2: var(--#{$prefix}border-radius),
|
||||||
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
|
5: var(--#{$prefix}border-radius-xxl),
|
||||||
|
circle: 50%,
|
||||||
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'rounded-br': (
|
||||||
|
property: border-bottom-right-radius,
|
||||||
|
class: rounded-br,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-radius),
|
||||||
|
0: 0,
|
||||||
|
1: var(--#{$prefix}border-radius-sm),
|
||||||
|
2: var(--#{$prefix}border-radius),
|
||||||
|
3: var(--#{$prefix}border-radius-lg),
|
||||||
|
4: var(--#{$prefix}border-radius-xl),
|
||||||
|
5: var(--#{$prefix}border-radius-xxl),
|
||||||
|
circle: 50%,
|
||||||
|
pill: var(--#{$prefix}border-radius-pill)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'overflow': (
|
||||||
|
class: overflow,
|
||||||
|
property: overflow,
|
||||||
|
responsive: true,
|
||||||
|
values: hidden visible clip scroll auto
|
||||||
|
),
|
||||||
|
'overflow-x': (
|
||||||
|
class: overflow-x,
|
||||||
|
property: overflow-x,
|
||||||
|
responsive: true,
|
||||||
|
values: hidden visible clip scroll auto
|
||||||
|
),
|
||||||
|
'overflow-y': (
|
||||||
|
class: overflow-y,
|
||||||
|
property: overflow-y,
|
||||||
|
responsive: true,
|
||||||
|
values: hidden visible clip scroll auto
|
||||||
|
),
|
||||||
|
'position': (
|
||||||
|
property: position,
|
||||||
|
responsive: true,
|
||||||
|
values: static relative absolute fixed sticky
|
||||||
|
),
|
||||||
|
'border': (
|
||||||
|
property: border,
|
||||||
|
responsive: true,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||||
|
var(--#{$prefix}border-color),
|
||||||
|
0: 0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'border-top': (
|
||||||
|
property: border-top,
|
||||||
|
responsive: true,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||||
|
var(--#{$prefix}border-color),
|
||||||
|
0: 0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'border-end': (
|
||||||
|
property: border-right,
|
||||||
|
responsive: true,
|
||||||
|
class: border-end,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||||
|
var(--#{$prefix}border-color),
|
||||||
|
0: 0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'border-bottom': (
|
||||||
|
property: border-bottom,
|
||||||
|
responsive: true,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||||
|
var(--#{$prefix}border-color),
|
||||||
|
0: 0
|
||||||
|
)
|
||||||
|
),
|
||||||
|
'border-start': (
|
||||||
|
property: border-left,
|
||||||
|
responsive: true,
|
||||||
|
class: border-start,
|
||||||
|
values: (
|
||||||
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||||
|
var(--#{$prefix}border-color),
|
||||||
|
0: 0
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
83
css/scss/bootstrap/_variables.scss
Normal file
83
css/scss/bootstrap/_variables.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
$prefix: 'bs-';
|
||||||
|
|
||||||
|
$primary: #005eb8;
|
||||||
|
$secondary: #e93cac;
|
||||||
|
$success: #97d700;
|
||||||
|
$info: #41b6e6;
|
||||||
|
$warning: #ffc72c;
|
||||||
|
$danger: #da291c;
|
||||||
|
|
||||||
|
$light: #fff9e5;
|
||||||
|
$dark: #33322e;
|
||||||
|
|
||||||
|
$body-color: $dark;
|
||||||
|
$body-bg: $light;
|
||||||
|
$body-color-dark: $light;
|
||||||
|
$body-bg-dark: $dark;
|
||||||
|
|
||||||
|
$font-family-base: 'Sentient';
|
||||||
|
$font-family-sans: 'Libre Franklin', sans-serif;
|
||||||
|
$font-family-code: 'Azeret Mono', monospace;
|
||||||
|
$display-font-family: 'Cormorant', serif;
|
||||||
|
$headings-font-family: 'Libre Franklin', sans-serif;
|
||||||
|
|
||||||
|
$font-size-base: 1rem;
|
||||||
|
$small-font-size: 0.875em;
|
||||||
|
$code-font-size: 0.85em;
|
||||||
|
|
||||||
|
$h1-font-size: $font-size-base * 2.5;
|
||||||
|
$h2-font-size: $font-size-base * 2;
|
||||||
|
$h3-font-size: $font-size-base * 1.75;
|
||||||
|
$h4-font-size: $font-size-base * 1.5;
|
||||||
|
$h5-font-size: $font-size-base * 1.25;
|
||||||
|
$h6-font-size: $font-size-base;
|
||||||
|
|
||||||
|
$display-font-style: italic;
|
||||||
|
$display-font-weight: 700;
|
||||||
|
$display-line-height: 1.1;
|
||||||
|
|
||||||
|
$display-font-sizes: (
|
||||||
|
1: 54px,
|
||||||
|
2: 44px,
|
||||||
|
3: 39px,
|
||||||
|
4: 33px,
|
||||||
|
5: 27px,
|
||||||
|
6: 21px
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$font-sizes: (
|
||||||
|
1: $font-size-base * 2.5,
|
||||||
|
2: $font-size-base * 2,
|
||||||
|
3: $font-size-base * 1.75,
|
||||||
|
4: $font-size-base * 1.5,
|
||||||
|
5: $font-size-base * 1.25,
|
||||||
|
6: $font-size-base * 1,
|
||||||
|
7: $font-size-base * 0.875,
|
||||||
|
8: $font-size-base * 0.75,
|
||||||
|
9: $font-size-base * 0.625
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
$spacer: 1rem;
|
||||||
|
|
||||||
|
$position-values: (
|
||||||
|
0: 0,
|
||||||
|
1: $spacer * 0.25,
|
||||||
|
2: $spacer * 0.5,
|
||||||
|
3: $spacer * 0.75,
|
||||||
|
4: $spacer * 1,
|
||||||
|
5: $spacer * 2,
|
||||||
|
6: $spacer * 3,
|
||||||
|
7: $spacer * 4,
|
||||||
|
8: $spacer * 5,
|
||||||
|
9: $spacer * 6,
|
||||||
|
25: 25%,
|
||||||
|
50: 50%,
|
||||||
|
75: 75%,
|
||||||
|
100: 100%,
|
||||||
|
auto: auto
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--#{$prefix}badge-border-radius: var(--#{$prefix}badge-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user