Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
4299 stevensc 1 
.sidebar {
4306 stevensc 2 
    position: relative;
4299 stevensc 3 
    display: flex;
4 
    flex-direction: column;
5 
    text-align: center;
6 
    height: fit-content;
4306 stevensc 7 
    grid-area: sidebar;
4299 stevensc 8 
}
9 
 
10 
.sidebar__top {
11 
    align-items: center;
12 
    background-color: #fff;
13 
    border: 1px solid lightgray;
14 
    display: flex;
15 
    flex-direction: column;
16 
    overflow: hidden;
4308 stevensc 17 
    * {
18 
        margin-bottom: 0.5rem;
19 
    }
4301 stevensc 20 
    h1 {
21 
        font-size: 0.9rem;
22 
    }
4308 stevensc 23 
    .sidebar__cover {
4299 stevensc 24 
        width: 100%;
25 
        height: 60px;
26 
        object-fit: cover;
27 
        margin-bottom: -20px;
28 
    }
29 
}
30 
 
31 
.sidebar__bottom {
32 
    margin-top: 10px;
33 
    display: flex;
34 
    flex-direction: column;
35 
    align-items: center;
36 
    border: 1px solid lightgray;
37 
    background-color: #fff;
38 
    overflow: hidden;
4318 stevensc 39 
    padding: 10px 0;
4299 stevensc 40 
}
41 
 
42 
.sidebar__stats {
4313 stevensc 43 
    background-color: #fff;
4299 stevensc 44 
    padding-top: 10px;
45 
    padding-bottom: 10px;
46 
    border: 1px solid lightgray;
47 
    border-top: 0;
48 
}
49 
 
50 
.sidebar__stat {
4305 stevensc 51 
    padding: 10px;
4299 stevensc 52 
    display: flex;
53 
    justify-content: space-between;
54 
    cursor: pointer;
55 
    &:hover {
56 
        background-color: rgba(0, 0, 0, 0.08);
57 
    }
4315 stevensc 58 
    & > span {
59 
        font-size: 0.9rem;
4299 stevensc 60 
        font-weight: 600;
61 
        color: gray;
62 
    }
63 
}
64 
 
65 
.sidebar__stat-number {
66 
    font-weight: bold !important;
67 
    color: #0a66c2 !important;
68 
}
69 
 
70 
.sidebar__recent-item__container {
71 
    display: flex;
72 
    flex-direction: column;
73 
    width: 100%;
74 
}
75 
 
76 
.sidebar__recent-item {
77 
    cursor: pointer;
78 
    display: flex;
79 
    align-items: center;
80 
    justify-content: space-between;
81 
    width: 100%;
4318 stevensc 82 
    padding: 0 10px;
4299 stevensc 83 
}
84 
 
85 
.sidebar__recent-item > p {
4315 stevensc 86 
    font-size: 0.9rem;
4299 stevensc 87 
    font-weight: 600;
88 
    color: gray;
89 
}
90 
 
91 
.sidebar__recent-actions {
92 
    align-items: center;
93 
    display: flex;
94 
    gap: 10px;
95 
}
96 
 
97 
.sidebar__recent-icon {
98 
    background-color: #0000;
99 
    border: none;
100 
    border-radius: 50%;
101 
    height: 2rem;
102 
    width: 2rem;
103 
    display: grid;
104 
    place-items: center;
105 
    padding: 0;
106 
    cursor: pointer;
107 
    opacity: 0;
108 
    transition: all 0.2s;
109 
}
110 
 
111 
.sidebar__recent-item:hover .sidebar__recent-icon {
112 
    background-color: rgba(0, 0, 0, 0.08);
113 
    opacity: initial;
114 
}
115 
 
116 
.sidebar__options {
117 
    display: none;
118 
}
119 
 
120 
.sidebar__options.show {
121 
    display: block;
122 
}
123 
 
124 
.sideabar__footer {
125 
    display: grid;
126 
    place-items: center;
127 
}
128 
 
129 
.sideabar__footer > button {
130 
    border: none;
131 
    background-color: #0000;
132 
    width: 100%;
133 
    margin-top: 10px;
134 
    color: gray;
135 
}
136 
 
137 
.sideabar__footer > button:hover {
138 
    background-color: rgba(0, 0, 0, 0.08);
139 
}
140 
 
4314 stevensc 141 
.helper__list {
142 
    display: flex;
143 
    flex-direction: column;
4316 stevensc 144 
    transition: all 0.2s ease-in-out;
4319 stevensc 145 
    overflow: hidden;
4316 stevensc 146 
    &.hide {
4317 stevensc 147 
        height: 0;
4316 stevensc 148 
    }
149 
    &.show {
4317 stevensc 150 
        height: auto;
4316 stevensc 151 
    }
4315 stevensc 152 
    .helper__list-item {
153 
        padding: 0 10px;
154 
        display: flex;
155 
        align-items: center;
156 
        gap: 0.5rem;
157 
        &:hover {
158 
            background-color: rgba(0, 0, 0, 0.08);
159 
        }
160 
        & > span {
161 
            font-size: 0.9rem;
162 
            font-weight: 600;
163 
            color: gray;
4320 stevensc 164 
            text-align: left;
4315 stevensc 165 
        }
166 
    }
4314 stevensc 167 
}
168 
 
4299 stevensc 169 
@media (min-width: 576px) {
170 
    .sidebar__top {
171 
        border-radius: 10px;
172 
        border-bottom-right-radius: 0;
173 
        border-bottom-left-radius: 0;
174 
    }
175 
 
176 
    .sidebar__bottom {
177 
        border-radius: 10px;
178 
    }
179 
 
4305 stevensc 180 
    .sidebar__stats:nth-last-child(1) {
4299 stevensc 181 
        border-radius: 10px;
182 
        border-top-right-radius: 0;
183 
        border-top-left-radius: 0;
184 
    }
185 
}
186 
 
187 
@media (min-width: 768px) {
188 
    .sideabar__footer {
189 
        display: none;
190 
    }
191 
 
192 
    .sidebar__options {
193 
        display: block;
194 
    }
195 
}