Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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