Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4301 | Ir a la última revisión | | Ultima modificación | Ver Log |

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