179 lines
2.8 KiB
Plaintext
179 lines
2.8 KiB
Plaintext
//
|
|
// RTL: Pages / Timeline
|
|
//
|
|
// --------------------------------------------------
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Small screens (mobile first) **//
|
|
|
|
@tl-left-mobile: 30px; // Do not forget to change value for RTL-mode
|
|
@tl-left: 100px; // Do not forget to change value for RTL-mode
|
|
@tl-header-width: 140px; // Do not forget to change value for RTL-mode
|
|
|
|
// Timeline
|
|
//
|
|
|
|
.timeline {
|
|
|
|
&:before,
|
|
&:after {
|
|
left: auto;
|
|
right: @tl-left-mobile;
|
|
}
|
|
|
|
&:before {
|
|
margin-left: 0;
|
|
margin-right: -2px;
|
|
}
|
|
|
|
&:after {
|
|
margin-left: 0;
|
|
margin-right: -6px;
|
|
}
|
|
}
|
|
|
|
|
|
// Header
|
|
//
|
|
|
|
.tl-header {
|
|
left: auto;
|
|
right: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Entry
|
|
//
|
|
|
|
.tl-entry {
|
|
margin-left: 0;
|
|
margin-right: @tl-left-mobile;
|
|
padding-left: 0;
|
|
padding-right: 36px;
|
|
|
|
&:before {
|
|
left: auto;
|
|
right: -3px;
|
|
}
|
|
}
|
|
|
|
|
|
// Body
|
|
//
|
|
|
|
.tl-body {
|
|
&:before {
|
|
border-width: 8px 0 8px 9px;
|
|
left: auto;
|
|
right: -9px;
|
|
}
|
|
|
|
&:after {
|
|
border-width: 7px 0 7px 8px;
|
|
border-color: transparent transparent transparent #fff;
|
|
left: auto;
|
|
right: -8px;
|
|
}
|
|
}
|
|
|
|
|
|
// Date/Time
|
|
//
|
|
|
|
.tl-time {
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
// Icon
|
|
//
|
|
|
|
.tl-icon {
|
|
left: auto;
|
|
right: -20px;
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Desktops **//
|
|
|
|
@media (min-width: @screen-tablet) {
|
|
|
|
// Default timeline
|
|
//
|
|
|
|
.timeline:before,
|
|
.timeline:after {
|
|
left: auto;
|
|
right: @tl-left;
|
|
}
|
|
.tl-header {
|
|
left: auto;
|
|
right: @tl-left;
|
|
margin-left: 0;
|
|
margin-right: -1 * ceil(@tl-header-width / 2);
|
|
}
|
|
.tl-entry {
|
|
margin-left: 0;
|
|
margin-right: @tl-left;
|
|
}
|
|
.tl-time {
|
|
left: 100%;
|
|
right: auto;
|
|
margin-left: 32px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
// Centered timeline
|
|
//
|
|
|
|
.timeline.centered {
|
|
&:before,
|
|
&:after {
|
|
left: auto;
|
|
right: 50%;
|
|
}
|
|
.tl-header {
|
|
left: auto;
|
|
right: 50%;
|
|
}
|
|
.tl-entry {
|
|
margin-left: 0;
|
|
margin-right: 50%;
|
|
}
|
|
.tl-entry.left {
|
|
margin-left: 50%;
|
|
margin-right: 0;
|
|
padding-left: 36px;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tl-entry.left:before {
|
|
left: -3px;
|
|
right: auto;
|
|
}
|
|
.tl-entry.left .tl-body:before {
|
|
border-width: 8px 9px 8px 0;
|
|
left: -9px;
|
|
right: auto;
|
|
}
|
|
.tl-entry.left .tl-body:after {
|
|
border-width: 7px 8px 7px 0;
|
|
border-color: transparent #fff transparent transparent;
|
|
left: -8px;
|
|
right: auto;
|
|
}
|
|
.tl-entry.left .tl-time {
|
|
left: auto;
|
|
right: 100%;
|
|
margin-left: 0;
|
|
margin-right: 32px;
|
|
}
|
|
.tl-entry.left .tl-icon {
|
|
left: -20px;
|
|
right: auto;
|
|
}
|
|
}
|
|
} |