Skip to content

Commit 154648a

Browse files
UnderlineWordsUnderlineWords
committed
Updated docs and files
1 parent d3f8526 commit 154648a

27 files changed

+1813
-1368
lines changed

‎dist/punica.css‎

Lines changed: 142 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6030,59 +6030,80 @@ a.label.error, .label.error {
60306030
width: 80%;
60316031
}
60326032

6033-
.navbar .section {
6033+
.navbar .brand {
6034+
padding: 0 50px;
60346035
display: -webkit-box;
60356036
display: -ms-flexbox;
60366037
display: flex;
6037-
-webkit-box-flex: 1;
6038-
-ms-flex: 1 0 0px;
6039-
flex: 1 0 0;
6038+
-webkit-box-pack: center;
6039+
-ms-flex-pack: center;
6040+
justify-content: center;
6041+
min-height: 100%;
60406042
-webkit-box-align: center;
60416043
-ms-flex-align: center;
60426044
align-items: center;
60436045
}
60446046

6045-
.navbar .section:not(:first-child):last-child {
6046-
-webkit-box-pack: end;
6047-
-ms-flex-pack: end;
6048-
justify-content: flex-end;
6047+
.navbar .brand img {
6048+
max-height: 60px;
6049+
padding: 8px;
60496050
}
60506051

6051-
.navbar .center {
6052-
-webkit-box-align: center;
6053-
-ms-flex-align: center;
6054-
align-items: center;
6052+
.navbar .brand a, .navbar .brand a:visited {
6053+
font-size: 1.1em;
6054+
text-decoration: none;
6055+
color: #fff;
60556056
display: -webkit-box;
60566057
display: -ms-flexbox;
60576058
display: flex;
6058-
-webkit-box-flex: 0;
6059-
-ms-flex: 0 0 auto;
6060-
flex: 0 0 auto;
60616059
}
60626060

6063-
.navbar .brand {
6064-
font-size: 1.1em;
6065-
text-decoration: none;
6066-
padding: 0 50px;
6061+
.navbar input[type=checkbox]#burger, .navbar .burger {
6062+
display: none;
6063+
}
6064+
6065+
.navbar .burger::before {
6066+
content: "dehaze";
6067+
font-family: "Material Icons";
6068+
font-size: 2.459rem;
6069+
display: none;
6070+
min-height: 80px;
6071+
min-width: 80px;
6072+
position: absolute;
6073+
cursor: pointer;
6074+
right: 0;
6075+
top: 0;
6076+
}
6077+
6078+
.navbar section.links {
60676079
display: -webkit-box;
60686080
display: -ms-flexbox;
60696081
display: flex;
6070-
-webkit-box-pack: center;
6071-
-ms-flex-pack: center;
6072-
justify-content: center;
6073-
min-height: 100%;
6082+
-webkit-box-flex: 1;
6083+
-ms-flex: 1 0 0px;
6084+
flex: 1 0 0;
60746085
-webkit-box-align: center;
60756086
-ms-flex-align: center;
60766087
align-items: center;
60776088
}
60786089

6079-
.navbar .brand img {
6080-
max-height: 60px;
6081-
padding: 8px;
6090+
.navbar section.links div.section {
6091+
-webkit-box-flex: 1;
6092+
-ms-flex: 1 0 0px;
6093+
flex: 1 0 0;
6094+
display: -webkit-box;
6095+
display: -ms-flexbox;
6096+
display: flex;
6097+
height: 100%;
6098+
-webkit-box-align: center;
6099+
-ms-flex-align: center;
6100+
align-items: center;
60826101
}
60836102

6084-
.navbar a.brand, .navbar a.brand:visited {
6085-
color: #fff;
6103+
.navbar section.links div.section:not(:first-child):last-child {
6104+
-webkit-box-pack: end;
6105+
-ms-flex-pack: end;
6106+
justify-content: flex-end;
60866107
}
60876108

60886109
.navbar.fixed {
@@ -6101,6 +6122,25 @@ a.label.error, .label.error {
61016122
box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.23);
61026123
}
61036124

6125+
.navbar .buttons {
6126+
height: 100%;
6127+
min-height: 100%;
6128+
-webkit-box-shadow: none;
6129+
box-shadow: none;
6130+
}
6131+
6132+
.navbar .buttons .button {
6133+
background: transparent;
6134+
border-color: transparent;
6135+
border: none;
6136+
color: #fff;
6137+
min-height: 100%;
6138+
}
6139+
6140+
.navbar .buttons .button i, .navbar .buttons .button span.material-icons {
6141+
color: #fff;
6142+
}
6143+
61046144
.navbar .button, .navbar .dropdown .button {
61056145
font-size: 1.1em;
61066146
}
@@ -6109,6 +6149,80 @@ a.label.error, .label.error {
61096149
margin-top: 110px;
61106150
}
61116151

6152+
@media only screen and (max-width: 768px) {
6153+
.navbar .brand {
6154+
padding: 0 10px;
6155+
}
6156+
.navbar section.links {
6157+
position: absolute;
6158+
display: block;
6159+
width: 100%;
6160+
height: 0;
6161+
top: 80px;
6162+
left: 0;
6163+
overflow-x: auto;
6164+
overflow-y: hidden;
6165+
background: #e6e6e6;
6166+
z-index: 1;
6167+
-webkit-box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.23);
6168+
box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.23);
6169+
}
6170+
.navbar section.links .section, .navbar section.links .section .buttons, .navbar section.links .section .buttons .dropdown, .navbar section.links .section .buttons .dropdown .menu, .navbar section.links .section .buttons .dropdown .menu .button, .navbar section.links .section .buttons .dropdown .button, .navbar section.links .section .buttons .button {
6171+
display: block !important;
6172+
width: 100%;
6173+
text-align: left;
6174+
position: relative;
6175+
}
6176+
.navbar section.links .section .buttons .dropdown .button, .navbar section.links .section .buttons .button {
6177+
color: #3f4143;
6178+
}
6179+
.navbar section.links .section .buttons .dropdown .button i, .navbar section.links .section .buttons .dropdown .button span.material-icons, .navbar section.links .section .buttons .button i, .navbar section.links .section .buttons .button span.material-icons {
6180+
display: none;
6181+
}
6182+
.navbar section.links .section .buttons .dropdown .menu {
6183+
max-height: 100%;
6184+
-webkit-box-shadow: none;
6185+
box-shadow: none;
6186+
}
6187+
.navbar .burger {
6188+
display: -webkit-box;
6189+
display: -ms-flexbox;
6190+
display: flex;
6191+
-webkit-box-align: center;
6192+
-ms-flex-align: center;
6193+
align-items: center;
6194+
-webkit-box-pack: center;
6195+
-ms-flex-pack: center;
6196+
justify-content: center;
6197+
min-height: 80px;
6198+
min-width: 80px;
6199+
}
6200+
.navbar .burger::before {
6201+
content: "clear";
6202+
display: -webkit-box;
6203+
display: -ms-flexbox;
6204+
display: flex;
6205+
-webkit-box-align: center;
6206+
-ms-flex-align: center;
6207+
align-items: center;
6208+
-webkit-box-pack: center;
6209+
-ms-flex-pack: center;
6210+
justify-content: center;
6211+
}
6212+
.navbar input[type=checkbox]#burger:not(:checked) ~ section.links {
6213+
height: 0;
6214+
}
6215+
.navbar input[type=checkbox]#burger:checked ~ section.links {
6216+
height: auto;
6217+
}
6218+
.navbar input[type=checkbox]#burger:not(:checked) ~ .burger::before {
6219+
content: "dehaze";
6220+
}
6221+
.navbar input[type=checkbox]#burger:checked ~ .burger::before {
6222+
content: "clear";
6223+
}
6224+
}
6225+
61126226
.display-flex {
61136227
display: -webkit-box;
61146228
display: -ms-flexbox;

‎dist/punica.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/base/grid.html‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,68 @@
1111

1212
<body>
1313
<header class="navbar shadowed">
14-
<section class="section">
15-
<a href="../" class="brand" title="Punica CSS">
14+
<input type="checkbox" id="burger">
15+
<section class="brand">
16+
<a href="../" title="Punica CSS">
1617
<img src="../images/punica.png">
1718
</a>
18-
<div class="buttons force">
19-
<div class="dropdown large">
20-
<a class="button link invert toggle" tabindex="0">
21-
Base <span class="material-icons">keyboard_arrow_down</span>
22-
</a>
23-
<ul class="menu">
24-
<li class="item"><a href="./introduction.html">Introduction</a></li>
25-
<li class="item"><a href="./grid.html">Grid</a></li>
26-
</ul>
27-
</div>
28-
<div class="dropdown large">
29-
<a class="button link invert toggle" tabindex="0">
30-
Elements <span class="material-icons">keyboard_arrow_down</span>
31-
</a>
32-
<ul class="menu">
33-
<li class="item"><a href="../elements/button.html">Button & Dropdown</a></li>
34-
<li class="item"><a href="../elements/form.html">Form</a></li>
35-
<li class="item"><a href="../elements/icon.html">Icon</a></li>
36-
<li class="item"><a href="../elements/label.html">Label</a></li>
37-
<li class="item"><a href="../elements/table.html">Table</a></li>
38-
<li class="item"><a href="../elements/typography.html">Typography</a></li>
39-
</ul>
19+
</section>
20+
<section class="links">
21+
<div class="section">
22+
<div class="buttons">
23+
<div class="dropdown large">
24+
<a class="button toggle" tabindex="0">
25+
Base <span class="material-icons">keyboard_arrow_down</span>
26+
</a>
27+
<ul class="menu">
28+
<li class="item"><a href="./introduction.html">Introduction</a></li>
29+
<li class="item"><a href="./grid.html">Grid</a></li>
30+
</ul>
31+
</div>
32+
<div class="dropdown large">
33+
<a class="button toggle" tabindex="0">
34+
Elements <span class="material-icons">keyboard_arrow_down</span>
35+
</a>
36+
<ul class="menu">
37+
<li class="item"><a href="../elements/button.html">Button & Dropdown</a></li>
38+
<li class="item"><a href="../elements/form.html">Form</a></li>
39+
<li class="item"><a href="../elements/icon.html">Icon</a></li>
40+
<li class="item"><a href="../elements/label.html">Label</a></li>
41+
<li class="item"><a href="../elements/table.html">Table</a></li>
42+
<li class="item"><a href="../elements/typography.html">Typography</a></li>
43+
</ul>
44+
</div>
45+
<div class="dropdown large">
46+
<a class="button toggle" tabindex="0">
47+
Components <span class="material-icons">keyboard_arrow_down</span>
48+
</a>
49+
<ul class="menu">
50+
<li class="item"><a href="../components/alert.html">Alert</a></li>
51+
<li class="item"><a href="../components/badge.html">Badge</a></li>
52+
<li class="item"><a href="../components/billboard.html">Billboard</a></li>
53+
<li class="item"><a href="../components/breadcrumb.html">Breadcrumbs</a></li>
54+
<li class="item"><a href="../components/card.html">Card</a></li>
55+
<li class="item"><a href="../components/menu.html">Menu</a></li>
56+
<li class="item"><a href="../components/navbar.html">Navbar</a></li>
57+
<li class="item"><a href="../components/pagination.html">Pagination</a></li>
58+
<li class="item"><a href="../components/panel.html">Panel</a></li>
59+
<li class="item"><a href="../components/process.html">Process</a></li>
60+
<li class="item"><a href="../components/progress.html">Progress</a></li>
61+
<li class="item"><a href="../components/timeline.html">Timeline</a></li>
62+
<li class="item"><a href="../components/tooltip.html">Tooltip</a></li>
63+
</ul>
64+
</div>
4065
</div>
41-
<div class="dropdown large">
42-
<a class="button link invert toggle" tabindex="0">
43-
Components <span class="material-icons">keyboard_arrow_down</span>
66+
</div>
67+
<div class="section">
68+
<div class="buttons link invert shadowless">
69+
<a href="https://github.com/codeforms/Punica-CSS-Framework" target="_blank" class="button">
70+
<span class="material-icons mr-5">launch</span> Github
4471
</a>
45-
<ul class="menu">
46-
<li class="item"><a href="../components/alert.html">Alert</a></li>
47-
<li class="item"><a href="../components/badge.html">Badge</a></li>
48-
<li class="item"><a href="../components/billboard.html">Billboard</a></li>
49-
<li class="item"><a href="../components/breadcrumb.html">Breadcrumbs</a></li>
50-
<li class="item"><a href="../components/card.html">Card</a></li>
51-
<li class="item"><a href="../components/menu.html">Menu</a></li>
52-
<li class="item"><a href="../components/navbar.html">Navbar</a></li>
53-
<li class="item"><a href="../components/pagination.html">Pagination</a></li>
54-
<li class="item"><a href="../components/panel.html">Panel</a></li>
55-
<li class="item"><a href="../components/process.html">Process</a></li>
56-
<li class="item"><a href="../components/progress.html">Progress</a></li>
57-
<li class="item"><a href="../components/timeline.html">Timeline</a></li>
58-
<li class="item"><a href="../components/tooltip.html">Tooltip</a></li>
59-
</ul>
6072
</div>
6173
</div>
6274
</section>
63-
<section class="section mr-20">
64-
<div class="buttons force link invert shadowless">
65-
<a href="https://github.com/codeforms/Punica-CSS-Framework" target="_blank" class="button">
66-
<span class="material-icons mr-5">launch</span> Github
67-
</a>
68-
</div>
69-
</section>
75+
<label for="burger" class="burger"></label>
7076
</header>
7177

7278
<div class="container">

0 commit comments

Comments
 (0)