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.
This commit is contained in:
2025-12-24 09:30:17 +01:00
parent 7ba1dfd4c8
commit 27dfb4dc70
5 changed files with 21 additions and 4 deletions

View File

@ -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. //Abstracts: Things used throughout the site such as utility classes and generic overrides.
@import "abstracts/utilities";
//@import "abstracts/base"; //@import "abstracts/base";
//@import "abstracts/utilities"; //@import "abstracts/utilities";
// Components: parts of the theme itself that are not associated with a module. // Components: parts of the theme itself that are not associated with a module.
//@import "components/";
@import "components/forms"; @import "components/forms";
// Modules: Styling for specific modules. // Modules: Styling for specific modules.

View File

@ -0,0 +1,3 @@
// Header selector for interpolation
// Example usage: #{$headings} { ... }
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
</svg>

After

Width:  |  Height:  |  Size: 271 B

View File

@ -9,7 +9,12 @@
name="s" name="s"
value="{$search_string}"> value="{$search_string}">
<button type="submit" class="search-form__btn btn"> <button type="submit" class="search-form__btn btn">
<span class="material-icons">search</span> {capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
{if $smarty.capture.svg_output}
{$smarty.capture.svg_output nofilter}
{else}
<span class="header-top__icon material-icons">search</span>
{/if}
</button> </button>
</div> </div>
</form> </form>

View File

@ -37,7 +37,6 @@
<div class="header-top js-header-top"> <div class="header-top js-header-top">
<div class="header-top__content pb-md-0 py-2"> <div class="header-top__content pb-md-0 py-2">
<div class="container"> <div class="container">
<div class="row header-top__row"> <div class="row header-top__row">
<div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none"> <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">