feat(main): Add base theme: This is the falcon theme out of the box.
This is falcon v3.1.2
This commit is contained in:
2
_dev/css/theme/components/search/_index.scss
Normal file
2
_dev/css/theme/components/search/_index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "search-form";
|
||||
@import "search-result";
|
||||
54
_dev/css/theme/components/search/_search-form.scss
Normal file
54
_dev/css/theme/components/search/_search-form.scss
Normal file
@ -0,0 +1,54 @@
|
||||
@use "sass:map";
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
max-width: rem-calc(620px);
|
||||
margin: 0 auto;
|
||||
|
||||
&__form-group {
|
||||
position: relative;
|
||||
@include media-breakpoint-up(md) {
|
||||
.search-result-open & {
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
height: $search-input-height;
|
||||
padding: 0 rem-calc(70px) 0 rem-calc(30px);
|
||||
line-height: $search-input-height;
|
||||
color: $gray-900;
|
||||
border-width: 1px;
|
||||
border-radius: 99em;
|
||||
|
||||
&:focus {
|
||||
background: $gray-100;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 map.get($spacers, 3);
|
||||
line-height: 1;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.search-modal {
|
||||
.modal-body {
|
||||
padding-top: rem-calc(40px);
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: rem-calc(7px) rem-calc(10px);
|
||||
}
|
||||
}
|
||||
53
_dev/css/theme/components/search/_search-result.scss
Normal file
53
_dev/css/theme/components/search/_search-result.scss
Normal file
@ -0,0 +1,53 @@
|
||||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
|
||||
.js-search-result {
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: #{math.div($search-input-height, 2) + #{map.get($spacers, 2)}} map.get($spacers, 3) map.get($spacers, 3);
|
||||
margin-top: -#{math.div($search-input-height, 2)};
|
||||
background: $white;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: map.get($spacers, 3);
|
||||
}
|
||||
|
||||
&__products {
|
||||
margin: map.get($spacers, 3) -#{map.get($spacers, 2)} 0;
|
||||
|
||||
.products-list__block {
|
||||
padding: 0 map.get($spacers, 2);
|
||||
margin: 0 0 map.get($spacers, 3);
|
||||
@include make-col(6);
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
/* stylelint-disable */
|
||||
position: sticky;
|
||||
/* stylelint-enable */
|
||||
right: 0;
|
||||
bottom: -#{$modal-inner-padding};
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
padding: map.get($spacers, 2) map.get($spacers, 3);
|
||||
margin: 0 -#{map.get($spacers, 2)};
|
||||
background: #fff;
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user