Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7148 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6830 stevensc 1 
.feed__share {
2 
    background-color: #fff;
3 
    display: grid;
4 
    gap: 1rem;
5 
    padding: 10px;
6 
    width: 100%;
7 
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
8 
 
9 
    @media (min-width: 768px) {
10 
        border-radius: 10px;
11 
    }
12 
}
13 
 
14 
.feed__input-container {
15 
    display: flex;
16 
    align-items: center;
17 
    gap: 0.5rem;
18 
 
19 
    .feed__input {
20 
        align-items: center;
21 
        border: 1px solid lightgray;
22 
        border-radius: 30px;
23 
        color: gray;
24 
        display: flex;
25 
        gap: 0.5rem;
26 
        padding: 10px;
27 
        padding-left: 1rem;
28 
        overflow: hidden;
29 
        flex: 1;
30 
        cursor: pointer;
31 
 
32 
        &:hover {
33 
            background-color: rgba(0, 0, 0, 0.08);
34 
        }
35 
 
36 
        input {
37 
            background-color: transparent;
38 
            border: none;
39 
            cursor: pointer;
40 
            outline: none;
41 
            flex: 1;
42 
            font-weight: 600;
43 
        }
44 
    }
45 
}
46 
 
47 
.feed__section {
48 
    display: flex;
49 
    flex-direction: column;
50 
    grid-area: main;
51 
    gap: 1rem;
52 
    position: relative;
53 
}
54 
 
55 
.feed__info {
56 
    display: flex;
57 
    flex-direction: column;
58 
    justify-content: center;
59 
    gap: 5px;
60 
 
61 
    &>a>h2 {
62 
        font-size: 1rem;
63 
        font-weight: bold;
64 
    }
65 
 
66 
    &>p {
67 
        font-size: 0.8rem;
68 
        color: gray;
69 
        line-height: 1.5;
70 
    }
71 
 
72 
    .time__elapse {
73 
        align-items: center;
74 
        display: flex;
75 
        font-size: 14px;
76 
        gap: 5px;
77 
 
78 
        .time__elapse-icon {
79 
            font-size: 14px;
80 
        }
81 
    }
82 
}
83 
 
84 
.feed__share-options {
85 
    display: flex;
86 
    justify-content: space-evenly;
87 
}
88 
 
89 
.feed__share-option {
90 
    align-items: center;
91 
    display: inline-flex;
92 
    justify-content: center;
93 
    cursor: pointer;
94 
    gap: 0.5rem;
95 
    padding: 10px;
96 
 
97 
    &:hover {
98 
        background-color: whitesmoke;
99 
        border-radius: 10px;
100 
    }
101 
 
102 
    h4 {
103 
        display: none;
104 
    }
105 
 
106 
    @media (min-width: 1200px) {
107 
        justify-content: flex-start;
108 
 
109 
        h4 {
110 
            display: initial;
111 
        }
112 
    }
113 
}
114 
 
115 
.feed {
116 
    background-color: #fff;
117 
    display: flex;
118 
    flex-direction: column;
119 
    gap: 0.5rem;
120 
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
121 
    padding: 0;
122 
 
123 
    @media (min-width: 768px) {
124 
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
125 
        border-radius: 10px;
126 
    }
127 
}
128 
 
129 
.feed__header {
130 
    display: flex;
131 
    gap: 0.5rem;
132 
    padding: 5px 1rem 0;
133 
    justify-content: space-between;
134 
    align-items: center;
7148 stevensc 135 
    position: relative;
6830 stevensc 136 
}
137 
 
138 
.feed__body {
139 
    overflow-wrap: anywhere;
140 
    display: flex;
141 
    flex-direction: column;
142 
    gap: 0.5rem;
143 
 
7384 stevensc 144 
    h2,
145 
    p,
146 
    a,
147 
    span {
6830 stevensc 148 
        padding: 0 10px;
149 
    }
150 
 
151 
    p,
152 
    a,
153 
    span {
7384 stevensc 154 
 
6830 stevensc 155 
        line-height: 1.25;
156 
    }
157 
 
7384 stevensc 158 
    a {
159 
        color: #00bfff;
160 
        font-weight: 600;
161 
    }
162 
 
6830 stevensc 163 
    &>img,
164 
    &>video {
165 
        width: 100%;
166 
        max-height: 550px;
167 
        object-fit: cover;
168 
    }
169 
}
170 
 
171 
.feed__buttons {
172 
    display: flex;
173 
    justify-content: space-around;
174 
    border-top: 1px solid lightgray;
175 
    gap: 0.5rem;
176 
    padding: 5px;
177 
    margin: 0 5px;
178 
 
179 
    .feed__share-option {
180 
        flex-grow: 1;
181 
    }
182 
}
183 
 
184 
.external__share {
185 
    display: flex;
186 
    position: absolute;
187 
    align-items: center;
188 
    padding: 5px 1rem;
189 
    bottom: calc(100% + 0.5rem);
190 
    gap: 0.5rem;
191 
    right: 0;
192 
    width: 16.5rem;
193 
    border-radius: 10px;
194 
    background-color: #fff;
195 
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
196 
 
197 
    &.post {
198 
        transform: none;
199 
        bottom: 100%;
200 
        right: 1.5rem;
201 
        z-index: 200;
202 
    }
203 
}