stackview_acorn_tester 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +291 -0
  4. data/Rakefile +37 -0
  5. data/app/assets/javascripts/rails_stackview/auto_init.js +15 -0
  6. data/app/assets/javascripts/rails_stackview/browser.js +161 -0
  7. data/app/assets/javascripts/rails_stackview/plain.js +128 -0
  8. data/app/assets/javascripts/rails_stackview.js +11 -0
  9. data/app/assets/stylesheets/rails_stackview/_plain.scss +119 -0
  10. data/app/assets/stylesheets/rails_stackview/browser.scss +116 -0
  11. data/app/assets/stylesheets/rails_stackview.scss +10 -0
  12. data/app/controllers/stackview_data_controller.rb +91 -0
  13. data/app/fetch_adapters/rails_stackview/db_window_fetcher.rb +88 -0
  14. data/app/fetch_adapters/rails_stackview/mock_fetcher.rb +27 -0
  15. data/app/models/stackview_call_number.rb +2 -0
  16. data/app/views/rails_stackview/browser.html.erb +42 -0
  17. data/config/routes.rb +2 -0
  18. data/db/migrate/20150602210254_create_stackview_call_numbers.rb +34 -0
  19. data/lib/rails_stackview/engine.rb +7 -0
  20. data/lib/rails_stackview/version.rb +3 -0
  21. data/lib/rails_stackview.rb +20 -0
  22. data/lib/tasks/rails_stackview_tasks.rake +4 -0
  23. data/test/controllers/stackview_data_controller_test.rb +55 -0
  24. data/test/dummy/README.rdoc +28 -0
  25. data/test/dummy/Rakefile +6 -0
  26. data/test/dummy/app/assets/javascripts/application.js +17 -0
  27. data/test/dummy/app/assets/stylesheets/application.css +20 -0
  28. data/test/dummy/app/controllers/application_controller.rb +5 -0
  29. data/test/dummy/app/controllers/demo_controller.rb +14 -0
  30. data/test/dummy/app/helpers/application_helper.rb +2 -0
  31. data/test/dummy/app/views/demo/index.html.erb +14 -0
  32. data/test/dummy/app/views/layouts/application.html.erb +14 -0
  33. data/test/dummy/bin/bundle +3 -0
  34. data/test/dummy/bin/rails +4 -0
  35. data/test/dummy/bin/rake +4 -0
  36. data/test/dummy/bin/setup +29 -0
  37. data/test/dummy/config/application.rb +26 -0
  38. data/test/dummy/config/boot.rb +5 -0
  39. data/test/dummy/config/database.yml +25 -0
  40. data/test/dummy/config/environment.rb +5 -0
  41. data/test/dummy/config/environments/development.rb +41 -0
  42. data/test/dummy/config/environments/production.rb +79 -0
  43. data/test/dummy/config/environments/test.rb +42 -0
  44. data/test/dummy/config/initializers/assets.rb +11 -0
  45. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  46. data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
  47. data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
  48. data/test/dummy/config/initializers/inflections.rb +16 -0
  49. data/test/dummy/config/initializers/mime_types.rb +4 -0
  50. data/test/dummy/config/initializers/session_store.rb +3 -0
  51. data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
  52. data/test/dummy/config/locales/en.yml +23 -0
  53. data/test/dummy/config/routes.rb +67 -0
  54. data/test/dummy/config/secrets.yml +22 -0
  55. data/test/dummy/config.ru +4 -0
  56. data/test/dummy/public/404.html +67 -0
  57. data/test/dummy/public/422.html +67 -0
  58. data/test/dummy/public/500.html +66 -0
  59. data/test/dummy/public/favicon.ico +0 -0
  60. data/test/dummy/test_fixture.yaml +433 -0
  61. data/test/fetch_adapters/db_window_fetcher_test.rb +106 -0
  62. data/test/fixtures/stackview_call_numbers.yml +473 -0
  63. data/test/integration/navigation_test.rb +10 -0
  64. data/test/rails_stackview_test.rb +7 -0
  65. data/test/test_helper.rb +42 -0
  66. data/vendor/assets/README.md +16 -0
  67. data/vendor/assets/images/stackview/bookEnd-next.png +0 -0
  68. data/vendor/assets/images/stackview/bookEnd-prev.png +0 -0
  69. data/vendor/assets/images/stackview/gloss.png +0 -0
  70. data/vendor/assets/images/stackview/highGloss.png +0 -0
  71. data/vendor/assets/images/stackview/icon-globe.png +0 -0
  72. data/vendor/assets/images/stackview/icon-note.png +0 -0
  73. data/vendor/assets/images/stackview/nav.png +0 -0
  74. data/vendor/assets/images/stackview/placeholder.gif +0 -0
  75. data/vendor/assets/images/stackview/ribbonTab.png +0 -0
  76. data/vendor/assets/images/stackview/serials-edge.png +0 -0
  77. data/vendor/assets/images/stackview/serials.png +0 -0
  78. data/vendor/assets/images/stackview/superGloss.png +0 -0
  79. data/vendor/assets/javascripts/jquery.stackview.js +21 -0
  80. data/vendor/assets/javascripts/stackview/jquery.easing.1.3.js +205 -0
  81. data/vendor/assets/javascripts/stackview/jquery.stackview.base.js +561 -0
  82. data/vendor/assets/javascripts/stackview/jquery.stackview.infinite.js +46 -0
  83. data/vendor/assets/javascripts/stackview/jquery.stackview.ministack.js +33 -0
  84. data/vendor/assets/javascripts/stackview/jquery.stackview.navigation.js +71 -0
  85. data/vendor/assets/javascripts/stackview/jquery.stackview.stackcache.js +74 -0
  86. data/vendor/assets/javascripts/stackview/jquery.stackview.templates.js +31 -0
  87. data/vendor/assets/javascripts/stackview/microtemplating.js +40 -0
  88. data/vendor/assets/javascripts/stackview/types/book.js +184 -0
  89. data/vendor/assets/javascripts/stackview/types/my_plain.js +183 -0
  90. data/vendor/assets/javascripts/stackview/types/serial.js +40 -0
  91. data/vendor/assets/javascripts/stackview/types/soundrecording.js +42 -0
  92. data/vendor/assets/javascripts/stackview/types/videofilm.js +56 -0
  93. data/vendor/assets/javascripts/stackview/types/webpage.js +42 -0
  94. data/vendor/assets/stackview.sha +1 -0
  95. data/vendor/assets/stylesheets/stackview/_book.scss +66 -0
  96. data/vendor/assets/stylesheets/stackview/_heatmap.scss +154 -0
  97. data/vendor/assets/stylesheets/stackview/_ministack.scss +43 -0
  98. data/vendor/assets/stylesheets/stackview/_mixins.scss +100 -0
  99. data/vendor/assets/stylesheets/stackview/_navigation.scss +52 -0
  100. data/vendor/assets/stylesheets/stackview/_plain.scss +71 -0
  101. data/vendor/assets/stylesheets/stackview/_serial.scss +50 -0
  102. data/vendor/assets/stylesheets/stackview/_soundrecording.scss +83 -0
  103. data/vendor/assets/stylesheets/stackview/_videofilm.scss +74 -0
  104. data/vendor/assets/stylesheets/stackview/_webpage.scss +82 -0
  105. data/vendor/assets/stylesheets/stackview/jquery.stackview.scss +171 -0
  106. metadata +233 -0
@@ -0,0 +1,66 @@
1
+ .stack-book {
2
+ margin:0 0 2px 0;
3
+
4
+ > a {
5
+ border-width:1px 2px;
6
+ border-style:solid;
7
+ border-radius:3px / 20px;
8
+ }
9
+
10
+ .spine-text {
11
+ height:40px;
12
+ line-height:40px;
13
+ top:50%;
14
+ margin-top:-7px;
15
+ left:15px;
16
+ right:24px;
17
+ }
18
+
19
+ .spine-year {
20
+ @include rotate(-90deg);
21
+ }
22
+ }
23
+
24
+ .stack-pages {
25
+ position:absolute;
26
+ z-index:4;
27
+ display:block;
28
+ width:10px;
29
+ right:-6px;
30
+ top:0;
31
+ bottom:-4px;
32
+ border-width:3px 0 3px 2px;
33
+ border-style:solid;
34
+ border-radius:4px 0 0 4px / 20px 0 0 20px;
35
+ @include transform-origin(0 100%);
36
+ @include skew(0deg, -20deg);
37
+
38
+ &:after {
39
+ position:absolute;
40
+ content:"";
41
+ left:0;
42
+ right:2px;
43
+ top:0;
44
+ bottom:0;
45
+ background:#f5f2e8;
46
+ border-radius:3px 0 0 3px / 20px 0 0 20px;
47
+ border-width:3px 1px 2px 0px;
48
+ border-style:solid dotted solid solid;
49
+ border-color:#aaa #e0d7b9 #ccc #ccc;
50
+ }
51
+ }
52
+
53
+ .stack-cover {
54
+ position:absolute;
55
+ z-index:4;
56
+ height:2px;
57
+ border-width:1px;
58
+ border-style:solid;
59
+ border-right-width:2px;
60
+ top:-4px;
61
+ left:0;
62
+ right:5px;
63
+ border-radius:4px 0 0 50px;
64
+ @include transform-origin(0 100%);
65
+ @include skew(-70deg, 0deg);
66
+ }
@@ -0,0 +1,154 @@
1
+ /******************
2
+ HEATMAP
3
+
4
+ hottest = heat10
5
+ coldest = heat1
6
+ *******************/
7
+
8
+ .heat1 {
9
+ $bg: #ccebff;
10
+ $border: #adf;
11
+
12
+ a {
13
+ background-color:$bg;
14
+ background-image:asset-url("stackview/superGloss.png");
15
+ color:#222;
16
+ text-shadow:0 1px 0 #fff;
17
+ border-color:$border;
18
+
19
+ &:visited, &:hover, &:active {
20
+ color:#222;
21
+ }
22
+ }
23
+
24
+ @include decorations($bg, $border);
25
+ }
26
+
27
+ .heat2 {
28
+ $bg: #adf;
29
+ $border: #88cfff;
30
+
31
+ a {
32
+ background-color:$bg;
33
+ background-image:asset-url("stackview/superGloss.png");
34
+ color:#222;
35
+ text-shadow:0 1px 0 #ddf1ff;
36
+ border-color:$border;
37
+
38
+ &:visited, &:hover, &:active {
39
+ color:#222;
40
+ }
41
+ }
42
+
43
+ @include decorations($bg, $border);
44
+ }
45
+
46
+ .heat3 {
47
+ $bg: #77c9ff;
48
+ $border: #59b6ef;
49
+
50
+ a {
51
+ background-color:$bg;
52
+ background-image:asset-url("stackview/highGloss.png");
53
+ color:#111;
54
+ text-shadow:0 1px 0 #adf;
55
+ border-color:$border;
56
+
57
+ &:visited, &:hover, &:active {
58
+ color:#111;
59
+ }
60
+ }
61
+
62
+ @include decorations($bg, $border);
63
+ }
64
+
65
+ .heat4 {
66
+ $bg: #44b4ff;
67
+ $border: #11a0ff;
68
+
69
+ a {
70
+ background-color:$bg;
71
+ text-shadow:0 -1px 0 $border;
72
+ border-color:$border;
73
+ }
74
+
75
+ @include decorations($bg, $border);
76
+ }
77
+
78
+ .heat5 {
79
+ $bg: #22a7ff;
80
+ $border: #008fee;
81
+
82
+ a {
83
+ background-color:$bg;
84
+ text-shadow:0 -1px 0 $border;
85
+ border-color:$border;
86
+ }
87
+
88
+ @include decorations($bg, $border);
89
+ }
90
+
91
+ .heat6 {
92
+ $bg: #0099ff;
93
+ $border: #007acc;
94
+
95
+ a {
96
+ background-color:$bg;
97
+ text-shadow:0 -1px 0 #0085dd;
98
+ border-color:$border;
99
+ }
100
+
101
+ @include decorations($bg, $border);
102
+ }
103
+
104
+ .heat7 {
105
+ $bg: #0085dd;
106
+ $border: #06a;
107
+
108
+ a {
109
+ background-color:$bg;
110
+ text-shadow:0 -1px 0 #0070bb;
111
+ border-color:$border;
112
+ }
113
+
114
+ @include decorations($bg, $border);
115
+ }
116
+
117
+ .heat8 {
118
+ $bg: #0070bb;
119
+ $border: #004777;
120
+
121
+ a {
122
+ background-color:$bg;
123
+ text-shadow:0 -1px 0 #005c99;
124
+ border-color:$border;
125
+ }
126
+
127
+ @include decorations($bg, $border);
128
+ }
129
+
130
+ .heat9 {
131
+ $bg: #005c99;
132
+ $border: #002944;
133
+
134
+ a {
135
+ background-color:$bg;
136
+ text-shadow:0 -1px 0 #004777;
137
+ border-color:$border;
138
+ }
139
+
140
+ @include decorations($bg, $border);
141
+ }
142
+
143
+ .heat10 {
144
+ $bg: #004777;
145
+ $border: #001522;
146
+
147
+ a {
148
+ background-color:$bg;
149
+ text-shadow:0 -1px 0 #035;
150
+ border-color:$border;
151
+ }
152
+
153
+ @include decorations($bg, $border);
154
+ }
@@ -0,0 +1,43 @@
1
+ .stackview-mini {
2
+ .spine-text {
3
+ left:5px;
4
+ margin-top:-5px;
5
+ }
6
+
7
+ .spine-title {
8
+ font-size:11px;
9
+ }
10
+
11
+ .spine-author {
12
+ display:none;
13
+ }
14
+
15
+ .spine-year {
16
+ font-size:8px;
17
+ padding:0;
18
+ line-height:12px;
19
+ height:12px;
20
+ margin-top:-6px;
21
+ width:24px;
22
+ @include rotate(0deg)
23
+ }
24
+
25
+ .stack-items {
26
+ &:before, &:after {
27
+ width:106px;
28
+ height:57px;
29
+ background-size:contain;
30
+ }
31
+
32
+ &:after {
33
+ margin-top:-4px;
34
+ }
35
+ }
36
+
37
+ .ribbon {
38
+ top:20px;
39
+ padding:4px 5px 4px 14px;
40
+ min-height:20px;
41
+ font-size:16px;
42
+ }
43
+ }
@@ -0,0 +1,100 @@
1
+ @mixin rotate($deg) {
2
+ -webkit-transform:rotate($deg);
3
+ -moz-transform:rotate($deg);
4
+ -o-transform:rotate($deg);
5
+ -ms-transform:rotate($deg);
6
+ transform:rotate($deg);
7
+ }
8
+
9
+ @mixin transform-origin($val) {
10
+ -o-transform-origin:$val;
11
+ -ms-transform-origin:$val;
12
+ -moz-transform-origin:$val;
13
+ -webkit-transform-origin:$val;
14
+ transform-origin:$val;
15
+ }
16
+
17
+ @mixin skew($x, $y) {
18
+ -webkit-transform:skew($x, $y);
19
+ -moz-transform:skew($x, $y);
20
+ -o-transform:skew($x, $y);
21
+ -ms-transform:skew($x, $y);
22
+ transform:skew($x, $y);
23
+ }
24
+
25
+ @mixin user-select($val) {
26
+ -webkit-user-select:$val;
27
+ -moz-user-select:$val;
28
+ -ms-user-select:$val;
29
+ user-select:$val;
30
+ }
31
+
32
+ @mixin tap-highlight-color($val) {
33
+ -webkit-tap-highlight-color:$val;
34
+ -moz-tap-highlight-color:$val;
35
+ tap-highlight-color:$val;
36
+ }
37
+
38
+ @mixin book-decoration($bg, $border) {
39
+ .stack-pages {
40
+ border-color:$border;
41
+ }
42
+
43
+ .stack-cover {
44
+ border-color:$border;
45
+ background:$bg;
46
+ }
47
+ }
48
+
49
+ @mixin videofilm-decoration($bg, $border) {
50
+ .videofilm-cover {
51
+ background:$bg;
52
+ border-color:$border;
53
+ }
54
+ }
55
+
56
+ @mixin serial-decoration($bg, $border) {
57
+ .serial-edge {
58
+ background-color:$bg;
59
+ border-color:$border;
60
+ }
61
+
62
+ .serial-cover {
63
+ background:$bg;
64
+ border-color:$border;
65
+ }
66
+ }
67
+
68
+ @mixin sound-decoration($bg, $border) {
69
+ .sound-edge {
70
+ background-color:$bg;
71
+ }
72
+
73
+ .sound-cover {
74
+ background:$bg;
75
+ border-color:$border;
76
+ }
77
+ }
78
+
79
+ @mixin webpage-decoration($bg, $border) {
80
+ .webpage-top, .webpage-edge {
81
+ background:$bg;
82
+ border-color:$border;
83
+ }
84
+ }
85
+
86
+ @mixin generic-decoration($bg, $border) {
87
+ .item-colors {
88
+ background:$bg;
89
+ border-color:$border;
90
+ }
91
+ }
92
+
93
+ @mixin decorations($bg, $border) {
94
+ @include generic-decoration($bg, $border);
95
+ @include book-decoration($bg, $border);
96
+ @include videofilm-decoration($bg, $border);
97
+ @include serial-decoration($bg, $border);
98
+ @include sound-decoration($bg, $border);
99
+ @include webpage-decoration($bg, $border);
100
+ }
@@ -0,0 +1,52 @@
1
+ /**************
2
+ NAVIGATION
3
+ ***************/
4
+ .stack-navigation {
5
+ position:absolute;
6
+ left:5px;
7
+ top:5px;
8
+ width:41px;
9
+ text-align:center;
10
+
11
+ .upstream, .downstream {
12
+ height:43px;
13
+ text-indent:-999em;
14
+ overflow:hidden;
15
+ }
16
+
17
+ .upstream {
18
+ background:asset-url("stackview/nav.png") 0 -87px no-repeat;
19
+
20
+ &:hover, &:focus {
21
+ background-position:0 -44px;
22
+ }
23
+
24
+ &:active {
25
+ background-position:0 -1px;
26
+ }
27
+ }
28
+
29
+ .downstream {
30
+ background:asset-url("stackview/nav.png") 0 -130px no-repeat;
31
+
32
+ &:hover, &:focus {
33
+ background-position:0 -173px;
34
+ }
35
+
36
+ &:active {
37
+ background-position:0 -216px;
38
+ }
39
+ }
40
+
41
+ .num-found {
42
+ font-size:15px;
43
+ line-height:16px;
44
+ margin:10px 0;
45
+ color:#09f;
46
+ text-shadow: 0 1px 0 #ddd;
47
+ }
48
+
49
+ &.empty .num-found {
50
+ visibility:hidden;
51
+ }
52
+ }
@@ -0,0 +1,71 @@
1
+ .stack-plain {
2
+ > a {
3
+ position:relative;
4
+ border-radius:1px 0 1px 0;
5
+ border-width:1px;
6
+ border-style:solid;
7
+ padding:0 10px;
8
+ text-shadow:none;
9
+ background-image: none;
10
+
11
+ background-color: #ccd;
12
+ border-color: #bbb;
13
+
14
+ &:hover {
15
+ background-image: none;
16
+ }
17
+ }
18
+
19
+ .spine-text {
20
+ height:40px;
21
+ line-height:40px;
22
+ top:50%;
23
+ margin-top:-7px;
24
+ left:15px;
25
+ right:24px;
26
+ }
27
+
28
+ .spine-title {
29
+ font-family: monospace;
30
+ /*display: inline-block;
31
+ padding: 6px;
32
+ background: #f9fceb;
33
+ border-radius: 2px;
34
+ border-width: 0 1px;
35
+ border-style: dotted;
36
+ border-color: #e6dec4;*/
37
+ }
38
+
39
+ .spine-year {
40
+ @include rotate(-90deg);
41
+ }
42
+ }
43
+
44
+
45
+ .plain-top {
46
+ content:'';
47
+ display:block;
48
+ position:absolute;
49
+ top:-5px;
50
+ left:4px;
51
+ right:-5px;
52
+ height:3px;
53
+ border-width:1px;
54
+ border-style:solid;
55
+ @include skew(-70deg, 0);
56
+ border-radius:0 5px 0 5px;
57
+ z-index:2;
58
+ }
59
+
60
+ .plain-edge {
61
+ content:'';
62
+ display:block;
63
+ position:absolute;
64
+ top:-3px;
65
+ bottom:1px;
66
+ right:-8px;
67
+ width:6px;
68
+ @include skew(0, -20deg);
69
+ border-width:0 1px 1px 0;
70
+ border-style:solid;
71
+ }
@@ -0,0 +1,50 @@
1
+ .stack-serial {
2
+ width:343px;
3
+ height:39px;
4
+ margin:0;
5
+
6
+ > a {
7
+ border-radius:3px 0 0 3px;
8
+
9
+ &, &:hover, &:focus {
10
+ background-image:asset-url("stackview/serials.png");
11
+ }
12
+ }
13
+
14
+ .spine-text {
15
+ left:15px;
16
+ top:0;
17
+ bottom:0;
18
+ width:185px;
19
+ }
20
+
21
+ .spine-title {
22
+ height:39px;
23
+ line-height:39px;
24
+ font-size:12px;
25
+ }
26
+ }
27
+
28
+ .serial-edge {
29
+ position:absolute;
30
+ right:-17px;
31
+ bottom:0;
32
+ width:17px;
33
+ height:38px;
34
+ background:asset-url("stackview/serials-edge.png") 0 0 no-repeat;
35
+ border-width:2px 0;
36
+ @include transform-origin(0 100%);
37
+ @include skew(0deg, -20deg);
38
+ }
39
+
40
+ .serial-cover {
41
+ position:absolute;
42
+ top:-5px;
43
+ left:0;
44
+ right:-2px;
45
+ height:3px;
46
+ border-width:1px;
47
+ border-style:solid;
48
+ @include transform-origin(0 100%);
49
+ @include skew(-70deg, 0);
50
+ }
@@ -0,0 +1,83 @@
1
+ .stack-soundrecording {
2
+ height:25px;
3
+ width:280px;
4
+ margin:0 0 1px 0;
5
+
6
+ &:before {
7
+ content:asset-url("stackview/icon-note.png");
8
+ position:absolute;
9
+ left:10px;
10
+ top:4px;
11
+ }
12
+
13
+ > a {
14
+ border-width:1px;
15
+ border-style:solid;
16
+ border-left:3px solid rgba(225, 225, 225, 0.6);
17
+ border-right:3px solid rgba(225, 225, 225, 0.6);
18
+ }
19
+
20
+ .spine-text {
21
+ left:35px;
22
+ right: 35px;
23
+ }
24
+
25
+ .spine-title {
26
+ height:25px;
27
+ line-height:25px;
28
+ font-size:12px;
29
+ }
30
+
31
+ .spine-year {
32
+ right:7px;
33
+ }
34
+ }
35
+
36
+ .sound-edge {
37
+ position:absolute;
38
+ top:0;
39
+ bottom:-2px;
40
+ left:100%;
41
+ width:5px;
42
+ border:2px solid rgba(225, 225, 225, 0.6);
43
+ border-radius:0 2px 2px 0;
44
+ @include transform-origin(0 100%);
45
+ @include skew(0, -20deg);
46
+
47
+ &:before {
48
+ position:absolute;
49
+ top:0;
50
+ bottom:0;
51
+ left:1px;
52
+ display: block;
53
+ content:"";
54
+ z-index:5;
55
+ width: 1px;
56
+ background:rgba(250, 250, 250, 0.5);
57
+ }
58
+
59
+ &:after {
60
+ position:absolute;
61
+ top:0;
62
+ bottom:0;
63
+ left:3px;
64
+ display: block;
65
+ content:"";
66
+ z-index:5;
67
+ width: 1px;
68
+ background:rgba(250, 250, 250, 0.5);
69
+ }
70
+ }
71
+
72
+ .sound-cover {
73
+ position:absolute;
74
+ top:-3px;
75
+ left:0;
76
+ right:-1px;
77
+ height:1px;
78
+ border-width:1px;
79
+ border-style:solid;
80
+ border-radius:4px;
81
+ @include transform-origin(0 100%);
82
+ @include skew(-70deg, 0);
83
+ }
@@ -0,0 +1,74 @@
1
+ .stack-videofilm {
2
+ height:28px;
3
+ margin:0 0 1px 0;
4
+
5
+ > a {
6
+ border-left:4px solid #444;
7
+ border-right:4px solid #444;
8
+ border-top-width:1px;
9
+ border-bottom-width:1px;
10
+ border-style:solid;
11
+ }
12
+
13
+ .spine-text {
14
+ left:15px;
15
+ top:0;
16
+ bottom:0;
17
+ right:24px;
18
+ font-size:12px;
19
+ font-weight:bold;
20
+ }
21
+
22
+ .spine-title {
23
+ height:28px;
24
+ line-height:28px;
25
+ }
26
+
27
+ .spine-year {
28
+ @include rotate(-90deg);
29
+ width:24px;
30
+ height:12px;
31
+ line-height:12px;
32
+ font-size:9px;
33
+ text-align:center;
34
+ margin-top:-6px;
35
+ }
36
+ }
37
+
38
+ .videofilm-edge {
39
+ position:absolute;
40
+ display:block;
41
+ z-index:2;
42
+ left:100%;
43
+ top:0;
44
+ bottom:-2px;
45
+ width:7px;
46
+ background:#444;
47
+ @include transform-origin(0 100%);
48
+ @include skew(0deg, -20deg);
49
+ border-radius:0 2px 2px 0;
50
+
51
+ &:after {
52
+ content:'';
53
+ position:absolute;
54
+ top:50%;
55
+ right:0;
56
+ left:0;
57
+ height:1px;
58
+ background:#000;
59
+ border-top:1px solid #ccc;
60
+ }
61
+ }
62
+
63
+ .videofilm-cover {
64
+ position:absolute;
65
+ top:-4px;
66
+ height:2px;
67
+ left:0;
68
+ right:0;
69
+ border-style:solid;
70
+ border-width:1px;
71
+ border-radius:4px 4px 0 0;
72
+ @include transform-origin(0 100%);
73
+ @include skew(-70deg, 0deg);
74
+ }