From 59da3df28ca20957f9988386d5da50ee403c6944 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Sun, 30 Aug 2020 22:12:37 +0100 Subject: [PATCH] [UI] Checkboxes now display a custom tick --- public/assets/css/base.css | 3 +++ public/assets/css/base_mid.css | 3 +++ public/assets/css/base_small.css | 3 +++ templates/base.html.twig | 3 +++ 4 files changed, 12 insertions(+) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 7a6ee167c8..455d112cc6 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -229,6 +229,9 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:checked + label::before { background: var(--accent); border-radius: 10%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmVyc2lvbj0iMS4xIiAgIHdpZHRoPSIzMiIgICBoZWlnaHQ9IjMyIiAgIHZpZXdCb3g9IjAgMCAzMiAzMiIgICBpZD0ic3ZnNiIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaGVja21hcmsuc3ZnIiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExMiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiICAgICBib3JkZXJvcGFjaXR5PSIxIiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICAgIGdyaWR0b2xlcmFuY2U9IjEwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM4MiIgICAgIGlkPSJuYW1lZHZpZXc4IiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaW5rc2NhcGU6em9vbT0iMjkuODc1IiAgICAgaW5rc2NhcGU6Y3g9IjE2LjA2Njk0NiIgICAgIGlua3NjYXBlOmN5PSIxNiIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+ICA8dGl0bGUgICAgIGlkPSJ0aXRsZTIiPmNoZWNrbWFyazwvdGl0bGU+ICA8cGF0aCAgICAgZD0iTTI3IDRsLTE1IDE1LTctNy01IDUgMTIgMTIgMjAtMjB6IiAgICAgaWQ9InBhdGg0IiAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=); background-position: center; + background-repeat: no-repeat; + background-size: 80%; } input[type="checkbox"]:focus + label::before, input[type="checkbox"]:hover + label::before{ diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index 2677038081..88eca57811 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -255,6 +255,9 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:checked + label::before { background: var(--accent); border-radius: 10%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmVyc2lvbj0iMS4xIiAgIHdpZHRoPSIzMiIgICBoZWlnaHQ9IjMyIiAgIHZpZXdCb3g9IjAgMCAzMiAzMiIgICBpZD0ic3ZnNiIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaGVja21hcmsuc3ZnIiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExMiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiICAgICBib3JkZXJvcGFjaXR5PSIxIiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICAgIGdyaWR0b2xlcmFuY2U9IjEwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM4MiIgICAgIGlkPSJuYW1lZHZpZXc4IiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaW5rc2NhcGU6em9vbT0iMjkuODc1IiAgICAgaW5rc2NhcGU6Y3g9IjE2LjA2Njk0NiIgICAgIGlua3NjYXBlOmN5PSIxNiIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+ICA8dGl0bGUgICAgIGlkPSJ0aXRsZTIiPmNoZWNrbWFyazwvdGl0bGU+ICA8cGF0aCAgICAgZD0iTTI3IDRsLTE1IDE1LTctNy01IDUgMTIgMTIgMjAtMjB6IiAgICAgaWQ9InBhdGg0IiAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=); background-position: center; + background-repeat: no-repeat; + background-size: 80%; } input[type="checkbox"]:focus + label::before, input[type="checkbox"]:hover + label::before{ diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index df8d91ef5f..de1c80a77e 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -254,6 +254,9 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:checked + label::before { background: var(--accent); border-radius: 10%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgdmVyc2lvbj0iMS4xIiAgIHdpZHRoPSIzMiIgICBoZWlnaHQ9IjMyIiAgIHZpZXdCb3g9IjAgMCAzMiAzMiIgICBpZD0ic3ZnNiIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaGVja21hcmsuc3ZnIiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExMiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICA8L2NjOldvcms+ICAgIDwvcmRmOlJERj4gIDwvbWV0YWRhdGE+ICA8ZGVmcyAgICAgaWQ9ImRlZnMxMCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmRvY3VtZW50LXJvdGF0aW9uPSIwIiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiICAgICBib3JkZXJvcGFjaXR5PSIxIiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIgICAgIGdyaWR0b2xlcmFuY2U9IjEwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTM4MiIgICAgIGlkPSJuYW1lZHZpZXc4IiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaW5rc2NhcGU6em9vbT0iMjkuODc1IiAgICAgaW5rc2NhcGU6Y3g9IjE2LjA2Njk0NiIgICAgIGlua3NjYXBlOmN5PSIxNiIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzYiIC8+ICA8dGl0bGUgICAgIGlkPSJ0aXRsZTIiPmNoZWNrbWFyazwvdGl0bGU+ICA8cGF0aCAgICAgZD0iTTI3IDRsLTE1IDE1LTctNy01IDUgMTIgMTIgMjAtMjB6IiAgICAgaWQ9InBhdGg0IiAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=); background-position: center; + background-repeat: no-repeat; + background-size: 80%; } input[type="checkbox"]:focus + label::before, input[type="checkbox"]:hover + label::before{ diff --git a/templates/base.html.twig b/templates/base.html.twig index 43b1ea37f7..d22905a8cc 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -47,6 +47,9 @@ {{ source('@public_path/assets/icons/avatar.svg') }} + + {{ source('@public_path/assets/icons/checkmark.svg') }} + {% endblock %}