Skip to content

Commit 2ffab9c

Browse files
saltunsaltun
committed
Version 2.0
1 parent 71defbf commit 2ffab9c

File tree

10 files changed

+578
-12
lines changed

10 files changed

+578
-12
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@
1919
"test",
2020
"tests"
2121
]
22-
}
22+
}

‎css/pine.css‎

Lines changed: 243 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
2-
* pineCSS v1.1
3-
* Copyright 2014, Savaş Can ALTUN <[email protected] >
4-
* github.com/pineCSS/pine
2+
* PineCSS v2.0
3+
* Copyright 2014 - 2016, Savas Can ALTUN <[email protected]>
4+
* http:://github.com/pineCSS/pine
55
* http://pinecss.com
66
*/
77
/* Base Styles
@@ -890,6 +890,246 @@ form {
890890
p {
891891
margin-top: 0;
892892
}
893+
894+
/* PineJS Elements
895+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
896+
897+
/* PineBOX
898+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
899+
900+
.pinebox {
901+
display: none;
902+
position: fixed;
903+
z-index: 1;
904+
padding-top: 100px;
905+
left: 0;
906+
top: 0;
907+
button:;
908+
width: 100%;
909+
height: 100%;
910+
overflow: auto;
911+
background-color: rgba(0,0,0,0.4);
912+
913+
}
914+
915+
/* PineBox Content */
916+
.pinebox-content {
917+
background-color: #fefefe;
918+
margin: auto;
919+
position: fixed;
920+
right: 0;
921+
left: 0;
922+
padding: 20px;
923+
border: 3px solid #34495e;
924+
width: 50%;
925+
}
926+
927+
928+
/* PineAccordion
929+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
930+
button.pineaccordion {
931+
932+
color: #555;
933+
cursor: pointer;
934+
text-align: left;
935+
outline: none;
936+
font-size: 15px;
937+
transition: 0.4s;
938+
border-top: 2px solid #34495e;
939+
border-left: 2px solid #ddd;
940+
border-right: 2px solid #ddd;
941+
border-bottom: 3px solid #fff;
942+
943+
}
944+
945+
946+
947+
button.pineaccordion:after {
948+
content: '\02795';
949+
font-size: 13px;
950+
color: #555;
951+
float: right;
952+
margin-left: 5px;
953+
}
954+
955+
button.pineaccordion.active:after {
956+
content: "\2796";
957+
}
958+
959+
div.pineaccordion-panel {
960+
border: 2px solid #ddd;
961+
margin-top:-11px;
962+
padding: 0 20px;
963+
background-color: white;
964+
max-height: 0;
965+
overflow: hidden;
966+
transition: 0.6s ease-in-out;
967+
opacity: 0;
968+
}
969+
970+
div.pineaccordion-panel.show {
971+
opacity: 1;
972+
max-height: 500px;
973+
}
974+
975+
976+
977+
/* PineTabs
978+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
979+
ul.pinetabs{
980+
margin: 0px;
981+
padding: 0px;
982+
list-style: none;
983+
}
984+
ul.pinetabs li{
985+
background: none;
986+
color: #222;
987+
display: inline-block;
988+
padding: 10px 15px;
989+
cursor: pointer;
990+
display: inline-block;
991+
margin: 0 0 -1px;
992+
padding: 15px 25px;
993+
font-weight: 600;
994+
text-align: center;
995+
color: #bbb;
996+
border: 1px solid transparent;
997+
}
998+
999+
ul.pinetabs li.current{
1000+
color: #555;
1001+
border: 1px solid #ddd;
1002+
border-top: 2px solid #34495e;
1003+
border-bottom: 1px solid #fff;
1004+
1005+
}
1006+
1007+
.pinetabs-content{
1008+
display: none;
1009+
background: none;
1010+
padding: 15px;
1011+
border: 1px solid #ddd;
1012+
}
1013+
1014+
.pinetabs-content.current{
1015+
display: inherit;
1016+
}
1017+
1018+
1019+
/* Pine Navbar
1020+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
1021+
nav.primary{
1022+
1023+
background-color: #34495e;
1024+
1025+
}
1026+
nav.primary ul,
1027+
nav.primary ul li {
1028+
margin: 0px;
1029+
}
1030+
1031+
nav.primary select {
1032+
display: none;
1033+
width: 100%;
1034+
height: 28px;
1035+
margin: 21px 0;
1036+
}
1037+
1038+
nav.primary ul li {
1039+
display: inline;
1040+
float: left;
1041+
position: relative;
1042+
}
1043+
1044+
nav.primary ul li.active {
1045+
background-color: #2c3c4c;
1046+
}
1047+
1048+
nav.primary ul li a {
1049+
display: inline-block;
1050+
line-height: 49px;
1051+
padding: 0 14px;
1052+
color: #ebebeb;
1053+
text-transform: uppercase;
1054+
text-decoration: none;
1055+
font-weight: bold;
1056+
letter-spacing: 0.08em;
1057+
}
1058+
1059+
nav.primary ul li a:hover {
1060+
background: #2c3c4c;
1061+
cursor: pointer;
1062+
}
1063+
1064+
/*sub menu*/
1065+
nav.primary ul ul {
1066+
opacity: 0;
1067+
filter: alpha(opacity=0);
1068+
position: absolute;
1069+
top:100%;
1070+
left: 0;
1071+
z-index: 999999;
1072+
background-color:#34495e;
1073+
height: 0px;
1074+
overflow: hidden;
1075+
min-width: 100%;
1076+
-webkit-transition: opacity 0.4s ease-out;
1077+
-moz-transition: opacity 0.4s ease-out;
1078+
-o-transition: opacity 0.4s ease-out;
1079+
-ms-transition: opacity 0.4s ease-out;
1080+
transition: opacity 0.4s ease-out;
1081+
1082+
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
1083+
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
1084+
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
1085+
}
1086+
1087+
nav.primary ul li span {
1088+
display: none;
1089+
}
1090+
1091+
nav.primary ul li:hover ul {
1092+
opacity: 10;
1093+
filter: alpha(opacity=100);
1094+
list-style-type: none;
1095+
height: auto;
1096+
overflow: auto;
1097+
1098+
display: block;
1099+
}
1100+
1101+
nav.primary ul ul li {
1102+
float: none;
1103+
display: list-item;
1104+
border-bottom: 1px solid #383737;
1105+
}
1106+
1107+
nav.primary ul ul li a {
1108+
display: block;
1109+
line-height: 35px;
1110+
text-transform: none;
1111+
position: relative;
1112+
z-index: 999999;
1113+
}
1114+
1115+
nav.primary ul li:hover > a {
1116+
background: #2c3c4c;
1117+
}
1118+
1119+
1120+
1121+
.pinenavbar select {
1122+
display: none;
1123+
}
1124+
1125+
1126+
@media (max-width: 960px) {
1127+
.pinenavbar .primary{display: none;}
1128+
.pinenavbar select { display: inline-block; }
1129+
}
1130+
1131+
1132+
8931133
/* Clearing
8941134
–––––––––––––––––––––––––––––––––––––––––––––––––– */
8951135

‎css/pine.min.css‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/accordion.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>PineCSS</title>
6+
<link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
7+
<style type="text/css">
8+
</style>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13+
<h1>PineAccordion Example Page</h1>
14+
<hr/>
15+
16+
17+
<button class="pineaccordion">Section 1</button>
18+
<div class="pineaccordion-panel">
19+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
20+
</div>
21+
22+
<button class="pineaccordion">Section 2</button>
23+
<div class="pineaccordion-panel">
24+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
25+
</div>
26+
27+
<button class="pineaccordion">Section 3</button>
28+
<div id="foo" class="pineaccordion-panel">
29+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
30+
</div>
31+
32+
33+
<hr>
34+
<h5>Full Width</h5>
35+
<hr>
36+
<button class="pineaccordion full-width">Section 1</button>
37+
<div class="pineaccordion-panel">
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
39+
</div>
40+
41+
<button class="pineaccordion full-width">Section 2</button>
42+
<div class="pineaccordion-panel">
43+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
44+
</div>
45+
46+
<button class="pineaccordion full-width">Section 3</button>
47+
<div id="foo" class="pineaccordion-panel">
48+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
49+
</div>
50+
51+
52+
53+
54+
55+
</div>
56+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
57+
<script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
58+
</body>
59+
</html>

‎examples/box.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>PineCSS</title>
6+
<link rel="stylesheet" type="text/css" href="http://pinecss.com/v/2.0/pine.min.css" />
7+
<style type="text/css">
8+
</style>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<a href="http://pinecss.com"><img class="max-full-with" alt="PineCSS" src="http://uptc.xyz/SIX3oqHMrXdfe.png" /></a>
13+
<h1>PineBox Example Page</h1>
14+
<hr/>
15+
<a id="pinebox1" class="button button-danger">PineBox 1</a>
16+
<!-- PineBox -->
17+
<div id="PineBox1" class="pinebox">
18+
<!-- PineBox content -->
19+
<div class="pinebox-content">
20+
<p>
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus nisl mauris, eu molestie lectus congue vitae. Praesent tortor sapien, aliquam a imperdiet condimentum, elementum eu tellus. Phasellus vitae rutrum nulla. Pellentesque et sapien id felis lacinia efficitur in dictum lorem. Integer auctor massa id nunc euismod, sed viverra elit varius. Duis libero lacus, mollis vel rutrum euismod, aliquet vitae nisl. Aenean id dolor rutrum, interdum ipsum in, molestie urna. Nunc vulputate est lorem, at suscipit metus tempor non. Aenean mollis nunc in consectetur varius. Nullam finibus maximus nulla vitae varius. Nunc ut risus eu eros porttitor cursus. Proin eget est at lacus accumsan cursus faucibus pretium tellus. Sed at feugiat tellus, eu convallis nisl. Duis at tortor et erat ultricies suscipit. Donec accumsan auctor lorem, non sollicitudin ante lacinia vitae.
22+
</p>
23+
<p>
24+
Sed quis ipsum tempus, viverra ante eget, venenatis lorem. Nam mollis urna ante, ac faucibus libero tempus ut. Nam volutpat ex id ullamcorper consectetur. Praesent sagittis hendrerit tellus id sollicitudin. Morbi id laoreet lectus. Quisque magna diam, ornare et blandit ac, euismod eget ligula. Donec commodo nibh massa, in bibendum lectus rhoncus ut. Donec lobortis lacinia magna a suscipit.
25+
</p>
26+
<p>
27+
Etiam eget ex ut turpis viverra maximus eget ut arcu. In scelerisque laoreet venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dolor tortor, scelerisque id commodo vel, aliquet at ex. Suspendisse sollicitudin mauris sit amet suscipit ornare. Praesent bibendum consectetur finibus. Nullam eros risus, feugiat id porttitor nec, commodo at nulla. Aliquam quis est a massa auctor ultrices. Donec ullamcorper accumsan eros eget venenatis. Nunc pretium sed massa a vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas quis purus ornare, facilisis ligula ut, dapibus dolor.
28+
</p>
29+
<p>
30+
Nam rhoncus porttitor massa quis malesuada. Pellentesque porta porta odio vitae elementum. Etiam sed risus ut enim dignissim placerat non nec ex. In placerat leo nulla, eget dictum ex dapibus in. Phasellus metus augue, sagittis a dictum et, porta id diam. Curabitur ut felis eros. Donec vitae feugiat leo, eget convallis mi. Etiam pellentesque mauris libero, sed dignissim orci consectetur in. Vivamus vitae iaculis neque. Cras eu vehicula nisl, ac accumsan est. Etiam ut neque vitae mauris iaculis eleifend. Integer viverra cursus sagittis. Pellentesque nulla ex, varius at dui non, feugiat tincidunt erat.
31+
</p>
32+
<p>
33+
Sed laoreet orci in euismod sodales. Aenean gravida consectetur placerat. Pellentesque pretium gravida aliquam. Etiam sem magna, gravida quis justo non, varius tristique urna. Nullam rhoncus neque ac turpis posuere, in venenatis lacus maximus. In condimentum, eros et fermentum dictum, libero leo posuere turpis, euismod consectetur risus mi vel nisl. Sed porta dictum tortor, at malesuada magna volutpat a. Fusce a risus efficitur, ultrices felis sit amet, consectetur elit. Suspendisse tempus ipsum est, ut suscipit nulla sagittis sed. Aliquam nisl dolor, blandit eget magna nec, varius efficitur dui. Pellentesque id commodo sem.
34+
</p>
35+
<a href="#" class="button button-danger full-width pinebox-close">Close</a>
36+
</div>
37+
</div>
38+
<hr>
39+
<a id="pinebox2" class="button button-danger">PineBox 2</a>
40+
<!-- PineBox -->
41+
<div id="PineBox2" class="pinebox">
42+
<!-- PineBox content -->
43+
<div class="pinebox-content">
44+
<p><img class="max-full-width" src="https://camo.githubusercontent.com/10ceb46f31cf987cde9d371284a8f43c00b5668b/687474703a2f2f70696e656373732e636f6d2f696d616765732f70696e656e65772e706e67" alt="PineCSS"></p>
45+
<a href="#" class="button button-danger full-width pinebox-close">Close</a>
46+
</div>
47+
</div>
48+
</div>
49+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
50+
<script type="text/javascript" src="http://pinecss.com/v/2.0/pine.min.js"></script>
51+
<script type="text/javascript">
52+
$('#pinebox1').pinebox({
53+
'id': 'PineBox1',
54+
'escape': true
55+
56+
});
57+
58+
$('#pinebox2').pinebox({
59+
'id': 'PineBox2',
60+
61+
62+
});
63+
</script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)