Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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