applications/storybook/src/app/index.scss

   1 @import '~@proton/colors/themes/dist/duotone.theme.css';
   2 @import '~@proton/styles/scss/proton-ui-storybook';
   3
   4 body {
   5         overflow: scroll !important;
   6         color: inherit;
   7 }
   8
   9 pre code {
  10         line-height: 1.5 !important;
  11 }
  12
  13 // dirty fixes while whaiting to have better solutions
  14 .language-markup code {
  15         inline-size: 100%;
  16         white-space: pre-wrap;
  17 }
  18
  19 .icon-ko,
  20 .icon-ok {
  21         &::after {
  22                 position: absolute;
  23                 inset-block-start: 0.75em;
  24                 inset-inline-end: 0;
  25                 padding-block: 0;
  26                 padding-inline: 0 0.5em;
  27                 font-size: 2em;
  28         }
  29 }
  30
  31 .icon-ko::after {
  32         content: '×';
  33         color: var(--signal-danger);
  34 }
  35
  36 .icon-ok::after {
  37         content: '✔';
  38         color: var(--signal-success);
  39 }
  40
  41 .icon-ko button {
  42         display: none; // don't copy shit!
  43 }
  44
  45 table {
  46         // table-layout: initial;
  47
  48         &.no-bg {
  49                 tr {
  50                         background: none !important;
  51                 }
  52         }
  53 }
  54
  55 .sbdocs-h2 {
  56         margin-block-start: 2em !important;
  57         border: none !important;
  58 }
  59
  60 // Fix weird margin on auto scroll
  61 .docs-story > div {
  62         margin: 0;
  63 }
  64
  65 .icon-grid {
  66         display: grid;
  67         grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  68         gap: 1em;
  69 }
  70
  71 .sbdocs-a {
  72         &#{&} {
  73                 @extend .link;
  74
  75                 color: var(--link-norm) !important;
  76         }
  77 }
  78
  79 // Theme support
  80 .sbdocs:not(.bg-primary) {
  81         background: var(--background-norm) !important;
  82         color: var(--text-norm) !important;
  83 }
  84
  85 .sbdocs-title {
  86         color: var(--text-norm) !important;
  87 }
  88
  89 .sbdocs-preview {
  90         border-color: var(--border-weak) !important;
  91 }
  92
  93 .docblock-code-toggle {
  94         background: var(--background-strong) !important;
  95         color: var(--text-norm) !important;
  96         border-color: var(--border-weak) !important;
  97 }
  98
  99 .docs-story > div:last-child {
 100         background: none !important;
 101 }
 102
 103 .sbdocs-preview > .os-host {
 104         background: var(--background-strong) !important;
 105         border: none !important;
 106         box-shadow: none !important;
 107
 108         button,
 109         a {
 110                 color: var(--text-norm) !important;
 111         }
 112 }
 113
 114 .docblock-source {
 115         color: black !important;
 116         background: white !important;
 117         border-color: var(--border-weak) !important;
 118
 119         .prismjs {
 120                 background: white !important;
 121         }
 122 }
 123
 124 .docblock-argstable-head {
 125         background: var(--background-strong) !important;
 126
 127         th {
 128                 color: var(--text-norm) !important;
 129         }
 130 }
 131
 132 .docblock-argstable-body {
 133         border: none !important;
 134
 135         tr {
 136                 border-color: var(--border-weak) !important;
 137         }
 138
 139         td {
 140                 background: var(--background-weak) !important;
 141                 color: var(--text-weak) !important;
 142         }
 143 }
 144
 145 .docblock-emptyblock {
 146         color: var(--text-weak) !important;
 147         border-color: var(--border-weak) !important;
 148 }
 149
 150 // props content when multiple tabs are shown
 151 #panel-tab-content {
 152         background: none !important;
 153 }
 154
 155 .docblock-colorpalette div {
 156         color: var(--text-norm) !important;
 157 }
 158
 159 .docblock-colorpalette [title^='var(--'] {
 160         padding-block: 0;
 161         padding-inline: 0.1rem;
 162         font-size: 0.8em;
 163         user-select: all;
 164 }
 165
 166 body.sb-main-fullscreen::before {
 167         position: fixed;
 168         inset-block-end: 0;
 169         display: block;
 170         background: var(--primary);
 171         color: var(--primary-contrast);
 172         border-radius: var(--border-radius-sm);
 173         font-size: 0.8em;
 174         padding-block: 0;
 175         padding-inline: 0.3em;
 176         inset-inline-end: 0;
 177         z-index: 12000;
 178 }