From 27dfb4dc70b52f145d2e921799d873dd8d5f190e Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 09:30:17 +0100 Subject: [PATCH 1/2] feat(standard-styling) Enhance search and styling Improves search bar with SVG icon support for better visual consistency. Adds utility SCSS file for managing global styles like heading selectors. Introduces a checkmark SVG asset and reorganizes custom SCSS files following the 7-in-1 structure for better maintainability. Comments out optional USP bar code in header.tpl to allow easy activation. --- falcon/_dev/css/theme/custom/_custom.scss | 11 +++++++++-- .../_dev/css/theme/custom/abstracts/_utilities.scss | 3 +++ falcon/_dev/img/checkmark.svg | 3 +++ .../views/templates/hook/is_searchbar.tpl | 7 ++++++- falcon/templates/_partials/header.tpl | 1 - 5 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 falcon/_dev/css/theme/custom/abstracts/_utilities.scss create mode 100644 falcon/_dev/img/checkmark.svg diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index a660a38..fea6de0 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -1,11 +1,18 @@ -// NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +/* +This is the main custom SCSS file for the Falcon theme. + +I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here: +https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1 + +⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +*/ //Abstracts: Things used throughout the site such as utility classes and generic overrides. +@import "abstracts/utilities"; //@import "abstracts/base"; //@import "abstracts/utilities"; // Components: parts of the theme itself that are not associated with a module. -//@import "components/"; @import "components/forms"; // Modules: Styling for specific modules. diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss new file mode 100644 index 0000000..73b6d30 --- /dev/null +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -0,0 +1,3 @@ +// Header selector for interpolation +// Example usage: #{$headings} { ... } +$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; diff --git a/falcon/_dev/img/checkmark.svg b/falcon/_dev/img/checkmark.svg new file mode 100644 index 0000000..87168de --- /dev/null +++ b/falcon/_dev/img/checkmark.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl index 4cda15b..d51da7d 100644 --- a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl +++ b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl @@ -9,7 +9,12 @@ name="s" value="{$search_string}"> diff --git a/falcon/templates/_partials/header.tpl b/falcon/templates/_partials/header.tpl index 24a382c..83681c0 100644 --- a/falcon/templates/_partials/header.tpl +++ b/falcon/templates/_partials/header.tpl @@ -37,7 +37,6 @@
-
From 51bad8030e0e56fa5b5c53000958d7744fa91f1b Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 11:52:12 +0100 Subject: [PATCH 2/2] feat(standard-styling): Add button color map --- falcon/_dev/css/theme/custom/_custom.scss | 8 ++++-- .../css/theme/custom/components/_buttons.scss | 26 +++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 falcon/_dev/css/theme/custom/components/_buttons.scss diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index fea6de0..6dcd960 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -5,14 +5,16 @@ I am loosely following the 7 in 1 structure for better organization of the style https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html + */ //Abstracts: Things used throughout the site such as utility classes and generic overrides. @import "abstracts/utilities"; //@import "abstracts/base"; -//@import "abstracts/utilities"; // Components: parts of the theme itself that are not associated with a module. +//@import "components/buttons"; @import "components/forms"; // Modules: Styling for specific modules. @@ -25,5 +27,7 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter @import "layout/swiper"; // Pages -//@import "pages/category"; +//@import "pages/checkout"; +//@import "pages/home"; +//@import "pages/listing"; //@import "pages/product"; diff --git a/falcon/_dev/css/theme/custom/components/_buttons.scss b/falcon/_dev/css/theme/custom/components/_buttons.scss new file mode 100644 index 0000000..3a64197 --- /dev/null +++ b/falcon/_dev/css/theme/custom/components/_buttons.scss @@ -0,0 +1,26 @@ +// To customize text colors per button, use this map +$btn-color: ( + "primary": $white, + "secondary": $white, + "light": $primary, + "dark": $white, +); + +// Generate button color overrides from the map +@each $name, $color in $btn-color { + .btn-#{$name}, + .btn-lg-#{$name}, + .btn-sm-#{$name} { + color: $color !important; + } + .btn-outline-#{$name}, + .btn-lg-outline-#{$name}, + .btn-sm-outline-#{$name} { + color: $color; + &:hover, + &:focus, + &:active { + color: $color !important; + } + } +}