Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4809 | Ir a la última revisión | | 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;
12 
    &.fadeOut {
13 
        transform: scaleY(0);
14 
        opacity: 0;
15 
    }
16 
    &.fadeIn {
17 
        transform: scaleY(1);
18 
        opacity: 1;
19 
    }
20 
    ul {
21 
        display: flex;
22 
        flex-direction: column;
23 
        gap: 0.5rem;
24 
        a {
25 
            white-space: nowrap;
26 
        }
27 
    }
28 
}
29 
 
4809 stevensc 30 
.user__options-dropdown {
4767 stevensc 31 
    border-top-right-radius: 0;
32 
}
33 
 
4432 stevensc 34 
.user__options-item {
35 
    padding: 1rem 10px;
36 
    border-top: 1px solid rgba(0, 0, 0, 0.08);
37 
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
38 
    display: flex;
39 
    flex-direction: column;
40 
    gap: 0.5rem;
41 
    h3 {
42 
        font-weight: 600;
43 
    }
44 
    ul {
45 
        display: flex;
46 
        flex-direction: column;
47 
        gap: 0.5rem;
48 
        a {
49 
            color: gray !important;
50 
            &:hover {
51 
                text-decoration: underline !important;
52 
            }
53 
        }
54 
    }
55 
}
56 
 
57 
.nav__options-dropdown {
58 
    transform: scaleY(0);
4746 stevensc 59 
    right: -10%;
4432 stevensc 60 
    opacity: 0;
61 
    padding: 1rem;
4747 stevensc 62 
    min-width: fit-content;
4432 stevensc 63 
    ul {
64 
        display: flex;
65 
        flex-direction: column;
66 
        a {
67 
            color: gray !important;
68 
            &:hover {
69 
                text-decoration: underline !important;
70 
            }
71 
        }
4766 stevensc 72 
        li:not(:last-child) {
73 
            padding-bottom: 0.5rem;
74 
        }
4454 stevensc 75 
        li:hover .navLinkLevelThree {
76 
            display: block;
77 
        }
4432 stevensc 78 
    }
4454 stevensc 79 
    .navLinkLevelThree {
80 
        padding: 1rem;
81 
        border: 1px solid lightgray;
82 
        ul {
4456 stevensc 83 
            overflow: hidden;
4455 stevensc 84 
            max-height: none;
4454 stevensc 85 
        }
86 
    }
4432 stevensc 87 
}
88 
 
4743 stevensc 89 
.nav__options-dropdown.mobile {
90 
    top: initial;
91 
    bottom: 99%;
4745 stevensc 92 
    left: 50%;
4743 stevensc 93 
    transform-origin: bottom;
94 
}
95 
 
4809 stevensc 96 
.nav__options-dropdown.show {
4745 stevensc 97 
    transform: scaleY(1);
4432 stevensc 98 
    opacity: 1;
99 
}
100 
 
4747 stevensc 101 
li:hover .header__option.mobile ~ .nav__options-dropdown.mobile {
4746 stevensc 102 
    transform: scaleY(1) translateX(-50%);
103 
    opacity: 1;
104 
}
105 
 
4432 stevensc 106 
.user__options-description {
107 
    display: flex;
108 
    flex-direction: column;
109 
    align-items: center;
110 
    gap: 0.5rem;
111 
    padding: 10px;
112 
    left: 0;
113 
    right: initial;
114 
    .btn__profile {
115 
        padding: 2px;
116 
        border: 1px solid #7405f9;
117 
        width: 100%;
118 
        border-radius: 30px;
119 
        color: #7405f9;
120 
        font-size: 0.9rem;
121 
        text-align: center;
122 
        transition: all 0.1s ease-in;
123 
        &:hover {
124 
            border: 2px solid #7405f9;
125 
        }
126 
    }
127 
}
128 
 
129 
.user__options-info {
130 
    display: flex;
131 
    align-items: center;
132 
    gap: 0.5rem;
133 
    width: 100%;
134 
    h3 {
135 
        font-weight: 600;
136 
        font-size: 1.1rem;
137 
    }
138 
}
139 
 
140 
.user__option-icon {
141 
    height: 16px;
142 
    width: 16px;
143 
}
144 
 
145 
@media (min-width: 768px) {
146 
    .nav__options-dropdown {
4767 stevensc 147 
        right: 0;
148 
        border-top-right-radius: 0;
4432 stevensc 149 
    }
150 
}