Skip to content

Demo styles #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

Demo styles #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fccf6e0
remove nmp stars on mobile
andreaalmeida Aug 29, 2016
95eacc5
changed npm stars code to mobile-first
andreaalmeida Aug 29, 2016
4df0bcf
added twitter and github to canjs homepage
andreaalmeida Aug 29, 2016
708d633
removed npm stars on mobile, added twitter and github buttons to head…
andreaalmeida Aug 30, 2016
5ae85c0
position chagnes to github star
andreaalmeida Aug 30, 2016
d1d6b73
demo styles incomplete
andreaalmeida Aug 30, 2016
338c2b7
styled demo tabs
andreaalmeida Sep 2, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docMap.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion static/canjs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,6 @@
@import "sidebar.less";
@import "content.less";
@import "module-list.less";
@import "footer.less";
@import "footer.less";
@import "title.less";
@import "demo.less";
54 changes: 54 additions & 0 deletions static/demo.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// demo
.demo {
border: none;
border-radius: 0;
background-color: transparent;
border-bottom: @border;
padding-bottom: 15px;
ul {
list-style: none;
padding: 0;
border-bottom: @border;
padding-left: 10px;
}
li.tab {
display: inline-block;
padding: 10px 15px;
color: @rain;
cursor: pointer;
border: solid 1px transparent;
margin-bottom: -1px;
margin-left: 5px;
}
li.tab.active {
font-weight: bold;
border: @border;
border-bottom: solid 2px white;
border-radius: 4px 4px 0 0;
color: @darkSkies;
background-color: white;
}
div.tab-content {
clear: both;
margin-top: 15px;
}
pre {
margin-bottom: 0px;
}
body.style-demo {
background-color: @clear;
padding: 10px;
}
}

// button styles
.btn-group {
position: relative;
display: inline-block;
vertical-align: middle;
}

button.btn.btn-default {
border: @border;
color: @code-color;
}
12 changes: 7 additions & 5 deletions static/header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,18 @@ header {

> li {
font-size: 14px;
padding: @gutter 0;
margin-right: @gutter;

> a {
margin-right: @gutter/2;
font-weight: 700;
font-size: 12px;
padding: 5px 10px;
padding: 2px 10px;
text-transform: uppercase;
line-height: 20px;
.border-radius;
border: 1px solid transparent;
border: 1px solid lighten(@link-color, 40%);
text-decoration: none;
background: white;

&:hover {
border: 1px solid lighten(@link-color, 40%);
Expand Down Expand Up @@ -218,4 +219,5 @@ label[for="nav-trigger"] {
.nav-trigger, label[for="nav-trigger"] {
display: none;
}
}
}

17 changes: 10 additions & 7 deletions static/module-list.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,27 +36,30 @@
white-space: nowrap;
padding-top: 1px;
padding-bottom: 1px;

@media screen and (min-width: @breakpoint) {
margin-left: @gutter;
}

}
iframe {
top: 4px;
top: 6px;
position: relative;
margin-left: 5px;

}
> ul {
.flex;
justify-content: flex-end;
margin-left: auto;
margin-bottom: 0;
flex-wrap: wrap;

display: none;

@media screen and (min-width: @breakpoint) {
display: unset;
}

> li {
display: inline-block;
}
}
}
}
}
}
8 changes: 7 additions & 1 deletion static/sidebar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,4 +103,10 @@
left: auto;
z-index: 3;
}
}
}






58 changes: 58 additions & 0 deletions static/social.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
ul.social-ul {
.flex;
justify-content: flex-end;
margin-left: auto;
margin-bottom: 0px;
flex-wrap: wrap;
display: none;
background: red;

@media screen and (min-width: @breakpoint){
display: unset;
}

li.social-li {
display: inline-block;
background: green;

.border-bottom;
margin-bottom: @gutter/2;

.flex;
align-items: flex-end;
flex-wrap: wrap;
padding-bottom: @gutter/2;

code {
border: 1px solid @gray;
font-size: 14px;
white-space: nowrap;
padding-top: 1px;
padding-bottom: 1px;
background: red;

@media screen and (min-width: @breakpoint) {
margin-left: @gutter;
}
}

strong {
font-size: 20px;
line-height: 25px;
margin-right: 5px;
}
small {
color: @gray;
font-size: 80%;
margin-right: 5px;
}

iframe {
top: 4px;
position: relative;
margin-left: 5px;
}

}
}

44 changes: 44 additions & 0 deletions static/title.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
ul.title-social{
float: right;
margin-top: -47px;
line-height: 1.6;
margin-bottom: @gutter;
list-style-type: disc;
display: none;

@media screen and (min-width: @breakpoint) {
display: unset;
}

> li{
list-style: none;
display: inline-block;
vertical-align: top;

iframe {
top: 1px;
position: relative;
margin-left: 5px;

}

}

code {
background: white;
border: 1px solid @gray;
font-size: 14px;
white-space: nowrap;
padding-top: 1px;
padding-bottom: 1px;
vertical-align: top;


@media screen and (min-width: @breakpoint) {
margin-left: @gutter;
}
}
}



6 changes: 5 additions & 1 deletion static/variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@

@gutter: 15px;
@breakpoint: 700px;
@sidebar-width: 200px;
@sidebar-width: 200px;
@border: 1px solid @border-color;
@rain: #4078c0;
@darkSkies: #484848;
@clear: white;
52 changes: 51 additions & 1 deletion templates/body.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,53 @@
<section class="body">
{{{chain "renderAsTemplate" "makeHtml" "makeLinks" body}}}
{{{chain "renderAsTemplate" "makeHtml" "makeLinks" body}}}
</section>



<section class="description">
<div class="demo_wrapper" data-demo-src="demos/button-groups/basic-example/demo.html">
<div class="demo">
<ul>
<li class="tab active" data-tab="demo">Demo</li>
<li class="tab" data-tab="html">HTML</li>
<li class="tab" data-tab="js">JS</li>
</ul>
<div class="tab-content" data-for="demo">
<div class="bs-example" data-example-id="simple-button-group">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="tab-content" data-for="html">
<pre class="prettyprint"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bs-example"</span><span class="pln"> </span><span class="atn">data-example-id</span><span class="pun">=</span><span class="atv">"simple-button-group"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"group"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Basic example"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">Left</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">Middle</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">Right</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>
</div>
<div class="tab-content" data-for="js">
<pre class="prettyprint lang-js">
<code>var Construct = require(&quot;can-construct&quot;);
var Animal = Construct.extend({
legs: 4
}, {
init: function(sound) {
this.sound = sound;
},
speak: function() {
console.log(this.sound);
}
});
</code>
</pre>
</div>
</div>
</div>
</section>


9 changes: 0 additions & 9 deletions templates/header.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,6 @@
</ul>

<ul class="navbar-items">
<li class="dropdown">
<a href="http://github.com/canjs/canjs">Github</a>
<ul class="dropdown-menu">
<li><a href="http://github.com/canjs/can-connect">can-connect</a></li>
<li><a href=".">can-set</a></li>
<li><a href=".">can-compute</a></li>
<li><a href=".">can-component</a></li>
</ul>
</li>
<li>
<a href="https://gitter.im/canjs/canjs">Chat</a>
</li>
Expand Down
2 changes: 2 additions & 0 deletions templates/sidebar.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


<nav class="sidebar">
{{#with (getCurrentTree)}}
{{>menu.mustache}}
Expand Down
13 changes: 13 additions & 0 deletions templates/title.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<section class="title">
<h1>{{getTitle .}} <!-- <small class="type">page</small> --></h1>

<ul class="title-social">

{{#if package}}
<li><code>npm install {{package}} --save</code></li>
{{/if}}

{{#if github}}
<li><a class="github-button" href="https://github.com/{{github}}" data-count-href="/{{github}}/stargazers" data-count-api="/repos/{{github}}#stargazers_count">Star</a></li>
{{/if}}

</ul>

</section>