Skip to content

Commit

Permalink
Remove horizontal padding for .demo and move top examples into Boot…
Browse files Browse the repository at this point in the history 
…strap's `.container-fluid`.
  • Loading branch information
Florian Kissling committed Apr 8, 2015
1 parent 4a64870 commit bcfe877
Show file tree
Hide file tree
Showing 12 changed files with 1,031 additions and 991 deletions.
196 changes: 100 additions & 96 deletions _jekyll/_layouts/default.html
View file
Expand Up @@ -4,120 +4,124 @@
<body>
{% include navbar.html %}

<div class="form-group">
<label for="default" class="control-label">Default textbox</label>
<input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>

<div class="form-group">
<label for="single" class="control-label">Select2 single select</label>
<select id="single" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>

<div class="form-group">
<label for="multiple" class="control-label">Select2 multi select</label>
<select id="multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>

<div class="page-header">
<h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups" ><span class="glyphicon glyphicon-link"></span></a></small></h3>
</div>
<div class="container-fluid">

<p>To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add <code>.select2-bootstrap-prepend</code> and/or <code>.select2-bootstrap-append</code> to the <code>.input-group</code> wrapper element to address the corresponding border-radii.</p>
<div class="form-group">
<label for="default" class="control-label">Default textbox</label>
<input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>

<div class="form-group">
<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class="form-control select2-allow-clear">
<div class="form-group">
<label for="single" class="control-label">Select2 single select</label>
<select id="single" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>

<div class="form-group">
<label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="radio">
</span>
<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
<option></option>
<div class="form-group">
<label for="multiple" class="control-label">Select2 multi select</label>
<select id="multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>

<div class="form-group">
<label for="single-append-text" class="control-label">Select2 append</label>
<div class="input-group select2-bootstrap-append">
<select id="single-append-text" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-append-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<div class="page-header">
<h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups" ><span class="glyphicon glyphicon-link"></span></a></small></h3>
</div>
</div>

<div class="form-group">
<label for="single-prepend-text" class="control-label">Select2 prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="single-prepend-text" class="form-control select2">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add <code>.select2-bootstrap-prepend</code> and/or <code>.select2-bootstrap-append</code> to the <code>.input-group</code> wrapper element to address the corresponding border-radii.</p>

<div class="form-group">
<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>

<div class="form-group">
<label for="multi-append" class="control-label">Select2 multi append</label>
<div class="input-group select2-bootstrap-append">
<select id="multi-append" class="form-control select2" multiple>
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-append">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<div class="form-group">
<label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="radio">
</span>
<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>

<div class="form-group">
<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-prepend">
State
</button>
</span>
<select id="multi-prepend" class="form-control select2" multiple>
<option></option>
<div class="form-group">
<label for="single-append-text" class="control-label">Select2 append</label>
<div class="input-group select2-bootstrap-append">
<select id="single-append-text" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-append-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>

<div class="form-group">
<label for="single-prepend-text" class="control-label">Select2 prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="single-prepend-text" class="form-control select2">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>

<div class="form-group">
<label for="multi-append" class="control-label">Select2 multi append</label>
<div class="input-group select2-bootstrap-append">
<select id="multi-append" class="form-control select2" multiple>
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-append">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>

<div class="form-group">
<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-prepend">
State
</button>
</span>
<select id="multi-prepend" class="form-control select2" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>

</div>

<div class="container">
Expand Down Expand Up @@ -389,7 +393,7 @@ <h3>Disabled inputs <small><a href="http://getbootstrap.com/css/#forms-control-s
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}

markup += "<div class='select2-result-repository__statistics'>" +
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
Expand Down
6 changes: 3 additions & 3 deletions _jekyll/css/gh-pages.sass
View file
Expand Up @@ -12,7 +12,7 @@ a
text-decoration: none

.demo
padding: 80px 30px 0
padding-top: 80px
.footer
padding-top: 200px
padding-bottom: 80px
Expand All @@ -22,7 +22,7 @@ a
padding-bottom: 30px
@extend %background-image
background-position: 50% 50%
body
body
background-color: transparent
.container
max-width: 700px
Expand Down Expand Up @@ -77,7 +77,7 @@ a
padding-left: 0
list-style: none
font-size: 14px
li
li
display: inline
margin-left: 2px
margin-right: 2px
Expand Down

0 comments on commit bcfe877

Please sign in to comment.