Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4980 | Rev 5010 | 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;
4961 stevensc 108
    @media (min-width: 768px) {
4980 stevensc 109
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
4961 stevensc 110
        border-radius: 10px;
111
    }
4265 stevensc 112
}
113
 
114
.feed__header {
115
    display: flex;
116
    gap: 0.5rem;
4275 stevensc 117
    padding: 5px 1rem 0;
4623 stevensc 118
    justify-content: space-between;
4624 stevensc 119
    align-items: center;
4265 stevensc 120
}
121
 
122
.feed__body {
123
    overflow-wrap: anywhere;
4274 stevensc 124
    display: flex;
125
    flex-direction: column;
126
    gap: 0.5rem;
4901 stevensc 127
    h2 {
128
        padding: 0 10px;
129
    }
4280 stevensc 130
    p,
4697 stevensc 131
    a,
132
    span {
133
        padding: 0 10px;
4699 stevensc 134
        line-height: 1.25;
4278 stevensc 135
    }
4769 stevensc 136
    & > img,
137
    & > video {
4768 stevensc 138
        width: 100%;
4770 stevensc 139
        max-height: 550px;
4981 stevensc 140
        object-fit: cover;
4768 stevensc 141
    }
4265 stevensc 142
}
143
 
144
.feed__buttons {
145
    display: flex;
4275 stevensc 146
    justify-content: space-around;
147
    border-top: 1px solid lightgray;
148
    gap: 0.5rem;
149
    padding: 5px;
150
    margin: 0 5px;
4276 stevensc 151
    .feed__share-option {
152
        flex-grow: 1;
153
    }
4265 stevensc 154
}
4309 stevensc 155
 
156
.external__share {
157
    display: flex;
158
    position: absolute;
159
    align-items: center;
4800 stevensc 160
    padding: 5px 1rem;
4309 stevensc 161
    bottom: calc(100% + 0.5rem);
162
    gap: 0.5rem;
163
    right: 0;
164
    width: 16.5rem;
165
    border-radius: 10px;
166
    background-color: #fff;
167
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
168
    &.post {
169
        transform: none;
170
        bottom: 100%;
171
        right: 1.5rem;
172
        z-index: 200;
173
    }
174
}