/* === Timeline iOS === */ .ios { @import (multiple) '../../less/colors-ios.less'; @import (multiple) '../../less/vars-ios.less'; .timeline { margin: 35px 0; padding: 0 15px; } .block-strong .timeline { padding: 0; margin: 0; } .timeline-item { padding: 2px 0px 15px; &:last-child { padding-bottom: 2px; } } .timeline-item-content { .card, &.card, .list, &.list, .block, &.block { margin: 0; width: 100%; } .card, .list, .block { + .card, + .list, + .block { margin: 15px 0 0; } } } .timeline-item-inner { border-radius: 7px; padding: 8px 15px; + .timeline-item-inner { margin-top: 15px; } } .block-strong .timeline-item-inner { border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); } .timeline-item-divider { margin-left: 15px; margin-right: 15px; } .timeline-item-time { margin-top: 15px; color: #6d6d72; &:first-child, &:last-child { margin-top: 0; } } .timeline-item-title { font-size: 17px; font-weight: 600; } .timeline-item-subtitle { font-size: 15px; } .timelineItemLeft() { flex-direction: row-reverse; .ltr({ margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)"; margin-left: 0; .timeline-item-date { text-align: left; } }); .rtl({ margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)"; margin-right: 0; .timeline-item-date { text-align: right; } }); } .timelineItemRight() { .ltr({ margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)"; margin-right: 0; .timeline-item-date { text-align: right; } }); .rtl({ margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)"; margin-left: 0; .timeline-item-date { text-align: left; } }); } .timeline-sides { .timeline-item { .timelineItemRight(); &:not(.timeline-item-right):nth-child(2n) { .timelineItemLeft(); } } .timeline-item-left { .timelineItemLeft() } .timeline-item-right { .timelineItemRight(); } } @media (min-width:768px) { .tablet-sides { .timeline-sides; } } .timeline-horizontal { padding: 0; margin: 0; .timeline-item { padding-top: 34px !important; padding-bottom: 10px; } > .timeline-item:last-child, .timeline-month:last-child .timeline-item:last-child { .hairline-remove(right); } .timeline-item-date { background: @barsBg; padding: 0px 10px; } .timeline-item-content { padding: 10px; height: ~"calc(100% - 10px)"; } } .hairline-root('.timeline-horizontal .timeline-item-date', bottom, @barsBorderColor); .hairline-root('.timeline-horizontal .timeline-month .timeline-item', top, @barsBorderColor); .hairline-root('.timeline-horizontal .timeline-item', right, @barsBorderColor); .hairline-root('.timeline-horizontal .timeline-year', right, @barsBorderColor); .timeline-year { &:last-child { .hairline-remove(right); } } .timeline-year-title, .timeline-month-title { padding: 0 10px; background: @barsBg; span { .ltr({ left: 10px; }); .rtl({ right: 10px; }); } } .timeline-year-title { span { margin-top: 3px; } } .safe-areas-landscape({ .safe-area-left({ .timeline-horizontal:not(.no-ios-edges):not(.no-ios-left-edge) { padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); .timeline-year-title, .timeline-month-title { span { left: ~"calc(10px + constant(safe-area-inset-left))";; left: ~"calc(10px + env(safe-area-inset-left))";; } } .timeline-year:first-child .timeline-year-title, .timeline-year:first-child .timeline-month:first-child .timeline-month-title, .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title { left: -44px; right: 0; width: auto; } > .timeline-item:first-child, .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child, .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child, .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item { overflow: visible; .timeline-item-date { width: auto; padding-left: ~"calc(10px + constant(safe-area-inset-left))"; padding-left: ~"calc(10px + env(safe-area-inset-left))"; left: ~"calc(0px - constant(safe-area-inset-left))"; left: ~"calc(0px - env(safe-area-inset-left))"; right: 0; } } } .timeline:not(.no-ios-edges):not(.no-ios-left-edge):not(.timeline-horizontal) { padding-left: ~"calc(15px + constant(safe-area-inset-left))"; padding-left: ~"calc(15px + env(safe-area-inset-left))"; } }); .safe-area-right({ .timeline-horizontal:not(.no-ios-edges):not(.no-ios-right-edge) { .timeline-year:last-child .timeline-year-title, .timeline-year:last-child .timeline-month:last-child .timeline-month-title { width: auto; right: ~"calc(0px - constant(safe-area-inset-right))"; right: ~"calc(0px - env(safe-area-inset-right))"; } > .timeline-item:last-child, .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child { overflow: visible; .timeline-item-date { width: auto; right: ~"calc(0px - constant(safe-area-inset-right))"; right: ~"calc(0px - env(safe-area-inset-right))"; left: 0; } } } .timeline:not(.no-ios-edges):not(.no-ios-right-edge):not(.timeline-horizontal) { padding-right: ~"calc(15px + constant(safe-area-inset-right))"; padding-right: ~"calc(15px + env(safe-area-inset-right))"; } }); }); // Dark Theme & when (@includeDarkTheme) { .theme-dark { .timeline-year-title, .timeline-month-title { background: @barsBgDark; } .timeline-item-inner { background-color: @blockBgDark; } .timeline-item-time { color: #8E8E93; } .timeline-horizontal, .timeline-horizontal& { .timeline-item-date { background: @barsBgDark; .hairline-color(bottom, @barsBorderColorDark); } .timeline-month .timeline-item { .hairline-color(top, @barsBorderColorDark); } .timeline-item { .hairline-color(right, @barsBorderColorDark); } .timeline-year { .hairline-color(right, @barsBorderColorDark); } } } } }