Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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