Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6632 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: #fff;
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 
 
72 
    ul {
73 
        display: flex;
74 
        flex-direction: column;
75 
 
76 
        a {
77 
            color: gray !important;
78 
 
79 
            &:hover {
80 
                text-decoration: underline !important;
81 
            }
82 
        }
83 
 
84 
        li:not(:last-child) {
85 
            padding-bottom: 0.5rem;
86 
        }
87 
 
88 
        li:hover .navigation-level_three {
89 
            display: block;
90 
        }
91 
    }
92 
}
93 
 
94 
.nav__options-dropdown.mobile {
95 
    top: initial;
96 
    bottom: 99%;
97 
    left: 50%;
98 
    transform-origin: bottom;
99 
}
100 
 
101 
.nav__options-dropdown.show {
102 
    transform: scaleY(1);
103 
    opacity: 1;
104 
}
105 
 
106 
li:hover .header__option.mobile~.nav__options-dropdown.mobile {
107 
    transform: scaleY(1) translateX(-50%);
108 
    opacity: 1;
109 
}
110 
 
111 
.user__options-description {
112 
    display: flex;
113 
    flex-direction: column;
114 
    align-items: center;
115 
    gap: 0.5rem;
116 
    padding: 10px;
117 
    left: 0;
118 
    right: initial;
119 
 
120 
    .btn__profile {
121 
        padding: 2px;
122 
        border: 1px solid #7405f9;
123 
        width: 100%;
124 
        border-radius: 30px;
125 
        color: #7405f9;
126 
        font-size: 0.9rem;
127 
        text-align: center;
128 
        transition: all 0.1s ease-in;
129 
 
130 
        &:hover {
131 
            border: 2px solid #7405f9;
132 
        }
133 
    }
134 
}
135 
 
136 
.user__options-info {
137 
    display: flex;
138 
    align-items: center;
139 
    gap: 0.5rem;
140 
    width: 100%;
141 
 
142 
    h3 {
143 
        font-weight: 600;
144 
        font-size: 1.1rem;
145 
    }
146 
}
147 
 
148 
.user__option-icon {
149 
    height: 16px;
150 
    width: 16px;
151 
}
152 
 
153 
@media (min-width: 768px) {
154 
    .nav__options-dropdown {
155 
        right: 0;
156 
        border-top-right-radius: 0;
157 
    }
158 
}