addons/account/static/src/css/account_bank_statement_reconciliation.scss

   1 $actionColWidth: 15px;
   2 $mainTableBordersPadding: 3px;
   3 $lightBorder: 1px solid #bbb;
   4 $accountingBorder: 1px solid #000;
   5 $initialLineBackground: #f0f0f0;
   6 // Warning, this value is also specified in the instance.web.account.abstractReconciliation widget
   7 $aestetic_animation_speed: 300ms;
   8
   9
  10 .openerp .oe_bank_statement_reconciliation {
  11     font-size: 12px;
  12     -webkit-user-select: none;
  13     -moz-user-select: none;
  14     -ms-user-select: none;
  15     -o-user-select: none;
  16     user-select: none;
  17     cursor: default;
  18     height: 100%;
  19
  20     .oe_form_sheetbg {
  21         border-bottom: 0;
  22         padding: 0;
  23         height: 100%;
  24
  25         .oe_form_sheet {
  26             position: relative;
  27             padding: 20px 15px 30px 15px;
  28             border-top: 0;
  29             border-bottom: 0;
  30             height: 100%;
  31         }
  32     }
  33
  34     h1 {
  35         width: 48%;
  36         padding: 0 0 0 $actionColWidth;
  37         margin: 0 0 25px 0;
  38         float: left;
  39         font-size: 2em;
  40     }
  41
  42     h2 {
  43         font-size: 1.8em;
  44     }
  45
  46     .progress {
  47         width: 49%;
  48         margin: 4px $actionColWidth 0 0;
  49         float: right;
  50         position: relative;
  51         display: inline-block;
  52
  53         .progress-text {
  54             text-align: center;
  55             position: absolute;
  56             width: 100%;
  57             left: 0;
  58             top: 2px;
  59             z-index: 10;
  60             text-shadow:
  61                -1px -1px 0 #f5f5f5,
  62                 1px -1px 0 #f5f5f5,
  63                 -1px 1px 0 #f5f5f5,
  64                  1px 1px 0 #f5f5f5;
  65         }
  66     }
  67
  68     .protip {
  69         margin: 0;
  70         position: absolute;
  71         bottom: 7px;
  72         right: 15px;
  73         text-align: right;
  74         color: #bbb;
  75     }
  76
  77     .done_message {
  78         width: 100%;
  79         padding: 0 20%;
  80         margin-top: 50px;
  81         margin-bottom: 50px;
  82
  83         h2 {
  84             margin-bottom: 30px;
  85
  86             .congrats_icon {
  87                 float: right;
  88                 font-size: 2em;
  89                 position: relative;
  90                 top: -0.25em;
  91             }
  92         }
  93
  94         .achievements {
  95             margin-top: 30px;
  96             text-align: center;
  97             position: relative;
  98
  99             .achievement {
 100                 font-size: 4em;
 101                 margin: 0 0.3em;
 102                 position: relative;
 103                 vertical-align: middle;
 104                 text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
 105
 106                 i {
 107                     font-size: 0.5em;
 108                     color: white;
 109                     position: absolute;
 110                     top: 50%;
 111                     margin-top: -0.55em;
 112                     left: 0;
 113                     width: 100%;
 114                     text-align: center;
 115                     //text-shadow: 1px 1px 0 black;
 116                 }
 117             }
 118         }
 119
 120         .action_buttons {
 121             text-align: center;
 122         }
 123     }
 124
 125     /* icons */
 126     .glyphicon {
 127         font-size: 12px !important;
 128
 129         &.line_info_button {
 130             color: #ccc !important;
 131         }
 132     }
 133     .accounting_view .glyphicon-add-remove:before {
 134         content: "\2212";
 135     }
 136     .match .glyphicon-add-remove:before {
 137         content: "\2b";
 138     }
 139
 140     // bankStatementReconciliationLine widget
 141     .oe_bank_statement_reconciliation_line {
 142         margin-bottom: 30px;
 143
 144         table {
 145             width: 100%;
 146         }
 147
 148         // modes : default
 149         .toggle_match, .toggle_create {
 150             -webkit-transition-property: -webkit-transform;
 151             -moz-transition-property: -moz-transform;
 152             -ms-transition-property: -ms-transform;
 153             -o-transition-property: -o-transform;
 154             transition-property: transform;
 155             -webkit-transform: rotate(0deg);
 156             -moz-transform: rotate(0deg);
 157             -ms-transform: rotate(0deg);
 158             -o-transform: rotate(0deg);
 159             transform: rotate(0deg);
 160             -webkit-transition-duration: $aestetic_animation_speed;
 161             -moz-transition-duration: $aestetic_animation_speed;
 162             -ms-transition-duration: $aestetic_animation_speed;
 163             -o-transition-duration: $aestetic_animation_speed;
 164             transition-duration: $aestetic_animation_speed;
 165         }
 166
 167         .visible_toggle {
 168             visibility: visible !important;
 169             -webkit-transform: rotate(90deg);
 170             -moz-transform: rotate(90deg);
 171             -ms-transform: rotate(90deg);
 172             -o-transform: rotate(90deg);
 173             transform: rotate(90deg);
 174         }
 175
 176         .change_partner_container {
 177             width: 200px;
 178             display: none;
 179             position: relative !important;
 180         }
 181
 182         // modes : specific
 183         &[data-mode="match"] {
 184             .toggle_match {
 185                 @extend .visible_toggle;
 186             }
 187         }
 188
 189         &[data-mode="create"] {
 190             .toggle_create {
 191                 @extend .visible_toggle;
 192             }
 193         }
 194
 195         &[data-mode="inactive"] {
 196             .initial_line > td {
 197                 background-color: ($initialLineBackground + #080808) !important;
 198             }
 199         }
 200
 201         &.no_match:not(.no_partner) {
 202             .initial_line {
 203                 cursor: default !important;
 204
 205                 .line_info_button {
 206                     cursor: pointer;
 207                 }
 208             }
 209             .toggle_match {
 210                 visibility: hidden !important;
 211             }
 212         }
 213
 214         /* gap between accounting_view and action view */
 215         > table > tbody > tr:nth-child(1) > td table {
 216             margin-bottom: 10px;
 217         }
 218
 219         /* popover */
 220         table.details {
 221             td:first-child {
 222                 padding-right: 10px;
 223                 font-weight: bold;
 224             }
 225         }
 226
 227         /* arrays of move lines */
 228         .accounting_view, .match table {
 229             width: 100%;
 230
 231             tr {
 232                 cursor: pointer;
 233
 234                 &.created_line {
 235                     cursor: default !important;
 236
 237                     .line_remove_button {
 238                         cursor: pointer;
 239                     }
 240                 }
 241             }
 242
 243             td {
 244                 padding: 1px 8px;
 245                 vertical-align: middle;
 246             }
 247
 248             td.cell_action, td.cell_info_popover {
 249                 width: $actionColWidth;
 250                 padding: 0;
 251             }
 252
 253             td.cell_action {
 254                 text-align: left;
 255             }
 256
 257             td.cell_account_code {
 258                 width: 80px;
 259                 padding-left: $mainTableBordersPadding;
 260             }
 261
 262             td.cell_due_date {
 263                 width: 100px;
 264             }
 265
 266             td.cell_label {
 267
 268             }
 269
 270             td.cell_debit {
 271                 text-align: right;
 272                 width: 15%;
 273             }
 274
 275             td.cell_credit {
 276                 width: 15%;
 277                 text-align: right;
 278                 padding-right: $mainTableBordersPadding;
 279             }
 280
 281             td.cell_info_popover {
 282                 text-align: right;
 283             }
 284
 285             tr.line_open_balance {
 286                 color: #bbb;
 287             }
 288
 289             tr .glyphicon:not(.line_info_button) {
 290                 visibility: hidden;
 291                 color: #555;
 292             }
 293
 294             tr:hover .glyphicon, tr.active .glyphicon {
 295                 visibility: visible;
 296             }
 297
 298             tr .do_partial_reconcile_button {
 299                 color: #f0ad4e;
 300                 padding-right: 5px;
 301             }
 302
 303             tr .undo_partial_reconcile_button {
 304                 color: #555;
 305                 padding-right: 5px;
 306             }
 307         }
 308
 309         /* Partie infos */
 310         .accounting_view {
 311
 312             .initial_line > td {
 313                 border-top: $lightBorder;
 314                 padding-top: 4px;
 315                 padding-bottom: 5px;
 316                 background-color: $initialLineBackground;
 317                 -webkit-transition-property: background-color;
 318                 -moz-transition-property: background-color;
 319                 -ms-transition-property: background-color;
 320                 transition-property: background-color;
 321                 -webkit-transition-duration: $aestetic_animation_speed;
 322                 -moz-transition-duration: $aestetic_animation_speed;
 323                 -ms-transition-duration: $aestetic_animation_speed;
 324                 -o-transition-duration: $aestetic_animation_speed;
 325                 transition-duration: $aestetic_animation_speed;
 326
 327                 &.cell_action, &.cell_info_popover {
 328                     border-top: none;
 329                     background: white !important;
 330                     // Hack pour l'alignement au px près
 331                     padding-top: 6px;
 332                     padding-bottom: 3px;
 333                 }
 334             }
 335
 336             caption {
 337                 text-align: left;
 338                 font-size: 1.1em;
 339                 font-weight: bold;
 340                 height: 26px;
 341                 margin: 0 $actionColWidth 4px $actionColWidth;
 342
 343                 button {
 344                     float: right;
 345
 346                     &:disabled {
 347                         opacity: 0.5;
 348                     }
 349                 }
 350
 351                 > span, > input {
 352                     position: relative; top: 7px; /* meh */
 353                     font-weight: bold;
 354                     cursor: pointer;
 355                 }
 356             }
 357
 358             // accounting "T"
 359             td.cell_credit { border-left: $accountingBorder; }
 360         }
 361
 362
 363         /* Match view */
 364         .match {
 365
 366             .match_controls {
 367                 padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding);
 368
 369                 .filter {
 370                     width: 240px;
 371                 }
 372
 373                 .pager_control_left, .pager_control_right {
 374                     display: inline-block;
 375                     cursor: pointer;
 376                 }
 377
 378                 .pager_control_left {
 379                     margin-right: 10px;
 380                 }
 381
 382                 .pager_control_left.disabled, .pager_control_right.disabled {
 383                     color: #ddd;
 384                     cursor: default;
 385                 }
 386             }
 387
 388             .show_more {
 389                 display: inline-block;
 390                 margin-left: ($actionColWidth+$mainTableBordersPadding);
 391                 margin-top: 5px;
 392             }
 393         }
 394
 395
 396         /* Action create */
 397         .create {
 398             margin: 0 $actionColWidth;
 399             border: 1px solid #d5d5d5;
 400             border-radius: 5px;
 401             padding: 10px;
 402
 403             .quick_add {
 404                 margin-bottom: 10px;
 405                 clear: both;
 406
 407                 &:empty {
 408                     display: none;
 409                 }
 410             }
 411             .quick_add:empty {
 412                 display: none;
 413             }
 414
 415             .oe_form > table {
 416                 width: 49%;
 417                 height: 26px;
 418
 419                 &:nth-child(2n+1) { float: left; }
 420                 &:nth-child(2n) { float: right; }
 421
 422                 th {
 423                     font-weight: bold;
 424                     line-height: 26px;
 425                     padding-right: 8px;
 426                     min-width: 100px;
 427                     border-right: 1px solid #ddd;
 428                     white-space: nowrap;
 429                     width: 1%;
 430                 }
 431
 432                 td {
 433                     width: 99%;
 434                     padding-left: 8px;
 435                 }
 436
 437                 input, select {
 438                     width: 100%;
 439                 }
 440
 441                 &.add_line_container {
 442                     &:nth-child(2n+1) {
 443                         width: 98%;
 444                         float: none;
 445                         margin: auto;
 446                     }
 447
 448                     td {
 449                         text-align: center;
 450                     }
 451
 452                     .add_line {
 453                         line-height: 26px;
 454                     }
 455                 }
 456             }
 457         }
 458     }
 459 }