Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 16660 | Rev 16664 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16650 stevensc 1 
@use "../../css/shared/mixin.scss";
2 
@import "../../css/shared/variables.scss";
3 
@import "../../css/shared/breakpoints.scss";
4 
 
5 
.feed {
6 
  @include mixin.widget;
7 
  display: flex;
8 
  flex-direction: column;
9 
  padding: 1rem;
10 
 
11 
  &_header {
16653 stevensc 12 
    align-items: center;
16650 stevensc 13 
    display: flex;
14 
    position: relative;
15 
    gap: .5rem;
16 
    width: 100%;
17 
 
18 
    img {
19 
      width: 50px;
20 
      height: 50px;
21 
      border-radius: 100%;
22 
    }
23 
  }
24 
 
25 
  &_info {
26 
    display: flex;
27 
    flex-direction: column;
28 
 
16653 stevensc 29 
    h2 {
30 
      color: $title-color;
31 
      font-size: 1.1rem;
32 
      font-weight: 600;
33 
    }
34 
 
16650 stevensc 35 
    span {
36 
      align-items: center;
37 
      color: $subtitle-color;
38 
      display: flex;
39 
      gap: .5rem;
40 
    }
41 
  }
42 
}
43 
 
16655 stevensc 44 
.feed_content {
45 
  width: 100%;
46 
  display: flex;
47 
  flex-direction: column;
48 
  gap: .5rem;
49 
 
50 
  p {
51 
    color: $font-color;
52 
    font-weight: 500;
53 
  }
54 
 
16660 stevensc 55 
}
16655 stevensc 56 
 
16660 stevensc 57 
.img_container {
58 
  position: relative;
59 
  max-height: 500px;
16661 stevensc 60 
  overflow: hidden;
16660 stevensc 61 
 
62 
  img:first-child {
63 
    z-index: 3;
64 
    object-fit: cover;
65 
    width: 100%;
16661 stevensc 66 
    position: relative;
16655 stevensc 67 
  }
16660 stevensc 68 
 
69 
  img:nth-child(2) {
70 
    position: absolute;
71 
    top: 50%;
72 
    left: 0;
73 
    transform: translateY(-50%);
74 
    z-index: 1;
75 
    object-fit: cover;
76 
    height: 180%;
77 
    width: 100%;
78 
    max-height: none;
79 
    filter: blur(20px);
80 
  }
16655 stevensc 81 
}
82 
 
16650 stevensc 83 
.commentSection {
84 
  max-height: 400px;
85 
  overflow-y: auto;
86 
  background: $background-gray;
87 
  margin-top: 1rem;
88 
  padding: 1rem;
89 
}
90 
 
91 
.feedCommentContainer {
92 
  display: flex;
93 
  justify-content: flex-start;
94 
  align-items: center;
95 
  margin-top: 1rem;
96 
  gap: 10px;
97 
 
98 
  img {
99 
    border-radius: 100px;
100 
    width: 43px;
101 
    height: 43px;
102 
    object-fit: cover;
103 
  }
104 
 
105 
  .commentInput {
106 
    margin: 0;
107 
    flex: 1;
108 
    padding: 0.5rem 0;
109 
    border: none;
110 
    font-size: 1rem;
111 
  }
112 
 
113 
  .submitButton {
114 
    height: 2.5rem;
115 
    margin: 0;
116 
    width: auto;
117 
    margin-top: 0.5rem;
118 
    background-color: $primary-lightblue;
119 
    border: none;
120 
    padding: 0.5rem 1rem;
121 
    color: white !important;
122 
    border-radius: var(--global-border-radius);
123 
    border: 1px solid $primary-lightblue;
124 
    font-size: 1rem;
125 
    transition: 0.2s;
126 
 
127 
    &:hover {
128 
      background-color: $primary-lightblue-hover;
129 
    }
130 
  }
131 
}