Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3503 stevensc 1 
.mainSection {
2 
  display: grid;
3 
  grid-template-columns: 1fr;
4 
}
5 
 
6 
.feedSection {
7 
  display: flex;
8 
  flex-direction: column;
9 
  gap: 10px;
10 
  overflow-x: hidden;
11 
  padding-top: 10px;
12 
}
13 
 
14 
.sectionHeader {
15 
  display: flex;
16 
  flex-direction: column;
17 
}
18 
 
19 
.suggestions {
20 
  background: $bg-color;
21 
  margin-bottom: 1rem;
22 
}
23 
 
24 
.postsList {
25 
  display: flex;
26 
  align-items: flex-start;
27 
  padding: 1rem;
28 
  gap: 0.5rem;
29 
  flex-direction: column;
30 
  border-top: 1px solid $border-primary;
31 
  h4 {
32 
    font-weight: bold;
33 
    font-size: 1.1rem;
34 
  }
35 
  span {
36 
    font-size: 0.9rem;
37 
  }
38 
  img {
39 
    width: 100%;
3608 stevensc 40 
    height: 150px;
3503 stevensc 41 
    object-fit: cover;
3608 stevensc 42 
    @include maxwidth("medium") {
43 
      height: 180px;
44 
    }
3503 stevensc 45 
  }
46 
}
47 
 
48 
.suggestionList {
49 
  margin-top: 1rem;
50 
  max-height: 30vh;
51 
  overflow: auto;
52 
}
53 
 
54 
.peopleYouMayKnow {
55 
  display: none;
56 
}
57 
 
58 
.userProfile {
59 
  background-color: $bg-color;
60 
  margin-bottom: 1rem;
61 
  padding: 0.5rem;
62 
  position: relative;
63 
  border-radius: 10px;
64 
  border: solid 1px rgb(0 0 0 / 25%);
65 
  &__header {
66 
    display: none;
67 
    flex-direction: column;
68 
    justify-content: center;
69 
    align-items: center;
70 
    margin-bottom: 1rem;
71 
    position: relative;
72 
    z-index: 0;
73 
    &__imgContainer {
74 
      margin-bottom: 0.5rem;
75 
      width: 100px;
76 
      max-height: 100px;
77 
      img {
78 
        border-radius: 50%;
3577 stevensc 79 
        background: #fff;
3503 stevensc 80 
      }
81 
    }
82 
  }
83 
 
84 
  &__headerBackground {
85 
    display: none;
86 
    position: absolute;
87 
    height: 60px;
88 
    width: 100%;
89 
    top: 0;
90 
    left: 0;
91 
    z-index: 0;
92 
    border-radius: 5px 5px 0 0;
93 
  }
94 
 
95 
  &__connectionInfo {
96 
    display: flex;
97 
    justify-content: space-around;
98 
    align-items: center;
99 
    &__infoContainer {
100 
      display: flex;
101 
      flex-direction: column;
102 
      justify-content: center;
103 
      align-items: center;
104 
      flex: 50%;
105 
      &__title {
106 
        font-size: 0.9rem;
3579 stevensc 107 
        color: $subtitle-color;
3503 stevensc 108 
      }
109 
      &__info {
110 
        font-size: 0.9rem;
111 
        padding: 0 0.3rem;
112 
        color: $font-color;
113 
      }
114 
    }
115 
  }
116 
}
117 
 
118 
.widget {
119 
  display: flex;
120 
  align-items: center;
121 
  justify-content: space-around;
122 
  background-color: $bg-color;
123 
  padding: 0.5rem;
124 
  margin-bottom: 1rem;
125 
  border-radius: 10px;
126 
  &__app {
127 
    display: flex;
128 
    flex-direction: column;
129 
    align-items: center;
130 
    justify-content: center;
131 
    flex: 100%;
132 
    text-align: center;
133 
    &__img {
134 
      width: 50px;
135 
      height: 50px;
3579 stevensc 136 
      border-radius: 50%;
3503 stevensc 137 
    }
138 
    &__title {
3579 stevensc 139 
      color: $font-color;
3503 stevensc 140 
      font-size: 0.9rem;
141 
    }
142 
  }
143 
}
144 
 
145 
@include maxwidth("medium") {
146 
  .mobile_widget {
147 
    display: none;
148 
  }
149 
 
150 
  .widget {
151 
    flex-direction: column;
152 
    &__app:not(:first-child) {
153 
      margin-top: 0.5rem;
154 
    }
155 
  }
156 
 
157 
  .mainSection {
158 
    grid-template-columns: 30% 70%;
159 
    gap: 1.5rem;
160 
    grid-template-areas:
161 
      "header feed"
162 
      "peopleknow feed"
163 
      ". feed"
164 
      "news news";
165 
    padding: 0 10%;
166 
  }
167 
  .sectionHeader {
168 
    display: flex;
169 
    flex-direction: column;
170 
    grid-area: header;
171 
  }
172 
 
173 
  .userProfile {
174 
    display: block;
175 
    &__header {
176 
      display: flex;
177 
    }
178 
 
179 
    &__headerBackground {
180 
      display: block;
181 
    }
182 
    &__connectionInfo {
183 
      flex-direction: column;
184 
      &__infoContainer:not(:last-child) {
185 
        margin-bottom: 0.5rem;
186 
      }
187 
    }
188 
  }
189 
 
190 
  .peopleYouMayKnow {
191 
    display: block;
192 
  }
193 
 
194 
  .feedSection {
195 
    grid-area: feed;
196 
  }
197 
 
198 
  .suggestions {
199 
    display: block;
200 
    // grid-area: news;
201 
  }
202 
}
203 
 
204 
@include maxwidth("large") {
205 
  .mainSection {
206 
    grid-template-columns: 25% 50% 25%;
207 
    grid-template-rows: auto auto auto;
208 
    grid-template-areas:
209 
      "header feed peopleknow"
210 
      "news feed ."
211 
      ". feed .";
212 
  }
213 
}
214 
 
215 
@include maxwidth("desktop") {
216 
  .mainSection {
217 
    grid-template-columns: 23% 50% 23% !important;
218 
    padding: 0% 5% !important;
219 
    // grid-template-columns: auto 16% minmax(520px, 30%) 16% auto;
220 
    //grid-template-areas:
221 
    //". header feed peopleknow ."
222 
    //". news feed . ."
223 
    // ". . feed . .";
224 
  }
225 
}