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