Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

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