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