Add badge component

It's now part of core
This commit is contained in:
simurai
2015-01-30 19:53:42 +09:00
parent b02d0e3df3
commit ebad1eeb6a
3 changed files with 65 additions and 1 deletions

View File

@@ -11,6 +11,7 @@
@import "workspace-view";
@import "bootstrap-overrides";
@import "badges";
@import "buttons";
@import "icons";
@import "links";

64
static/badges.less Normal file
View File

@@ -0,0 +1,64 @@
@import "ui-variables";
.badge {
display: inline-block;
line-height: 1;
vertical-align: middle;
font-weight: normal;
text-align: center;
white-space: nowrap;
color: @text-color;
border-radius: 1em;
background-color: @background-color-highlight;
&:empty {
display: none; // Hide when un-used
}
// Color ----------------------
.badge-color( @fg: @text-color-selected;
@bg: @background-color-selected; ) {
color: @fg;
background-color: @bg;
}
.badge-color();
&.badge-info { .badge-color(white, @background-color-info); }
&.badge-success { .badge-color(white, @background-color-success); }
&.badge-warning { .badge-color(white, @background-color-warning); }
&.badge-error { .badge-color(white, @background-color-error); }
// Size ----------------------
.badge-size( @size: @font-size; ) {
@padding: round(@size/4);
font-size: @size;
min-width: @size + @padding*2;
padding: @padding round(@padding*1.5);
}
.badge-size();
&.badge-large { .badge-size(18px); }
&.badge-medium { .badge-size(14px); }
&.badge-small { .badge-size(10px); }
// TODO: un-dry this, no rouding of badge-size()
// adjusts to parent element, best used for larger sizes
&.badge-parent {
@size: .8em;
@padding: @size/2;
font-size: @size;
min-width: @size + @padding*2;
padding: @padding @padding*1.5;
}
// Icon ----------------------
&.icon {
font-size: round(@component-icon-size*0.8);
padding: @component-icon-padding @component-icon-padding*2;
}
}

View File

@@ -19,7 +19,6 @@
@import "../node_modules/bootstrap/less/input-groups.less";
@import "../node_modules/bootstrap/less/navs.less";
@import "../node_modules/bootstrap/less/labels.less";
@import "../node_modules/bootstrap/less/badges.less";
@import "../node_modules/bootstrap/less/alerts.less";
@import "../node_modules/bootstrap/less/list-group.less";
@import "../node_modules/bootstrap/less/thumbnails.less";