Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6707 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6635 stevensc 1 
@use "../../../../styles/breakpoints.scss";
2 
 
3 
.navbar {
4 
  align-items: center;
5 
  background-color: $bg-color;
6 
  border-bottom: solid 1px $border-primary;
7 
  box-shadow: $shadow;
8 
  display: flex;
9 
  flex-wrap: wrap;
10 
  gap: 1rem;
11 
  height: auto;
12 
  justify-content: space-between;
13 
  margin-bottom: 1rem;
14 
  padding: 1rem 5% 0;
15 
  position: relative;
16 
  width: 100%;
17 
}
18 
 
19 
.rightNavContainer {
20 
  display: none;
21 
  align-items: center;
22 
  height: 100%;
23 
 
24 
  @media (max-width: 361px) {
25 
    gap: 5px;
26 
 
27 
    .btn {
28 
      padding: 0 !important;
29 
 
30 
      .badge {
31 
        font-size: 0.6rem;
32 
      }
33 
    }
34 
  }
35 
}
36 
 
37 
.logo {
38 
  height: 65px;
39 
  order: 1;
40 
 
41 
  img {
42 
    height: 100%;
43 
  }
44 
}
45 
 
46 
.hamburgerIcon {
47 
  color: $font-color;
48 
  font-size: 1.5rem;
49 
  order: 3;
50 
}
51 
 
52 
.searchIcon {
53 
  color: $font-color;
54 
  width: 25px;
55 
  height: 25px;
56 
  border-radius: 50%;
57 
  font-size: 1.2rem;
58 
  display: flex;
59 
  justify-content: center;
60 
  align-items: center;
61 
  margin-left: 0.5rem;
62 
}
63 
 
64 
.mailIcon {
65 
  color: $font-color;
66 
  width: 25px;
67 
  height: 25px;
68 
  font-size: 1.2rem;
69 
  display: flex;
70 
  justify-content: center;
71 
  align-items: center;
72 
  margin-right: 0.5rem;
73 
 
74 
  @media (max-width: 361px) {
75 
    margin-right: 0rem;
76 
  }
77 
}
78 
 
79 
.badge {
80 
  top: 0%;
81 
  left: 50%;
82 
  font-size: 0.7rem;
83 
  transform: translateX(-80%);
84 
  background-color: $danger;
85 
  color: #fff;
86 
  border-radius: 100px;
87 
  position: absolute;
88 
}
89 
 
90 
.bellIcon {
91 
  color: $font-color;
92 
  font-size: 1.2rem;
93 
  display: flex;
94 
  justify-content: center;
95 
  align-items: center;
96 
  font-weight: 600;
97 
  clip-path: circle(50%);
98 
 
99 
  @media (max-width: 361px) {
100 
    font-size: 1rem;
101 
    width: 21px;
102 
    height: 21px;
103 
  }
104 
}
105 
 
106 
.triangleDown {
107 
  border-left: 7px solid transparent;
108 
  border-right: 7px solid transparent;
109 
  border-top: 7px solid white;
110 
  margin-left: 0.5rem;
111 
}
112 
 
113 
.triangleUp {
114 
  border-left: 7px solid transparent;
115 
  border-right: 7px solid transparent;
116 
  border-bottom: 7px solid white;
117 
  margin-left: 0.5rem;
118 
}
119 
 
120 
.backdrop {
121 
  position: absolute;
122 
  top: 0;
123 
  left: 0;
124 
  width: 100%;
125 
  height: 100%;
126 
  background-color: rgba(0, 0, 0, 0.205);
127 
  z-index: 900;
128 
}
129 
 
130 
.searchInputContainer {
131 
  font-size: 0.9rem;
132 
  min-width: 65%;
133 
  flex: 1;
134 
  order: 1;
135 
 
136 
  form {
137 
    display: flex;
138 
    align-items: center;
139 
    width: 100%;
140 
    position: relative;
141 
  }
142 
 
143 
  input {
144 
    width: 100%;
145 
    padding: 0.2rem 1rem 0.2rem 2rem;
146 
    border-radius: 30px;
147 
    background-color: $bg-color;
148 
    color: $font-color;
149 
    border: 1px solid $border-primary;
150 
 
151 
    &::placeholder {
152 
      color: $font-color;
153 
    }
154 
  }
155 
 
156 
  button {
157 
    font-size: 1rem;
158 
    color: $font-color;
159 
    border: none;
160 
    position: absolute;
161 
    left: 0.5rem;
162 
    top: 50%;
163 
    transform: translateY(-50%);
164 
  }
165 
}
166 
 
167 
.chatIcon {
168 
  width: 30px;
169 
  height: 30px;
170 
  object-fit: contain;
171 
  margin-right: 0.2rem;
172 
  position: relative;
173 
 
174 
  &_active::before {
175 
    content: "";
176 
    width: 10px;
177 
    height: 10px;
178 
    border-radius: 50%;
179 
    background-color: red;
180 
    position: absolute;
181 
    top: -1px;
182 
    right: 1px;
183 
  }
184 
}
185 
 
186 
@media (min-width: 1000px) {
187 
  .chatIcon {
188 
    display: none;
189 
  }
190 
}
191 
 
192 
@include breakpoints.maxwidth("medium") {
193 
  .logo {
194 
    max-width: 317px;
195 
  }
196 
 
197 
  .searchInputContainer input {
198 
    padding: 0.4rem 1rem 0.4rem 2rem;
199 
  }
200 
 
201 
  .bellIcon {
202 
    background-color: initial;
203 
    color: $font-color;
204 
  }
205 
}
206 
 
207 
@include breakpoints.maxwidth("desktop") {
208 
  .searchInputContainer {
209 
    order: 3;
210 
    min-width: auto;
211 
    flex: inherit;
212 
  }
213 
 
214 
  .hamburgerIcon {
215 
    display: none;
216 
  }
217 
 
218 
  .navbar {
219 
    padding: 0 5%;
220 
    flex-wrap: nowrap;
221 
  }
222 
}