| 1 | @import '~@readme/syntax-highlighter/node_modules/codemirror/lib/codemirror.css';
|
| 2 | @import '~@readme/syntax-highlighter/node_modules/codemirror/theme/neo.css';
|
| 3 |
|
| 4 | @mixin CodeTabs {
|
| 5 | $bgc-pre: #F6F8FA;
|
| 6 | $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
|
| 7 | $radius: var(--md-code-radius, var(--markdown-radius, 3px));
|
| 8 |
|
| 9 | color: #333;
|
| 10 | color: var(--md-code-text, #333);
|
| 11 | border-radius: $radius !important;
|
| 12 | overflow: hidden;
|
| 13 |
|
| 14 | &-toolbar {
|
| 15 | background: $bgc-bar;
|
| 16 | background: var(--md-code-tabs, $bgc-bar);
|
| 17 | display: flex;
|
| 18 | flex-flow: row nowrap;
|
| 19 | overflow: hidden;
|
| 20 | overflow-x: auto;
|
| 21 | -ms-overflow-style: none;
|
| 22 | -webkit-overflow-scrolling: touch;
|
| 23 | &::-webkit-scrollbar {
|
| 24 | display: none;
|
| 25 | }
|
| 26 | button {
|
| 27 | white-space: nowrap;
|
| 28 | transition: .123s ease;
|
| 29 | -webkit-appearance: none;
|
| 30 | appearance: none;
|
| 31 | display: inline-block;
|
| 32 | line-height: 2;
|
| 33 | padding: .5em 1em;
|
| 34 | border: none;
|
| 35 | background: transparent;
|
| 36 | outline: none;
|
| 37 | color: inherit;
|
| 38 | font: inherit;
|
| 39 | font-size: .75em;
|
| 40 | cursor: pointer;
|
| 41 | }
|
| 42 | }
|
| 43 |
|
| 44 | &.CodeTabs_initial &-toolbar button:first-child,
|
| 45 | &-toolbar button.CodeTabs_active {
|
| 46 | background: $bgc-pre;
|
| 47 | background: var(--md-code-background, $bgc-pre);
|
| 48 | color: black;
|
| 49 | color: var(--md-code-text, black);
|
| 50 | pointer-events: none;
|
| 51 | }
|
| 52 |
|
| 53 | &-toolbar button:not(.CodeTabs_active):hover {
|
| 54 | background: rgba(0, 0, 0, .075);
|
| 55 | }
|
| 56 |
|
| 57 | pre {
|
| 58 | border-radius: 0 0 $radius $radius !important;
|
| 59 | background: $bgc-pre;
|
| 60 | background: var(--md-code-background, $bgc-pre);
|
| 61 | margin-bottom: 0;
|
| 62 | &:not(.CodeTabs_active) { display: none }
|
| 63 | }
|
| 64 |
|
| 65 | &.CodeTabs_initial pre:first-child {
|
| 66 | display: block;
|
| 67 | }
|
| 68 | }
|
| 69 |
|
| 70 | .CodeTabs {
|
| 71 | @include CodeTabs;
|
| 72 | pre {
|
| 73 | margin-top: 0 !important;
|
| 74 | margin-bottom: 0 !important;
|
| 75 | }
|
| 76 | }
|