address-autocomplete.scss — WooCommerce 10.9.4

woocommerce / assets / css / address-autocomplete.scss

woocommerce / assets / css Last commit date

address-autocomplete.scss

100 lines

1	.woocommerce-address-suggestions {
2	position: absolute;
3	z-index: 1000;
4	width: 100%;
5	max-width: 100%;
6	margin-top: 4px;
7	background: #fff;
8	border: 1px solid #ddd;
9	border-radius: 4px;
10	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
11	box-sizing: border-box;
12	display: none;
13
14	.suggestions-list {
15	list-style: none;
16	margin: 0;
17	padding: 0;
18	max-height: 200px;
19	overflow-y: auto;
20
21	li {
22	padding: 8px 12px;
23	font-size: 14px;
24	cursor: pointer;
25	text-overflow: ellipsis;
26	overflow: hidden;
27	white-space: nowrap;
28	color: var(--wc-form-color-text, #444);
29
30	&:last-child {
31	border-bottom: none;
32	}
33
34	&:hover,
35	&.active {
36	background-color: var(--wp-admin-theme-color, #0073aa);
37	color: #fff;
38	}
39
40	&:focus {
41	outline: none;
42	background-color: var(--wp-admin-theme-color, #0073aa);
43	color: #fff;
44	}
45	}
46	}
47
48	.woocommerce-address-autocomplete-branding {
49	background: #d3d3d3;
50	padding: 8px 12px;
51	color: rgba(34, 34, 34, 0.66);
52	font-size: 12px;
53	display: flex;
54	align-items: center;
55	}
56	}
57
58	// Ensure the input container has relative positioning
59	.woocommerce-input-wrapper:has(#billing_address_1, #shipping_address_1) {
60	position: relative;
61	display: block;
62
63	// Default to showing nothing if autocomplete is not available.
64	.address-search-icon {
65	display: none;
66	}
67
68	// Search icon styles
69	&.autocomplete-available {
70	input#billing_address_1,
71	input#shipping_address_1 {
72	padding-right: calc(1.1rem + 16px); // Adjust padding for icon
73	}
74
75	.address-search-icon {
76	display: block;
77	position: absolute;
78	inset-inline-end: 16px;
79	top: 50%;
80	transform: translateY(-50%);
81	pointer-events: none;
82	width: 16px;
83	height: 16px;
84	line-height: 16px;
85	z-index: 1;
86
87	// Mask needed to ensure the SVG has the correct color.
88	background-color: var(--wc-form-color-text, #444);
89	mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
90	no-repeat center;
91	mask-size: contain;
92
93	// Safari support.
94	-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxNCIgZm9jdXNhYmxlPSJmYWxzZSIgYXJpYS1oaWRkZW49InRydWUiPgogIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSI+PC9jaXJjbGU+CiAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTkuMjUgOS4yNSAyLjUgMi41Ij48L3BhdGg+Cjwvc3ZnPg==")
95	no-repeat center;
96	-webkit-mask-size: contain;
97	}
98	}
99	}
100