From 1c432765628a1a0d311e2cd0a8379680e27d75c6 Mon Sep 17 00:00:00 2001 From: Teresa Date: Fri, 11 Dec 2015 18:49:31 -0800 Subject: [PATCH] Updated code block styles --- public/resources/css/_options.scss | 9 ++- public/resources/css/base/_type.scss | 6 +- public/resources/css/module/_code-box.scss | 25 +++---- public/resources/css/module/_code.scss | 67 +++++++++---------- .../resources/css/module/_example-title.scss | 11 +-- 5 files changed, 63 insertions(+), 55 deletions(-) diff --git a/public/resources/css/_options.scss b/public/resources/css/_options.scss index 2a1489612a..6efe3dc2ee 100644 --- a/public/resources/css/_options.scss +++ b/public/resources/css/_options.scss @@ -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; \ No newline at end of file +$snow: #FFFFFF; +$heather: #546E7A; +$lightgrey: #F5F6F7; diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index e1e6d36a91..a5b60ee95e 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -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; } -} \ No newline at end of file +} diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index 00784634a6..6cb8c2bc59 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -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; } -} \ No newline at end of file +} diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index 489f114a45..4824a6db65 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -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; } } -} \ No newline at end of file +} diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss index b605c8c4c4..112c591964 100644 --- a/public/resources/css/module/_example-title.scss +++ b/public/resources/css/module/_example-title.scss @@ -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; -} \ No newline at end of file +}