Updated code block styles
This commit is contained in:
parent
bc74ee4ac3
commit
1c43276562
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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;
|
||||||
}
|
}
|
Loading…
Reference in New Issue