1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @mixin nb-tag-list-theme() {
|
8 | nb-tag-list {
|
9 | display: inline-flex;
|
10 | outline: none;
|
11 |
|
12 | @each $size in nb-get-sizes() {
|
13 | &.size-#{$size} {
|
14 | .nb-tag-list-tags-wrapper {
|
15 | margin: nb-theme-var-negative(nb-theme(tag-list-#{$size}-tag-offset));
|
16 |
|
17 | nb-tag,
|
18 | .nb-tag-input {
|
19 | margin: nb-theme(tag-list-#{$size}-tag-offset);
|
20 | }
|
21 | }
|
22 | }
|
23 | }
|
24 | }
|
25 |
|
26 | .nb-tag-list-tags-wrapper {
|
27 | display: inline-flex;
|
28 | align-items: center;
|
29 | align-content: center;
|
30 | flex-wrap: wrap;
|
31 | flex: 1;
|
32 | }
|
33 |
|
34 | .nb-tag-list-with-input {
|
35 | @include nb-input-core-theme();
|
36 |
|
37 | @each $shape in nb-get-shapes() {
|
38 | &.shape-#{$shape} {
|
39 | border-radius: nb-theme(tag-list-with-input-#{$shape}-border-radius);
|
40 | }
|
41 | }
|
42 |
|
43 | @each $size in nb-get-sizes() {
|
44 | &.size-#{$size} {
|
45 | padding: nb-theme(tag-list-with-input-#{$size}-padding);
|
46 | }
|
47 | }
|
48 |
|
49 | @each $status in nb-get-statuses() {
|
50 | &.status-#{$status} {
|
51 | background-color: nb-theme(tag-input-#{$status}-background-color);
|
52 | border-color: nb-theme(tag-input-#{$status}-border-color);
|
53 |
|
54 | &.focus {
|
55 | background-color: nb-theme(tag-input-#{$status}-focus-background-color);
|
56 | border-color: nb-theme(tag-input-#{$status}-focus-border-color);
|
57 | }
|
58 | }
|
59 | }
|
60 | }
|
61 |
|
62 | @include nb-form-field-root-component('nb-tag-list');
|
63 |
|
64 | @each $size in nb-get-sizes() {
|
65 | @include nb-form-field-with-prefix('.nb-tag-list-with-input.size-#{$size}', $size);
|
66 | @include nb-form-field-with-suffix('.nb-tag-list-with-input.size-#{$size}', $size);
|
67 | }
|
68 | }
|