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