Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4315 | Rev 4317 | 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;
39 
}
40 
 
41 
.sidebar__stats {
4313 stevensc 42 
    background-color: #fff;
4299 stevensc 43 
    padding-top: 10px;
44 
    padding-bottom: 10px;
45 
    border: 1px solid lightgray;
46 
    border-top: 0;
47 
}
48 
 
49 
.sidebar__stat {
4305 stevensc 50 
    padding: 10px;
4299 stevensc 51 
    display: flex;
52 
    justify-content: space-between;
53 
    cursor: pointer;
54 
    &:hover {
55 
        background-color: rgba(0, 0, 0, 0.08);
56 
    }
4315 stevensc 57 
    & > span {
58 
        font-size: 0.9rem;
4299 stevensc 59 
        font-weight: 600;
60 
        color: gray;
61 
    }
62 
}
63 
 
64 
.sidebar__stat-number {
65 
    font-weight: bold !important;
66 
    color: #0a66c2 !important;
67 
}
68 
 
69 
.sidebar__recent-item__container {
70 
    display: flex;
71 
    flex-direction: column;
72 
    width: 100%;
73 
}
74 
 
75 
.sidebar__recent-item {
76 
    cursor: pointer;
77 
    display: flex;
78 
    align-items: center;
79 
    justify-content: space-between;
80 
    width: 100%;
4315 stevensc 81 
    padding: 10px 10px 0;
4299 stevensc 82 
}
83 
 
84 
.sidebar__recent-item > p {
4315 stevensc 85 
    font-size: 0.9rem;
4299 stevensc 86 
    font-weight: 600;
87 
    color: gray;
88 
}
89 
 
90 
.sidebar__recent-actions {
91 
    align-items: center;
92 
    display: flex;
93 
    gap: 10px;
94 
}
95 
 
96 
.sidebar__recent-icon {
97 
    background-color: #0000;
98 
    border: none;
99 
    border-radius: 50%;
100 
    height: 2rem;
101 
    width: 2rem;
102 
    display: grid;
103 
    place-items: center;
104 
    padding: 0;
105 
    cursor: pointer;
106 
    opacity: 0;
107 
    transition: all 0.2s;
108 
}
109 
 
110 
.sidebar__recent-item:hover .sidebar__recent-icon {
111 
    background-color: rgba(0, 0, 0, 0.08);
112 
    opacity: initial;
113 
}
114 
 
115 
.sidebar__options {
116 
    display: none;
117 
}
118 
 
119 
.sidebar__options.show {
120 
    display: block;
121 
}
122 
 
123 
.sideabar__footer {
124 
    display: grid;
125 
    place-items: center;
126 
}
127 
 
128 
.sideabar__footer > button {
129 
    border: none;
130 
    background-color: #0000;
131 
    width: 100%;
132 
    margin-top: 10px;
133 
    color: gray;
134 
}
135 
 
136 
.sideabar__footer > button:hover {
137 
    background-color: rgba(0, 0, 0, 0.08);
138 
}
139 
 
4314 stevensc 140 
.helper__list {
141 
    display: flex;
142 
    flex-direction: column;
4315 stevensc 143 
    padding-bottom: 10px;
4316 stevensc 144 
    transition: all 0.2s ease-in-out;
145 
    &.hide {
146 
        transform: scaleY(0);
147 
    }
148 
    &.show {
149 
        transform: scaleY(1);
150 
    }
4315 stevensc 151 
    .helper__list-item {
152 
        padding: 0 10px;
153 
        display: flex;
154 
        align-items: center;
155 
        gap: 0.5rem;
156 
        &:hover {
157 
            background-color: rgba(0, 0, 0, 0.08);
158 
        }
159 
        & > span {
160 
            font-size: 0.9rem;
161 
            font-weight: 600;
162 
            color: gray;
163 
        }
164 
    }
4314 stevensc 165 
}
166 
 
4299 stevensc 167 
@media (min-width: 576px) {
168 
    .sidebar__top {
169 
        border-radius: 10px;
170 
        border-bottom-right-radius: 0;
171 
        border-bottom-left-radius: 0;
172 
    }
173 
 
174 
    .sidebar__bottom {
175 
        border-radius: 10px;
176 
    }
177 
 
4305 stevensc 178 
    .sidebar__stats:nth-last-child(1) {
4299 stevensc 179 
        border-radius: 10px;
180 
        border-top-right-radius: 0;
181 
        border-top-left-radius: 0;
182 
    }
183 
}
184 
 
185 
@media (min-width: 768px) {
186 
    .sideabar__footer {
187 
        display: none;
188 
    }
189 
 
190 
    .sidebar__options {
191 
        display: block;
192 
    }
193 
}