Remove scale for Icons (#757)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-01-04 12:05:23 +03:00 committed by GitHub
parent b92e34ff88
commit a7699648dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 49 additions and 85 deletions

View File

@ -59,7 +59,7 @@
>
<div class="overflow-label label"><Label {label} /></div>
<div class="flex-row-center space">
<span class="scale-75 mr-1"><IconFolder size={'small'} /></span>
<span class="mr-1"><IconFolder size={'small'} /></span>
<span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
{#if selected}
{selected.name}

View File

@ -282,12 +282,6 @@ p:last-child { margin-block-end: 0; }
height: 0;
}
.scale-75 {
transform-origin: center center;
transform: scale(.75);
pointer-events: none;
}
.hover-trans {
color: var(--theme-content-trans-color);
cursor: pointer;

View File

@ -43,9 +43,6 @@
cursor: pointer;
.icon {
// transform-origin: center center;
// transform: scale(.75);
// color: var(--theme-content-trans-color);
&.invisible { opacity: 0; }
}
&:hover .icon {

View File

@ -31,7 +31,7 @@
<button class="button {size}" class:transparent class:primary disabled={disabled || loading} style={width ? 'width: ' + width : ''} on:click>
{#if icon && !loading}
<div class="scale-75 icon">
<div class="icon">
<Icon {icon} size={'small'}/>
</div>
{/if}

View File

@ -27,7 +27,7 @@
<div class="flex-center icon-button icon-{size}" class:selected class:transparent class:primary on:click on:mousemove>
<div class="content">
<Icon {icon} size={'small'} />
<Icon {icon} size={'full'} />
</div>
</div>
@ -38,12 +38,7 @@
border-radius: 50%;
cursor: pointer;
.content {
transform-origin: center center;
transform: scale(.75);
pointer-events: none;
}
.content { pointer-events: none; }
&.selected { background-color: var(--theme-circle-select); }
&.transparent { background-color: var(--theme-circle-trans); }
&.primary {
@ -57,20 +52,33 @@
.icon-small {
width: 1.5rem;
height: 1.5rem;
.content { transform: scale(.6); }
.content {
width: .625rem;
height: .625rem;
}
}
.icon-medium {
width: 1.75rem;
height: 1.75rem;
.content {
width: .75rem;
height: .75rem;
}
}
.icon-large {
width: 2rem;
height: 2rem;
.content { transform: scale(.9); }
.content {
width: .875rem;
height: .875rem;
}
}
.icon-x-large {
width: 2.25rem;
height: 2.25rem;
.content { transform: none; }
.content {
width: 1rem;
height: 1rem;
}
}
</style>

View File

@ -64,12 +64,8 @@
{#if label}<div class="label"><Label label={label}/></div>{/if}
<div class="flex-row-center">
{#if icon}
<div class="icon">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'}/>
{:else}
<svelte:component this={icon} size={'small'} />
{/if}
<div class="content-trans-color mr-1">
<Icon {icon} size={'small'}/>
</div>
{/if}
<div class="wrap">
@ -120,13 +116,6 @@
user-select: none;
}
.icon {
margin-right: .25rem;
transform-origin: center center;
transform: scale(.75);
color: var(--theme-content-trans-color);
}
input {
margin: 0;
padding: 0;

View File

@ -17,7 +17,7 @@
import { AnySvelteComponent } from '../types';
export let icon: Asset | AnySvelteComponent
export let size: 'x-small' | 'small' | 'medium' | 'large'
export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
export let fill = 'currentColor'
export let filled: boolean = false
@ -43,8 +43,8 @@
<style lang="scss">
.x-small {
width: 0.857em;
height: 0.857em;
width: .857em;
height: .857em;
}
.small {
@ -59,4 +59,8 @@
width: 1.715em;
height: 1.715em;
}
.full {
width: inherit;
height: inherit;
}
</style>

View File

@ -32,11 +32,7 @@
<span class="container" class:disabled on:click>
{#if icon}
<span class="icon">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'}/>
{:else}
<svelte:component this={icon} size={'small'} />
{/if}
<Icon {icon} size={'small'}/>
</span>
{/if}
{#if disabled}
@ -55,8 +51,6 @@
.icon {
margin-right: .25rem;
transform-origin: center center;
transform: scale(.75);
color: var(--theme-content-color);
}
&:hover .icon { color: var(--theme-caption-color); }

View File

@ -4,5 +4,5 @@
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M15.4,7.4H8.6V0.6C8.6,0.3,8.3,0,8,0S7.4,0.3,7.4,0.6v6.8H0.6C0.3,7.4,0,7.7,0,8s0.3,0.6,0.6,0.6h6.8v6.8 C7.4,15.7,7.7,16,8,16s0.6-0.3,0.6-0.6V8.6h6.8C15.7,8.6,16,8.3,16,8S15.7,7.4,15.4,7.4z"/>
<path d="M14,7.5H8.5V2c0-0.3-0.2-0.5-0.5-0.5S7.5,1.7,7.5,2v5.5H2C1.7,7.5,1.5,7.7,1.5,8S1.7,8.5,2,8.5h5.5V14 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V8.5H14c0.3,0,0.5-0.2,0.5-0.5S14.3,7.5,14,7.5z"/>
</svg>

View File

@ -4,5 +4,5 @@
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.9,8l6.9-6.9c0.2-0.2,0.2-0.6,0-0.9s-0.6-0.2-0.9,0L8,7.1L1.1,0.2c-0.2-0.2-0.6-0.2-0.9,0s-0.2,0.6,0,0.9L7.1,8l-6.9,6.9 c-0.2,0.2-0.2,0.6,0,0.9C0.3,15.9,0.5,16,0.6,16s0.3-0.1,0.4-0.2L8,8.9l6.9,6.9c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2 c0.2-0.2,0.2-0.6,0-0.9L8.9,8z"/>
<path d="M8.7,8l4.6-4.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L3.4,2.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-4.6,4.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l4.6,4.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
</svg>

View File

@ -4,6 +4,6 @@
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M6.9,14.8H2.1l4.7-4.7C7,9.8,7,9.4,6.8,9.2C6.6,9,6.2,9,5.9,9.2l-4.7,4.7V9.1c0-0.3-0.3-0.6-0.6-0.6 S0,8.7,0,9.1v6.3c0,0,0,0,0,0c0,0.1,0,0.2,0,0.2c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1 c0.1,0,0.2,0,0.2,0c0,0,0,0,0,0h6.3c0.3,0,0.6-0.3,0.6-0.6C7.6,15,7.3,14.8,6.9,14.8z"/>
<path d="M16,0.4c0,0,0-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2,0-0.2,0 c0,0,0,0,0,0H9.1C8.7,0,8.4,0.3,8.4,0.6s0.3,0.6,0.6,0.6h4.8L9.2,5.9C9,6.2,9,6.6,9.2,6.8C9.3,6.9,9.5,7,9.6,7s0.3-0.1,0.4-0.2 l4.7-4.7v4.8c0,0.3,0.3,0.6,0.6,0.6S16,7.3,16,6.9V0.6C16,0.5,16,0.5,16,0.4z"/>
<path d="M7.1,13.5H3.2L7,9.7C7.2,9.5,7.2,9.2,7,9S6.5,8.8,6.3,9l-3.8,3.8V8.9c0-0.3-0.2-0.5-0.5-0.5S1.5,8.6,1.5,8.9V14c0,0,0,0,0,0 c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0h5.1 c0.3,0,0.5-0.2,0.5-0.5S7.4,13.5,7.1,13.5z"/>
<path d="M14.5,1.8C14.4,1.8,14.4,1.8,14.5,1.8c-0.1-0.1-0.1-0.1-0.1-0.2c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.2,0 c0,0,0,0,0,0H8.9C8.6,1.5,8.4,1.7,8.4,2s0.2,0.5,0.5,0.5h3.9L9,6.3C8.8,6.5,8.8,6.8,9,7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 l3.8-3.8v3.9c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V2C14.5,1.9,14.5,1.9,14.5,1.8z"/>
</svg>

View File

@ -20,5 +20,5 @@
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
<path d="M13.1,5.2c-0.1-0.2-0.2-0.4-0.4-0.6L10.1,2C9.9,1.8,9.7,1.7,9.5,1.6C9.3,1.5,9.1,1.5,8.8,1.5H6c-1.3,0-2.1,0-2.6,0.5 S2.8,3.3,2.8,4.7v6.7c0,1.3,0,2.1,0.5,2.6s1.3,0.5,2.6,0.5h4c1.3,0,2.1,0,2.6-0.5c0.5-0.5,0.5-1.3,0.5-2.6V5.9 C13.2,5.6,13.2,5.4,13.1,5.2z M11.9,5.3c0.1,0.1,0.2,0.2,0.2,0.2H10c-0.3,0-0.7,0-0.8,0c0-0.1,0-0.5,0-0.8V2.5 c0.1,0,0.1,0.1,0.2,0.2L11.9,5.3z M11.9,13.3c-0.2,0.2-0.8,0.2-1.9,0.2H6c-1.2,0-1.7,0-1.9-0.2s-0.2-0.8-0.2-1.9V4.7 c0-1.2,0-1.7,0.2-1.9S4.8,2.5,6,2.5h2.2v2.2c0,0.7,0,1.1,0.3,1.5S9.3,6.5,10,6.5h2.2v4.8C12.2,12.5,12.2,13,11.9,13.3z"/>
</svg>

View File

@ -4,6 +4,6 @@
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M11.6,2.7H9.4c-0.3,0-0.7-0.1-0.9-0.4L7.8,1.5C7.4,0.9,6.7,0.6,5.9,0.6H4.4C1.5,0.6,0,2.1,0,5.2v5.5 c0,2.9,1.9,4.7,5,4.7H11c3.1,0,5-1.8,5-4.7l0-3.5C16,4.2,14.6,2.7,11.6,2.7z M14.6,10.7C14.6,10.8,14.6,10.8,14.6,10.7 c0,2.2-1.3,3.4-3.7,3.4H5c-2.4,0-3.7-1.2-3.7-3.3V5.2c0-2.4,0.9-3.3,3.1-3.3h1.5c0.3,0,0.7,0.1,0.9,0.4l0.7,0.9C8,3.7,8.7,4,9.4,4 h2.2c2.2,0,3.1,0.9,3.1,3.2L14.6,10.7z"/>
<path d="M11.4,9.3H4.3C4,9.3,3.7,9.6,3.7,10c0,0.4,0.3,0.7,0.7,0.7h7.1c0.4,0,0.7-0.3,0.7-0.7 C12.1,9.6,11.8,9.3,11.4,9.3z"/>
<path d="M10.7,4.1H9.1C8.8,4.1,8.6,4,8.4,3.8L7.9,3.2C7.5,2.8,7,2.5,6.4,2.5H5.3C3.1,2.5,2,3.7,2,6v4.1c0,2.2,1.4,3.5,3.8,3.5h4.5 c2.3,0,3.8-1.3,3.8-3.5l0-2.6C14,5.2,12.9,4.1,10.7,4.1z M13,10.1C13,10.1,13,10.1,13,10.1c0,1.6-1,2.5-2.8,2.5H5.8 C4,12.7,3,11.8,3,10.1V6c0-1.8,0.7-2.5,2.3-2.5h1.1c0.3,0,0.5,0.1,0.7,0.3l0.5,0.6C8,4.9,8.5,5.1,9.1,5.1h1.6c1.7,0,2.3,0.7,2.3,2.4 L13,10.1z"/>
<path d="M10.6,9.1H5.3C5,9.1,4.8,9.3,4.8,9.6s0.2,0.5,0.5,0.5h5.3c0.3,0,0.5-0.2,0.5-0.5S10.8,9.1,10.6,9.1z"/>
</svg>

View File

@ -1,6 +1,6 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

View File

@ -189,13 +189,11 @@
<div class="flex-between msgactivity-container">
<div class="flex-center icon">
<div class="scale-75">
{#if viewlet}
<Icon icon={viewlet.icon} size="medium" />
{:else}
<Icon icon={activity.icon.Activity} size="medium" />
{/if}
</div>
{#if viewlet}
<Icon icon={viewlet.icon} size="small" />
{:else}
<Icon icon={activity.icon.Activity} size="small" />
{/if}
</div>
<div class="flex-grow flex-col">

View File

@ -121,7 +121,7 @@
</div>
</div>
{:else if enabled}
<div class="flex-center icon"><div class="scale-75"><Icon icon={contact.icon.Email} size="small" /></div></div>
<div class="flex-center icon"><Icon icon={contact.icon.Email} size="small" /></div>
<div class="flex-grow flex-col">
<div class="fs-title">Gmail</div>
<div class="small-text content-dark-color"><Label label={gmail.string.YouAnd} /> {formatName(object.name)}</div>

View File

@ -32,6 +32,6 @@
<path d="M5.5,8.3h2.7c0.3,0,0.6-0.3,0.6-0.6S8.5,7.2,8.2,7.2H5.5c-0.3,0-0.6,0.3-0.6,0.6S5.1,8.3,5.5,8.3z"/>
</symbol>
<symbol id="application" viewBox="0 0 16 16">
<path d="M11.2,0C11.2,0,11.2,0,11.2,0H6C6,0,6,0,6,0s0,0-0.1,0H5.8C5.7,0,5.5,0.1,5.4,0.2L1.3,4.5C1.2,4.6,1.2,4.7,1.2,4.8v7.5 c0,2,1.5,3.6,3.5,3.7h6.5c0,0,0.1,0,0.1,0c2,0,3.6-1.7,3.5-3.7V3.5C14.8,1.6,13.2,0,11.2,0z M5.5,1.4v1.6c0,1-0.7,1.8-1.6,1.8H2.2 L5.5,1.4z M13.9,12.4c0,1.5-1.1,2.7-2.7,2.7H4.7c-1.5-0.1-2.6-1.2-2.6-2.7V5.8h1.8c1.4,0,2.6-1.2,2.6-2.8V1h4.8c0,0,0,0,0,0 c1.4,0,2.6,1.2,2.7,2.6V12.4z"/>
<path d="M13.1,5.2c-0.1-0.2-0.2-0.4-0.4-0.6L10.1,2C9.9,1.8,9.7,1.7,9.5,1.6C9.3,1.5,9.1,1.5,8.8,1.5H6c-1.3,0-2.1,0-2.6,0.5 S2.8,3.3,2.8,4.7v6.7c0,1.3,0,2.1,0.5,2.6s1.3,0.5,2.6,0.5h4c1.3,0,2.1,0,2.6-0.5c0.5-0.5,0.5-1.3,0.5-2.6V5.9 C13.2,5.6,13.2,5.4,13.1,5.2z M11.9,5.3c0.1,0.1,0.2,0.2,0.2,0.2H10c-0.3,0-0.7,0-0.8,0c0-0.1,0-0.5,0-0.8V2.5 c0.1,0,0.1,0.1,0.2,0.2L11.9,5.3z M11.9,13.3c-0.2,0.2-0.8,0.2-1.9,0.2H6c-1.2,0-1.7,0-1.9-0.2s-0.2-0.8-0.2-1.9V4.7 c0-1.2,0-1.7,0.2-1.9S4.8,2.5,6,2.5h2.2v2.2c0,0.7,0,1.1,0.3,1.5S9.3,6.5,10,6.5h2.2v4.8C12.2,12.5,12.2,13,11.9,13.3z"/>
</symbol>
</svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -126,8 +126,6 @@
.tool {
margin-left: .75rem;
transform-origin: center center;
transform: scale(.75);
color: var(--theme-content-accent-color);
cursor: pointer;
&:hover { color: var(--theme-caption-color); }

View File

@ -24,13 +24,7 @@
</script>
<div class="flex-row-center container">
<div class="icon">
{#if typeof (icon) === 'string'}
<Icon {icon} size='small'/>
{:else}
<svelte:component this={icon} size='small' />
{/if}
</div>
<Icon {icon} size='small'/>
<span><Label {label} /></span>
</div>
@ -44,11 +38,6 @@
backdrop-filter: blur(3px);
cursor: pointer;
.icon {
transform-origin: center center;
transform: scale(.75);
}
span {
margin-left: 0.376rem;
font-weight: 500;

View File

@ -25,8 +25,8 @@
<div class="flex-col popup">
<div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close'); onDelete() }}>
<div class="icon">
<Delete size={'medium'} />
<div class="mr-3">
<Delete size={'small'} />
</div>
<div class="flex-grow"><Label label={task.string.Delete} /></div>
</div>
@ -49,11 +49,6 @@
border-radius: .5rem;
cursor: pointer;
.icon {
margin-right: .75rem;
transform-origin: center center;
transform: scale(.75);
}
&:hover { background-color: var(--theme-button-bg-hovered); }
}
</style>

View File

@ -156,7 +156,7 @@
</script>
<div class="flex-between header">
<div class="flex-center icon"><div class="scale-75"><TelegramIcon size={'small'} /></div></div>
<div class="flex-center icon"><TelegramIcon size={'small'} /></div>
<div class="flex-grow flex-col">
<div class="fs-title">Telegram</div>
<div class="small-text content-dark-color">You and {formatName(object.name)}</div>

View File

@ -110,8 +110,6 @@
.tool {
margin-left: .75rem;
transform-origin: center center;
transform: scale(.75);
color: var(--theme-content-accent-color);
cursor: pointer;
&:hover { color: var(--theme-caption-color); }