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