UNPKG

1.77 kBSCSSView Raw
1/**
2 * @license
3 * Copyright Akveo. All Rights Reserved.
4 * Licensed under the MIT License. See License.txt in the project root for license information.
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}