Mercurial > nebulaweb3

comparison default/assets/scss/components/_timeline.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }