Updated code block styles
This commit is contained in:
Teresa
Naomi Black
parent
bc74ee4ac3
commit
1c43276562
|
|
@ -50,6 +50,7 @@ $cactus: #8BC34A;
|
|||
|
||||
// YELLOW
|
||||
$sunshine: #FFF59D;
|
||||
$olive: #9E9D24;
|
||||
|
||||
// ORANGE
|
||||
$sand: #FFF8E1;
|
||||
|
|
@ -60,6 +61,7 @@ $peach: #ffebee;
|
|||
$squid: #EF3872;
|
||||
$cardinal: #E23237;
|
||||
$ruby: #B52E31;
|
||||
$pink: #D43669;
|
||||
|
||||
// BLUE COLORS
|
||||
$light: #E3F2FD;
|
||||
|
|
@ -78,9 +80,14 @@ $silver: #36474F;
|
|||
$platinum: #445A64;
|
||||
$metal: #536E7A;
|
||||
$tin: #8FA4AE;
|
||||
$darkgrey: #5C707A;
|
||||
$bismark: #90A4AE;
|
||||
$grey: #B0BEC5;
|
||||
|
||||
// LIGHT GRAY COLORS
|
||||
$cloud: #AFBEC5;
|
||||
$fog: #CFD8DC;
|
||||
$mist: #ECEFF1;
|
||||
$snow: #FFFFFF;
|
||||
$heather: #546E7A;
|
||||
$lightgrey: #F5F6F7;
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ a {
|
|||
}
|
||||
|
||||
code {
|
||||
background: $mist;
|
||||
background: $lightgrey;
|
||||
border-radius: 2px;
|
||||
font-family: $mono-font;
|
||||
color: $metal;
|
||||
color: $darkgrey;
|
||||
padding: 0px 4px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
.code-box {
|
||||
border-radius: 4px;
|
||||
background: $steel;
|
||||
box-shadow: 0px 2px 5px rgba($coal, .3);
|
||||
background: $lightgrey;
|
||||
// box-shadow: 0px 2px 5px rgba($coal, .3);
|
||||
margin-bottom: $unit * 2;
|
||||
|
||||
header {
|
||||
background: darken($steel, 5%);
|
||||
background: $fog;
|
||||
color: $snow;
|
||||
padding: $unit;
|
||||
padding: $unit $unit 0px $unit;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
}
|
||||
|
||||
nav {
|
||||
button {
|
||||
line-height: $unit * 3;
|
||||
height: $unit * 3;
|
||||
line-height: $unit * 3.5;
|
||||
height: $unit * 3.5;
|
||||
padding: 0px ($unit * 3);
|
||||
margin-right: $unit;
|
||||
font-size: 13px;
|
||||
background: lighten($steel, 3%);
|
||||
color: $tin;
|
||||
font-weight: 500;
|
||||
background: $grey;
|
||||
color: $snow;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
// font-weight: 500;
|
||||
text-transform: none;
|
||||
|
||||
&.is-selected,
|
||||
&.selected
|
||||
{
|
||||
background: $blueberry;
|
||||
color: $snow;
|
||||
background: $lightgrey;
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,19 +23,19 @@
|
|||
*/
|
||||
|
||||
.prettyprint {
|
||||
background: $steel;
|
||||
background: $lightgrey;
|
||||
font-family: $mono-font;
|
||||
color: $snow;
|
||||
color: $darkgrey;
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
// font-weight: 600;
|
||||
line-height: 24px;
|
||||
margin-bottom: $unit * 3;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 5px rgba($coal, .3);
|
||||
// box-shadow: 0px 2px 5px rgba($coal, .3);
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
padding: ($unit * 2) ($unit * 4);
|
||||
|
||||
&.linenums,
|
||||
|
|
@ -55,16 +55,15 @@
|
|||
}
|
||||
|
||||
ol {
|
||||
background: $steel;
|
||||
background: $lightgrey;
|
||||
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
|
||||
margin: 0px;
|
||||
overflow: auto;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
// font-weight: 600;
|
||||
font-size: 15px;
|
||||
|
||||
li {
|
||||
color: $metal;
|
||||
color: $bismark;
|
||||
background: none;
|
||||
margin-bottom: 5px;
|
||||
line-height: normal;
|
||||
|
|
@ -90,47 +89,47 @@
|
|||
|
||||
.pnk,
|
||||
.blk {
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.pnk {
|
||||
background: $squid;
|
||||
color: $snow;
|
||||
background: $lightgrey;
|
||||
color: $darkgrey;
|
||||
}
|
||||
.blk {
|
||||
background: $coal;
|
||||
}
|
||||
.otl {
|
||||
outline: 1px solid rgba(snow, .56);
|
||||
outline: 1px solid rgba(darkgrey, .56);
|
||||
}
|
||||
.kwd {
|
||||
color: $mist;
|
||||
color: $pink;
|
||||
}
|
||||
.typ,
|
||||
.tag {
|
||||
color: $squid;
|
||||
color: $pink;
|
||||
}
|
||||
.str,
|
||||
.atv {
|
||||
color: darken($sunshine, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.atn {
|
||||
color: darken($cactus, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.com {
|
||||
color: $tin;
|
||||
color: $olive;
|
||||
}
|
||||
.lit {
|
||||
color: darken($sunshine, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.pun {
|
||||
color: $snow;
|
||||
color: $bismark;
|
||||
}
|
||||
.pln {
|
||||
color: $snow;
|
||||
color: $darkgrey;
|
||||
}
|
||||
.dec {
|
||||
color: $grape;
|
||||
color: $olive;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -140,42 +139,42 @@
|
|||
*/
|
||||
|
||||
@media print {
|
||||
background: $snow;
|
||||
background: $lightgrey;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
ol {
|
||||
background: $snow;
|
||||
background: $lightgrey;
|
||||
}
|
||||
|
||||
.kwd {
|
||||
color: $steel;
|
||||
color: $pink;
|
||||
}
|
||||
.typ,
|
||||
.tag {
|
||||
color: $ruby;
|
||||
color: $pink;
|
||||
}
|
||||
.str,
|
||||
.atv {
|
||||
color: darken($sunshine, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.atn {
|
||||
color: darken($cactus, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.com {
|
||||
color: $cloud;
|
||||
color: $olive;
|
||||
}
|
||||
.lit {
|
||||
color: darken($sunshine, 10%);
|
||||
color: $olive;
|
||||
}
|
||||
.pun {
|
||||
color: $coal;
|
||||
color: $bismark;
|
||||
}
|
||||
.pln {
|
||||
color: $coal;
|
||||
color: $darkgrey;
|
||||
}
|
||||
.dec {
|
||||
color: darken($grape, 5%);
|
||||
color: $olive;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
.example-title {
|
||||
@extend .alert;
|
||||
|
||||
color: $snow;
|
||||
color: $heather;
|
||||
padding: 0 ($unit * 2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-color: $blueberry;
|
||||
background: $blueberry;
|
||||
// font-weight: 500;
|
||||
border-color: $fog;
|
||||
background: $fog;
|
||||
box-shadow: none;
|
||||
// temporary hack to remove space between example title and code-example
|
||||
margin-bottom: -18px;
|
||||
}
|
||||
Loading…
Reference in New Issue