3d-ribbon 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +230 -0
- data/lib/3d-ribbon.rb +3 -0
- data/stylesheets/_3d-ribbon.scss +250 -0
- data/templates/project/3d-ribbon-examples.html +231 -0
- data/templates/project/3d-ribbon-examples.scss +137 -0
- data/templates/project/manifest.rb +14 -0
- data/templates/project/stylesheets/3d-ribbon-examples.css +975 -0
- metadata +87 -0
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>3D CSS Ribbons</title>
|
|
5
|
+
<link href="stylesheets/3d-ribbon-examples.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<div id="content">
|
|
10
|
+
|
|
11
|
+
<!--Welcome!
|
|
12
|
+
This is the basic structure to create a ribbon with two sides (left / right)-->
|
|
13
|
+
|
|
14
|
+
<!--start ribbon
|
|
15
|
+
<div class="ribbon-wrapper">
|
|
16
|
+
<div class="ribbon-front">
|
|
17
|
+
|
|
18
|
+
Here you can put some content (like "Lorem ipsum dolor sit amet...") or HTML elements
|
|
19
|
+
|
|
20
|
+
</div>
|
|
21
|
+
<div class="ribbon-edge-left-top"></div>
|
|
22
|
+
<div class="ribbon-edge-right-top"></div>
|
|
23
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
24
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
25
|
+
<div class="ribbon-back-left"></div>
|
|
26
|
+
<div class="ribbon-back-right"></div>
|
|
27
|
+
</div>
|
|
28
|
+
end ribbon -->
|
|
29
|
+
|
|
30
|
+
<!--
|
|
31
|
+
If you need only one side in the ribbon, you can remove some <div />. For example, if you need a ribbon with only the right side,
|
|
32
|
+
you can remove <div class="ribbon-edge-left-top"></div>, <div class="ribbon-edge-left-bottom"></div>
|
|
33
|
+
and <div class="ribbon-back-left"></div>:
|
|
34
|
+
-->
|
|
35
|
+
|
|
36
|
+
<!-- Start ribbon with one side (right)
|
|
37
|
+
<div class="ribbon-wrapper">
|
|
38
|
+
<div class="ribbon-front">
|
|
39
|
+
|
|
40
|
+
Here you can put some content (like "Lorem ipsum dolor sit amet...") or HTML elements
|
|
41
|
+
|
|
42
|
+
</div>
|
|
43
|
+
<div class="ribbon-edge-right-top"></div>
|
|
44
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
45
|
+
<div class="ribbon-back-right"></div>
|
|
46
|
+
</div>
|
|
47
|
+
end ribbon -->
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<!--Some examples (open this document to view the final result): -->
|
|
53
|
+
|
|
54
|
+
<!-- Example 1 -->
|
|
55
|
+
<div id="ribbon-example-1">
|
|
56
|
+
|
|
57
|
+
<div class="ribbon-wrapper">
|
|
58
|
+
<div class="ribbon-front">
|
|
59
|
+
<h2>
|
|
60
|
+
Default options
|
|
61
|
+
</h2>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="ribbon-edge-left-top"></div>
|
|
64
|
+
<div class="ribbon-edge-right-top"></div>
|
|
65
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
66
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
67
|
+
<div class="ribbon-back-left"></div>
|
|
68
|
+
<div class="ribbon-back-right"></div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<!-- Example 2 -->
|
|
74
|
+
<div id="ribbon-example-2">
|
|
75
|
+
|
|
76
|
+
<div class="ribbon-wrapper">
|
|
77
|
+
<div class="ribbon-front">
|
|
78
|
+
<h2>
|
|
79
|
+
With left-top & right-bottom
|
|
80
|
+
</h2>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="ribbon-edge-left-top"></div>
|
|
83
|
+
<div class="ribbon-edge-right-top"></div>
|
|
84
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
85
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
86
|
+
<div class="ribbon-back-left"></div>
|
|
87
|
+
<div class="ribbon-back-right"></div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- Example 3 -->
|
|
93
|
+
<div id="ribbon-example-3">
|
|
94
|
+
|
|
95
|
+
<div class="ribbon-wrapper">
|
|
96
|
+
<div class="ribbon-front">
|
|
97
|
+
<h2>
|
|
98
|
+
or the color & height of the ribbon...
|
|
99
|
+
</h2>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="ribbon-edge-left-top"></div>
|
|
102
|
+
<div class="ribbon-edge-right-top"></div>
|
|
103
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
104
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
105
|
+
<div class="ribbon-back-left"></div>
|
|
106
|
+
<div class="ribbon-back-right"></div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Example 4 -->
|
|
112
|
+
<div id="ribbon-example-4">
|
|
113
|
+
|
|
114
|
+
<div class="ribbon-wrapper">
|
|
115
|
+
<div class="ribbon-front">
|
|
116
|
+
<h2>
|
|
117
|
+
or the color of the edges & back part...
|
|
118
|
+
</h2>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="ribbon-edge-left-top"></div>
|
|
121
|
+
<div class="ribbon-edge-right-top"></div>
|
|
122
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
123
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
124
|
+
<div class="ribbon-back-left"></div>
|
|
125
|
+
<div class="ribbon-back-right"></div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<!-- Example 5 -->
|
|
131
|
+
<div id="ribbon-example-5">
|
|
132
|
+
|
|
133
|
+
<div class="ribbon-wrapper">
|
|
134
|
+
<div class="ribbon-front">
|
|
135
|
+
<h2>
|
|
136
|
+
or the width/height of the back part & overlap...
|
|
137
|
+
</h2>
|
|
138
|
+
</div>
|
|
139
|
+
<div class="ribbon-edge-left-top"></div>
|
|
140
|
+
<div class="ribbon-edge-right-top"></div>
|
|
141
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
142
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
143
|
+
<div class="ribbon-back-left"></div>
|
|
144
|
+
<div class="ribbon-back-right"></div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Example 6 -->
|
|
150
|
+
<div id="ribbon-example-6">
|
|
151
|
+
|
|
152
|
+
<div class="ribbon-wrapper">
|
|
153
|
+
<div class="ribbon-front">
|
|
154
|
+
<h2>
|
|
155
|
+
or you can hide the back part...
|
|
156
|
+
</h2>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="ribbon-edge-left-top"></div>
|
|
159
|
+
<div class="ribbon-edge-right-top"></div>
|
|
160
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
161
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
162
|
+
<div class="ribbon-back-left"></div>
|
|
163
|
+
<div class="ribbon-back-right"></div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<!-- Example 7 -->
|
|
169
|
+
<div id="ribbon-example-7">
|
|
170
|
+
|
|
171
|
+
<div class="ribbon-wrapper">
|
|
172
|
+
<div class="ribbon-front">
|
|
173
|
+
<h2>
|
|
174
|
+
or add some border-radius...
|
|
175
|
+
</h2>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="ribbon-edge-left-top"></div>
|
|
178
|
+
<div class="ribbon-edge-right-top"></div>
|
|
179
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
180
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
181
|
+
<div class="ribbon-back-left"></div>
|
|
182
|
+
<div class="ribbon-back-right"></div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<!-- Example 8 -->
|
|
188
|
+
<div id="ribbon-example-8">
|
|
189
|
+
|
|
190
|
+
<div class="ribbon-wrapper">
|
|
191
|
+
<div class="ribbon-front">
|
|
192
|
+
<h2>
|
|
193
|
+
or all options! (in this case with only one side)
|
|
194
|
+
</h2>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="ribbon-edge-left-top"></div>
|
|
197
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
198
|
+
<div class="ribbon-back-left"></div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<!-- Example 9 -->
|
|
204
|
+
<div id="ribbon-example-9">
|
|
205
|
+
|
|
206
|
+
<div class="ribbon-wrapper">
|
|
207
|
+
<div class="ribbon-front">
|
|
208
|
+
<h2>
|
|
209
|
+
Some nice example
|
|
210
|
+
</h2>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="ribbon-edge-left-top"></div>
|
|
213
|
+
<div class="ribbon-edge-right-top"></div>
|
|
214
|
+
<div class="ribbon-edge-left-bottom"></div>
|
|
215
|
+
<div class="ribbon-edge-right-bottom"></div>
|
|
216
|
+
<div class="ribbon-back-left"></div>
|
|
217
|
+
<div class="ribbon-back-right"></div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div id="example-9-content">
|
|
221
|
+
|
|
222
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
|
|
223
|
+
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
</body>
|
|
231
|
+
</html>
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
// Welcome!
|
|
2
|
+
//** 3D CSS Ribbon **//
|
|
3
|
+
|
|
4
|
+
// Imports ------------------------------------------------------------------
|
|
5
|
+
@import "compass/reset";
|
|
6
|
+
@import "compass/css3/text-shadow";
|
|
7
|
+
|
|
8
|
+
//First, remember import the extension!
|
|
9
|
+
@import "3d-ribbon";
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
/* Ribbons --------------------------------------------------------------*/
|
|
13
|
+
// Based on the 3d-ribbon-examples.html template provided:
|
|
14
|
+
|
|
15
|
+
#ribbon-example-1{
|
|
16
|
+
//One ribbon with the default options (only need the width of the ribbon content, in px)
|
|
17
|
+
@include ribbon($front-width: 400px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#ribbon-example-2{
|
|
21
|
+
//You can configure the sides of the ribbon (left / right) and position (top / bottom). Options availables: left-top, left-bottom, right-top, right-bottom
|
|
22
|
+
@include ribbon($front-width: 450px, $sides: left-top right-bottom); //Asimetric ribbon!
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#ribbon-example-3{
|
|
26
|
+
//You can configure the height (in px) & color of the ribbon...
|
|
27
|
+
@include ribbon($front-width: 550px, $ribbon-height: 40px, $front-color: #8C46C3);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
#ribbon-example-4{
|
|
31
|
+
//You can also configure the color of the edges and back sides of the ribbon...
|
|
32
|
+
@include ribbon($front-width: 600px, $front-color: #8C46C3, $edges-color: darken(#9F4BBA, 10%), $back-color: #B952AE);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
#ribbon-example-5{
|
|
36
|
+
//Other options like the width of the back part or the overlap width/height:
|
|
37
|
+
@include ribbon($front-width: 650px, $back-width: 20px, $overlap-width: 25px, $overlap-height: 10px);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
#ribbon-example-6{
|
|
41
|
+
//You can hide the back part...
|
|
42
|
+
@include ribbon($front-width: 650px, $back-width: 0);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#ribbon-example-7{
|
|
46
|
+
//Or set some border-radius...
|
|
47
|
+
@include ribbon($front-width: 700px, $border-radius: 5px);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#ribbon-example-8{
|
|
51
|
+
//All options in one ribbon!
|
|
52
|
+
@include ribbon(
|
|
53
|
+
$front-width: 750px,
|
|
54
|
+
$sides: left-bottom,
|
|
55
|
+
$ribbon-height: 40px,
|
|
56
|
+
$front-color: #80B5AD,
|
|
57
|
+
$edges-color: darken(#8ABD9A, 30%),
|
|
58
|
+
$back-color: #8DBF96,
|
|
59
|
+
$back-width: 30px,
|
|
60
|
+
$overlap-width: 35px,
|
|
61
|
+
$overlap-height: 15px,
|
|
62
|
+
$border-radius: 7px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
//One more thing...
|
|
67
|
+
//Support for CSS3 PIE (AKA: border-radius, box-shadow and others CSS3 styles for IE8/7/6)
|
|
68
|
+
//More info: http://compass-style.org/reference/compass/css3/pie/
|
|
69
|
+
//First, remember set $pie-behavior with the path of the PIE.htc and deliver the file with the mime-type "Content-Type: text/x-component" (more info: http://css3pie.com/documentation/known-issues/#content-type).
|
|
70
|
+
//Then just set $include-pie : true in the @include:
|
|
71
|
+
|
|
72
|
+
//#ribbon-example{
|
|
73
|
+
//@include ribbon($front-width: 400px, $include-pie: true);
|
|
74
|
+
//}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
/* Other styles for the demo --------------------------------------------------------------*/
|
|
80
|
+
|
|
81
|
+
body{
|
|
82
|
+
background: #F8F8F8;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
#content{
|
|
86
|
+
margin: 20px auto;
|
|
87
|
+
text-align: center;
|
|
88
|
+
width: 750px;
|
|
89
|
+
color: #FFF;
|
|
90
|
+
font-family: sans-serif;
|
|
91
|
+
|
|
92
|
+
h2{
|
|
93
|
+
font: {
|
|
94
|
+
size: 28px;
|
|
95
|
+
}
|
|
96
|
+
line-height: 40px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
#ribbon-example-1, #ribbon-example-2, #ribbon-example-3, #ribbon-example-4, #ribbon-example-5, #ribbon-example-6, #ribbon-example-7, #ribbon-example-8, #ribbon-example-9{
|
|
102
|
+
margin: 80px 0;
|
|
103
|
+
|
|
104
|
+
.ribbon-wrapper{
|
|
105
|
+
margin: 0 auto;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
//Some nice example
|
|
111
|
+
#ribbon-example-9{
|
|
112
|
+
@include ribbon(
|
|
113
|
+
$front-width: 300px,
|
|
114
|
+
$front-color: #CB261B,
|
|
115
|
+
$border-radius: 10px);
|
|
116
|
+
|
|
117
|
+
h2{
|
|
118
|
+
font: {
|
|
119
|
+
style: italyc;
|
|
120
|
+
family: Georgia, Verdana,sans-serif;
|
|
121
|
+
}
|
|
122
|
+
@include text-shadow(rgba(blue, 0.2) 1px 1px 0, rgba(blue, 0.2) 2px 2px 0, rgba(blue, 0.2) 3px 3px 0);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
#example-9-content{
|
|
127
|
+
padding: 80px 20px 20px 20px;
|
|
128
|
+
width: 260px; //Note: 260px + 20px (padding-right) + 20px (padding-left): 300px (the same width of the ribbon :D)
|
|
129
|
+
position: relative;
|
|
130
|
+
top: -80px;
|
|
131
|
+
background: #E7E7E7;
|
|
132
|
+
color: #000;
|
|
133
|
+
line-height: 1.2;
|
|
134
|
+
@include border-radius(15px);
|
|
135
|
+
@include box-shadow(rgba(0, 0, 0, 0.5) 0px 0px 4px);
|
|
136
|
+
margin: 0 auto;
|
|
137
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
discover :all
|
|
2
|
+
|
|
3
|
+
description "Ribbons 3D using only CSS"
|
|
4
|
+
|
|
5
|
+
help %Q{
|
|
6
|
+
Installs some html, a stylesheet partial that
|
|
7
|
+
you can use directly or refer to as an example.
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
welcome_message %Q{
|
|
11
|
+
Please refer to the 3d-ribbon-examples.html file to see how the markup should be
|
|
12
|
+
structured and the 3d-ribbon-examples.scss file to see how to use the extension and
|
|
13
|
+
apply it to your markup.
|
|
14
|
+
}
|
|
@@ -0,0 +1,975 @@
|
|
|
1
|
+
/* line 17, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
2
|
+
html, body, div, span, applet, object, iframe,
|
|
3
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
4
|
+
a, abbr, acronym, address, big, cite, code,
|
|
5
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
6
|
+
small, strike, strong, sub, sup, tt, var,
|
|
7
|
+
b, u, i, center,
|
|
8
|
+
dl, dt, dd, ol, ul, li,
|
|
9
|
+
fieldset, form, label, legend,
|
|
10
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
11
|
+
article, aside, canvas, details, embed,
|
|
12
|
+
figure, figcaption, footer, header, hgroup,
|
|
13
|
+
menu, nav, output, ruby, section, summary,
|
|
14
|
+
time, mark, audio, video {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
border: 0;
|
|
18
|
+
font-size: 100%;
|
|
19
|
+
font: inherit;
|
|
20
|
+
vertical-align: baseline;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* line 20, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
24
|
+
body {
|
|
25
|
+
line-height: 1;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* line 22, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
29
|
+
ol, ul {
|
|
30
|
+
list-style: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* line 24, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
34
|
+
table {
|
|
35
|
+
border-collapse: collapse;
|
|
36
|
+
border-spacing: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* line 26, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
40
|
+
caption, th, td {
|
|
41
|
+
text-align: left;
|
|
42
|
+
font-weight: normal;
|
|
43
|
+
vertical-align: middle;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* line 28, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
47
|
+
q, blockquote {
|
|
48
|
+
quotes: none;
|
|
49
|
+
}
|
|
50
|
+
/* line 101, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
51
|
+
q:before, q:after, blockquote:before, blockquote:after {
|
|
52
|
+
content: "";
|
|
53
|
+
content: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* line 30, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
57
|
+
a img {
|
|
58
|
+
border: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* line 115, ../../../../../.gem/ruby/1.8/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
|
62
|
+
article, aside, details, figcaption, figure,
|
|
63
|
+
footer, header, hgroup, menu, nav, section {
|
|
64
|
+
display: block;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Ribbons --------------------------------------------------------------*/
|
|
68
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
69
|
+
#ribbon-example-1 div.ribbon-wrapper {
|
|
70
|
+
height: 60px;
|
|
71
|
+
width: 400px;
|
|
72
|
+
position: relative;
|
|
73
|
+
z-index: 3;
|
|
74
|
+
background-position: 0 40px;
|
|
75
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
76
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
77
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
78
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
79
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
80
|
+
}
|
|
81
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
82
|
+
#ribbon-example-1 div.ribbon-front {
|
|
83
|
+
width: 460px;
|
|
84
|
+
height: 40px;
|
|
85
|
+
background-color: #3a89ce;
|
|
86
|
+
position: relative;
|
|
87
|
+
z-index: 2;
|
|
88
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
89
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
90
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
91
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
92
|
+
left: -30px;
|
|
93
|
+
}
|
|
94
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
95
|
+
#ribbon-example-1 div.ribbon-edge-left-top,
|
|
96
|
+
#ribbon-example-1 div.ribbon-edge-left-bottom {
|
|
97
|
+
height: 0;
|
|
98
|
+
width: 0;
|
|
99
|
+
position: absolute;
|
|
100
|
+
z-index: 1;
|
|
101
|
+
left: -30px;
|
|
102
|
+
border-style: solid;
|
|
103
|
+
}
|
|
104
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
105
|
+
#ribbon-example-1 div.ribbon-back-left {
|
|
106
|
+
width: 40px;
|
|
107
|
+
height: 40px;
|
|
108
|
+
position: absolute;
|
|
109
|
+
z-index: 0;
|
|
110
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
111
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
112
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
113
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
114
|
+
background-color: #3a89ce;
|
|
115
|
+
left: -40px;
|
|
116
|
+
}
|
|
117
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
118
|
+
#ribbon-example-1 div.ribbon-edge-right-top,
|
|
119
|
+
#ribbon-example-1 div.ribbon-edge-right-bottom {
|
|
120
|
+
height: 0;
|
|
121
|
+
width: 0;
|
|
122
|
+
position: absolute;
|
|
123
|
+
z-index: 1;
|
|
124
|
+
right: -30px;
|
|
125
|
+
border-style: solid;
|
|
126
|
+
}
|
|
127
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
128
|
+
#ribbon-example-1 div.ribbon-back-right {
|
|
129
|
+
width: 40px;
|
|
130
|
+
height: 40px;
|
|
131
|
+
position: absolute;
|
|
132
|
+
z-index: 0;
|
|
133
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
134
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
135
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
136
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
137
|
+
background-color: #3a89ce;
|
|
138
|
+
right: -40px;
|
|
139
|
+
}
|
|
140
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
141
|
+
#ribbon-example-1 div.ribbon-edge-left-bottom {
|
|
142
|
+
top: 40px;
|
|
143
|
+
border-width: 0 30px 20px 0;
|
|
144
|
+
border-color: transparent #163a59 transparent transparent;
|
|
145
|
+
}
|
|
146
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
147
|
+
#ribbon-example-1 div.ribbon-back-left {
|
|
148
|
+
top: 20px;
|
|
149
|
+
}
|
|
150
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
151
|
+
#ribbon-example-1 div.ribbon-edge-right-bottom {
|
|
152
|
+
top: 40px;
|
|
153
|
+
border-width: 20px 30px 0 0;
|
|
154
|
+
border-color: #163a59 transparent transparent transparent;
|
|
155
|
+
}
|
|
156
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
157
|
+
#ribbon-example-1 div.ribbon-back-right {
|
|
158
|
+
top: 20px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
162
|
+
#ribbon-example-2 div.ribbon-wrapper {
|
|
163
|
+
height: 60px;
|
|
164
|
+
width: 450px;
|
|
165
|
+
position: relative;
|
|
166
|
+
z-index: 3;
|
|
167
|
+
}
|
|
168
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
169
|
+
#ribbon-example-2 div.ribbon-front {
|
|
170
|
+
width: 510px;
|
|
171
|
+
height: 40px;
|
|
172
|
+
background-color: #3a89ce;
|
|
173
|
+
position: relative;
|
|
174
|
+
z-index: 2;
|
|
175
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
176
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
177
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
178
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
179
|
+
left: -30px;
|
|
180
|
+
}
|
|
181
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
182
|
+
#ribbon-example-2 div.ribbon-edge-left-top,
|
|
183
|
+
#ribbon-example-2 div.ribbon-edge-left-bottom {
|
|
184
|
+
height: 0;
|
|
185
|
+
width: 0;
|
|
186
|
+
position: absolute;
|
|
187
|
+
z-index: 1;
|
|
188
|
+
left: -30px;
|
|
189
|
+
border-style: solid;
|
|
190
|
+
}
|
|
191
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
192
|
+
#ribbon-example-2 div.ribbon-back-left {
|
|
193
|
+
width: 40px;
|
|
194
|
+
height: 40px;
|
|
195
|
+
position: absolute;
|
|
196
|
+
z-index: 0;
|
|
197
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
198
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
199
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
200
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
201
|
+
background-color: #3a89ce;
|
|
202
|
+
left: -40px;
|
|
203
|
+
}
|
|
204
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
205
|
+
#ribbon-example-2 div.ribbon-edge-right-top,
|
|
206
|
+
#ribbon-example-2 div.ribbon-edge-right-bottom {
|
|
207
|
+
height: 0;
|
|
208
|
+
width: 0;
|
|
209
|
+
position: absolute;
|
|
210
|
+
z-index: 1;
|
|
211
|
+
right: -30px;
|
|
212
|
+
border-style: solid;
|
|
213
|
+
}
|
|
214
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
215
|
+
#ribbon-example-2 div.ribbon-back-right {
|
|
216
|
+
width: 40px;
|
|
217
|
+
height: 40px;
|
|
218
|
+
position: absolute;
|
|
219
|
+
z-index: 0;
|
|
220
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
221
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
222
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
223
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
224
|
+
background-color: #3a89ce;
|
|
225
|
+
right: -40px;
|
|
226
|
+
}
|
|
227
|
+
/* line 151, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
228
|
+
#ribbon-example-2 div.ribbon-edge-left-top {
|
|
229
|
+
bottom: 60px;
|
|
230
|
+
border-width: 20px 30px 0 0;
|
|
231
|
+
border-color: transparent #163a59 transparent transparent;
|
|
232
|
+
}
|
|
233
|
+
/* line 157, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
234
|
+
#ribbon-example-2 div.ribbon-back-left {
|
|
235
|
+
top: -20px;
|
|
236
|
+
}
|
|
237
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
238
|
+
#ribbon-example-2 div.ribbon-edge-right-bottom {
|
|
239
|
+
top: 40px;
|
|
240
|
+
border-width: 20px 30px 0 0;
|
|
241
|
+
border-color: #163a59 transparent transparent transparent;
|
|
242
|
+
}
|
|
243
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
244
|
+
#ribbon-example-2 div.ribbon-back-right {
|
|
245
|
+
top: 20px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
249
|
+
#ribbon-example-3 div.ribbon-wrapper {
|
|
250
|
+
height: 60px;
|
|
251
|
+
width: 550px;
|
|
252
|
+
position: relative;
|
|
253
|
+
z-index: 3;
|
|
254
|
+
background-position: 0 40px;
|
|
255
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
256
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
257
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
258
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
259
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
260
|
+
}
|
|
261
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
262
|
+
#ribbon-example-3 div.ribbon-front {
|
|
263
|
+
width: 610px;
|
|
264
|
+
height: 40px;
|
|
265
|
+
background-color: #8c46c3;
|
|
266
|
+
position: relative;
|
|
267
|
+
z-index: 2;
|
|
268
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
269
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
270
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
271
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
272
|
+
left: -30px;
|
|
273
|
+
}
|
|
274
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
275
|
+
#ribbon-example-3 div.ribbon-edge-left-top,
|
|
276
|
+
#ribbon-example-3 div.ribbon-edge-left-bottom {
|
|
277
|
+
height: 0;
|
|
278
|
+
width: 0;
|
|
279
|
+
position: absolute;
|
|
280
|
+
z-index: 1;
|
|
281
|
+
left: -30px;
|
|
282
|
+
border-style: solid;
|
|
283
|
+
}
|
|
284
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
285
|
+
#ribbon-example-3 div.ribbon-back-left {
|
|
286
|
+
width: 40px;
|
|
287
|
+
height: 40px;
|
|
288
|
+
position: absolute;
|
|
289
|
+
z-index: 0;
|
|
290
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
291
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
292
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
293
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
294
|
+
background-color: #8c46c3;
|
|
295
|
+
left: -40px;
|
|
296
|
+
}
|
|
297
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
298
|
+
#ribbon-example-3 div.ribbon-edge-right-top,
|
|
299
|
+
#ribbon-example-3 div.ribbon-edge-right-bottom {
|
|
300
|
+
height: 0;
|
|
301
|
+
width: 0;
|
|
302
|
+
position: absolute;
|
|
303
|
+
z-index: 1;
|
|
304
|
+
right: -30px;
|
|
305
|
+
border-style: solid;
|
|
306
|
+
}
|
|
307
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
308
|
+
#ribbon-example-3 div.ribbon-back-right {
|
|
309
|
+
width: 40px;
|
|
310
|
+
height: 40px;
|
|
311
|
+
position: absolute;
|
|
312
|
+
z-index: 0;
|
|
313
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
314
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
315
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
316
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
317
|
+
background-color: #8c46c3;
|
|
318
|
+
right: -40px;
|
|
319
|
+
}
|
|
320
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
321
|
+
#ribbon-example-3 div.ribbon-edge-left-bottom {
|
|
322
|
+
top: 40px;
|
|
323
|
+
border-width: 0 30px 20px 0;
|
|
324
|
+
border-color: transparent #3b1b55 transparent transparent;
|
|
325
|
+
}
|
|
326
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
327
|
+
#ribbon-example-3 div.ribbon-back-left {
|
|
328
|
+
top: 20px;
|
|
329
|
+
}
|
|
330
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
331
|
+
#ribbon-example-3 div.ribbon-edge-right-bottom {
|
|
332
|
+
top: 40px;
|
|
333
|
+
border-width: 20px 30px 0 0;
|
|
334
|
+
border-color: #3b1b55 transparent transparent transparent;
|
|
335
|
+
}
|
|
336
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
337
|
+
#ribbon-example-3 div.ribbon-back-right {
|
|
338
|
+
top: 20px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
342
|
+
#ribbon-example-4 div.ribbon-wrapper {
|
|
343
|
+
height: 60px;
|
|
344
|
+
width: 600px;
|
|
345
|
+
position: relative;
|
|
346
|
+
z-index: 3;
|
|
347
|
+
background-position: 0 40px;
|
|
348
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
349
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
350
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
351
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
352
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
353
|
+
}
|
|
354
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
355
|
+
#ribbon-example-4 div.ribbon-front {
|
|
356
|
+
width: 660px;
|
|
357
|
+
height: 40px;
|
|
358
|
+
background-color: #8c46c3;
|
|
359
|
+
position: relative;
|
|
360
|
+
z-index: 2;
|
|
361
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
362
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
363
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
364
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
365
|
+
left: -30px;
|
|
366
|
+
}
|
|
367
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
368
|
+
#ribbon-example-4 div.ribbon-edge-left-top,
|
|
369
|
+
#ribbon-example-4 div.ribbon-edge-left-bottom {
|
|
370
|
+
height: 0;
|
|
371
|
+
width: 0;
|
|
372
|
+
position: absolute;
|
|
373
|
+
z-index: 1;
|
|
374
|
+
left: -30px;
|
|
375
|
+
border-style: solid;
|
|
376
|
+
}
|
|
377
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
378
|
+
#ribbon-example-4 div.ribbon-back-left {
|
|
379
|
+
width: 40px;
|
|
380
|
+
height: 40px;
|
|
381
|
+
position: absolute;
|
|
382
|
+
z-index: 0;
|
|
383
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
384
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
385
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
386
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
387
|
+
background-color: #b952ae;
|
|
388
|
+
left: -40px;
|
|
389
|
+
}
|
|
390
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
391
|
+
#ribbon-example-4 div.ribbon-edge-right-top,
|
|
392
|
+
#ribbon-example-4 div.ribbon-edge-right-bottom {
|
|
393
|
+
height: 0;
|
|
394
|
+
width: 0;
|
|
395
|
+
position: absolute;
|
|
396
|
+
z-index: 1;
|
|
397
|
+
right: -30px;
|
|
398
|
+
border-style: solid;
|
|
399
|
+
}
|
|
400
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
401
|
+
#ribbon-example-4 div.ribbon-back-right {
|
|
402
|
+
width: 40px;
|
|
403
|
+
height: 40px;
|
|
404
|
+
position: absolute;
|
|
405
|
+
z-index: 0;
|
|
406
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
407
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
408
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
409
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
410
|
+
background-color: #b952ae;
|
|
411
|
+
right: -40px;
|
|
412
|
+
}
|
|
413
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
414
|
+
#ribbon-example-4 div.ribbon-edge-left-bottom {
|
|
415
|
+
top: 40px;
|
|
416
|
+
border-width: 0 30px 20px 0;
|
|
417
|
+
border-color: transparent #813a98 transparent transparent;
|
|
418
|
+
}
|
|
419
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
420
|
+
#ribbon-example-4 div.ribbon-back-left {
|
|
421
|
+
top: 20px;
|
|
422
|
+
}
|
|
423
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
424
|
+
#ribbon-example-4 div.ribbon-edge-right-bottom {
|
|
425
|
+
top: 40px;
|
|
426
|
+
border-width: 20px 30px 0 0;
|
|
427
|
+
border-color: #813a98 transparent transparent transparent;
|
|
428
|
+
}
|
|
429
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
430
|
+
#ribbon-example-4 div.ribbon-back-right {
|
|
431
|
+
top: 20px;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
435
|
+
#ribbon-example-5 div.ribbon-wrapper {
|
|
436
|
+
height: 50px;
|
|
437
|
+
width: 650px;
|
|
438
|
+
position: relative;
|
|
439
|
+
z-index: 3;
|
|
440
|
+
background-position: 0 40px;
|
|
441
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 10, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
442
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 10px);
|
|
443
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 10px);
|
|
444
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 10px);
|
|
445
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 10px);
|
|
446
|
+
}
|
|
447
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
448
|
+
#ribbon-example-5 div.ribbon-front {
|
|
449
|
+
width: 700px;
|
|
450
|
+
height: 40px;
|
|
451
|
+
background-color: #3a89ce;
|
|
452
|
+
position: relative;
|
|
453
|
+
z-index: 2;
|
|
454
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
455
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
456
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
457
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
458
|
+
left: -25px;
|
|
459
|
+
}
|
|
460
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
461
|
+
#ribbon-example-5 div.ribbon-edge-left-top,
|
|
462
|
+
#ribbon-example-5 div.ribbon-edge-left-bottom {
|
|
463
|
+
height: 0;
|
|
464
|
+
width: 0;
|
|
465
|
+
position: absolute;
|
|
466
|
+
z-index: 1;
|
|
467
|
+
left: -25px;
|
|
468
|
+
border-style: solid;
|
|
469
|
+
}
|
|
470
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
471
|
+
#ribbon-example-5 div.ribbon-back-left {
|
|
472
|
+
width: 20px;
|
|
473
|
+
height: 40px;
|
|
474
|
+
position: absolute;
|
|
475
|
+
z-index: 0;
|
|
476
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
477
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
478
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
479
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
480
|
+
background-color: #3a89ce;
|
|
481
|
+
left: -20px;
|
|
482
|
+
}
|
|
483
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
484
|
+
#ribbon-example-5 div.ribbon-edge-right-top,
|
|
485
|
+
#ribbon-example-5 div.ribbon-edge-right-bottom {
|
|
486
|
+
height: 0;
|
|
487
|
+
width: 0;
|
|
488
|
+
position: absolute;
|
|
489
|
+
z-index: 1;
|
|
490
|
+
right: -25px;
|
|
491
|
+
border-style: solid;
|
|
492
|
+
}
|
|
493
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
494
|
+
#ribbon-example-5 div.ribbon-back-right {
|
|
495
|
+
width: 20px;
|
|
496
|
+
height: 40px;
|
|
497
|
+
position: absolute;
|
|
498
|
+
z-index: 0;
|
|
499
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
500
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
501
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
502
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
503
|
+
background-color: #3a89ce;
|
|
504
|
+
right: -20px;
|
|
505
|
+
}
|
|
506
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
507
|
+
#ribbon-example-5 div.ribbon-edge-left-bottom {
|
|
508
|
+
top: 40px;
|
|
509
|
+
border-width: 0 25px 10px 0;
|
|
510
|
+
border-color: transparent #163a59 transparent transparent;
|
|
511
|
+
}
|
|
512
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
513
|
+
#ribbon-example-5 div.ribbon-back-left {
|
|
514
|
+
top: 10px;
|
|
515
|
+
}
|
|
516
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
517
|
+
#ribbon-example-5 div.ribbon-edge-right-bottom {
|
|
518
|
+
top: 40px;
|
|
519
|
+
border-width: 10px 25px 0 0;
|
|
520
|
+
border-color: #163a59 transparent transparent transparent;
|
|
521
|
+
}
|
|
522
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
523
|
+
#ribbon-example-5 div.ribbon-back-right {
|
|
524
|
+
top: 10px;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
528
|
+
#ribbon-example-6 div.ribbon-wrapper {
|
|
529
|
+
height: 60px;
|
|
530
|
+
width: 650px;
|
|
531
|
+
position: relative;
|
|
532
|
+
z-index: 3;
|
|
533
|
+
background-position: 0 40px;
|
|
534
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
535
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
536
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
537
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
538
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
539
|
+
}
|
|
540
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
541
|
+
#ribbon-example-6 div.ribbon-front {
|
|
542
|
+
width: 710px;
|
|
543
|
+
height: 40px;
|
|
544
|
+
background-color: #3a89ce;
|
|
545
|
+
position: relative;
|
|
546
|
+
z-index: 2;
|
|
547
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
548
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
549
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
550
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
551
|
+
left: -30px;
|
|
552
|
+
}
|
|
553
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
554
|
+
#ribbon-example-6 div.ribbon-edge-left-top,
|
|
555
|
+
#ribbon-example-6 div.ribbon-edge-left-bottom {
|
|
556
|
+
height: 0;
|
|
557
|
+
width: 0;
|
|
558
|
+
position: absolute;
|
|
559
|
+
z-index: 1;
|
|
560
|
+
left: -30px;
|
|
561
|
+
border-style: solid;
|
|
562
|
+
}
|
|
563
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
564
|
+
#ribbon-example-6 div.ribbon-back-left {
|
|
565
|
+
width: 0;
|
|
566
|
+
height: 40px;
|
|
567
|
+
position: absolute;
|
|
568
|
+
z-index: 0;
|
|
569
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
570
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
571
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
572
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
573
|
+
background-color: #3a89ce;
|
|
574
|
+
left: 0;
|
|
575
|
+
}
|
|
576
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
577
|
+
#ribbon-example-6 div.ribbon-edge-right-top,
|
|
578
|
+
#ribbon-example-6 div.ribbon-edge-right-bottom {
|
|
579
|
+
height: 0;
|
|
580
|
+
width: 0;
|
|
581
|
+
position: absolute;
|
|
582
|
+
z-index: 1;
|
|
583
|
+
right: -30px;
|
|
584
|
+
border-style: solid;
|
|
585
|
+
}
|
|
586
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
587
|
+
#ribbon-example-6 div.ribbon-back-right {
|
|
588
|
+
width: 0;
|
|
589
|
+
height: 40px;
|
|
590
|
+
position: absolute;
|
|
591
|
+
z-index: 0;
|
|
592
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
593
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
594
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
595
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
596
|
+
background-color: #3a89ce;
|
|
597
|
+
right: 0;
|
|
598
|
+
}
|
|
599
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
600
|
+
#ribbon-example-6 div.ribbon-edge-left-bottom {
|
|
601
|
+
top: 40px;
|
|
602
|
+
border-width: 0 30px 20px 0;
|
|
603
|
+
border-color: transparent #163a59 transparent transparent;
|
|
604
|
+
}
|
|
605
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
606
|
+
#ribbon-example-6 div.ribbon-back-left {
|
|
607
|
+
top: 20px;
|
|
608
|
+
}
|
|
609
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
610
|
+
#ribbon-example-6 div.ribbon-edge-right-bottom {
|
|
611
|
+
top: 40px;
|
|
612
|
+
border-width: 20px 30px 0 0;
|
|
613
|
+
border-color: #163a59 transparent transparent transparent;
|
|
614
|
+
}
|
|
615
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
616
|
+
#ribbon-example-6 div.ribbon-back-right {
|
|
617
|
+
top: 20px;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
621
|
+
#ribbon-example-7 div.ribbon-wrapper {
|
|
622
|
+
height: 60px;
|
|
623
|
+
width: 700px;
|
|
624
|
+
position: relative;
|
|
625
|
+
z-index: 3;
|
|
626
|
+
background-position: 0 40px;
|
|
627
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
628
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
629
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
630
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
631
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
632
|
+
}
|
|
633
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
634
|
+
#ribbon-example-7 div.ribbon-front {
|
|
635
|
+
width: 760px;
|
|
636
|
+
height: 40px;
|
|
637
|
+
background-color: #3a89ce;
|
|
638
|
+
position: relative;
|
|
639
|
+
z-index: 2;
|
|
640
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
641
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
642
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
643
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
644
|
+
left: -30px;
|
|
645
|
+
}
|
|
646
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
647
|
+
#ribbon-example-7 div.ribbon-edge-left-top,
|
|
648
|
+
#ribbon-example-7 div.ribbon-edge-left-bottom {
|
|
649
|
+
height: 0;
|
|
650
|
+
width: 0;
|
|
651
|
+
position: absolute;
|
|
652
|
+
z-index: 1;
|
|
653
|
+
left: -30px;
|
|
654
|
+
border-style: solid;
|
|
655
|
+
}
|
|
656
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
657
|
+
#ribbon-example-7 div.ribbon-back-left {
|
|
658
|
+
width: 40px;
|
|
659
|
+
height: 40px;
|
|
660
|
+
position: absolute;
|
|
661
|
+
z-index: 0;
|
|
662
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
663
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
664
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
665
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
666
|
+
-moz-border-radius-topleft: 5px;
|
|
667
|
+
-webkit-border-top-left-radius: 5px;
|
|
668
|
+
-o-border-top-left-radius: 5px;
|
|
669
|
+
-ms-border-top-left-radius: 5px;
|
|
670
|
+
-khtml-border-top-left-radius: 5px;
|
|
671
|
+
border-top-left-radius: 5px;
|
|
672
|
+
-moz-border-radius-bottomleft: 5px;
|
|
673
|
+
-webkit-border-bottom-left-radius: 5px;
|
|
674
|
+
-o-border-bottom-left-radius: 5px;
|
|
675
|
+
-ms-border-bottom-left-radius: 5px;
|
|
676
|
+
-khtml-border-bottom-left-radius: 5px;
|
|
677
|
+
border-bottom-left-radius: 5px;
|
|
678
|
+
background-color: #3a89ce;
|
|
679
|
+
left: -40px;
|
|
680
|
+
}
|
|
681
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
682
|
+
#ribbon-example-7 div.ribbon-edge-right-top,
|
|
683
|
+
#ribbon-example-7 div.ribbon-edge-right-bottom {
|
|
684
|
+
height: 0;
|
|
685
|
+
width: 0;
|
|
686
|
+
position: absolute;
|
|
687
|
+
z-index: 1;
|
|
688
|
+
right: -30px;
|
|
689
|
+
border-style: solid;
|
|
690
|
+
}
|
|
691
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
692
|
+
#ribbon-example-7 div.ribbon-back-right {
|
|
693
|
+
width: 40px;
|
|
694
|
+
height: 40px;
|
|
695
|
+
position: absolute;
|
|
696
|
+
z-index: 0;
|
|
697
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
698
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
699
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
700
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
701
|
+
-moz-border-radius-topright: 5px;
|
|
702
|
+
-webkit-border-top-right-radius: 5px;
|
|
703
|
+
-o-border-top-right-radius: 5px;
|
|
704
|
+
-ms-border-top-right-radius: 5px;
|
|
705
|
+
-khtml-border-top-right-radius: 5px;
|
|
706
|
+
border-top-right-radius: 5px;
|
|
707
|
+
-moz-border-radius-bottomright: 5px;
|
|
708
|
+
-webkit-border-bottom-right-radius: 5px;
|
|
709
|
+
-o-border-bottom-right-radius: 5px;
|
|
710
|
+
-ms-border-bottom-right-radius: 5px;
|
|
711
|
+
-khtml-border-bottom-right-radius: 5px;
|
|
712
|
+
border-bottom-right-radius: 5px;
|
|
713
|
+
background-color: #3a89ce;
|
|
714
|
+
right: -40px;
|
|
715
|
+
}
|
|
716
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
717
|
+
#ribbon-example-7 div.ribbon-edge-left-bottom {
|
|
718
|
+
top: 40px;
|
|
719
|
+
border-width: 0 30px 20px 0;
|
|
720
|
+
border-color: transparent #163a59 transparent transparent;
|
|
721
|
+
}
|
|
722
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
723
|
+
#ribbon-example-7 div.ribbon-back-left {
|
|
724
|
+
top: 20px;
|
|
725
|
+
}
|
|
726
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
727
|
+
#ribbon-example-7 div.ribbon-edge-right-bottom {
|
|
728
|
+
top: 40px;
|
|
729
|
+
border-width: 20px 30px 0 0;
|
|
730
|
+
border-color: #163a59 transparent transparent transparent;
|
|
731
|
+
}
|
|
732
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
733
|
+
#ribbon-example-7 div.ribbon-back-right {
|
|
734
|
+
top: 20px;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
738
|
+
#ribbon-example-8 div.ribbon-wrapper {
|
|
739
|
+
height: 55px;
|
|
740
|
+
width: 750px;
|
|
741
|
+
position: relative;
|
|
742
|
+
z-index: 3;
|
|
743
|
+
}
|
|
744
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
745
|
+
#ribbon-example-8 div.ribbon-front {
|
|
746
|
+
width: 785px;
|
|
747
|
+
height: 40px;
|
|
748
|
+
background-color: #80b5ad;
|
|
749
|
+
position: relative;
|
|
750
|
+
z-index: 2;
|
|
751
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
752
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
753
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
754
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
755
|
+
left: -35px;
|
|
756
|
+
}
|
|
757
|
+
/* line 109, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
758
|
+
#ribbon-example-8 div.ribbon-edge-left-top,
|
|
759
|
+
#ribbon-example-8 div.ribbon-edge-left-bottom {
|
|
760
|
+
height: 0;
|
|
761
|
+
width: 0;
|
|
762
|
+
position: absolute;
|
|
763
|
+
z-index: 1;
|
|
764
|
+
left: -35px;
|
|
765
|
+
border-style: solid;
|
|
766
|
+
}
|
|
767
|
+
/* line 113, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
768
|
+
#ribbon-example-8 div.ribbon-back-left {
|
|
769
|
+
width: 30px;
|
|
770
|
+
height: 40px;
|
|
771
|
+
position: absolute;
|
|
772
|
+
z-index: 0;
|
|
773
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
774
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
775
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
776
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
777
|
+
-moz-border-radius-topleft: 7px;
|
|
778
|
+
-webkit-border-top-left-radius: 7px;
|
|
779
|
+
-o-border-top-left-radius: 7px;
|
|
780
|
+
-ms-border-top-left-radius: 7px;
|
|
781
|
+
-khtml-border-top-left-radius: 7px;
|
|
782
|
+
border-top-left-radius: 7px;
|
|
783
|
+
-moz-border-radius-bottomleft: 7px;
|
|
784
|
+
-webkit-border-bottom-left-radius: 7px;
|
|
785
|
+
-o-border-bottom-left-radius: 7px;
|
|
786
|
+
-ms-border-bottom-left-radius: 7px;
|
|
787
|
+
-khtml-border-bottom-left-radius: 7px;
|
|
788
|
+
border-bottom-left-radius: 7px;
|
|
789
|
+
background-color: #8dbf96;
|
|
790
|
+
left: -30px;
|
|
791
|
+
}
|
|
792
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
793
|
+
#ribbon-example-8 div.ribbon-edge-left-bottom {
|
|
794
|
+
top: 40px;
|
|
795
|
+
border-width: 0 35px 15px 0;
|
|
796
|
+
border-color: transparent #3f6f4e transparent transparent;
|
|
797
|
+
}
|
|
798
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
799
|
+
#ribbon-example-8 div.ribbon-back-left {
|
|
800
|
+
top: 15px;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
/* Other styles for the demo --------------------------------------------------------------*/
|
|
804
|
+
/* line 81, ../sass/3d-ribbon-examples.scss */
|
|
805
|
+
body {
|
|
806
|
+
background: #F8F8F8;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
/* line 85, ../sass/3d-ribbon-examples.scss */
|
|
810
|
+
#content {
|
|
811
|
+
margin: 20px auto;
|
|
812
|
+
text-align: center;
|
|
813
|
+
width: 750px;
|
|
814
|
+
color: #FFF;
|
|
815
|
+
font-family: sans-serif;
|
|
816
|
+
}
|
|
817
|
+
/* line 92, ../sass/3d-ribbon-examples.scss */
|
|
818
|
+
#content h2 {
|
|
819
|
+
font-size: 28px;
|
|
820
|
+
line-height: 40px;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
/* line 101, ../sass/3d-ribbon-examples.scss */
|
|
824
|
+
#ribbon-example-1, #ribbon-example-2, #ribbon-example-3, #ribbon-example-4, #ribbon-example-5, #ribbon-example-6, #ribbon-example-7, #ribbon-example-8, #ribbon-example-9 {
|
|
825
|
+
margin: 80px 0;
|
|
826
|
+
}
|
|
827
|
+
/* line 104, ../sass/3d-ribbon-examples.scss */
|
|
828
|
+
#ribbon-example-1 .ribbon-wrapper, #ribbon-example-2 .ribbon-wrapper, #ribbon-example-3 .ribbon-wrapper, #ribbon-example-4 .ribbon-wrapper, #ribbon-example-5 .ribbon-wrapper, #ribbon-example-6 .ribbon-wrapper, #ribbon-example-7 .ribbon-wrapper, #ribbon-example-8 .ribbon-wrapper, #ribbon-example-9 .ribbon-wrapper {
|
|
829
|
+
margin: 0 auto;
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/* line 59, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
833
|
+
#ribbon-example-9 div.ribbon-wrapper {
|
|
834
|
+
height: 60px;
|
|
835
|
+
width: 300px;
|
|
836
|
+
position: relative;
|
|
837
|
+
z-index: 3;
|
|
838
|
+
background-position: 0 40px;
|
|
839
|
+
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #555555), color-stop(100%, rgba(255, 255, 255, 0)));
|
|
840
|
+
background-image: -webkit-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
841
|
+
background-image: -moz-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
842
|
+
background-image: -o-linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
843
|
+
background-image: linear-gradient(#555555 0px, rgba(255, 255, 255, 0) 20px);
|
|
844
|
+
}
|
|
845
|
+
/* line 76, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
846
|
+
#ribbon-example-9 div.ribbon-front {
|
|
847
|
+
width: 360px;
|
|
848
|
+
height: 40px;
|
|
849
|
+
background-color: #cb261b;
|
|
850
|
+
position: relative;
|
|
851
|
+
z-index: 2;
|
|
852
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
853
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
854
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
855
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
856
|
+
left: -30px;
|
|
857
|
+
}
|
|
858
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
859
|
+
#ribbon-example-9 div.ribbon-edge-left-top,
|
|
860
|
+
#ribbon-example-9 div.ribbon-edge-left-bottom {
|
|
861
|
+
height: 0;
|
|
862
|
+
width: 0;
|
|
863
|
+
position: absolute;
|
|
864
|
+
z-index: 1;
|
|
865
|
+
left: -30px;
|
|
866
|
+
border-style: solid;
|
|
867
|
+
}
|
|
868
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
869
|
+
#ribbon-example-9 div.ribbon-back-left {
|
|
870
|
+
width: 40px;
|
|
871
|
+
height: 40px;
|
|
872
|
+
position: absolute;
|
|
873
|
+
z-index: 0;
|
|
874
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
875
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
876
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
877
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
878
|
+
-moz-border-radius-topleft: 10px;
|
|
879
|
+
-webkit-border-top-left-radius: 10px;
|
|
880
|
+
-o-border-top-left-radius: 10px;
|
|
881
|
+
-ms-border-top-left-radius: 10px;
|
|
882
|
+
-khtml-border-top-left-radius: 10px;
|
|
883
|
+
border-top-left-radius: 10px;
|
|
884
|
+
-moz-border-radius-bottomleft: 10px;
|
|
885
|
+
-webkit-border-bottom-left-radius: 10px;
|
|
886
|
+
-o-border-bottom-left-radius: 10px;
|
|
887
|
+
-ms-border-bottom-left-radius: 10px;
|
|
888
|
+
-khtml-border-bottom-left-radius: 10px;
|
|
889
|
+
border-bottom-left-radius: 10px;
|
|
890
|
+
background-color: #cb261b;
|
|
891
|
+
left: -40px;
|
|
892
|
+
}
|
|
893
|
+
/* line 133, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
894
|
+
#ribbon-example-9 div.ribbon-edge-right-top,
|
|
895
|
+
#ribbon-example-9 div.ribbon-edge-right-bottom {
|
|
896
|
+
height: 0;
|
|
897
|
+
width: 0;
|
|
898
|
+
position: absolute;
|
|
899
|
+
z-index: 1;
|
|
900
|
+
right: -30px;
|
|
901
|
+
border-style: solid;
|
|
902
|
+
}
|
|
903
|
+
/* line 137, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
904
|
+
#ribbon-example-9 div.ribbon-back-right {
|
|
905
|
+
width: 40px;
|
|
906
|
+
height: 40px;
|
|
907
|
+
position: absolute;
|
|
908
|
+
z-index: 0;
|
|
909
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
910
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
911
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
912
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
913
|
+
-moz-border-radius-topright: 10px;
|
|
914
|
+
-webkit-border-top-right-radius: 10px;
|
|
915
|
+
-o-border-top-right-radius: 10px;
|
|
916
|
+
-ms-border-top-right-radius: 10px;
|
|
917
|
+
-khtml-border-top-right-radius: 10px;
|
|
918
|
+
border-top-right-radius: 10px;
|
|
919
|
+
-moz-border-radius-bottomright: 10px;
|
|
920
|
+
-webkit-border-bottom-right-radius: 10px;
|
|
921
|
+
-o-border-bottom-right-radius: 10px;
|
|
922
|
+
-ms-border-bottom-right-radius: 10px;
|
|
923
|
+
-khtml-border-bottom-right-radius: 10px;
|
|
924
|
+
border-bottom-right-radius: 10px;
|
|
925
|
+
background-color: #cb261b;
|
|
926
|
+
right: -40px;
|
|
927
|
+
}
|
|
928
|
+
/* line 164, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
929
|
+
#ribbon-example-9 div.ribbon-edge-left-bottom {
|
|
930
|
+
top: 40px;
|
|
931
|
+
border-width: 0 30px 20px 0;
|
|
932
|
+
border-color: transparent #440d09 transparent transparent;
|
|
933
|
+
}
|
|
934
|
+
/* line 170, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
935
|
+
#ribbon-example-9 div.ribbon-back-left {
|
|
936
|
+
top: 20px;
|
|
937
|
+
}
|
|
938
|
+
/* line 190, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
939
|
+
#ribbon-example-9 div.ribbon-edge-right-bottom {
|
|
940
|
+
top: 40px;
|
|
941
|
+
border-width: 20px 30px 0 0;
|
|
942
|
+
border-color: #440d09 transparent transparent transparent;
|
|
943
|
+
}
|
|
944
|
+
/* line 196, ../extensions/3d-ribbon/stylesheets/_3d-ribbon.scss */
|
|
945
|
+
#ribbon-example-9 div.ribbon-back-right {
|
|
946
|
+
top: 20px;
|
|
947
|
+
}
|
|
948
|
+
/* line 117, ../sass/3d-ribbon-examples.scss */
|
|
949
|
+
#ribbon-example-9 h2 {
|
|
950
|
+
font-style: italyc;
|
|
951
|
+
font-family: Georgia, Verdana,sans-serif;
|
|
952
|
+
text-shadow: rgba(0, 0, 255, 0.2) 1px 1px 0, rgba(0, 0, 255, 0.2) 2px 2px 0, rgba(0, 0, 255, 0.2) 3px 3px 0;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
/* line 126, ../sass/3d-ribbon-examples.scss */
|
|
956
|
+
#example-9-content {
|
|
957
|
+
padding: 80px 20px 20px 20px;
|
|
958
|
+
width: 260px;
|
|
959
|
+
position: relative;
|
|
960
|
+
top: -80px;
|
|
961
|
+
background: #E7E7E7;
|
|
962
|
+
color: #000;
|
|
963
|
+
line-height: 1.2;
|
|
964
|
+
-moz-border-radius: 15px;
|
|
965
|
+
-webkit-border-radius: 15px;
|
|
966
|
+
-o-border-radius: 15px;
|
|
967
|
+
-ms-border-radius: 15px;
|
|
968
|
+
-khtml-border-radius: 15px;
|
|
969
|
+
border-radius: 15px;
|
|
970
|
+
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
971
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
972
|
+
-o-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
973
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px;
|
|
974
|
+
margin: 0 auto;
|
|
975
|
+
}
|