|
|
@@ -26,43 +26,12 @@
|
|
|
}
|
|
|
|
|
|
.search-top {
|
|
|
- flex-grow: 1;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- %flexgrow {
|
|
|
- flex-grow: 1;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
-
|
|
|
- // set flex-grow
|
|
|
- .search-box {
|
|
|
- @extend %flexgrow;
|
|
|
- .form-group {
|
|
|
- @extend %flexgrow;
|
|
|
- }
|
|
|
- .input-group {
|
|
|
- @extend %flexgrow;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.search-top-input-group {
|
|
|
|
|
|
// using react-bootstrap-typeahead
|
|
|
// see: https://github.com/ericgio/react-bootstrap-typeahead
|
|
|
- .bootstrap-typeahead {
|
|
|
- @extend %flexgrow;
|
|
|
- max-width: 480px;
|
|
|
-
|
|
|
- .bootstrap-typeahead-input {
|
|
|
- @extend %flexgrow;
|
|
|
- input {
|
|
|
- @extend %flexgrow;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .input-group-btn {
|
|
|
- flex-basis: 39px;
|
|
|
+ .bootstrap-typeahead-input input {
|
|
|
+ width: 400px;
|
|
|
}
|
|
|
|
|
|
.search-top-clear {
|
|
|
@@ -159,11 +128,24 @@
|
|
|
// Smartphone and Tablet
|
|
|
@media (max-width: $screen-sm-max) {
|
|
|
.search-top {
|
|
|
+ margin-top: 4px 0 0 0;
|
|
|
padding: 0;
|
|
|
- margin-right: 0;
|
|
|
border-style: none !important;
|
|
|
box-shadow: none !important;
|
|
|
-webkit-box-shadow: none !important;
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ width: 76%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-top-input-group {
|
|
|
+ .search-top-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.search-result {
|
|
|
@@ -184,10 +166,12 @@
|
|
|
// Smartphone
|
|
|
@media (max-width: $screen-xs-max) {
|
|
|
.search-top {
|
|
|
- .search-top-input-group {
|
|
|
- .btn {
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
+ .search-form {
|
|
|
+ min-width: 40%;
|
|
|
+ max-width: 50%;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
}
|
|
|
}
|
|
|
}
|