Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F4116757
CdxToggleSwitch.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
CdxToggleSwitch.css
View Options
.
cdx-toggle-switch
{
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
flex-start
;
position
:
relative
;
z-index
:
0
;
margin-bottom
:
12
px
}.
cdx-toggle-switch--align-switch
{
display
:
flex
;
justify-content
:
space-between
}.
cdx-toggle-switch
:
last-child
{
margin-bottom
:
0
}.
cdx-toggle-switch__label
,
.
cdx-toggle-switch__label
.
cdx-label
{
order
:
-1
}.
cdx-toggle-switch__label
:
not
(
:
empty
),
.
cdx-toggle-switch__label
.
cdx-label
:
not
(
:
empty
)
{
padding-right
:
6
px
}.
cdx-toggle-switch
.
cdx-toggle-switch__label
.
cdx-label
{
padding-bottom
:
0
}.
cdx-toggle-switch
.
cdx-toggle-switch__label
.
cdx-label
.
cdx-label__label__text
{
font-weight
:
400
}.
cdx-toggle-switch__switch
{
transform
:
translateZ
(
0
);
background-color
:
var
(
--background-color-interactive-subtle
,
#f8f9fa
);
display
:
inline-block
;
flex-shrink
:
0
;
position
:
relative
;
box-sizing
:
border-box
;
min-width
:
48
px
;
min-height
:
32
px
;
width
:
3
rem
;
height
:
2
rem
;
border-width
:
1
px
;
border-style
:
solid
;
border-color
:
var
(
--border-color-interactive
,
#72777d
);
border-radius
:
9999
px
;
overflow
:
hidden
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-toggle-switch__switch
:
before
{
content
:
""
;
display
:
block
;
position
:
absolute
;
top
:
1
px
;
right
:
1
px
;
bottom
:
1
px
;
left
:
1
px
;
z-index
:
1
;
border
:
1
px
solid
var
(
--border-color-transparent
,
transparent
);
border-radius
:
9999
px
;
transition-property
:
background-color
,
color
,
border-color
,
box-shadow
;
transition-duration
:
.25
s
}.
cdx-toggle-switch__switch__grip
{
position
:
absolute
;
top
:
50
%
;
box-sizing
:
border-box
;
min-width
:
20
px
;
min-height
:
20
px
;
width
:
1.25
rem
;
height
:
1.25
rem
;
border
:
1
px
solid
var
(
--border-color-interactive
,
#72777d
);
border-radius
:
50
%
;
transform
:
translate
(
.3125
rem
)
translateY
(
-50
%
);
transition-property
:
background-color
,
border-color
,
transform
;
transition-duration
:
.25
s
,
.1
s
,
.1
s
}.
cdx-toggle-switch__input
{
opacity
:
0
;
position
:
absolute
;
right
:
0
;
z-index
:
2
;
min-width
:
48
px
;
min-height
:
32
px
;
width
:
3
rem
;
height
:
2
rem
;
margin
:
0
;
font-size
:
inherit
}.
cdx-toggle-switch__input
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-inverted
,
#fff
);
transform
:
translate
(
calc
(
100
%
+
.0625
rem
))
translateY
(
-50
%
)}.
cdx-toggle-switch__input
:
enabled
:
hover
,
.
cdx-toggle-switch__input
:
enabled
~
.
cdx-label
.
cdx-label__label
:
hover
,
.
cdx-toggle-switch__input
:
enabled
~
.
cdx-toggle-switch__label
:
not
(
.
cdx-label
)
:
hover
{
cursor
:
pointer
}.
cdx-toggle-switch__input
:
enabled
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
hover
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-base
,
#fff
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
hover
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
:
before
{
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
active
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
{
border-color
:
var
(
--border-color-progressive
,
#36c
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--focus
,
#36c
);
outline
:
1
px
solid
transparent
}.
cdx-toggle-switch__input
:
enabled
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-input-binary--checked
,
#36c
);
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--background-color-base
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
hover
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--hover
,
#4b77d6
);
border-color
:
var
(
--border-color-progressive--hover
,
#4b77d6
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-progressive--active
,
#233566
);
border-color
:
var
(
--border-color-progressive--active
,
#233566
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
:
before
{
border-color
:
var
(
--border-color-progressive--active
,
#233566
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
active
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base-fixed
,
#fff
);
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
{
border-color
:
var
(
--border-color-progressive
,
#36c
)}.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
:
before
,
.
cdx-toggle-switch__input
:
enabled
:
checked
:
focus
:
not
(
:
active
)~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
disabled
{
cursor
:
default
}.
cdx-toggle-switch__input
:
disabled
~
.
cdx-toggle-switch__switch
{
background-color
:
var
(
--background-color-disabled
,
#c8ccd1
);
border-color
:
var
(
--border-color-disabled
,
#c8ccd1
)}.
cdx-toggle-switch__input
:
disabled
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
border-color
:
var
(
--border-color-inverted
,
#fff
);
box-shadow
:
inset
0
0
0
1
px
var
(
--box-shadow-color-inverted
,
#fff
)}.
cdx-toggle-switch__input
:
disabled
:
checked
~
.
cdx-toggle-switch__switch
.
cdx-toggle-switch__switch__grip
{
background-color
:
var
(
--background-color-base
,
#fff
)}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Wed, Aug 19, 01:47 (2 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
ac/17/5c699088653c10e3c99f0f0575ce
Default Alt Text
CdxToggleSwitch.css (5 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment