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