Updated code block styles

This commit is contained in:
Teresa 2015-12-11 18:49:31 -08:00 committed by Naomi Black
parent bc74ee4ac3
commit 1c43276562
5 changed files with 63 additions and 55 deletions

View File

@ -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;
$snow: #FFFFFF;
$heather: #546E7A;
$lightgrey: #F5F6F7;

View File

@ -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%;
}
@ -203,4 +203,4 @@ table td {
> div:last-child > .card {
margin-right: 0;
}
}
}

View File

@ -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;
}
}
}
@ -36,4 +37,4 @@
box-shadow: none;
margin: 0px;
}
}
}

View File

@ -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;
}
}
}
}

View File

@ -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;
}
}