addons/website/static/src/css/snippets.sass

   1 @import "compass/css3"
   2 @import "compass/css3/user-interface"
   3 @import "compass/css3/transition"
   4
   5
   6 /* ---- SNIPPET EDITOR ---- {{{ */
   7
   8 #oe_snippets
   9     position: fixed
  10     top: 34px
  11     left: 0px
  12     right: 0px
  13     padding-top: 6px
  14     // top property is set programmatically
  15     background: rgb(40,40,40)
  16     +box-shadow(0px 10px 10px -10px black inset)
  17     z-index: 1010
  18     overflow: hidden
  19     &:hover
  20         height: auto
  21     .scroll
  22         white-space: nowrap
  23         overflow-y: none
  24     .nav
  25         display: inline-block
  26         border-bottom: none !important
  27         vertical-align: middle
  28         min-width: 120px
  29         > li
  30             display: block
  31             float: none
  32             &.active
  33                 background: black !important
  34             > a
  35                 padding: 2px 10px !important
  36                 width: 100%
  37                 display: block
  38                 border: 0
  39         z-index: 1
  40     .pill-content
  41         border: 0
  42     .tab-content
  43         display: inline-block
  44         white-space: nowrap
  45         background: black
  46         > div
  47             background: rgb(0,0,0)
  48             label
  49                 width: 44px
  50                 color: #fff
  51                 padding-left: 10px
  52
  53                 div
  54                     width: 100px
  55                     text-align: center
  56                     @include transform( translate(-39px, 44px) , rotate(-90deg) )
  57                     @include transform-origin(50% 50%)
  58
  59 .oe_snippet
  60     float: left
  61     vertical-align: top
  62     width: 93px
  63     margin-left: 1px
  64     margin-top: 0px
  65     position: relative
  66     overflow: hidden
  67     +user-select(none)
  68     cursor: move
  69     .oe_snippet_thumbnail
  70         text-align: center
  71         height: 100%
  72         background: transparent
  73         color: white
  74         position: relative
  75         &:hover
  76             .oe_snippet_thumbnail_img
  77                 @include transform( scale(.95,.95))
  78         .oe_snippet_thumbnail_title
  79             font-size: 12px
  80             display: block
  81             +text-shadow(0 0 2px rgb(0,0,0))
  82         .oe_snippet_thumbnail_img
  83             height: 74px
  84             +box-shadow(inset 0px 0px 0px 3px #333333)
  85             @include transform( scale(1,1))
  86         span, div
  87             line-height: 18px
  88     & > :not(.oe_snippet_thumbnail)
  89         display: none !important
  90
  91 #oe_snippets .oe_snippet_thumbnail
  92     @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
  93
  94 // }}}}
  95
  96 /* ---- SNIPPETS DROP ZONES ---- {{{ */
  97
  98 .oe_drop_zone.oe_insert
  99     display: block
 100     height: 48px
 101     margin: 0px
 102     margin-top: -4px
 103     margin-bottom: -44px
 104     @include transition(margin 250ms linear)
 105     width: 100%
 106     position: absolute
 107     z-index: 1000
 108     &:not(.oe_vertical):before
 109         content: ""
 110         display: block
 111         border-top: dashed 2px rgba(209, 178, 255, 0.72)
 112         position: relative
 113         top: 0px
 114     &.oe_hover:before
 115         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 116     &.oe_vertical
 117         width: 48px
 118         float: left
 119         position: relative
 120         margin: 0px -24px !important
 121     &.oe_overlay
 122         +border-radius(3px)
 123         //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
 124         //background-size: 100px 100px
 125         background: rgba(153, 0, 255,.5)
 126
 127 .oe_drop_zone, .oe_drop_zone_style
 128     border: none
 129     //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
 130     //background-size: 100px 100px
 131     background: rgba(153, 0, 255, .3)
 132     +border-radius(4px)
 133     &.oe_hover
 134         background: rgba(0, 255, 133, .3)
 135         z-index: 1001
 136
 137 .oe_drop_zone_style
 138     color: white
 139     height: 48px
 140     margin-bottom: 32px
 141     padding-top: 12px
 142
 143 // }}}
 144
 145 /* ---- SNIPPET MANIPULATOR ----  {{{ */
 146
 147 .resize_editor_busy
 148     background-color: rgba(0,0,0,0.3)
 149
 150 .oe_overlay
 151     display: none
 152     height: 0
 153     position: absolute
 154     background: transparent
 155     z-index: 1001
 156     //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
 157     +border-radius(3px)
 158     @include transition(opacity 100ms linear)
 159     +box-sizing(border-box)
 160     &.oe_active
 161         display: block
 162     .oe_handle
 163         display: block !important
 164         position: absolute
 165         top: 50%
 166         left: 50%
 167         +box-sizing(border-box)
 168         width: 16px
 169         height: 16px
 170         margin: -2px
 171         > div
 172             z-index: 1
 173             position: absolute
 174             border-style: dashed
 175             border-width: 1px
 176             border-color: #666666
 177             +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
 178         &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
 179             z-index: 2
 180             position: relative
 181             top: 50%
 182             left: 50%
 183             display: block
 184             background: rgba(255, 255, 255, 1)
 185             border: solid 1px rgba(0, 0, 0, .2)
 186             +border-radius(5px)
 187             width: 18px
 188             height: 18px
 189             margin: -9px
 190             padding-left: 1px
 191             font-size: 14px
 192             line-height: 14px
 193             font-family: FontAwesome
 194             color: rgba(0,0,0,.5)
 195             @include transition(background 100ms linear)
 196         &.e, &.w, &.s, &.n
 197             &:hover:before
 198                 background: rgba(0, 0, 0, .5)
 199                 color: #fff
 200                 +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
 201         &.e, &.w
 202             top: 4px
 203             height: 100%
 204             &:before
 205                 content: "\f0d9-\f0da"
 206                 line-height: 16px
 207             > div
 208                 width: 0
 209                 height: 100%
 210                 top: 2px
 211                 left: 8px
 212         &.e
 213             left: auto
 214             right: -6px
 215             cursor: w-resize
 216         &.w
 217             left: -6px
 218             cursor: e-resize
 219         &.s, &.n
 220             left: 2px
 221             width: 100%
 222             &:before
 223                 content: "\f07d"
 224                 text-align: center
 225                 padding: 1px
 226             > div
 227                 width: 100%
 228                 height: 0
 229                 top: 7px
 230                 left: 1px
 231         &.s
 232             top: auto
 233             cursor: n-resize
 234         &.n
 235             cursor: s-resize
 236             > div
 237                 top: 5px
 238         &.size
 239             z-index: 3
 240             top: auto
 241             left: 50%
 242             bottom: -6px
 243             margin-left: -50px
 244             .oe_handle_button
 245                 position: relative
 246                 z-index: 3
 247                 text-align: center
 248                 margin-left: -52px
 249                 margin-top: -10px
 250                 left: 0px
 251                 &:hover
 252                     background: rgba(30, 30, 30, .8)
 253                     color: #fff
 254                     +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
 255             .size
 256                 position: absolute
 257                 width: 64px
 258                 cursor: row-resize
 259                 top: 9px
 260                 margin-left: 52px
 261                 padding: 0 5px
 262             .auto_size
 263                 position: absolute
 264                 width: 100px
 265                 top: 9px
 266                 cursor: pointer
 267         &.readonly
 268             cursor: auto !important
 269             &:before, &.size
 270                 display: none !important
 271
 272     .icon.btn
 273         display: inline-block
 274
 275     .oe_overlay_options
 276         position: absolute
 277         left: 50% !important
 278         text-align: center
 279         top: -20px
 280         z-index: 1002
 281         > .btn-group
 282             left: -50%
 283             white-space: nowrap
 284             > a
 285                 cursor: pointer
 286                 display: inline-block
 287                 float: none
 288                 margin: 0 -3px
 289         .btn, a
 290             cursor: pointer
 291         .dropdown
 292             display: inline-block
 293         .dropdown-menu
 294             text-align: left
 295             min-width: 180px
 296         .dropdown-menu select,.dropdown-menu input
 297             display: block
 298
 299     &.block-w-left .w:before
 300         content: "\F061" !important
 301     &.block-w-right .w:before
 302         content: "\F060" !important
 303     &.block-w-left.block-w-right .w
 304         display: none !important
 305     &.block-e-left .e:before
 306         content: "\F061" !important
 307     &.block-e-right .e:before
 308         content: "\F060" !important
 309     &.block-e-left.block-e-right .e
 310         display: none !important
 311
 312     &.block-s-top .s:before
 313         content: "\F063" !important
 314     &.block-s-bottom .s:before
 315         content: "\f062" !important
 316     &.block-n-top .n:before
 317         content: "\F063" !important
 318     &.block-n-bottom .n:before
 319         content: "\f062" !important
 320
 321
 322 .s-resize-important, .s-resize-important *
 323     cursor: s-resize !important
 324 .n-resize-important, .n-resize-important *
 325     cursor: n-resize !important
 326 .e-resize-important, .e-resize-important *
 327     cursor: e-resize !important
 328 .w-resize-important, .w-resize-important *
 329     cursor: w-resize !important
 330 .move-important, .move-important *
 331     cursor: move !important
 332
 333 // }}}
 334
 335
 336 /* add CSS for bootstrap dropdown multi level */
 337 .dropdown-submenu
 338     position: relative
 339     z-index: 1000
 340 .dropdown-submenu
 341     &>.dropdown-menu
 342         top: 0
 343         left: 100%
 344         margin-top: -6px
 345         margin-left: -1px
 346         -webkit-border-radius: 0 6px 6px 6px
 347         -moz-border-radius: 0 6px 6px 6px
 348         border-radius: 0 6px 6px 6px
 349     &:hover
 350         &>.dropdown-menu
 351             display: block
 352         &>a:after
 353             border-left-color: #ffffff
 354     &>a:after
 355         display: block
 356         content: " "
 357         float: right
 358         width: 0
 359         height: 0
 360         border-color: transparent
 361         border-style: solid
 362         border-width: 5px 0 5px 5px
 363         border-left-color: #cccccc
 364         margin-top: 5px
 365         margin-right: -10px
 366     &.pull-left
 367         float: none
 368         &>.dropdown-menu
 369             left: -100%
 370             margin-left: 10px
 371             -webkit-border-radius: 6px 0 6px 6px
 372             -moz-border-radius: 6px 0 6px 6px
 373             border-radius: 6px 0 6px 6px
 374
 375 .oe_snippet_list
 376     width: auto
 377     white-space: nowrap
 378     margin-left: 20px
 379
 380 .oe_snippet_editor
 381     position: fixed
 382     z-index: 1000
 383     bottom: 0
 384     left: 0
 385     right: 0
 386     height: 214px
 387     background: rgb(160,160,160)
 388     box-shadow: 0 1px 3px rgb(100,100,100) inset
 389     .oe_snippet
 390         box-sizing: border-box
 391         display: inline-block
 392         width: 220px
 393         height: 160px
 394         border-radius: 3px
 395         background: white
 396         margin: 20px 20px 20px 0
 397         cursor: pointer
 398         border: 2px solid transparent
 399         box-shadow: 0 1px 3px rgb(100,100,100)
 400         position: relative
 401         top: 0
 402         overflow: hidden
 403         vertical-align: top
 404         user-select: none
 405         white-space: normal
 406         &:after
 407             content: attr(name)
 408             position: absolute
 409             bottom: 0px
 410             left: 0px
 411             right: 0px
 412             background: rgba(255,255,255,0.8)
 413             text-align: center
 414             color: black
 415             padding: 8px
 416         &.oe_selected, &.oe_active
 417             border: 2px solid rgb(151, 137, 255)
 418             box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
 419         & > *
 420             margin-top: 16px
 421             line-height: 1em
 422             zoom: 0.6
 423         & > .container
 424             margin-top: 15px
 425             zoom: 0.17
 426             line-height: 0.999em
 427             line-height: 1em
 428         & > .row
 429             margin-top: 0px
 430             zoom: 0.23
 431             line-height: 0.999em
 432         & > .span6
 433             margin-top: 18px
 434             zoom: 0.34
 435         & > .span12
 436             margin-top: 16px
 437             zoom: 0.23
 438         & > p
 439             position: absolute
 440             top: 0
 441             right: 0
 442             left: 0
 443             bottom: 0
 444             font-size: 20px
 445             padding: 16px
 446             zoom: 1
 447             margin: 0px
 448         &.oe_new
 449             background: gray
 450             box-shadow: 0px 1px 3px rgb(90,90,90) inset
 451             border: 0px
 452             &.oe_selected, &.oe_active
 453                 box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset
 454             & > *
 455                 zoom: 1
 456                 margin: 0
 457                 line-height: 160px
 458                 text-align: center
 459                 color: white
 460                 font-size: 48px
 461             &:after
 462                 position: absolute
 463                 left: 0px
 464                 right: 0px
 465                 top: 0px
 466                 bottom: 0px
 467                 background: transparent
 468                 color: white
 469                 text-shadow: 0px 1px 3px black
 470                 line-height: 160px
 471                 padding: 0px
 472
 473 .oe_snippet_drop
 474     position: relative
 475     border: 2px dashed rgb(174, 52, 255)
 476     background: rgba(147, 52, 255, 0.1)
 477     min-height: 28px
 478     margin: -16px auto
 479     border-radius: 5px
 480     max-width: 50%
 481     &.oe_accepting
 482         border: 2px dashed rgb(52, 255, 166)
 483         background: rgba(52, 255, 190, 0.1)
 484
 485 #website-top-edit
 486     li.oe_snippet_editorbar
 487         padding: 1px 8px 2px
 488         font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif
 489         float: left
 490         margin-top: 6px
 491         border: 1px solid #a6a6a6
 492         border-bottom-color: #979797
 493         background: #eeeeee
 494         border-radius: 3px
 495         & > *
 496             display: inline-block
 497             height: 22px
 498             padding: 4px 6px
 499             outline: 0
 500             border: 0
 501
 502         a.button .icon
 503             cursor: inherit
 504             background-repeat: no-repeat
 505             margin-top: 1px
 506             width: 16px
 507             height: 16px
 508             display: inline-block
 509
 510
 511
 512