Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3201 stevensc 1 
.user__options-dropdown,
2 
.nav__options-dropdown {
3 
  position: absolute;
4 
  right: 0;
5 
  min-width: 220px;
6 
  top: calc(100% + 10px);
7 
  background-color: var(--bg-color);
8 
  border-radius: 5px;
9 
  box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 30%);
10 
  transition: all 0.2s ease-in-out;
11 
  transform-origin: top;
12 
 
13 
  &.fadeOut {
14 
    transform: scaleY(0);
15 
    opacity: 0;
16 
  }
17 
 
18 
  &.fadeIn {
19 
    transform: scaleY(1);
20 
    opacity: 1;
21 
  }
22 
 
23 
  ul {
24 
    display: flex;
25 
    flex-direction: column;
26 
    gap: 0.5rem;
27 
 
28 
    a {
29 
      white-space: nowrap;
30 
    }
31 
  }
32 
}
33 
 
34 
.user__options-dropdown {
35 
  border-top-right-radius: 0;
36 
}
37 
 
38 
.user__options-item {
39 
  padding: 1rem 10px;
40 
  border-top: 1px solid rgba(0, 0, 0, 0.08);
41 
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
42 
  display: flex;
43 
  flex-direction: column;
44 
  gap: 0.5rem;
45 
 
46 
  h3 {
47 
    font-weight: 600;
48 
  }
49 
 
50 
  ul {
51 
    display: flex;
52 
    flex-direction: column;
53 
    gap: 0.5rem;
54 
 
55 
    a {
56 
      color: gray !important;
57 
 
58 
      &:hover {
59 
        text-decoration: underline !important;
60 
      }
61 
    }
62 
  }
63 
}
64 
 
65 
.nav__options-dropdown {
66 
  transform: scaleY(0);
67 
  right: -10%;
68 
  opacity: 0;
69 
  padding: 1rem;
70 
  min-width: fit-content;
71 
  ul {
72 
    display: flex;
73 
    flex-direction: column;
74 
    a {
75 
      color: gray;
76 
 
77 
      &:hover {
78 
        text-decoration: underline;
79 
      }
80 
    }
81 
  }
82 
 
83 
  &.level_three {
84 
    transform: scaleY(1);
85 
    transform: scaleX(0);
86 
    top: -10%;
87 
    left: 100%;
88 
    max-height: 20rem;
89 
    overflow: auto;
90 
    transform-origin: left;
91 
 
92 
    a {
93 
      max-width: 30ch;
94 
    }
95 
  }
96 
 
97 
  &.mobile {
98 
    top: initial;
99 
    bottom: 99%;
100 
    left: 50%;
101 
    transform-origin: bottom;
102 
  }
103 
 
104 
  &.show {
105 
    transform: scaleY(1);
106 
    opacity: 1;
107 
  }
108 
 
109 
  ul li:hover .level_three {
110 
    transform: scaleX(1);
111 
    opacity: 1;
112 
  }
113 
}
114 
 
115 
.user__options-description {
116 
  display: flex;
117 
  flex-direction: column;
118 
  align-items: center;
119 
  gap: 0.5rem;
120 
  padding: 10px;
121 
  left: 0;
122 
  right: initial;
123 
 
124 
  .btn__profile {
125 
    padding: 2px;
126 
    border: 1px solid #7405f9;
127 
    width: 100%;
128 
    border-radius: 30px;
129 
    color: #7405f9;
130 
    font-size: 0.9rem;
131 
    text-align: center;
132 
    transition: all 0.1s ease-in;
133 
 
134 
    &:hover {
135 
      border: 2px solid #7405f9;
136 
    }
137 
  }
138 
}
139 
 
140 
.user__options-info {
141 
  display: flex;
142 
  align-items: center;
143 
  gap: 0.5rem;
144 
  width: 100%;
145 
 
146 
  h3 {
147 
    font-weight: 600;
148 
    font-size: 1.1rem;
149 
  }
150 
}
151 
 
152 
@media (min-width: 768px) {
153 
  .nav__options-dropdown {
154 
    right: 0;
155 
    border-top-right-radius: 0;
156 
  }
157 
}