Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4810 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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