From: Bruno Trecenti Date: Mon, 17 Mar 2014 22:19:54 +0000 (-0300) Subject: styles with scss X-Git-Url: https://pwan.org/git/?p=tech-radar.git;a=commitdiff_plain;h=39e4c825ef452111149e52862f5ea32a00789a46 styles with scss --- diff --git a/examples/default.html b/examples/default.html index 9a4f485..4bb27ec 100644 --- a/examples/default.html +++ b/examples/default.html @@ -14,60 +14,6 @@ diff --git a/src/stylesheets/_colors.scss b/src/stylesheets/_colors.scss new file mode 100644 index 0000000..aa674d7 --- /dev/null +++ b/src/stylesheets/_colors.scss @@ -0,0 +1,15 @@ +$green: #83ad78; +$blue: #3db5be; +$orange: #e88744; +$violet: #8d2145; + +$grey-darkest: #bababa; +$grey-dark: #cacaca; +$grey: #dadada; +$grey-light: #eaeaea; +$grey-lightest: #fafafa; + +$white: #fff; +$black: #000; + +$grey-alpha-03: rgba(255, 255, 255, 0.3); diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss new file mode 100644 index 0000000..4a59d22 --- /dev/null +++ b/src/stylesheets/base.scss @@ -0,0 +1,43 @@ +@import 'colors'; + +body { + font: 9px 'Open Sans'; +} + +svg { + padding: 20px; + + .first { fill: $green; } + .second { fill: $blue; } + .third { fill: $orange; } + .fourth { fill: $violet; } + + circle { + &:nth-child(1) { stroke: none; fill: $grey-light; } + &:nth-child(2) { stroke: none; fill: $grey; } + &:nth-child(3) { stroke: none; fill: $grey-dark; } + &:nth-child(4) { stroke: none; fill: $grey-darkest; } + } + + circle, polygon { + stroke: $white; + } + + line { + stroke: $grey-alpha-03; + } + + text { + .blip-text { + font-style: italic; + fill: $white; + } + + .line-text { + font-size: 16px; + font-weight: bold; + text-transform: uppercase; + fill: $black; + } + } +}