KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Some weird fill & transition-duration hacks for color animation.

Browse Source
This commit is contained in:
Kevin
2022-03-05 09:06:35 +01:00
parent 04c9e019d3
commit d58504cde3
8 changed files with 61 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/icons/IconClose.vue
View File

@@ -1,19 +1,15 @@
<template>
<svg
id="icon-cross"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
@click="$emit('click')"
@keydown="event => $emit('keydown', event)"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x"
style="transition-duration: 0s;"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
<path
fill="inherit"
d="M27.942 5.942l-1.883-1.883-10.058 10.054-10.058-10.054-1.883 1.883 10.054 10.058-10.054 10.058 1.883 1.883 10.058-10.054 10.058 10.054 1.883-1.883-10.054-10.058z"
></path>
</svg>
</template>

4
src/icons/IconExpand.vue
View File

@@ -4,14 +4,18 @@
viewBox="0 0 32 32"
width="100%"
height="100%"
style="transition-duration: 0s;"
>
<path
style="transition-duration: 0s;"
d="M29.333 2.667h-26.667c-1.471 0-2.667 1.196-2.667 2.667v21.333c0 1.471 1.196 2.667 2.667 2.667h26.667c1.471 0 2.667-1.196 2.667-2.667v-21.333c0-1.471-1.196-2.667-2.667-2.667zM29.333 26.667h-26.667v-21.333h26.667v21.333c0.004 0 0 0 0 0z"
></path>
<path
style="transition-duration: 0s;"
d="M11.333 17.058l-4.667 4.667v-1.725h-1.333v3.333c0 0.367 0.3 0.667 0.667 0.667h3.333v-1.333h-1.725l4.667-4.667-0.942-0.942z"
></path>
<path
style="transition-duration: 0s;"
d="M26 8h-3.333v1.333h1.725l-4.667 4.667 0.942 0.942 4.667-4.667v1.725h1.333v-3.333c0-0.367-0.3-0.667-0.667-0.667z"
></path>
</svg>

1
src/icons/IconInbox.vue
View File

@@ -1,6 +1,7 @@
<template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
fill="inherit"
xmlns="http://www.w3.org/2000/svg"
d="M31.671 16.054v0l-6.421-11.708c-0.117-0.213-0.342-0.346-0.583-0.346h-17.333c-0.242 0-0.467 0.133-0.583 0.346l-6.421 11.708c-0.208 0.379-0.329 0.817-0.329 1.279v8c0 1.471 1.196 2.667 2.667 2.667h26.667c1.471 0 2.667-1.196 2.667-2.667v-8c0-0.462-0.121-0.9-0.329-1.279zM29.333 25.333h-26.667v-8h8.167c0.592 2.296 2.683 4 5.167 4 2.479 0 4.571-1.704 5.167-4h8.167v8zM20.667 14.667c-0.367 0-0.667 0.3-0.667 0.667v0.667c0 2.204-1.796 4-4 4s-4-1.796-4-4v-0.667c0-0.367-0.3-0.667-0.667-0.667h-8.667c-0.021 0-0.038 0-0.058 0l5.121-9.333h16.546l5.121 9.333c-0.021 0-0.038 0-0.058 0h-8.671z"
/>

2
src/icons/IconNowPlaying.vue
View File

@@ -2,10 +2,12 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M31.608 12.392l-3.642-3.642c-0.521-0.521-1.367-0.521-1.887 0-0.375 0.375-0.879 0.583-1.413 0.583s-1.038-0.208-1.413-0.588c-0.779-0.779-0.779-2.050 0-2.829 0.521-0.521 0.521-1.367 0-1.888l-3.646-3.638c-0.25-0.25-0.587-0.392-0.942-0.392s-0.692 0.142-0.942 0.392l-17.333 17.333c-0.521 0.521-0.521 1.367 0 1.887l3.642 3.642c0.25 0.25 0.588 0.392 0.942 0.392s0.692-0.142 0.942-0.392c0.379-0.379 0.879-0.587 1.412-0.587s1.037 0.208 1.412 0.587 0.592 0.879 0.592 1.413c0 0.533-0.208 1.038-0.588 1.413-0.25 0.25-0.392 0.587-0.392 0.942s0.142 0.692 0.392 0.942l3.642 3.642c0.258 0.258 0.6 0.392 0.942 0.392s0.683-0.129 0.942-0.392l17.333-17.333c0.525-0.517 0.525-1.358 0.004-1.879zM13.333 28.779l-1.896-1.896c0.954-1.767 0.688-4.029-0.804-5.521-0.883-0.875-2.054-1.363-3.3-1.363 0 0 0 0 0 0-0.787 0-1.546 0.196-2.221 0.558l-1.892-1.892 15.446-15.446 1.896 1.896c-0.954 1.767-0.688 4.029 0.804 5.521 0.908 0.908 2.104 1.367 3.3 1.367 0.767 0 1.529-0.188 2.221-0.558l1.896 1.896-15.45 15.438z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M17.137 8.196c-0.258-0.258-0.683-0.258-0.942 0l-8 8c-0.258 0.258-0.258 0.683 0 0.942l6.667 6.667c0.129 0.129 0.3 0.196 0.471 0.196s0.342-0.067 0.471-0.196l8-8c0.258-0.258 0.258-0.683 0-0.942l-6.667-6.667zM15.333 22.392l-5.725-5.725 7.058-7.058 5.725 5.725-7.058 7.058z"
/>
</svg>

5
src/icons/IconPopular.vue
View File

@@ -2,22 +2,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M21.333 20h-2.667c-0.738 0-1.333 0.596-1.333 1.333v10c0 0.367 0.3 0.667 0.667 0.667h4c0.367 0 0.667-0.3 0.667-0.667v-10c0-0.738-0.596-1.333-1.333-1.333zM18.667 30.667v-8h1.333v8h-1.333z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M13.333 14.667h-2.667c-0.738 0-1.333 0.596-1.333 1.333v15.333c0 0.367 0.3 0.667 0.667 0.667h4c0.367 0 0.667-0.3 0.667-0.667v-15.333c0-0.738-0.596-1.333-1.333-1.333zM10.667 30.667v-13.333h1.333v13.333h-1.333z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M5.333 20h-2.667c-0.738 0-1.333 0.596-1.333 1.333v10c0 0.367 0.3 0.667 0.667 0.667h4c0.367 0 0.667-0.3 0.667-0.667v-10c0-0.738-0.596-1.333-1.333-1.333zM2.667 30.667v-8h1.333v8h-1.333z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M29.333 9.333h-2.667c-0.738 0-1.333 0.596-1.333 1.333v20.667c0 0.367 0.3 0.667 0.667 0.667h4c0.367 0 0.667-0.3 0.667-0.667v-20.667c0-0.738-0.596-1.333-1.333-1.333zM26.667 30.667v-18.667h1.333v18.667h-1.333z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M31.333 0h-3.333v1.333h1.592l-11.738 9.267-9.004-2.571c-0.208-0.058-0.429-0.012-0.6 0.121l-7.188 5.75 0.833 1.042 6.917-5.533 9.004 2.571c0.204 0.058 0.429 0.017 0.596-0.117l12.254-9.679v1.817h1.333v-3.333c0-0.367-0.3-0.667-0.667-0.667z"
/>
</svg>

2
src/icons/IconProfile.vue
View File

@@ -2,10 +2,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M16 18.667c4.413 0 8-3.588 8-8s-3.587-8-8-8-8 3.588-8 8 3.588 8 8 8zM16 5.333c2.942 0 5.333 2.392 5.333 5.333s-2.392 5.333-5.333 5.333c-2.942 0-5.333-2.392-5.333-5.333s2.392-5.333 5.333-5.333z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M26.279 22.758c-1.842-1.858-5.204-2.758-10.279-2.758s-8.438 0.9-10.279 2.758c-1.721 1.733-1.721 3.846-1.721 5.242v0.667c0 0.367 0.3 0.667 0.667 0.667h22.667c0.367 0 0.667-0.3 0.667-0.667v-0.667c0-1.396 0-3.508-1.721-5.242zM6.667 28c0-1.183 0-2.413 0.946-3.363 0.563-0.567 1.429-1.017 2.583-1.342 1.475-0.417 3.429-0.629 5.804-0.629s4.329 0.212 5.804 0.629c1.154 0.325 2.021 0.775 2.583 1.342 0.946 0.95 0.946 2.179 0.946 3.363h-18.667z"
/>
</svg>

7
src/icons/IconSearch.vue
View File

@@ -1,7 +1,12 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
style="transition-duration: 0s;"
>
<path
xmlns="http://www.w3.org/2000/svg"
fill="inherit"
d="M21.388 21.141c-0.045 0.035-0.089 0.073-0.132 0.116s-0.080 0.085-0.116 0.132c-1.677 1.617-3.959 2.611-6.473 2.611-2.577 0-4.909-1.043-6.6-2.733s-2.733-4.023-2.733-6.6 1.043-4.909 2.733-6.6 4.023-2.733 6.6-2.733 4.909 1.043 6.6 2.733 2.733 4.023 2.733 6.6c0 2.515-0.993 4.796-2.612 6.475zM28.943 27.057l-4.9-4.9c1.641-2.053 2.624-4.657 2.624-7.491 0-3.313-1.344-6.315-3.515-8.485s-5.172-3.515-8.485-3.515-6.315 1.344-8.485 3.515-3.515 5.172-3.515 8.485 1.344 6.315 3.515 8.485 5.172 3.515 8.485 3.515c2.833 0 5.437-0.983 7.491-2.624l4.9 4.9c0.521 0.521 1.365 0.521 1.885 0s0.521-1.365 0-1.885z"
/>
</svg>

65
src/icons/IconUpcoming.vue
View File

@@ -1,39 +1,40 @@
<template>
<svg id="icon-calendar4" viewBox="0 0 32 32" width="100%" height="100%">
<path d="M0 1.333h6.667v2.667h-6.667v-2.667z"></path>
<path d="M12 1.333h8v2.667h-8v-2.667z"></path>
<path d="M25.333 1.333h6.667v2.667h-6.667v-2.667z"></path>
<path d="M8 0h2.667v9.333h-2.667v-9.333z"></path>
<path d="M21.333 0h2.667v9.333h-2.667v-9.333z"></path>
<path d="M12 5.333h8v2.667h-8v-2.667z"></path>
<path fill="inherit" d="M0 1.333h6.667v2.667h-6.667v-2.667z"></path>
<path fill="inherit" d="M12 1.333h8v2.667h-8v-2.667z"></path>
<path fill="inherit" d="M25.333 1.333h6.667v2.667h-6.667v-2.667z"></path>
<path fill="inherit" d="M8 0h2.667v9.333h-2.667v-9.333z"></path>
<path fill="inherit" d="M21.333 0h2.667v9.333h-2.667v-9.333z"></path>
<path fill="inherit" d="M12 5.333h8v2.667h-8v-2.667z"></path>
<path
fill="inherit"
d="M29.333 5.333h-4v2.667h4v21.333h-20v-6c0-0.367-0.3-0.667-0.667-0.667h-6v-14.667h4v-2.667h-4c-1.471 0-2.667 1.196-2.667 2.667v14.667c0 5.146 4.188 9.333 9.333 9.333h20c1.471 0 2.667-1.196 2.667-2.667v-21.333c0-1.471-1.196-2.667-2.667-2.667zM2.8 24h5.2v5.2c-2.608-0.533-4.667-2.592-5.2-5.2z"
></path>
<path d="M14.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path d="M10.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M14.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M6.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M10.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M14.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M6.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M10.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path d="M14.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path d="M6.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path d="M10.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M14.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path d="M10.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M14.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M18.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path d="M22.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 12h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M10.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M6.667 14.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M10.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M6.667 17.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M10.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M6.667 20h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M10.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 22.667h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M10.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M14.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M18.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
<path fill="inherit" d="M22.667 25.333h2.667v1.333h-2.667v-1.333z"></path>
</svg>
</template>