Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5471 stevensc 1 
@use "../../settings/mixins.scss";
2 
 
3 
.profile_info {
4 
    width: 100%;
5 
    padding: 25px 20px;
6 
    border: 1px solid $border-primary;
7 
    background-color: $bg-color;
8 
    text-align: center;
9 
    border-radius: 10px;
10 
 
11 
    h3 {
12 
        justify-content: flex-start;
13 
        font-weight: 700;
14 
        font-size: 1.3rem;
15 
        text-align: left;
16 
    }
17 
 
18 
    h4 {
19 
        position: absolute;
20 
        bottom: 0;
21 
    }
22 
 
23 
    ul {
24 
        display: flex;
25 
        gap: 5px;
26 
        justify-content: space-around;
27 
    }
28 
 
29 
    hr {
30 
        width: 80%;
31 
        margin: 1rem auto;
32 
    }
33 
 
34 
    &_header {
35 
        display: flex;
36 
        position: relative;
37 
 
38 
        &_imgContainer {
39 
            overflow: hidden;
40 
            border-radius: 100px;
41 
            margin: 0 auto;
42 
 
43 
            img {
44 
                background: #fff;
45 
            }
46 
        }
47 
    }
48 
}
49 
 
50 
.profile-info {
51 
    @include mixins.widget;
52 
    align-items: center;
53 
    display: flex;
54 
    flex-direction: column;
55 
    gap: .5rem;
56 
    padding: 1rem;
57 
    text-align: center;
58 
 
59 
    img {
60 
        border-radius: 50%;
61 
        border: 2px solid $font-color;
62 
        height: 150px;
63 
        width: 150px;
64 
    }
65 
 
66 
    h3 {
67 
        color: $title-color;
68 
        font-size: 1.1rem;
69 
        font-weight: 600;
70 
    }
71 
 
72 
    span {
73 
        color: $subtitle-color
74 
    }
75 
 
76 
    svg,
77 
    b {
78 
        color: $font-color;
79 
    }
80 
 
81 
    .row {
82 
        gap: .5rem;
83 
    }
5568 stevensc 84 
 
85 
    .social-network-header {
86 
        display: flex;
87 
        align-items: center;
5570 stevensc 88 
        justify-content: center;
89 
        position: relative;
5571 stevensc 90 
        width: 100%;
5570 stevensc 91 
 
92 
        button {
93 
            position: absolute;
94 
            right: 15%;
95 
 
96 
            svg {
97 
                font-size: 1.2rem;
98 
            }
99 
        }
5568 stevensc 100 
    }
101 
 
102 
    .social-links {
103 
        display: flex;
104 
        flex-direction: column;
105 
        gap: .5rem;
106 
        width: 100%;
107 
 
108 
        li {
109 
            border-bottom: 1px solid $border-primary;
110 
 
111 
            a {
112 
                display: flex;
113 
                align-items: center;
114 
                gap: .5rem;
115 
 
116 
                svg {
117 
                    color: $font-color
118 
                }
119 
 
120 
                span {
121 
                    white-space: nowrap;
5572 stevensc 122 
                    max-width: -webkit-fill-available;
5569 stevensc 123 
                    text-overflow: ellipsis;
124 
                    overflow: hidden;
5568 stevensc 125 
                }
126 
            }
127 
        }
128 
    }
5474 stevensc 129 
}
130 
 
131 
.profile-attr {
132 
    @include mixins.widget;
133 
    padding: 1rem;
5475 stevensc 134 
    display: flex;
135 
    flex-direction: column;
136 
    gap: .5rem;
5474 stevensc 137 
 
138 
    span,
5476 stevensc 139 
    p {
5474 stevensc 140 
        color: $font-color;
141 
    }
142 
 
5484 stevensc 143 
    ul {
144 
        display: flex;
5485 stevensc 145 
        flex-wrap: wrap;
5487 stevensc 146 
        gap: .5rem;
5484 stevensc 147 
 
5485 stevensc 148 
        li {
149 
            display: inline-flex;
5484 stevensc 150 
            width: fit-content;
5485 stevensc 151 
 
5488 stevensc 152 
            span {
5485 stevensc 153 
                background-color: $font-color;
154 
                border-radius: 30px;
155 
                color: $bg-color;
156 
                font-size: 14px;
157 
                font-weight: 600;
158 
                padding: .5rem 1rem;
159 
                width: fit-content;
160 
            }
5484 stevensc 161 
        }
162 
    }
163 
 
5474 stevensc 164 
    &-header {
165 
        display: flex;
166 
        align-items: center;
5475 stevensc 167 
        justify-content: space-between;
5476 stevensc 168 
 
5481 stevensc 169 
        h2 {
5476 stevensc 170 
            color: $title-color;
171 
            font-size: 18px;
172 
            font-weight: 600;
173 
        }
5474 stevensc 174 
    }
5476 stevensc 175 
}
176 
 
5478 stevensc 177 
.experience-item,
178 
.education-item {
5476 stevensc 179 
    display: flex;
180 
    flex-direction: column;
181 
    gap: .5rem;
182 
 
5482 stevensc 183 
    h4 {
184 
        font-size: 1rem;
185 
        color: $font-color;
186 
        font-weight: 600;
187 
    }
188 
 
5476 stevensc 189 
    &-header {
190 
        display: flex;
191 
        align-items: center;
192 
        justify-content: space-between;
5564 stevensc 193 
        position: relative;
5476 stevensc 194 
 
5481 stevensc 195 
        h3 {
5476 stevensc 196 
            font-size: 1.1rem;
197 
            color: $subtitle-color;
198 
            font-weight: 600;
199 
        }
5481 stevensc 200 
 
5564 stevensc 201 
        .icon-buttons-group {
202 
            align-items: center;
203 
            display: inline-flex;
204 
            gap: .5rem;
205 
            position: absolute;
206 
            right: 0;
207 
        }
5476 stevensc 208 
    }
5471 stevensc 209 
}