Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4257 | Rev 4259 | 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;
4252 stevensc 10 
    &:hover,
11 
    &.active {
4250 stevensc 12 
        color: #000;
4252 stevensc 13 
        &::after {
14 
            transform: scaleX(1);
15 
        }
4250 stevensc 16 
    }
4252 stevensc 17 
    &::after {
4254 stevensc 18 
        border-bottom: 2px solid #000;
4252 stevensc 19 
        content: "";
4256 stevensc 20 
        bottom: -1px;
4252 stevensc 21 
        left: 0;
22 
        position: absolute;
23 
        transform: scaleX(0);
24 
        transition: transform 0.2s ease-in-out;
25 
        width: 100%;
26 
    }
4253 stevensc 27 
    & > span {
4247 stevensc 28 
        display: none;
29 
        margin: 0;
30 
        font-size: 12px;
31 
        font-weight: 400;
32 
    }
33 
}
34 
 
4251 stevensc 35 
.user__options-dropdown {
36 
    position: absolute;
4255 stevensc 37 
    right: 0;
4258 stevensc 38 
    min-width: 200px;
4257 stevensc 39 
    top: calc(100% + 10px);
4251 stevensc 40 
    background-color: #fff;
4252 stevensc 41 
    border-radius: 5px;
42 
    border-top-right-radius: 0;
43 
    box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 30%);
4255 stevensc 44 
    transition: all 0.2s ease-in-out;
4256 stevensc 45 
    &.fadeOut {
4255 stevensc 46 
        transform: scaleY(0);
47 
        opacity: 0;
48 
    }
4256 stevensc 49 
    &.fadeIn {
4255 stevensc 50 
        transform: scaleY(1);
51 
        opacity: 1;
52 
    }
4256 stevensc 53 
    ul {
54 
        display: flex;
55 
        flex-direction: column;
56 
        gap: 0.5rem;
57 
        a {
58 
            white-space: nowrap;
59 
        }
60 
    }
4251 stevensc 61 
}
62 
 
4257 stevensc 63 
.user__options-description {
64 
    display: flex;
65 
    flex-direction: column;
66 
    align-items: center;
67 
    gap: 0.5rem;
4258 stevensc 68 
    padding: 10px;
69 
    button {
70 
        padding: 2px;
71 
        border: 2px solid #7405f9;
72 
        width: 100%;
73 
        border-radius: 30px;
74 
    }
4257 stevensc 75 
}
76 
 
4258 stevensc 77 
.user__options-info {
4257 stevensc 78 
    display: flex;
79 
    align-items: center;
80 
    gap: 0.5rem;
4258 stevensc 81 
    h3 {
82 
        font-weight: 400;
83 
    }
4257 stevensc 84 
}
85 
 
4253 stevensc 86 
.user__option-icon {
87 
    height: 16px;
88 
    width: 16px;
89 
}
90 
 
4247 stevensc 91 
@media (min-width: 768px) {
4257 stevensc 92 
    .header__option {
93 
        min-width: 60px;
94 
        & > span {
95 
            display: flex;
96 
            align-items: center;
97 
        }
4247 stevensc 98 
    }
99 
}