From 72ba5a870e6ca540905ec765de569648e747a20f Mon Sep 17 00:00:00 2001 From: Nick Downing Date: Tue, 25 Jan 2022 16:33:51 +1100 Subject: [PATCH] More comprehensive system for displaying icons vertically centred within text --- _lib/navbar.jst | 6 ++-- _svg/fa_search.svg | 1 + _svg/icon_search_mono.svg | 4 --- css/bootstrap/_custom.scss | 48 ++++++++++++++++--------------- css/bootstrap/_reboot.scss | 13 +++++---- my_account/sign_up/index.html.jst | 24 ++++++++-------- 6 files changed, 49 insertions(+), 47 deletions(-) create mode 100644 _svg/fa_search.svg delete mode 100644 _svg/icon_search_mono.svg diff --git a/_lib/navbar.jst b/_lib/navbar.jst index c3e7c18..1c30cb5 100644 --- a/_lib/navbar.jst +++ b/_lib/navbar.jst @@ -3,9 +3,9 @@ let XDate = require('xdate') return async (env, head, body, scripts) => { //let cart = await _require('/online_store/cart.jst') + let fa_search = await env.site.get_min_svg('/_svg/fa_search.svg') let get_session = await _require('/_lib/get_session.jst') //let icon_cart_small = await env.site.get_min_svg('/_svg/icon_cart_small.svg') - let icon_search_mono = await env.site.get_min_svg('/_svg/icon_search_mono.svg') let logo_large = await env.site.get_min_svg('/_svg/logo_large.svg') let menu = await env.site.get_menu('/_menu.json') let page = await _require('/_lib/page.jst') @@ -92,7 +92,9 @@ return async (env, head, body, scripts) => { input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {} div.input-group-append { button.btn.btn-outline-secondary#search-button(type="submit") { - _out.push(icon_search_mono) + div.icon24-outer { + div.icon24-inner {_out.push(fa_search)} + } } } } diff --git a/_svg/fa_search.svg b/_svg/fa_search.svg new file mode 100644 index 0000000..1309464 --- /dev/null +++ b/_svg/fa_search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_svg/icon_search_mono.svg b/_svg/icon_search_mono.svg deleted file mode 100644 index dd2d342..0000000 --- a/_svg/icon_search_mono.svg +++ /dev/null @@ -1,4 +0,0 @@ - - search - - diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss index 0f93c88..53b4834 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -12,30 +12,32 @@ $footer-link-hover-color: darken($footer-link-color, 10%); padding-left: calc(100vw - 100%); } -// needed for svg icons inside card headers +// needed for svg icons inside buttons, card headers, etc // creates an inline element with correct width but no height -// the svg is positioned at an arbitrary position within this -.icon32-outer { - display: inline-block; - position: relative; - width: calc(32px + 1rem); - height: 0; -} -.icon32-inner { - position: absolute; - top: -22px; -} - -// apply this to svg, see _svg/icon_search.svg -.svg-icon { - display: inline-block; - width: 1em; - height: 1em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; - position: relative; - //bottom: -.125em; +// the svg is positioned within this to vertically centre on a capital letter +$icon-sizes: ( + 24: 24px, + 32: 32px, + 48: 48px, + 64: 64px +); +@each $icon-size, $icon-size-px in $icon-sizes { + .icon#{$icon-size}-outer { + display: inline-block; + position: relative; + width: $icon-size-px; + height: 0; + vertical-align: baseline; + } + .icon#{$icon-size}-inner { + position: absolute; + left: 0px; + top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height + width: $icon-size-px; + height: $icon-size-px; + fill: currentColor; + stroke: currentColor; + } } // use this to display the pi symbol without horrible blocky look in Sans diff --git a/css/bootstrap/_reboot.scss b/css/bootstrap/_reboot.scss index cd93bfe..5339e13 100644 --- a/css/bootstrap/_reboot.scss +++ b/css/bootstrap/_reboot.scss @@ -254,12 +254,13 @@ img { border-style: none; // Remove the border on images inside links in IE 10-. } -svg { - // Workaround for the SVG overflow bug in IE10/11 is still required. - // See https://github.com/twbs/bootstrap/issues/26878 - overflow: hidden; - vertical-align: middle; -} +// Nick +//svg { +// // Workaround for the SVG overflow bug in IE10/11 is still required. +// // See https://github.com/twbs/bootstrap/issues/26878 +// overflow: hidden; +// vertical-align: middle; +//} // diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index 35d13eb..e9e29ca 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -41,14 +41,14 @@ return async env => { div.accordion#accordion(role="tablist" aria-multiselectable="true") { div.card#card-1 { div.card-header#card-1-heading(role="tab") { - span.icon32-outer#card-1-tick(hidden) { - span.icon32-inner {_out.push(icon_tick)} + div.icon32-outer.mr-2#card-1-tick(hidden) { + div.icon32-inner {_out.push(icon_tick)} } - span.icon32-outer#card-1-cross(hidden) { - span.icon32-inner {_out.push(icon_cross)} + div.icon32-outer.mr-2#card-1-cross(hidden) { + div.icon32-inner {_out.push(icon_cross)} } - span.icon32-outer#card-1-spinner(hidden) { - span.icon32-inner { + div.icon32-outer.mr-2#card-1-spinner(hidden) { + div.icon32-inner { div.spinner-border(role="status") {} } } @@ -130,14 +130,14 @@ return async env => { } div.card#card-2 { div.card-header#card-2-heading(role="tab") { - span.icon32-outer#card-2-tick(hidden) { - span.icon32-inner {_out.push(icon_tick)} + div.icon32-outer.mr-2#card-2-tick(hidden) { + div.icon32-inner {_out.push(icon_tick)} } - span.icon32-outer#card-2-cross(hidden) { - span.icon32-inner {_out.push(icon_cross)} + div.icon32-outer.mr-2#card-2-cross(hidden) { + div.icon32-inner {_out.push(icon_cross)} } - span.icon32-outer#card-2-spinner(hidden) { - span.icon32-inner { + div.icon32-outer.mr-2#card-2-spinner(hidden) { + div.icon32-inner { div.spinner-border(role="status") {} } } -- 2.34.1