Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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