Skip to content

Commit 41577bc

Browse files
lubber-delubber-de
authored
feat(feed): connected, ordered, disabled, divided variant + inverted fix
Added a connected variant to the feed view, which now easily offers to use feed as a simple timeline component Added an ordered variant which automatically creates labels or can create ones via data-text attribute including colorization as usual and a basic variant Added support for text labels or ui label labels Added disabled support Added a simple divided variant just like we already have for item, list, grid Added optional right floated variant for feed sub components such as date Fixed inverted variants when icons were used
1 parent 20625bd commit 41577bc

File tree

5 files changed

+311
-39
lines changed

5 files changed

+311
-39
lines changed

‎src/definitions/elements/icon.less

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ i.icon {
4848
}
4949

5050
i.icon::before {
51-
background: none !important;
51+
background: none;
5252
}
5353

5454
/*******************************
@@ -322,16 +322,16 @@ i.emphasized.icons:not(.disabled) {
322322
@c: @colors[@@color][color];
323323
@l: @colors[@@color][light];
324324

325-
i.@{color}.icon.icon.icon.icon.icon {
325+
i.@{color}.icon.icon.icon.icon.icon.icon {
326326
color: @c;
327327
}
328328
& when (@variationIconInverted) {
329-
i.inverted.@{color}.icon.icon.icon.icon.icon {
329+
i.inverted.@{color}.icon.icon.icon.icon.icon.icon {
330330
color: @l;
331331
}
332332
& when (@variationIconBordered) or (@variationIconCircular) {
333-
i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
334-
i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
333+
i.inverted.bordered.@{color}.icon.icon.icon.icon.icon.icon,
334+
i.inverted.circular.@{color}.icon.icon.icon.icon.icon.icon,
335335
i.inverted.bordered.@{color}.icons,
336336
i.inverted.circular.@{color}.icons {
337337
background-color: @c;

‎src/definitions/elements/list.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -681,7 +681,7 @@ ol.ui.list ol li,
681681
.ui.ordered.list,
682682
.ui.ordered.list .list:not(.icon),
683683
ol.ui.list ol {
684-
counter-reset: ordered;
684+
counter-reset: @orderedCountName;
685685
margin-left: @orderedCountDistance;
686686
list-style-type: none;
687687
}

‎src/definitions/views/feed.less

Lines changed: 238 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -43,42 +43,75 @@
4343
padding: @eventPadding;
4444
margin: @eventMargin;
4545
background: @eventBackground;
46-
border-top: @eventDivider;
46+
&:not(:first-child) {
47+
border-top: @eventDivider;
48+
}
4749
}
48-
.ui.feed > .event:first-child {
49-
border-top: 0;
50+
.ui.feed:not(.connected) > .event:first-child {
5051
padding-top: 0;
5152
}
5253
.ui.feed > .event:last-child {
5354
padding-bottom: 0;
5455
}
5556

56-
/* Event Label */
57-
.ui.feed > .event > .label {
58-
display: block;
59-
flex: 0 0 auto;
60-
width: @labelWidth;
61-
height: @labelHeight;
62-
align-self: @labelAlignSelf;
63-
text-align: @labelTextAlign;
64-
}
65-
.ui.feed > .event > .label .icon {
66-
opacity: @iconLabelOpacity;
67-
font-size: @iconLabelSize;
68-
width: @iconLabelWidth;
69-
padding: @iconLabelPadding;
70-
background: @iconLabelBackground;
71-
border: @iconLabelBorder;
72-
border-radius: @iconLabelBorderRadius;
73-
color: @iconLabelColor;
74-
}
75-
.ui.feed > .event > .label img {
76-
width: @imageLabelWidth;
77-
height: @imageLabelHeight;
78-
border-radius: @imageLabelBorderRadius;
79-
}
80-
.ui.feed > .event > .label + .content {
81-
margin: @labeledContentMargin;
57+
& when (@variationFeedLabel) {
58+
/* Event Label */
59+
60+
.ui.feed > .event > .label {
61+
display: block;
62+
flex: 0 0 auto;
63+
width: @labelWidth;
64+
height: @labelHeight;
65+
align-self: @labelAlignSelf;
66+
text-align: @labelTextAlign;
67+
}
68+
69+
& when (@variationFeedLabelIcon) {
70+
.ui.feed > .event > .label .icon {
71+
opacity: @iconLabelOpacity;
72+
font-size: @iconLabelSize;
73+
width: @iconLabelWidth;
74+
padding: @iconLabelPadding;
75+
background: @iconLabelBackground;
76+
border: @iconLabelBorder;
77+
border-radius: @iconLabelBorderRadius;
78+
color: @iconLabelColor;
79+
}
80+
}
81+
& when (@variationFeedLabelImage) {
82+
.ui.feed > .event > .label img {
83+
width: @imageLabelWidth;
84+
height: @imageLabelHeight;
85+
border-radius: @imageLabelBorderRadius;
86+
}
87+
}
88+
& when (@variationFeedLabelText) {
89+
.ui.feed > .event > .label > .text {
90+
display: block;
91+
text-align: center;
92+
margin-top: @textLabelTopMargin;
93+
&.ui {
94+
margin-top: @uiTextLabelTopMargin;
95+
}
96+
&.multiline {
97+
margin-top: @multilineTextLabelTopMargin;
98+
&.ui {
99+
margin-top: @uiMultilineTextLabelTopMargin;
100+
}
101+
}
102+
}
103+
}
104+
& when (@variationFeedLabelUiLabel) {
105+
.ui.feed > .event > .label > .ui.label {
106+
margin-top: @uiLabelTopMargin;
107+
position: relative;
108+
z-index: @uiLabelZIndex;
109+
}
110+
}
111+
112+
.ui.feed > .event > .label + .content {
113+
margin: @labeledContentMargin;
114+
}
82115
}
83116

84117
/* --------------
@@ -146,13 +179,15 @@
146179
/* Date inside Summary */
147180
.ui.feed > .event > .content .summary > .date {
148181
display: @summaryDateDisplay;
149-
float: @summaryDateFloat;
150182
font-weight: @summaryDateFontWeight;
151183
font-size: @summaryDateFontSize;
152184
font-style: @summaryDateFontStyle;
153185
margin: @summaryDateMargin;
154186
padding: @summaryDatePadding;
155187
color: @summaryDateColor;
188+
&:not(.floated) {
189+
float: @summaryDateFloat;
190+
}
156191
}
157192
}
158193
}
@@ -274,6 +309,106 @@
274309
/*******************************
275310
Variations
276311
*******************************/
312+
& when (@variationFeedRightFloated) {
313+
/* rtl:rename */
314+
.ui.feed .right.floated {
315+
float: right;
316+
}
317+
}
318+
& when (@variationFeedConnected) {
319+
.ui.connected.feed > .event {
320+
position: relative;
321+
&:not(:last-child)::before {
322+
border-left: @connectedBorder;
323+
content: "";
324+
left: @connectedBorderLeftOffset;
325+
position: absolute;
326+
top: @connectedBorderTopOffset;
327+
height: @connectedBorderHeight;
328+
}
329+
& > .label when (@variationFeedLabel) {
330+
position: relative;
331+
}
332+
}
333+
& when (@variationFeedInverted) {
334+
.ui.inverted.connected.feed > .event {
335+
&::before {
336+
border-left-color: @invertedConnectedBorderColor;
337+
}
338+
}
339+
}
340+
}
341+
342+
& when(@variationFeedDivided) {
343+
.ui.divided.feed > .event:not(:first-child) {
344+
border-top: @dividedBorder;
345+
}
346+
& when (@variationFeedInverted) {
347+
.ui.inverted.divided.feed > .event {
348+
border-top-color: @invertedDividedBorderColor;
349+
}
350+
}
351+
}
352+
& when (@variationFeedLabelText) {
353+
.ui.ui.feed > .event > .label[data-text]::before {
354+
content: attr(data-text);
355+
}
356+
}
357+
& when (@variationFeedOrdered) or (@variationFeedLabelText) {
358+
.ui.feed > .event > .label[data-text]::before,
359+
.ui.ordered.feed > .event > .label::before {
360+
text-align: center;
361+
line-height: 1;
362+
height: @orderedHeight;
363+
background: @orderedBackground;
364+
color: @orderedColor;
365+
border-radius: @orderedBorderRadius;
366+
padding-top: @orderedTopOffset;
367+
position: relative;
368+
display: block;
369+
margin-bottom: @orderedBottomMargin;
370+
border: @orderedBorder;
371+
}
372+
}
373+
& when (@variationFeedOrdered) {
374+
.ui.ordered.feed {
375+
counter-reset: @orderedCountName;
376+
& > .event > .label::before {
377+
counter-increment: @orderedCountName;
378+
content: @orderedCountContent;
379+
}
380+
}
381+
& when (@variationFeedBasic) {
382+
.ui.ordered.basic.feed > .event > .label::before,
383+
.ui.ordered.feed > .event > .basic.label::before {
384+
border-color: @orderedBasicBorderColor;
385+
color: @orderedBasicColor;
386+
background: @orderedBasicBackground;
387+
}
388+
}
389+
& when (@variationFeedConnected) {
390+
.ui.ordered.connected.feed > .event::before {
391+
top: @orderedConnectedBorderTopOffset;
392+
height: @orderedConnectedBorderHeight;
393+
}
394+
395+
/* workaround until all browsers support :has() */
396+
.ui.connected.labeled.feed > .event::before,
397+
.ui.connected.feed > .labeled.event::before {
398+
top: @orderedConnectedLabeledBorderTopOffset;
399+
height: @orderedConnectedLabeledBorderHeight;
400+
}
401+
}
402+
}
403+
& when (@variationFeedConnected) and ((@variationFeedOrdered) or (@variationFeedLabelText)) {
404+
@supports selector(:has(.f)) {
405+
.ui.connected.feed > .event:has(> .label[data-text] > *)::before,
406+
.ui.ordered.connected.feed > .event:has(> .label > *)::before {
407+
top: @orderedConnectedLabeledBorderTopOffset;
408+
height: @orderedConnectedLabeledBorderHeight;
409+
}
410+
}
411+
}
277412

278413
.ui.feed {
279414
font-size: @medium;
@@ -294,12 +429,18 @@
294429

295430
.ui.inverted.feed > .event {
296431
background: @black;
432+
& > .label i.icon when (@variationFeedLabelIcon) {
433+
color: @invertedIconLabelColor;
434+
}
435+
& > .label .text:not(.ui) when (@variationFeedLabelText) {
436+
color: @invertedTextLabelColor;
437+
}
297438
}
298439

299440
& when (@variationFeedDate) or (@variationFeedLike) {
300441
.ui.inverted.feed > .event > .content .date,
301442
.ui.inverted.feed > .event > .content .meta .like {
302-
color: @invertedLightTextColor;
443+
color: @invertedLikeColor;
303444
}
304445
}
305446

@@ -312,8 +453,73 @@
312453

313454
& when (@variationFeedLike) {
314455
.ui.inverted.feed > .event > .content .meta .like:hover {
315-
color: @invertedSelectedTextColor;
456+
color: @invertedLikeHoverColor;
457+
}
458+
.ui.inverted.feed > .event > .content .meta .active.like i.icon {
459+
color: @invertedLikeActiveColor;
460+
}
461+
}
462+
}
463+
464+
/* --------------
465+
Colors
466+
--------------- */
467+
& when not (@variationFeedColors = false) {
468+
each(@variationFeedColors, {
469+
@color: @value;
470+
@c: @colors[@@color][color];
471+
@l: @colors[@@color][light];
472+
473+
& when (@variationFeedOrdered) or (@variationFeedLabelText) {
474+
.ui.ui.feed > .event > .@{color}.label::before,
475+
.ui.@{color}.feed > .event > .label::before {
476+
background: @c;
477+
}
478+
}
479+
& when (@variationFeedConnected) {
480+
.ui.@{color}.connected.feed > .event::before,
481+
.ui.connected.feed > .@{color}.event::before {
482+
border-color: @c;
483+
}
484+
& when (@variationFeedInverted) {
485+
.ui.inverted.@{color}.connected.feed > .event::before,
486+
.ui.connected.feed > .inverted.@{color}.event::before {
487+
border-color: @l;
488+
}
489+
}
490+
}
491+
& when (@variationFeedBasic) {
492+
.ui.ui.feed > .event > .@{color}.basic.label::before,
493+
.ui.@{color}.basic.feed > .event > .label::before {
494+
color: @c;
495+
}
496+
}
497+
& when (@variationFeedInverted) {
498+
.ui.feed > .event > .inverted.@{color}.label::before,
499+
.ui.inverted.@{color}.feed > .event > .label::before {
500+
background: @l;
501+
}
502+
& when (@variationFeedBasic) {
503+
.ui.feed > .event > .inverted.@{color}.basic.label::before,
504+
.ui.inverted.@{color}.basic.feed > .event > .label::before {
505+
color: @l;
506+
}
507+
}
316508
}
509+
});
510+
}
511+
& when (@variationFeedBasic) {
512+
.ui.ui.feed > .event > .basic.label::before,
513+
.ui.ui.ui.basic.feed > .event > .label::before {
514+
background: @orderedBasicBackground;
515+
border-color: currentColor;
516+
}
517+
}
518+
& when (@variationFeedDisabled) {
519+
.ui.disabled.feed,
520+
.ui.feed .disabled.event {
521+
opacity: @disabledOpacity;
522+
pointer-events: @disabledPointerEvents;
317523
}
318524
}
319525

‎src/themes/default/globals/variation.variables

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,13 +452,25 @@
452452

453453
/* Feed */
454454
@variationFeedInverted: true;
455+
@variationFeedDisabled: true;
455456
@variationFeedMeta: true;
456457
@variationFeedSummary: true;
457458
@variationFeedUser: true;
458459
@variationFeedExtra: true;
459460
@variationFeedDate: true;
460461
@variationFeedLike: true;
462+
@variationFeedLabel: true;
463+
@variationFeedLabelIcon: true;
464+
@variationFeedLabelImage: true;
465+
@variationFeedLabelText: true;
466+
@variationFeedLabelUiLabel: true;
467+
@variationFeedConnected: true;
468+
@variationFeedDivided: true;
469+
@variationFeedOrdered: true;
470+
@variationFeedBasic: true;
471+
@variationFeedRightFloated: true;
461472
@variationFeedSizes: @variationAllSizes;
473+
@variationFeedColors: @variationAllColors;
462474

463475
/* Item */
464476
@variationItemInverted: true;

0 commit comments

Comments
 (0)