Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4108413
CdxTable-bidi.css
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
19 KB
Referenced Files
None
Subscribers
None
CdxTable-bidi.css
View Options
.
cdx-table-pager
{
display
:
flex
;
align-items
:
center
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
gap
:
12
px
}
[
dir
]
.
cdx-table-pager
{
padding
:
12
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager
{
flex-wrap
:
nowrap
}}.
cdx-table-pager__start
.
cdx-select
,
.
cdx-table-pager__start
.
cdx-select-vue__handle
{
min-width
:
8
rem
}.
cdx-table-pager__center
{
color
:
var
(
--color-subtle
,
#54595d
);
flex
:
1
1
40
%
;
font-size
:
var
(
--font-size-medium
,
1
rem
)}
[
dir
]
.
cdx-table-pager__center
{
text-align
:
center
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager__center
{
flex
:
0
1
auto
}}.
cdx-table-pager__end
{
display
:
flex
;
flex
:
1
0
100
%
;
justify-content
:
space-between
;
gap
:
4
px
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table-pager__end
{
flex
:
0
1
auto
}}.
cdx-table-pager__icon--first
{
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
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table-pager__icon--first
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--first
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
);
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table-pager__icon--first
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table-pager__icon--first
{
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="%23000"><path d="M3 1h2v18H3zm13.5 1.5L15 1l-9 9 9 9 1.5-1.5L9 10z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--first
{
-webkit-
mask-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="%23000"><path d="M3 1h2v18H3zm13.5 1.5L15 1l-9 9 9 9 1.5-1.5L9 10z"/></svg>'
);
mask-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="%23000"><path d="M3 1h2v18H3zm13.5 1.5L15 1l-9 9 9 9 1.5-1.5L9 10z"/></svg>'
)}
[
dir
]
.
cdx-table-pager__icon--first
{
background-color
:
var
(
--color-base
,
#202122
)}}
[
dir
]
.
cdx-table-pager__icon--first
[
dir
=
rtl
],
html
[
dir
][
dir
=
rtl
]
.
cdx-table-pager__icon--first
:
not
([
dir
=
"ltr"
])
{
transform
:
scaleX
(
-1
)}.
cdx-table-pager__icon--previous
{
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
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table-pager__icon--previous
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--previous
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
);
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table-pager__icon--previous
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table-pager__icon--previous
{
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="%23000"><path d="m4 10 9 9 1.4-1.5L7 10l7.4-7.5L13 1z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--previous
{
-webkit-
mask-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="%23000"><path d="m4 10 9 9 1.4-1.5L7 10l7.4-7.5L13 1z"/></svg>'
);
mask-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="%23000"><path d="m4 10 9 9 1.4-1.5L7 10l7.4-7.5L13 1z"/></svg>'
)}
[
dir
]
.
cdx-table-pager__icon--previous
{
background-color
:
var
(
--color-base
,
#202122
)}}
[
dir
]
.
cdx-table-pager__icon--previous
[
dir
=
rtl
],
html
[
dir
][
dir
=
rtl
]
.
cdx-table-pager__icon--previous
:
not
([
dir
=
"ltr"
])
{
transform
:
scaleX
(
-1
)}.
cdx-table-pager__icon--next
{
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
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table-pager__icon--next
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--next
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
);
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table-pager__icon--next
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table-pager__icon--next
{
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="%23000"><path d="M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--next
{
-webkit-
mask-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="%23000"><path d="M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z"/></svg>'
);
mask-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="%23000"><path d="M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z"/></svg>'
)}
[
dir
]
.
cdx-table-pager__icon--next
{
background-color
:
var
(
--color-base
,
#202122
)}}
[
dir
]
.
cdx-table-pager__icon--next
[
dir
=
rtl
],
html
[
dir
][
dir
=
rtl
]
.
cdx-table-pager__icon--next
:
not
([
dir
=
"ltr"
])
{
transform
:
scaleX
(
-1
)}.
cdx-table-pager__icon--last
{
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
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table-pager__icon--last
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--last
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
);
mask-size
:
max
(
calc
(
var
(
--font-size-medium
,
1
rem
)
+
4
px
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table-pager__icon--last
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table-pager__icon--last
{
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="%23000"><path d="M15 1h2v18h-2zM3.5 2.5 11 10l-7.5 7.5L5 19l9-9-9-9z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table-pager__icon--last
{
-webkit-
mask-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="%23000"><path d="M15 1h2v18h-2zM3.5 2.5 11 10l-7.5 7.5L5 19l9-9-9-9z"/></svg>'
);
mask-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="%23000"><path d="M15 1h2v18h-2zM3.5 2.5 11 10l-7.5 7.5L5 19l9-9-9-9z"/></svg>'
)}
[
dir
]
.
cdx-table-pager__icon--last
{
background-color
:
var
(
--color-base
,
#202122
)}}
[
dir
]
.
cdx-table-pager__icon--last
[
dir
=
rtl
],
html
[
dir
][
dir
=
rtl
]
.
cdx-table-pager__icon--last
:
not
([
dir
=
"ltr"
])
{
transform
:
scaleX
(
-1
)}.
cdx-table
{
color
:
var
(
--color-base
,
#202122
);
word-wrap
:
break-word
}
[
dir
]
.
cdx-table
{
border
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
border-radius
:
2
px
}@
supports
(
word-break
:
break-word
;
)
{
.cdx-table{
word-wrap
:
unset
;
word-break
:
break-word
}
}
@
supports
(
overflow-wrap
:
break-word
)
{.
cdx-table
{
word-break
:
normal
;
overflow-wrap
:
break-word
}}.
cdx-table
:
lang
(
de
),
.
cdx-table
:
lang
(
de-AT
),
.
cdx-table
:
lang
(
de-CH
),
.
cdx-table
:
lang
(
de-DE
),
.
cdx-table
:
lang
(
de-LI
),
.
cdx-table
:
lang
(
de-LU
),
.
cdx-table
:
lang
(
de-x-formal
)
{
-webkit-
hyphens
:
auto
;
-ms-
hyphens
:
auto
;
hyphens
:
auto
}.
cdx-table__header
{
display
:
flex
;
align-items
:
center
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
gap
:
16
px
;
box-sizing
:
border-box
;
min-height
:
40
px
}
[
dir
]
.
cdx-table__header
{
padding
:
8
px
12
px
}.
cdx-table__header__caption
{
color
:
var
(
--color-emphasized
,
#101418
);
font-size
:
var
(
--font-size-x-large
,
1.25
rem
);
font-weight
:
700
;
line-height
:
var
(
--line-height-x-large
,
1.875
rem
)}
[
dir
]
.
cdx-table__pagination--bottom
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__pagination-status--short
{
display
:
block
}
[
dir
=
ltr
]
.
cdx-table__pagination-status--short
{
text-align
:
right
}
[
dir
=
rtl
]
.
cdx-table__pagination-status--short
{
text-align
:
left
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table__pagination-status--short
{
display
:
none
}}.
cdx-table__pagination-status--long
{
display
:
none
}@
media
screen
and
(
min-width
:
640px
)
{.
cdx-table__pagination-status--long
{
display
:
block
}
[
dir
]
.
cdx-table__pagination-status--long
{
text-align
:
center
}}.
cdx-table__pending-indicator
{
position
:
absolute
}.
cdx-table__table-wrapper
{
overflow-x
:
auto
}.
cdx-table__table-wrapper--has-pending-indicator
{
position
:
relative
}.
cdx-table__table
{
min-width
:
100
%
;
font-size
:
var
(
--font-size-medium
,
1
rem
);
line-height
:
var
(
--line-height-small
,
1.375
rem
);
border-collapse
:
collapse
}.
cdx-table__table
caption
{
display
:
block
;
clip
:
rect
(
1
px
,
1
px
,
1
px
,
1
px
);
position
:
absolute
!important
;
width
:
1
px
;
height
:
1
px
;
overflow
:
hidden
}
[
dir
]
.
cdx-table__table
caption
{
margin
:
-1
px
;
border
:
0
;
padding
:
0
}
[
dir
]
.
cdx-table__table
th
,[
dir
]
.
cdx-table__table
td
{
padding
:
12
px
}.
cdx-table__table
th
{
color
:
var
(
--color-emphasized
,
#101418
)}
[
dir
=
ltr
]
.
cdx-table__table
th
{
text-align
:
left
}
[
dir
=
rtl
]
.
cdx-table__table
th
{
text-align
:
right
}.
cdx-table__table
thead
th
{
vertical-align
:
bottom
}
[
dir
]
.
cdx-table__table
thead
th
{
border-bottom
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}
[
dir
]
.
cdx-table__table
tfoot
td
,[
dir
]
.
cdx-table__table
tfoot
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}.
cdx-table__table
tbody
td
,
.
cdx-table__table
tbody
th
{
vertical-align
:
top
}
[
dir
]
.
cdx-table__table
tbody
td
,[
dir
]
.
cdx-table__table
tbody
th
{
border-top
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}
[
dir
]
.
cdx-table__table
tbody
tr
:
first-child
td
,[
dir
]
.
cdx-table__table
tbody
tr
:
first-child
th
{
border-top
:
0
}.
cdx-table__table__sort-button
{
display
:
flex
;
align-items
:
flex-end
;
gap
:
6
px
;
width
:
100
%
;
font-family
:
inherit
;
font-size
:
var
(
--font-size-medium
,
1
rem
);
font-weight
:
700
;
line-height
:
var
(
--line-height-small
,
1.375
rem
);
text-decoration
:
none
}
[
dir
]
.
cdx-table__table__sort-button
{
background-color
:
var
(
--background-color-transparent
,
transparent
);
border
:
0
;
padding
:
12
px
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.1
s
}
[
dir
=
ltr
]
.
cdx-table__table__sort-button
{
text-align
:
left
}
[
dir
=
rtl
]
.
cdx-table__table__sort-button
{
text-align
:
right
}
[
dir
]
.
cdx-table__table__sort-button
:
hover
{
background-color
:
var
(
--background-color-interactive-subtle--hover
,
#eaecf0
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
);
cursor
:
pointer
}.
cdx-table__table__sort-button
:
focus
{
outline
:
1
px
solid
transparent
}
[
dir
]
.
cdx-table__table__sort-button
:
active
{
background-color
:
var
(
--background-color-interactive-subtle--active
,
#dadde3
);
border-color
:
var
(
--border-color-base
,
#a2a9b1
)}
[
dir
]
.
cdx-table__table__sort-button
:
focus
:
not
(
:
active
)
{
background-color
:
var
(
--background-color-base
,
#fff
);
box-shadow
:
inset
0
0
0
2
px
var
(
--box-shadow-color-progressive--focus
,
#36c
)}.
cdx-table__table__sort-icon--unsorted
{
min-width
:
10
px
;
min-height
:
10
px
;
width
:
var
(
--font-size-medium
,
1
rem
);
height
:
var
(
--font-size-medium
,
1
rem
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table__table__sort-icon--unsorted
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--unsorted
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
);
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table__table__sort-icon--unsorted
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table__table__sort-icon--unsorted
{
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="%23000"><path d="M10 0 3 8h14zm0 18-7-8h14z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--unsorted
{
-webkit-
mask-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="%23000"><path d="M10 0 3 8h14zm0 18-7-8h14z"/></svg>'
);
mask-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="%23000"><path d="M10 0 3 8h14zm0 18-7-8h14z"/></svg>'
)}
[
dir
]
.
cdx-table__table__sort-icon--unsorted
{
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-table__table__sort-icon--asc
{
min-width
:
10
px
;
min-height
:
10
px
;
width
:
var
(
--font-size-medium
,
1
rem
);
height
:
var
(
--font-size-medium
,
1
rem
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table__table__sort-icon--asc
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--asc
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
);
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table__table__sort-icon--asc
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table__table__sort-icon--asc
{
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="%23000"><path d="m10 5 8 10H2z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--asc
{
-webkit-
mask-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="%23000"><path d="m10 5 8 10H2z"/></svg>'
);
mask-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="%23000"><path d="m10 5 8 10H2z"/></svg>'
)}
[
dir
]
.
cdx-table__table__sort-icon--asc
{
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-table__table__sort-icon--desc
{
min-width
:
10
px
;
min-height
:
10
px
;
width
:
var
(
--font-size-medium
,
1
rem
);
height
:
var
(
--font-size-medium
,
1
rem
);
display
:
inline-block
;
vertical-align
:
text
-
bottom
}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{
[
dir
]
.
cdx-table__table__sort-icon--desc
{
background-position
:
center
;
background-repeat
:
no-repeat
;
background-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--desc
{
-webkit-
mask-position
:
center
;
mask-position
:
center
;
-webkit-
mask-repeat
:
no-repeat
;
mask-repeat
:
no-repeat
;
-webkit-
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
);
mask-size
:
max
(
var
(
--font-size-medium
,
1
rem
),
10
px
)}}@
supports
not
(((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
)))
{.
cdx-table__table__sort-icon--desc
{
filter
:
invert
(
var
(
--filter-invert-icon
,
0
));
opacity
:
var
(
--opacity-icon-base
,
.87
)}
[
dir
]
.
cdx-table__table__sort-icon--desc
{
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="%23000"><path d="M10 15 2 5h16z"/></svg>'
)}}@
supports
((
-webkit-mask-image
:
none
)
or
(
mask-image
:
none
))
{.
cdx-table__table__sort-icon--desc
{
-webkit-
mask-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="%23000"><path d="M10 15 2 5h16z"/></svg>'
);
mask-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="%23000"><path d="M10 15 2 5h16z"/></svg>'
)}
[
dir
]
.
cdx-table__table__sort-icon--desc
{
background-color
:
var
(
--color-base
,
#202122
)}}.
cdx-table__table__sort-icon--vue
,
.
cdx-table__table__sort-icon
{
color
:
var
(
--color-subtle
,
#54595d
);
flex-shrink
:
0
;
height
:
var
(
--line-height-small
,
1.375
rem
)}
[
dir
]
.
cdx-table__table
.
cdx-table__table__cell--align-center
{
text-align
:
center
}
[
dir
=
ltr
]
.
cdx-table__table
.
cdx-table__table__cell--align-end
{
text-align
:
right
}
[
dir
=
rtl
]
.
cdx-table__table
.
cdx-table__table__cell--align-end
{
text-align
:
left
}.
cdx-table__table
.
cdx-table__table__cell--align-end
.
cdx-table__table__sort-button
{
flex-direction
:
row-reverse
}
[
dir
=
ltr
]
.
cdx-table__table
.
cdx-table__table__cell--align-end
.
cdx-table__table__sort-button
{
text-align
:
right
}
[
dir
=
rtl
]
.
cdx-table__table
.
cdx-table__table__cell--align-end
.
cdx-table__table__sort-button
{
text-align
:
left
}
[
dir
]
.
cdx-table__table
.
cdx-table__table__cell--align-number
,
.
cdx-table__table
.
cdx-table__table__cell--align-number
.
cdx-table__table__sort-button
{
text-align
:
right
}
[
dir
=
ltr
]
.
cdx-table__table
.
cdx-table__table__cell--align-number
.
cdx-table__table__sort-button
{
flex-direction
:
row-reverse
}
[
dir
=
rtl
]
.
cdx-table__table
.
cdx-table__table__cell--align-number
.
cdx-table__table__sort-button
{
flex-direction
:
row
}
[
dir
]
.
cdx-table__table
.
cdx-table__table__cell--has-sort
{
padding
:
0
}.
cdx-table__table__select-rows
{
width
:
1
px
}
[
dir
]
.
cdx-table__table__row--selected
{
background-color
:
var
(
--background-color-progressive-subtle
,
#f1f4fd
)}.
cdx-table__table--layout-fixed
{
table-layout
:
fixed
}
[
dir
=
ltr
]
.
cdx-table__table--borders-vertical
th
,[
dir
=
ltr
]
.
cdx-table__table--borders-vertical
td
{
border-right
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}
[
dir
=
rtl
]
.
cdx-table__table--borders-vertical
th
,[
dir
=
rtl
]
.
cdx-table__table--borders-vertical
td
{
border-left
:
1
px
solid
var
(
--border-color-subtle
,
#c8ccd1
)}
[
dir
=
ltr
]
.
cdx-table__table--borders-vertical
th
:
last-child
,[
dir
=
ltr
]
.
cdx-table__table--borders-vertical
td
:
last-child
{
border-right
:
0
}
[
dir
=
rtl
]
.
cdx-table__table--borders-vertical
th
:
last-child
,[
dir
=
rtl
]
.
cdx-table__table--borders-vertical
td
:
last-child
{
border-left
:
0
}
[
dir
]
.
cdx-table__table--borders-vertical
thead
tr
:
not
(
:
first-child
)
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}
[
dir
]
.
cdx-table__header
+
.
cdx-table__table-wrapper
.
cdx-table__table--borders-vertical
thead
th
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}
[
dir
]
.
cdx-table__table__empty-state
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
)}
[
dir
]
thead
+
tbody
.
cdx-table__table__empty-state
{
border-top
:
0
}
tbody
td
.
cdx-table__table__empty-state-content
{
color
:
var
(
--color-subtle
,
#54595d
);
height
:
16
px
;
vertical-align
:
middle
}
[
dir
]
tbody
td
.
cdx-table__table__empty-state-content
{
text-align
:
center
}.
cdx-table__footer
{
display
:
flex
;
align-items
:
center
;
gap
:
16
px
;
box-sizing
:
border-box
;
min-height
:
40
px
;
font-size
:
var
(
--font-size-medium
,
1
rem
);
line-height
:
var
(
--line-height-small
,
1.375
rem
)}
[
dir
]
.
cdx-table__footer
{
border-top
:
1
px
solid
var
(
--border-color-base
,
#a2a9b1
);
padding
:
12
px
}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Aug 18, 20:32 (2 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
53/74/c921c629f46498b7b031effb2398
Default Alt Text
CdxTable-bidi.css (19 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment