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 // YELLOW
$sunshine: #FFF59D; $sunshine: #FFF59D;
$olive: #9E9D24;
// ORANGE // ORANGE
$sand: #FFF8E1; $sand: #FFF8E1;
@ -60,6 +61,7 @@ $peach: #ffebee;
$squid: #EF3872; $squid: #EF3872;
$cardinal: #E23237; $cardinal: #E23237;
$ruby: #B52E31; $ruby: #B52E31;
$pink: #D43669;
// BLUE COLORS // BLUE COLORS
$light: #E3F2FD; $light: #E3F2FD;
@ -78,9 +80,14 @@ $silver: #36474F;
$platinum: #445A64; $platinum: #445A64;
$metal: #536E7A; $metal: #536E7A;
$tin: #8FA4AE; $tin: #8FA4AE;
$darkgrey: #5C707A;
$bismark: #90A4AE;
$grey: #B0BEC5;
// LIGHT GRAY COLORS // LIGHT GRAY COLORS
$cloud: #AFBEC5; $cloud: #AFBEC5;
$fog: #CFD8DC; $fog: #CFD8DC;
$mist: #ECEFF1; $mist: #ECEFF1;
$snow: #FFFFFF; $snow: #FFFFFF;
$heather: #546E7A;
$lightgrey: #F5F6F7;

View File

@ -15,10 +15,10 @@ a {
} }
code { code {
background: $mist; background: $lightgrey;
border-radius: 2px; border-radius: 2px;
font-family: $mono-font; font-family: $mono-font;
color: $metal; color: $darkgrey;
padding: 0px 4px; padding: 0px 4px;
font-size: 90%; font-size: 90%;
} }

View File

@ -1,33 +1,34 @@
.code-box { .code-box {
border-radius: 4px; border-radius: 4px;
background: $steel; background: $lightgrey;
box-shadow: 0px 2px 5px rgba($coal, .3); // box-shadow: 0px 2px 5px rgba($coal, .3);
margin-bottom: $unit * 2; margin-bottom: $unit * 2;
header { header {
background: darken($steel, 5%); background: $fog;
color: $snow; color: $snow;
padding: $unit; padding: $unit $unit 0px $unit;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
} }
nav { nav {
button { button {
line-height: $unit * 3; line-height: $unit * 3.5;
height: $unit * 3; height: $unit * 3.5;
padding: 0px ($unit * 3); padding: 0px ($unit * 3);
margin-right: $unit; margin-right: $unit;
font-size: 13px; font-size: 13px;
background: lighten($steel, 3%); background: $grey;
color: $tin; color: $snow;
font-weight: 500; border-radius: 4px 4px 0px 0px;
// font-weight: 500;
text-transform: none; text-transform: none;
&.is-selected, &.is-selected,
&.selected &.selected
{ {
background: $blueberry; background: $lightgrey;
color: $snow; color: $darkgrey;
} }
} }
} }

View File

@ -23,19 +23,19 @@
*/ */
.prettyprint { .prettyprint {
background: $steel; background: $lightgrey;
font-family: $mono-font; font-family: $mono-font;
color: $snow; color: $darkgrey;
width: auto; width: auto;
overflow: auto; overflow: auto;
position: relative; position: relative;
padding: 0px; padding: 0px;
font-size: 15px; font-size: 15px;
font-weight: 600; // font-weight: 600;
line-height: 24px; line-height: 24px;
margin-bottom: $unit * 3; 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); padding: ($unit * 2) ($unit * 4);
&.linenums, &.linenums,
@ -55,16 +55,15 @@
} }
ol { ol {
background: $steel; background: $lightgrey;
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7); padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
margin: 0px; margin: 0px;
overflow: auto; overflow: auto;
border-radius: 3px; // font-weight: 600;
font-weight: 600;
font-size: 15px; font-size: 15px;
li { li {
color: $metal; color: $bismark;
background: none; background: none;
margin-bottom: 5px; margin-bottom: 5px;
line-height: normal; line-height: normal;
@ -90,47 +89,47 @@
.pnk, .pnk,
.blk { .blk {
border-radius: 2px; border-radius: 4px;
padding: 2px 4px; padding: 2px 4px;
} }
.pnk { .pnk {
background: $squid; background: $lightgrey;
color: $snow; color: $darkgrey;
} }
.blk { .blk {
background: $coal; background: $coal;
} }
.otl { .otl {
outline: 1px solid rgba(snow, .56); outline: 1px solid rgba(darkgrey, .56);
} }
.kwd { .kwd {
color: $mist; color: $pink;
} }
.typ, .typ,
.tag { .tag {
color: $squid; color: $pink;
} }
.str, .str,
.atv { .atv {
color: darken($sunshine, 10%); color: $olive;
} }
.atn { .atn {
color: darken($cactus, 10%); color: $olive;
} }
.com { .com {
color: $tin; color: $olive;
} }
.lit { .lit {
color: darken($sunshine, 10%); color: $olive;
} }
.pun { .pun {
color: $snow; color: $bismark;
} }
.pln { .pln {
color: $snow; color: $darkgrey;
} }
.dec { .dec {
color: $grape; color: $olive;
} }
@ -140,42 +139,42 @@
*/ */
@media print { @media print {
background: $snow; background: $lightgrey;
border: none; border: none;
box-shadow: none; box-shadow: none;
ol { ol {
background: $snow; background: $lightgrey;
} }
.kwd { .kwd {
color: $steel; color: $pink;
} }
.typ, .typ,
.tag { .tag {
color: $ruby; color: $pink;
} }
.str, .str,
.atv { .atv {
color: darken($sunshine, 10%); color: $olive;
} }
.atn { .atn {
color: darken($cactus, 10%); color: $olive;
} }
.com { .com {
color: $cloud; color: $olive;
} }
.lit { .lit {
color: darken($sunshine, 10%); color: $olive;
} }
.pun { .pun {
color: $coal; color: $bismark;
} }
.pln { .pln {
color: $coal; color: $darkgrey;
} }
.dec { .dec {
color: darken($grape, 5%); color: $olive;
} }
} }
} }

View File

@ -1,12 +1,13 @@
.example-title { .example-title {
@extend .alert; @extend .alert;
color: $snow; color: $heather;
padding: 0 ($unit * 2); padding: 0 ($unit * 2);
font-size: 14px; font-size: 14px;
font-weight: 500; // font-weight: 500;
border-color: $blueberry; border-color: $fog;
background: $blueberry; background: $fog;
box-shadow: none;
// temporary hack to remove space between example title and code-example // temporary hack to remove space between example title and code-example
margin-bottom: -18px; margin-bottom: -18px;
} }