Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4430 | Rev 4432 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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