/home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/css/common
Edit: /home/vianto5/duettowers.mx/wp-content/plugins/code-snippets/css/common/_switch.scss (2446B)
@use 'theme';
.snippet-execution-button,
.snippet-activation-switch,
input[type='checkbox'].switch {
display: block;
position: relative;
}
// Activation switch: an accent-coloured 36x19 pill shared by the list-table
// activate column, snippet cards and settings toggles.
.snippet-activation-switch,
input[type='checkbox'].switch {
appearance: none;
outline: 0;
cursor: pointer;
margin: 0;
inline-size: 36px;
block-size: 19px;
border-radius: 34px;
text-align: start;
border: 1px solid theme.$accent;
box-sizing: border-box;
&::before {
transition: all .1s;
content: '';
block-size: 13px;
inline-size: 13px;
display: inline-block;
background-color: theme.$accent;
border-radius: 50%;
margin: 2px;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s;
}
}
}
.active-snippet .snippet-activation-switch,
input[type='checkbox'].switch:checked {
background-color: theme.$accent;
// Travel distance: pill width minus the knob, its margins and the borders.
&::before {
background-color: white;
transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier)));
}
}
.erroneous-snippet .snippet-activation-switch::before {
content: '!';
transform: translateX(calc(50% * var(--cs-direction-multiplier)));
text-align: center;
font-weight: bold;
line-height: 1;
color: #1d2327;
}
a.snippet-condition-count {
border-radius: 50%;
border: 1.8px solid currentcolor;
block-size: 29px;
inline-size: 29px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
.inactive-snippet & {
color: #ccc;
}
.active-snippet & {
font-weight: bold;
color: theme.$accent;
}
}
.snippet-execution-button {
margin-inline-start: 11px;
margin-block-start: 9px;
inline-size: 0;
block-size: 0;
border-block: 9px solid transparent;
border-inline-start: 10px solid #ccc;
&::before {
content: '';
position: absolute;
inset: -14px -8px -14px -21px;
border-radius: 50%;
border: 1.8px solid #ccc;
z-index: 2;
}
&:hover {
border-inline-start-color: theme.$accent;
transition: border-inline-start-color 0.6s;
&::before {
border-color: theme.$accent;
transition: border-color 0.6s;
}
@media (prefers-reduced-motion: reduce) {
transition-duration: 0.01s;
&::before {
transition-duration: 0.01s;
}
}
}
}
.code-snippets-card .snippet-execution-button {
margin-block-start: 0;
margin-inline-end: 9px;
}