|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Timeline
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .timeline {
|
|
|
8 position: relative;
|
|
|
9 margin: em(20) 0;
|
|
|
10
|
|
|
11 .timeline-body {
|
|
|
12 padding: 0 em(20);
|
|
|
13 display: inline-block;
|
|
|
14 width: 40%;
|
|
|
15 margin-left: 5%;
|
|
|
16 background: #fff;
|
|
|
17 border: 1px solid #ddd;
|
|
|
18 box-shadow: 0 2px 3px 0 #ddd;
|
|
|
19 text-align: right;
|
|
|
20 border-radius: 10px;
|
|
|
21
|
|
|
22 header {
|
|
|
23 padding: em(20,12.6) em(20,12.6);
|
|
|
24 margin: 0 em(-20,12.6) em(20,12.6);
|
|
|
25 background: $primary;
|
|
|
26 border-top-left-radius: 10px;
|
|
|
27 border-top-right-radius: 10px;
|
|
|
28 color: #fff;
|
|
|
29 font-size: 0.9em;
|
|
|
30
|
|
|
31 .timeline-body-title {
|
|
|
32 font-size: $font-size-base;
|
|
|
33 line-height: 1.5;
|
|
|
34 margin: 0;
|
|
|
35 color: #fff;
|
|
|
36 }
|
|
|
37
|
|
|
38 a {
|
|
|
39 color: #fff;
|
|
|
40 border-bottom: 1px dotted #fff;
|
|
|
41 transition: all $transition-duration $transition-function;
|
|
|
42 &:hover {
|
|
|
43 border-bottom-color: rgba(255,255,255,0.5);
|
|
|
44 }
|
|
|
45 }
|
|
|
46 }
|
|
|
47
|
|
|
48 > *:last-child:not(header) {
|
|
|
49 margin-bottom: em(20);
|
|
|
50 }
|
|
|
51
|
|
|
52 header:last-child {
|
|
|
53 margin-bottom: 0;
|
|
|
54 border-radius: 10px;
|
|
|
55 }
|
|
|
56 iframe { width: 100% }
|
|
|
57 }
|
|
|
58
|
|
|
59 .timeline-header {
|
|
|
60 @include position(absolute, 0 null null 50%);
|
|
|
61 transform: translateX(-50%);
|
|
|
62 z-index: 2;
|
|
|
63
|
|
|
64 i {
|
|
|
65 @include size(em(60,24));
|
|
|
66 border-radius: 100px;
|
|
|
67 background: $primary;
|
|
|
68 color: #fff;
|
|
|
69 line-height: em(60,24);
|
|
|
70 font-size: em(24);
|
|
|
71 text-align: center;
|
|
|
72 }
|
|
|
73
|
|
|
74 }
|
|
|
75
|
|
|
76 .timeline-title {
|
|
|
77 @include position(absolute, 0 null null 55%);
|
|
|
78 width: 10%;
|
|
|
79 text-align: left;
|
|
|
80 img {
|
|
|
81 border-radius: 100px;
|
|
|
82 @include size(em(50));
|
|
|
83 }
|
|
|
84 span, small { display: block }
|
|
|
85 h5 {
|
|
|
86 margin: em(10,18) 0 em(5,18);
|
|
|
87 a { color: $body-color }
|
|
|
88 }
|
|
|
89 }
|
|
|
90
|
|
|
91 .timeline-single {
|
|
|
92 padding-bottom: em(80);
|
|
|
93 position: relative;
|
|
|
94 z-index: 1;
|
|
|
95 min-height: em(100);
|
|
|
96
|
|
|
97 &:after{
|
|
|
98 content: "";
|
|
|
99 border-right: 4px solid $primary;
|
|
|
100 z-index: 0;
|
|
|
101 display: block;
|
|
|
102 @include position(absolute, em(70) null em(10) 50%);
|
|
|
103 opacity: 0.2;
|
|
|
104 }
|
|
|
105
|
|
|
106 &:nth-child(even) {
|
|
|
107 .timeline-body {
|
|
|
108 margin-left: 55%;
|
|
|
109 text-align: left;
|
|
|
110 }
|
|
|
111 .timeline-title {
|
|
|
112 left: 35%;
|
|
|
113 text-align: right;
|
|
|
114 }
|
|
|
115 }
|
|
|
116 }
|
|
|
117
|
|
|
118 body.rtl & {
|
|
|
119 direction: ltr;
|
|
|
120 .timeline-single {
|
|
|
121 &:nth-child(even) {
|
|
|
122 .timeline-body {
|
|
|
123 text-align: right;
|
|
|
124 }
|
|
|
125 }
|
|
|
126 }
|
|
|
127
|
|
|
128 .load-more-btn {
|
|
|
129 direction: ltr;
|
|
|
130 }
|
|
|
131 }
|
|
|
132
|
|
|
133 @media (max-width: 768px) {
|
|
|
134 .timeline-body {
|
|
|
135 width: 45%;
|
|
|
136 margin-left: 0;
|
|
|
137 }
|
|
|
138 }
|
|
|
139
|
|
|
140 @keyframes loadingAnimation {
|
|
|
141 0% { transform: rotate(0deg); }
|
|
|
142 100% { transform: rotate(360deg); }
|
|
|
143 }
|
|
|
144
|
|
|
145 .load-more-btn {
|
|
|
146 margin-left: 50%;
|
|
|
147 transform: translateX(-50%);
|
|
|
148
|
|
|
149 &:after {
|
|
|
150 content: "refresh";
|
|
|
151 font-family: "Material Icons";
|
|
|
152 font-size: em(24,18);
|
|
|
153 vertical-align: middle;
|
|
|
154 display: none;
|
|
|
155 animation-name: loadingAnimation;
|
|
|
156 animation-duration: 1s;
|
|
|
157 animation-iteration-count: infinite;
|
|
|
158 }
|
|
|
159
|
|
|
160 &.loading {
|
|
|
161 span {
|
|
|
162 display: none;
|
|
|
163 }
|
|
|
164
|
|
|
165 &:after {
|
|
|
166 display: block;
|
|
|
167 }
|
|
|
168 }
|
|
|
169 }
|
|
|
170 }
|
