mirror of https://github.com/bigchaindb/site.git
124 lines
2.4 KiB
SCSS
124 lines
2.4 KiB
SCSS
//
|
|
// Code (inline and block)
|
|
// --------------
|
|
// bigchaindb.com
|
|
//
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: $font-family-monospace;
|
|
font-size: .7em; // use em so inline code can be used withing large and small modifiers
|
|
hyphens: none;
|
|
}
|
|
|
|
// Inline code
|
|
code {
|
|
padding: .1rem .3rem;
|
|
color: $code-color;
|
|
background-color: $code-bg;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
// User input typically entered via keyboard
|
|
kbd {
|
|
padding: .1rem .3rem;
|
|
color: $kbd-color;
|
|
background-color: $kbd-bg;
|
|
border-radius: $border-radius-sm;
|
|
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
|
|
|
|
kbd {
|
|
padding: 0;
|
|
font-size: 100%;
|
|
font-weight: $font-weight-bold;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// Blocks of code
|
|
pre {
|
|
display: block;
|
|
padding: $spacer / 1.5;
|
|
margin: 0 0 $spacer;
|
|
line-height: $line-height;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
color: $pre-color;
|
|
background-color: $pre-bg;
|
|
border-radius: $border-radius;
|
|
|
|
// make 'em scrollable
|
|
overflow: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-height: $pre-scrollable-max-height;
|
|
|
|
// Account for some code outputs that place code tags in pre tags
|
|
code {
|
|
padding: 0;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
white-space: pre;
|
|
overflow-wrap: normal;
|
|
word-wrap: normal;
|
|
word-break: normal;
|
|
overflow: auto;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Clipboard button
|
|
//
|
|
.highlight {
|
|
position: relative;
|
|
|
|
.btn--clipboard,
|
|
.success__text {
|
|
position: absolute;
|
|
top: .1rem;
|
|
right: .1rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.success__text {
|
|
top: $spacer * 3.5;
|
|
right: -1.5rem;
|
|
font-size: $font-size-xs;
|
|
}
|
|
}
|
|
|
|
.highlight__title {
|
|
margin-top: 0;
|
|
margin-bottom: $spacer / 4;
|
|
margin-left: $spacer / 1.5;
|
|
font-size: $font-size-sm;
|
|
color: $gray-light;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn--clipboard {
|
|
padding: 0 $spacer / 2;
|
|
box-shadow: none;
|
|
background: $brand-main-gray;
|
|
color: $brand-main-gray-light;
|
|
outline: 0;
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
width: $font-size-sm;
|
|
height: $font-size-sm;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
transform: none;
|
|
background: lighten($brand-main-gray, 5%);
|
|
}
|
|
|
|
&.success {
|
|
background: $brand-success;
|
|
}
|
|
}
|