Skip to content
This repository has been archived by the owner on Mar 2, 2023. It is now read-only.

Commit

Permalink
Organize the Sass into a few different files
Browse files Browse the repository at this point in the history
  • Loading branch information
imakewebthings committed Feb 27, 2012
1 parent b8eaf69 commit dac35f6
Show file tree
Hide file tree
Showing 6 changed files with 268 additions and 276 deletions.
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -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`.
Expand Down
63 changes: 30 additions & 33 deletions lib/jquery.stackview.css
Expand Up @@ -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
Expand Down Expand Up @@ -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
***************/
Expand Down
143 changes: 143 additions & 0 deletions 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);
}
}
41 changes: 41 additions & 0 deletions 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;
}
48 changes: 48 additions & 0 deletions 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;
}
}

0 comments on commit dac35f6

Please sign in to comment.