|
|
@@ -1,3 +1,9 @@
|
|
|
+$supergood-color: hsl(145,51%,45%);
|
|
|
+$good-color: hsl(62,45%,46%);
|
|
|
+$ok-color: hsl(41,100%,49%);
|
|
|
+$bad-color: hsl(30,93%,50%);
|
|
|
+$superbad-color: hsl(19,90%,51%);
|
|
|
+
|
|
|
html {
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -487,8 +493,7 @@ table {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
height: 38px;
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .centered;
|
|
|
+ @extend .u-clickable, .centered;
|
|
|
}
|
|
|
|
|
|
.input-replacement input {
|
|
|
@@ -675,8 +680,7 @@ fieldset > *:not(.form-group) .form-control {
|
|
|
padding: 0 2px;
|
|
|
margin-bottom: 3px;
|
|
|
position: relative;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .horizontal, .center;
|
|
|
|
|
|
label {
|
|
|
margin: 0;
|
|
|
@@ -688,10 +692,7 @@ fieldset > *:not(.form-group) .form-control {
|
|
|
}
|
|
|
|
|
|
.formGroup-bookmark {
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
- @extend .reverse;
|
|
|
+ @extend .u-clickable, .horizontal, .center, .reverse;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
position: absolute;
|
|
|
@@ -913,8 +914,7 @@ textarea,
|
|
|
.page-header-meta {
|
|
|
margin-top: 6px;
|
|
|
margin-left: auto;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .self-start;
|
|
|
+ @extend .horizontal, .self-start;
|
|
|
|
|
|
.btn {
|
|
|
margin: 0 0 2px 9px;
|
|
|
@@ -1128,8 +1128,7 @@ ol.tabs li {
|
|
|
padding: 10px 20px;
|
|
|
text-align: center;
|
|
|
border-right: 1px solid rgba(0,8,14,.08);
|
|
|
- @extend .flex-auto;
|
|
|
- @extend .u-clickable;
|
|
|
+ @extend .flex-auto, .u-clickable;
|
|
|
}
|
|
|
|
|
|
.tab.active {
|
|
|
@@ -1570,11 +1569,6 @@ ol.tabs li {
|
|
|
background-position: -324px -146px;
|
|
|
}
|
|
|
|
|
|
- .mood.icon {
|
|
|
- width: 60px;
|
|
|
- height: 59px;
|
|
|
- }
|
|
|
-
|
|
|
.mood.icon.superbad-state {
|
|
|
background-position: 0 -163px;
|
|
|
}
|
|
|
@@ -1601,43 +1595,6 @@ ol.tabs li {
|
|
|
background-position: 0 -223px;
|
|
|
}
|
|
|
|
|
|
- .in-process.icon {
|
|
|
- width: 64px;
|
|
|
- height: 64px;
|
|
|
- background-position: -79px -225px;
|
|
|
- }
|
|
|
-
|
|
|
- .in-process.superbad-state,
|
|
|
- .reopening.superbad-state {
|
|
|
- background-color: #f35910;
|
|
|
- }
|
|
|
-
|
|
|
- .in-process.bad-state,
|
|
|
- .reopening.bad-state {
|
|
|
- background-color: #f6820b;
|
|
|
- }
|
|
|
-
|
|
|
- .in-process.ok-state,
|
|
|
- .reopening.ok-state {
|
|
|
- background-color: #faab00;
|
|
|
- }
|
|
|
-
|
|
|
- .in-process.good-state,
|
|
|
- .reopening.good-state {
|
|
|
- background-color: #a9ac41;
|
|
|
- }
|
|
|
-
|
|
|
- .in-process.supergood-state,
|
|
|
- .reopening.supergood-state {
|
|
|
- background-color: #38ae6a;
|
|
|
- }
|
|
|
-
|
|
|
- .reopening.icon {
|
|
|
- width: 68px;
|
|
|
- height: 47px;
|
|
|
- background-position: -146px -225px;
|
|
|
- }
|
|
|
-
|
|
|
.paperclip.icon {
|
|
|
width: 31px;
|
|
|
height: 29px;
|
|
|
@@ -1650,19 +1607,6 @@ ol.tabs li {
|
|
|
background-position: -216px -224px;
|
|
|
}
|
|
|
|
|
|
- .stat-tickets {
|
|
|
- height: 83px;
|
|
|
- margin-right: 4px;
|
|
|
- margin-bottom: -9px;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-ticket.icon {
|
|
|
- width: 48px;
|
|
|
- height: 10px;
|
|
|
- margin-top: -7px;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
.stat-ticket.supergood-state {
|
|
|
background-position: -265px -223px;
|
|
|
}
|
|
|
@@ -2006,8 +1950,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.tableOverview-edit {
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .u-highlight;
|
|
|
+ @extend .u-clickable, .u-highlight;
|
|
|
}
|
|
|
|
|
|
.bulkAction {
|
|
|
@@ -2163,8 +2106,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.tasks-standalone .name {
|
|
|
- @extend .u-highlight;
|
|
|
- @extend .u-textTruncate;
|
|
|
+ @extend .u-highlight, .u-textTruncate;
|
|
|
}
|
|
|
|
|
|
.tasks--standalone .icon-holder {
|
|
|
@@ -2186,9 +2128,7 @@ footer {
|
|
|
.task {
|
|
|
padding: 10px 15px 7px 0;
|
|
|
position: relative;
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .u-clickable, .horizontal, .center;
|
|
|
}
|
|
|
|
|
|
.task-icon {
|
|
|
@@ -2289,8 +2229,7 @@ footer {
|
|
|
width: 50px;
|
|
|
height: 100%;
|
|
|
visibility: hidden;
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .centered;
|
|
|
+ @extend .u-clickable, .centered;
|
|
|
}
|
|
|
|
|
|
.task:hover .closeTask {
|
|
|
@@ -2394,8 +2333,7 @@ footer {
|
|
|
height: 36px;
|
|
|
transition: 240ms;
|
|
|
position: relative;
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .zIndex-5;
|
|
|
+ @extend .u-clickable, .zIndex-5;
|
|
|
}
|
|
|
|
|
|
.logo .activity-counter {
|
|
|
@@ -2483,8 +2421,7 @@ footer {
|
|
|
height: 60px;
|
|
|
position: relative;
|
|
|
text-decoration: none;
|
|
|
- @extend .centered;
|
|
|
- @extend .u-clickable;
|
|
|
+ @extend .centered, .u-clickable;
|
|
|
}
|
|
|
|
|
|
.user-menu .list-button *:not(.dropdown-nose) {
|
|
|
@@ -2942,6 +2879,72 @@ footer {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.stat-icon {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.mood-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 59px;
|
|
|
+}
|
|
|
+
|
|
|
+.stopwatch-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-stopwatch {
|
|
|
+ width: 77px;
|
|
|
+ height: 83px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-channel-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ fill: hsl(198,18%,72%);
|
|
|
+}
|
|
|
+
|
|
|
+.total-tickets {
|
|
|
+ height: 83px;
|
|
|
+ width: 48px;
|
|
|
+ margin-right: 4px;
|
|
|
+ margin-bottom: -9px;
|
|
|
+}
|
|
|
+
|
|
|
+.one-ticket {
|
|
|
+ width: 48px;
|
|
|
+ height: 10px;
|
|
|
+ margin-top: -7px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-tickets {
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.in-process-icon {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+}
|
|
|
+
|
|
|
+.reopening-icon {
|
|
|
+ width: 68px;
|
|
|
+ height: 47px;
|
|
|
+}
|
|
|
+
|
|
|
+.state-color {
|
|
|
+ &.supergood-state { fill: $supergood-color;}
|
|
|
+ &.good-state { fill: $good-color; }
|
|
|
+ &.ok-state { fill: $ok-color; }
|
|
|
+ &.bad-state { fill: $bad-color; }
|
|
|
+ &.superbad-state { fill: $superbad-color; }
|
|
|
+}
|
|
|
+
|
|
|
.stat-widgets {
|
|
|
margin: 0 -7px 20px;
|
|
|
}
|
|
|
@@ -2983,11 +2986,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.stat-graphic {
|
|
|
- @extend .flex, .horizontal, .centered;
|
|
|
- }
|
|
|
-
|
|
|
- .time.stat-widget .stat-graphic .icon {
|
|
|
- position: relative;
|
|
|
+ @extend .flex, .centered;
|
|
|
}
|
|
|
|
|
|
.time.stat-widget .stat-amount {
|
|
|
@@ -3272,9 +3271,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.ticketZoom-controls {
|
|
|
- @extend .horizontal;
|
|
|
- @extend .justify-end;
|
|
|
- @extend .center;
|
|
|
+ @extend .horizontal, .justify-end, .center;
|
|
|
}
|
|
|
|
|
|
.ticketZoom .page-header {
|
|
|
@@ -3932,8 +3929,7 @@ footer {
|
|
|
.tabsSidebar-holder {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
- @extend .flex;
|
|
|
- @extend .vertical;
|
|
|
+ @extend .flex, .vertical;
|
|
|
}
|
|
|
|
|
|
.tabsSidebar .sidebar {
|
|
|
@@ -3947,8 +3943,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.tabsSidebar .sidebar-header {
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .horizontal, .center;
|
|
|
margin: 20px 20px 0;
|
|
|
padding: 0 0 5px;
|
|
|
position: relative;
|
|
|
@@ -3972,8 +3967,7 @@ footer {
|
|
|
.tabsSidebar-close {
|
|
|
padding: 20px;
|
|
|
margin: -15px;
|
|
|
- @extend .centered;
|
|
|
- @extend .u-clickable;
|
|
|
+ @extend .centered, .u-clickable;
|
|
|
|
|
|
.icon {
|
|
|
width: 13px;
|
|
|
@@ -4030,8 +4024,7 @@ footer {
|
|
|
background: hsl(197,20%,93%);
|
|
|
position: relative;
|
|
|
border-top: 1px solid hsl(202,12%,87%);
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .centered;
|
|
|
+ @extend .u-clickable, .centered;
|
|
|
}
|
|
|
|
|
|
.tabs
|
|
|
@@ -4322,10 +4315,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.switchBackToUser {
|
|
|
- @extend .fit;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
- @extend .zIndex-7;
|
|
|
+ @extend .fit, .horizontal, .center, .zIndex-7;
|
|
|
background: hsl(200,87%,45%);
|
|
|
color: #fff;
|
|
|
height: 45px;
|
|
|
@@ -4412,9 +4402,7 @@ footer {
|
|
|
.modal-leftFooter,
|
|
|
.modal-centerFooter,
|
|
|
.modal-rightFooter {
|
|
|
- @extend .flex;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .start;
|
|
|
+ @extend .flex, .horizontal, .start;
|
|
|
}
|
|
|
|
|
|
.modal.modal--local {
|
|
|
@@ -4502,14 +4490,12 @@ footer {
|
|
|
.dropdown.dropdown--actions {
|
|
|
li {
|
|
|
padding: 0;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .horizontal, .center;
|
|
|
}
|
|
|
|
|
|
.dropdown-iconSpacer,
|
|
|
.dropdown-activeSpacer {
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .horizontal, .center;
|
|
|
}
|
|
|
|
|
|
.dropdown-iconSpacer {
|
|
|
@@ -4523,8 +4509,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
- @extend .u-clickable;
|
|
|
- @extend .horizontal;
|
|
|
+ @extend .u-clickable, .horizontal;
|
|
|
min-width: 100%;
|
|
|
padding: 3px 18px;
|
|
|
}
|
|
|
@@ -4746,10 +4731,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.scrollPageHeader {
|
|
|
- @extend .tabsSidebar-sidebarSpacer;
|
|
|
- @extend .zIndex-6;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .tabsSidebar-sidebarSpacer, .zIndex-6, .horizontal, .center;
|
|
|
background: white;
|
|
|
border-bottom: 1px solid hsl(0,0%,78%);
|
|
|
height: 64px;
|
|
|
@@ -4780,8 +4762,7 @@ footer {
|
|
|
}
|
|
|
|
|
|
.wizard-slide {
|
|
|
- @extend .vertical;
|
|
|
- @extend .hero-unit;
|
|
|
+ @extend .vertical, .hero-unit;
|
|
|
width: 400px;
|
|
|
padding-bottom: 18px;
|
|
|
margin-bottom: 20px;
|
|
|
@@ -4939,8 +4920,7 @@ label + .wizard-buttonList {
|
|
|
}
|
|
|
|
|
|
.channelList {
|
|
|
- @extend .flex;
|
|
|
- @extend .vertical;
|
|
|
+ @extend .flex, .vertical;
|
|
|
background: white;
|
|
|
border-radius: 2px;
|
|
|
margin: 5px 0 20px;
|
|
|
@@ -4976,8 +4956,7 @@ label + .wizard-buttonList {
|
|
|
}
|
|
|
|
|
|
.channelList-placeholder {
|
|
|
- @extend .flex;
|
|
|
- @extend .centered;
|
|
|
+ @extend .flex, .centered;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
@@ -4991,8 +4970,7 @@ label + .wizard-buttonList {
|
|
|
}
|
|
|
|
|
|
.channelList-controlEntry {
|
|
|
- @extend .horizontal;
|
|
|
- @extend .justified;
|
|
|
+ @extend .horizontal, .justified;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
border-left: none;
|
|
|
@@ -5213,9 +5191,7 @@ label + .wizard-buttonList {
|
|
|
}
|
|
|
|
|
|
.profile-organizationMember {
|
|
|
- @extend .profile-detailsEntry;
|
|
|
- @extend .horizontal;
|
|
|
- @extend .center;
|
|
|
+ @extend .profile-detailsEntry, .horizontal, .center;
|
|
|
|
|
|
.avatar {
|
|
|
margin-right: 10px;
|
|
|
@@ -5223,16 +5199,14 @@ label + .wizard-buttonList {
|
|
|
}
|
|
|
|
|
|
.profile-ticketList {
|
|
|
- @extend .flex;
|
|
|
- @extend .vertical;
|
|
|
+ @extend .flex, .vertical;
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
margin-right: 50px;
|
|
|
}
|
|
|
|
|
|
.tasks {
|
|
|
- @extend .flex;
|
|
|
- @extend .vertical;
|
|
|
+ @extend .flex, .vertical;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -5556,6 +5530,13 @@ body.fit {
|
|
|
align-self: start;
|
|
|
}
|
|
|
|
|
|
+.self-end {
|
|
|
+ -webkit-align-self: end;
|
|
|
+ -moz-align-self: end;
|
|
|
+ -ms-align-self: end;
|
|
|
+ align-self: end;
|
|
|
+}
|
|
|
+
|
|
|
.two-columns,
|
|
|
.three-columns,
|
|
|
.wrap {
|
Felix Niklas
