lib/isodoc/gb/html/htmlcompliantstyle.scss in metanorma-gb-1.3.18 vs lib/isodoc/gb/html/htmlcompliantstyle.scss in metanorma-gb-1.3.19
- old
+ new
@@ -5,245 +5,107 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
-}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- border: 0;
- font-size: 100%;
-}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, tt, var,
-b, u, i, center,
-dl, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- vertical-align: baseline;
-}
-
-
-html, body, div, span, applet, object, iframe,
-p, blockquote,
-a, abbr, acronym, address, big, cite,
-del, dfn, em, img, ins, q, s,
-small, strike, strong, sub, sup, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- font-family: $bodyfont;
-}
+$doctype-colors-list: (standard: #0ac442,
+ governance: #750697,
+ guide: #48a0e7,
+);
-code, pre, tt, kbd, samp {
- font-family: $monospacefont;
- font-variant-ligatures: none;
-}
+$docstage-colors-list: (working-draft: #fda706,
+ committee-draft: #fd06fd,
+ draft-standard: #fdf906,
+ standard: #0ac442,
+ obsolete: #7e0d13,
+);
-code *, pre *, tt *, kbd *, samp * {
- font-family: $monospacefont !important;
- font-variant-ligatures: none;
-}
+$mainContentsOffsetLeft: 4em;
+@import 'base_style/all';
+
h1, h2, h3, h4, h5, h6, .h2Annex {
margin-top: 1.5em;
margin-bottom: 0.3em;
color: #000000;
font-family: $headerfont;
-}
-
-dl {
- display: grid;
- grid-template-columns: max-content auto;
}
-dt {
- grid-column-start: 1;
-}
-
-dd {
- grid-column-start: 2;
-}
-
-dd p, dt p {
- margin-top: 0px;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
body {
- line-height: 1;
- margin: 0;
+ @include bodyStyle1($bodyfont, 1, black, white);
+ margin: 0;
+ margin-left: 298px;
+ margin-right: 2em;
+ main {
+ margin: 0 1.5em;
+ }
}
-body {
- margin-left: 298px;
- margin-right: 2em;
-}
+@import 'coverpage';
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
/* Setting of the page size and margins */
@page {
- size: 210mm 297mm;
- margin: 10mm 15mm 20mm 25mm;
+ size: 210mm 297mm;
+ margin: 10mm 15mm 20mm 25mm;
}
.title-section {
- padding-left: 4em;
- padding-top: 10mm;
+ padding-left: 4em;
+ padding-top: 10mm;
}
.prefatory-section {
- padding: 0 3em 0 6em;
+ padding: 0 3em 0 6em;
}
-
.prefatory-section, main {
- margin: 0 1.5em;
+ margin: 0 1.5em;
}
main {
- padding-left: 4em;
- padding-right: 2em;
+ padding-left: 4em;
+ padding-right: 2em;
}
- .zzSTDTitle1, .MsoCommentText {
- display: none; }
-
-
-
-.doctitle-en, .doctitle-fr {
- margin-top: 2em;
- text-align: left;
+.zzSTDTitle1, .MsoCommentText {
+ display: none;
}
-.doctitle-en {
- padding-left: 3em;
- margin-left: -3em;
- padding-top: 2em;
- padding-bottom: 2em;
-
-}
-
-.doctitle-en span {
- font-size: 2em;
- line-height: 1.5em;
- display: block;
-}
-
-
-.doctitle-fr span {
- font-size: 1.5em;
- line-height: 1.2em;
- font-style: italic;
- display: block;
-}
-
span.title {
text-transform: uppercase;
font-size: 1em;
font-weight: 800;
}
-.coverpage_docstage {
- margin-top: 2em;
- margin-bottom: 2em;
-}
-
-/*
.coverpage_warning {
- border-top: solid 1px #f36f36;
- border-bottom: solid 1px #f36f36;
- margin: 1em 2em;
- color: #485094;
- padding: 1em;
-}
-*/
-
-.coverpage_warning {
font-size: 0.9em;
font-style: italic;
padding-bottom: 1em;
}
-/*
-.coverpage_warning .title {
- color: #f36f36;
- font-weight: 500;
-}
-
-.coverpage_warning .content {
- font-style: italic;
-}
-
-.coverpage_docnumber, .coverpage_techcommittee {
- text-align: right;
- font-size:0.9em;
- line-height: 0.5em;
-}
-*/
-
.coverpage {
text-align: center;
+ padding: 0;
/* margin: 2em 0; */
}
+.coverpage-doc-relations,
+.coverpage-doc-identity-first {
+ padding-top: 0;
+}
+.coverpage-stage-block {
+ font-style: normal;
+ font-weight: 400;
+}
+.coverpage-logo {
+ color: black;
+ font-weight: normal;
+}
+.coverpage_docnumber,
+.coverpage_techcommittee {
+ font-size: 100%;
+}
/* NEW */
.coverpage-header {
height: 55mm;
}
@@ -286,52 +148,26 @@
height: 42mm;
display: flex;
flex-direction: column;
}
-
-
-
.coverpage-tc-name {
font-size: 1.2em;
line-height: 1.2em;
margin: 0.25em 0;
}
-/*
-.coverpage-doc-identity {
- background-color: #485094;
- color: white;
- font-size: 2em;
- line-height: 2em;
- margin: 0.5em 0;
-}
-*/
-
-.coverpage-title {
- font-weight: 400;
-}
-
-.coverpage-title .title-second {
- display: none;
-}
-
span.coverpage-logo-text {
font-size: 5mm;
text-align: right;
float: right;
padding-bottom: 9mm;
font-weight: bold;
}
/* NEW */
.coverpage-doc-identity-first {
- font-size: 5mm;
- text-align: right;
- padding-right: 5mm;
- /*font-weight: bold; */
- padding-bottom: 1em;
border-bottom: solid black 1px;
}
/* NEW */
.title-first, .title-second, .title-third, .stage, .date-publish,
@@ -380,198 +216,110 @@
/* NEW */
span.date-active {
float:right;
}
-
.coverpage-doc-relations {
font-size:10.5pt;
}
-.coverpage-title-zh {
- font-size: 8mm;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- /* flex-direction: column; */
- font-family:$headerfont;
-}
-
.coverpage-title-zh span {
padding-top: 2mm;
font-size: 8mm;
}
.coverpage-title-en {
- margin-top: 10mm;
- font-size: 5mm;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- font-family:$headerfont;
+ font-size: 5mm;
}
-.coverpage-title-en span {
- display: block;
+/* NEW */
+.coverpage-warning {
+ border-top: solid 1px #f36f36;
+ border-bottom: solid 1px #f36f36;
+ margin: 1em 2em;
+ color: #485094;
+ padding: 1em;
}
-.coverpage-title-en .title-first {
- text-transform: uppercase;
+/* NEW */
+.coverpage-warning .title {
+ color: #f36f36;
+ font-weight: 500;
}
/* NEW */
- .coverpage-warning {
- border-top: solid 1px #f36f36;
- border-bottom: solid 1px #f36f36;
- margin: 1em 2em;
- color: #485094;
- padding: 1em; }
-
-/* NEW */
- .coverpage-warning .title {
- color: #f36f36;
- font-weight: 500; }
-
-/* NEW */
- .coverpage-warning .content {
- font-style: italic; }
-
-
-
-.coverpage-iso-relation {
- font-size:14pt;
- margin-top: 10mm;
- text-align: center;
+.coverpage-warning .content {
+ font-style: italic;
}
-
.coverpage-dates {
- width:100%;
- margin-top: 25mm;
- border-bottom: 1px solid #000;
font-size: 4.5mm;
- font-family:$headerfont;
}
.coverpage_footer {
- text-align:center;
font-size: 1em;
- font-weight: 600;
- width: 100%;
- margin-top: 10mm;
}
/* NEW */
-.coverpage_footer table, .coverpage_footer th, .coverpage_footer td {
- border: 0;
-}
-
-/* NEW */
-.coverpage_footer th, .coverpage_footer td {
- padding: 5px;
- font-size: 1.1em;
- font-weight: 600;
-}
-
-/* NEW */
-.coverpage_footer .publish {
- vertical-align: middle;
-}
-
-
-/* NEW */
.coverpage-banner {
- padding-top: 5mm;
- margin-left:auto;
- margin-right:auto;
- width:auto;
- display:flex;
- flex-wrap: wrap;
- justify-content: center;
height: 177.5mm;
}
- .copyright {
- padding: 1em; }
-
-
-/*
-.copyright .name {
- font-weight: 900;
- padding-top: 1em;
+.copyright {
+ padding: 1em;
}
-*/
.copyright .year, .copyright .message,
.copyright .name, .copyright .address {
- margin-top: 1em;
- /* line-height: 1.1em; */
- display: block;
+ line-height: 1;
}
-.copyright .message, .copyright .name,
-.copyright .address {
- font-size: 0.9em;
+p.MsoCommentText, li.MsoCommentText, div.MsoCommentText {
+ margin-top: 0cm;
+ margin-right: 0cm;
+ margin-bottom: 12.0pt;
+ margin-left: 0cm;
+ text-align: justify;
+ line-height: 12.0pt;
+ /* tab-stops: 20.15pt; */
+ font-size: 12.0pt;
+ font-family: $bodyfont;
}
-.copyright .name {
- color: #485094;
- font-weight: 600;
+p.MsoCommentSubject, li.MsoCommentSubject, div.MsoCommentSubject {
+ margin-top: 0cm;
+ margin-right: 0cm;
+ margin-bottom: 12.0pt;
+ margin-left: 0cm;
+ text-align: justify;
+ line-height: 12.0pt;
+ tab-stops: 20.15pt;
+ font-size: 10.0pt;
+ font-family: $headerfont;
+ font-weight: bold;
}
-.copyright .address {
- color: #485094;
-}
-
-
- p.MsoCommentText, li.MsoCommentText, div.MsoCommentText {
- margin-top: 0cm;
- margin-right: 0cm;
- margin-bottom: 12.0pt;
- margin-left: 0cm;
- text-align: justify;
- line-height: 12.0pt;
- /* tab-stops: 20.15pt; */
- font-size: 12.0pt;
- font-family: $bodyfont;
- }
-
- p.MsoCommentSubject, li.MsoCommentSubject, div.MsoCommentSubject {
- margin-top: 0cm;
- margin-right: 0cm;
- margin-bottom: 12.0pt;
- margin-left: 0cm;
- text-align: justify;
- line-height: 12.0pt;
- tab-stops: 20.15pt;
- font-size: 10.0pt;
- font-family: $headerfont;
- font-weight: bold; }
-
-
-
-
/* TYPOGRAPHY */
a {
color: #000;
text-decoration: underline;
text-decoration-color: black;
}
h1 {
- font-size: 1.5em;
+ font-size: 1.5em;
font-weight: 400;
}
h2 {
- font-size: 1.3em;
+ font-size: 1.3em;
font-weight: 300;
}
h3 {
- font-size: 1.1em;
+ font-size: 1.1em;
font-weight: 300;
}
h1 {
margin-top: 2em;
@@ -582,15 +330,15 @@
margin-top: 2em;
margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 {
- line-height: 1.2;
+ line-height: 1.2;
}
h2 p {
- display: inline;
+ display: inline;
}
p {
font-size: 1em;
line-height:1.4em;
@@ -598,38 +346,22 @@
margin-top: 1em;
margin-bottom:1em;
}
p.zzSTDTitle1 {
- font-weight: 700;
- font-size: 1.5em;
- }
+ font-weight: 700;
+ font-size: 1.5em;
+}
span.obligation {
- font-weight: 400;
+ font-weight: 400;
}
-a:visited {
- text-decoration: none;
-}
-
-/*
-a:hover {
- text-style: italic;
- color: #485094;
-}
-*/
-
-nav a {
- color: black;
- /* line-height: 1.2em; */
-}
-
p.TermNum {
font-size: 1.3em;
font-weight: 300;
- margin: 1em 0 0 0;
+ margin: 1em 0 0 0;
}
p.Terms {
font-size: 1.3em;
font-weight: 300;
@@ -649,165 +381,96 @@
margin: 0;
}
/* Navigation*/
-@media screen and (min-width: 768px) {
- nav {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- width: 278px;
- font-size: 0.9em;
- overflow: auto;
- padding: 0 0 0 45px;
- background-color:#f7f7f7;
- line-height: 1.2em;
- }
+nav {
+ @include sidebarNav(#f7f7f7, 278px, 45px);
- #toggle {
- position: fixed;
- height: 100%;
- width: 30px;
- border-right: solid black 1px;
- background-color:black;
- color: white!important;
- cursor: pointer;
- margin-left: -4em;
- margin-top: -2em;
- }
+ a {
+ color: black;
+ text-decoration: none;
+ line-height: 1.2em;
+ }
+}
- #toggle span {
- text-align: center;
- width: 100%;
- position: absolute;
- top: 50%;
- transform: translate(0, -50%);
+#toggle {
+ @include sidebarNavToggle(white, black);
- }
+ @media screen and (min-width: $bigscreenBreakpoint) {
+ margin-left: -$mainContentsOffsetLeft;
+ width: 30px;
+ border-right: solid black 1px;
+ margin-top: -2em;
+ z-index: 0;
+ }
+}
+#toc {
+ @include toc(inherit, #1d1d1d, white);
- .container {
- padding-left: 360px;
- }
+ li:before {
+ content: " ";
+ display: none;
+ }
- .rule.toc {
- display: none;
+ ul{
+ a {
+ &:hover {
+ box-shadow: none;
+ color: black;
+ }
+ color: #000000;
+ text-decoration: none !important;
+ display: block;
+ font-family: $bodyfont;
}
-
- h1.toc-contents {
- margin-top: 1em;
+ }
+ .toc-active {
+ a {
+ color: black;
}
-
- ul#toc-list {
- padding:0;
- margin:0;
- }
+ }
+ .toc-active,
+ li:hover {
+ background: none;
+ box-shadow: none !important;
+ }
}
-@media screen and (max-width: 768px) {
- #toc {
- padding: 0 1.5em 0 1.5em;
- overflow: visible;
- }
+#toc-list {
+ ul {
+ margin-bottom: 0.25em;
- #toggle {
- display: none;
- margin-left: -4em;
- margin-top: -2em;
+ li {
+ list-style-type: none;
}
-
- body {
- margin-left: 2em;
- }
-
- main {
- padding: 0;
- }
-
- .title-section, .prefatory-section {
- padding-left: 0;
- padding-top: 0;
- width: 100%;
- }
-}
-
- div.figure > img:not(.logo) {
- margin-left: auto;
-margin-right: auto;
-display: block;
-max-width: 100%;
-height: auto;
}
-
-#toc ul {
- margin: 0;
+ @media screen and (min-width: $bigscreenBreakpoint) {
padding: 0;
- list-style: none;
+ margin: 0;
+ }
}
-#toc li a {
- padding: 5px 10px;
-}
-
-#toc a {
- color: #000000;
- text-decoration: none!important;
+div.figure > img:not(.logo) {
+ margin-left: auto;
+ margin-right: auto;
display: block;
- font-family: $bodyfont;
+ max-width: 100%;
+ height: auto;
}
-#toc a:hover {
- box-shadow: none;
- color: black;
-}
-
-#toc .h2 {
- padding-left: 30px;
-}
-
-#toc .h3 {
- padding-left: 50px;
-}
-
-nav a {
- text-decoration: none!important;
-}
-
-#toc .toc-active a {
- color: black;
-}
-
-/*
-#toc .toc-active, #toc li:hover {
- background: #1d1d1d;
- box-shadow: inset -5px 0px 10px -5px #1d1d1d!important;
-
-}
-*/
-#toc li:hover a {
- color: black;
-}
-
-
- #toc li:before {
- content: " ";
- display: none;
- }
-
::selection {
background: #1d1d1d; /* WebKit/Blink Browsers */
color: white;
}
::-moz-selection {
background: #1d1d1d; /* Gecko Browsers */
color: white;
}
-
/*
Document types + stages
*/
@@ -1093,59 +756,82 @@
/*
3.4 Rules
*/
-/*
- div.rule {
- width: 100%;
- height: 1px;
- background-color: #485094;
- margin: 2em 0; }
-*/
-
.rule {
- width: 100%;
- height: 1px;
- background-color: #0e1a85;
- margin: 2em 0;
+ @include rule(1px, #0e1a85);
+
+ &.toc {
+ @media screen and (min-width: $bigscreenBreakpoint) {
+ display: none;
+ }
}
+}
/*
3.5 Bibliograhy
*/
p.Biblio, p.NormRef {
-margin-top: 1em;
-margin-left: 2em;
+ margin-top: 1em;
+ margin-left: 2em;
}
/*
3.6 Source Code + figures
*/
pre {
-font-family: $monospacefont;
-font-variant-ligatures: none;
+ font-family: $monospacefont;
+ font-variant-ligatures: none;
}
-pre, .figure, .pseudocode {
- font-size:0.9em;
+pre,
+.figure,
+.pseudocode {
+ font-size: 0.9em;
line-height: 1.6em;
-padding: 1.5em;
+ padding: 1.5em;
background-color: #f7f7f7;
-margin: 2em 0 1em 0;
-overflow: auto;
+ margin: 2em 0 1em 0;
+ overflow: auto;
}
-.figure-title, .FigureTitle, .SourceTitle, .AdmonitionTitle, .RecommendationTitle {
-font-weight: 700;
-font-size: 1em;
-text-align: center;
-font-family: $headerfont;
+.Sourcecode {
+ @include sourceBlock(#f7f7f7, null);
+ // Requires fontSize: null, but needs an update in isodoc
+ // @include sourceBlock(#f7f7f7, null, null);
}
+.pseudocode {
+ @include pseudocodeBlock(#f7f7f7, null);
+ // Requires fontSize: null, but needs an update in isodoc
+ // @include pseudocodeBlock(#f7f7f7, null, null);
+}
+
+.Sourcecode,
+.figure,
+.pseudocode {
+ font-size: 0.9em;
+}
+
+.figure {
+ @include figureBlock();
+ background-color: #f7f7f7;
+}
+
+.figure-title,
+.FigureTitle,
+.SourceTitle,
+.AdmonitionTitle,
+.RecommendationTitle {
+ font-weight: 700;
+ font-size: 1em;
+ font-family: $headerfont;
+}
+
/*
3.7 Notes
*/
.Note, .note {
@@ -1174,75 +860,47 @@
/*
3.8 Examples
*/
.example {
- background-color: #e1eef1;
- /*padding: 1.2em; */
- padding: 0.5em;
- margin: 2em 0 1em 0;
- text-align: left;
-}
+ @include exampleBlock(#e1eef1, null, .5em, 1.5em);
-.example p {
- margin: 0;
-}
-
-.example .example-title {
-font-weight: 700;
-text-transform: uppercase;
-margin-top:0;
-}
-
-.example-title {
- font-family: $headerfont;
+ .example-title {
+ margin-top: 0;
}
-
-.example pre, .example .pseudocode {
- background: none;
+ .Sourcecode,
+ .pseudocode,
+ pre {
+ background: none;
+ }
}
/*
3.9 Tables
*/
table {
-border-collapse: collapse;
-width: 100%;
-font-weight: 300;
-margin: 1em 0 2em 0;
-margin-left: auto;
-margin-right: auto;
-padding-right: 2em;
-text-align: center;
-}
+ @include table(1px solid black);
-table, th, td {
-border: 1px solid black;
-font-size: 0.95em;
+ td,
+ th {
+ padding: 1em !important;
+ }
+ text-align: center;
}
-td, th {
-padding: 1em!important;
-}
-
-td.header {
-font-weight: 400;
-}
-
p.TableTitle {
-text-align: center;
-margin-top: 2.5em;
-font-weight: 400;
-font-size: 1.1em;
-font-family: $headerfont;
+ margin-top: 2.5em;
+ font-weight: 400;
+ font-size: 1.1em;
+ font-family: $headerfont;
}
.TableFootnote {
- text-align: left!important;
- list-style: lower-alpha;
+ text-align: left !important;
+ list-style: lower-alpha;
}
/*
3.10 Footnotes
*/
@@ -1300,40 +958,38 @@
/*
3.11 Blockquotes
*/
-.blockquote, .Quote {
-background-color: #f7f7f7;
-font-style: italic;
-width: 80%;
-padding: 1.5em;
-margin-top: 2em;
-margin-left: auto;
-margin-right: auto;
+.blockquote,
+.Quote {
+ @include blockquoteBlock(#f7f7f7);
}
/*
3.12 Formulas
*/
.formula {
- /* background-color: #f1f1f1; */
- background-color: #f7f7f7;
- padding: 1.5em;
- margin-top: 2em;
- margin-bottom: 1em;
- text-align: center;
- margin-left: 20%;
- margin-right: 20%;
+ @include formulaBlock(#f7f7f7);
+
+ margin-left: 20%;
+ margin-right: 20%;
}
+dl.formula_dl {
+background-color: #f7f7f7;
+margin-left: 20%;
+margin-right: 20%;
+}
+
+
/*
Keywords
*/
span.keyword {
-font-weight: 600;
+ font-weight: 600;
}
.Admonition, .admonition {
background-color: #ffb3b3;