1
+ @import ' ~ng-devui/styles-var/devui-var.scss' ;
2
+
3
+ @mixin font-title ($font-size : $devui-font-size-page-title ) {
4
+ font-size : $font-size ;
5
+ font-weight : $devui-font-title-weight ;
6
+ line-height : $devui-line-height-base ;
7
+ }
8
+
9
+ @mixin font-content () {
10
+ font-size : $devui-font-size ;
11
+ font-weight : $devui-font-content-weight ;
12
+ line-height : $devui-line-height-base ;
13
+ }
14
+
15
+ // 内容区布局样式
16
+ .devui-content-layout {
17
+ top : 60px ;
18
+ position : absolute ;
19
+ padding : 0 20% 32px 13% ;
20
+ margin-left : 260px ;
21
+ width : calc (100% - 260px );
22
+ background-color : $devui-base-bg ;
23
+ }
24
+
25
+ // 内容区文档头样式
26
+ .devui-docs-header {
27
+ h1 {
28
+ @include font-title ($devui-font-size-data-overview );
29
+ margin : 32px 0 24px 0 ;
30
+ }
31
+
32
+ h3 {
33
+ @include font-title ($devui-font-size-card-title );
34
+ }
35
+ }
36
+
37
+ // 内容区文档卡片样式
38
+ .devui-content-card {
39
+ margin-top : 12px ;
40
+ padding : 20px 20px 32px 20px ;
41
+ background-color : $devui-base-bg ;
42
+ }
43
+
44
+ // demo及代码样式
45
+ .devui-demo-container {
46
+ position : relative ;
47
+ margin-top : 20px ;
48
+ }
49
+
50
+ .devui-demo-example {
51
+ margin-bottom : 48px ;
52
+ }
53
+
54
+ .devui-demo-title {
55
+ @include font-title ($devui-font-size-page-title );
56
+
57
+ color : $devui-text ;
58
+ margin-bottom : 12px ;
59
+ height : 24px ;
60
+ display : flex ;
61
+ align-items : center ;
62
+ }
63
+
64
+ .devui-demo-text {
65
+ @include font-content ();
66
+
67
+ color : $devui-text ;
68
+ }
69
+
70
+ .devui-code-box {
71
+ display : inline-block ;
72
+ width : 100% ;
73
+ position : relative ;
74
+ margin : 4px 0 ;
75
+ transition : all 0.2s ;
76
+ }
77
+
78
+ .devui-code-copy {
79
+ fill : $devui-text ;
80
+ }
81
+
82
+ .devui-code-box-demo {
83
+ border-bottom : 1px dashed $devui-dividing-line ;
84
+ padding : 16px 0 ;
85
+ }
86
+
87
+ .devui-code-box-meta.markdown {
88
+ position : relative ;
89
+ padding : 10px 40px ;
90
+ border-radius : 0 0 4px 4px ;
91
+ transition : background-color 0.4s ;
92
+ width : 100% ;
93
+ font-size : $devui-font-size ;
94
+ margin-bottom : 0 ;
95
+ }
96
+
97
+ .devui-code-box.expand .devui-code-box-meta {
98
+ border-radius : 0 ;
99
+ // border-bottom: 1px dashed $devui-dividing-line;
100
+ }
101
+
102
+ .devui-code-box .devui-highlight-wrapper {
103
+ display : none ;
104
+ overflow : auto ;
105
+ border-radius : 0 0 4px 4px ;
106
+ }
107
+
108
+ .devui-code-box .devui-highlight-wrapper-expand {
109
+ display : block ;
110
+ }
111
+
112
+ .devui-code-box pre {
113
+ width : auto ;
114
+ border : none ;
115
+ margin : 10px 0 0 ;
116
+ }
117
+
118
+ .devui-code-box .collapse {
119
+ display : block ; /* .collapse conflick with bootstrap */
120
+ position : absolute ;
121
+ left : 20px ;
122
+ // top: -9px;
123
+ cursor : pointer ;
124
+ width : 16px ;
125
+ height : 16px ;
126
+ line-height : 16px ;
127
+ opacity : 0.55 ;
128
+ text-align : center ;
129
+ transition : all 0.3s ;
130
+ -webkit-user-select : none ;
131
+ -moz-user-select : none ;
132
+ -ms-user-select : none ;
133
+ user-select : none ;
134
+
135
+ & > svg > path {
136
+ fill : $devui-text ;
137
+ }
138
+ }
139
+
140
+ .devui-new-code-copy {
141
+ margin-left : 10px ;
142
+ }
143
+
144
+ .devui-code-box.expand .collapse {
145
+ -webkit-transform : rotate (90deg );
146
+ transform : rotate (90deg );
147
+ }
148
+
149
+ // 内容区导航样式
150
+ .devui-content-nav {
151
+ width : 240px ;
152
+ position : fixed ;
153
+ top : 90px ;
154
+ right : 0 ;
155
+ height : 100% ;
156
+ z-index : 1 ;
157
+
158
+ .devui-fast-forward {
159
+ width : 130px ;
160
+ font-size : $devui-font-size-card-title ;
161
+ color : $devui-text ;
162
+ line-height : 24px ;
163
+ font-weight : bold ;
164
+ padding-bottom : 10px ;
165
+ margin-left : 20px ;
166
+ border-bottom : 1px solid $devui-dividing-line ;
167
+ }
168
+
169
+ .devui-step-nav {
170
+ margin-top : 10px ;
171
+
172
+ & > li {
173
+ list-style : none ;
174
+ padding-left : 20px ;
175
+ cursor : pointer ;
176
+ height : 30px ;
177
+ line-height : 30px ;
178
+ font-size : $devui-font-size ;
179
+ color : $devui-text ;
180
+ position : relative ;
181
+ white-space : nowrap ;
182
+ text-overflow : ellipsis ;
183
+ overflow : hidden ;
184
+
185
+ a {
186
+ display : block ;
187
+ width : 110px ;
188
+ overflow : hidden ;
189
+ color : $devui-text ;
190
+ white-space : nowrap ;
191
+ text-overflow : ellipsis ;
192
+ -webkit-transition : all .3s ease ;
193
+ transition : all .3s ease ;
194
+
195
+ }
196
+ a .current {
197
+ color : $devui-link ;
198
+ }
199
+
200
+ & .active {
201
+ color : $devui-link ;
202
+ }
203
+ }
204
+ }
205
+ }
206
+
207
+ @media (max-width : 1800px ) {
208
+ .devui-content-nav {
209
+ width : 150px ;
210
+ }
211
+
212
+ .devui-content-layout {
213
+ padding : 0 15% 0 8% ;
214
+ }
215
+ }
216
+
217
+
218
+ @media (max-width : 1250px ) {
219
+ .devui-content-nav {
220
+ display : none ;
221
+ }
222
+ }
223
+
224
+ @media (max-width : 1024px ) {
225
+ .devui-content-layout {
226
+ width : 100% ;
227
+ margin-left : 0 ;
228
+ transition : all 0.2s ease-out ;
229
+ }
230
+ }
0 commit comments