Letters
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _search.scss
1 .l-search-bar {
2     width: 100%;
3     display: flex;
4     margin-top: 34px;
5     align-items: center;
6     justify-content: space-between;
7
8     .l-search-bar__input {
9         position: relative;
10         display: flex;
11         align-content: center;
12         width: 560px;
13         
14         .icon {
15             @include font-size(22px);
16             color: #083F4D;
17             position: absolute;
18             margin: auto;
19             top: 0;
20             bottom: 0;
21             left: 19px;
22             display: flex;
23             align-items: center;
24             justify-content: center;
25             pointer-events: none;
26         }
27
28         input {
29             font-family: $base-font;
30             font-size: 18px;
31             font-style: italic;
32             padding: 10px 20px 10px 50px;
33             border-radius: 52px;
34             border: 1px solid #D9D9D9;
35             width: 100%;
36             max-width: 580px;
37             outline: 0;
38             transition: border $ease-out 350ms;
39
40             &:focus {
41                 border-color: #007880;
42             }
43         }
44     }
45 }