Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F2754002
CdxChipInput.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
5 KB
Referenced Files
None
Subscribers
None
CdxChipInput.css
View Options
.
cdx-input-chip
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
color
:
var
(
--color-base
,
#202122
);
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
4
px
;
max-width
:
32
rem
;
border
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
);
border-radius
:
9999
px
;
padding
:
0
0
0
8
px
;
font-size
:
.875
rem
;
line-height
:
1.5714285
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
{
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
hover
{
background-color
:
var
(
--background-color-base
,
#fff
);
cursor
:
pointer
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
active
{
background-color
:
var
(
--background-color-interactive
,
#eaecf0
);
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-input-chip
:
not
(
.
cdx-input-chip--disabled
)
:
focus
:
not
(
:
active
)
{
border-color
:
var
(
--border-color-progressive--focus
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-input-chip--disabled
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
color
:
var
(
--color-inverted
,
#fff
);
border-color
:
var
(
--border-color-transparent
,
transparent
)}.
cdx-input-chip--disabled
.
cdx-icon
{
color
:
var
(
--color-inverted
,
#fff
)}.
cdx-input-chip__text
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}.
cdx-input-chip__button
.
cdx-button
{
min-width
:
20
px
;
min-height
:
20
px
;
margin-right
:
1
px
;
border-radius
:
9999
px
;
padding-right
:
2
px
;
padding-left
:
2
px
;
font-size
:
.75
rem
}.
cdx-chip-input
{
border-radius
:
2
px
;
overflow
:
hidden
}.
cdx-chip-input__chips
,
.
cdx-chip-input__separate-input
{
box-sizing
:
border-box
;
min-width
:
256
px
;
min-height
:
32
px
;
border-width
:
1
px
;
border-style
:
solid
;
padding
:
3
px
8
px
;
line-height
:
1.4285714
}.
cdx-chip-input__chips
{
display
:
flex
;
flex
:
1
auto
;
flex-flow
:
wrap
;
gap
:
8
px
}.
cdx-chip-input__input
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
color
:
var
(
--color-base
,
#202122
);
flex-grow
:
inherit
;
border
:
0
;
font-family
:
inherit
;
font-size
:
inherit
;
line-height
:
1
}.
cdx-chip-input__input
:
focus
{
outline
:
1
px
solid
transparent
}.
cdx-chip-input__input
::
placeholder
{
color
:
var
(
--color-placeholder
,
#72777d
);
opacity
:
1
}.
cdx-chip-input--has-separate-input
.
cdx-chip-input__chips
{
margin-bottom
:
-1
px
}.
cdx-chip-input--has-separate-input
.
cdx-chip-input__input
{
width
:
100
%
}.
cdx-chip-input__aria-status
{
display
:
block
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
);
position
:
absolute
!important
;
width
:
1
px
;
height
:
1
px
;
margin
:
-1
px
;
border
:
0
;
padding
:
0
;
overflow
:
hidden
}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__separate-input
{
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-transparent
,
transparent
);
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input__separate-input
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
{
background-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__chips
{
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
:
hover
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
:
hover
{
border-color
:
var
(
--border-color-interactive
,
#72777d
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--focused
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--focused
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
{
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-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
{
color
:
var
(
--color-error
,
#d73333
);
border-color
:
var
(
--border-color-error
,
#9f3526
)}.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
:
not
(
.
cdx-chip-input--has-separate-input
)
.
cdx-chip-input__chips
:
hover
,
.
cdx-chip-input
:
not
(
.
cdx-chip-input--disabled
)
.
cdx-chip-input--status-error
:
not
(
.
cdx-chip-input--focused
)
.
cdx-chip-input--has-separate-input
.
cdx-chip-input__separate-input
:
hover
{
border-color
:
var
(
--border-color-error--hover
,
#fc493b
)}.
cdx-chip-input--disabled
.
cdx-chip-input__chips
,
.
cdx-chip-input--disabled
.
cdx-chip-input__separate-input
{
background-color
:
var
(
--background-color-disabled-subtle
,
#eaecf0
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-chip-input--disabled
.
cdx-chip-input__chips
.
cdx-chip-input__input
,
.
cdx-chip-input--disabled
.
cdx-chip-input__separate-input
.
cdx-chip-input__input
{
color
:
var
(
--color-disabled
,
#72777d
);
-webkit-
text-fill-color
:
var
(
--color-disabled
,
#72777d
)}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Fri, Jul 3, 22:00 (8 h, 30 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
6b/5b/0603007f56da26fc4bcdb8017367
Default Alt Text
CdxChipInput.css (5 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment