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