Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4319 | Rev 4620 | 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;
82
    cursor: pointer;
83
    gap: 0.5rem;
84
    padding: 10px;
85
    &:hover {
86
        background-color: whitesmoke;
87
        border-radius: 10px;
88
    }
89
}
90
 
91
.feed {
92
    background-color: #fff;
4273 stevensc 93
    border: 1px solid #d3d3d3;
4265 stevensc 94
    border-radius: 10px;
4273 stevensc 95
    display: flex;
96
    flex-direction: column;
97
    gap: 0.5rem;
4265 stevensc 98
}
99
 
100
.feed__header {
101
    display: flex;
102
    gap: 0.5rem;
4275 stevensc 103
    padding: 5px 1rem 0;
4265 stevensc 104
}
105
 
106
.feed__body {
107
    overflow-wrap: anywhere;
4274 stevensc 108
    display: flex;
109
    flex-direction: column;
110
    gap: 0.5rem;
4280 stevensc 111
    p,
112
    a {
4278 stevensc 113
        padding-left: 10px;
114
    }
4265 stevensc 115
}
116
 
117
.feed__buttons {
118
    display: flex;
4275 stevensc 119
    justify-content: space-around;
120
    border-top: 1px solid lightgray;
121
    gap: 0.5rem;
122
    padding: 5px;
123
    margin: 0 5px;
4276 stevensc 124
    .feed__share-option {
125
        flex-grow: 1;
126
    }
4265 stevensc 127
}
4309 stevensc 128
 
129
.external__share {
130
    display: flex;
131
    position: absolute;
132
    align-items: center;
133
    padding: 5px 1rem 0;
134
    bottom: calc(100% + 0.5rem);
135
    gap: 0.5rem;
136
    right: 0;
137
    width: 16.5rem;
138
    border-radius: 10px;
139
    background-color: #fff;
140
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
141
    &.post {
142
        transform: none;
143
        bottom: 100%;
144
        right: 1.5rem;
145
        z-index: 200;
146
    }
147
}