Skip to content

Commit d4e3343

Browse files
author
Joe Crick
committed
(master): Incremental: Mock is working
1 parent 16f14b6 commit d4e3343

12 files changed

+242
-137
lines changed

‎baby-blue.css

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -935,7 +935,7 @@ aside a, aside a:visited {
935935
position: relative;
936936
padding-left: 0;
937937
}
938-
#layout.active #menu {
938+
#layout.active .pcssc-menu {
939939
left: 160px;
940940
width: 160px;
941941
}
@@ -1119,7 +1119,7 @@ code {
11191119

11201120
/* Add transition to containers so they can push in and out */
11211121
#layout,
1122-
#menu,
1122+
.pcssc-menu,
11231123
.menu-link {
11241124
-webkit-transition: all 0.2s ease-out;
11251125
-moz-transition: all 0.2s ease-out;
@@ -1132,8 +1132,8 @@ code {
11321132
left: 160px;
11331133
}
11341134

1135-
#menu {
1136-
margin-left: -160px; /* "#menu" width */
1135+
.pcssc-menu {
1136+
margin-left: -160px; /* ".pcssc-menu" width */
11371137
width: 160px;
11381138
position: fixed;
11391139
top: 0;
@@ -1144,39 +1144,39 @@ code {
11441144
overflow-y: auto;
11451145
-webkit-overflow-scrolling: touch;
11461146
}
1147-
#menu a {
1147+
.pcssc-menu a {
11481148
color: #999;
11491149
border: none;
11501150
white-space: normal;
11511151
padding: 0.625em 1em;
11521152
}
11531153

1154-
#menu .pure-menu-open {
1154+
.pcssc-menu .pure-menu-open {
11551155
background: transparent;
11561156
border: 0;
11571157
}
11581158

1159-
#menu .pure-menu ul {
1159+
.pcssc-menu .pure-menu ul {
11601160
border: none;
11611161
background: transparent;
11621162
display: block;
11631163
}
11641164

1165-
#menu .pure-menu ul,
1166-
#menu .pure-menu .menu-item-divided {
1165+
.pcssc-menu .pure-menu ul,
1166+
.pcssc-menu .pure-menu .menu-item-divided {
11671167
border-top: 1px solid #333;
11681168
}
11691169

1170-
#menu .pure-menu li a:hover,
1171-
#menu .pure-menu li a:focus {
1170+
.pcssc-menu .pure-menu li a:hover,
1171+
.pcssc-menu .pure-menu li a:focus {
11721172
background: #333;
11731173
}
11741174

11751175
.menu-link {
11761176
position: fixed;
11771177
display: block; /* show this only on small screens */
11781178
top: 0;
1179-
left: 0; /* "#menu width" */
1179+
left: 0; /* ".pcssc-menu width" */
11801180
background: #000;
11811181
background: rgba(0,0,0,0.7);
11821182
font-size: 11px; /* change this value to increase/decrease button size */
@@ -1241,7 +1241,7 @@ code {
12411241
transform: rotate(-45deg) translate(.4em, -.3em);
12421242
}
12431243

1244-
#menu .pure-menu-heading {
1244+
.pcssc-menu .pure-menu-heading {
12451245
font-size: 125%;
12461246
font-weight: 300;
12471247
letter-spacing: 0.1em;
@@ -1250,21 +1250,21 @@ code {
12501250
padding: 0.5em 0.8em;
12511251
text-transform: uppercase;
12521252
}
1253-
#menu .pure-menu-heading:hover,
1254-
#menu .pure-menu-heading:focus {
1253+
.pcssc-menu .pure-menu-heading:hover,
1254+
.pcssc-menu .pure-menu-heading:focus {
12551255
color: #999;
12561256
}
12571257

1258-
#menu .pure-menu-selected {
1258+
.pcssc-menu .pure-menu-selected {
12591259
background: #1f8dd6;
12601260
}
12611261

1262-
#menu .pure-menu-selected a {
1262+
.pcssc-menu .pure-menu-selected a {
12631263
color: #fff;
12641264
}
12651265

1266-
#menu li.pure-menu-selected a:hover,
1267-
#menu li.pure-menu-selected a:focus {
1266+
.pcssc-menu li.pure-menu-selected a:hover,
1267+
.pcssc-menu li.pure-menu-selected a:focus {
12681268
background: none;
12691269
}
12701270

@@ -1464,10 +1464,10 @@ a.pure-button-primary {
14641464
@media (min-width: 58em) {
14651465

14661466
#layout {
1467-
padding-left: 160px; /* left col width "#menu" */
1467+
padding-left: 160px; /* left col width ".pcssc-menu" */
14681468
left: 0;
14691469
}
1470-
#menu {
1470+
.pcssc-menu {
14711471
left: 160px;
14721472
}
14731473
.menu-link {

‎index.html

Lines changed: 86 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,55 +16,73 @@
1616
<body>
1717

1818
<div id="layout">
19-
<a href="#menu" id="menuLink" class="menu-link">
20-
<span></span>
21-
</a>
22-
<div id="menu">
23-
<div class="pure-menu">
24-
<a class="pure-menu-heading" href="#top">Pure
25-
<div class="small-caps">components</div>
26-
</a>
27-
<ul class="pure-menu-list">
28-
<li class="pure-menu-item">
29-
<a href="#installation" class="pure-menu-link">Installation</a>
30-
</li>
31-
<li class="pure-menu-item menu-item-divided">
32-
<a href="#accordion" class="pure-menu-link">Accordion</a>
33-
</li>
34-
<li class="pure-menu-item">
35-
<a href="#alert" class="pure-menu-link">Alert</a>
36-
</li>
37-
<li class="pure-menu-item">
38-
<a href="#carousel" class="pure-menu-link">Carousel</a>
39-
</li>
40-
<li class="pure-menu-item">
41-
<a href="#collapse" class="pure-menu-link">Collapse</a>
42-
</li>
43-
<li class="pure-menu-item">
44-
<a href="#dropdown" class="pure-menu-link">Dropdown</a>
45-
</li>
46-
<li class="pure-menu-item">
47-
<a href="#modal" class="pure-menu-link">Modal</a>
48-
</li>
49-
<li class="pure-menu-item">
50-
<a href="#popover" class="pure-menu-link">Popover</a>
51-
</li>
52-
<li class="pure-menu-item">
53-
<a href="#tabs" class="pure-menu-link">Tabs</a>
54-
</li>
55-
<li class="pure-menu-item">
56-
<a href="#tooltip" class="pure-menu-link">Tooltip</a>
57-
</li>
58-
<li class="pure-menu-item menu-item-divided ">
59-
<a href="#js-utils" class="pure-menu-link">JS Utils</a>
60-
</li>
61-
<li class="pure-menu-item menu-item-divided ">
62-
<a href="https://github.com/joe-crick/pure-css-components/releases" class="pure-menu-link">Releases</a>
63-
</li>
64-
</ul>
19+
20+
<div class="position-fix-this">
21+
<div tabindex="0" class="menu-link dropdown">
22+
<span></span>
6523
</div>
24+
<ul class="dropdown-content pure-menu-list pure-menu">
25+
<li class="pure-menu-item">
26+
<a href="#collapse" class="pure-menu-link">Collapse</a>
27+
</li>
28+
<li class="pure-menu-item">
29+
<a href="#dropdown" class="pure-menu-link">Dropdown</a>
30+
</li>
31+
</ul>
6632
</div>
6733

34+
<!--<div class="full-page-menu">-->
35+
<!--<a href="#menu" id="menuLink" class="menu-link pcssc-menu-extend">-->
36+
<!--<span></span>-->
37+
<!--</a>-->
38+
<!--<div class="pcssc-menu">-->
39+
<!--<div class="pure-menu">-->
40+
<!--<a class="pure-menu-heading" href="#top">Pure-->
41+
<!--<div class="small-caps">components</div>-->
42+
<!--</a>-->
43+
<!--<ul class="pure-menu-list">-->
44+
<!--<li class="pure-menu-item">-->
45+
<!--<a href="#installation" class="pure-menu-link">Installation</a>-->
46+
<!--</li>-->
47+
<!--<li class="pure-menu-item menu-item-divided">-->
48+
<!--<a href="#accordion" class="pure-menu-link">Accordion</a>-->
49+
<!--</li>-->
50+
<!--<li class="pure-menu-item">-->
51+
<!--<a href="#alert" class="pure-menu-link">Alert</a>-->
52+
<!--</li>-->
53+
<!--<li class="pure-menu-item">-->
54+
<!--<a href="#carousel" class="pure-menu-link">Carousel</a>-->
55+
<!--</li>-->
56+
<!--<li class="pure-menu-item">-->
57+
<!--<a href="#collapse" class="pure-menu-link">Collapse</a>-->
58+
<!--</li>-->
59+
<!--<li class="pure-menu-item">-->
60+
<!--<a href="#dropdown" class="pure-menu-link">Dropdown</a>-->
61+
<!--</li>-->
62+
<!--<li class="pure-menu-item">-->
63+
<!--<a href="#modal" class="pure-menu-link">Modal</a>-->
64+
<!--</li>-->
65+
<!--<li class="pure-menu-item">-->
66+
<!--<a href="#popover" class="pure-menu-link">Popover</a>-->
67+
<!--</li>-->
68+
<!--<li class="pure-menu-item">-->
69+
<!--<a href="#tabs" class="pure-menu-link">Tabs</a>-->
70+
<!--</li>-->
71+
<!--<li class="pure-menu-item">-->
72+
<!--<a href="#tooltip" class="pure-menu-link">Tooltip</a>-->
73+
<!--</li>-->
74+
<!--<li class="pure-menu-item menu-item-divided ">-->
75+
<!--<a href="#js-utils" class="pure-menu-link">JS Utils</a>-->
76+
<!--</li>-->
77+
<!--<li class="pure-menu-item menu-item-divided ">-->
78+
<!--<a href="https://github.com/joe-crick/pure-css-components/releases"-->
79+
<!--class="pure-menu-link">Releases</a>-->
80+
<!--</li>-->
81+
<!--</ul>-->
82+
<!--</div>-->
83+
<!--</div>-->
84+
<!--</div>-->
85+
6886
<div id="main">
6987
<a href="https://github.com/you">
7088
<img style="position: absolute; top: 0; right: 0; border: 0;"
@@ -107,17 +125,21 @@ <h2 class="content-subhead">Pure CSS Components<a class="content-link"></a></h2>
107125
</p>
108126
<p>
109127
Like Pure CSS, Pure.CSS Components is very small. It is only 2KB* (minified and zipped). Each
110-
component is also available as a module. So, if you only need modals, and nothing else, you don't have to
128+
component is also available as a module. So, if you only need modals, and nothing else, you
129+
don't have to
111130
include the entire package.
112131
</p>
113132
<p>
114133
Finally, please note that Pure.CSS Components makes liberal use of
115-
<a href="http://caniuse.com/#search=flexbox" target="_blank"><strong>flexbox</strong></a>. Therefore,
134+
<a href="http://caniuse.com/#search=flexbox" target="_blank"><strong>flexbox</strong></a>.
135+
Therefore,
116136
it is only supported on more modern browsers (IE11*, FF 50, Chrome 49, Safari 10, Opera 43).
117137
</p>
118138
<p>
119-
*IE11, which has a known buggy implementation of flexbox, has been quickly tested. My quick tests indicated
120-
that you shouldn't have any problems using Pure.CSS Components on IE11; however, <em>caveat emptor</em>.
139+
*IE11, which has a known buggy implementation of flexbox, has been quickly tested. My quick
140+
tests indicated
141+
that you shouldn't have any problems using Pure.CSS Components on IE11; however, <em>caveat
142+
emptor</em>.
121143
</p>
122144
</div>
123145

@@ -818,7 +840,8 @@ <h2>Heading 3</h2>
818840
<h3>Side tabs</h3>
819841

820842
<p>
821-
Note: Side tab content is positioned absolutely. You will (currently) need to set the distance of the tab
843+
Note: Side tab content is positioned absolutely. You will (currently) need to set the distance
844+
of the tab
822845
content from the tabs. For example, for a left-side tab:
823846
</p>
824847
<p>
@@ -868,15 +891,18 @@ <h2>Heading 3</h2>
868891
</ul>
869892

870893
<p>
871-
To make tab headings left sided, simply add the <strong>left-accordion-side</strong> class to the
894+
To make tab headings left sided, simply add the <strong>left-accordion-side</strong> class to
895+
the
872896
tab set:
873897
</p>
874898

875-
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
899+
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
900+
style="margin: 0; line-height: 125%">
876901
&lt;ul class=<span style="color: #a31515">&quot;accordion accordion-tab left-accordion-side&quot;</span>&gt;
877902
<span style="color: #008000">&lt;!-- Tab Content Here --&gt;</span>
878903
&lt;/ul&gt;
879-
</pre></div>
904+
</pre>
905+
</div>
880906

881907
<a name="right-side-tabs"></a>
882908
<h4>Right side tabs</h4>
@@ -918,15 +944,18 @@ <h2>Heading 3</h2>
918944
</ul>
919945

920946
<p>
921-
To make tab headings right sided, simply add the <strong>right-accordion-side</strong> class to the
947+
To make tab headings right sided, simply add the <strong>right-accordion-side</strong> class to
948+
the
922949
tab set:
923950
</p>
924951

925-
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
952+
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
953+
style="margin: 0; line-height: 125%">
926954
&lt;ul class=<span style="color: #a31515">&quot;accordion accordion-tab right-accordion-side&quot;</span>&gt;
927955
<span style="color: #008000">&lt;!-- Tab Content Here --&gt;</span>
928956
&lt;/ul&gt;
929-
</pre></div>
957+
</pre>
958+
</div>
930959

931960

932961
</div>

0 commit comments

Comments
 (0)