Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6794 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6794 stevensc 1 
@mixin widget {
2 
    border: 1px solid lightgray;
3 
    border-radius: 10px;
4 
    background-color: #fff;
5 
}
6 
 
7 
@mixin icon {
8 
    background-color: #0000;
9 
    border: none;
10 
    color: rgba(0, 0, 0, 0.6);
11 
    cursor: pointer;
12 
    display: grid;
13 
    padding: 0;
14 
    place-items: center;
15 
    position: relative;
16 
 
17 
    &::before {
18 
        content: "";
19 
        border-radius: 50%;
20 
        height: 3rem;
21 
        width: 3rem;
22 
        transition: all 0.2s;
23 
        position: absolute;
24 
        top: 50%;
25 
        left: 50%;
26 
        transform: translate(-50%, -50%);
27 
    }
28 
 
29 
    &:hover::before {
30 
        background-color: rgba(0, 0, 0, 0.08);
31 
    }
32 
}
33 
 
34 
.button-icon {
35 
    @include icon;
36 
}
37 
 
38 
.profile__layout {
39 
    column-gap: 1rem;
40 
    row-gap: 0.5rem;
41 
    display: grid;
42 
    grid-template-columns: minmax(0, 1fr);
43 
    grid-template-rows: auto;
44 
    grid-template-areas:
45 
        "main"
46 
        "aside";
47 
 
48 
    @media screen and (min-width: 768px) {
49 
        grid-template-areas: "main aside";
50 
        grid-template-columns: minmax(0, 17fr) minmax(300px, 7fr);
51 
    }
52 
}
53 
 
54 
.profile__user-card {
55 
    @include widget;
56 
    display: flex;
57 
    flex-direction: column;
58 
    overflow: hidden;
59 
 
60 
    .cover__image-container {
61 
        width: 100%;
62 
        height: 300px;
63 
        position: relative;
64 
 
65 
        img {
66 
            width: 100%;
67 
            height: 100%;
68 
            object-fit: cover;
69 
        }
70 
    }
71 
 
72 
    .cover__edit-btn {
73 
        position: absolute;
74 
        top: 20px;
75 
        right: 20px;
76 
        background-color: #fff;
77 
        color: blueviolet;
78 
        border-radius: 50%;
79 
        height: 3rem;
80 
        width: 3rem;
81 
        font-size: 1.1rem;
82 
 
83 
        &::before {
84 
            content: initial;
85 
        }
86 
    }
87 
}
88 
 
89 
.card-content {
90 
    display: flex;
91 
    align-items: flex-start;
92 
    justify-content: space-between;
93 
    flex-wrap: wrap;
94 
 
95 
    .card-info {
96 
        display: flex;
97 
        flex-direction: column;
98 
        align-items: flex-start;
99 
 
100 
        h1 {
101 
            font-size: 24px;
102 
            font-weight: 600;
103 
            line-height: 1.25;
104 
        }
105 
 
106 
        p {
107 
            font-size: 1rem;
108 
            font-weight: 400;
109 
            line-height: 1.25;
110 
        }
111 
 
112 
        span {
113 
            font-size: 0.9rem;
114 
            font-weight: 400;
115 
        }
116 
 
117 
        a {
118 
            color: #0a66c2;
119 
            font-weight: 600;
120 
        }
121 
    }
122 
}
123 
 
124 
.card__image-options {
125 
    display: flex;
126 
    justify-content: space-between;
127 
    align-items: flex-end;
128 
 
129 
    .img {
130 
        width: 152px;
131 
        height: 152px;
132 
        margin-top: -112px;
133 
        border-radius: 50%;
134 
        border: 4px solid #fff;
135 
        background-color: #c9ced4;
136 
    }
137 
}
138 
 
139 
.description__label {
140 
    label {
141 
        font-size: 1rem;
142 
        font-weight: 600;
143 
    }
144 
 
145 
    p {
146 
        font-size: 0.9rem;
147 
    }
148 
 
149 
    margin-bottom: 1rem;
150 
}
151 
 
152 
.card-experiences {
153 
    width: 232px;
154 
 
155 
    ul {
156 
        display: flex;
157 
        flex-direction: column;
158 
        align-items: flex-start;
159 
 
160 
        span {
161 
            font-weight: 600;
162 
            font-size: 0.9rem;
163 
        }
164 
    }
165 
}
166 
 
167 
.button-actions {
168 
    display: flex;
169 
    align-items: center;
170 
    gap: 0.5rem;
171 
}
172 
 
173 
.button {
174 
    border-radius: 30px;
175 
    align-items: center;
176 
    padding-left: 1rem !important;
177 
    padding-right: 1rem !important;
178 
    border: none;
179 
    width: fit-content;
180 
    cursor: pointer;
181 
    font-weight: 600;
182 
    display: inline-flex;
183 
    justify-content: center;
184 
    min-width: 6.4rem;
185 
    max-width: 480px;
186 
    overflow: hidden;
187 
    text-align: center;
188 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
189 
}
190 
 
191 
// Experience
192 
 
193 
.experience__user-card {
194 
    @include widget;
195 
    padding: 1rem;
196 
    display: flex;
197 
    flex-direction: column;
198 
    gap: 0.5rem;
199 
    grid-column: 1;
200 
 
201 
    .card__options-container {
202 
        display: flex;
203 
        justify-content: space-between;
204 
        align-items: center;
205 
 
206 
        h2,
207 
        h4 {
208 
            font-weight: 600;
209 
            font-size: 1.4rem;
210 
        }
211 
 
212 
        .card__options-icons {
213 
            display: flex;
214 
            gap: 1.5rem;
215 
        }
216 
    }
217 
 
218 
    .card__items {
219 
        display: flex;
220 
        flex-direction: column;
221 
 
222 
        h4,
223 
        p,
224 
        span {
225 
            line-height: 1.25;
226 
        }
227 
 
228 
        h4 {
229 
            font-weight: 600;
230 
            font-size: 1rem;
231 
        }
232 
 
233 
        p,
234 
        span {
235 
            font-weight: 400;
236 
        }
237 
 
238 
        span {
239 
            font-size: 0.9rem;
240 
            color: rgba(0, 0, 0, 0.6);
241 
        }
242 
 
243 
        p:nth-last-child(1) {
244 
            margin-top: 0.5rem;
245 
        }
246 
    }
247 
}