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