Skip to content

Commit 22c2406

Browse files
PascalPixelPascalPixel
committed
v2.1.0
1 parent 5deadee commit 22c2406

File tree

9 files changed

+185
-178
lines changed

9 files changed

+185
-178
lines changed

‎css-browsers.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.css-browsers {
2+
position: relative;
3+
background-color: #ffffff;
4+
border: 0.0625rem solid #bbbbbb; }
5+
.css-browsers .pull-right {
6+
float: right; }
7+
.css-browsers a {
8+
text-decoration: none; }
9+
.css-browsers .address {
10+
background: #ffffff;
11+
border: 0.0625rem solid rgba(0, 0, 0, 0.4);
12+
display: inline-block;
13+
left: 5.375rem;
14+
padding: 0.5rem 0.5rem 0.438rem;
15+
position: absolute;
16+
right: 0.375rem; }
17+
.css-browsers .content {
18+
height: 25rem;
19+
overflow: hidden;
20+
position: relative; }
21+
.css-browsers .reload {
22+
color: #788083;
23+
font-weight: 700; }
24+
.css-browsers .toolbar {
25+
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.4);
26+
padding: 0.438rem; }
27+
.css-browsers .brbtn {
28+
border: 0.0625rem solid rgba(0, 0, 0, 0.3);
29+
color: #788083;
30+
cursor: pointer;
31+
display: inline-block;
32+
margin-right: -0.375rem;
33+
padding: 0.375rem 0.563rem; }
34+
35+
.css-browsers-safari-7 {
36+
border-radius: 0;
37+
border-radius: 0.438rem 0.438rem 0 0;
38+
box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.1); }
39+
.css-browsers-safari-7 .address {
40+
border-radius: 0.3125rem;
41+
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
42+
font-size: 0.75rem; }
43+
.css-browsers-safari-7 .back {
44+
border-radius: 0.3125rem 0 0 0.3125rem; }
45+
.css-browsers-safari-7 .forward {
46+
border-radius: 0 0.3125rem 0.3125rem 0; }
47+
.css-browsers-safari-7 .toolbar {
48+
border-radius: 0.438rem 0.438rem 0 0;
49+
box-shadow: inset 0 0.0625rem 0 #FFF;
50+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%); }
51+
.css-browsers-safari-7 .brbtn {
52+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%);
53+
box-shadow: inset 0 0.0625rem 0 white, 0 0.0625rem 0 rgba(255, 255, 255, 0.7);
54+
text-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.7); }
55+
.css-browsers-safari-7 .brbtn:hover {
56+
background: linear-gradient(to bottom, #ededed 0%, #c8c8c8 100%); }
57+
.css-browsers-safari-7 .brbtn:active, .css-browsers-safari-7 .brbtn.active {
58+
background: linear-gradient(to bottom, #c8c8c8 0%, #e2e2e2 100%); }

‎src/css-browsers.sass renamed to ‎css-browsers.sass

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
html
2-
font-size: 16px
3-
4-
body
5-
background: #eee
6-
color: #979374
7-
padding: 1.250rem
8-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
9-
10-
.browser
11-
background-color: #FFF
12-
border: 0.0625rem solid #BBB
13-
border-radius: 0
14-
border-radius: 0.438rem 0.438rem 0 0
15-
box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.1)
1+
// All sizing based on rem units
2+
// 1px / 16px = 0.0625rem
3+
4+
.css-browsers
165
position: relative
6+
background-color: #ffffff
7+
border: 0.0625rem solid #bbbbbb
178

189
.pull-right
1910
float: right
@@ -22,71 +13,64 @@ body
2213
text-decoration: none
2314

2415
.address
25-
background: #FFF
16+
background: #ffffff
2617
border: 0.0625rem solid rgba(0, 0, 0, 0.4)
27-
border-radius: 0.3125rem
28-
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
2918
display: inline-block
30-
font-size: 0.75rem
3119
left: 5.375rem
3220
padding: 0.5rem 0.5rem 0.438rem
3321
position: absolute
3422
right: 0.375rem
3523

36-
.back
37-
border-radius: 0.3125rem 0 0 0.3125rem
38-
3924
.content
4025
height: 25rem
4126
overflow: hidden
4227
position: relative
4328

44-
.forward
45-
border-radius: 0 0.3125rem 0.3125rem 0
46-
4729
.reload
4830
color: #788083
4931
font-weight: 700
5032

5133
.toolbar
5234
border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.4)
53-
border-radius: 0.438rem 0.438rem 0 0
54-
box-shadow: inset 0 0.0625rem 0 #FFF
5535
padding: 0.438rem
56-
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
57-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2',endColorstr='#c8c8c8',GradientType=0)
5836

5937
.brbtn
60-
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
61-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2',endColorstr='#c8c8c8',GradientType=0)
6238
border: 0.0625rem solid rgba(0, 0, 0, 0.3)
63-
box-shadow: inset 0 0.0625rem 0 white, 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
6439
color: #788083
6540
cursor: pointer
6641
display: inline-block
6742
margin-right: -0.375rem
6843
padding: 0.375rem 0.563rem
44+
45+
.css-browsers-safari-7
46+
border-radius: 0
47+
border-radius: 0.438rem 0.438rem 0 0
48+
box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.1)
49+
50+
.address
51+
border-radius: 0.3125rem
52+
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2), 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
53+
font-size: 0.75rem
54+
55+
.back
56+
border-radius: 0.3125rem 0 0 0.3125rem
57+
58+
.forward
59+
border-radius: 0 0.3125rem 0.3125rem 0
60+
61+
.toolbar
62+
border-radius: 0.438rem 0.438rem 0 0
63+
box-shadow: inset 0 0.0625rem 0 #FFF
64+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
65+
66+
.brbtn
67+
background: linear-gradient(to bottom, #e2e2e2 0%, #c8c8c8 100%)
68+
box-shadow: inset 0 0.0625rem 0 white, 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
6969
text-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.7)
70-
transition: background 0.2s
7170

7271
&:hover
7372
background: linear-gradient(to bottom, #ededed 0%, #c8c8c8 100%)
74-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#c8c8c8',GradientType=0)
7573

7674
&:active,
7775
&.active
7876
background: linear-gradient(to bottom, #c8c8c8 0%, #e2e2e2 100%)
79-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c8c8',endColorstr='#e2e2e2',GradientType=0)
80-
81-
.css3-browser
82-
border: none
83-
height: 100%
84-
position: absolute
85-
top: 0
86-
transition: top 240s
87-
width: 100%
88-
height: 200rem
89-
transition: top 200s
90-
91-
&.moving
92-
top: -200rem

‎dist/css-browsers.css

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎dist/css-browsers.html

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎index.html

Lines changed: 92 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,101 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
3+
34
<head>
4-
<meta charset="utf-8"/>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta http-equiv="x-ua-compatible" content="ie=edge">
8+
<title>css-browsers v2.1.0</title>
9+
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
11+
<link href="css-browsers.css" rel="stylesheet" type="text/css">
12+
<style>
13+
body {
14+
background: #EDEDED;
15+
color: #555555;
16+
}
17+
18+
.superpencil .tag-primary {
19+
background-color: #FCE400;
20+
color: #774701;
21+
font-family: "Avenir Next", "Avenir", "Helvetica", "Arial", sans-serif;
22+
padding: 4px 5px 3px;
23+
color: #774701;
24+
font-size: 10px;
25+
font-smooth: auto;
26+
-webkit-font-smoothing: subpixel-antialiased;
27+
}
28+
29+
.superpencil img {
30+
width: 15px;
31+
margin-top: -1px;
32+
}
33+
</style>
534
</head>
35+
636
<body>
7-
<h1 id="cssbrowsers">CSS Browsers</h1>
37+
<div class="container">
38+
<br />
39+
<h1>css-browsers v2.1.0</h1>
40+
<p>
41+
Easily print out different browsers into a shared HTML frame
42+
</p>
43+
<p>
44+
Github
45+
<a href="https://github.com/Superpencil/css-browsers">css-browsers</a>
46+
<iframe src="https://ghbtns.com/github-btn.html?user=Superpencil&repo=css-browsers&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
47+
</p>
48+
<p>
49+
Demo
50+
<a href="http://github.superpencil.com/css-browsers">github.superpencil.com/css-browsers</a>
51+
</p>
52+
<p>
53+
Install
54+
<code>npm install css-browsers</code>
55+
</p>
56+
<p>
57+
Design and Development by
58+
<a alt="Superpencil" class="superpencil" href="http://www.superpencil.com/?utm_source=css-browsers&utm_medium=footer+link&utm_campaign=project">
59+
<b class="tag tag-primary">
60+
<img src="superpencil.svg" alt="Superpencil" />
61+
Superpencil
62+
</b>
63+
</a>
64+
</p>
65+
66+
<hr />
867

9-
<h2 id="cssbasedbrowserframeswindows">CSS based browser frames/windows</h2>
68+
<div class="css-browsers">
69+
<div class="toolbar">
70+
<a class="brbtn back" href="#">&#9668;</a>
71+
<a class="brbtn forward" href="#">&#9658;</a>
72+
<div class="address">
73+
<span class="url">http://polygon.com/</span>
74+
<a class="reload pull-right" href="#">&#x21bb;</a>
75+
</div>
76+
</div>
77+
<div class="content">
78+
<h1 class="centered">Basic frame</h1>
79+
</div>
80+
</div>
81+
<br />
1082

11-
<figure>
12-
<img src="css-browser.png" alt="alt text" title="screenshot" />
13-
<figcaption>alt text</figcaption>
14-
</figure>
83+
<div class="css-browsers css-browsers-safari-7">
84+
<div class="toolbar">
85+
<a class="brbtn back" href="#">&#9668;</a>
86+
<a class="brbtn forward" href="#">&#9658;</a>
87+
<div class="address">
88+
<span class="url">http://polygon.com/</span>
89+
<a class="reload pull-right" href="#">&#x21bb;</a>
90+
</div>
91+
</div>
92+
<div class="content">
93+
<h1 class="centered">Safari 7</h1>
94+
</div>
95+
</div>
96+
<br />
1597

98+
</div>
1699
</body>
100+
17101
</html>

0 commit comments

Comments
 (0)