Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4913 | Rev 5455 | 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 
 
3 
.userImgContainer {
4 
  display: flex;
5 
  align-items: center;
6 
  position: relative;
7 
  gap: 1rem;
8 
  cursor: pointer;
4913 stevensc 9 
  display: none;
10 
  order: 4;
3488 stevensc 11 
  .d-flex,
12 
  .d-inline-flex {
13 
    gap: 5px;
14 
  }
15 
  h3 {
16 
    font-weight: bold;
17 
  }
18 
}
19 
 
20 
.userImg {
21 
  width: 45px;
22 
  object-fit: contain;
23 
  border-radius: 50%;
3511 stevensc 24 
  background-color: #fff;
3488 stevensc 25 
}
26 
 
27 
.userDropdown {
28 
  position: absolute;
29 
  top: 100%;
30 
  right: 0;
31 
  background-color: $bg-color;
32 
  width: 220px;
33 
  box-shadow: $light-shadow;
34 
  border: 1px solid $border-primary;
35 
  overflow: hidden;
36 
  z-index: 1000;
37 
  @media (max-width: 767px) {
38 
    right: 0;
39 
  }
40 
  ul {
41 
    display: flex;
42 
    flex-direction: column;
43 
    justify-content: center;
44 
    padding: 1.5rem;
45 
    li:not(:first-child) {
46 
      margin-top: 1rem;
47 
    }
48 
    a {
49 
      color: $font-color;
50 
      font-size: 1rem;
51 
      &:hover {
52 
        color: $font-color;
3502 stevensc 53 
        font-weight: bold;
3488 stevensc 54 
      }
55 
    }
56 
    .logOutContainer {
57 
      &__a {
58 
        font-weight: 600;
59 
        &:hover {
60 
          color: $danger;
61 
        }
62 
      }
63 
    }
64 
  }
65 
}
66 
 
67 
.fadeIn {
68 
  transform-origin: top;
69 
  animation: fadeIn 0.3s;
70 
}
71 
 
72 
.fadeOut {
73 
  transform-origin: top;
74 
  animation: fadeOut 0.3s;
75 
}
76 
 
77 
@keyframes fadeIn {
78 
  0% {
79 
    transform: scaleY(0);
80 
  }
81 
  100% {
82 
    transform: scaleY(1);
83 
  }
84 
}
85 
@keyframes fadeOut {
86 
  0% {
87 
    transform: scaleY(1);
88 
  }
89 
  100% {
90 
    transform: scaleY(0);
91 
  }
92 
}
93 
 
94 
@include breakpoints.maxwidth("medium") {
4913 stevensc 95 
  .userImgContainer{
96 
    order: 2;
97 
    display: flex;
98 
  }
3488 stevensc 99 
  .userImg {
100 
    width: 65px;
101 
  }
102 
}
4913 stevensc 103 
 
4917 stevensc 104 
@include breakpoints.maxwidth("desktop") {
4913 stevensc 105 
  .userImgContainer{
106 
    order: 4;
107 
  }
108 
}