@forsakringskassan/docs-generator 2.5.0 → 2.7.0

package/dist/style/index.css

@@ -125,6 +125,101 @@ pre code {
   display: block;
 }
 
+.docs-contextmenu {
+  background-color: var(--docs-contextmenu-background-color);
+}
+.docs-contextmenu__list {
+  background: inherit;
+  border-radius: 2px;
+  border: 1px solid var(--docs-contextmenu-border-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  color: var(--docs-contextmenu-link-color);
+  display: block;
+  font-weight: normal;
+  margin: 0;
+  padding: 0.5rem;
+  position: absolute;
+  right: 0;
+  visibility: hidden;
+  z-index: 1;
+}
+.docs-contextmenu__item {
+  display: block;
+  list-style-type: none;
+  white-space: nowrap;
+}
+.docs-contextmenu__item.highlight {
+  background-color: var(--docs-contextmenu-highlight-color);
+  font-weight: bold;
+}
+.docs-contextmenu__anchor {
+  cursor: pointer;
+  display: block;
+  padding: 0.75rem;
+}
+.docs-contextmenu__anchor, .docs-contextmenu__anchor:visited, .docs-contextmenu__anchor:active {
+  color: var(--docs-contextmenu-link-color-default);
+}
+.docs-contextmenu__anchor:hover {
+  color: var(--docs-contextmenu-link-color-default);
+  background-color: var(--docs-contextmenu-link-background-hover);
+}
+
+.docs-topnav {
+  background-color: var(--docs-topnav-background-color);
+  margin: 0 -0.5rem;
+  overflow: hidden;
+}
+.docs-topnav__list {
+  display: flex;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+}
+.docs-topnav__item {
+  display: inline-flex;
+  list-style-type: none;
+  padding: 1.1rem 0 0 0;
+  white-space: nowrap;
+}
+.docs-topnav__item.highlight {
+  color: var(--docs-topnav-link-color-highlight);
+  font-weight: bold;
+}
+.docs-topnav__item.highlight :where(.docs-topnav__anchor) {
+  border-color: var(--docs-topnav-border-color-highlight);
+  font-weight: bold;
+}
+.docs-topnav__item--more {
+  position: absolute;
+  visibility: hidden;
+}
+.docs-topnav__anchor {
+  border: none;
+  border-bottom: 5px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
+  padding-bottom: 0.5rem;
+}
+.docs-topnav__anchor, .docs-topnav__anchor:visited, .docs-topnav__anchor:active {
+  color: var(--docs-topnav-link-color-default);
+}
+.docs-topnav__anchor:hover {
+  color: var(--docs-topnav-link-color-hover);
+  border-color: var(--docs-topnav-border-color-hover);
+}
+button.docs-topnav__anchor {
+  align-items: center;
+  background: none;
+  display: flex;
+  gap: 0.75rem;
+  padding: 0;
+  padding-bottom: 0.5rem;
+}
+button.docs-topnav__anchor svg {
+  color: var(--docs-topnav-border-color-highlight);
+}
+
 .layout-wrapper {
   display: grid;
   grid-template: "header" auto "primary" 1fr "footer" auto;
@@ -133,6 +228,7 @@ pre code {
 
 header {
   grid-area: header;
+  min-width: 0;
 }
 
 #primary {
@@ -152,38 +248,44 @@ main {
 }
 
 .layout--content-with-menu #primary,
-.layout--pattern #primary,
-.layout--component #primary {
+.layout--article #primary,
+.layout--component #primary,
+.layout--pattern #primary {
   --sidenav-width: 350px;
   padding-right: 2rem;
   grid-template: "sidenav title" auto "sidenav aside" auto "sidenav content" 1fr/min-content 1fr;
 }
 @media screen and (width >= 1280px) {
   .layout--content-with-menu #primary,
-  .layout--pattern #primary,
-  .layout--component #primary {
+  .layout--article #primary,
+  .layout--component #primary,
+  .layout--pattern #primary {
     grid-template: "sidenav title aside" auto "sidenav content aside" 1fr/min-content minmax(10rem, 920px) auto;
   }
 }
 .layout--content-with-menu main,
-.layout--pattern main,
-.layout--component main {
+.layout--article main,
+.layout--component main,
+.layout--pattern main {
   display: contents;
   padding: 0;
   max-width: none;
 }
 .layout--content-with-menu #title,
 .layout--content-with-menu #content,
-.layout--pattern #title,
-.layout--pattern #content,
+.layout--article #title,
+.layout--article #content,
 .layout--component #title,
-.layout--component #content {
+.layout--component #content,
+.layout--pattern #title,
+.layout--pattern #content {
   padding-left: 1rem;
 }
 @media screen and (width < 1280px) {
   .layout--content-with-menu #aside,
-  .layout--pattern #aside,
-  .layout--component #aside {
+  .layout--article #aside,
+  .layout--component #aside,
+  .layout--pattern #aside {
     padding-left: 1rem;
   }
 }
@@ -207,6 +309,31 @@ main {
   overflow-x: auto;
 }
 
+.docs-messagebox {
+  border: 2px solid transparent;
+  border-left-width: 1rem;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+}
+.docs-messagebox :last-child {
+  margin-bottom: 0;
+}
+.docs-messagebox__title {
+  font-weight: bold;
+}
+.docs-messagebox--info {
+  border-color: var(--docs-messagebox-info-border);
+  background: var(--docs-messagebox-info-background);
+}
+.docs-messagebox--warning {
+  border-color: var(--docs-messagebox-warning-border);
+  background: var(--docs-messagebox-warning-background);
+}
+.docs-messagebox--danger {
+  border-color: var(--docs-messagebox-danger-border);
+  background: var(--docs-messagebox-danger-background);
+}
+
 #sidenav {
   --header-footer-visible-height: 4.5rem;
   overflow: auto;
@@ -435,10 +562,152 @@ main {
     transform: translateX(100%);
   }
 }
+.docs-tag {
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  display: inline-block;
+  padding: 0 0.5rem;
+}
+.docs-tag--default {
+  background-color: var(--docs-tags-optional-background-color);
+  border-color: var(--docs-tags-optional-border-color);
+  color: var(--docs-tags-optional-text-color);
+}
+
 #version-banner {
   margin: 0;
 }
 
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/
+/*
+This is left on purpose making default.css the single file that can be lifted
+as-is from the repository directly without the need for a build step
+
+Typically this "required" baseline CSS is added by `makestuff.js` during build.
+*/
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+/* end baseline CSS */
+.hljs {
+  background: #F3F3F3;
+  color: #444;
+}
+
+/* Base color: saturation 0; */
+.hljs-subst {
+  /* default */
+}
+
+/* purposely ignored */
+.hljs-comment {
+  color: #697070;
+}
+
+.hljs-tag,
+.hljs-punctuation {
+  color: rgba(68, 68, 68, 0.6666666667);
+}
+
+.hljs-tag .hljs-name,
+.hljs-tag .hljs-attr {
+  color: #444;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-name {
+  font-weight: bold;
+}
+
+/* User color: hue: 0 */
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #880000;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-operator,
+.hljs-selector-pseudo {
+  color: #ab5656;
+}
+
+/* Language color: hue: 90; */
+.hljs-literal {
+  color: #695;
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #397300;
+}
+
+/* Meta color: hue: 200 */
+.hljs-meta {
+  color: #1f7199;
+}
+
+.hljs-meta .hljs-string {
+  color: #38a;
+}
+
+/* Misc effects */
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
 /* reset broken FKUI reset */
 dialog {
   display: none;
@@ -448,6 +717,11 @@ dialog[open] {
   display: block;
 }
 
+dd > dl {
+  border-left: 2px solid var(--docs-text-color-discrete);
+  padding-left: 1rem;
+}
+
 p:not(.code-preview p) {
   max-width: 680px;
 }
@@ -548,6 +822,7 @@ header .page-header {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1.2rem;
+  padding-right: 1.2rem;
   border-bottom: 1px solid #ddddde;
   flex-wrap: wrap;
 }
@@ -585,6 +860,7 @@ header .select-field {
 
 header .page-header__right {
   justify-content: space-between;
+  min-width: 0;
   max-width: 1260px;
   padding-top: 0;
   flex-wrap: wrap-reverse;
@@ -599,9 +875,6 @@ header .page-header__right-slot {
     margin-top: 0.5rem;
     margin-left: -1.5rem;
   }
-  header .imenu {
-    padding-left: 0 !important;
-  }
   header button kbd {
     display: none;
   }
@@ -624,20 +897,6 @@ header .label {
   margin-bottom: 0;
 }
 
-/* meny */
-header .imenu {
-  background-color: #fff;
-  margin-left: -0.5rem;
-}
-
-header .imenu--horizontal .imenu__list__item {
-  display: inline-flex;
-  padding-top: 1.1rem;
-  padding-left: 0;
-  padding-right: 0;
-  margin: 0 0.5rem;
-}
-
 /* navigering vänster */
 #sidenav {
   background-color: #f4f4f4;
@@ -938,12 +1197,39 @@ kbd {
   --docs-text-color-discrete: #5f6165;
   --docs-text-color-link: #4a52b6;
   --docs-text-color-link-hover: #1b1e23;
+  --docs-info-color: #4a52b6;
+  --docs-info-background: #f5f6fa;
+  --docs-warning-color: #ffbe10;
+  --docs-warning-background: #fffcf3;
+  --docs-error-color: #ca1515;
+  --docs-error-background: #fcf3f3;
+  --docs-contextmenu-background-color: #ffffff;
+  --docs-contextmenu-border-color: #ddddde;
+  --docs-contextmenu-highlight-color: #e7f0e9;
+  --docs-contextmenu-link-color-default: var(--docs-text-color-default);
+  --docs-contextmenu-link-color-hover: var(--docs-text-color-default);
+  --docs-contextmenu-link-background-hover: #ddddde;
   --docs-heading-font-family: var(--docs-font-family);
   --docs-heading-font-weight: var(--docs-font-weight);
   --docs-heading-line-height: 1.4;
   --docs-header-text-color-default: #1b1e23;
   --docs-header-text-color-discrete: #5f6165;
   --docs-menu-width-expanded: 230px;
+  --docs-messagebox-info-border: var(--docs-info-color);
+  --docs-messagebox-info-background: var(--docs-info-background);
+  --docs-messagebox-warning-border: var(--docs-warning-color);
+  --docs-messagebox-warning-background: var(--docs-warning-background);
+  --docs-messagebox-danger-border: var(--docs-error-color);
+  --docs-messagebox-danger-background: var(--docs-error-background);
+  --docs-tags-optional-background-color: transparent;
+  --docs-tags-optional-border-color: #5f6165;
+  --docs-tags-optional-text-color: var(--docs-text-color-discrete);
+  --docs-topnav-background-color: transparent;
+  --docs-topnav-link-color-default: var(--docs-text-color-default);
+  --docs-topnav-link-color-hover: var(--docs-text-color-link-hover);
+  --docs-topnav-link-color-highlight: var(--docs-text-color-link-hover);
+  --docs-topnav-border-color-hover: #afcfb5;
+  --docs-topnav-border-color-highlight: #116a3e;
   --docs-version-text-color: var(--docs-text-color-discrete);
   --docs-version-link-color: var(--docs-text-color-discrete);
   --docs-version-hover-color: var(--docs-text-color-default);
@@ -992,7 +1278,7 @@ select:focus::-ms-value {
 
 ul,
 ol {
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   margin-top: 0;
   margin-bottom: 1rem;
 }

package/dist/style/site.css

@@ -12,12 +12,39 @@
   --docs-text-color-discrete: #5f6165;
   --docs-text-color-link: #4a52b6;
   --docs-text-color-link-hover: #1b1e23;
+  --docs-info-color: #4a52b6;
+  --docs-info-background: #f5f6fa;
+  --docs-warning-color: #ffbe10;
+  --docs-warning-background: #fffcf3;
+  --docs-error-color: #ca1515;
+  --docs-error-background: #fcf3f3;
+  --docs-contextmenu-background-color: #ffffff;
+  --docs-contextmenu-border-color: #ddddde;
+  --docs-contextmenu-highlight-color: #e7f0e9;
+  --docs-contextmenu-link-color-default: var(--docs-text-color-default);
+  --docs-contextmenu-link-color-hover: var(--docs-text-color-default);
+  --docs-contextmenu-link-background-hover: #ddddde;
   --docs-heading-font-family: var(--docs-font-family);
   --docs-heading-font-weight: var(--docs-font-weight);
   --docs-heading-line-height: 1.4;
   --docs-header-text-color-default: #1b1e23;
   --docs-header-text-color-discrete: #5f6165;
   --docs-menu-width-expanded: 230px;
+  --docs-messagebox-info-border: var(--docs-info-color);
+  --docs-messagebox-info-background: var(--docs-info-background);
+  --docs-messagebox-warning-border: var(--docs-warning-color);
+  --docs-messagebox-warning-background: var(--docs-warning-background);
+  --docs-messagebox-danger-border: var(--docs-error-color);
+  --docs-messagebox-danger-background: var(--docs-error-background);
+  --docs-tags-optional-background-color: transparent;
+  --docs-tags-optional-border-color: #5f6165;
+  --docs-tags-optional-text-color: var(--docs-text-color-discrete);
+  --docs-topnav-background-color: transparent;
+  --docs-topnav-link-color-default: var(--docs-text-color-default);
+  --docs-topnav-link-color-hover: var(--docs-text-color-link-hover);
+  --docs-topnav-link-color-highlight: var(--docs-text-color-link-hover);
+  --docs-topnav-border-color-hover: #afcfb5;
+  --docs-topnav-border-color-highlight: #116a3e;
   --docs-version-text-color: var(--docs-text-color-discrete);
   --docs-version-link-color: var(--docs-text-color-discrete);
   --docs-version-hover-color: var(--docs-text-color-default);
@@ -66,7 +93,7 @@ select:focus::-ms-value {
 
 ul,
 ol {
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   margin-top: 0;
   margin-bottom: 1rem;
 }