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