spectrum-css/components/colorhandle/index.css at de78ff4aa64c578b1635940b7b7e5688c13b5dd5 · adobe/spectrum-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum-ColorHandle {
	/* outer border as box shadow on the colorhandle */
	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
	--spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
	--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);

	/* inner border as inset boxshadow on the colorhandle-inner */
	/* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
	--spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));

	/* @passthrough -- opacity checkerboard customization */
	--mod-opacity-checkerboard-position: 50%;

	display: block;
	position: absolute;
	z-index: 1; /* Be above */
	box-sizing: border-box;
	inline-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));
	block-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));

	margin-inline: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2));
	margin-block: calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-color-handle-size)) / 2));

	border-width: var(--mod-colorhandle-border-width, var(--spectrum-color-handle-border-width));
	border-color: var(--mod-colorhandle-border-color, var(--spectrum-white));
	border-style: solid;

	box-shadow: 0 0 0 var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color));

	border-radius: 100%;

	transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);

	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
	user-select: none; /* Prevent text selection when dragging the handle */

	&::after {
		content: "";
		inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
		inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
		position: absolute;
		display: block;
		inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
		block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
		border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%);
	}

	&.is-focused,
	&:focus-visible {
		/* Bigger handle when focused */
		inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));
		block-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));

		margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
		margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
		outline: none;
	}

	&.is-disabled {
		pointer-events: none;
		border-color: var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color));
		background: var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color));
		box-shadow: none;

		.spectrum-ColorHandle-inner {
			display: none;
		}
	}
}

.spectrum-ColorHandle-inner {
	border-radius: 100%;
	inline-size: 100%;
	block-size: 100%;
	box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-color-handle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
	background-color: var(--spectrum-picked-color);
}

@media (forced-colors: active) {
	.spectrum-ColorHandle {
		forced-color-adjust: none;

		&.is-disabled {
			border-color: GrayText;
			background: Canvas;
		}
	}
}