Packages

corex

0.1.0-beta.2
0.1.2 0.1.1 0.1.0 0.1.0-rc.1 0.1.0-rc.0 0.1.0-beta.5 0.1.0-beta.4 0.1.0-beta.3 0.1.0-beta.2 0.1.0-beta.1 0.1.0-alpha.33 0.1.0-alpha.32 0.1.0-alpha.31 0.1.0-alpha.30 0.1.0-alpha.29 0.1.0-alpha.28 0.1.0-alpha.27 0.1.0-alpha.26 0.1.0-alpha.25 0.1.0-alpha.24 0.1.0-alpha.23 0.1.0-alpha.22 0.1.0-alpha.21 0.1.0-alpha.20 0.1.0-alpha.19 0.1.0-alpha.18 0.1.0-alpha.17 0.1.0-alpha.16 0.1.0-alpha.15 0.1.0-alpha.14 0.1.0-alpha.13 0.1.0-alpha.12 0.1.0-alpha.11 0.1.0-alpha.10 0.1.0-alpha.9 0.1.0-alpha.8 0.1.0-alpha.7 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.

HexDocs

Current section

Files

Jump to
Readme
43 Versions
4 Dependencies
Dependants
Files
Activity
corex priv design corex components code.css
Raw

priv/design/corex/components/code.css 

@import "../main.css";



@layer components {

  pre.code {

    @apply ui-content scrollbar scrollbar--sm;

    width: 100%;

    max-width: var(--container-md);

    font-family: var(--font-code);

    font-size: var(--text-sm);

    line-height: var(--text-sm--line-height);

    padding: --spacing(4);

    background-color: var(--color-ui);

    color: var(--color-ink);

    border: 1px solid var(--color-border);

    overflow: auto;

    min-width: 0;

    box-sizing: border-box;

    background-image: linear-gradient(

      var(--color-root) 50%,

      var(--color-layer) 50%

    );

    background-size: 100% 2lh;

    background-origin: content-box;

    background-attachment: local;

    background-position: 0 0;



    & code {

      padding-inline-end: --spacing(11);

    }

  }



  code.code {

    display: inline-flex;

    width: fit-content;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

    padding-inline: var(--spacing-space);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    justify-content: start;

    align-items: start;

    white-space: wrap;

    overflow-wrap: break-word;

    flex-wrap: wrap;

    user-select: all;

  }



  pre.code.unselectable,

  code.code.unselectable {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

  }



  [data-mode="light"] .code .hll { background-color: #fff9c4; }

  [data-mode="light"] .code .bp { color: #0070c1; }

  [data-mode="light"] .code .c, [data-mode="light"] .code .c1, [data-mode="light"] .code .ch, [data-mode="light"] .code .cm, [data-mode="light"] .code .cs { color: #008000; font-style: italic; }

  [data-mode="light"] .code .cp, [data-mode="light"] .code .cpf { color: #0000ff; font-style: normal; }

  [data-mode="light"] .code .dl { color: #a31515; }

  [data-mode="light"] .code .err { border-color: #cd3131; color: #cd3131; }

  [data-mode="light"] .code .fm { color: #795e26; }

  [data-mode="light"] .code .gd { color: #a31515; }

  [data-mode="light"] .code .ge { font-style: italic; }

  [data-mode="light"] .code .gh { color: #000080; font-weight: bold; }

  [data-mode="light"] .code .gi { color: #098658; }

  [data-mode="light"] .code .go { color: #6e7681; }

  [data-mode="light"] .code .gp { color: #000080; font-weight: bold; }

  [data-mode="light"] .code .gr { color: #cd3131; }

  [data-mode="light"] .code .gs { font-weight: bold; }

  [data-mode="light"] .code .gt { color: #0451a5; }

  [data-mode="light"] .code .gu { color: #800080; font-weight: bold; }

  [data-mode="light"] .code .il { color: #098658; }

  [data-mode="light"] .code .k, [data-mode="light"] .code .kd, [data-mode="light"] .code .kr, [data-mode="light"] .code .kc, [data-mode="light"] .code .kn, [data-mode="light"] .code .kp { color: #0000ff; font-weight: bold; }

  [data-mode="light"] .code .kt { color: #267f99; }

  [data-mode="light"] .code .m, [data-mode="light"] .code .mb, [data-mode="light"] .code .mf, [data-mode="light"] .code .mh, [data-mode="light"] .code .mi, [data-mode="light"] .code .mo { color: #098658; }

  [data-mode="light"] .code .na { color: #e50000; }

  [data-mode="light"] .code .nb { color: #267f99; }

  [data-mode="light"] .code .nc, [data-mode="light"] .code .nn { color: #267f99; font-weight: bold; }

  [data-mode="light"] .code .nd { color: #af00db; }

  [data-mode="light"] .code .ne { color: #cd3131; font-weight: bold; }

  [data-mode="light"] .code .nf { color: #795e26; }

  [data-mode="light"] .code .ni { color: #6e7681; font-weight: bold; }

  [data-mode="light"] .code .nl { color: #000000; }

  [data-mode="light"] .code .no { color: #0070c1; }

  [data-mode="light"] .code .nt { color: #800000; font-weight: bold; }

  [data-mode="light"] .code .nv, [data-mode="light"] .code .vc, [data-mode="light"] .code .vg, [data-mode="light"] .code .vi, [data-mode="light"] .code .vm { color: #001080; }

  [data-mode="light"] .code .o { color: #000000; }

  [data-mode="light"] .code .ow { color: #0000ff; font-weight: bold; }

  [data-mode="light"] .code .s, [data-mode="light"] .code .s1, [data-mode="light"] .code .s2, [data-mode="light"] .code .sa, [data-mode="light"] .code .sb, [data-mode="light"] .code .sc, [data-mode="light"] .code .sh, [data-mode="light"] .code .sx { color: #a31515; }

  [data-mode="light"] .code .sd { color: #a31515; font-style: italic; }

  [data-mode="light"] .code .se { color: #ee0000; font-weight: bold; }

  [data-mode="light"] .code .si { color: #811f3f; font-weight: bold; }

  [data-mode="light"] .code .sr { color: #811f3f; }

  [data-mode="light"] .code .ss { color: #001080; }



  [data-mode="dark"] .code .hll { background-color: #264f78; }

  [data-mode="dark"] .code .bp { color: #4ec9b0; }

  [data-mode="dark"] .code .c, [data-mode="dark"] .code .c1, [data-mode="dark"] .code .ch, [data-mode="dark"] .code .cm, [data-mode="dark"] .code .cs { color: #6a9955; font-style: italic; }

  [data-mode="dark"] .code .cp, [data-mode="dark"] .code .cpf { color: #569cd6; font-style: normal; }

  [data-mode="dark"] .code .dl { color: #ce9178; }

  [data-mode="dark"] .code .err { border-color: #f44747; color: #f44747; }

  [data-mode="dark"] .code .fm { color: #dcdcaa; }

  [data-mode="dark"] .code .gd { color: #ce9178; }

  [data-mode="dark"] .code .ge { font-style: italic; }

  [data-mode="dark"] .code .gh { color: #569cd6; font-weight: bold; }

  [data-mode="dark"] .code .gi { color: #b5cea8; }

  [data-mode="dark"] .code .go { color: #808080; }

  [data-mode="dark"] .code .gp { color: #569cd6; font-weight: bold; }

  [data-mode="dark"] .code .gr { color: #f44747; }

  [data-mode="dark"] .code .gs { font-weight: bold; }

  [data-mode="dark"] .code .gt { color: #4ec9b0; }

  [data-mode="dark"] .code .gu { color: #c586c0; font-weight: bold; }

  [data-mode="dark"] .code .il { color: #b5cea8; }

  [data-mode="dark"] .code .k, [data-mode="dark"] .code .kd, [data-mode="dark"] .code .kr, [data-mode="dark"] .code .kc, [data-mode="dark"] .code .kn, [data-mode="dark"] .code .kp { color: #569cd6; font-weight: bold; }

  [data-mode="dark"] .code .kt { color: #4ec9b0; }

  [data-mode="dark"] .code .m, [data-mode="dark"] .code .mb, [data-mode="dark"] .code .mf, [data-mode="dark"] .code .mh, [data-mode="dark"] .code .mi, [data-mode="dark"] .code .mo { color: #b5cea8; }

  [data-mode="dark"] .code .na { color: #9cdcfe; }

  [data-mode="dark"] .code .nb { color: #4ec9b0; }

  [data-mode="dark"] .code .nc, [data-mode="dark"] .code .nn { color: #4ec9b0; font-weight: bold; }

  [data-mode="dark"] .code .nd { color: #c586c0; }

  [data-mode="dark"] .code .ne { color: #f44747; font-weight: bold; }

  [data-mode="dark"] .code .nf { color: #dcdcaa; }

  [data-mode="dark"] .code .ni { color: #808080; font-weight: bold; }

  [data-mode="dark"] .code .nl { color: #c8c8c8; }

  [data-mode="dark"] .code .no { color: #4fc1ff; }

  [data-mode="dark"] .code .nt { color: #569cd6; font-weight: bold; }

  [data-mode="dark"] .code .nv, [data-mode="dark"] .code .vc, [data-mode="dark"] .code .vg, [data-mode="dark"] .code .vi, [data-mode="dark"] .code .vm { color: #9cdcfe; }

  [data-mode="dark"] .code .o { color: #d4d4d4; }

  [data-mode="dark"] .code .ow { color: #569cd6; font-weight: bold; }

  [data-mode="dark"] .code .s, [data-mode="dark"] .code .s1, [data-mode="dark"] .code .s2, [data-mode="dark"] .code .sa, [data-mode="dark"] .code .sb, [data-mode="dark"] .code .sc, [data-mode="dark"] .code .sh, [data-mode="dark"] .code .sx { color: #ce9178; }

  [data-mode="dark"] .code .sd { color: #ce9178; font-style: italic; }

  [data-mode="dark"] .code .se { color: #d7ba7d; font-weight: bold; }

  [data-mode="dark"] .code .si { color: #d7ba7d; font-weight: bold; }

  [data-mode="dark"] .code .sr { color: #d16969; }

  [data-mode="dark"] .code .ss { color: #9cdcfe; }

}



@utility code--text-* {

  font-size: --value(--text-*, [length]);

  line-height: --value(--text-*--line-height, [length]);



  &:is(pre) > code[data-part="content"] {

    font-size: inherit;

    line-height: inherit;

  }

}



@utility code--max-w-none {

  max-width: none;

}



@utility code--max-w-full {

  max-width: 100%;

}



@utility code--max-w-* {

  max-width: --value(--container-*, [length]);

}