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:
@ -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.
|
||||||
|
|||||||
3
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
Normal file
3
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
Normal 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";
|
||||||
3
falcon/_dev/img/checkmark.svg
Normal file
3
falcon/_dev/img/checkmark.svg
Normal 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 |
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user