From 1dea56bea9cf8fff169f6be6e54e98577209708d Mon Sep 17 00:00:00 2001
From: bcanini <canini.16@osu.edu>
Date: Tue, 4 Sep 2018 16:15:03 -0400
Subject: [PATCH] asc_bootstrap - sass updates, updated how search displays in
mobile menu
---
.../assets/sass/layout/_default.scss | 1 -
.../assets/sass/layout/_header.scss | 28 +++++----
web/themes/asc_bootstrap/css/style.css | 63 +++++++++++--------
.../templates/superfish/superfish.html.twig | 48 ++------------
4 files changed, 58 insertions(+), 82 deletions(-)
diff --git a/web/themes/asc_bootstrap/assets/sass/layout/_default.scss b/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
index 788c6d5993..258f14727c 100755
--- a/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
+++ b/web/themes/asc_bootstrap/assets/sass/layout/_default.scss
@@ -177,7 +177,6 @@ p {
font-family: $font-family-sans-serif;
font-weight: 400;
font-size: 16px;
- line-height: 15px;
color: $gray-6 !important;
}
diff --git a/web/themes/asc_bootstrap/assets/sass/layout/_header.scss b/web/themes/asc_bootstrap/assets/sass/layout/_header.scss
index 307a80c602..a5989ffd9a 100644
--- a/web/themes/asc_bootstrap/assets/sass/layout/_header.scss
+++ b/web/themes/asc_bootstrap/assets/sass/layout/_header.scss
@@ -87,6 +87,13 @@
.button {
display: none;
}
+
+ @media (max-width: 768px) {
+ width: 100%;
+ padding: 15px 10px 0px;
+ background: #373535;
+ margin: 0px 0px 10px;
+ }
}
.search-icon {
@@ -102,19 +109,18 @@
}
}
-.mobile-search {
- padding: 10px;
-
- .input-group {
- width: 100%;
+.search-icon-mobile {
+ display: none;
+ float: right;
+ font-size: 24px;
+ margin: 5px 15px;
- .form-control {
- border-radius: 0;
- }
+ a {
+ color: $white;
+ }
- .input-group-btn {
- display: none;
- }
+ @media (max-width: 768px) {
+ display: block;
}
}
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index 0f8902022b..d00c80d5d1 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -1895,54 +1895,53 @@ p {
font-family: "proximanova", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 16px;
- line-height: 15px;
color: #666666 !important;
}
-/* line 189, ../assets/sass/layout/_default.scss */
+/* line 188, ../assets/sass/layout/_default.scss */
h1, h2, h3, h4, h5, h6 {
margin: 11px 0 !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-/* line 195, ../assets/sass/layout/_default.scss */
+/* line 194, ../assets/sass/layout/_default.scss */
h1 {
font-weight: bold !important;
line-height: 33px !important;
}
-/* line 200, ../assets/sass/layout/_default.scss */
+/* line 199, ../assets/sass/layout/_default.scss */
h2 {
line-height: 26px !important;
}
-/* line 204, ../assets/sass/layout/_default.scss */
+/* line 203, ../assets/sass/layout/_default.scss */
h3 {
line-height: 22px !important;
}
-/* line 208, ../assets/sass/layout/_default.scss */
+/* line 207, ../assets/sass/layout/_default.scss */
h4 {
line-height: 17px !important;
}
-/* line 212, ../assets/sass/layout/_default.scss */
+/* line 211, ../assets/sass/layout/_default.scss */
h5, h6 {
line-height: 15px !important;
}
-/* line 221, ../assets/sass/layout/_default.scss */
+/* line 220, ../assets/sass/layout/_default.scss */
.field--name-field-media-image {
padding-bottom: 15px;
}
-/* line 227, ../assets/sass/layout/_default.scss */
+/* line 226, ../assets/sass/layout/_default.scss */
.align-left .field--name-field-media-image {
padding: 0 15px 0 0;
}
-/* line 234, ../assets/sass/layout/_default.scss */
+/* line 233, ../assets/sass/layout/_default.scss */
.align-right .field--name-field-media-image {
padding: 0 0 0 15px;
}
@@ -2039,41 +2038,51 @@ aside .col-sm-3 {
.search-block-form .button {
display: none;
}
+@media (max-width: 768px) {
+ /* line 73, ../assets/sass/layout/_header.scss */
+ .search-block-form {
+ width: 100%;
+ padding: 15px 10px 0px;
+ background: #373535;
+ margin: 0px 0px 10px;
+ }
+}
-/* line 92, ../assets/sass/layout/_header.scss */
+/* line 99, ../assets/sass/layout/_header.scss */
.search-icon {
float: right !important;
cursor: pointer;
}
-/* line 96, ../assets/sass/layout/_header.scss */
+/* line 103, ../assets/sass/layout/_header.scss */
.search-icon .active-search {
min-height: 40px;
}
@media (max-width: 768px) {
- /* line 92, ../assets/sass/layout/_header.scss */
+ /* line 99, ../assets/sass/layout/_header.scss */
.search-icon {
display: none;
}
}
-/* line 105, ../assets/sass/layout/_header.scss */
-.mobile-search {
- padding: 10px;
-}
-/* line 108, ../assets/sass/layout/_header.scss */
-.mobile-search .input-group {
- width: 100%;
+/* line 112, ../assets/sass/layout/_header.scss */
+.search-icon-mobile {
+ display: none;
+ float: right;
+ font-size: 24px;
+ margin: 5px 15px;
}
-/* line 111, ../assets/sass/layout/_header.scss */
-.mobile-search .input-group .form-control {
- border-radius: 0;
+/* line 118, ../assets/sass/layout/_header.scss */
+.search-icon-mobile a {
+ color: #ffffff;
}
-/* line 115, ../assets/sass/layout/_header.scss */
-.mobile-search .input-group .input-group-btn {
- display: none;
+@media (max-width: 768px) {
+ /* line 112, ../assets/sass/layout/_header.scss */
+ .search-icon-mobile {
+ display: block;
+ }
}
-/* line 126, ../assets/sass/layout/_header.scss */
+/* line 132, ../assets/sass/layout/_header.scss */
.breadcrumb {
background-color: transparent;
}
diff --git a/web/themes/asc_bootstrap/templates/superfish/superfish.html.twig b/web/themes/asc_bootstrap/templates/superfish/superfish.html.twig
index d335cc5450..0bcd8a86f7 100644
--- a/web/themes/asc_bootstrap/templates/superfish/superfish.html.twig
+++ b/web/themes/asc_bootstrap/templates/superfish/superfish.html.twig
@@ -13,51 +13,13 @@
* @ingroup themeable
*/
#}
-
-{#<div id="search-box" class="mobile-open">
- <div class="container">
- <form action="/" method="post" id="search-block-form--2" accept-charset="UTF-8"><div><div class="container-inline">
- <h2 class="element-invisible">Search form</h2>
- <div class="form-item form-type-textfield form-item-search-block-form">
- <label for="edit-search-block-form--4">Search </label>
- <input title="Enter the terms you wish to search for." type="text" id="edit-search-block-form--4" name="search_block_form" value="" size="15" maxlength="128" class="form-text">
-</div>
-<div class="form-actions form-wrapper" id="edit-actions--3"><input type="submit" id="edit-submit--4" name="op" value="Search" class="form-submit"></div><input type="hidden" name="form_build_id" value="form-cbfoUTTKonUao7no-KgLjBnoMxzWOmImmuyHUERARZQ">
-<input type="hidden" name="form_id" value="search_block_form">
-</div>
-</div></form> </div><!-- .container -->
- </div>#}
-
+<span class="search-icon-mobile">
+ <a class="active-search">
+ <i class="fa fa-search"></i>
+ </a>
+</span>
<ul id="{{ id }}" class="{{ menu_classes }}">
-<li class="mobile-only">
- <div class="search-block-form contextual-region block block-search block-search-form-block" data-drupal-selector="search-block-form" id="block-asc-bootstrap-search" role="search">
-
- <h2 class="visually-hidden">Search</h2>
-
- </div>
-
- <form action="/search/node" method="get" id="search-block-form" class="mobile-search" accept-charset="UTF-8" data-drupal-form-fields="edit-keys">
-
-
- <div class="form-item js-form-item form-type-search js-form-type-search form-item-keys js-form-item-keys form-no-label form-group">
-
-
- <label for="edit-keys" class="control-label sr-only">Search</label>
- <div class="input-group"><input title="" data-drupal-selector="edit-keys" class="form-search form-control" placeholder="Search" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" data-toggle="tooltip" data-original-title="Enter the terms you wish to search for."><span class="input-group-btn">
- <button type="submit" value="Search" class="button js-form-submit form-submit btn-primary btn icon-only" name=""><span class="sr-only">Search</span><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></button>
- </span></div>
-
-
- </div>
-
- <div class="form-actions form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions"></div>
-
-
-
- </form>
-
-</li>
{{ menu_items }}
<li class="search-icon">
<a class="active-search">
--
GitLab