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