1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @import './input-statuses';
|
8 | @import './input-sizes';
|
9 | @import './input-shapes';
|
10 |
|
11 | @mixin nb-input-theme() {
|
12 |
|
13 | [nbInput] {
|
14 | @include nb-input-core-theme();
|
15 | @include input-statuses();
|
16 | @include input-sizes();
|
17 | @include input-shapes();
|
18 | }
|
19 |
|
20 | @include nb-form-field-root-component('[nbInput]');
|
21 |
|
22 | @each $size in nb-get-sizes() {
|
23 | @include nb-form-field-with-prefix('[nbInput].size-#{$size}', $size);
|
24 | @include nb-form-field-with-suffix('[nbInput].size-#{$size}', $size);
|
25 | }
|
26 | }
|
27 |
|
28 | @mixin nb-input-core-theme() {
|
29 | border-style: nb-theme(input-border-style);
|
30 | border-width: nb-theme(input-border-width);
|
31 | font-family: nb-theme(input-text-font-family);
|
32 | appearance: none;
|
33 |
|
34 | &.nb-transition {
|
35 | @include nb-component-animation(border, background-color, color, box-shadow);
|
36 | }
|
37 |
|
38 | &::placeholder {
|
39 | font-family: nb-theme(input-placeholder-text-font-family);
|
40 | text-overflow: ellipsis;
|
41 | }
|
42 |
|
43 | &:focus {
|
44 | outline: none;
|
45 | }
|
46 |
|
47 | &.input-full-width {
|
48 | width: 100%;
|
49 | }
|
50 | }
|