From a3d585f233ce2c7c7a03e51b385c15779a8aa279 Mon Sep 17 00:00:00 2001 From: Christian Einvik Date: Tue, 29 Aug 2023 14:00:17 +0200 Subject: [PATCH] Start creating custom design --- sourcecode/hub/package-lock.json | 30 ++++++------ sourcecode/hub/package.json | 2 +- sourcecode/hub/resources/css/app.scss | 47 +++++++++++++++++-- .../views/components/layout/base.blade.php | 2 +- 4 files changed, 61 insertions(+), 20 deletions(-) diff --git a/sourcecode/hub/package-lock.json b/sourcecode/hub/package-lock.json index f293bee2f2..47315cd2d6 100644 --- a/sourcecode/hub/package-lock.json +++ b/sourcecode/hub/package-lock.json @@ -1,5 +1,5 @@ { - "name": "app", + "name": "hub", "lockfileVersion": 2, "requires": true, "packages": { @@ -7,7 +7,7 @@ "dependencies": { "@fontsource/lato": "^4.5.10", "@popperjs/core": "^2.11.7", - "bootstrap": "^5.3.0-alpha3", + "bootstrap": "^5.3.1", "bootstrap-icons": "^1.10.4" }, "devDependencies": { @@ -376,9 +376,9 @@ "integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug==" }, "node_modules/@popperjs/core": { - "version": "2.11.7", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", - "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -424,9 +424,9 @@ } }, "node_modules/bootstrap": { - "version": "5.3.0-alpha3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz", - "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz", + "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==", "funding": [ { "type": "github", @@ -438,7 +438,7 @@ } ], "peerDependencies": { - "@popperjs/core": "^2.11.7" + "@popperjs/core": "^2.11.8" } }, "node_modules/bootstrap-icons": { @@ -1130,9 +1130,9 @@ "integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug==" }, "@popperjs/core": { - "version": "2.11.7", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", - "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, "anymatch": { "version": "3.1.3", @@ -1168,9 +1168,9 @@ "dev": true }, "bootstrap": { - "version": "5.3.0-alpha3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz", - "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz", + "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==", "requires": {} }, "bootstrap-icons": { diff --git a/sourcecode/hub/package.json b/sourcecode/hub/package.json index 2bba248a44..136f5f42ce 100644 --- a/sourcecode/hub/package.json +++ b/sourcecode/hub/package.json @@ -14,7 +14,7 @@ "dependencies": { "@fontsource/lato": "^4.5.10", "@popperjs/core": "^2.11.7", - "bootstrap": "^5.3.0-alpha3", + "bootstrap": "^5.3.1", "bootstrap-icons": "^1.10.4" } } diff --git a/sourcecode/hub/resources/css/app.scss b/sourcecode/hub/resources/css/app.scss index 1962cc76df..2ffab4762a 100644 --- a/sourcecode/hub/resources/css/app.scss +++ b/sourcecode/hub/resources/css/app.scss @@ -1,7 +1,48 @@ -@import "bootstrap/scss/bootstrap"; @import '@fontsource/lato'; @import 'bootstrap-icons/font/bootstrap-icons.css'; -:root { - --bs-font-sans-serif: Lato, sans-serif; +// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) +@import "bootstrap/scss/functions"; + +// 2. Include any default variable overrides here +$font-family-sans-serif: Lato, sanf-serif; + +// 3. Include remainder of required Bootstrap stylesheets +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; + +// 4. Include any default map overrides here + +// 5. Include remainder of required parts +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; + +// 6. Optionally include any other parts as needed +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/helpers"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/close"; + +// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` +@import "bootstrap/scss/utilities/api"; + +// 8. Add additional custom code here +[data-bs-theme="edlib"] { + --bs-body-color: var(--bs-gray-700); + --bs-border-color: var(--bs-gray-400); + + .btn-primary { + @include button-variant($green-100, $gray-400, $gray-900, lighten($green-100, 5%), $green-100, $gray-900); + } } diff --git a/sourcecode/hub/resources/views/components/layout/base.blade.php b/sourcecode/hub/resources/views/components/layout/base.blade.php index a0f39c2e90..3f3986f052 100644 --- a/sourcecode/hub/resources/views/components/layout/base.blade.php +++ b/sourcecode/hub/resources/views/components/layout/base.blade.php @@ -1,5 +1,5 @@ - +