Skip to content
Snippets Groups Projects
Commit 206129cf authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

additional css for the catalogs search

parent bcd40944
No related branches found
No related tags found
1 merge request!93Feature/istwcms 5032 ebremner catalog search
Hide whitespace changes
Inline Side-by-side
Showing
with 127 additions and 46 deletions
css/styles.css
+ 53
− 0
View file @ 206129cf
......@@ -5916,6 +5916,59 @@ button[disabled] {
padding-right: 0;
} }
.uw-catalog-search {
margin-left: auto;
margin-right: auto;
max-width: 45rem;
padding: 0 16px;
margin: 0;
}
@media (min-width: 75rem) {
.uw-catalog-search {
padding-left: 0;
padding-right: 0;
} }
.uw-catalog-search .catalog-search-form {
display: grid;
grid-template-columns: auto 3rem;
position: relative;
}
.uw-catalog-search .catalog-search-form .form-text {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
width: 100%;
}
.uw-catalog-search .catalog-search-form .button[aria-label="search"] {
background-image: url("../source/images/icons/search_2-white.svg");
background-color: #757575;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 50%;
border: 1px solid #ccc;
border-bottom-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 3px;
height: 2.47rem;
margin: 0;
max-width: inherit;
padding: 0;
transition: background-color 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width: inherit;
}
@media (min-width: 63.1875rem) {
.uw-catalog-search .catalog-search-form .button[aria-label="search"] {
height: 2.46rem;
} }
.uw-catalog-search .catalog-search-form .button[aria-label="search"]:hover,
.uw-catalog-search .catalog-search-form .button[aria-label="search"]:focus {
background-image: url("../source/images/icons/search_2.svg");
background-color: #fff;
background-position: 50% 50%;
}
.uw-colour-bar__cbarorg-default__uw-gold--lvl1 {
background-color: #fffaaa;
}
......
css/styles.min.css
+ 1
− 1
View file @ 206129cf
Source diff could not be displayed: it is too large. Options to address this: view the blob.
js/component_scripts.min.js
+ 17
− 17
View file @ 206129cf
......@@ -338,23 +338,6 @@ else if (e.keyCode === 37) {
};
})(jQuery, Drupal);
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......@@ -390,6 +373,23 @@ else {
};
})(jQuery);
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......
source/_patterns/04-components/catalog-search/_catalog-search.scss
+ 39
− 25
View file @ 206129cf
.uw-catalog-search {
@include uw-contained-width(45rem);
margin:0;
.catalog-search-form {
display:grid;
grid-template-columns: auto 3rem;
position: relative;
input {
.form-text {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
width: 100%;
}
}
// the search button icon using the svg background function the svg
.button{
&[aria-label="search"]{
@include svg-background(search_2-white);
background-color:gesso-grayscale(gray-5);
background-position: 50% 50%;
background-repeat:no-repeat;
background-size:50%;
border:1px solid gesso-grayscale(gray-3);
.catalog-search-submit-wrapper {
display: block;
height: 2.3rem;
padding: 0;
position: absolute;
right: 0;
top: -.7rem;
width: 2.35rem;
z-index: 3;
&::after {
content:$fdsu-search-2;
display:block;
font-family: gesso-font-family(iconfont);
font-weight:200;
text-align: center;
border-bottom-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 3px;
height:2.47rem;
@include large {
height:2.46rem;
}
margin:0;
max-width:inherit;
padding:0;
transition: background-color 200ms cubic-bezier(0.4, 0, 1, 1);
vertical-align: top;
white-space: normal;
width:inherit;
&:hover,
&:focus{
@include svg-background(search_2);
background-color:gesso-grayscale(white);
background-position: 50% 50%;
}
}
}
}
.catalog-search-submit {
background-color: transparent;
border-left: solid 1px #4e4e4e;
text-indent: -9999rem;
}
}
source/_patterns/04-components/catalog-search/catalog-search.twig
+ 1
− 3
View file @ 206129cf
......@@ -5,9 +5,7 @@
<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-search-input form-item-search-input form-no-label">
<input data-drupal-selector="edit-search-input" type="text" id="edit-search-input" name="search_input" value="" size="60" maxlength="128" placeholder="Search within all catalogs" class="form-text required" required="required" aria-required="true">
</div>
<div class="catalog-search-submit-wrapper">
<input class="catalog-search-submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="">
</div>
<input aria-label="search" class="catalog-search-submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="">
<input autocomplete="off" data-drupal-selector="form-sxccibplaegc-73-lec694bsvanum6b-j-wflacshoi" type="hidden" name="form_build_id" value="form-sxCCiBplaegC_73_LEC694bSvAnuM6B-j-wFlACShOI">
<input data-drupal-selector="edit-catalog-search-all-form-form-token" type="hidden" name="form_token" value="ZwUmrQqVQLNwYel4ZKfXoIqHlDdO3R2L2wIyZNBPVPM">
<input data-drupal-selector="edit-catalog-search-all-form" type="hidden" name="form_id" value="catalog_search_all_form">
......
source/images/icons/search_2-white.svg 0 → 100644
+ 11
− 0
View file @ 206129cf
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M28.1,29.3l-7.2-10.5c4.1-3.2,5.2-9.1,2.5-13.7c-3-5-9.5-6.6-14.5-3.6c-5,3-6.6,9.5-3.6,14.5
c2.7,4.5,8.2,6.3,13,4.4l5.9,11.3c0.2,0.4,0.6,0.5,1,0.3l2.7-1.6C28.2,30.1,28.3,29.7,28.1,29.3L28.1,29.3z M18,16.7
c-3.4,2-7.8,0.9-9.8-2.5s-0.9-7.8,2.5-9.8c3.4-2,7.8-0.9,9.8,2.5S21.4,14.7,18,16.7L18,16.7z"/>
</svg>
source/images/icons/search_2.svg 0 → 100644
+ 5
− 0
View file @ 206129cf
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>search-2</title>
<path d="M28.067 29.328l-7.159-10.519c4.091-3.24 5.248-9.105 2.49-13.695-2.995-4.986-9.488-6.604-14.474-3.61-4.985 2.996-6.604 9.489-3.609 14.474 2.701 4.496 8.248 6.253 12.967 4.357l5.946 11.299c0.184 0.351 0.613 0.47 0.952 0.267l2.674-1.608c0.34-0.204 0.435-0.638 0.212-0.966zM18.049 16.689c-3.388 2.035-7.8 0.935-9.836-2.453s-0.934-7.8 2.453-9.835c3.387-2.036 7.799-0.935 9.834 2.453s0.936 7.801-2.452 9.835z"></path>
</svg>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment