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

180 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: $steel;
font-family: $mono-font;
color: $snow;
overflow: hidden;
position: relative;
padding: 0px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
margin-bottom: $unit * 3;
border-radius: 4px;
box-shadow: 0px 2px 5px rgba($coal, .3);
padding: ($unit * 2) ($unit * 4);
&.linenums,
&[class^="linenums:"],
&[class*=" linenums:"] {
padding: 0px;
}
&.is-showcase {
border: 4px solid $regal;
}
code {
background: none;
font-size: 15px;
padding: 0px;
}
ol {
background: $steel;
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
margin: 0px;
overflow: auto;
border-radius: 3px;
font-weight: 600;
font-size: 15px;
li {
color: $metal;
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: 15px;
}
}
}
/*
* Screen Colors
*
*/
.pnk,
.blk {
border-radius: 2px;
padding: 2px 4px;
}
.pnk {
background: $squid;
color: $snow;
}
.blk {
background: $coal;
}
.otl {
outline: 1px solid rgba(snow, .56);
}
.kwd {
color: $mist;
}
.typ,
.tag {
color: $squid;
}
.str,
.atv {
color: darken($sunshine, 10%);
}
.atn {
color: darken($cactus, 10%);
}
.com {
color: $tin;
}
.lit {
color: darken($sunshine, 10%);
}
.pun {
color: $snow;
}
.pln {
color: $snow;
}
.dec {
color: $grape;
}
/*
* Print Colors
*
*/
@media print {
background: $snow;
border: none;
box-shadow: none;
ol {
background: $snow;
}
.kwd {
color: $steel;
}
.typ,
.tag {
color: $ruby;
}
.str,
.atv {
color: darken($sunshine, 10%);
}
.atn {
color: darken($cactus, 10%);
}
.com {
color: $cloud;
}
.lit {
color: darken($sunshine, 10%);
}
.pun {
color: $coal;
}
.pln {
color: $coal;
}
.dec {
color: darken($grape, 5%);
}
}
}