Skip to content
Browse files

Organize the Sass into a few different files

  • Loading branch information...
1 parent b8eaf69 commit dac35f61292c7de4674fb21fa97fbb3269c8699b @imakewebthings imakewebthings committed Feb 27, 2012
Showing with 268 additions and 276 deletions.
  1. +2 −2 README.md
  2. +30 −33 lib/jquery.stackview.css
  3. +143 −0 src/scss/_heatmap.scss
  4. +41 −0 src/scss/_mixins.scss
  5. +48 −0 src/scss/_navigation.scss
  6. +4 −241 src/scss/jquery.stackview.scss
View
4 README.md
@@ -8,10 +8,10 @@ Check out the [Project Page](http://librarylab.law.harvard.edu/projects/stackvie
A single concatenated and minified `jquery.stackview.min.js` file containing Stack View and all its dependencies is located in `/lib`. Developers making changes to the project should do so in `/src/js` and compile the minified file by running `make js`. If any files in `/src` are added or renamed, they should be added to this list of source files in `Makefile`.
-Styles are written in [Sass](http://sass-lang.com) and compiled to CSS. Sass files are located in `/src/scss` and compiled to `/lib/jquery.stackview.css`. Developers can compile the Sass by installing it and running `make css`. Developers making a lot of changes can watch for changes to the Sass file by running:
+Styles are written in [Sass](http://sass-lang.com) and compiled to CSS. Sass files are located in `/src/scss` and compiled to `/lib/jquery.stackview.css`. Developers can compile the Sass by installing it and running `make css`. Developers making a lot of changes can watch for changes to the Sass directory by running:
```
-sass --watch --style expanded src/scss/jquery.stackview.scss:lib/jquery.stackview.css
+sass --watch --style expanded src/scss/:lib/
```
Tests are written using [Jasmine](http://pivotal.github.com/jasmine/) and can be run by opening `/test/index.html`.
View
63 lib/jquery.stackview.css
@@ -189,6 +189,36 @@
transform: skew(-70deg, 0deg);
}
+.stackview .ribbon {
+ position: absolute;
+ z-index: 99999;
+ /* Must be bigger than the # of elements in stack */
+ left: 55px;
+ right: 10px;
+ top: 52px;
+ padding: 8px 10px 8px 22px;
+ min-height: 25px;
+ font-size: 20px;
+ line-height: 1.25;
+ background: rgba(252, 221, 94, 0.85);
+ color: #035;
+ border: 1px solid #fe4;
+ border-radius: 2px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.stackview .ribbon:after {
+ content: "";
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ background: url("images/ribbonTab.png") no-repeat 0 0;
+ width: 10px;
+ height: 10px;
+}
+
/******************
HEATMAP
@@ -322,39 +352,6 @@
background: #004777;
}
-/**********
- RIBBON
-***********/
-.stackview .ribbon {
- position: absolute;
- z-index: 99999;
- /* Must be bigger than the # of elements in stack */
- left: 55px;
- right: 10px;
- top: 52px;
- padding: 8px 10px 8px 22px;
- min-height: 25px;
- font-size: 20px;
- line-height: 1.25;
- background: rgba(252, 221, 94, 0.85);
- color: #035;
- border: 1px solid #fe4;
- border-radius: 2px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.stackview .ribbon:after {
- content: "";
- position: absolute;
- bottom: -10px;
- left: 0;
- background: url("images/ribbonTab.png") no-repeat 0 0;
- width: 10px;
- height: 10px;
-}
-
/**************
NAVIGATION
***************/
View
143 src/scss/_heatmap.scss
@@ -0,0 +1,143 @@
+/******************
+ HEATMAP
+
+ hottest = heat10
+ coldest = heat1
+*******************/
+.stackview {
+ .heat1 {
+ $bg: #ccebff;
+ $border: #adf;
+
+ a {
+ backround-color:$bg;
+ background-image:url('images/superGloss.png');
+ color:#222;
+ text-shadow:0 1px 0 #fff;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat2 {
+ $bg: #adf;
+ $border: #88cfff;
+
+ a {
+ background-color:$bg;
+ background-image:url('images/superGloss.png');
+ color:#222;
+ text-shadow:0 1px 0 #ddf1ff;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat3 {
+ $bg: #77c9ff;
+ $border: #59b6ef;
+
+ a {
+ background-color:$bg;
+ background-image:url('images/highGloss.png');
+ color:#111;
+ text-shadow:0 1px 0 #adf;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat4 {
+ $bg: #44b4ff;
+ $border: #11a0ff;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 $border;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat5 {
+ $bg: #22a7ff;
+ $border: #008fee;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 $border;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat6 {
+ $bg: #0099ff;
+ $border: #007acc;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 #0085dd;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat7 {
+ $bg: #0085dd;
+ $border: #06a;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 #0070bb;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat8 {
+ $bg: #0070bb;
+ $border: #004777;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 #005c99;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat9 {
+ $bg: #005c99;
+ $border: #002944;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 #004777;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+
+ .heat10 {
+ $bg: #004777;
+ $border: #001522;
+
+ a {
+ background-color:$bg;
+ text-shadow:0 -1px 0 #035;
+ border-color:$border;
+ }
+
+ @include book-decoration($bg, $border);
+ }
+}
View
41 src/scss/_mixins.scss
@@ -0,0 +1,41 @@
+@mixin rotate($deg) {
+ -webkit-transform:rotate($deg);
+ -moz-transform:rotate($deg);
+ -o-transform:rotate($deg);
+ -ms-transform:rotate($deg);
+ transform:rotate($deg);
+}
+
+@mixin transform-origin($val) {
+ -o-transform-origin:$val;
+ -ms-transform-origin:$val;
+ -moz-transform-origin:$val;
+ -webkit-transform-origin:$val;
+ transform-origin:$val;
+}
+
+@mixin skew($x, $y) {
+ -webkit-transform:skew($x, $y);
+ -moz-transform:skew($x, $y);
+ -o-transform:skew($x, $y);
+ -ms-transform:skew($x, $y);
+ transform:skew($x, $y);
+}
+
+@mixin book-decoration($bg, $border) {
+ .stack-pages {
+ border-color:$border;
+ }
+
+ .stack-cover {
+ border-color:$border;
+ background:$bg;
+ }
+}
+
+@mixin user-select($val) {
+ -webkit-user-select:$val;
+ -moz-user-select:$val;
+ -ms-user-select:$val;
+ user-select:$val;
+}
View
48 src/scss/_navigation.scss
@@ -0,0 +1,48 @@
+/**************
+ NAVIGATION
+***************/
+.stack-navigation {
+ position:absolute;
+ left:5px;
+ top:5px;
+ width:41px;
+ text-align:center;
+
+ .upstream, .downstream {
+ height:43px;
+ text-indent:-999em;
+ overflow:hidden;
+ }
+
+ .upstream {
+ background:url('images/nav.png') 0 -87px no-repeat;
+
+ &:hover, &:focus {
+ background-position:0 -44px;
+ }
+
+ &:active {
+ background-position:0 -1px;
+ }
+ }
+
+ .downstream {
+ background:url('images/nav.png') 0 -130px no-repeat;
+
+ &:hover, &:focus {
+ background-position:0 -173px;
+ }
+
+ &:active {
+ background-position:0 -216px;
+ }
+ }
+
+ .num-found {
+ font-size:15px;
+ line-height:16px;
+ margin:10px 0;
+ color:#09f;
+ text-shadow: 0 1px 0 #ddd;
+ }
+}
View
245 src/scss/jquery.stackview.scss
@@ -5,51 +5,8 @@
Dual licensed under MIT and GPL.
*/
-// Mixins and variables
-@mixin rotate($deg) {
- -webkit-transform:rotate($deg);
- -moz-transform:rotate($deg);
- -o-transform:rotate($deg);
- -ms-transform:rotate($deg);
- transform:rotate($deg);
-}
-
-@mixin transform-origin($val) {
- -o-transform-origin:$val;
- -ms-transform-origin:$val;
- -moz-transform-origin:$val;
- -webkit-transform-origin:$val;
- transform-origin:$val;
-}
-
-@mixin skew($x, $y) {
- -webkit-transform:skew($x, $y);
- -moz-transform:skew($x, $y);
- -o-transform:skew($x, $y);
- -ms-transform:skew($x, $y);
- transform:skew($x, $y);
-}
-
-@mixin book-decoration($bg, $border) {
- .stack-pages {
- border-color:$border;
- }
-
- .stack-cover {
- border-color:$border;
- background:$bg;
- }
-}
-
-@mixin user-select($val) {
- -webkit-user-select:$val;
- -moz-user-select:$val;
- -ms-user-select:$val;
- user-select:$val;
-}
-
+@import "mixins";
-// Styles
.stackview {
font-family:"Helvetica Neue", sans-serif;
position:relative;
@@ -220,154 +177,6 @@
@include skew(-70deg, 0deg);
}
-/******************
- HEATMAP
-
- hottest = heat10
- coldest = heat1
-*******************/
-.stackview {
- .heat1 {
- $bg: #ccebff;
- $border: #adf;
-
- a {
- backround-color:$bg;
- background-image:url('images/superGloss.png');
- color:#222;
- text-shadow:0 1px 0 #fff;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat2 {
- $bg: #adf;
- $border: #88cfff;
-
- a {
- background-color:$bg;
- background-image:url('images/superGloss.png');
- color:#222;
- text-shadow:0 1px 0 #ddf1ff;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat3 {
- $bg: #77c9ff;
- $border: #59b6ef;
-
- a {
- background-color:$bg;
- background-image:url('images/highGloss.png');
- color:#111;
- text-shadow:0 1px 0 #adf;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat4 {
- $bg: #44b4ff;
- $border: #11a0ff;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 $border;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat5 {
- $bg: #22a7ff;
- $border: #008fee;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 $border;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat6 {
- $bg: #0099ff;
- $border: #007acc;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 #0085dd;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat7 {
- $bg: #0085dd;
- $border: #06a;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 #0070bb;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat8 {
- $bg: #0070bb;
- $border: #004777;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 #005c99;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat9 {
- $bg: #005c99;
- $border: #002944;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 #004777;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-
- .heat10 {
- $bg: #004777;
- $border: #001522;
-
- a {
- background-color:$bg;
- text-shadow:0 -1px 0 #035;
- border-color:$border;
- }
-
- @include book-decoration($bg, $border);
- }
-}
-
-
-/**********
- RIBBON
-***********/
.stackview .ribbon {
position:absolute;
z-index:99999; /* Must be bigger than the # of elements in stack */
@@ -383,7 +192,7 @@
border:1px solid #fe4;
border-radius:2px;
@include user-select(none);
-
+
&:after {
content:"";
position:absolute;
@@ -396,51 +205,5 @@
}
-/**************
- NAVIGATION
-***************/
-.stack-navigation {
- position:absolute;
- left:5px;
- top:5px;
- width:41px;
- text-align:center;
-
- .upstream, .downstream {
- height:43px;
- text-indent:-999em;
- overflow:hidden;
- }
-
- .upstream {
- background:url('images/nav.png') 0 -87px no-repeat;
-
- &:hover, &:focus {
- background-position:0 -44px;
- }
-
- &:active {
- background-position:0 -1px;
- }
- }
-
- .downstream {
- background:url('images/nav.png') 0 -130px no-repeat;
-
- &:hover, &:focus {
- background-position:0 -173px;
- }
-
- &:active {
- background-position:0 -216px;
- }
- }
-
- .num-found {
- font-size:15px;
- line-height:16px;
- margin:10px 0;
- color:#09f;
- text-shadow: 0 1px 0 #ddd;
- }
-}
+@import "heatmap";
+@import "navigation";

0 comments on commit dac35f6

Please sign in to comment.
Something went wrong with that request. Please try again.