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