Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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