From: Bruno Trecenti <btrecent@thoughtworks.com>
Date: Mon, 17 Mar 2014 22:19:54 +0000 (-0300)
Subject: styles with scss
X-Git-Url: https://pwan.org/git/?a=commitdiff_plain;h=39e4c825ef452111149e52862f5ea32a00789a46;p=tech-radar.git
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 @@
<script src="../src/models/radar.js"></script>
<script src="../src/graphing/radar.js"></script>
<style>
- body {
- font: 11px 'Open Sans';
- }
- svg {
- padding: 20px;
- }
- svg circle:nth-child(1) {
- fill: #eaeaea;
- }
- svg circle:nth-child(2) {
- fill: #dadada;
- }
- svg circle:nth-child(3) {
- fill: #cacaca;
- }
- svg circle:nth-child(4) {
- fill: #bababa;
- }
- svg text.blip-text {
- font-size: 9px;
- font-style: italic;
- fill: #fff;
- }
- svg text.line-text {
- font-weight: bold;
- text-transform: uppercase;
- fill: #000;
- }
-
- svg text.tools,
- svg text.techniques,
- svg text.platforms,
- svg text.languages-frameworks {
- font-weight: bold;
- text-transform:uppercase;
- font-size: 16px;
- }
- svg line {
- stroke: rgba(255, 255, 255, 0.3);
- }
- svg circle.tools,
- svg circle.techniques,
- svg circle.platforms,
- svg circle.languages-frameworks,
- svg polygon.tools,
- svg polygon.techniques,
- svg polygon.platforms,
- svg polygon.languages-frameworks {
- stroke: #fff;
- }
- svg .tools { fill: #83AD78 }
- svg .techniques { fill: #3DB5BE }
- svg .platforms { fill: #E88744 }
- svg .languages-frameworks { fill: #8D2145 }
</style>
</head>
<body>
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;
+ }
+ }
+}