Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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