Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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