PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.5.0
Easy Elements for Elementor – Addons & Website Templates v1.5.0
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / search / css / search.css

search.css in Easy Elements for Elementor – Addons & Website Templates 1.5.0, at widgets/search/css/search.css

183 lines 3.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --e-global-color-primary: #EAA638;
3 }
4
5 .eel-search-lightbox {
6 position: fixed;
7 display: flex;
8 top: 0;
9 left: 0;
10 right: 0;
11 z-index: 999999;
12 align-items: center;
13 justify-content: center;
14 opacity: 0;
15 visibility: hidden;
16 transition: opacity 0.3s ease, visibility 0.3s ease;
17 pointer-events: none;
18 }
19
20 .eel-search-lightbox.eel-lightbox {
21 visibility: visible;
22 opacity: 1;
23 pointer-events: auto;
24 }
25
26 .eel-search-content {
27 border-radius: 0;
28 position: relative;
29 box-sizing: border-box;
30 transform: translateY(-80px);
31 opacity: 0;
32 transition: transform 0.4s ease, opacity 0.4s ease;
33 min-height: 450px;
34 display: grid;
35 place-content: center;
36 transition-delay: 0.3s;
37 z-index: 99;
38 }
39 .eel-search-content .eel-search-title {
40 text-align: center;
41 margin: 0 0 50px;
42 font-size: 30px;
43 }
44 .eel-search-content .eel-search-field {
45 width: 100%;
46 padding: 15px 40px 15px 0;
47 border-radius: 8px 0 0 8px;
48 border: none;
49 margin-bottom: 0;
50 min-width: 700px;
51 outline: none;
52 font-size: 18px;
53 background: none;
54 }
55 .eel-search-content .eel-search-submit {
56 border: none;
57 background: none;
58 border-radius: 0;
59 position: absolute;
60 cursor: pointer;
61 right: 0;
62 top: 15px;
63 padding: 0;
64 }
65 .eel-search-content .eel-search-form {
66 position: relative;
67 border-bottom: 2px solid rgba(0, 0, 0, 0.1215686275);
68 }
69 .eel-search-content .eel-search-form .eel-absl {
70 font-size: 25px;
71 }
72
73 .contact-box-description {
74 transition: all 0.5s ease 0s;
75 }
76
77 .eel-search-lightbox.eel-lightbox .eel-search-content {
78 transform: translateY(0);
79 opacity: 1;
80 }
81
82 .eel-search-close-btn {
83 position: absolute;
84 top: 20px;
85 right: 25px;
86 font-size: 25px;
87 border-radius: 100%;
88 border: none;
89 cursor: pointer;
90 color: #000;
91 z-index: 1;
92 padding: 0;
93 display: grid;
94 place-content: center;
95 margin: 0 auto;
96 }
97 .eel-search-close-btn svg {
98 height: 1em;
99 fill: #000;
100 }
101
102 body.logged-in .eel-search-close-btn {
103 top: 50px;
104 }
105
106 .eel-search-open-btn {
107 cursor: pointer;
108 padding: 0;
109 font-size: 16px;
110 display: inline-block;
111 }
112 .eel-search-open-btn svg {
113 height: 1em;
114 }
115
116 .eel-search-overlay {
117 position: absolute;
118 left: 0;
119 right: 0;
120 height: 0;
121 cursor: pointer;
122 background: #ffffff;
123 transition: all 0.5s ease;
124 z-index: 9;
125 top: 0;
126 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.031372549);
127 }
128
129 .eel-lightbox .eel-search-overlay {
130 height: 100%;
131 }
132
133 .eel-search-style-2 .eel-search-form {
134 position: relative;
135 margin: 0;
136 }
137 .eel-search-style-2 .eel-search-field {
138 height: 44px;
139 border-radius: 100px;
140 font-size: 14px;
141 width: 240px;
142 border: 1px solid rgba(97, 94, 252, 0.4);
143 padding: 0 40px 0 15px;
144 color: var(--e-global-color-text);
145 outline: none;
146 transition: all 0.4s ease-out 0s;
147 }
148 .eel-search-style-2 .eel-search-field:focus {
149 border-color: var(--e-global-color-primary);
150 }
151 .eel-search-style-2 .eel-search-submit-btn {
152 font-size: 22px;
153 color: var(--e-global-color-primary);
154 background: transparent;
155 border: none;
156 position: absolute;
157 right: 15px;
158 top: 50%;
159 transform: translateY(-50%);
160 min-width: -moz-max-content;
161 min-width: max-content;
162 padding: 0;
163 }
164 .eel-search-style-2 .eel-search-submit-btn svg {
165 width: 18px;
166 fill: var(--e-global-color-primary);
167 }
168
169 @media screen and (max-width: 991px) {
170 .eel-search-content .eel-search-field {
171 min-width: auto;
172 }
173 }
174 @media screen and (max-width: 767px) {
175 .eel-search-content {
176 min-height: 370px;
177 }
178 }
179 @media screen and (max-width: 500px) {
180 .eel-search-content {
181 max-width: 230px;
182 }
183 }