Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5436 stevensc 1 
@use "../../settings/mixins.scss";
2 
 
3 
.suggests_widget {
4 
    @include mixins.widget;
5 
    display: block;
6 
 
7 
    &-header {
8 
        align-items: center;
9 
        display: flex;
10 
        justify-content: space-between;
11 
        padding: 1rem;
12 
        position: relative;
13 
 
14 
        h3 {
15 
            color: $title-color;
16 
            font-weight: 600;
17 
            font-size: 1.1rem;
18 
        }
19 
 
20 
        span {
21 
            color: $subtitle-color;
22 
            font-weight: 600;
23 
            font-size: 1rem;
24 
            cursor: pointer;
25 
        }
26 
    }
27 
 
28 
    &>.suggest-list {
29 
        max-height: 265px;
30 
        overflow: auto;
31 
        width: 100%;
32 
        display: flex;
33 
        flex-direction: row;
34 
 
35 
        @include mixins.for-size(tablet-landscape) {
36 
            flex-direction: column;
37 
 
38 
            &::-webkit-scrollbar-thumb {
39 
                visibility: visible;
40 
            }
41 
        }
42 
    }
43 
}
44 
 
45 
.user {
46 
    align-items: center;
47 
    display: flex;
48 
    padding: 1rem;
49 
    gap: 0.5rem;
50 
    width: -webkit-fill-available;
51 
 
52 
    img {
53 
        border-radius: 50%;
54 
        max-width: 3.3rem;
55 
        background: #fff;
56 
    }
57 
 
5447 stevensc 58 
    div.d-inline-flex {
5436 stevensc 59 
        gap: 0.5rem;
60 
    }
61 
 
62 
    a.btn,
63 
    button.btn {
64 
        padding: 0.2rem 0.6rem;
65 
        white-space: nowrap;
66 
    }
67 
 
68 
    h4 {
69 
        color: $font-color;
5447 stevensc 70 
        font-weight: 600;
5436 stevensc 71 
        line-height: 1.4;
72 
    }
73 
 
74 
    @include mixins.for-size(phone) {
75 
        border-right: 1px solid $border-primary;
76 
 
77 
        &:last-child {
78 
            border-right: none;
79 
        }
80 
    }
81 
 
82 
    @include mixins.for-size(tablet-portrait) {
83 
        border-top: 1px solid $border-primary;
84 
    }
85 
}
86 
 
87 
.app-widget {
88 
    @include mixins.widget;
89 
    align-items: center;
90 
    display: flex;
91 
    flex-direction: column;
92 
    gap: .5rem;
5437 stevensc 93 
    padding: 1rem;
5436 stevensc 94 
    position: relative;
95 
 
5441 stevensc 96 
    span {
5436 stevensc 97 
        font-weight: 600;
98 
        color: $subtitle-color;
99 
        width: fit-content;
100 
    }
101 
 
102 
    img {
103 
        width: 50px;
104 
        height: 50px;
105 
        border-radius: 100px;
106 
    }
5438 stevensc 107 
}
108 
 
109 
.posts-widget {
110 
    @include mixins.widget;
111 
    padding: 1rem;
112 
    display: flex;
113 
    flex-direction: column;
114 
    gap: 1rem;
115 
 
116 
    h3 {
117 
        color: $title-color;
118 
        font-size: 1.1rem;
119 
        font-weight: 600;
120 
    }
121 
 
122 
    .posts-list {
123 
        display: flex;
124 
        flex-direction: column;
5949 stevensc 125 
        gap: .5rem;
5944 stevensc 126 
        max-height: 380px;
5438 stevensc 127 
        overflow: auto;
128 
    }
129 
 
130 
    .post-item {
131 
        display: flex;
132 
        gap: .5rem;
133 
 
134 
        img {
5949 stevensc 135 
            height: calc(76px - 1rem);
136 
            max-width: 110px;
5438 stevensc 137 
            object-fit: cover;
138 
        }
139 
 
140 
        h4 {
141 
            font-weight: 600;
142 
            font-size: 1.2rem;
143 
            color: $subtitle-color;
5944 stevensc 144 
            white-space: nowrap;
5949 stevensc 145 
            width: -webkit-fill-available;
5944 stevensc 146 
            overflow: hidden;
147 
            text-overflow: ellipsis;
5438 stevensc 148 
        }
149 
 
150 
        span {
151 
            color: $font-color;
5949 stevensc 152 
            font-size: .8rem;
5438 stevensc 153 
        }
154 
 
5949 stevensc 155 
        .post-info {
156 
            display: flex;
157 
            flex-direction: column;
158 
        }
159 
 
5438 stevensc 160 
        .btn {
161 
            width: fit-content;
162 
        }
163 
    }
5446 stevensc 164 
}
165 
 
166 
.daily_pulse-widget {
167 
    @include mixins.widget;
168 
    flex-direction: column;
169 
    display: flex;
170 
    height: fit-content;
171 
    padding: 1rem 0.5rem;
172 
    gap: .5rem;
173 
 
174 
    h3 {
175 
        color: $title-color;
176 
        font-weight: 700;
177 
        font-size: 1.1rem;
178 
    }
179 
 
180 
    span {
181 
        color: $subtitle-color;
182 
        font-weight: 600;
183 
    }
184 
 
185 
    .daily_pulse-quest {
186 
        align-items: center;
187 
        display: flex;
188 
        flex-direction: column;
189 
        gap: .5rem;
190 
 
191 
        h4 {
192 
            font-weight: 600;
193 
            color: $title-color;
194 
        }
195 
 
196 
        ul {
197 
            display: flex;
198 
            gap: .5rem;
199 
 
200 
            li {
201 
                transition: all 300ms;
202 
 
203 
                &:hover {
204 
                    transform: translateY(-10px);
205 
                }
206 
            }
207 
 
208 
            img {
209 
                width: 32px;
210 
                height: 32px;
211 
                border-radius: 50%;
212 
            }
213 
        }
214 
    }
5462 stevensc 215 
}
216 
 
217 
.user-info {
218 
    @include mixins.widget;
219 
    align-items: center;
220 
    display: flex;
221 
    flex-direction: column;
222 
    gap: .5rem;
223 
    padding: 1rem;
224 
    text-align: center;
225 
 
226 
    img {
227 
        border-radius: 50%;
228 
        border: 2px solid $font-color;
229 
        height: 150px;
230 
        width: 150px;
231 
    }
232 
 
233 
    p {
234 
        color: $subtitle-color
235 
    }
236 
 
237 
    a,
238 
    svg {
239 
        color: $font-color;
240 
    }
241 
 
242 
    ul {
243 
        align-items: start;
244 
        display: flex;
245 
        flex-direction: column;
246 
        gap: .5rem;
247 
        width: 100%;
248 
    }
249 
 
250 
    .user-status {
251 
        display: flex;
252 
        align-items: center;
253 
        gap: .5rem;
254 
        justify-content: space-around;
255 
    }
5436 stevensc 256 
}