From 39e4c825ef452111149e52862f5ea32a00789a46 Mon Sep 17 00:00:00 2001 From: Bruno Trecenti Date: Mon, 17 Mar 2014 19:19:54 -0300 Subject: [PATCH] styles with scss --- examples/default.html | 54 ------------------------------------ src/stylesheets/_colors.scss | 15 ++++++++++ src/stylesheets/base.scss | 43 ++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 54 deletions(-) create mode 100644 src/stylesheets/_colors.scss create mode 100644 src/stylesheets/base.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; + } + } +} -- 2.39.2