Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make checkboxes bigger

Browse source
This commit is contained in:
Felix Niklas 2015-09-29 14:07:25 +02:00
parent 1dce17f27b
commit e647c1eb94
12 changed files with 126 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/application.css
View file

@ -14,7 +14,7 @@
*= require ./medium.css *= require ./medium.css
*= require ./fira-sans.css *= require ./fira-sans.css
*= require ./svg-dimensions.css *= require ./svg-dimensions.css
*= require ./zammad.css.scss *= require ./zammad.scss
* *
*= require_tree ./custom/ *= require_tree ./custom/
* *

7
app/assets/stylesheets/svg-dimensions.css
View file

@ -2,8 +2,8 @@
.icon-arrow-left { width: 7px; height: 13px; } .icon-arrow-left { width: 7px; height: 13px; }
.icon-arrow-right { width: 7px; height: 13px; } .icon-arrow-right { width: 7px; height: 13px; }
.icon-arrow-up { width: 13px; height: 7px; } .icon-arrow-up { width: 13px; height: 7px; }
.icon-checkbox-checked { width: 10px; height: 10px; } .icon-checkbox-checked { width: 11px; height: 11px; }
.icon-checkbox { width: 10px; height: 10px; } .icon-checkbox { width: 11px; height: 11px; }
.icon-checkmark { width: 16px; height: 14px; } .icon-checkmark { width: 16px; height: 14px; }
.icon-clipboard { width: 16px; height: 16px; } .icon-clipboard { width: 16px; height: 16px; }
.icon-clock { width: 16px; height: 16px; } .icon-clock { width: 16px; height: 16px; }
@ -70,6 +70,9 @@
.icon-status { width: 16px; height: 16px; } .icon-status { width: 16px; height: 16px; }
.icon-stopwatch { width: 77px; height: 83px; } .icon-stopwatch { width: 77px; height: 83px; }
.icon-switchView { width: 19px; height: 18px; } .icon-switchView { width: 19px; height: 18px; }
.icon-task-state-modified-inner-circle { width: 16px; height: 16px; }
.icon-task-state-modified-outer-circle { width: 16px; height: 16px; }
.icon-task-state { width: 16px; height: 16px; }
.icon-team { width: 16px; height: 16px; } .icon-team { width: 16px; height: 16px; }
.icon-templates { width: 24px; height: 24px; } .icon-templates { width: 24px; height: 24px; }
.icon-tools { width: 24px; height: 24px; } .icon-tools { width: 24px; height: 24px; }

98
app/assets/stylesheets/zammad.css.scss → app/assets/stylesheets/zammad.scss
View file

@ -4,6 +4,11 @@ $ok-color: hsl(41,100%,49%);
$bad-color: hsl(30,93%,50%); $bad-color: hsl(30,93%,50%);
$superbad-color: hsl(19,90%,51%); $superbad-color: hsl(19,90%,51%);
$task-state-closed-color: $supergood-color;
$task-state-pending-color: hsl(206,7%,28%);
$task-state-open-color: $ok-color;
$task-state-escalating-color: $superbad-color;
$minWidth: 1024px; $minWidth: 1024px;
$sidebarWidth: 280px; $sidebarWidth: 280px;
$navigationWidth: 260px; $navigationWidth: 260px;
@ -632,11 +637,6 @@ table {
fill: hsl(240,1%,77%); fill: hsl(240,1%,77%);
} }
.table .icon-priority {
vertical-align: middle;
margin-top: -3px;
}
.checkbox-replacement, .checkbox-replacement,
.radio-replacement { .radio-replacement {
padding: 0; padding: 0;
@ -672,8 +672,11 @@ table {
height: 38px; height: 38px;
} }
.table .priority.icon:after { .table-overview tbody .icon-checkbox,
background: #f8f9fa; .table-overview tbody .icon-radio,
.table-overview tbody .icon-checkbox-checked,
.table-overview tbody .icon-radio-checked {
fill: transparent;
} }
.table .table-cell { .table .table-cell {
@ -1932,6 +1935,11 @@ ol.tabs li {
} }
} }
.icon-checkbox,
.icon-checkbox-checked {
fill: white;
}
/* /*
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@ -2176,13 +2184,12 @@ footer {
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
} }
.tasks--standalone .icon-priority { .tasks--standalone .icon-task-state {
margin-right: 4px; margin-right: 4px;
margin-top: 2px;
} }
.nav-tab { .nav-tab {
padding: 10px 15px 7px 0; padding: 11px 15px 8px 0;
position: relative; position: relative;
color: #808080; color: #808080;
display: flex; display: flex;
@ -2191,7 +2198,7 @@ footer {
} }
.tasks-navigation .nav-tab { .tasks-navigation .nav-tab {
height: 38px; height: 40px;
border-bottom: 1px solid #33363e; border-bottom: 1px solid #33363e;
} }
@ -2229,6 +2236,7 @@ footer {
.nav-tab.nav-tab--search { .nav-tab.nav-tab--search {
height: 30px; height: 30px;
padding-top: 9px;
} }
.nav-tab-icon { .nav-tab-icon {
@ -2323,33 +2331,60 @@ footer {
opacity: 1; opacity: 1;
} }
.level-1.is-active { .icon-task-state {
background-color: #38ae6a; vertical-align: middle;
} margin-top: -2px;
.level-1 .icon-priority,
.level-1.icon-priority {
fill: #38ae6a;
} }
.level-2.is-active { .nav-tab-icon .icon-task-state {
background-color: #f35910; margin: 0;
}
.level-2 .icon-priority,
.level-2.icon-priority {
fill: #f35910;
} }
.level-3.is-active { .nav-tab.task-state-open.is-active {
background-color: #faab00; background-color: $task-state-open-color;
} }
.level-3 .icon-priority, .task-state-open-color {
.level-3.icon-priority { color: $task-state-open-color;
fill: #faab00; }
.icon-task-state.open {
fill: $task-state-open-color;
}
.nav-tab.task-state-closed.is-active {
background-color: $task-state-closed-color;
}
.task-state-closed-color {
color: $task-state-closed-color;
}
.icon-task-state.closed {
fill: $task-state-closed-color;
}
.nav-tab.task-state-escalating.is-active {
background-color: $task-state-escalating-color;
}
.task-state-escalating-color {
color: $task-state-escalating-color;
}
.icon-task-state.escalating {
fill: $task-state-escalating-color;
}
// pending: stays blue
// .nav-tab.task-state-pending.is-active {
// background-color: $task-state-pending-color;
// }
.task-state-pending-color {
color: $task-state-pending-color;
}
.icon-task-state.pending {
fill: $task-state-pending-color;
} }
.search { .search {
padding: 11px 5px 4px 10px; padding: 11px 5px 4px 10px;
border-bottom: 1px solid rgba(240, 250, 255, .05); border-bottom: 1px solid rgba(240,250,255,.05);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
background-color: inherit; background-color: inherit;
@ -4932,7 +4967,8 @@ footer {
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
height: auto; height: auto;
padding-bottom: 2px; padding-top: 3px;
padding-bottom: 3px;
background: hsl(210,17%,98%); background: hsl(210,17%,98%);
} }
@ -4953,7 +4989,7 @@ footer {
} }
.checkbox.form-group input[type=checkbox] { .checkbox.form-group input[type=checkbox] {
margin-top: 3px; margin-top: 7px;
vertical-align: bottom; vertical-align: bottom;
} }

BIN
contrib/icon-sprite.sketch
View file

Binary file not shown.

2
public/assets/images/icons.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 51 KiB

8
public/assets/images/icons/checkbox-checked.svg
View file

@ -1,12 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>checkbox-checked</title> <title>checkbox-checked</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="checkbox-checked" sketch:type="MSArtboardGroup" fill="#000000"> <g id="checkbox-checked" sketch:type="MSArtboardGroup">
<path d="M9,1 L9,9 L1,9 L1,1 L9,1 Z M0,0 L0,0.5 L0,9.5 L0,10 L0.5,10 L9.5,10 L10,10 L10,9.5 L10,0.5 L10,0 L9.5,0 L0.5,0 L0,0 Z M3.79999999,5.89999999 L2.09999999,4.39999999 L1.39999999,5.09999999 L4.29999999,8.59999999 C4.79999999,7.09999999 6.39999999,4.19999999 8.29999999,2.09999999 L8.09999999,1.49999999 C5.99999999,2.99999999 4.39999999,4.89999999 3.79999999,5.89999999 L3.79999999,5.89999999 L3.79999999,5.89999999 Z" sketch:type="MSShapeGroup"></path> <path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2" sketch:type="MSShapeGroup"></path>
<path d="M0,0 L0,0.55 L0,10.45 L0,11 L0.55,11 L10.45,11 L11,11 L11,10.45 L11,0.55 L11,0 L10.45,0 L0.55,0 L0,0 Z M10,1 L10,10 L1,10 L1,1 L10,1 Z" id="Path" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M4.27323943,6.76760563 L2.23802816,4.97183098 L1.39999999,5.80985915 L4.87183098,10 C5.47042253,8.20422535 7.38591549,4.73239436 9.66056338,2.21830985 L9.42112676,1.49999999 C6.90704225,3.29577464 4.99154929,5.57042253 4.27323943,6.76760563 L4.27323943,6.76760563 L4.27323943,6.76760563 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

7
public/assets/images/icons/checkbox.svg
View file

@ -1,12 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <svg width="11px" height="11px" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>checkbox</title> <title>checkbox</title>
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="checkbox" sketch:type="MSArtboardGroup" fill-opacity="0.2" fill="#000000"> <g id="checkbox" sketch:type="MSArtboardGroup">
<path d="M9,9 L1,9 L1,1 L9,1 L9,9 Z M10,0 L0,0 L0,10 L10,10 L10,0 Z" id="Shape" sketch:type="MSShapeGroup"></path> <path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z" id="Path-Copy" fill="#50E3C2" sketch:type="MSShapeGroup"></path>
<path d="M11,0 L0,0 L0,11 L11,11 L11,0 Z M1,1 L10,1 L10,10 L1,10 L1,1 Z" id="Shape" fill="#9C9C9B" sketch:type="MSShapeGroup"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 772 B

After

Width:  |  Height:  |  Size: 876 B

6
public/assets/images/icons/radio-checked.svg
View file

@ -5,8 +5,10 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="radio-checked" sketch:type="MSArtboardGroup" fill="#000000"> <g id="radio-checked" sketch:type="MSArtboardGroup">
<path d="M11,5.5 C11,2.46243387 8.53756613,0 5.5,0 C2.46243387,0 0,2.46243387 0,5.5 C0,8.53756613 2.46243387,11 5.5,11 C8.53756613,11 11,8.53756613 11,5.5 L11,5.5 Z M0.932708535,5.51604187 C0.932708535,2.98473676 2.98473676,0.932708535 5.51604187,0.932708535 C8.04734697,0.932708535 10.0993752,2.98473676 10.0993752,5.51604187 C10.0993752,8.04734697 8.04734697,10.0993752 5.51604187,10.0993752 C2.98473676,10.0993752 0.932708535,8.04734697 0.932708535,5.51604187 L0.932708535,5.51604187 Z M5.49188096,7.33333333 C6.50440301,7.33333333 7.3252143,6.51252204 7.3252143,5.5 C7.3252143,4.48747796 6.50440301,3.66666667 5.49188096,3.66666667 C4.47935893,3.66666667 3.65854763,4.48747796 3.65854763,5.5 C3.65854763,6.51252204 4.47935893,7.33333333 5.49188096,7.33333333 L5.49188096,7.33333333 Z" sketch:type="MSShapeGroup"></path> <path d="M11,5.5 C11,2.46243387 8.53756613,0 5.5,0 C2.46243387,0 0,2.46243387 0,5.5 C0,8.53756613 2.46243387,11 5.5,11 C8.53756613,11 11,8.53756613 11,5.5 L11,5.5 Z" fill="#000000" sketch:type="MSShapeGroup"></path>
<path d="M0.932708535,5.51604187 C0.932708535,2.98473676 2.98473676,0.932708535 5.51604187,0.932708535 C8.04734697,0.932708535 10.0993752,2.98473676 10.0993752,5.51604187 C10.0993752,8.04734697 8.04734697,10.0993752 5.51604187,10.0993752 C2.98473676,10.0993752 0.932708535,8.04734697 0.932708535,5.51604187 L0.932708535,5.51604187 Z" id="outer-path" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
<path d="M5.49188096,7.33333333 C6.50440301,7.33333333 7.3252143,6.51252204 7.3252143,5.5 C7.3252143,4.48747796 6.50440301,3.66666667 5.49188096,3.66666667 C4.47935893,3.66666667 3.65854763,4.48747796 3.65854763,5.5 C3.65854763,6.51252204 4.47935893,7.33333333 5.49188096,7.33333333 L5.49188096,7.33333333 Z" id="inner-path" fill="#000000" sketch:type="MSShapeGroup"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

5
public/assets/images/icons/radio.svg
View file

@ -5,8 +5,9 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="radio" sketch:type="MSArtboardGroup" fill="#CBCBCB"> <g id="radio" sketch:type="MSArtboardGroup">
<path d="M11,5.5 C11,2.46243342 8.53756567,0 5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 L11,5.5 Z M0.932708333,5.51604167 C0.932708333,2.98473633 2.98473633,0.932708333 5.51604167,0.932708333 C8.047347,0.932708333 10.099375,2.98473633 10.099375,5.51604167 C10.099375,8.047347 8.047347,10.099375 5.51604167,10.099375 C2.98473633,10.099375 0.932708333,8.047347 0.932708333,5.51604167 L0.932708333,5.51604167 Z" sketch:type="MSShapeGroup"></path> <path d="M11,5.5 C11,2.46243342 8.53756567,0 5.5,0 C2.46243342,0 0,2.46243342 0,5.5 C0,8.53756567 2.46243342,11 5.5,11 C8.53756567,11 11,8.53756567 11,5.5 L11,5.5 Z" fill="#9C9C9B" sketch:type="MSShapeGroup"></path>
<path d="M0.932708333,5.51604167 C0.932708333,2.98473633 2.98473633,0.932708333 5.51604167,0.932708333 C8.047347,0.932708333 10.099375,2.98473633 10.099375,5.51604167 C10.099375,8.047347 8.047347,10.099375 5.51604167,10.099375 C2.98473633,10.099375 0.932708333,8.047347 0.932708333,5.51604167 L0.932708333,5.51604167 Z" id="radio-path" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g> </g>
</g> </g>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

12
public/assets/images/icons/task-state-modified-inner-circle.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>task-state-modified-inner-circle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="task-state-modified-inner-circle" sketch:type="MSArtboardGroup" fill="#50E3C2">
<circle id="Oval-2" sketch:type="MSShapeGroup" cx="8" cy="8" r="3"></circle>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 763 B

12
public/assets/images/icons/task-state-modified-outer-circle.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>task-state-modified-outer-circle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="task-state-modified-outer-circle" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z M8,13 C10.7614237,13 13,10.7614237 13,8 C13,5.23857625 10.7614237,3 8,3 C5.23857625,3 3,5.23857625 3,8 C3,10.7614237 5.23857625,13 8,13 Z" id="Oval-2" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,015 B

12
public/assets/images/icons/task-state.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>task-state</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="task-state" sketch:type="MSArtboardGroup" fill="#50E3C2">
<path d="M8,13.5 C11.0375661,13.5 13.5,11.0375661 13.5,8 C13.5,4.96243388 11.0375661,2.5 8,2.5 C4.96243388,2.5 2.5,4.96243388 2.5,8 C2.5,11.0375661 4.96243388,13.5 8,13.5 Z M8,11.125 C9.72588984,11.125 11.125,9.72588984 11.125,8 C11.125,6.27411016 9.72588984,4.875 8,4.875 C6.27411016,4.875 4.875,6.27411016 4.875,8 C4.875,9.72588984 6.27411016,11.125 8,11.125 Z" id="Oval-2" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB