1 | @import '~terra-mixins/lib/Mixins';
|
2 |
|
3 | :local {
|
4 | .search-field {
|
5 | display: inline-flex;
|
6 | min-width: 0;
|
7 | width: var(--terra-search-field-max-width, 16.5rem);
|
8 |
|
9 | .input-group {
|
10 | display: inline-flex;
|
11 | flex: 1 1 auto;
|
12 | margin: 0;
|
13 | padding: 0;
|
14 | position: relative;
|
15 | }
|
16 |
|
17 | .input {
|
18 | appearance: none;
|
19 | border-bottom-left-radius: var(--terra-search-field-input-border-bottom-left-radius, 3px);
|
20 | border-bottom-right-radius: 0;
|
21 | border-top-left-radius: var(--terra-search-field-input-border-top-left-radius, 3px);
|
22 | border-top-right-radius: 0;
|
23 | flex: 1 1 auto;
|
24 | margin-bottom: var(--terra-search-field-input-margin-bottom, 0);
|
25 | margin-left: var(--terra-search-field-input-margin-left, 0);
|
26 | margin-right: var(--terra-search-field-input-margin-right, 0);
|
27 | margin-top: var(--terra-search-field-input-margin-top, 0);
|
28 | min-width: 0;
|
29 | outline-offset: -0.143em;
|
30 | padding-right: var(--terra-search-field-input-padding-right, 2.28571rem);
|
31 | }
|
32 |
|
33 | .input::-ms-clear,
|
34 | .input::-ms-reveal {
|
35 | display: none;
|
36 | }
|
37 |
|
38 | .input::-webkit-search-cancel-button {
|
39 | // Remove webkit search clear functionality
|
40 | display: none;
|
41 | }
|
42 |
|
43 | .input::-webkit-search-decoration {
|
44 | // Get rid of extra left-padding getting added in Safari for search fields
|
45 | appearance: none;
|
46 | }
|
47 |
|
48 | .clear {
|
49 | display: block;
|
50 | flex: 0 0 auto;
|
51 | margin: 0;
|
52 | position: absolute;
|
53 | right: var(-terra-search-field-clear-right, 0);
|
54 | top: var(-terra-search-field-clear-top, 0);
|
55 |
|
56 | &:active {
|
57 | background-color: var(--terra-search-field-clear-active-background-color, transparent);
|
58 | }
|
59 |
|
60 | &:focus {
|
61 | border-color: var(--terra-search-field-button-focus-border-color, #26a2e5);
|
62 | z-index: 1;
|
63 | }
|
64 | }
|
65 |
|
66 | .clear-icon {
|
67 | background-image: var(--terra-search-field-clear-icon-background-image, inline-svg("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='#909496' d='M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0zm13.9 33.8l-2.1 2.1-1.2 1.2-1 .9-9.6-9.7-9.6 9.7-2.2-2.1-1.1-1.1-1-1 9.7-9.8-9.7-9.8 1-1 1.1-1.1 2.2-2.1 9.6 9.7 9.6-9.7 1 .9 1.2 1.2 2.1 2.1-9.7 9.8 9.7 9.8z'/></svg>"));
|
68 | display: inline-block;
|
69 | height: var(--terra-search-field-clear-icon-height, 1.14286rem);
|
70 | margin-top: var(--terra-search-field-clear-icon-margin-top, -0.214285rem);
|
71 | vertical-align: middle;
|
72 | width: var(--terra-search-field-clear-icon-width, 1.14286rem);
|
73 | }
|
74 |
|
75 | .button {
|
76 | border: var(--terra-search-field-button-border, 1px solid #dedfe0);
|
77 | border-bottom-left-radius: 0;
|
78 | border-bottom-right-radius: var(--terra-search-field-button-border-bottom-right-radius, 3px);
|
79 | border-top-left-radius: 0;
|
80 | border-top-right-radius: var(--terra-search-field-button-border-top-right-radius, 3px);
|
81 | box-shadow: var(--terra-search-field-button-box-shadow);
|
82 | color: var(--terra-search-field-button-icon-color);
|
83 | display: inline-block;
|
84 | flex: 0 0 auto;
|
85 | margin-bottom: var(--terra-search-field-button-margin-bottom, 0);
|
86 | margin-left: var(--terra-search-field-button-margin-left, -1px);
|
87 | margin-right: var(--terra-search-field-button-margin-right, 0);
|
88 | margin-top: var(--terra-search-field-button-margin-top, 0);
|
89 |
|
90 | &:focus {
|
91 | border-color: var(--terra-search-field-button-focus-border-color, #26a2e5);
|
92 | box-shadow: var(--terra-search-field-button-focus-box-shadow, 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35));
|
93 | outline: none;
|
94 | z-index: 1;
|
95 | }
|
96 | }
|
97 |
|
98 | &.block {
|
99 | display: flex;
|
100 | width: 100%;
|
101 | }
|
102 |
|
103 | }
|
104 | }
|