hdoc-tools 0.1.0

package/ui/css/theme-default/styles/components/htl-doc.css

@@ -0,0 +1,711 @@
+/**
+ * Headings
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc h1,
+.HTL-doc h2,
+.HTL-doc h3,
+.HTL-doc h4,
+.HTL-doc h5,
+.HTL-doc h6 {
+  position: relative;
+  font-weight: 600;
+  outline: none;
+}
+
+.HTL-doc h1 {
+  letter-spacing: -0.02em;
+  line-height: 40px;
+  font-size: 28px;
+}
+
+.HTL-doc h2 {
+  margin: 48px 0 16px;
+  padding-top: 24px;
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 24px;
+}
+
+.HTL-doc h3 {
+  margin: 32px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.HTL-doc h2 .header-anchor {
+  position: absolute;
+  font-size: 18px;
+  left: -25px;
+  top: 52%;
+  width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
+  opacity: 0; /*hidden */
+}
+
+.HTL-doc h3 .header-anchor {
+  position: absolute;
+  font-size: 18px;
+  left: -25px;
+  top: 5px;
+  width:32px; /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
+  opacity: 0; /*hidden */
+}
+
+
+.HTL-doc h1:hover .header-anchor,
+.HTL-doc h2:hover .header-anchor,
+.HTL-doc h3:hover .header-anchor,
+.HTL-doc h4:hover .header-anchor,
+.HTL-doc h5:hover .header-anchor,
+.HTL-doc h6:hover .header-anchor
+{
+  opacity: 1;
+}
+
+@media (min-width: 768px) {
+  .HTL-doc h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 32px;
+  }
+}
+
+/**
+ * Paragraph and inline elements
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc p,
+.HTL-doc summary {
+  margin: 16px 0;
+}
+
+.HTL-doc p {
+  line-height: 28px;
+}
+
+.HTL-doc blockquote {
+  margin: 16px 0;
+  border-left: 2px solid var(--htl-c-divider);
+  padding-left: 16px;
+  transition: border-color 0.5s;
+}
+
+.HTL-doc blockquote > p {
+  margin: 0;
+  font-size: var(--htl-default-font-size);
+  color: var(--htl-c-text-2);
+  transition: color 0.5s;
+}
+
+.HTL-doc a {
+  font-weight: 500;
+  color: var(--htl-c-brand);
+  text-decoration-style: dotted;
+  transition: color 0.25s;
+}
+
+.HTL-doc a:hover {
+  color: var(--htl-c-brand-dark);
+}
+
+.HTL-doc strong {
+  font-weight: 600;
+}
+
+/**
+ * Lists
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc ul,
+.HTL-doc ol {
+  padding-left: 1.25rem;
+  margin: 16px 0;
+}
+
+.HTL-doc ul {
+  list-style: disc;
+}
+
+.HTL-doc ol {
+  list-style: decimal;
+}
+
+.HTL-doc li + li {
+  margin-top: 8px;
+}
+
+.HTL-doc li > ol,
+.HTL-doc li > ul {
+  margin: 8px 0 0;
+}
+
+/**
+ * Table
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc table {
+  display: block;
+  border-collapse: collapse;
+  margin: 20px 0;
+  font-size: var(--htl-default-font-size); /* sets font-size for table and table rows/td/th etc*/
+ }
+
+.HTL-doc tr {
+  border-top: 1px solid var(--htl-c-divider);
+  transition: background-color 0.5s;
+}
+
+.HTL-doc tr:nth-child(2n) {
+  background-color: var(--htl-c-bg-soft);
+}
+
+.HTL-doc th,
+.HTL-doc td {
+  border: 1px solid var(--htl-c-divider);
+  padding: 10px 14px;
+  vertical-align: top;
+}
+
+.HTL-doc th {
+  font-size: var(--htl-default-font-size);
+  font-weight: 600;
+  background-color: var(--htl-c-white-soft);
+}
+
+.dark .HTL-doc th {
+  background-color: var(--htl-c-black);
+}
+
+/**
+ * Decorational elements
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc hr {
+  margin: 16px 0;
+  border: none;
+  border-top: 1px solid var(--htl-c-divider-light);
+}
+
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc .custom-block {
+  margin: 16px 0;
+}
+
+.HTL-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.HTL-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.HTL-doc .custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity 0.25s;
+}
+
+.HTL-doc .custom-block a:hover {
+  opacity: 0.6;
+}
+
+.HTL-doc .custom-block code {
+  font-size: var(--htl-custom-block-code-font-size);
+  font-weight: 700;
+  color: inherit;
+}
+
+.HTL-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+}
+
+.HTL-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+/**
+ * Code
+ * -------------------------------------------------------------------------- */
+
+/* inline code */
+.HTL-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--htl-code-font-size);
+}
+
+.HTL-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  color: var(--htl-c-text-code);
+  background-color: var(--htl-c-bg-mute);
+  transition: color 0.5s, background-color 0.5s;
+}
+
+.HTL-doc h1 > code,
+.HTL-doc h2 > code,
+.HTL-doc h3 > code {
+  font-size: var(--htl-default-font-size);
+}
+
+.HTL-doc a > code {
+  color: var(--htl-c-brand);
+  transition: color 0.25s;
+}
+
+.HTL-doc a:hover > code {
+  color: var(--htl-c-brand-dark);
+}
+
+.HTL-doc div[class*='language-'] {
+  position: relative;
+  margin: 16px -24px;
+  background-color: var(--htl-code-block-bg);
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 640px) {
+  .HTL-doc div[class*='language-'] {
+    border-radius: 8px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .HTL-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.HTL-doc div[class*='language-'] + div[class*='language-'],
+.HTL-doc div[class$='-api'] + div[class*='language-'],
+.HTL-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.HTL-doc [class*='language-'] pre,
+.HTL-doc [class*='language-'] code {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.HTL-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 16px 0;
+  background: transparent;
+  overflow-x: auto;
+}
+
+.HTL-doc [class*='language-'] code {
+  display: block;
+  padding: 0 24px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--htl-code-line-height);
+  font-size: var(--htl-code-font-size);
+  color: var(--htl-code-block-color);
+  transition: color 0.5s;
+}
+
+.HTL-doc [class*='language-'] code .highlighted {
+  background-color: var(--htl-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.HTL-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--htl-code-line-error-color);
+}
+
+.HTL-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--htl-code-line-warning-color);
+}
+
+.HTL-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.HTL-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 1rem;
+}
+
+.HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.HTL-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.HTL-doc [class*='language-'] code .diff.remove {
+  background-color: var(--htl-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.HTL-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--htl-code-line-diff-remove-symbol-color);
+}
+
+.HTL-doc [class*='language-'] code .diff.add {
+  background-color: var(--htl-code-line-diff-add-color);
+}
+
+.HTL-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--htl-code-line-diff-add-symbol-color);
+}
+
+.HTL-doc div[class*='language-'].line-numbers-mode {
+  padding-left: 32px;
+}
+
+.HTL-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  border-right: 1px solid var(--htl-c-divider-dark-2);
+  padding-top: 16px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--htl-font-family-mono);
+  line-height: var(--htl-code-line-height);
+  font-size: var(--htl-code-font-size);
+  color: var(--htl-code-line-number-color);
+  transition: border-color 0.5s, color 0.5s;
+}
+
+.HTL-doc [class*='language-'] > button.copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  display: block;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--htl-code-block-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: var(--htl-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition: opacity 0.4s;
+}
+
+.HTL-doc [class*='language-']:hover > button.copy,
+.HTL-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.HTL-doc [class*='language-'] > button.copy:hover {
+  background-color: var(--htl-code-copy-code-hover-bg);
+}
+
+.HTL-doc [class*='language-'] > button.copy.copied,
+.HTL-doc [class*='language-'] > button.copy:hover.copied {
+  border-radius: 0 4px 4px 0;
+  background-color: var(--htl-code-copy-code-hover-bg);
+  background-image: var(--htl-icon-copied);
+}
+
+.HTL-doc [class*='language-'] > button.copy.copied::before,
+.HTL-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  left: -65px;
+  display: block;
+  border-radius: 4px 0 0 4px;
+  padding-top: 8px;
+  width: 64px;
+  height: 40px;
+  text-align: center;
+  font-size: var(--htl-default-font-size);
+  font-weight: 500;
+  color: var(--htl-code-copy-code-active-text);
+  background-color: var(--htl-code-copy-code-hover-bg);
+  white-space: nowrap;
+  content: 'Copied';
+}
+
+.HTL-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 6px;
+  right: 12px;
+  z-index: 2;
+  font-size: var(--htl-default-font-size);
+  font-weight: 500;
+  color: var(--htl-c-text-dark-3);
+  transition: color 0.4s, opacity 0.4s;
+}
+
+.HTL-doc [class*='language-']:hover > button.copy + span.lang,
+.HTL-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+/**
+ * Component: Team
+ * -------------------------------------------------------------------------- */
+
+.HTL-doc .VPTeamMembers {
+  margin-top: 24px;
+}
+
+.HTL-doc .VPTeamMembers.small.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+.HTL-doc .VPTeamMembers.small.count-2 .container,
+.HTL-doc .VPTeamMembers.small.count-3 .container {
+  max-width: 100% !important;
+}
+
+.HTL-doc .VPTeamMembers.medium.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+
+
+/* CUSTOM HTL CLASSES FOR HTDOC */
+/* highlightjs code copy badge */
+.HTL-doc .code-badge {
+  background: #555 !important;
+  padding: 8px !important;
+}
+.HTL-doc .code-badge-copy-icon {
+  font-size: 1.3em !important;
+}
+
+/* HTL inline styles */
+.HTL-doc .badge {
+  white-space: nowrap;
+  border-radius: 4px;
+  padding: 0.1rem 0.5rem;
+  font-size: 0.8em;
+  margin-right: 4px;
+  color: white;
+}
+
+.HTL-doc .badge:after {
+  border-radius: 4px;
+  padding: 0.05rem 0.25rem;
+}
+
+.HTL-doc .badge.badge-schema:after { /* MINT */
+  content: "Schema";
+  border: solid 1px #34bc9d;
+  background-color: #46cfb0;
+}
+
+.HTL-doc .badge.badge-simple:after { /* AQUA */
+  content: "Simple";
+  border: solid 1px #3bd0d6;
+  background-color: #4fc2e5;
+}
+
+.HTL-doc .badge.badge-complex:after { /* GRAPEFRUIT */
+  content: "Complex";
+  border: solid 1px #da4453;
+  background-color: #ed5565;
+  color: white;
+}
+
+.HTL-doc .badge.badge-method:after { /* BLUEJEANS */
+  content: "Method";
+  border: solid 1px #4b8ad5;
+  background-color: #5e96e6;
+  color: white;
+}
+
+.HTL-doc .badge.badge-experimental:after {
+  content: "Experimental";
+  border: solid 1px #da4453;
+  background-color: #ed5565;
+}
+
+.HTL-doc .badge.badge-production:after {
+  content: "In Production";
+  border: solid 1px #185e0f;
+  background-color: #3d9719;
+}
+
+.HTL-doc .badge.badge-development:after {
+  content: "In Development";
+  border: solid 1px #4b8ad5;
+  background-color: #5e96e6;
+}
+
+.HTL-doc .badge.badge-preliminary:after {
+  content: "Preliminary";
+  border: solid 1px #bdaa58;
+  background-color: #ddaf19;
+}
+
+.HTL-doc .badge.badge-depreciated:after {
+  content: "Depreciated";
+  border: solid 1px #494949;
+  background-color: #666666;
+}
+
+.HTL-doc .badge.badge-info:after {
+  content: "Info";
+  white-space: nowrap;
+  border: solid 1px rgb(48, 121, 0);
+  background-color: rgb(57, 150, 3);
+}
+
+.HTL-doc .badge.badge-warn:after {
+  content: "Warning";
+  white-space: nowrap;
+  border: solid 1px rgb(173, 137, 19);
+  background-color: rgb(211, 168, 29);
+}
+
+.HTL-doc .badge.badge-error:after {
+  content: "Error";
+  white-space: nowrap;
+  border: solid 1px rgb(121, 0, 0);
+  background-color: rgb(184, 0, 0);
+}
+
+.HTL-doc .error-msg {
+  color: rgb(184, 0, 0);
+}
+
+.HTL-doc .double-braces:before {
+  display: inline;
+  content: '{{';
+}
+
+.HTL-doc .double-braces:after {
+  display: inline;
+  content: '}}';
+}
+
+.HTL-doc .list-line-space {
+  line-height: 24px;
+  margin: 0;
+}
+
+
+/* HTL div alerts */
+
+.HTL-doc .hdoc-alert{
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: var(--htl-default-font-size);
+  color: var(--htl-c-text-2);
+  margin:10px 0;
+}
+
+.HTL-doc .hdoc-alert p{
+  margin: 8 0;
+}
+.HTL-doc .hdoc-alert .hdoc-alert-title .bi{
+  margin-right:5px;
+  
+}
+.HTL-doc .hdoc-alert .hdoc-alert-title
+{
+  font-weight: 700;
+  margin: 0;
+}
+
+.HTL-doc .hdoc-alert.alert-icon-note
+{
+  border-color: var(--htl-custom-block-details-border);
+  color: var(--htl-custom-block-details-text);
+  background-color: var(--htl-custom-block-details-bg);
+}
+.HTL-doc .hdoc-alert.alert-icon-note code
+{
+  background-color: var(--htl-custom-block-details-code-bg);
+}
+
+.HTL-doc .hdoc-alert.alert-icon-tip
+{
+  border-color: var(--htl-custom-block-tip-border);
+  color: var(--htl-custom-block-tip-text);
+  background-color: var(--htl-custom-block-tip-bg);
+}
+.HTL-doc .hdoc-alert.alert-icon-tip code{
+  background-color: var(--htl-custom-block-tip-code-bg);
+}
+
+.HTL-doc .hdoc-alert.alert-icon-important
+{
+  border-color: var(--htl-custom-block-info-border);
+  color: var(--htl-custom-block-info-text);
+  background-color: var(--htl-custom-block-info-bg);
+
+}
+.HTL-doc .hdoc-alert.alert-icon-important code {
+  background-color: var(--htl-custom-block-info-code-bg);
+}
+
+.HTL-doc .hdoc-alert.alert-icon-caution
+{
+  border-color: var(--htl-custom-block-caution-border);
+  color: var(--htl-custom-block-caution-text);
+  background-color: var(--htl-custom-block-caution-bg);
+}
+.HTL-doc .hdoc-alert.alert-icon-caution code {
+  background-color: var(--htl-custom-block-caution-code-bg);
+}
+
+.HTL-doc .hdoc-alert.alert-icon-warning
+{
+  border-color: var(--htl-custom-block-warning-border);
+  color: var(--htl-custom-block-warning-text);
+  background-color: var(--htl-custom-block-warning-bg);
+}
+
+.HTL-doc .hdoc-alert.alert-icon-warning code
+{
+  background-color: var(--htl-custom-block-warning-code-bg);
+}
+
+