Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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