angular-cn/public/resources/css/module/_code.scss

181 lines
2.6 KiB
SCSS

/*
* Embedded Code
*
* Style for embedded code examples
*/
.cp_embed_iframe {
overflow: hidden;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
width: 240px !important;
}
}
/*
* Code Snippets
*
* These Code snippets are transformed by prettify and the code
* below represents a custom theme that works with their formatting.
*/
.prettyprint {
background: $lightgrey;
font-family: $mono-font;
color: $darkgrey;
width: auto;
overflow: auto;
position: relative;
padding: 0px;
font-size: 13px;
// font-weight: 600;
line-height: 24px;
margin-bottom: $unit * 3;
// box-shadow: 0px 2px 5px rgba($coal, .3);
border-radius: 0px 0px 4px 4px;
padding: ($unit * 2) ($unit * 4);
&.linenums,
&[class^="linenums:"],
&[class*=" linenums:"] {
padding: 0px;
}
&.is-showcase {
border: 4px solid $regal;
}
code {
background: none;
font-size: 13px;
padding: 0px;
}
ol {
background: $lightgrey;
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
margin: 0px;
overflow: auto;
// font-weight: 600;
font-size: 13px;
li {
color: $bismark;
background: none;
margin-bottom: 5px;
line-height: normal;
list-style-type: decimal;
font-size: 12px;
&:last-child {
margin-bottom: 0px;
}
code {
background: none;
font-size: 13px;
}
}
}
/*
* Screen Colors
*
*/
.pnk,
.blk {
border-radius: 4px;
padding: 2px 4px;
}
.pnk {
background: $fog;
color: $darkgrey;
}
.blk {
background: $storm;
}
.otl {
outline: 1px solid rgba(darkgrey, .56);
}
.kwd {
color: $pink;
}
.typ,
.tag {
color: $pink;
}
.str,
.atv {
color: $olive;
}
.atn {
color: $olive;
}
.com {
color: $olive;
}
.lit {
color: $olive;
}
.pun {
color: $bismark;
}
.pln {
color: $darkgrey;
}
.dec {
color: $olive;
}
/*
* Print Colors
*
*/
@media print {
background: $lightgrey;
border: none;
box-shadow: none;
ol {
background: $lightgrey;
}
.kwd {
color: $pink;
}
.typ,
.tag {
color: $pink;
}
.str,
.atv {
color: $olive;
}
.atn {
color: $olive;
}
.com {
color: $olive;
}
.lit {
color: $olive;
}
.pun {
color: $bismark;
}
.pln {
color: $darkgrey;
}
.dec {
color: $olive;
}
}
}