metanorma-nist 0.2.3 → 0.2.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,766 +1,329 @@
1
- /*
2
- 0 CSS RESET
3
- */
4
-
5
- /* http://meyerweb.com/eric/tools/css/reset/
6
- v2.0 | 20110126
7
- License: none (public domain)
8
- */
9
-
10
- html, body, div, span, applet, object, iframe,
11
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
12
- a, abbr, acronym, address, big, cite, code,
13
- del, dfn, em, img, ins, kbd, q, s, samp,
14
- small, strike, strong, sub, sup, tt, var,
15
- b, u, i, center,
16
- ol, ul, li,
17
- fieldset, form, label, legend,
18
- table, caption, tbody, tfoot, thead, tr, th, td,
19
- article, aside, canvas, details, embed,
20
- figure, figcaption, footer, header, hgroup,
21
- menu, nav, output, ruby, section, summary,
22
- time, mark, audio, video {
23
- margin: 0;
24
- padding: 0;
25
- }
26
-
27
- html, body, div, span, applet, object, iframe,
28
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
29
- a, abbr, acronym, address, big, cite, code,
30
- del, dfn, em, img, ins, kbd, q, s, samp,
31
- small, strike, strong, sub, sup, tt, var,
32
- b, u, i, center,
33
- dl, dt, dd, ol, ul, li,
34
- fieldset, form, label, legend,
35
- table, caption, tbody, tfoot, thead, tr, th, td,
36
- article, aside, canvas, details, embed,
37
- figure, figcaption, footer, header, hgroup,
38
- menu, nav, output, ruby, section, summary,
39
- time, mark, audio, video {
40
- border: 0;
41
- font-size: 100%;
42
- }
1
+ $doctype-colors-list: (
2
+ nist-sp: #d8eca8,
3
+ nist-cswp: darken(#d8eca8, 20),
4
+ );
43
5
 
44
- html, body, div, span, applet, object, iframe,
45
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
46
- a, abbr, acronym, address, big, cite, code,
47
- del, dfn, em, img, ins, kbd, q, s, samp,
48
- small, strike, strong, tt, var,
49
- b, u, i, center,
50
- dl, dd, ol, ul, li,
51
- fieldset, form, label, legend,
52
- table, caption, tbody, tfoot, thead, tr, th, td,
53
- article, aside, canvas, details, embed,
54
- figure, figcaption, footer, header, hgroup,
55
- menu, nav, output, ruby, section, summary,
56
- time, mark, audio, video {
57
- vertical-align: baseline;
58
- }
59
6
 
60
- html, body, div, span, applet, object, iframe,
61
- p, blockquote,
62
- a, abbr, acronym, address, big, cite,
63
- del, dfn, em, img, ins, q, s,
64
- small, strike, strong, sub, sup, var,
65
- b, u, i, center,
66
- dl, dt, dd, ol, ul, li,
67
- fieldset, form, label, legend,
68
- table, caption, tbody, tfoot, thead, tr, th, td,
69
- article, aside, canvas, details, embed,
70
- figure, figcaption, footer, header, hgroup,
71
- menu, nav, output, ruby, section, summary,
72
- time, mark, audio, video {
73
- font-family: $bodyfont;
74
- }
7
+ $docstage-colors-list: (
8
+ standard: #9ABD48,
9
+ final: #d8eca8,
10
+ proposal: #F7803C,
11
+ internal-draft: #F7803C,
12
+ public-draft: #fd06fd,
13
+ initial-public-draft: #fd06fd,
14
+ final-public-draft: #fd06fd,
15
+ withdrawal-pending: #750697,
16
+ retired-draft: #7e0d13,
17
+ withdrawn: #7e0d13,
18
+ );
75
19
 
76
- code, pre, tt, kbd, samp {
77
- font-family: $monospacefont;
78
- font-variant-ligatures: none;
79
- }
80
20
 
81
- code *, pre *, tt *, kbd *, samp * {
82
- font-family: $monospacefont !important;
83
- font-variant-ligatures: none;
84
- }
21
+ @import 'base_style/all';
85
22
 
86
- h1, h2, h3, h4, h5, h6, .h2Annex {
87
- font-family: $headerfont;
88
- }
89
23
 
90
24
  dl {
91
- display: grid;
92
- /*grid-template-columns: max-content auto;*/
93
25
  grid-template-columns: 25% 75%;
94
- }
95
-
96
- dt {
97
- grid-column-start: 1;
98
- }
99
26
 
100
- dd {
101
- grid-column-start: 2;
102
- }
103
-
104
- dd p, dt p {
105
- margin-top: 0px;
106
- }
107
-
108
- dl.glossary dt {
109
- font-weight: bold;
27
+ &.glossary dt {
28
+ font-weight: bold;
29
+ }
110
30
  }
111
31
 
112
32
 
113
- /* HTML5 display-role reset for older browsers */
114
- article, aside, details, figcaption, figure,
115
- footer, header, hgroup, menu, nav, section {
116
- display: block;
117
- }
118
33
  body {
119
- line-height: 1;
34
+ @include bodyStyle1(
35
+ $fontSize: 14px, $lineHeight: 1.6em,
36
+ $colorText: #141115, $colorBackground: #fff);
120
37
  }
121
38
 
122
- blockquote, q {
123
- quotes: none;
39
+
40
+ .rule {
41
+ @include rule($thickness: 1px, $color: #2677ea, $margin: 2em 0);
124
42
  }
125
- blockquote:before, blockquote:after,
126
- q:before, q:after {
127
- content: '';
128
- content: none;
43
+ .rule-2 {
44
+ @include rule($thickness: 1px, $color: #2677ea, $margin: false);
129
45
  }
130
- table {
131
- border-collapse: collapse;
132
- border-spacing: 0;
46
+ .rule-thick {
47
+ @include rule($thickness: 3px, $color: #2677ea, $margin: 3em 0 0 0);
133
48
  }
134
49
 
135
50
 
136
- /*
137
- 1. HTML & Body
138
- */
51
+ #toc {
52
+ @include toc($colorLink: #141115, $colorLinkActiveBg: #006494, $colorLinkActiveFg: white);
53
+ font-family: 'Source Sans Pro', sans-serif;
139
54
 
140
- body {
141
- margin: 0;
142
- margin-left: auto;
143
- margin-right: auto;
144
- max-width: 100%;
145
- color: #141115;
146
- font-weight: 400;
55
+ li a {
147
56
  font-size: 14px;
148
- line-height: 1.6em;
149
- background-color: #fff;
150
57
  }
151
58
 
152
- main {margin: 0 3em 0 6em;}
153
-
154
- #toc{
155
- font-family: 'Source Sans Pro', sans-serif;
156
- font-weight: 400;
59
+ li:before {
60
+ content: " ";
61
+ display: none;
157
62
  }
158
-
159
- /*
160
- 2. Responsive navigation layout
161
- */
162
-
163
-
164
- @media screen and (min-width: 768px) {
165
- nav {
166
- position: fixed;
167
- top: 0;
168
- bottom: 0;
169
- left: 0;
170
- width: 323px;
171
- font-size: 0.9em;
172
- overflow: auto;
173
- padding: 0 0 0 45px;
174
- margin-right: 30px;
175
- background-color:#ffffff;
176
- }
177
-
178
- #toggle {
179
- position: fixed;
180
- height: 100%;
181
- width: 30px;
182
- background-color:#006494;
183
- color: white!important;
184
- cursor: pointer;
185
- z-index: 100;
186
- }
187
-
188
- #toggle span {
189
- text-align: center;
190
- width: 100%;
191
- position: absolute;
192
- top: 50%;
193
- transform: translate(0, -50%);
194
-
195
- }
196
-
197
- .container {
198
- padding-left: 360px;
199
- }
200
-
201
- .rule.toc {
202
- display: none;
203
- }
204
-
205
- h1.toc-contents {
206
- margin-top: 1em;
207
- }
208
-
209
- ul#toc-list {
210
- padding:0;
211
- margin:0;
212
- }
213
63
  }
214
64
 
215
- @media screen and (max-width: 768px) {
216
- #toc {
217
- padding: 0 1.5em 0 1.5em;
218
- overflow: visible;
219
- }
220
- }
65
+ nav {
66
+ @include sidebarNav(
67
+ $colorBg: white,
68
+ $width: 323px,
69
+ $offsetLeft: 45px);
221
70
 
222
- div.figure > img {
223
- margin-left: auto;
224
- margin-right: auto;
225
- display: block;
226
- max-width: 100%;
227
- height: auto;
71
+ #toc {
72
+ @include sidebarToc();
228
73
  }
229
-
230
-
231
-
232
- #toc ul {
233
- margin: 0;
234
- padding: 0;
235
- list-style: none;
236
- }
237
-
238
- #toc li a {
239
- padding: 5px 10px;
240
- font-size: 14px;
241
- }
242
-
243
- #toc a {
244
- color: #141115;
245
- text-decoration: none;
246
- display: block;
247
- }
248
-
249
- #toc a:hover {
250
- box-shadow: none;
251
- color: white;
252
- }
253
-
254
- #toc .h2 {
255
- padding-left: 30px;
256
74
  }
257
75
 
258
- #toc .h3 {
259
- padding-left: 50px;
76
+ #toggle {
77
+ @include sidebarNavToggle(
78
+ $colorFg: white,
79
+ $colorBg: #006494);
260
80
  }
261
81
 
262
- #toc .toc-active a {
263
- color: white;
82
+ .container {
83
+ @include sidebarNavContainer(360px);
264
84
  }
265
85
 
266
- #toc .toc-active, #toc li:hover {
267
- background: #006494;
268
- box-shadow: inset -5px 0px 10px -5px #006494!important;
269
- font-weight: 600;
270
- }
271
86
 
272
- #toc li:hover a {
273
- color: white;
274
- background: none;
275
- box-shadow: none;
87
+ .rule {
88
+ &.toc {
89
+ @include tocSeparator();
90
+ }
276
91
  }
277
92
 
278
- #toc li a {
279
- text-transform: nonce;
93
+ span.nistvariable {
94
+ font-family: $bodyfont;
95
+ font-style: italic;
280
96
  }
281
97
 
282
- /*
283
- Document types + stages
284
- */
285
-
286
- .document-type-band {
287
- left:0;
288
- top:180px;
289
- height: 100%;
290
- position: fixed;
291
- display: block;
292
- z-index: 99;
293
- /*box-shadow: -5px 0px 10px #1d1d1d*/
294
98
 
295
- }
99
+ /* Document bands */
296
100
 
297
101
  .document-stage-band {
298
- font-family: "Source Sans Pro", sans-serif;
299
- left:0;
300
- top:0;
301
- height: 100%;
302
- position: fixed;
303
- display: block;
304
- z-index: 98;
305
- box-shadow: -5px 0px 10px #1d1d1d;
306
- }
307
-
308
- .document-type {
309
- font-family: "Source Sans Pro", sans-serif;
310
- position: relative;
311
- width: 25px;
102
+ @include docBand(
103
+ $fontFamily: "'Source Sans Pro', sans-serif",
104
+ $order: 1, $textLength: 160px, $fontWeight: 300, $color: #7ba812);
312
105
  }
313
106
 
314
- .document-stage {
315
- font-family: "Source Sans Pro", sans-serif;
316
- position: relative;
317
- width: 25px;
318
- }
319
-
320
- p.document-type, p.document-stage {
321
- text-transform: uppercase;
322
- font-size: 0.9em;
323
- font-weight: 400;
324
- letter-spacing: 0.05em;
325
- margin:0;
326
- margin-left: 6px;
327
- writing-mode:tb-rl;
328
- -webkit-transform:rotate(180deg);
329
- -moz-transform:rotate(180deg);
330
- -o-transform: rotate(180deg);
331
- white-space:nowrap;
332
- display:block;
333
- bottom: 0;
334
- }
335
-
336
- p.document-type {
337
- font-weight: 400;
338
- height: 150;
107
+ .document-type-band {
108
+ @include docBand(
109
+ $fontFamily: "'Source Sans Pro', sans-serif",
110
+ $order: 2, $textLength: 150, $offset: 180px, $color: #7ba812);
339
111
  }
340
112
 
341
113
  #governance-band p.document-type {
342
- font-weight: 400;
343
- height: 230px !important;
114
+ height: 230px !important;
344
115
  }
345
-
346
- p.document-stage {
347
- font-weight: 300;
348
- height: 160px;
349
- }
350
-
351
- #standard-band p{
352
- height: 270px;
116
+ #standard-band p {
117
+ height: 270px !important;
353
118
  }
354
-
355
119
  #proposal-band p {
356
- height: 150px;
120
+ height: 150px !important;
357
121
  }
358
122
 
123
+ // Document stage
124
+ #standard, #final {
125
+ color: #9ABD48;
126
+ }
359
127
 
360
- #standard-band, #final-band {
361
- color: #7ba812;
362
- background-color: #d8eca8; }
363
-
364
- #standard, #final {
365
- color: #9ABD48; }
366
-
367
- #governance, #policy-and-procedures {
368
- border-bottom: solid 3px #750697; }
369
-
370
- #governance-band, #policy-and-procedures-band {
371
- background-color: #750697; }
372
-
373
- #guide {
374
- border-bottom: solid 3px #48a0e7; }
375
-
376
- #guide-band {
377
- background-color: #48a0e7; }
378
-
379
- .coverpage-maturity, .coverpage-stage {
380
- font-family: 'Source Sans Pro', sans-serif;
381
- font-weight: 400;
382
- font-size: 1em;
383
- margin: 0 0 2em 0;
384
- text-transform: uppercase; }
385
-
386
- #internal-draft, #proposal {
387
- border-bottom: solid 3px #F7803C; }
388
-
389
- #internal-draft-band, #proposal-band {
390
- background-color: #F7803C; }
391
-
392
- #public-draft, #initial-public-draft, #final-public-draft {
393
- border-bottom: solid 3px #fd06fd; }
394
-
395
- #public-draft-band, #initial-public-draft-band, #final-public-draft-band {
396
- background-color: #fd06fd; }
397
-
398
- #withdrawal-pending-band {
399
- background-color: #750697;
400
- color: #fff;
401
- }
402
- #retired-draft-band {
403
- background-color: #7e0d13;
404
- color: white; }
405
-
406
- #retired-draft-band {
407
- background-color: #fdf906; }
408
-
409
- #standard {
410
- border-bottom: solid 3px #9ABD48; }
411
-
412
- #standard-band {
413
- background-color: #9ABD48; }
414
-
415
- #withdrawn {
416
- border-bottom: solid 3px #7e0d13; }
417
128
 
418
- #withdrawn-band {
419
- background-color: #7e0d13; }
129
+ @import 'coverpage';
420
130
 
421
- .coverpage-maturity {
422
- font-family: $bodyfont;
423
- font-weight: 400;
424
- font-size: 1em;
425
- margin: 0 0 2em 0;
426
- text-transform: uppercase;
427
- }
428
131
 
429
- .logo-wrapper {
430
- margin-left: 3em;
431
- margin-top: 100px;
432
- margin-bottom: 100px;
433
- float: right; }
434
-
435
-
436
-
437
- img#NIST-logo {
438
- margin-right: 50px;
439
- }
440
-
441
- .logo-info {
442
- margin-left: 3em;
443
- margin-bottom: 1.5em;
132
+ .recommend {
133
+ background-color: #ccffcc;
134
+ padding: 1.2em;
135
+ margin: 2em 0 1em 0;
444
136
  }
445
137
 
446
- .logo-info p{
447
- margin: 0;
448
- }
449
138
 
450
- #NIST-logo {
451
- width: 300px;
452
- height: auto;
453
- padding-top: 3m;
454
- }
139
+ /* TYPOGRAPHY */
455
140
 
456
- #commerce-logo {
457
- width: 150px;
458
- height: auto;
141
+ h1, h2, h3, h4, h5, h6 {
142
+ font-weight: 400;
143
+ margin-top: 1.6em;
144
+ margin-bottom: 0.3em;
459
145
  }
460
146
 
461
- .authors-container {
147
+ h1 {
148
+ font-size: 1.4em;
149
+ text-transform: uppercase;
462
150
  margin-top: 2em;
463
- }
464
-
465
- .affiliation {
466
- font-style: italic;
467
- margin-bottom: 1em;
468
- }
469
-
470
- .main-section {
471
- word-wrap:break-word;
472
- }
473
-
474
- /*
475
- 3. TYPOGRAPHY
476
- */
477
-
478
- /*
479
- 3.1 Titles
480
- */
481
-
482
- h1,h2,h3,h4,h5,h6 {
483
- font-family: $headerfont;
484
- font-weight: 400;
485
- margin-top: 1.6em;
486
- margin-bottom: 0.3em;
487
- }
488
151
 
489
- h1 {
490
- font-size: 1.4em;
491
- text-transform: uppercase;
152
+ &#content {
492
153
  margin-top: 2em;
493
154
  }
155
+ }
494
156
 
495
- h1#content {
496
- margin-top: 2em;
497
- }
157
+ h2 {
158
+ margin-top: 1.7em;
159
+ font-size: 1.3em;
160
+ font-weight: 300;
498
161
 
499
- h2 {
500
- margin-top: 1.7em;
501
- font-size: 1.3em;
502
- font-weight: 300;
162
+ p {
163
+ display: inline;
503
164
  }
504
165
 
505
- h3 {
506
- margin-top: 1.5em;
507
- font-size: 1.2em;
508
- font-weight: 100;
166
+ &.TermNum {
167
+ margin-bottom: 0;
509
168
  }
169
+ }
510
170
 
511
- h4 {
171
+ h3 {
172
+ margin-top: 1.5em;
173
+ font-size: 1.2em;
174
+ font-weight: 100;
175
+ }
176
+
177
+ h4 {
512
178
  font-size: 1em;
513
- }
179
+ }
514
180
 
515
- .TermNum, .Terms, .AltTerms {
516
- font-weight: 300;
517
- }
181
+ .TermNum, .Terms, .AltTerms {
182
+ font-weight: 300;
183
+ }
518
184
 
519
- h2.TermNum {
520
- margin-bottom: 0;
521
- }
522
- /*
523
- p.Terms {
524
- font-size: 1.1em;
525
- line-height: 1.5em;
526
- margin: 0;
527
- }
528
- */
529
- p.AltTerms {
530
- /*
531
- font-style: italic;
532
- */
185
+ p {
186
+ margin-top: 1em;
187
+ margin-bottom: 1em;
188
+
189
+ &.AltTerms {
533
190
  font-size: 20px;
534
191
  margin-top: 1em;
535
192
  }
193
+ }
536
194
 
537
- /*
538
- 3.2 Links
539
- */
540
-
541
- a, a:visited{
542
- text-decoration: none;
543
- color: #2677EA;
544
- }
545
-
546
- a:hover {
547
- color: white;
548
- background: #2677EA;
549
- box-shadow: 3px 0 0 #2677EA, -3px 0 0 #2677EA;
550
- /* padding: 2px 0 2px 0; */
551
- }
552
195
 
553
- ::selection {
554
- background: #2677EA; /* WebKit/Blink Browsers */
555
- color: white;
556
- }
557
- ::-moz-selection {
558
- background: #2677EA; /* Gecko Browsers */
559
- color: white;
560
- }
196
+ /* Links, selection */
561
197
 
562
- .contact-info a:hover {
563
- color: #2677EA;
564
- text-decoration: underline;
565
- background: none;
566
- box-shadow: 0 0 0 0;
567
- }
198
+ @include elementStyles(
199
+ $color: #2677EA,
200
+ $colorHighlightBg: #2677EA,
201
+ $colorHighlightFg: white);
568
202
 
569
203
 
204
+ /* Lists */
570
205
 
571
- /*
572
- 3.3 Lists
573
- */
206
+ ul, ol {
207
+ margin-left: 1.2em;
208
+ }
574
209
 
575
- ul, ol {margin-left: 1.2em;}
210
+ ul {
211
+ > li {
212
+ &:first-child {
213
+ margin-top: 1em;
214
+ }
215
+ p:first-child {
216
+ display: inline;
217
+ }
218
+ }
219
+ }
576
220
 
577
- /*
578
- ul > li {
579
- list-style: none;
580
- }
581
221
 
582
- ul > li:before {
583
- content: "\2014";
584
- display: inline-block; width: 1em;
585
- margin-left: -1.2em;
586
- }
587
- */
588
222
 
589
- ul > li p:first-child {
590
- display: inline;
591
- }
223
+ /* Bibliograhy */
592
224
 
593
- ul > li:first-child {
225
+ p.Biblio, p.NormRef {
594
226
  margin-top: 1em;
227
+ margin-left: 2em;
595
228
  }
596
229
 
597
- #toc-list ul {margin-bottom: 0.25em;}
598
230
 
599
- #toc-list li {list-style-type: none;}
231
+ /* Blocks */
600
232
 
601
- #toc li:before {
602
- content: " ";
603
- display: none;
233
+ .figure {
234
+ @include figureBlock();
235
+ @include monospaceBlockStyle();
236
+ font-size: 0.8em;
237
+ background-color: #f6f6f6;
604
238
  }
605
239
 
606
-
607
- /*
608
- 3.4 Rules
609
- */
610
-
611
- .rule {
612
- width: 100%;
613
- height: 1px;
614
- background-color: #2677ea;
615
- margin: 2em 0;
616
- }
617
-
618
- .rule-2 {
619
- width: 100%;
620
- height: 1px;
621
- background-color: #2677ea;
240
+ .Sourcecode {
241
+ @include sourceBlock(#f6f6f6);
622
242
  }
623
243
 
624
- .rule-thick {
625
- width: 100%;
626
- height: 3px;
627
- background-color: #2677ea;
628
- margin-top: 3em;
244
+ .Note {
245
+ background-color: #ffca3a;
246
+ color: #141115;
247
+ padding: 1.2em;
248
+ margin: 1em 0 1em 0;
249
+
250
+ p {
251
+ margin: 0;
252
+ }
629
253
  }
630
254
 
255
+ .Admonition {
256
+ @include admonitionBlock();
631
257
 
632
- /*
633
- 3.5 Bibliograhy
634
- */
258
+ background-color: #ffcccc;
259
+ color: #47430c;
260
+ padding: 1.2em;
261
+ margin: 1em 0 1em 0;
635
262
 
636
- p.Biblio, p.NormRef {
637
- margin-top: 1em;
638
- margin-left: 2em;
263
+ p {
264
+ margin: 0;
265
+ }
639
266
  }
640
267
 
641
- /*
642
- 3.6 Source Code + figures
643
- */
644
-
645
- .figure, .Sourcecode {
646
- font-family: $monospacefont;
647
- font-variant-ligatures: none;
648
- background-color: #f6f6f6;
649
- font-size: 0.8em;
650
- line-height: 1.6em;
651
- padding: 1.5em;
652
- margin: 2em 0 1em 0;
653
- overflow: auto;
268
+ .Quote {
269
+ @include blockquoteBlock(#f6f6f6);
654
270
  }
655
271
 
656
- .FigureTitle, .SourceTitle, .AdmonitionTitle {
657
- font-weight: 700;
658
- font-size: 1em;
659
- text-align: center;
272
+ p.blockQuote {
273
+ padding-left: 20px;
660
274
  }
661
275
 
662
- span.nistvariable {
663
- font-family: $bodyfont;
664
- font-style: italic;
276
+ .formula {
277
+ @include formulaBlock(#f6f6f6);
665
278
  }
666
279
 
667
- /*
668
- 3.7 Notes
669
- */
670
280
 
671
- .Note {
672
- background-color: #ffca3a;
673
- color: #141115;
674
- padding: 1.2em;
675
- margin: 1em 0 1em 0;
676
- }
677
- .Note p {
678
- margin: 0;
679
- }
680
-
681
- .Admonition {
682
- background-color: #ffcccc;
683
- color: #47430c;
684
- padding: 1.2em;
685
- margin: 1em 0 1em 0;
686
- }
687
- .Admonition p {
688
- margin: 0;
689
- }
690
-
691
-
692
- /*
693
- 3.8 Examples
694
- */
281
+ /* Examples */
695
282
 
696
283
  .example {
697
- background-color: #e1eef1;
698
- padding: 1.2em;
699
- margin: 2em 0 1em 0;
700
- padding-left: 2em;
701
- }
284
+ background-color: #e1eef1;
285
+ padding: 1.2em;
286
+ margin: 2em 0 1em 0;
287
+ padding-left: 2em;
702
288
 
703
- .example .example-title {
289
+ .Sourcecode {
290
+ background: none;
291
+ }
292
+
293
+ .example-title {
704
294
  font-weight: 700;
705
295
  text-transform: uppercase;
706
- margin-top:0;
296
+ margin-top: 0;
707
297
  margin-left: -1.5em;
708
- }
709
-
710
- .example .Sourcecode {
711
- background: none;
298
+ }
712
299
  }
713
300
 
714
301
  .pseudocode {
715
- background-color: #dddddd;
716
- padding: 1.2em;
717
- margin: 2em 0 1em 0;
718
- padding-left: 2em;
719
- }
302
+ background-color: #dddddd;
303
+ padding: 1.2em;
304
+ margin: 2em 0 1em 0;
305
+ padding-left: 2em;
720
306
 
721
- .pseudocode .example-title {
307
+ .example-title {
722
308
  font-weight: 700;
723
309
  text-transform: uppercase;
724
310
  text-align: center;
725
- margin-top:0;
311
+ margin-top: 0;
726
312
  margin-left:-1.5em;
313
+ }
727
314
  }
728
315
 
729
- .recommend {
730
- background-color: #ccffcc;
731
- padding: 1.2em;
732
- margin: 2em 0 1em 0;
733
- }
734
-
735
- /*
736
- 3.9 Tables
737
- */
738
316
 
739
- table {
740
- border-collapse: collapse;
741
- width: 100%;
742
- color: #141115;
743
- font-weight: 300;
744
- margin: 1em 0 2em 0;
745
- margin-left: auto;
746
- margin-right: auto;
747
- padding-right: 2em;
748
- }
749
317
 
750
- table, th, td {
751
- border: none!important;
752
- font-size: 0.95em;
753
- }
318
+ /* Tables */
754
319
 
755
- tr:nth-child(even) {background: #f1f8ff}
756
- tr:nth-child(odd) {background: #f6f8fa}
320
+ table {
321
+ @include table($border: none !important);
757
322
 
758
- td, th {
759
- padding: 1em;
760
- }
323
+ color: #141115;
761
324
 
762
- td.header {
763
- font-weight: 400;
325
+ tr:nth-child(even) { background: #f1f8ff }
326
+ tr:nth-child(odd) { background: #f6f8fa }
764
327
  }
765
328
 
766
329
  p.TableTitle {
@@ -769,412 +332,39 @@ p.TableTitle {
769
332
  font-weight: 400;
770
333
  }
771
334
 
772
- /*
773
- 3.10 Footnotes
774
- */
335
+
336
+ /* Footnotes */
775
337
 
776
338
  a.footnote-number {
777
- vertical-align: super;
778
- font-size: 0.8em;
339
+ vertical-align: super;
340
+ font-size: 0.8em;
779
341
  }
780
342
 
781
343
  .footnote {
782
- font-size: 0.9em;
783
- }
784
-
785
-
786
- /*
787
- 3.11 Blockquotes
788
- */
789
-
790
- .Quote {
791
- background-color: #f6f6f6;
792
- font-style: italic;
793
- width: 80%;
794
- padding: 1.5em;
795
- margin-top: 2em;
796
- margin-left: auto;
797
- margin-right: auto;
798
- }
799
-
800
-
801
- /*
802
- 3.12 Formulas
803
- */
804
-
805
- .formula {
806
- background-color: #f6f6f6;
807
- padding: 1.5em;
808
- margin-top: 2em;
809
- text-align: center;
810
- }
811
-
812
- /*
813
- 3.13 Contact Info
814
- */
815
-
816
- .contact-info {
817
- width: 280px;
818
- }
819
-
820
- .contact-info, .authority5 {
821
- padding: 2em;
822
- margin-top: 5em;
823
-
824
- text-align: left;
825
- color: #2677ea!important;
826
- background-color: #f1f8ff;
827
- border-radius: 25px;
828
-
829
- }
830
-
831
- .authority5 h2 {
832
- text-align: center;
833
- }
834
-
835
- .contact-info a,
836
- .contact-info a:hover,
837
- .authority5 a,
838
- .authority5 a:hover {
839
- color: #2677ea;
840
- }
841
-
842
- .contact-info p, .contact-info a {
843
- font-family: $monospacefont;
844
- font-variant-ligatures: none;
845
- font-weight: 400;
846
- }
847
-
848
- .contact-info .name {
849
- font-weight: 700;
850
- font-size: 14px;
851
- margin-bottom: 5px;
344
+ font-size: 0.9em;
852
345
  }
853
346
 
854
- .contact-info .address {
855
- font-size: 12px;
856
- line-height: 1.3em;
857
- margin-top:0;
858
- }
859
347
 
860
- /*
861
- Keywords
862
- */
348
+ /* Keywords */
863
349
 
864
350
  span.keyword {
865
- font-weight: 600;
866
- }
867
-
868
- /*
869
- Paragraphs
870
- */
871
-
872
- p {
873
- margin-top: 1em;
874
- margin-bottom: 1em;
875
- }
876
-
877
- h2 p {
878
- display: inline;
879
- }
880
-
881
-
882
- /*
883
- 4.0 Page header
884
- */
885
-
886
- /*
887
- 4.1 Top Logo
888
- */
889
-
890
- .icon-svg {
891
- width: 100%;
892
- color: #5ecf86;
351
+ font-weight: 600;
893
352
  }
894
353
 
895
- .wrapper-top {
896
- background: #fff;
897
- color: #141115;
898
- padding: 7em 0;
899
- margin-left: 3em;
900
- }
901
-
902
- .wrapper-top-bottom {
903
- width: 0;
904
- height: 0;
905
- border-top: 100px solid #1661AD;
906
- border-right: 100px solid transparent;
907
- position: absolute;
908
- }
909
-
910
- .doc-number {
911
- font-size: 20px;
912
- font-family: $bodyfont;
913
- line-height: 1.6;
914
- margin: 1.5em 0;
915
- }
916
-
917
- .coverpage-title {
918
-
919
- font-family: $headerfont; }
920
-
921
- .coverpage-title span {
922
- font-family: $headerfont;
923
- font-size: 1.1em;
924
- line-height: 1;
925
- }
926
-
927
- .title-second {
928
- font-style: italic;
929
- font-size: 15px;
930
- line-height: 1.6;
931
- margin-bottom: 1.5em;
932
- }
933
-
934
- .download-info {
935
- margin-top: 2em;
936
- }
937
-
938
- .category {
939
- color: #2677ea;
940
- margin-top: 4em;
941
- margin-right: 2em;
942
- padding: 0.7em 1em;
943
- text-align: center;
944
- border-top: solid 1px #2677ea;
945
- border-bottom: solid 1px #2677ea;
946
- text-transform: uppercase;
947
- }
948
-
949
- .banner {
950
- border-top: 1px solid #2677ea;
951
- border-bottom: 1px solid #2677ea;
952
- margin-right: 50px;
953
- margin-top: 100px;
954
- }
955
-
956
- .banner p {
957
- text-transform: uppercase;
958
- font-weight: 300;
959
- font-size: 16px;
960
- letter-spacing: 5px;
961
- text-align: center;
962
- color: #2677ea;
963
- font-family: $monospacefont;
964
- }
965
-
966
- .banner#inactive-draft {
967
- display: none;
968
- }
969
-
970
- .WordSection11 {
971
- padding: 0 2em 0 3em;
972
- }
973
-
974
- .info-section {
975
- padding: 0; }
976
-
977
- .prefatory-section {
978
- padding: 0 3em 0 6em;
979
- }
980
-
981
-
982
- .zzSTDTitle1, .MsoCommentText {
983
- display: none;
984
- }
985
-
986
-
987
- .coverpage {
988
- text-align: left;
989
- padding-left: 1.5em;
990
- }
991
-
992
- .coverpage-logo span, .coverpage-tc-name span {
993
- font-family: $bodyfont;
994
- text-transform: none;
995
- font-weight: 300;
996
- }
997
-
998
- .coverpage-logo span {
999
- display: block;
1000
- float: left;
1001
- }
1002
-
1003
- .coverpage-tc-name {
1004
- font-size: 1.2em;
1005
- line-height: 1.2em;
1006
- margin: 0.25em 0;
1007
- }
1008
-
1009
- /*
1010
- 4.2 Document Identity
1011
- */
1012
-
1013
- .coverpage-doc-identity {
1014
- font-size: 2em;
1015
- line-height: 1.5em;
1016
- margin-bottom: 150px;
1017
- }
1018
-
1019
- /*
1020
- .coverpage-title .title-second {
1021
- display: none;
1022
- }
1023
- */
1024
-
1025
- .coverpage-stage-block {
1026
- font-family: 'Source Sans Pro', sans-serif;
1027
- font-weight: 600;
1028
- font-size: 1.25em;
1029
- margin: 2em 0em 2em 0em;
1030
- text-transform: uppercase;
1031
- }
1032
-
1033
- .more-info {
1034
- margin-right: 50px;
1035
- }
1036
-
1037
- .more-info h2 {
1038
- text-align: center;
1039
- color: #2e81c2;
1040
- font-size: 20px;
1041
- font-family: 'Source Sans Pro', sans-serif;
1042
- font-weight: 300;
1043
- text-transform: uppercase;
1044
- }
1045
-
1046
- .more-info p {
1047
- font-size: 14px;
1048
- }
1049
-
1050
-
1051
- /*
1052
- 4.3 Draft Warning
1053
- */
1054
-
1055
- .coverpage-warning {
1056
- border: #f36f36 solid 2px;
1057
- color: #f36f36!important;
1058
- margin: 50px 100px;
1059
- color: #2e81c2;
1060
- padding: 10px;
1061
- border-radius: 25px;
1062
- text-align: center;
1063
- font-size: 14px;
1064
- }
1065
-
1066
- .coverpage-warning p {
1067
- margin: 0;
1068
- line-height: 1.6;
1069
- }
1070
354
 
1071
- .coverpage-warning .title {
1072
- font-family: 'Source Sans Pro', sans-serif;
1073
- font-weight: 300;
1074
- text-transform: uppercase;
1075
- font-size: 1.2em;
1076
- }
1077
-
1078
- .draft-state-container {
1079
- margin-bottom: 30px;
1080
- margin-top: -30px;
1081
- }
1082
-
1083
- .draft-state {
1084
- font-size: 20px;
1085
- color: #f36f36;
1086
- }
1087
-
1088
- .draft-state#inactive-draft {
1089
- color: #7e0d13;
1090
- }
1091
-
1092
- .draft-state#inactive-final {
1093
- color: #750697;
1094
- }
1095
-
1096
- .draft-description {
1097
- font-size: 14px;
1098
- }
1099
-
1100
- #retired-draft, #retired-draft {
1101
- color: #7e0d13;
1102
- }
1103
-
1104
- .draft-description p {
1105
- margin-top: 10px;
1106
- margin-bottom: 0;
1107
- }
1108
-
1109
- p.blockQuote {
1110
- padding-left: 20px;
1111
- }
1112
-
1113
- table.coverpage-table {
1114
- max-width: 500px;
1115
- font-size: 14px;
1116
-
1117
- }
1118
-
1119
-
1120
- /*
1121
- 4.4 Copyright
1122
- */
1123
-
1124
- .copyright {
1125
- padding: 1em;
1126
- font-size: 0.9em;
1127
- text-align: left;
1128
- }
1129
-
1130
-
1131
- /* .copyright .name, .copyright .address {color: #2e81c2;} */
1132
-
1133
-
1134
-
1135
- /*
1136
- 5.0 Other styles
1137
- */
1138
-
1139
-
1140
-
1141
- /*
1142
- To top button
1143
- */
355
+ /* To top button */
1144
356
 
1145
357
  #myBtn {
1146
- font-family: $monospacefont;
1147
- font-variant-ligatures: none;
1148
- display: none;
1149
- position: fixed;
1150
- bottom: 20px;
1151
- right: 30px;
1152
- z-index: 99;
1153
- font-size: 12px;
1154
- border: none;
1155
- outline: none;
1156
- background-color: #2677ea;
1157
- opacity: 0.15;
1158
- color: white;
1159
- cursor: pointer;
1160
- padding: 10px 15px 10px 15px;
1161
- border-radius: 4px;
1162
- text-transform: uppercase;
1163
- }
358
+ @include toTopBtn($color: white, $colorBg: #2677ea);
359
+ text-transform: uppercase;
1164
360
 
1165
- #myBtn:hover {
1166
- opacity: 1;
361
+ @media print {
362
+ background-color: white;
1167
363
  }
1168
-
1169
- a.anchorjs-link:hover {
1170
- background: none;
1171
- color: #2e81c2;
1172
- box-shadow: none;
1173
364
  }
1174
365
 
1175
- .authority3 {
1176
- border: solid;
1177
- padding: 1em;
366
+ .anchorjs-link {
367
+ @include anchorLink(#2e81ca);
1178
368
  }
1179
369
 
1180
370
  @page {
@@ -1182,10 +372,8 @@ To top button
1182
372
  }
1183
373
 
1184
374
  @media print {
1185
-
1186
-
1187
375
  .document-info, nav, .copyright {
1188
- page-break-before: always;
376
+ page-break-before: always;
1189
377
  }
1190
378
 
1191
379
  nav {
@@ -1205,91 +393,46 @@ To top button
1205
393
  display: none;
1206
394
  }
1207
395
 
1208
- .coverpage {
1209
- height: 23cm;
1210
- }
1211
-
1212
396
  .wrapper-top {
1213
397
  top: 0;
1214
398
  padding-top: 4cm;
1215
399
  padding-bottom: 4cm;
1216
400
  }
1217
401
 
1218
- .wrapper-top-bottom {
1219
- margin-top: -5px;
1220
- }
1221
-
1222
-
1223
- #toggle, .document-stage-band,
1224
- .document-type-band, button#myBtn {
1225
- display: none;
1226
- }
1227
-
1228
- button#myBtn {
1229
- background-color: white;
1230
- }
1231
-
1232
- .container {
1233
- padding-left: 0;
1234
- }
1235
-
1236
- nav {
1237
- position: relative;
1238
- width: auto;
1239
- font-size: 0.9em;
1240
- overflow: auto;
1241
- padding: 0;
1242
- margin-right: 0;
1243
- background-color: white;
1244
- }
1245
-
1246
- #toc .toc-active a {
1247
- color: #4D7EA5;
402
+ .wrapper-top-bottom { // TODO: Obsolete?
403
+ display: none;
1248
404
  }
1249
405
 
1250
- #toc .toc-active, #toc li:hover {
1251
- background: white;
1252
- box-shadow: none !important; }
1253
-
1254
- #toc li:hover a {
1255
- color: black; }
1256
-
406
+ h1 {
407
+ font-size: 1.5em;
408
+ line-height: 1.5;
1257
409
 
1258
- h1.content {
410
+ &.content {
1259
411
  margin-top: 2em;
1260
412
  line-height: 2.5em;
1261
413
  }
414
+ }
1262
415
 
1263
- h1 {
1264
- font-size: 1.5em;
1265
- line-height: 1.5;
1266
- }
1267
-
1268
- h2 {
1269
- font-size: 1.2em
1270
- }
416
+ h2 {
417
+ font-size: 1.2em
418
+ }
1271
419
 
1272
- h3 {
1273
- font-size: 1em;
1274
- }
420
+ h3 {
421
+ font-size: 1em;
422
+ }
1275
423
 
1276
- .Note {
1277
- background-color: #fff495;
1278
- color: #47430c;
1279
- padding: 5px;
1280
- margin: 2em 0 1em 0; }
424
+ .Note {
425
+ background-color: #fff495;
426
+ color: #47430c;
427
+ padding: 5px;
428
+ margin: 2em 0 1em 0;
1281
429
 
1282
- .Note p {
430
+ p {
1283
431
  padding: 0 5px 0 5px;
1284
432
  }
433
+ }
1285
434
 
1286
- nav {
1287
- line-height: 1;
1288
- }
1289
-
1290
- .wrapper-top-bottom {
1291
- display: none;
1292
- }
1293
-
435
+ nav {
436
+ line-height: 1;
437
+ }
1294
438
  }
1295
-