Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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