508 lines
14 KiB
Sass
508 lines
14 KiB
Sass
@import "compass/css3"
|
|
@import "compass/css3/user-interface"
|
|
@import "compass/css3/transition"
|
|
|
|
|
|
/* ---- SNIPPET EDITOR ---- {{{ */
|
|
|
|
#oe_snippets
|
|
position: fixed
|
|
top: 34px
|
|
left: 0px
|
|
right: 0px
|
|
padding-top: 6px
|
|
// top property is set programmatically
|
|
background: rgb(40,40,40)
|
|
+box-shadow(0px 10px 10px -10px black inset)
|
|
z-index: 1010
|
|
overflow: hidden
|
|
&:hover
|
|
height: auto
|
|
.scroll
|
|
white-space: nowrap
|
|
overflow-y: none
|
|
.nav
|
|
display: inline-block
|
|
border-bottom: none !important
|
|
vertical-align: middle
|
|
min-width: 120px
|
|
> li
|
|
display: block
|
|
float: none
|
|
&.active
|
|
background: black !important
|
|
> a
|
|
padding: 2px 10px !important
|
|
width: 100%
|
|
display: block
|
|
border: 0
|
|
z-index: 1
|
|
.pill-content
|
|
border: 0
|
|
.tab-content
|
|
display: inline-block
|
|
white-space: nowrap
|
|
background: black
|
|
> div
|
|
background: rgb(0,0,0)
|
|
label
|
|
width: 44px
|
|
color: #fff
|
|
padding-left: 10px
|
|
|
|
div
|
|
width: 100px
|
|
text-align: center
|
|
@include transform( translate(-39px, 44px) , rotate(-90deg) )
|
|
@include transform-origin(50% 50%)
|
|
|
|
.oe_snippet
|
|
float: left
|
|
vertical-align: top
|
|
width: 93px
|
|
margin-left: 1px
|
|
margin-top: 0px
|
|
position: relative
|
|
overflow: hidden
|
|
+user-select(none)
|
|
cursor: move
|
|
.oe_snippet_thumbnail
|
|
text-align: center
|
|
height: 100%
|
|
background: transparent
|
|
color: white
|
|
position: relative
|
|
&:hover
|
|
.oe_snippet_thumbnail_img
|
|
@include transform( scale(.95,.95))
|
|
.oe_snippet_thumbnail_title
|
|
font-size: 12px
|
|
display: block
|
|
+text-shadow(0 0 2px rgb(0,0,0))
|
|
.oe_snippet_thumbnail_img
|
|
height: 74px
|
|
@include transition(all 150ms linear)
|
|
+box-shadow(inset 0px 0px 0px 3px #333333)
|
|
@include transform( scale(1,1))
|
|
span, div
|
|
line-height: 18px
|
|
& > :not(.oe_snippet_thumbnail)
|
|
display: none !important
|
|
|
|
#oe_snippets .oe_snippet_thumbnail
|
|
@include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
|
|
|
|
// }}}}
|
|
|
|
/* ---- SNIPPETS DROP ZONES ---- {{{ */
|
|
|
|
.oe_drop_zone.oe_insert
|
|
display: block
|
|
height: 48px
|
|
margin: 0px
|
|
margin-top: -4px
|
|
margin-bottom: -44px
|
|
@include transition(margin 250ms linear)
|
|
width: 100%
|
|
position: absolute
|
|
z-index: 1000
|
|
&:not(.oe_vertical):before
|
|
content: ""
|
|
display: block
|
|
border-top: dashed 2px rgba(209, 178, 255, 0.72)
|
|
position: relative
|
|
top: 0px
|
|
&.oe_hover:before
|
|
border-top: dashed 2px rgba(116, 255, 161, 0.72)
|
|
&.oe_vertical
|
|
width: 48px
|
|
float: left
|
|
position: relative
|
|
margin: 0px -24px !important
|
|
&.oe_overlay
|
|
+border-radius(3px)
|
|
//@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))
|
|
//background-size: 100px 100px
|
|
background: rgba(153, 0, 255,.5)
|
|
|
|
.oe_drop_zone, .oe_drop_zone_style
|
|
border: none
|
|
//@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))
|
|
//background-size: 100px 100px
|
|
background: rgba(153, 0, 255, .3)
|
|
+border-radius(4px)
|
|
&.oe_hover
|
|
background: rgba(0, 255, 133, .3)
|
|
z-index: 1001
|
|
|
|
.oe_drop_zone_style
|
|
color: white
|
|
height: 48px
|
|
margin-bottom: 32px
|
|
padding-top: 12px
|
|
|
|
// }}}
|
|
|
|
/* ---- SNIPPET MANIPULATOR ---- {{{ */
|
|
|
|
.resize_editor_busy
|
|
background-color: rgba(0,0,0,0.3)
|
|
|
|
.oe_overlay
|
|
display: none
|
|
height: 0
|
|
position: absolute
|
|
background: transparent
|
|
z-index: 1001
|
|
//@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))
|
|
+border-radius(3px)
|
|
@include transition(opacity 100ms linear)
|
|
+box-sizing(border-box)
|
|
&.oe_active
|
|
display: block
|
|
.oe_handle
|
|
display: block !important
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
+box-sizing(border-box)
|
|
width: 16px
|
|
height: 16px
|
|
margin: -2px
|
|
> div
|
|
z-index: 1
|
|
position: absolute
|
|
border-style: dashed
|
|
border-width: 1px
|
|
border-color: #666666
|
|
+box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
|
|
&.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
|
|
z-index: 2
|
|
position: relative
|
|
top: 50%
|
|
left: 50%
|
|
display: block
|
|
background: rgba(255, 255, 255, 1)
|
|
border: solid 1px rgba(0, 0, 0, .2)
|
|
+border-radius(5px)
|
|
width: 18px
|
|
height: 18px
|
|
margin: -9px
|
|
padding-left: 1px
|
|
font-size: 14px
|
|
line-height: 14px
|
|
font-family: FontAwesome
|
|
color: rgba(0,0,0,.5)
|
|
@include transition(background 100ms linear)
|
|
&.e, &.w, &.s, &.n
|
|
&:hover:before
|
|
background: rgba(0, 0, 0, .5)
|
|
color: #fff
|
|
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
|
|
&.e, &.w
|
|
top: 4px
|
|
height: 100%
|
|
&:before
|
|
content: "\f0d9-\f0da"
|
|
line-height: 16px
|
|
> div
|
|
width: 0
|
|
height: 100%
|
|
top: 2px
|
|
left: 8px
|
|
&.e
|
|
left: auto
|
|
right: -6px
|
|
cursor: w-resize
|
|
&.w
|
|
left: -6px
|
|
cursor: e-resize
|
|
&.s, &.n
|
|
left: 2px
|
|
width: 100%
|
|
&:before
|
|
content: "\f07d"
|
|
text-align: center
|
|
padding: 1px
|
|
> div
|
|
width: 100%
|
|
height: 0
|
|
top: 7px
|
|
left: 1px
|
|
&.s
|
|
top: auto
|
|
cursor: n-resize
|
|
&.n
|
|
cursor: s-resize
|
|
> div
|
|
top: 5px
|
|
&.size
|
|
z-index: 3
|
|
top: auto
|
|
left: 50%
|
|
bottom: -6px
|
|
margin-left: -50px
|
|
.oe_handle_button
|
|
position: relative
|
|
z-index: 3
|
|
text-align: center
|
|
margin-left: -52px
|
|
margin-top: -10px
|
|
left: 0px
|
|
&:hover
|
|
background: rgba(30, 30, 30, .8)
|
|
color: #fff
|
|
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
|
|
.size
|
|
position: absolute
|
|
width: 64px
|
|
cursor: row-resize
|
|
top: 9px
|
|
margin-left: 52px
|
|
padding: 0 5px
|
|
.auto_size
|
|
position: absolute
|
|
width: 100px
|
|
top: 9px
|
|
cursor: pointer
|
|
&.readonly
|
|
cursor: auto !important
|
|
&:before, &.size
|
|
display: none !important
|
|
|
|
.icon.btn
|
|
display: inline-block
|
|
|
|
.oe_overlay_options
|
|
position: absolute
|
|
left: 50% !important
|
|
text-align: center
|
|
top: -20px
|
|
z-index: 1002
|
|
> .btn-group
|
|
left: -50%
|
|
.btn, a
|
|
cursor: pointer
|
|
.dropdown
|
|
display: inline-block
|
|
.dropdown-menu
|
|
text-align: left
|
|
min-width: 180px
|
|
.dropdown-menu select,.dropdown-menu input
|
|
display: block
|
|
|
|
&.block-w-left .w:before
|
|
content: "\F061" !important
|
|
&.block-w-right .w:before
|
|
content: "\F060" !important
|
|
&.block-w-left.block-w-right .w
|
|
display: none !important
|
|
&.block-e-left .e:before
|
|
content: "\F061" !important
|
|
&.block-e-right .e:before
|
|
content: "\F060" !important
|
|
&.block-e-left.block-e-right .e
|
|
display: none !important
|
|
|
|
&.block-s-top .s:before
|
|
content: "\F063" !important
|
|
&.block-s-bottom .s:before
|
|
content: "\f062" !important
|
|
&.block-n-top .n:before
|
|
content: "\F063" !important
|
|
&.block-n-bottom .n:before
|
|
content: "\f062" !important
|
|
|
|
|
|
.s-resize-important, .s-resize-important *
|
|
cursor: s-resize !important
|
|
.n-resize-important, .n-resize-important *
|
|
cursor: n-resize !important
|
|
.e-resize-important, .e-resize-important *
|
|
cursor: e-resize !important
|
|
.w-resize-important, .w-resize-important *
|
|
cursor: w-resize !important
|
|
.move-important, .move-important *
|
|
cursor: move !important
|
|
|
|
// }}}
|
|
|
|
|
|
/* add CSS for bootstrap dropdown multi level */
|
|
.dropdown-submenu
|
|
position: relative
|
|
z-index: 1000
|
|
.dropdown-submenu
|
|
&>.dropdown-menu
|
|
top: 0
|
|
left: 100%
|
|
margin-top: -6px
|
|
margin-left: -1px
|
|
-webkit-border-radius: 0 6px 6px 6px
|
|
-moz-border-radius: 0 6px 6px 6px
|
|
border-radius: 0 6px 6px 6px
|
|
&:hover
|
|
&>.dropdown-menu
|
|
display: block
|
|
&>a:after
|
|
border-left-color: #ffffff
|
|
&>a:after
|
|
display: block
|
|
content: " "
|
|
float: right
|
|
width: 0
|
|
height: 0
|
|
border-color: transparent
|
|
border-style: solid
|
|
border-width: 5px 0 5px 5px
|
|
border-left-color: #cccccc
|
|
margin-top: 5px
|
|
margin-right: -10px
|
|
&.pull-left
|
|
float: none
|
|
&>.dropdown-menu
|
|
left: -100%
|
|
margin-left: 10px
|
|
-webkit-border-radius: 6px 0 6px 6px
|
|
-moz-border-radius: 6px 0 6px 6px
|
|
border-radius: 6px 0 6px 6px
|
|
|
|
.oe_snippet_list
|
|
width: auto
|
|
white-space: nowrap
|
|
margin-left: 20px
|
|
|
|
.oe_snippet_editor
|
|
position: fixed
|
|
z-index: 1000
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
height: 214px
|
|
background: rgb(160,160,160)
|
|
box-shadow: 0 1px 3px rgb(100,100,100) inset
|
|
.oe_snippet
|
|
box-sizing: border-box
|
|
display: inline-block
|
|
width: 220px
|
|
height: 160px
|
|
border-radius: 3px
|
|
background: white
|
|
margin: 20px 20px 20px 0
|
|
cursor: pointer
|
|
border: 2px solid transparent
|
|
box-shadow: 0 1px 3px rgb(100,100,100)
|
|
position: relative
|
|
top: 0
|
|
overflow: hidden
|
|
vertical-align: top
|
|
user-select: none
|
|
white-space: normal
|
|
&:after
|
|
content: attr(name)
|
|
position: absolute
|
|
bottom: 0px
|
|
left: 0px
|
|
right: 0px
|
|
background: rgba(255,255,255,0.8)
|
|
text-align: center
|
|
color: black
|
|
padding: 8px
|
|
&.oe_selected, &.oe_active
|
|
border: 2px solid rgb(151, 137, 255)
|
|
box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
|
|
& > *
|
|
margin-top: 16px
|
|
line-height: 1em
|
|
zoom: 0.6
|
|
& > .container
|
|
margin-top: 15px
|
|
zoom: 0.17
|
|
line-height: 0.999em
|
|
line-height: 1em
|
|
& > .row
|
|
margin-top: 0px
|
|
zoom: 0.23
|
|
line-height: 0.999em
|
|
& > .span6
|
|
margin-top: 18px
|
|
zoom: 0.34
|
|
& > .span12
|
|
margin-top: 16px
|
|
zoom: 0.23
|
|
& > p
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
left: 0
|
|
bottom: 0
|
|
font-size: 20px
|
|
padding: 16px
|
|
zoom: 1
|
|
margin: 0px
|
|
&.oe_new
|
|
background: gray
|
|
box-shadow: 0px 1px 3px rgb(90,90,90) inset
|
|
border: 0px
|
|
&.oe_selected, &.oe_active
|
|
box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset
|
|
& > *
|
|
zoom: 1
|
|
margin: 0
|
|
line-height: 160px
|
|
text-align: center
|
|
color: white
|
|
font-size: 48px
|
|
&:after
|
|
position: absolute
|
|
left: 0px
|
|
right: 0px
|
|
top: 0px
|
|
bottom: 0px
|
|
background: transparent
|
|
color: white
|
|
text-shadow: 0px 1px 3px black
|
|
line-height: 160px
|
|
padding: 0px
|
|
|
|
.oe_snippet_drop
|
|
position: relative
|
|
border: 2px dashed rgb(174, 52, 255)
|
|
background: rgba(147, 52, 255, 0.1)
|
|
min-height: 28px
|
|
margin: -16px auto
|
|
border-radius: 5px
|
|
max-width: 50%
|
|
&.oe_accepting
|
|
border: 2px dashed rgb(52, 255, 166)
|
|
background: rgba(52, 255, 190, 0.1)
|
|
|
|
#website-top-edit
|
|
li.oe_snippet_editorbar
|
|
padding: 1px 8px 2px
|
|
font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif
|
|
float: left
|
|
margin-top: 6px
|
|
border: 1px solid #a6a6a6
|
|
border-bottom-color: #979797
|
|
background: #eeeeee
|
|
border-radius: 3px
|
|
& > *
|
|
display: inline-block
|
|
height: 22px
|
|
padding: 4px 6px
|
|
outline: 0
|
|
border: 0
|
|
|
|
a.button .icon
|
|
cursor: inherit
|
|
background-repeat: no-repeat
|
|
margin-top: 1px
|
|
width: 16px
|
|
height: 16px
|
|
display: inline-block
|
|
|
|
|
|
|
|
|