MDL-59632 search: Style search box for boost
[moodle.git] / theme / boost / scss / moodle / search.scss
1 .search-results .result {
2     margin-left: 0;
3     margin-right: 0;
4 }
6 .search-results .result .result-content {
7     margin: 7px 0;
8 }
10 .search-results .result .filename {
11     font-style: italic;
12 }
14 .search-input-wrapper {
15     margin: 0 $spacer 0 0;
16     overflow: hidden;
17     float: right;
18     width: 16px;
19     transition: width 0.5s ease, left 0.5s ease;
20 }
22 .search-input-wrapper > div {
23     float: left;
24     margin: 0;
26     .icon {
27         margin-right: 0;
28     }
29 }
31 .search-input-wrapper > form {
32     opacity: 0;
33     margin-left: 25px;
34     transition: opacity 0.5s ease-in-out;
35 }
37 .search-input-wrapper > form > input {
38     margin: 0;
39     height: 23px;
40 }
42 .search-input-wrapper form.expanded {
43     opacity: 1;
44 }
46 .search-input-wrapper.expanded {
47     width: 162px;
48 }
50 @include media-breakpoint-down(xs) {
51     .search-input-wrapper {
52         > div {
53             margin: 0;
54         }
56         > form {
57             display: none;
58         }
59         margin: 0 $spacer 0 0;
60     }
61 }
63 .search-areas-actions {
64     margin-bottom: $spacer;
65 }
67 .search-areas-actions > div {
68     margin-right: $spacer;
69     display: inline-block;
70 }