Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4810 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4432 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;
5110 stevensc 12 
 
4432 stevensc 13 
    &.fadeOut {
14 
        transform: scaleY(0);
15 
        opacity: 0;
16 
    }
5110 stevensc 17 
 
4432 stevensc 18 
    &.fadeIn {
19 
        transform: scaleY(1);
20 
        opacity: 1;
21 
    }
5110 stevensc 22 
 
4432 stevensc 23 
    ul {
24 
        display: flex;
25 
        flex-direction: column;
26 
        gap: 0.5rem;
5110 stevensc 27 
 
4432 stevensc 28 
        a {
29 
            white-space: nowrap;
30 
        }
31 
    }
32 
}
33 
 
4809 stevensc 34 
.user__options-dropdown {
4767 stevensc 35 
    border-top-right-radius: 0;
36 
}
37 
 
4432 stevensc 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;
5110 stevensc 45 
 
4432 stevensc 46 
    h3 {
47 
        font-weight: 600;
48 
    }
5110 stevensc 49 
 
4432 stevensc 50 
    ul {
51 
        display: flex;
52 
        flex-direction: column;
53 
        gap: 0.5rem;
5110 stevensc 54 
 
4432 stevensc 55 
        a {
56 
            color: gray !important;
5110 stevensc 57 
 
4432 stevensc 58 
            &:hover {
59 
                text-decoration: underline !important;
60 
            }
61 
        }
62 
    }
63 
}
64 
 
65 
.nav__options-dropdown {
66 
    transform: scaleY(0);
4746 stevensc 67 
    right: -10%;
4432 stevensc 68 
    opacity: 0;
69 
    padding: 1rem;
4747 stevensc 70 
    min-width: fit-content;
5110 stevensc 71 
 
4432 stevensc 72 
    ul {
73 
        display: flex;
74 
        flex-direction: column;
5110 stevensc 75 
 
4432 stevensc 76 
        a {
77 
            color: gray !important;
5110 stevensc 78 
 
4432 stevensc 79 
            &:hover {
80 
                text-decoration: underline !important;
81 
            }
82 
        }
5110 stevensc 83 
 
4766 stevensc 84 
        li:not(:last-child) {
85 
            padding-bottom: 0.5rem;
86 
        }
5110 stevensc 87 
 
88 
        li:hover .navigation-level_three {
4454 stevensc 89 
            display: block;
90 
        }
4432 stevensc 91 
    }
92 
}
93 
 
4743 stevensc 94 
.nav__options-dropdown.mobile {
95 
    top: initial;
96 
    bottom: 99%;
4745 stevensc 97 
    left: 50%;
4743 stevensc 98 
    transform-origin: bottom;
99 
}
100 
 
4809 stevensc 101 
.nav__options-dropdown.show {
4745 stevensc 102 
    transform: scaleY(1);
4432 stevensc 103 
    opacity: 1;
104 
}
105 
 
5110 stevensc 106 
li:hover .header__option.mobile~.nav__options-dropdown.mobile {
4746 stevensc 107 
    transform: scaleY(1) translateX(-50%);
108 
    opacity: 1;
109 
}
110 
 
4432 stevensc 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;
5110 stevensc 119 
 
4432 stevensc 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;
5110 stevensc 129 
 
4432 stevensc 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%;
5110 stevensc 141 
 
4432 stevensc 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 {
4767 stevensc 155 
        right: 0;
156 
        border-top-right-radius: 0;
4432 stevensc 157 
    }
5110 stevensc 158 
}