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