WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/dashboard/templates/linkedin/Feed/Feed.scss



    background-color: #fff;
    display: grid;
    gap: 1rem;
    padding: 10px;
    width: 100%;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 
    @media (min-width: 768px) {
 
        border-radius: 10px;
    }
}

 
.feed__input-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
 
    .feed__input {
        align-items: center;
        border: 1px solid lightgray;
        border-radius: 30px;

        padding: 10px;
        padding-left: 1rem;
        overflow: hidden;
        flex: 1;
        cursor: pointer;
 
        &:hover {
            background-color: rgba(0, 0, 0, 0.08);
        }
 
        input {
            background-color: transparent;
            border: none;
            cursor: pointer;
            outline: none;

.feed__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
 
    &>a>h2 {
        font-size: 1rem;
        font-weight: bold;
    }

 
    &>p {
        font-size: 0.8rem;
        color: gray;
        line-height: 1.5;
    }
 
    .time__elapse {
        align-items: center;
        display: flex;
        font-size: 14px;
        gap: 5px;
 
        .time__elapse-icon {
            font-size: 14px;
        }
    }

    display: inline-flex;
    justify-content: center;
    cursor: pointer;
    gap: 0.5rem;
    padding: 10px;
 
    &:hover {
        background-color: whitesmoke;
        border-radius: 10px;
    }
 
    h4 {
        display: none;
    }
 
    @media (min-width: 1200px) {
        justify-content: flex-start;
 
        h4 {
            display: initial;
        }
    }
}

.feed {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
 
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
 
    @media (min-width: 768px) {
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }
}

.feed__body {
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
 
    h2 {
        padding: 0 10px;
    }
 
    p,
    a,
    span {
        padding: 0 10px;
        line-height: 1.25;
    }
 
    &>img,
    &>video {
        width: 100%;
        max-height: 550px;
        object-fit: cover;
    }
}

    justify-content: space-around;
    border-top: 1px solid lightgray;
    gap: 0.5rem;
    padding: 5px;
    margin: 0 5px;
 
    .feed__share-option {
        flex-grow: 1;
    }
}

    right: 0;
    width: 16.5rem;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);
 
    &.post {
        transform: none;
        bottom: 100%;
        right: 1.5rem;
        z-index: 200;
    }
}


Rev 5010	Rev 5281
Línea 2...	Línea 2...
2	`background-color: #fff;`	2	`background-color: #fff;`
3	`display: grid;`	3	`display: grid;`
4	`gap: 1rem;`	4	`gap: 1rem;`
5	`padding: 10px;`	5	`padding: 10px;`
6	`width: 100%;`	6	`width: 100%;`
-		7	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`
-		8
7	`@media (min-width: 768px) {`	9	`@media (min-width: 768px) {`
8	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`	-
9	`border-radius: 10px;`	10	`border-radius: 10px;`
10	`}`	11	`}`
11	`}`	12	`}`
Línea 12...	Línea 13...
12		13
13	`.feed__input-container {`	14	`.feed__input-container {`
14	`display: flex;`	15	`display: flex;`
15	`align-items: center;`	16	`align-items: center;`
-		17	`gap: 0.5rem;`
16	`gap: 0.5rem;`	18
17	`.feed__input {`	19	`.feed__input {`
18	`align-items: center;`	20	`align-items: center;`
19	`border: 1px solid lightgray;`	21	`border: 1px solid lightgray;`
20	`border-radius: 30px;`	22	`border-radius: 30px;`
Línea 24...	Línea 26...
24	`padding: 10px;`	26	`padding: 10px;`
25	`padding-left: 1rem;`	27	`padding-left: 1rem;`
26	`overflow: hidden;`	28	`overflow: hidden;`
27	`flex: 1;`	29	`flex: 1;`
28	`cursor: pointer;`	30	`cursor: pointer;`
-		31
29	`&:hover {`	32	`&:hover {`
30	`background-color: rgba(0, 0, 0, 0.08);`	33	`background-color: rgba(0, 0, 0, 0.08);`
31	`}`	34	`}`
-		35
32	`input {`	36	`input {`
33	`background-color: transparent;`	37	`background-color: transparent;`
34	`border: none;`	38	`border: none;`
35	`cursor: pointer;`	39	`cursor: pointer;`
36	`outline: none;`	40	`outline: none;`
Línea 50...	Línea 54...
50	`.feed__info {`	54	`.feed__info {`
51	`display: flex;`	55	`display: flex;`
52	`flex-direction: column;`	56	`flex-direction: column;`
53	`justify-content: center;`	57	`justify-content: center;`
54	`gap: 5px;`	58	`gap: 5px;`
-		59
55	`& > a > h2 {`	60	`&>a>h2 {`
56	`font-size: 1rem;`	61	`font-size: 1rem;`
57	`font-weight: bold;`	62	`font-weight: bold;`
58	`}`	63	`}`
Línea 59...	Línea 64...
59		64
60	`& > p {`	65	`&>p {`
61	`font-size: 0.8rem;`	66	`font-size: 0.8rem;`
62	`color: gray;`	67	`color: gray;`
63	`line-height: 1.5;`	68	`line-height: 1.5;`
-		69	`}`
64	`}`	70
65	`.time__elapse {`	71	`.time__elapse {`
66	`align-items: center;`	72	`align-items: center;`
67	`display: flex;`	73	`display: flex;`
68	`font-size: 14px;`	74	`font-size: 14px;`
-		75	`gap: 5px;`
69	`gap: 5px;`	76
70	`.time__elapse-icon {`	77	`.time__elapse-icon {`
71	`font-size: 14px;`	78	`font-size: 14px;`
72	`}`	79	`}`
73	`}`	80	`}`
Línea 83...	Línea 90...
83	`display: inline-flex;`	90	`display: inline-flex;`
84	`justify-content: center;`	91	`justify-content: center;`
85	`cursor: pointer;`	92	`cursor: pointer;`
86	`gap: 0.5rem;`	93	`gap: 0.5rem;`
87	`padding: 10px;`	94	`padding: 10px;`
-		95
88	`&:hover {`	96	`&:hover {`
89	`background-color: whitesmoke;`	97	`background-color: whitesmoke;`
90	`border-radius: 10px;`	98	`border-radius: 10px;`
91	`}`	99	`}`
-		100
92	`h4 {`	101	`h4 {`
93	`display: none;`	102	`display: none;`
94	`}`	103	`}`
-		104
95	`@media (min-width: 768px) {`	105	`@media (min-width: 1200px) {`
96	`justify-content: flex-start;`	106	`justify-content: flex-start;`
-		107
97	`h4 {`	108	`h4 {`
98	`display: initial;`	109	`display: initial;`
99	`}`	110	`}`
100	`}`	111	`}`
101	`}`	112	`}`
Línea 103...	Línea 114...
103	`.feed {`	114	`.feed {`
104	`background-color: #fff;`	115	`background-color: #fff;`
105	`display: flex;`	116	`display: flex;`
106	`flex-direction: column;`	117	`flex-direction: column;`
107	`gap: 0.5rem;`	118	`gap: 0.5rem;`
108	`.feed {`	-
109	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`	119	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`
110	`}`	120
111	`@media (min-width: 768px) {`	121	`@media (min-width: 768px) {`
112	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`	122	`box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);`
113	`border-radius: 10px;`	123	`border-radius: 10px;`
114	`}`	124	`}`
115	`}`	125	`}`
Línea 125...	Línea 135...
125	`.feed__body {`	135	`.feed__body {`
126	`overflow-wrap: anywhere;`	136	`overflow-wrap: anywhere;`
127	`display: flex;`	137	`display: flex;`
128	`flex-direction: column;`	138	`flex-direction: column;`
129	`gap: 0.5rem;`	139	`gap: 0.5rem;`
-		140
130	`h2 {`	141	`h2 {`
131	`padding: 0 10px;`	142	`padding: 0 10px;`
132	`}`	143	`}`
-		144
133	`p,`	145	`p,`
134	`a,`	146	`a,`
135	`span {`	147	`span {`
136	`padding: 0 10px;`	148	`padding: 0 10px;`
137	`line-height: 1.25;`	149	`line-height: 1.25;`
138	`}`	150	`}`
-		151
139	`& > img,`	152	`&>img,`
140	`& > video {`	153	`&>video {`
141	`width: 100%;`	154	`width: 100%;`
142	`max-height: 550px;`	155	`max-height: 550px;`
143	`object-fit: cover;`	156	`object-fit: cover;`
144	`}`	157	`}`
145	`}`	158	`}`
Línea 149...	Línea 162...
149	`justify-content: space-around;`	162	`justify-content: space-around;`
150	`border-top: 1px solid lightgray;`	163	`border-top: 1px solid lightgray;`
151	`gap: 0.5rem;`	164	`gap: 0.5rem;`
152	`padding: 5px;`	165	`padding: 5px;`
153	`margin: 0 5px;`	166	`margin: 0 5px;`
-		167
154	`.feed__share-option {`	168	`.feed__share-option {`
155	`flex-grow: 1;`	169	`flex-grow: 1;`
156	`}`	170	`}`
157	`}`	171	`}`
Línea 166...	Línea 180...
166	`right: 0;`	180	`right: 0;`
167	`width: 16.5rem;`	181	`width: 16.5rem;`
168	`border-radius: 10px;`	182	`border-radius: 10px;`
169	`background-color: #fff;`	183	`background-color: #fff;`
170	`box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);`	184	`box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%), 0px -4px 4px -2px rgb(0 0 0 / 12%);`
-		185
171	`&.post {`	186	`&.post {`
172	`transform: none;`	187	`transform: none;`
173	`bottom: 100%;`	188	`bottom: 100%;`
174	`right: 1.5rem;`	189	`right: 1.5rem;`
175	`z-index: 200;`	190	`z-index: 200;`
176	`}`	191	`}`
177	`}`	192	`}`
178		193

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/dashboard/templates/linkedin/Feed/Feed.scss – Rev 5010 → 5281