mirror of
https://github.com/atom/atom.git
synced 2026-04-06 03:02:13 -04:00
Add badge component
It's now part of core
This commit is contained in:
@@ -11,6 +11,7 @@
|
||||
|
||||
@import "workspace-view";
|
||||
@import "bootstrap-overrides";
|
||||
@import "badges";
|
||||
@import "buttons";
|
||||
@import "icons";
|
||||
@import "links";
|
||||
|
||||
64
static/badges.less
Normal file
64
static/badges.less
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
1
static/bootstrap.less
vendored
1
static/bootstrap.less
vendored
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user