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

CSS refactor: clickable areas now inherit base css from %clickable

Browse source 
- adds touch-action: manipulation that improves the click latency for touch input
This commit is contained in:
Felix Niklas 2018-04-12 16:52:14 +02:00
parent b585f46ac6
commit 777fe192eb
1 changed files with 39 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
app/assets/stylesheets/zammad.scss
View file

@ -63,6 +63,12 @@ $highlight-color: hsl(205,90%,60%);
} }
} }
%clickable {
cursor: pointer;
user-select: none;
touch-action: manipulation;
}
html { html {
height: 100%; height: 100%;
} }
@ -177,8 +183,7 @@ ol, ul {
} }
.u-clickable { .u-clickable {
cursor: pointer; @extend %clickable;
user-select: none;
} }
.u-unselectable { .u-unselectable {
@ -379,13 +384,11 @@ pre code.hljs {
background: white; background: white;
border: 1px solid rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1);
outline: none !important; outline: none !important;
touch-action: manipulation;
user-select: none;
cursor: pointer;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@extend %clickable;
.icon { .icon {
vertical-align: middle; vertical-align: middle;
@ -666,7 +669,7 @@ pre code.hljs {
left: 0; left: 0;
top: 0; top: 0;
position: absolute; position: absolute;
cursor: pointer; @extend %clickable;
} }
} }
} }
@ -817,10 +820,10 @@ pre code.hljs {
&.is-clickable { &.is-clickable {
background: hsl(203,65%,55%); background: hsl(203,65%,55%);
color: white; color: white;
cursor: pointer;
border-color: hsl(203,65%,45%); border-color: hsl(203,65%,45%);
box-shadow: 1px 0 hsl(203,65%,45%); box-shadow: 1px 0 hsl(203,65%,45%);
position: relative; position: relative;
@extend %clickable;
} }
&.is-blinking { &.is-blinking {
@ -994,8 +997,8 @@ table {
} }
.table-column-head { .table-column-head {
cursor: pointer;
display: flex; display: flex;
@extend %clickable;
} }
.table-column-sortIcon { .table-column-sortIcon {
@ -1381,8 +1384,7 @@ table {
.label-text { .label-text {
@include bidi-style(margin-left, 3px, margin-right, 0); @include bidi-style(margin-left, 3px, margin-right, 0);
user-select: none; @extend %clickable;
cursor: pointer;
} }
.label-success, .label-success,
@ -1855,8 +1857,8 @@ input.has-error {
& + label { & + label {
font-size: 11px; font-size: 11px;
color: #DBDBDB; color: #DBDBDB;
cursor: pointer;
margin: 0; margin: 0;
@extend %clickable;
} }
&:checked + label { &:checked + label {
@ -2757,7 +2759,7 @@ ol.tabs li {
.color-swatch { .color-swatch {
padding: 2px; padding: 2px;
margin: -2px 0 -4px; margin: -2px 0 -4px;
cursor: pointer; @extend %clickable;
/* :after technique for bigger click area */ /* :after technique for bigger click area */
&:after { &:after {
@ -3139,7 +3141,7 @@ footer {
text-decoration: none; text-decoration: none;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; @extend %clickable;
&:hover { &:hover {
background: hsl(230,10%,13%); background: hsl(230,10%,13%);
@ -3430,7 +3432,7 @@ footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; @extend %clickable;
} }
.search .empty-search .icon-diagonal-cross { .search .empty-search .icon-diagonal-cross {
@ -4520,7 +4522,7 @@ footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; @extend %clickable;
padding-left: 10px; padding-left: 10px;
padding-right: 27px; padding-right: 27px;
@include rtl(padding-left, 27px); @include rtl(padding-left, 27px);
@ -5403,8 +5405,7 @@ footer {
display: none; display: none;
white-space: nowrap; white-space: nowrap;
@include bidi-style(margin-left, auto, margin-right, 0); @include bidi-style(margin-left, auto, margin-right, 0);
cursor: pointer; @extend %clickable;
user-select: none;
} }
.attachment:hover .attachment--preview .attachment-delete { .attachment:hover .attachment--preview .attachment-delete {
@ -5441,8 +5442,7 @@ footer {
display: none; display: none;
white-space: nowrap; white-space: nowrap;
@include bidi-style(margin-left, auto, margin-right, 0); @include bidi-style(margin-left, auto, margin-right, 0);
cursor: pointer; @extend %clickable;
user-select: none;
} }
.attachment:hover.attachment--row .attachment-delete { .attachment:hover.attachment--row .attachment-delete {
@ -6161,7 +6161,7 @@ footer {
opacity: .3; opacity: .3;
outline: none; outline: none;
height: auto; height: auto;
cursor: pointer; @extend %clickable;
} }
.token .close:hover, .token .close:hover,
@ -6528,7 +6528,7 @@ footer {
height: 39px; height: 39px;
line-height: 39px; line-height: 39px;
padding: 0 15px; padding: 0 15px;
cursor: pointer; @extend %clickable;
white-space: nowrap; white-space: nowrap;
&:focus { &:focus {
@ -7318,7 +7318,7 @@ label + .wizard-buttonList {
font-size: 118px; font-size: 118px;
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: pointer; @extend %clickable;
opacity: 0; opacity: 0;
} }
@ -7696,11 +7696,10 @@ output {
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
outline: none; outline: none;
cursor: pointer;
background: white; background: white;
box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
user-select: none;
transition: background 200ms; transition: background 200ms;
@extend %clickable;
&:after { &:after {
content: ""; content: "";
@ -7766,7 +7765,7 @@ output {
box-shadow: 0 0 0 1px hsl(198,19%,86%) inset; box-shadow: 0 0 0 1px hsl(198,19%,86%) inset;
border-radius: 100%; border-radius: 100%;
background: white; background: white;
cursor: pointer; @extend %clickable;
&:hover:not(.is-disabled) { &:hover:not(.is-disabled) {
border-color: hsl(198,19%,83%); border-color: hsl(198,19%,83%);
@ -8047,7 +8046,7 @@ output {
box-shadow: box-shadow:
1px 0 hsl(198,18%,86%) inset, 1px 0 hsl(198,18%,86%) inset,
0 1px hsl(198,18%,86%) inset; 0 1px hsl(198,18%,86%) inset;
cursor: pointer; @extend %clickable;
&.is-selected { &.is-selected {
background-color: $highlight-color; background-color: $highlight-color;
@ -8283,15 +8282,20 @@ output {
min-width: 0; min-width: 0;
cursor: default; cursor: default;
&.datepicker-rtl {
left: auto;
right: 0;
}
.datepicker-switch { .datepicker-switch {
padding: 12px 0; padding: 12px 0;
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
cursor: pointer;
letter-spacing: 0; letter-spacing: 0;
line-height: 1.5; line-height: 1.5;
text-transform: none; text-transform: none;
@extend %clickable;
&:hover { &:hover {
background: hsl(240,10%,14%); background: hsl(240,10%,14%);
@ -8308,10 +8312,10 @@ output {
.next, .next,
.prev { .prev {
cursor: pointer;
padding: 12px 9px 0; padding: 12px 9px 0;
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
@extend %clickable;
.icon { .icon {
margin-top: 4px; margin-top: 4px;
@ -8351,7 +8355,7 @@ output {
font-size: 15px; font-size: 15px;
&:not(.disabled) { &:not(.disabled) {
cursor: pointer; @extend %clickable;
} }
&.disabled, &.disabled,
@ -8377,7 +8381,7 @@ output {
.today { .today {
text-align: center; text-align: center;
padding: 2px 0 0; padding: 2px 0 0;
cursor: pointer; @extend %clickable;
&.hidden { &.hidden {
display: none; display: none;
@ -8568,7 +8572,7 @@ output {
.chat-disconnect, .chat-disconnect,
.chat-close { .chat-close {
cursor: pointer; @extend %clickable;
padding: 10px; padding: 10px;
.btn { .btn {
@ -8590,7 +8594,7 @@ output {
border-top: none; border-top: none;
padding: 7px 10px 6px; padding: 7px 10px 6px;
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
cursor: pointer; @extend %clickable;
&.is-hidden { &.is-hidden {
display: none; display: none;
@ -8795,7 +8799,7 @@ output {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
fill: hsl(202,8%,28%); fill: hsl(202,8%,28%);
cursor: pointer; @extend %clickable;
} }
} }
@ -8955,8 +8959,7 @@ output {
} }
.columnSelect-option { .columnSelect-option {
cursor: pointer; @extend %clickable;
user-select: none;
padding: 0 5px; padding: 0 5px;
border-radius: 1px; border-radius: 1px;
overflow: hidden; overflow: hidden;
@ -8992,7 +8995,7 @@ output {
right: 0; right: 0;
top: 0; top: 0;
padding: 5px 7px; padding: 5px 7px;
cursor: pointer; @extend %clickable;
line-height: 1; line-height: 1;
} }