optimize icons with scour, add to icons.scss

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
Georg Ehrke 2018-11-30 00:22:56 +01:00
parent 519892bfff
commit f107f237fa
No known key found for this signature in database
GPG Key ID: 9D98FD9380A1CB43
21 changed files with 58 additions and 83 deletions

View File

@ -1,5 +1,6 @@
@import 'calendarlist.scss';
@import 'confirmation.scss';
@import 'icons.scss';
@import 'datepicker.scss';
@import 'eventdialog.scss';

View File

@ -52,6 +52,11 @@
text-align: center;
}
.button.icon.icon-leftarrow,
.button.icon.icon-rightarrow {
background-size: 10px;
}
.button.active {
background-color: $color-primary;
color: $color-primary-text;

View File

@ -21,6 +21,12 @@
*
*/
#datepicker .datepicker_current,
#app-navigation .togglebuttons,
#app-navigation .togglebuttons .btn-group {
float: left;
}
#app-navigation .togglebuttons .button.active {
background-color: $color-primary;
color: $color-primary-text;
@ -42,20 +48,18 @@
font-weight: normal;
}
#datepicker {
table {
display: inline-block;
margin-left: 5px;
#datepicker table {
display: inline-block;
margin-left: 5px;
}
td button {
margin: 0;
font-weight: 300;
}
}
#datepicker table td button {
margin: 0;
font-weight: 300;
}
thead {
display: none;
}
#datepicker thead {
display: none;
}
#datepicker td button {
@ -77,13 +81,12 @@
#datepicker table tbody button {
margin: 0;
padding: 8px 9px;
padding: 6px 9px;
background: transparent;
cursor: pointer;
border-radius: 0;
border-top: 0;
border-left: 0;
min-width: 34px;
}
#datepicker table tbody tr td button {
@ -95,7 +98,7 @@
}
#datepicker table tbody button.active {
border-radius: var(--border-radius-pill);
border-radius: 50%;
background-color: $color-primary;
color: $color-primary-text;
font-weight: bold;
@ -120,7 +123,6 @@
#app-navigation .datepicker-heading,
#app-navigation .togglebuttons {
display: flex;
justify-content: space-between;
margin: 0 5px;
width: calc(100% - 10px);
}
@ -137,24 +139,6 @@
flex-grow: 1;
}
#app-navigation .togglebuttons .button {
border-radius: 0;
&.first {
margin-right: -1px;
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
&.middle {
margin: auto 0;
}
&.last {
margin-left: -1px;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
}
#app-navigation .datepicker-heading .button:hover,
#app-navigation .togglebuttons .button:hover,
#app-navigation .datepicker-heading .button.active,
@ -162,21 +146,30 @@
z-index: 50; /* Force show border */
}
#app-navigation .datepicker-heading .icon-view-previous,
#app-navigation .togglebuttons .icon-view-previous {
#app-navigation .datepicker-heading .button.first,
#app-navigation .togglebuttons .button.first {
margin-right: -1px;
border-radius: 3px 0 0 3px;
flex-grow: 0;
}
#app-navigation .datepicker-heading .icon-view-next,
#app-navigation .togglebuttons .icon-view-next {
#app-navigation .datepicker-heading .button.middle,
#app-navigation .togglebuttons .button.middle {
margin-left: 0;
margin-right: 0;
border-radius: 0;
}
#app-navigation .datepicker-heading .button.last,
#app-navigation .togglebuttons .button.last {
margin-left: -1px;
border-radius: 0 3px 3px 0;
flex-grow: 0;
}
#app-navigation .datepicker-heading .icon-view-previous,
#app-navigation .datepicker-heading .icon-view-next {
#app-navigation .datepicker-heading .button.first,
#app-navigation .datepicker-heading .button.last {
width: 35px;
}
#app-navigation .datepicker-heading .button.middle {
width: calc(100% - 70px);
}

View File

@ -41,11 +41,6 @@
clear: both;
}
.icon-timezone {
background: url("../../img/timezone.svg") center center no-repeat;
display: block;
}
.input-with-button-on-right-side {
width: 76% !important;
float: left;
@ -71,7 +66,3 @@
#emptycontent-container #emptycontent {
color: #a9a9a9 !important;
}
.icon-embed {
background-image: url('../../img/embed.svg') !important;
}

View File

@ -19,3 +19,9 @@
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/
@include icon-black-white('color-picker', 'calendar', 1);
@include icon-black-white('embed', 'calendar', 1);
@include icon-black-white('leftarrow', 'calendar', 1);
@include icon-black-white('random', 'calendar', 1);
@include icon-black-white('rightarrow', 'calendar', 1);
@include icon-black-white('timezone', 'calendar', 1);

3
img/color-picker.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="15" height="15" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727c-1.959-1.959-5.134-1.959-7.093 0s-1.959 5.134 0 7.093l3.727 3.727-41.51 41.508c-2.039 2.039-3.149 4.656-3.329 7.324-0.073 1.087-0.347 3.105-0.675 5.292-0.053 0.359-0.212 0.706-0.487 0.983l-3.105 3.106c-0.994 0.994-0.994 2.606 0 3.6l3.493 3.493c0.994 0.994 2.606 0.994 3.6 0l3.106-3.105c0.277-0.275 0.622-0.433 0.981-0.486 2.187-0.329 4.205-0.602 5.293-0.675 2.668-0.18 5.285-1.29 7.325-3.33l41.508-41.508 3.727 3.727c1.959 1.959 5.134 1.959 7.093 0s1.959-5.134 0-7.093l-12.365-12.366 9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726 1e-3 -16.2zm-26.594 34.394-20.53 20.53c-0.994 0.994-2.606 0.994-3.6 0l-3.27-3.27c-0.994-0.993-2.605-0.993-3.599 1e-3l-0.616 0.616-2e-3 -2e-3 -14.728 14.727c-0.337 0.337-0.819 0.401-1.076 0.143s-0.194-0.74 0.143-1.076l23.841-23.841 4e-3 4e-3 15.633-15.633c0.994-0.994 2.606-0.994 3.6 0l4.2 4.201c0.994 0.994 0.994 2.606 0 3.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg id="Layer_1" width="15" height="15" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<path d="m91.645 8.355c-4.474-4.474-11.727-4.474-16.2 0l-13.5 13.501-3.727-3.727c-1.959-1.959-5.134-1.959-7.093 0s-1.959 5.134 0 7.093l3.727 3.727-41.51 41.508c-2.039 2.039-3.149 4.656-3.329 7.324-0.073 1.087-0.347 3.105-0.675 5.292-0.053 0.359-0.212 0.706-0.487 0.983l-3.105 3.106c-0.994 0.994-0.994 2.606 0 3.6l3.493 3.493c0.994 0.994 2.606 0.994 3.6 0l3.106-3.105c0.277-0.275 0.622-0.433 0.981-0.486 2.187-0.329 4.205-0.602 5.293-0.675 2.668-0.18 5.285-1.29 7.325-3.33l41.508-41.508 3.727 3.727c1.959 1.959 5.134 1.959 7.093 0s1.959-5.134 0-7.093l-12.365-12.366 9.697 7.577 12.44-12.441c4.475-4.473 4.474-11.726 1e-3 -16.2zm-26.594 34.394l-20.53 20.53c-0.994 0.994-2.606 0.994-3.6 0l-3.27-3.27c-0.994-0.993-2.605-0.993-3.599 1e-3l-0.616 0.616-2e-3 -2e-3 -14.728 14.727c-0.337 0.337-0.819 0.401-1.076 0.143s-0.194-0.74 0.143-1.076l23.841-23.841 4e-3 4e-3 15.633-15.633c0.994-0.994 2.606-0.994 3.6 0l4.2 4.201c0.994 0.994 0.994 2.606 0 3.6z" fill="#fff"/>
<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M10.828 3.05L9.414 4.465 12.95 8l-3.536 3.536 1.414 1.414L15.778 8l-4.95-4.95zm-5.657 0L.223 8l4.95 4.95 1.414-1.414L3.05 8l3.536-3.535L5.172 3.05z" fill="#969696"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M10.828 3.05L9.414 4.465 12.95 8l-3.536 3.536 1.414 1.414L15.778 8l-4.95-4.95zm-5.657 0L.223 8l4.95 4.95 1.414-1.414L3.05 8l3.536-3.535L5.172 3.05z"/></svg>

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 241 B

1
img/leftarrow.svg Normal file
View File

@ -0,0 +1 @@
<svg enable-background="new 136.3 -90.4 106.9 197.4" version="1.1" viewBox="136.3 -90.4 106.9 197.4" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="237.9 107 136.3 8.3 237.9 -90.4 243.1 -85 147.1 8.3 243.1 101.6"/></svg>

After

Width:  |  Height:  |  Size: 247 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +1 @@
<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M666 481q-60 92-137 273-22-45-37-72.5t-40.5-63.5-51-56.5-63-35-81.5-14.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q250 0 410 225zm1126 799q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1-73-1-71-5-64-10.5-63-18.5-58-28.5-59-40-55-53.5-56-69.5q59-93 136-273 22 45 37 72.5t40.5 63.5 51 56.5 63 35 81.5 14.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23zm0-896q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192h-256q-48 0-87 15t-69 45-51 61.5-45 77.5q-32 62-78 171-29 66-49.5 111t-54 105-64 100-74 83-90 68.5-106.5 42-128 16.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45 51-61.5 45-77.5q32-62 78-171 29-66 49.5-111t54-105 64-100 74-83 90-68.5 106.5-42 128-16.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23z"/></svg>
<svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M666 481q-60 92-137 273-22-45-37-72.5t-40.5-63.5-51-56.5-63-35-81.5-14.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q250 0 410 225zm1126 799q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1-73-1-71-5-64-10.5-63-18.5-58-28.5-59-40-55-53.5-56-69.5q59-93 136-273 22 45 37 72.5t40.5 63.5 51 56.5 63 35 81.5 14.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23zm0-896q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192h-256q-48 0-87 15t-69 45-51 61.5-45 77.5q-32 62-78 171-29 66-49.5 111t-54 105-64 100-74 83-90 68.5-106.5 42-128 16.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45 51-61.5 45-77.5q32-62 78-171 29-66 49.5-111t54-105 64-100 74-83 90-68.5 106.5-42 128-16.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23z"/></svg>

Before

Width:  |  Height:  |  Size: 895 B

After

Width:  |  Height:  |  Size: 881 B

1
img/rightarrow.svg Normal file
View File

@ -0,0 +1 @@
<svg enable-background="new 136.3 -90.4 106.9 197.4" version="1.1" viewBox="136.3 -90.4 106.9 197.4" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="141.5 -90.4 243.1 8.3 141.5 107 136.3 101.6 232.3 8.3 136.3 -85"/></svg>

After

Width:  |  Height:  |  Size: 247 B

View File

@ -1,17 +1 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
<g>
<path style="fill:#333333;" d="M14.982,7C14.736,3.256,11.744,0.263,8,0.017V0H7.5H7v0.017C3.256,0.263,0.263,3.256,0.017,7H0v0.5
V8h0.017C0.263,11.744,3.256,14.736,7,14.982V15h0.5H8v-0.018c3.744-0.246,6.736-3.238,6.982-6.982H15V7.5V7H14.982z M4.695,1.635
C4.212,2.277,3.811,3.082,3.519,4H2.021C2.673,2.983,3.599,2.16,4.695,1.635z M1.498,5h1.758C3.122,5.632,3.037,6.303,3.01,7H1.019
C1.072,6.296,1.238,5.623,1.498,5z M1.019,8H3.01c0.027,0.697,0.112,1.368,0.246,2H1.498C1.238,9.377,1.072,8.704,1.019,8z
M2.021,11h1.497c0.292,0.918,0.693,1.723,1.177,2.365C3.599,12.84,2.673,12.018,2.021,11z M7,13.936
C5.972,13.661,5.087,12.557,4.55,11H7V13.936z M7,10H4.269C4.128,9.377,4.039,8.704,4.01,8H7V10z M7,7H4.01
c0.029-0.704,0.118-1.377,0.259-2H7V7z M7,4H4.55C5.087,2.443,5.972,1.339,7,1.065V4z M12.979,4h-1.496
c-0.293-0.918-0.693-1.723-1.178-2.365C11.4,2.16,12.327,2.983,12.979,4z M8,1.065C9.027,1.339,9.913,2.443,10.45,4H8V1.065z M8,5
h2.73c0.142,0.623,0.229,1.296,0.26,2H8V5z M8,8h2.99c-0.029,0.704-0.118,1.377-0.26,2H8V8z M8,13.936V11h2.45
C9.913,12.557,9.027,13.661,8,13.936z M10.305,13.365c0.483-0.643,0.885-1.447,1.178-2.365h1.496
C12.327,12.018,11.4,12.84,10.305,13.365z M13.502,10h-1.758c0.134-0.632,0.219-1.303,0.246-2h1.99
C13.928,8.704,13.762,9.377,13.502,10z M11.99,7c-0.027-0.697-0.112-1.368-0.246-2h1.758c0.26,0.623,0.426,1.296,0.479,2H11.99z"/>
</g>
</svg>
<svg enable-background="new 0 0 15 15" version="1.1" viewBox="0 0 15 15" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m14.982 7c-0.246-3.744-3.238-6.737-6.982-6.983v-0.017h-1v0.017c-3.744 0.246-6.737 3.239-6.983 6.983h-0.017v1h0.017c0.246 3.744 3.239 6.736 6.983 6.982v0.018h1v-0.018c3.744-0.246 6.736-3.238 6.982-6.982h0.018v-1h-0.018zm-10.287-5.365c-0.483 0.642-0.884 1.447-1.176 2.365h-1.498c0.652-1.017 1.578-1.84 2.674-2.365zm-3.197 3.365h1.758c-0.134 0.632-0.219 1.303-0.246 2h-1.991c0.053-0.704 0.219-1.377 0.479-2zm-0.479 3h1.991c0.027 0.697 0.112 1.368 0.246 2h-1.758c-0.26-0.623-0.426-1.296-0.479-2zm1.002 3h1.497c0.292 0.918 0.693 1.723 1.177 2.365-1.096-0.525-2.022-1.347-2.674-2.365zm4.979 2.936c-1.028-0.275-1.913-1.379-2.45-2.936h2.45v2.936zm0-3.936h-2.731c-0.141-0.623-0.23-1.296-0.259-2h2.99v2zm0-3h-2.99c0.029-0.704 0.118-1.377 0.259-2h2.731v2zm0-3h-2.45c0.537-1.557 1.422-2.661 2.45-2.935v2.935zm5.979 0h-1.496c-0.293-0.918-0.693-1.723-1.178-2.365 1.095 0.525 2.022 1.348 2.674 2.365zm-4.979-2.935c1.027 0.274 1.913 1.378 2.45 2.935h-2.45v-2.935zm0 3.935h2.73c0.142 0.623 0.229 1.296 0.26 2h-2.99v-2zm0 3h2.99c-0.029 0.704-0.118 1.377-0.26 2h-2.73v-2zm0 5.936v-2.936h2.45c-0.537 1.557-1.423 2.661-2.45 2.936zm2.305-0.571c0.483-0.643 0.885-1.447 1.178-2.365h1.496c-0.652 1.018-1.579 1.84-2.674 2.365zm3.197-3.365h-1.758c0.134-0.632 0.219-1.303 0.246-2h1.99c-0.052 0.704-0.218 1.377-0.478 2zm-1.512-3c-0.027-0.697-0.112-1.368-0.246-2h1.758c0.26 0.623 0.426 1.296 0.479 2h-1.991z"/></svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,16 +1,12 @@
<template>
<div class="button-group">
<button :aria-label="goBackLabel" :title="goBackLabel" type="button"
class="button" @click="prev()">
<i class="glyphicon glyphicon-chevron-left" />
</button>
class="button icon icon-leftarrow" @click="prev()" />
<label for="app-navigation-datepicker-input" class="button datepicker-label">{{ label }}</label>
<datetime-picker v-model="date" :lang="lang" :first-day-of-week="firstDay"
:not-before="min" :not-after="max" @change="selectInDatepicker" />
<button :aria-label="goForwardLabel" :title="goForwardLabel" type="button"
class="button" @click="next()">
<i class="glyphicon glyphicon-chevron-right" />
</button>
class="button icon icon-rightarrow" @click="next()" />
</div>
</template>

0
src/store/vobject.js Normal file
View File

View File

@ -1,4 +1,3 @@
<?php
script('calendar', 'calendar');
style('calendar', 'app/calendar');
?>
style('calendar', 'calendar');