diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index acc5f3201e..9764009092 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 86914d83d3..76a58dfb12 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; diff --git a/docs/components.html b/docs/components.html index 046bd72804..67353828e8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -98,6 +98,7 @@
  • Labels
    • +
  • Badges
  • Typography
  • Thumbnails
  • Alerts
    • @@ -1200,6 +1201,102 @@ + +
    +
    +

    Badges Indicators and unread counts

    +
    +
    +
    +

    About

    +

    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.

    +
    +
    +

    Available classes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameExampleMarkup
    + Default + + 1 + + <span class="badge">1</span> +
    + Success + + 2 + + <span class="badge badge-success">2</span> +
    + Warning + + 4 + + <span class="badge badge-warning">4</span> +
    + Error + + 6 + + <span class="badge badge-error">1</span> +
    + Info + + 8 + + <span class="badge badge-info">8</span> +
    + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
    +
    +
    +
    + + +
    @@ -1591,11 +1688,6 @@ ... </div> - -

    Close icon

    diff --git a/docs/download.html b/docs/download.html index b7588ad478..04b1e6bb6c 100644 --- a/docs/download.html +++ b/docs/download.html @@ -108,6 +108,7 @@ + diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index a8aaeeff5f..54f3549324 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -22,6 +22,7 @@
  • {{_i}}Labels{{/i}}
    • +
  • {{_i}}Badges{{/i}}
  • {{_i}}Typography{{/i}}
  • {{_i}}Thumbnails{{/i}}
  • {{_i}}Alerts{{/i}}
    • @@ -1124,6 +1125,102 @@ + +
    +
    +

    {{_i}}Badges{{/i}} {{_i}}Indicators and unread counts{{/i}}

    +
    +
    +
    +

    About

    +

    {{_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}}

    +
    +
    +

    Available classes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
    + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
    + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
    + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
    + {{_i}}Error{{/i}} + + 6 + + <span class="badge badge-error">1</span> +
    + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
    + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
    +
    +
    +
    + + +
    @@ -1515,11 +1612,6 @@ ... </div> -
    -

    {{_i}}Close icon{{/i}}

    diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index ae995b8a4d..618bb3e1ee 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -32,6 +32,7 @@ + diff --git a/less/badges.less b/less/badges.less new file mode 100644 index 0000000000..6f74108ee3 --- /dev/null +++ b/less/badges.less @@ -0,0 +1,35 @@ +// 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 diff --git a/less/bootstrap.less b/less/bootstrap.less index 4b09b7aa62..0d380a0e2f 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -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";