@inkline/inkline/css/global/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

@charset "UTF-8";
/**
 * Document
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/**
 * Body
 *
 * As a best practice, apply a default `background-color`.
 * Prevent adjustments of font size after orientation changes in iOS.
 * Change the default tap highlight to be completely transparent in iOS.
 */
body {
  color: var(--body--color, var(--color-dark));
  background-color: var(--body--background, var(--color-white));
  font-family: var(--body--font-family, var(--font-family-primary-base));
  font-size: var(--body--font-size, var(--font-size));
  line-height: var(--body--line-height, var(--line-height));
  text-align: var(--body--text-align, left);
  transition-property: var(--body--transition-property, background-color, color);
  transition-duration: var(--body--transition-duration, var(--transition-duration));
  transition-timing-function: var(--body--transition-timing-function, var(--transition-timing-function));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--body--tap-highlight-color, rgba(0, 0, 0, 0));
}

/**
 * Abbreviations
 *
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 * Add explicit cursor to indicate changed behavior.
 * Prevent the text-decoration to be skipped.
 */
abbr[title] {
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: var(--address--margin-bottom, var(--margin-bottom));
  font-style: normal;
  line-height: inherit;
}

/**
 * Blockquote
 */
blockquote {
  margin: 0 0 var(--blockquote--margin-bottom, var(--margin-bottom));
}

.blockquote {
  font-size: var(--blockquote--font-size, var(--font-size));
}
.blockquote.-left {
  text-align: left;
}
.blockquote.-left.-bordered {
  padding-left: var(--blockquote--padding-left, var(--padding-left));
  border-left: var(--blockquote--border-left, 5px var(--border-left-style) var(--border-left-color));
}
.blockquote.-center {
  text-align: center;
}
.blockquote.-right {
  text-align: right;
}
.blockquote.-right.-bordered {
  padding-right: var(--blockquote--padding-right, var(--padding-right));
  border-right: var(--blockquote--border-right, 5px var(--border-right-style) var(--border-right-color));
}
.blockquote > p {
  margin-bottom: 0;
}
.blockquote > footer,
.blockquote > .footer {
  display: block;
  font-size: 80%;
  color: var(--blockquote--footer--color, var(--text-color-weak));
}
.blockquote > footer::before,
.blockquote > .footer::before {
  content: "— ";
}

/**
 * Code
 */
pre,
code,
kbd,
samp {
  font-family: var(--font-family-primary-monospace);
  font-size: var(--font-size);
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--pre--margin-bottom, var(--margin-bottom));
  font-size: var(--pre--font-size, var(--code--font-size, var(--font-size-sm)));
  overflow: auto;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
  background: transparent;
  padding: 0;
}

code {
  font-size: var(--code--font-size, var(--font-size-sm));
  color: var(--code--color);
  background: var(--code--background);
  padding: var(--code--padding, var(--code--padding-top, 0.15rem) var(--code--padding-right, 0.45rem) var(--code--padding-bottom, 0.15rem) var(--code--padding-left, 0.45rem));
  border-radius: var(--code--border-radius, var(--code--border-top-left-radius, var(--border-top-left-radius)) var(--code--border-top-right-radius, var(--border-top-right-radius)) var(--code--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--code--border-bottom-left-radius, var(--border-bottom-left-radius)));
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: var(--kbd--padding, var(--kbd--padding-top, 0.1875rem) var(--kbd--padding-right, 0.375rem) var(--kbd--padding-bottom, 0.1875rem) var(--kbd--padding-left, 0.375rem));
  font-size: var(--kbd--font-size, var(--code--font-size, var(--font-size-sm)));
  color: var(--kbd--color, var(--body--background));
  background: var(--kbd--background, var(--body--color));
  border-radius: var(--kbd--border-radius, var(--border-radius-sm));
}
kbd kbd {
  padding: 0;
  font-size: var(--kbd--font-size, var(--font-size-sm));
}

output {
  display: inline-block;
}

/**
 * Displays
 */
.d1 {
  margin-top: var(--d1--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d1--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d1--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d1--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d1--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d1--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d1--color, var(--display--color, var(--heading--color, inherit)));
}

.d2 {
  margin-top: var(--d2--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d2--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d2--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d2--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d2--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d2--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d2--color, var(--display--color, var(--heading--color, inherit)));
}

.d3 {
  margin-top: var(--d3--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d3--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d3--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d3--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d3--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d3--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d3--color, var(--display--color, var(--heading--color, inherit)));
}

.d4 {
  margin-top: var(--d4--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d4--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d4--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d4--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d4--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d4--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d4--color, var(--display--color, var(--heading--color, inherit)));
}

.d5 {
  margin-top: var(--d5--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d5--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d5--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d5--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d5--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d5--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d5--color, var(--display--color, var(--heading--color, inherit)));
}

.d6 {
  margin-top: var(--d6--margin-top, var(--display--margin-top, var(--heading--margin-top, 0)));
  margin-bottom: var(--d6--margin-bottom, var(--display--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm))));
  font-family: var(--d6--font-family, var(--display--font-family, var(--heading--font-family, var(--font-family-secondary-base))));
  font-style: var(--d6--font-style, var(--display--font-style, var(--heading--font-style, normal)));
  font-weight: var(--d6--font-weight, var(--display--font-weight, var(--heading--font-weight, var(--font-weight-semibold))));
  line-height: var(--d6--line-height, var(--display--line-height, var(--heading--line-height, 1.2)));
  color: var(--d6--color, var(--display--color, var(--heading--color, inherit)));
}

.d1 {
  font-size: var(--d1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-5)));
}

.d2 {
  font-size: var(--d2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-4)));
}

.d3 {
  font-size: var(--d3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-3)));
}

.d4 {
  font-size: var(--d4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-2)));
}

.d5 {
  font-size: var(--d5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5) * var(--scale-ratio-pow-1)));
}

.d6 {
  font-size: var(--d6--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

/**
 * Forms
 */
label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  font-size: inherit;
  line-height: inherit;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date],
[type=datetime-local],
[type=month],
[type=week],
[type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--legend--margin-bottom, var(--margin-bottom));
  font-size: var(--legend--font-size, var(--font-size-lg));
  line-height: inherit;
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

/**
 * Headings
 */
h1,
.h1 {
  margin-top: var(--h1--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h1--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h1--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h1--font-style, var(--heading--font-style, normal));
  font-weight: var(--h1--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h1--line-height, var(--heading--line-height, 1.2));
  color: var(--h1--color, var(--heading--color, inherit));
}

h2,
.h2 {
  margin-top: var(--h2--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h2--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h2--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h2--font-style, var(--heading--font-style, normal));
  font-weight: var(--h2--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h2--line-height, var(--heading--line-height, 1.2));
  color: var(--h2--color, var(--heading--color, inherit));
}

h3,
.h3 {
  margin-top: var(--h3--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h3--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h3--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h3--font-style, var(--heading--font-style, normal));
  font-weight: var(--h3--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h3--line-height, var(--heading--line-height, 1.2));
  color: var(--h3--color, var(--heading--color, inherit));
}

h4,
.h4 {
  margin-top: var(--h4--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h4--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h4--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h4--font-style, var(--heading--font-style, normal));
  font-weight: var(--h4--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h4--line-height, var(--heading--line-height, 1.2));
  color: var(--h4--color, var(--heading--color, inherit));
}

h5,
.h5 {
  margin-top: var(--h5--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h5--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h5--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h5--font-style, var(--heading--font-style, normal));
  font-weight: var(--h5--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h5--line-height, var(--heading--line-height, 1.2));
  color: var(--h5--color, var(--heading--color, inherit));
}

h6,
.h6 {
  margin-top: var(--h6--margin-top, var(--heading--margin-top, 0));
  margin-bottom: var(--h6--margin-bottom, var(--heading--margin-bottom, var(--margin-bottom-sm)));
  font-family: var(--h6--font-family, var(--heading--font-family, var(--font-family-secondary-base)));
  font-style: var(--h6--font-style, var(--heading--font-style, normal));
  font-weight: var(--h6--font-weight, var(--heading--font-weight, var(--font-weight-semibold)));
  line-height: var(--h6--line-height, var(--heading--line-height, 1.2));
  color: var(--h6--color, var(--heading--color, inherit));
}

h1,
.h1 {
  font-size: var(--h1--font-size, calc(var(--font-size) * var(--scale-ratio-pow-5)));
}

h2,
.h2 {
  font-size: var(--h2--font-size, calc(var(--font-size) * var(--scale-ratio-pow-4)));
}

h3,
.h3 {
  font-size: var(--h3--font-size, calc(var(--font-size) * var(--scale-ratio-pow-3)));
}

h4,
.h4 {
  font-size: var(--h4--font-size, calc(var(--font-size) * var(--scale-ratio-pow-2)));
}

h5,
.h5 {
  font-size: var(--h5--font-size, calc(var(--font-size) * var(--scale-ratio-pow-1)));
}

h6,
.h6 {
  font-size: var(--h6--font-size, var(--font-size));
}

/**
 * Hidden attribute
 *
 * Always hide an element with the `hidden` HTML attribute.
 */
[hidden] {
  display: none !important;
}

/**
 * Horizontal rule
 */
hr {
  margin: var(--hr--margin, var(--margin-top) 0 var(--margin-bottom));
  color: var(--hr--color, inherit);
  border: 0;
  border-top: var(--hr--border-width, var(--border-top-width)) solid var(--hr--border-color, var(--border-top-color));
}

/**
 * Iframe
 *
 * Remove border from iframe
 */
iframe {
  border: 0;
}

/**
 * Images
 */
img,
svg {
  vertical-align: middle;
}

figure {
  margin: 0 0 var(--figure--margin-bottom, var(--margin-bottom));
}

.image.-fluid,
._image\:fluid {
  height: auto;
  width: 100%;
}

.image.-responsive,
._image\:responsive,
.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  height: auto;
  max-width: 100%;
}

.image.-thumbnail,
._image\:thumbnail,
.image.-polaroid,
._image\:polaroid {
  padding: var(--thumbnail--padding, var(--padding));
  background-color: var(--thumbnail--background, var(--color--white));
  border-width: var(--thumbnail--border-width, var(--border-width));
  border-style: var(--thumbnail--border-style, var(--border-style));
  border-color: var(--thumbnail--border-color, var(--border-color));
  border-radius: var(--thumbnail--border-radius, var(--border-radius));
  transition: var(--thumbnail--transition, var(--transition-duration) all var(--transition-timing-function));
  box-shadow: var(--thumbnail--box-shadow, var(--box-shadow));
}

.image.-polaroid,
._image\:polaroid {
  padding-bottom: var(--polaroid--padding, var(--padding));
}

.image[src$=".svg"] {
  width: 100% \9 ;
}

.figure {
  display: inline-block;
}
.figure > .image,
.figure > img {
  margin-bottom: var(--figure--image--margin-bottom, var(--margin-bottom));
  line-height: 1;
}
.figure > .caption {
  font-size: var(--figure--caption--font-size, var(--font-size-sm));
  color: var(--figure--caption--color, var(--body--color));
}

/**
 * Links
 * @credit https://github.com/twbs/bootstrap/issues/19402
 */
a {
  color: var(--link--color, var(--color-primary-500));
  text-decoration: var(--link--text-decoration, none);
}
a:hover {
  color: var(--link--hover--color, var(--color-primary-600));
  text-decoration: var(--link--hover--text-decoration, underline);
}

a:not([href], [class], [to]), a:not([href], [class], [to]):hover {
  color: inherit;
  text-decoration: none;
}

/**
 * Lists
 */
ol {
  padding-left: var(--ol--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ol--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ol--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ul {
  padding-left: var(--ul--padding-left, var(--list--padding-left, var(--padding-left-lg)));
  margin-top: var(--ul--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--ul--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

dl {
  margin-top: var(--dl--margin-top, var(--list--margin-top, 0));
  margin-bottom: var(--dl--margin-bottom, var(--list--margin-bottom, var(--margin-bottom)));
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: var(--dl--dt--font-weight, var(--font-weight-bold));
}

dd {
  margin-bottom: var(--dl--dd--margin-bottom, var(--margin-bottom-sm));
  margin-left: var(--dl--dd--margin-left, 0);
}

ul > .item,
ul > li,
ol > .item,
ol > li,
dl > .item,
dl > li,
.list > .item,
.list > li,
._list\:unstyled > .item,
._list\:unstyled > li,
._list\:inline > .item,
._list\:inline > li {
  margin-bottom: var(--list--item--margin-bottom, var(--margin-bottom-1-2));
}

.list.-unstyled,
._list\:unstyled {
  padding-left: 0;
  list-style: none;
}

.list.-inline,
._list\:inline {
  padding-left: 0;
  list-style: none;
}
.list.-inline > .item,
.list.-inline > li,
._list\:inline > .item,
._list\:inline > li {
  display: inline-flex;
  margin-bottom: 0;
}
.list.-inline > .item:not(:last-child),
.list.-inline > li:not(:last-child),
._list\:inline > .item:not(:last-child),
._list\:inline > li:not(:last-child) {
  margin-right: var(--list--inline--item--margin-right, var(--margin-right));
}

/**
 * Mark
 */
mark {
  padding: var(--mark--padding, 0.1875rem);
  background-color: var(--mark--background, var(--color-yellow-100));
}

/**
 * Paragraphs
 */
p {
  margin-top: var(--p--margin-top, 0);
  margin-bottom: var(--p--margin-bottom, var(--margin-bottom));
}

.lead {
  font-size: var(--lead--font-size, var(--font-size-lg));
  font-weight: var(--lead--font-weight, var(--font-weight-light));
}

.initialism {
  font-size: var(--initialism--font-size, 90%);
  text-transform: var(--initialism--text-transform, uppercase);
}

/**
 * Summary
 */
summary {
  cursor: pointer;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: var(--caption--padding-top, var(--table--cell--padding-top, var(--padding-top-sm)));
  padding-bottom: var(--caption--padding-bottom, var(--table--cell--padding-bottom, var(--padding-bottom-sm)));
  color: var(--caption--color, var(--color-gray-600));
  text-align: left;
}

th {
  font-weight: var(--table--th--font-weight, var(--font-weight-bold));
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/**
 * Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 *
 * In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
 * DON'T remove the click delay when `<meta name='viewport' content='width=device-width'>` is present.
 * However, they DO support removing the click delay via `touch-action: manipulation`.
 * See:
 * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
 * http://caniuse.com/#feat=css-touch-action
 * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 */
a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}