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