Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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