addons/web_kanban/static/src/css/kanban.sass

   1 @charset "utf-8"
   2
   3 // Mixins {{{
   4 @mixin vertical-gradient($startColor: #555, $endColor: #333)
   5     background-color: $startColor
   6     background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
   7     background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
   8     background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
   9     background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
  10     background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
  11     background-image:         linear-gradient(to bottom, $startColor, $endColor)
  12
  13 @mixin radial-gradient($gradient)
  14     background-position: center center
  15     background-image: -webkit-radial-gradient(circle, $gradient)
  16     background-image: -moz-radial-gradient($gradient)
  17     background-image: -ms-radial-gradient($gradient)
  18     background-image: radial-gradient($gradient)
  19
  20 @mixin radius($radius: 5px)
  21     -moz-border-radius: $radius
  22     -webkit-border-radius: $radius
  23     border-radius: $radius
  24
  25 @mixin box-shadow($bsval: 0px 1px 4px #777)
  26     -moz-box-shadow: $bsval
  27     -webkit-box-shadow: $bsval
  28     -box-shadow: $bsval
  29
  30 @mixin box-sizing($sizing: border-box)
  31     -webkit-box-sizing: $sizing
  32     -moz-box-sizing: $sizing
  33     box-sizing: $sizing
  34
  35 @mixin transform($transform)
  36     -moz-transform: $transform
  37     -webkit-transform: $transform
  38     -o-transform: $transform
  39     -ms-transform: $transform
  40
  41 @mixin transition($transition: all 200ms linear)
  42     -webkit-transition: $transition
  43     -moz-transition: $transition
  44     -ms-transition: $transition
  45     -o-transition: $transition
  46     transition: $transition
  47 // }}}
  48
  49 .openerp .oe_kanban_view
  50     // KanbanView {{{
  51     //background: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAKElEQVQIHWP8DwTv379nAAFBQUEGhnfv3oHEwADEZgJLIRGMIClkLQCr3x2Htp/lLwAAAABJRU5ErkJggg==)
  52     background: white
  53     height: inherit
  54     .oe_kanban_column_higlight
  55         background: #eeddf6 !important
  56     .oe_view_nocontent
  57         position: relative
  58         max-width: none
  59         height: 100%
  60         .oe_view_nocontent_content
  61             margin-left: 90px
  62             margin-top: 5px
  63             max-width: 700px
  64         .oe_view_nocontent_bg
  65             background: #eee
  66             opacity: 0.7
  67             position: absolute
  68             top: 0
  69             bottom: 0
  70             left: 0
  71             right: 0
  72             z-index: -1
  73     &.oe_kanban_grouped
  74         .oe_kanban_dummy_cell
  75             background: url(/web/static/src/img/form_sheetbg.png)
  76             width: 100%
  77     .oe_kanban_group_length
  78         text-align: center
  79         display: none
  80         .oe_tag
  81             position: relative
  82             top: +8px
  83             font-weight: bold
  84     .oe_kanban_header:hover .oe_kanban_group_length
  85         display: none
  86     .ui-sortable-placeholder
  87         border: 1px solid rgba(0,0,0,0.1)
  88         visibility: visible !important
  89     .ui-sortable-helper
  90         @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.3))
  91         @include transform(rotate(3deg))
  92         -webkit-transition: -webkit-transform 100ms linear
  93         -moz-transition: -moz-transform 100ms linear
  94         transition: transform 100ms linear
  95     .oe_kanban_left
  96         float: left
  97     .oe_kanban_right
  98         float: right
  99     .oe_kanban_clear
 100         clear: both
 101     .oe_kanban_content
 102         word-wrap: break-word
 103         .oe_star_on, .oe_star_off
 104             color: #ccc
 105             text-shadow: 0 0 2px black
 106             vertical-align: top
 107             position: relative
 108             top: -5px
 109             &:hover
 110                 text-decoration: none
 111         .oe_star_on
 112             color: gold
 113         div:first-child
 114             margin-right: 16px
 115     .oe_kanban_button_new
 116         color: white
 117         background: #DC5F59
 118     // }}}
 119     // KanbanGroups {{{
 120     .oe_kanban_groups
 121         height: inherit
 122     &.oe_kanban_grouped_by_m2o .oe_kanban_group_title
 123         cursor: move
 124     .oe_kanban_header
 125         .oe_dropdown_kanban
 126             float: right
 127         .oe_dropdown_kanban > span
 128             visibility: hidden
 129         &:hover
 130             .oe_dropdown_kanban > span
 131                 visibility: visible
 132         .oe_dropdown_menu
 133             font-weight: normal
 134             font-size: 13px
 135     .oe_kanban_group_title
 136         position: relative
 137         font-size: 16px
 138         font-weight: bold
 139         color: #333333
 140         text-shadow: 0 1px 0 white
 141         margin-right: 30px
 142         width: 200px
 143         .oe_kanban_group_title_text
 144             margin-right: 4px
 145             white-space: nowrap
 146             overflow: hidden
 147             text-overflow: ellipsis
 148     .oe_fold_column
 149         .oe_kanban_group_length
 150             position: absolute
 151             top: -1px
 152             right: -14px
 153             float: right
 154             display: block
 155     &.oe_kanban_grouped
 156         .oe_kanban_column, .oe_kanban_group_header
 157             width: 185px
 158             min-width: 185px
 159             &.oe_kanban_group_folded
 160                 width: auto
 161                 min-width: 30px
 162
 163     .oe_kanban_column, .oe_kanban_group_header
 164         vertical-align: top
 165         padding: 5px 5px 5px 4px
 166         ul, li
 167             margin: 0
 168             padding: 0
 169             list-style-type: none
 170     .oe_kanban_group_header.oe_kanban_no_group
 171         padding: 0px
 172
 173     &.oe_kanban_grouped .oe_kanban_column, .oe_kanban_group_header
 174         background: #f0eeee
 175         border-left: 1px solid #f0f8f8
 176         border-right: 1px solid #b9b9b9
 177     .oe_form
 178         .oe_kanban_column
 179             padding: 0px
 180             background: #ffffff
 181
 182     .oe_kanban_column, .oe_kanban_column_cards
 183         height: 100%
 184     .oe_kanban_aggregates
 185         padding: 0
 186         margin: 0px
 187     .oe_kanban_group_folded
 188         .oe_kanban_group_title, &.oe_kanban_column *, .oe_kanban_aggregates, .oe_kanban_add
 189             display: none
 190         .oe_kanban_group_title_vertical, .oe_kanban_group_length
 191             display: block
 192         .oe_dropdown_kanban
 193             left: -5px
 194         .oe_kanban_folded_column_cards
 195             visibility: visible
 196             display: block !important
 197             height: 100%
 198     .oe_kanban_group_title_undefined
 199         color: #666666
 200     .oe_kanban_group_title_vertical
 201         writing-mode: tb-rl
 202         -webkit-transform: rotate(90deg)
 203         -moz-transform: rotate(90deg)
 204         -o-transform: rotate(90deg)
 205         -ms-transform: rotate(90deg)
 206         transform: rotate(90deg)
 207         width: 30px
 208         font-size: 24px
 209         white-space: nowrap
 210         display: none
 211         position: relative
 212         opacity: 0.75
 213         top: 26px
 214     // }}}
 215     // KanbanQuickCreate {{{
 216     .oe_kanban_add, .oe_kanban_header .oe_dropdown_toggle
 217         margin-left: 4px
 218         cursor: pointer
 219         position: relative
 220     .oe_kanban_add
 221         top: -8px
 222     .oe_kanban_header .oe_dropdown_toggle
 223         top: -2px
 224         height: 14px
 225     .oe_kanban_card, .oe_dropdown_toggle
 226         cursor: pointer
 227         display: inline-block
 228     .oe_kanban_add
 229         float: right
 230
 231     .oe_kanban_quick_create_buttons
 232         margin: 4px 0
 233     .oe_kanban_no_group .oe_kanban_quick_create
 234         width: 185px
 235         padding: 10px
 236     .oe_kanban_quick_create
 237         z-index: 2
 238     .oe_kanban_quick_create input
 239         @include box-sizing(border-box)
 240         outline: none
 241         border: 1px solid transparent
 242         display: block
 243         margin-bottom: 8px
 244         font-size: 13px
 245         width: 100%
 246         @include box-shadow(none)
 247         &:focus
 248             border: 1px solid #A6A6FE
 249             @include box-shadow(0px 0px 7px rgba(0, 133, 255, 0.3) inset)
 250     // }}}
 251     // KanbanRecords {{{
 252     .oe_kanban_vignette
 253         padding: 8px
 254         min-height: 100px
 255     .oe_kanban_image
 256         display: inline-block
 257         vertical-align: top
 258         width: 64px
 259         height: 64px
 260         text-align: center
 261         overflow: hidden
 262         @include radius(3px)
 263         @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.4))
 264     .oe_kanban_details
 265         display: inline-block
 266         vertical-align: top
 267         width: 240px
 268         font-size: 13px
 269         padding: 0 5px
 270         color: #4c4c4c
 271         h4
 272             margin: 0 0 4px 0
 273         .oe_tag
 274             display: inline-block
 275             margin: 0 2px 2px 0
 276     .oe_kanban_record
 277         position: relative
 278         display: block
 279         min-height: 20px
 280         margin: 0
 281         @include radius(4px)
 282         &:last-child
 283             margin-bottom: 0
 284         .oe_kanban_title
 285             font-weight: bold
 286             margin: 2px 4px
 287         .oe_kanban_alias
 288             margin: 0px 0 8px 0
 289     &.oe_kanban_grouped
 290         .oe_kanban_record
 291             margin-bottom: 4px
 292     .oe_kanban_avatar_smallbox
 293         height: 40px
 294         width: 40px
 295         border: 1px solid
 296         border-color: #e5e5e5 #dbdbdb #d2d2d2
 297         @include radius(3px)
 298         @include box-shadow(0 1px 2px rgba(0,0,0,0.2))
 299     .oe_kanban_box
 300         background: #FFF
 301         border: 2px solid #CCC
 302         border-radius: 4px
 303         -moz-border-radius: 4px
 304         -webkit-border-radius: 4px
 305         margin-bottom: 5px
 306     .oe_kanban_box_header
 307         border-bottom: 1px solid #CCC
 308     .oe_kanban_title
 309         font-size: 95%
 310         font-weight: bold
 311         padding: 0 4px 0 4px
 312     .oe_kanban_small
 313         font-size: 80%
 314         font-weight: normal
 315     .oe_kanban_show_more
 316         clear: both
 317         text-align: center
 318     &.oe_kanban_grouped .oe_kanban_show_more .oe_button
 319         width: 100%
 320     &.oe_kanban_ungrouped .oe_kanban_column
 321         .oe_kanban_record
 322             display: inline-block
 323             padding: 2px
 324             vertical-align: top
 325             box-sizing: border-box
 326             -moz-box-sizing: border-box
 327             -webkit-box-sizing: border-box
 328     .oe_kanban_action_button
 329         height: 22px
 330         margin: 0
 331     .oe_kanban_action_a
 332         text-decoration: none
 333         &:hover
 334             text-decoration: none
 335     .oe_kanban_table
 336         width: 100%
 337         border: none
 338         border-collapse: collapse
 339         margin: 0
 340         padding: 0
 341     .oe_kanban_table tr td
 342         padding: 0
 343     .oe_kanban_table tr td.oe_kanban_title
 344         padding: 2px
 345     .oe_kanban_box_content
 346         padding: 4px
 347         font-size: 90%
 348     .oe_kanban_button
 349         border: 1px solid #8ec1da
 350         background-color: #ddeef6
 351         border-radius: 3px
 352         -moz-border-radius: 3px
 353         -webkit-border-radius: 3px
 354         color: #000000
 355         text-shadow: 0 1px #fff
 356         padding: 0 4px
 357         font-size: 85%
 358         margin: 1px
 359     a.oe_kanban_button:hover, .openerp button.oe_kanban_button:hover
 360         background-color: #eeddf6
 361     .oe_kanban_buttons_set
 362         border-top: 1px dotted
 363         white-space: nowrap
 364         padding-top: 2px
 365         position: relative
 366         clear: both
 367         a
 368             padding: 2px
 369     .oe_kanban_box_show_onclick
 370         display: none
 371     .oe_kanban_draghandle
 372         cursor: move
 373     .oe_kanban_color_border
 374         border-color: #CCCCCC
 375     .oe_kanban_color_border
 376         border-color: #CCCCCC
 377     .oe_kanban_tooltip ul, ul.oe_kanban_tooltip
 378         padding: 0 0 4px 0
 379         margin: 5px 0 0 15px
 380         list-style: circle
 381     .oe_kanban_highlight
 382         border-radius: 2px
 383         -moz-border-radius: 2px
 384         -webkit-border-radius: 2px
 385         padding: 1px 5px
 386         margin: 1px 4px
 387         white-space: nowrap
 388         display: inline-block
 389         line-height: 1em
 390     .oe_kanban_card, .oe_kanban_quick_create
 391         margin-bottom: 4px
 392         position: relative
 393         display: block
 394         background: white
 395         border: 1px solid rgba(0,0,0,0.16)
 396         border-bottom-color: rgba(0,0,0,0.3)
 397         padding: 5px
 398         display: block
 399         -webkit-transition: -webkit-transform, -webkit-box-shadow, border 200ms linear
 400         @include radius(4px)
 401         &:not(.ui-sortable-helper):hover
 402             border: 1px solid #7C7BAD
 403             @include box-shadow(0 0 4px #7C7BAD)
 404             .oe_dropdown_kanban > span
 405                 visibility: visible
 406         h3
 407             margin: 0 16px 0 0
 408             color: #4c4c4c
 409             text-decoration: none
 410         h3:hover
 411             text-decoration: none
 412         .oe_dropdown_kanban
 413             .oe_kanban_project_times
 414                 li
 415                     float: left
 416
 417     .oe_kanban_star
 418         float: left
 419         position: inline-block
 420         margin: 0 4px 0 0
 421     .oe_kanban_avatar
 422         @include radius(3px)
 423         @include box-shadow(0 1px 2px rgba(0,0,0,0.2))
 424     .oe_kanban_footer_left
 425         margin-top: 2px
 426         > span
 427             margin-top: 2px
 428             display: inline-block
 429             background: #E6E6E6
 430             border: 1px solid #B9B9B9
 431             color: #666
 432             padding: 0 2px
 433             line-height: 16px
 434             @include radius(3px)
 435             .oe_e
 436                 line-height: 12px
 437                 font-size: 22px
 438         .oe_tags
 439             margin-right: 0
 440             .oe_tag
 441                 display: inline-block
 442                 padding: 0 2px
 443                 line-height: 14px
 444         .oe_kanban_mail_new
 445             line-height: 18px
 446             background-color: #8a89ba
 447             color: white
 448             font-weight: bold
 449             position: relative
 450             top: -1px
 451     .oe_kanban_bottom_right
 452         float: right
 453         position: relative
 454         top: 2px
 455
 456     .oe_kanban_status
 457         position: relative
 458         top: 4px
 459         display: inline-block
 460         height: 12px
 461         width: 12px
 462         @include radius(6px)
 463         @include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
 464     .oe_kanban_status_green
 465         background: green
 466         @include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
 467     .oe_kanban_status_red
 468         background: red
 469         @include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
 470     .oe_kanban_text_red
 471         color: #A61300
 472         font-weight: bold
 473         @include radius(4px)
 474     .oe_kanban_ellipsis
 475         overflow: hidden
 476         text-overflow: ellipsis
 477         white-space: nowrap
 478     // }}}
 479     // KanbanDropDown {{{
 480     .oe_dropdown_kanban
 481         float: right
 482         cursor: pointer
 483         margin-top: -6px
 484         &:hover
 485             text-decoration: none
 486         .oe_dropdown_menu
 487             left: 0
 488             top: 28px
 489             min-width: 160px
 490             padding: 2px
 491             > li
 492                 padding: 3px
 493     .oe_dropdown_kanban
 494         &.oe_opened > span
 495             visibility: visible
 496         > span
 497             visibility: hidden
 498     // }}}
 499     // KanbanColorPicker {{{
 500     .oe_kanban_colorpicker
 501         white-space: nowrap
 502     .oe_kanban_colorpicker li
 503         float: left
 504         margin: 0
 505         padding: 0
 506         a
 507             display: inline-block
 508             width: 16px
 509             height: 16px
 510             border: 1px solid white
 511         a:hover
 512             border: 1px solid gray !important
 513     .oe_kanban_colorpicker li:first-child a
 514         border: 1px solid #ccc
 515     // }}}
 516     // KanbanColors {{{
 517     .oe_kanban_color_0
 518         background-color: #FFFFFF
 519         color: #5a5a5a
 520     .oe_kanban_color_1
 521         background-color: #CCCCCC
 522         color: #424242
 523     .oe_kanban_color_2
 524         background-color: #FFC7C7
 525         color: #7a3737
 526     .oe_kanban_color_3
 527         background-color: #FFF1C7
 528         color: #756832
 529     .oe_kanban_color_4
 530         background-color: #E3FFC7
 531         color: #5d6937
 532     .oe_kanban_color_5
 533         background-color: #C7FFD5
 534         color: #1a7759
 535     .oe_kanban_color_6
 536         background-color: #C7FFFF
 537         color: #1a5d83
 538     .oe_kanban_color_7
 539         background-color: #C7D5FF
 540         color: #3b3e75
 541     .oe_kanban_color_8
 542         background-color: #E3C7FF
 543         color: #4c3668
 544     .oe_kanban_color_9
 545         background-color: #FFC7F1
 546         color: #6d2c70
 547     // }}}
 548
 549 .openerp .oe_form .oe_kanban_view
 550     .oe_kanban_column, .oe_kanban_group_header
 551         padding: 0px
 552         background: #ffffff
 553
 554 .openerp
 555     .oe_popup_form
 556         .oe_kanban_buttons
 557             .oe_highlight
 558                 color: #404040
 559                 background: none
 560             button.oe_highlight
 561                 @include vertical-gradient(#efefef, #d8d8d8)
 562                 @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
 563             button.oe_highlight:active
 564                 @include vertical-gradient(#e3e3e3, #f6f6f6)
 565                 @include box-shadow(none)
 566             button.oe_highlight:hover
 567                 @include vertical-gradient(#f6f6f6, #e3e3e3)
 568                 @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
 569
 570
 571 // Internet Explorer 9+ specifics {{{
 572 .openerp_ie .oe_kanban_view
 573     .oe_kanban_group_header .oe_kanban_group_title_vertical
 574         // TODO: check for IE10
 575         display: none !important
 576     .oe_kanban_group_header.oe_kanban_group_folded .oe_kanban_group_title_vertical
 577         display: inline-block !important
 578     .oe_kanban_group_title_vertical
 579         -ms-writing-mode: lr-tb !important
 580         background: rgb(240, 238, 238)
 581         top: -5px !important
 582     &.oe_kanban_grouped
 583         .oe_kanban_group_header
 584             height: 1%
 585 // }}}
 586
 587 @media print
 588     .openerp
 589         .oe_kanban_groups
 590             button
 591                 visibility: hidden
 592             a
 593                 &[data-type=object], &[data-type=delete]
 594                     visibility: hidden
 595         .oe_kanban_view .oe_kanban_group_title
 596             text-shadow: none !important
 597
 598 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 599 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: