1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @import './tag-filled';
|
8 | @import './tag-outline';
|
9 |
|
10 | @mixin nb-tag-theme() {
|
11 | nb-tag {
|
12 | border-style: nb-theme(tag-border-style);
|
13 | border-width: nb-theme(tag-border-width);
|
14 | border-radius: nb-theme(tag-border-radius);
|
15 |
|
16 | display: inline-flex;
|
17 | align-items: center;
|
18 |
|
19 | font-family: nb-theme(tag-text-font-family);
|
20 | text-transform: nb-theme(tag-text-transform);
|
21 |
|
22 | cursor: default;
|
23 |
|
24 | &.nb-transition {
|
25 | @include nb-component-animation(background-color, border-color, color);
|
26 | }
|
27 |
|
28 | @each $size in nb-get-sizes() {
|
29 | &.size-#{$size} {
|
30 | font-size: nb-theme(tag-#{$size}-text-font-size);
|
31 | font-weight: nb-theme(tag-#{$size}-text-font-weight);
|
32 | line-height: nb-theme(tag-#{$size}-text-line-height);
|
33 | padding: nb-theme(tag-#{$size}-padding);
|
34 | }
|
35 | }
|
36 |
|
37 | @include nb-tag-filled();
|
38 | @include nb-tag-outline();
|
39 | }
|
40 |
|
41 | .nb-tag-remove {
|
42 | cursor: pointer;
|
43 |
|
44 | @each $size in nb-get-sizes() {
|
45 | &.size-#{$size} {
|
46 | font-size: nb-theme(tag-#{$size}-text-line-height);
|
47 |
|
48 | @include nb-ltr() {
|
49 | margin-left: nb-theme(tag-#{$size}-close-offset);
|
50 | margin-right: nb-theme-var-negative(nb-theme(tag-#{$size}-close-offset));
|
51 | }
|
52 | @include nb-rtl() {
|
53 | margin-right: nb-theme(tag-#{$size}-close-offset);
|
54 | margin-left: nb-theme-var-negative(nb-theme(tag-#{$size}-close-offset));
|
55 | }
|
56 | }
|
57 | }
|
58 | }
|
59 | }
|