mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-19 15:08:08 +03:00
66 lines
1.5 KiB
Plaintext
66 lines
1.5 KiB
Plaintext
@import "ui-variables";
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
border-radius: 1em;
|
|
|
|
&: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(); // default
|
|
|
|
// Fixed size
|
|
&.badge-large { .badge-size(18px); }
|
|
&.badge-medium { .badge-size(14px); }
|
|
&.badge-small { .badge-size(10px); }
|
|
|
|
// Flexible size
|
|
// The size changes depending on the parent element
|
|
// Best used for larger sizes, since em's can cause rounding errors
|
|
&.badge-flexible {
|
|
@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;
|
|
}
|
|
|
|
}
|