Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4069526
CdxSelect.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
6 KB
Referenced Files
None
Subscribers
None
CdxSelect.css
View Options
.
cdx-select
{
align-content
:
center
;
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-top
:
4
px
;
padding-bottom
:
4
px
;
padding-left
:
8
px
;
padding-right
:
calc
(
8
px
+
8
px
+
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
));
font-size
:
var
(
--font-size-medium
,
1
rem
);
line-height
:
1
;
-webkit-
appearance
:
none
;
appearance
:
none
;
background-position
:
center
right
12
px
;
background-repeat
:
no-repeat
;
background-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
-
4
px
),
10
px
)}.
cdx-select
:
disabled
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#a2a9b1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
);
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23a2a9b1"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
);
opacity
:
1
}.
cdx-select
:
enabled
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-subtle
,
#54595d
);
border-color
:
var
(
--border-color-interactive
,
#72777d
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
;
background-image
:
url
(
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23202122"><path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/></svg>'
)}.
cdx-select
:
enabled
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle--hover
,
#eaecf0
);
border-color
:
var
(
--border-color-interactive--hover
,
#27292d
);
cursor
:
pointer
}.
cdx-select
:
enabled
:
active
{
background-color
:
var
(
--background-color-interactive-subtle--active
,
#dadde3
);
border-color
:
var
(
--border-color-interactive--active
,
#202122
)}.
cdx-select
:
enabled
:
focus
:
not
(
:
active
)
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-select-vue
{
display
:
inline-block
;
position
:
relative
}.
cdx-select-vue__handle
{
align-content
:
center
;
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
border-radius
:
2
px
;
padding-top
:
4
px
;
padding-bottom
:
4
px
;
padding-left
:
8
px
;
padding-right
:
calc
(
8
px
+
8
px
+
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
));
font-size
:
var
(
--font-size-medium
,
1
rem
);
line-height
:
1
;
position
:
relative
;
width
:
100
%
}.
cdx-select-vue--has-start-icon
.
cdx-select-vue__handle
{
padding-left
:
calc
(
8
px
+
12
px
+
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
))}.
cdx-select-vue__start-icon
.
cdx-icon
{
color
:
var
(
--color-subtle
,
#54595d
);
position
:
absolute
;
top
:
50
%
;
min-width
:
18
px
;
min-height
:
18
px
;
width
:
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
);
height
:
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
);
transition-property
:
color
;
transition-duration
:
.1
s
;
left
:
12
px
;
transform
:
translateY
(
-50
%
)}.
cdx-select-vue__indicator
.
cdx-icon
{
color
:
var
(
--color-base
,
#202122
);
position
:
absolute
;
top
:
50
%
;
min-width
:
10
px
;
min-height
:
10
px
;
width
:
calc
(
var
(
--font-size-medium
,
1
rem
)
-
4
px
);
height
:
calc
(
var
(
--font-size-medium
,
1
rem
)
-
4
px
);
transition-property
:
color
;
transition-duration
:
.1
s
;
right
:
12
px
;
transform
:
translateY
(
-50
%
)}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-subtle
,
#54595d
);
border-color
:
var
(
--border-color-interactive
,
#72777d
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle--hover
,
#eaecf0
);
border-color
:
var
(
--border-color-interactive--hover
,
#27292d
);
cursor
:
pointer
}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
active
{
background-color
:
var
(
--background-color-interactive-subtle--active
,
#dadde3
);
border-color
:
var
(
--border-color-interactive--active
,
#202122
)}.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
focus
:
not
(
:
active
)
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-select-vue--enabled
.
cdx-select-vue--value-selected
.
cdx-select-vue__handle
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-select-vue--enabled
.
cdx-select-vue--expanded
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-select-vue--disabled
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
color
:
var
(
--color-disabled
,
#a2a9b1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
);
cursor
:
default
}.
cdx-select-vue--disabled
.
cdx-select-vue__indicator
,
.
cdx-select-vue--disabled
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-disabled
,
#a2a9b1
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
{
background-color
:
var
(
--background-color-error-subtle
,
#ffe9e5
);
color
:
var
(
--color-error
,
#bf3c2c
);
border-color
:
var
(
--border-color-error
,
#f54739
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-error
,
#bf3c2c
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
:
not
(
:
focus
)
{
background-color
:
var
(
--background-color-error-subtle--hover
,
#ffdad3
);
color
:
var
(
--color-error--hover
,
#9f3526
);
border-color
:
var
(
--border-color-error--hover
,
#9f3526
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
hover
:
not
(
:
focus
)
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-error--hover
,
#9f3526
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
active
{
background-color
:
var
(
--background-color-error-subtle--active
,
#ffc8bd
);
color
:
var
(
--color-error--active
,
#612419
);
border-color
:
var
(
--border-color-error--active
,
#612419
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
active
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-error--active
,
#612419
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue__handle
:
focus
:
not
(
:
active
)
{
color
:
var
(
--color-subtle
,
#54595d
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue--value-selected
.
cdx-select-vue__handle
:
focus
:
not
(
:
active
)
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-select-vue--status-error
.
cdx-select-vue--enabled
.
cdx-select-vue--value-selected
.
cdx-select-vue__handle
:
focus
:
not
(
:
active
)
.
cdx-select-vue__start-icon
{
color
:
var
(
--color-base
,
#202122
)}.
cdx-scrollable-container
.
cdx-select-vue
{
position
:
static
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Aug 16 2026, 22:15 (11 w, 5 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
2c/20/95fd4e757887bc2034b7dd1bfaee
Default Alt Text
CdxSelect.css (6 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment