Skip to content
GitLab
Commit 06d47561 authored by Mark Otto's avatar Mark Otto
Browse files

adding basic badges support

parent d2630ff8
2 merge requests!21422.0.2 wip,!1952Tabulation navigation with Typeahead
Hide whitespace changes
Inline Side-by-side
Showing
with 277 additions and 10 deletions
+277 -10
docs/assets/bootstrap.zip
+ 0
- 0
View file @ 06d47561
No preview for this file type
docs/assets/css/bootstrap.css
+ 45
- 0
View file @ 06d47561
......@@ -3216,6 +3216,51 @@ a.thumbnail:hover {
.label-inverse:hover {
background-color: #1a1a1a;
}
.badge {
padding: 2px 10px 3px;
font-size: 12.025px;
font-weight: bold;
color: #ffffff;
background-color: #999999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.badge:hover {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.badge-error {
background-color: #b94a48;
}
.badge-error:hover {
background-color: #953b39;
}
.badge-warning {
background-color: #f89406;
}
.badge-warning:hover {
background-color: #c67605;
}
.badge-success {
background-color: #468847;
}
.badge-success:hover {
background-color: #356635;
}
.badge-info {
background-color: #3a87ad;
}
.badge-info:hover {
background-color: #2d6987;
}
.badge-inverse {
background-color: #333333;
}
.badge-inverse:hover {
background-color: #1a1a1a;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0;
......
docs/components.html
+ 97
- 5
View file @ 06d47561
......@@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
......@@ -1200,6 +1201,102 @@
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>Badges <small>Indicators and unread counts</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>About</h3>
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
</div><!-- /.span -->
<div class="span8">
<h3>Available classes</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Default
</td>
<td>
<span class="badge">1</span>
</td>
<td>
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Success
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Warning
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Error
</td>
<td>
<span class="badge badge-error">6</span>
</td>
<td>
<code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Info
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
Inverse
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
......@@ -1591,11 +1688,6 @@
...
&lt;/div&gt;
</pre>
</div><!--/span-->
<div class="span4" style="display: none;">
<h2>Badges</h2>
<p>Use a badge on an element for an unread count or as a simple indicator.</p>
<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
</div><!--/span-->
<div class="span4">
<h2>Close icon</h2>
......
docs/download.html
+ 1
- 0
View file @ 06d47561
......@@ -108,6 +108,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> Labels</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> Badges</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
......
docs/templates/pages/components.mustache
+ 97
- 5
View file @ 06d47561
......@@ -22,6 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
......@@ -1124,6 +1125,102 @@
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>About</h3>
<p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
</div><!-- /.span -->
<div class="span8">
<h3>Available classes</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Name{{/i}}</th>
<th>{{_i}}Example{{/i}}</th>
<th>{{_i}}Markup{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{_i}}Default{{/i}}
</td>
<td>
<span class="badge">1</span>
</td>
<td>
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Success{{/i}}
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Warning{{/i}}
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Error{{/i}}
</td>
<td>
<span class="badge badge-error">6</span>
</td>
<td>
<code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Info{{/i}}
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Inverse{{/i}}
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
......@@ -1515,11 +1612,6 @@
...
&lt;/div&gt;
</pre>
</div><!--/span-->
<div class="span4" style="display: none;">
<h2>{{_i}}Badges{{/i}}</h2>
<p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
</div><!--/span-->
<div class="span4">
<h2>{{_i}}Close icon{{/i}}</h2>
......
docs/templates/pages/download.mustache
+ 1
- 0
View file @ 06d47561
......@@ -32,6 +32,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
......
less/badges.less 0 → 100644
+ 35
- 0
View file @ 06d47561
// BADGES
// ------
// Base
.badge {
padding: 2px 10px 3px;
font-size: @baseFontSize * .925;
font-weight: bold;
color: @white;
background-color: @grayLight;
.border-radius(10px);
}
// Hover state
.badge:hover {
color: @white;
text-decoration: none;
cursor: pointer;
}
// Colors
.badge-error { background-color: @errorText; }
.badge-error:hover { background-color: darken(@errorText, 10%); }
.badge-warning { background-color: @orange; }
.badge-warning:hover { background-color: darken(@orange, 10%); }
.badge-success { background-color: @successText; }
.badge-success:hover { background-color: darken(@successText, 10%); }
.badge-info { background-color: @infoText; }
.badge-info:hover { background-color: darken(@infoText, 10%); }
.badge-inverse { background-color: @grayDark; }
.badge-inverse:hover { background-color: darken(@grayDark, 10%); }
\ No newline at end of file
less/bootstrap.less
+ 1
- 0
View file @ 06d47561
......@@ -53,6 +53,7 @@
// Components: Misc
@import "thumbnails.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment