Files
arindOS/sithego/themer/adapters/gtk/components/checks.css
T

50 lines
1.8 KiB
CSS

check, radio {
margin: 0 {{ .Theme.Spacing.Margin }};
min-height: 18px;
min-width: 18px;
border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
border-radius: {{ .Theme.Spacing.Radius }};
background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
color: transparent;
-gtk-icon-source: none;
transition: all 0.2s ease;
}
radio {
border-radius: 50%;
}
check:checked {
background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
background-image:
linear-gradient(45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%),
linear-gradient(-45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%);
background-size: 70% 70%;
background-repeat: no-repeat;
background-position: center;
}
radio:checked {
background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
background-image: radial-gradient(circle, {{ .Theme.Colors.Semantic.Accent.Value }} 35%, transparent 40%);
}
check:indeterminate {
background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
background-image: linear-gradient(to right, {{ .Theme.Colors.Semantic.Accent.Value }}, {{ .Theme.Colors.Semantic.Accent.Value }});
background-size: 60% 2px;
background-repeat: no-repeat;
background-position: center;
}
check:disabled,
radio:disabled {
background-color: {{ .Theme.Colors.Semantic.Background.Value }};
border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
color: transparent;
background-image: none;
}