Proof of concept #5593 - inline SVG icon for icon-contacts
Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj
Morris Jobke
parent
6ca4b9eee9
commit
ffcdc96a0b
|
|
@ -20,8 +20,8 @@
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
|
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
|
||||||
}
|
}
|
||||||
#contactsmenu .icon-contacts {
|
#contactsmenu .icon-contacts svg path {
|
||||||
background-image: url('../../../core/img/places/contacts-dark.svg');
|
fill: #000;
|
||||||
}
|
}
|
||||||
#settings .icon-settings-white {
|
#settings .icon-settings-white {
|
||||||
background-image: url('../../../core/img/actions/settings-dark.svg');
|
background-image: url('../../../core/img/actions/settings-dark.svg');
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,20 @@
|
||||||
background-position: center;
|
background-position: center;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-self: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^='icon-'] svg,
|
||||||
|
[class*=' icon-'] svg {
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
vertical-align: -3px; // counter default DOM offset
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-white svg path {
|
||||||
|
fill: $color-primary-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-breadcrumb {
|
.icon-breadcrumb {
|
||||||
|
|
@ -445,14 +459,6 @@ img, object, video, button, textarea, input, select {
|
||||||
background-image: url('../img/places/calendar-dark.svg?v=1');
|
background-image: url('../img/places/calendar-dark.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-contacts {
|
|
||||||
background-image: url('../img/places/contacts.svg?v=1');
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-contacts-dark {
|
|
||||||
background-image: url('../img/places/contacts-dark.svg?v=1');
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-files {
|
.icon-files {
|
||||||
background-image: url('../img/places/files.svg?v=1');
|
background-image: url('../img/places/files.svg?v=1');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z" fill="#fff"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z"/></svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -107,7 +107,9 @@
|
||||||
<button class="icon-close-white" type="reset"></button>
|
<button class="icon-close-white" type="reset"></button>
|
||||||
</form>
|
</form>
|
||||||
<div id="contactsmenu">
|
<div id="contactsmenu">
|
||||||
<div class="icon-contacts menutoggle"></div>
|
<div class="icon-contacts icon-white menutoggle">
|
||||||
|
<?php include('core/img/places/contacts.svg'); ?>
|
||||||
|
</div>
|
||||||
<div class="menu"></div>
|
<div class="menu"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="settings">
|
<div id="settings">
|
||||||
|
|
|
||||||
|
|
@ -181,14 +181,14 @@
|
||||||
_setFieldScopeIcon: function(field, scope) {
|
_setFieldScopeIcon: function(field, scope) {
|
||||||
var $icon = this.$('#' + field + 'form > h2 > span');
|
var $icon = this.$('#' + field + 'form > h2 > span');
|
||||||
$icon.removeClass('icon-password');
|
$icon.removeClass('icon-password');
|
||||||
$icon.removeClass('icon-contacts-dark');
|
$icon.removeClass('icon-contacts');
|
||||||
$icon.removeClass('icon-link');
|
$icon.removeClass('icon-link');
|
||||||
switch (scope) {
|
switch (scope) {
|
||||||
case 'private':
|
case 'private':
|
||||||
$icon.addClass('icon-password');
|
$icon.addClass('icon-password');
|
||||||
break;
|
break;
|
||||||
case 'contacts':
|
case 'contacts':
|
||||||
$icon.addClass('icon-contacts-dark');
|
$icon.addClass('icon-contacts');
|
||||||
break;
|
break;
|
||||||
case 'public':
|
case 'public':
|
||||||
$icon.addClass('icon-link');
|
$icon.addClass('icon-link');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue