Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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