|
8 | 8 | $bg-color: #fff; |
9 | 9 | $text-color: invert($bg-color); |
10 | 10 |
|
11 | | - $bg-color-edit-base: #88e; |
12 | 11 | $bg-color-insert-base: #8e8; |
13 | 12 | $bg-color-delete-base: #e88; |
14 | 13 |
|
| 14 | + $op-highlight-ratio: 90%; |
| 15 | + $op-normal-ratio: 25%; |
| 16 | + |
15 | 17 | // emphasized colors for detailed inline difference |
16 | | - $bg-color-edit-highlight: mix($bg-color-edit-base, $bg-color, 80%); |
17 | | - $bg-color-insert-highlight: mix($bg-color-insert-base, $bg-color, 80%); |
18 | | - $bg-color-delete-highlight: mix($bg-color-delete-base, $bg-color, 80%); |
| 18 | + $bg-color-insert-highlight: mix($bg-color-insert-base, $bg-color, $op-highlight-ratio); |
| 19 | + $bg-color-delete-highlight: mix($bg-color-delete-base, $bg-color, $op-highlight-ratio); |
19 | 20 |
|
20 | 21 | // colors for operation rows |
21 | | - $bg-color-edit: mix($bg-color-edit-base, $bg-color, 25%); |
22 | | - $bg-color-insert: mix($bg-color-insert-base, $bg-color, 25%); |
23 | | - $bg-color-delete: mix($bg-color-delete-base, $bg-color, 25%); |
| 22 | + $bg-color-insert: mix($bg-color-insert-base, $bg-color, $op-normal-ratio); |
| 23 | + $bg-color-delete: mix($bg-color-delete-base, $bg-color, $op-normal-ratio); |
24 | 24 |
|
25 | 25 | $table-head-color: mix($bg-color, $text-color, 65%); |
26 | 26 | $table-sidebar-color: mix($bg-color, $text-color, 80%); |
|
130 | 130 | background: $bg-color-delete-highlight; |
131 | 131 | } |
132 | 132 | } |
133 | | - |
134 | | - .edit-container { |
135 | | - &:hover { |
136 | | - box-shadow: 0 0 8px 2px #888; |
137 | | - position: relative; |
138 | | - z-index: 5; |
139 | | - } |
140 | | - |
141 | | - &.edited { |
142 | | - background: $bg-color-edit; |
143 | | - } |
144 | | - } |
145 | | - |
146 | | - .edit { |
147 | | - display: block; |
148 | | - outline: none; |
149 | | - } |
150 | 133 | } |
151 | 134 | } |
0 commit comments