[IMP] website snippet: create snippets.sass, imrpove css and resizing layout
bzr revid: chm@openerp.com-20140115125923-eggv51bsvokc7a06
This commit is contained in:
Christophe Matthieu
@@ -1,3 +1,4 @@
|
||||
sass:
|
||||
sass -t expanded --compass --unix-newlines --watch website.sass:website.css&
|
||||
sass -t expanded --compass --unix-newlines --watch editor.sass:editor.css&
|
||||
sass -t expanded --compass --unix-newlines --watch snippets.sass:snippets.css&
|
||||
|
||||
@@ -248,387 +248,6 @@ ul.oe_menu_editor .disclose {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* ---- SNIPPET EDITOR ---- {{{ */
|
||||
#oe_snippets {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #282828;
|
||||
-webkit-box-shadow: 0px 10px 10px -10px black inset;
|
||||
-moz-box-shadow: 0px 10px 10px -10px black inset;
|
||||
box-shadow: 0px 10px 10px -10px black inset;
|
||||
z-index: 1010;
|
||||
overflow: hidden;
|
||||
}
|
||||
#oe_snippets:hover {
|
||||
height: auto;
|
||||
}
|
||||
#oe_snippets .scroll {
|
||||
white-space: nowrap;
|
||||
overflow-y: none;
|
||||
}
|
||||
#oe_snippets .nav {
|
||||
display: inline-block;
|
||||
border-bottom: none !important;
|
||||
vertical-align: middle;
|
||||
min-width: 120px;
|
||||
z-index: 1;
|
||||
}
|
||||
#oe_snippets .nav > li {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
#oe_snippets .nav > li.active {
|
||||
background: black !important;
|
||||
}
|
||||
#oe_snippets .nav > li > a {
|
||||
padding: 2px 10px !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
#oe_snippets .pill-content {
|
||||
border: 0;
|
||||
}
|
||||
#oe_snippets .tab-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
background: black;
|
||||
}
|
||||
#oe_snippets .tab-content > div {
|
||||
background: black;
|
||||
}
|
||||
#oe_snippets .tab-content > div label {
|
||||
width: 44px;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#oe_snippets .tab-content > div label div {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
-webkit-transform: translate(-39px, 44px);
|
||||
-moz-transform: translate(-39px, 44px);
|
||||
-ms-transform: translate(-39px, 44px);
|
||||
-o-transform: translate(-39px, 44px);
|
||||
transform: translate(-39px, 44px);
|
||||
-webkit-transform-origin: 50% 50% 50%;
|
||||
-moz-transform-origin: 50% 50% 50%;
|
||||
-ms-transform-origin: 50% 50% 50%;
|
||||
-o-transform-origin: 50% 50% 50%;
|
||||
transform-origin: 50% 50% 50%;
|
||||
}
|
||||
|
||||
.oe_snippet {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 93px;
|
||||
margin-left: 1px;
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
pointer-events: none;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail {
|
||||
pointer-events: auto;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
|
||||
-webkit-transform: scale(0.95, 0.95);
|
||||
-moz-transform: scale(0.95, 0.95);
|
||||
-ms-transform: scale(0.95, 0.95);
|
||||
-o-transform: scale(0.95, 0.95);
|
||||
transform: scale(0.95, 0.95);
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
text-shadow: 0 0 2px black;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
|
||||
height: 74px;
|
||||
-webkit-transition: all 150ms linear;
|
||||
-moz-transition: all 150ms linear;
|
||||
-o-transition: all 150ms linear;
|
||||
transition: all 150ms linear;
|
||||
-webkit-box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
-moz-box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
|
||||
line-height: 18px;
|
||||
}
|
||||
.oe_snippet > :not(.oe_snippet_thumbnail) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#oe_snippets .oe_snippet_thumbnail {
|
||||
background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4)));
|
||||
background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
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;
|
||||
-webkit-transition: margin 250ms linear;
|
||||
-moz-transition: margin 250ms linear;
|
||||
-o-transition: margin 250ms linear;
|
||||
transition: margin 250ms linear;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:not(.oe_vertical):before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: dashed 2px rgba(209, 178, 255, 0.72);
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_hover:before {
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72);
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_vertical {
|
||||
width: 48px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0px -24px !important;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_overlay {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: rgba(153, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.oe_drop_zone, .oe_drop_zone_style {
|
||||
border: none;
|
||||
background: rgba(153, 0, 255, 0.3);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
|
||||
background: rgba(0, 255, 133, 0.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;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: opacity 100ms linear;
|
||||
-moz-transition: opacity 100ms linear;
|
||||
-o-transition: opacity 100ms linear;
|
||||
transition: opacity 100ms linear;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
.oe_overlay.oe_active {
|
||||
display: block;
|
||||
border-style: dashed;
|
||||
border-width: 1px;
|
||||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.oe_overlay .oe_handle {
|
||||
display: block !important;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: -2px;
|
||||
}
|
||||
.oe_overlay .oe_handle:before {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
background: white;
|
||||
border: solid 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
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, 0.5);
|
||||
-webkit-transition: background 100ms linear;
|
||||
-moz-transition: background 100ms linear;
|
||||
-o-transition: background 100ms linear;
|
||||
transition: background 100ms linear;
|
||||
}
|
||||
.oe_overlay .oe_handle:hover:before {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
-webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
-moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.oe_overlay .oe_handle.e {
|
||||
left: auto;
|
||||
top: 2px;
|
||||
height: 100%;
|
||||
right: -4px;
|
||||
cursor: w-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.e:before {
|
||||
content: "\F061";
|
||||
}
|
||||
.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.size {
|
||||
top: auto;
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
bottom: -4px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.size:before {
|
||||
content: "\F063";
|
||||
}
|
||||
.oe_overlay .oe_handle.size {
|
||||
border-style: dashed;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.oe_overlay .oe_handle.size:before {
|
||||
content: "Resize";
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.oe_overlay .oe_handle.w {
|
||||
top: 2px;
|
||||
height: 100%;
|
||||
left: -4px;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.w:before {
|
||||
content: "\F060";
|
||||
}
|
||||
.oe_overlay .oe_handle.n {
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
top: -4px;
|
||||
cursor: s-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.n:before {
|
||||
content: "\F062";
|
||||
}
|
||||
.oe_overlay .icon.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: -11px;
|
||||
z-index: 1002;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown-menu {
|
||||
text-align: left;
|
||||
min-width: 180px;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oe_handle {
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ---- MOBILE PREVIEW ---- {{{ */
|
||||
.oe_mobile_preview.modal .modal-content {
|
||||
height: 660px;
|
||||
|
||||
@@ -216,281 +216,6 @@ ul.oe_menu_editor
|
||||
|
||||
// }}}
|
||||
|
||||
/* ---- SNIPPET EDITOR ---- {{{ */
|
||||
|
||||
#oe_snippets
|
||||
position: fixed
|
||||
left: 0px
|
||||
right: 0px
|
||||
// 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
|
||||
pointer-events: none
|
||||
.oe_snippet_thumbnail
|
||||
pointer-events: auto
|
||||
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
|
||||
position: absolute
|
||||
background: transparent
|
||||
//@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)
|
||||
pointer-events: none
|
||||
&.oe_active
|
||||
display: block
|
||||
border-style: dashed
|
||||
border-width: 1px
|
||||
+box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
|
||||
border-color: rgba(0, 0, 0, 0.5)
|
||||
.oe_handle
|
||||
display: block !important
|
||||
pointer-events: auto
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
+box-sizing(border-box)
|
||||
width: 12px
|
||||
height: 12px
|
||||
margin: -2px
|
||||
&:before
|
||||
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)
|
||||
&:hover:before
|
||||
background: rgba(0, 0, 0, .5)
|
||||
color: #fff
|
||||
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
|
||||
.oe_handle.e
|
||||
left: auto
|
||||
top: 2px
|
||||
height: 100%
|
||||
right: -4px
|
||||
cursor: w-resize
|
||||
&:before
|
||||
content: "\F061"
|
||||
.oe_handle.s, .oe_handle.size
|
||||
top: auto
|
||||
left: 2px
|
||||
width: 100%
|
||||
bottom: -4px
|
||||
cursor: n-resize
|
||||
&:before
|
||||
content: "\F063"
|
||||
.oe_handle.size
|
||||
border-style: dashed
|
||||
border-width: 0 0 1px 0
|
||||
border-color: rgba(0, 0, 0, 0.5)
|
||||
&:before
|
||||
content: "Resize"
|
||||
width: 64px
|
||||
text-align: center
|
||||
margin-left: -32px
|
||||
margin-top: -4px
|
||||
.oe_handle.w
|
||||
top: 2px
|
||||
height: 100%
|
||||
left: -4px
|
||||
cursor: e-resize
|
||||
&:before
|
||||
content: "\F060"
|
||||
.oe_handle.n
|
||||
left: 2px
|
||||
width: 100%
|
||||
top: -4px
|
||||
cursor: s-resize
|
||||
&:before
|
||||
content: "\F062"
|
||||
|
||||
.icon.btn
|
||||
display: inline-block
|
||||
|
||||
.oe_overlay_options
|
||||
position: absolute
|
||||
width: 100%
|
||||
text-align: center
|
||||
top: -11px
|
||||
z-index: 1002
|
||||
.btn, a
|
||||
pointer-events: auto
|
||||
cursor: pointer
|
||||
.dropdown
|
||||
display: inline-block
|
||||
.dropdown-menu
|
||||
text-align: left
|
||||
min-width: 180px
|
||||
.dropdown-menu select,.dropdown-menu input
|
||||
display: block
|
||||
|
||||
.oe_handle
|
||||
pointer-events: auto
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
display: block
|
||||
+box-sizing(border-box)
|
||||
width: 8px
|
||||
height: 8px
|
||||
margin: -4px
|
||||
|
||||
.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
|
||||
|
||||
// }}}
|
||||
|
||||
/* ---- MOBILE PREVIEW ---- {{{ */
|
||||
|
||||
$mobile_preview_background: #000000
|
||||
|
||||
@@ -1,220 +1,588 @@
|
||||
/* ---- SNIPPET EDITOR ---- {{{ */
|
||||
#oe_snippets {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background: #282828;
|
||||
-webkit-box-shadow: 0px 10px 10px -10px black inset;
|
||||
-moz-box-shadow: 0px 10px 10px -10px black inset;
|
||||
box-shadow: 0px 10px 10px -10px black inset;
|
||||
z-index: 1010;
|
||||
overflow: hidden;
|
||||
}
|
||||
#oe_snippets:hover {
|
||||
height: auto;
|
||||
}
|
||||
#oe_snippets .scroll {
|
||||
white-space: nowrap;
|
||||
overflow-y: none;
|
||||
}
|
||||
#oe_snippets .nav {
|
||||
display: inline-block;
|
||||
border-bottom: none !important;
|
||||
vertical-align: middle;
|
||||
min-width: 120px;
|
||||
z-index: 1;
|
||||
}
|
||||
#oe_snippets .nav > li {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
#oe_snippets .nav > li.active {
|
||||
background: black !important;
|
||||
}
|
||||
#oe_snippets .nav > li > a {
|
||||
padding: 2px 10px !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
#oe_snippets .pill-content {
|
||||
border: 0;
|
||||
}
|
||||
#oe_snippets .tab-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
background: black;
|
||||
}
|
||||
#oe_snippets .tab-content > div {
|
||||
background: black;
|
||||
}
|
||||
#oe_snippets .tab-content > div label {
|
||||
width: 44px;
|
||||
color: white;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#oe_snippets .tab-content > div label div {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
-webkit-transform: translate(-39px, 44px);
|
||||
-moz-transform: translate(-39px, 44px);
|
||||
-ms-transform: translate(-39px, 44px);
|
||||
-o-transform: translate(-39px, 44px);
|
||||
transform: translate(-39px, 44px);
|
||||
-webkit-transform-origin: 50% 50% 50%;
|
||||
-moz-transform-origin: 50% 50% 50%;
|
||||
-ms-transform-origin: 50% 50% 50%;
|
||||
-o-transform-origin: 50% 50% 50%;
|
||||
transform-origin: 50% 50% 50%;
|
||||
}
|
||||
|
||||
.oe_snippet {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
width: 93px;
|
||||
margin-left: 1px;
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
pointer-events: none;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail {
|
||||
pointer-events: auto;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
|
||||
-webkit-transform: scale(0.95, 0.95);
|
||||
-moz-transform: scale(0.95, 0.95);
|
||||
-ms-transform: scale(0.95, 0.95);
|
||||
-o-transform: scale(0.95, 0.95);
|
||||
transform: scale(0.95, 0.95);
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
text-shadow: 0 0 2px black;
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
|
||||
height: 74px;
|
||||
-webkit-transition: all 150ms linear;
|
||||
-moz-transition: all 150ms linear;
|
||||
-o-transition: all 150ms linear;
|
||||
transition: all 150ms linear;
|
||||
-webkit-box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
-moz-box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
box-shadow: inset 0px 0px 0px 3px #333333;
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
|
||||
line-height: 18px;
|
||||
}
|
||||
.oe_snippet > :not(.oe_snippet_thumbnail) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#oe_snippets .oe_snippet_thumbnail {
|
||||
background: #747474, -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, rgba(0, 0, 0, 0.25)), color-stop(100%, rgba(0, 0, 0, 0.4)));
|
||||
background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
background: #747474, -o-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
|
||||
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;
|
||||
-webkit-transition: margin 250ms linear;
|
||||
-moz-transition: margin 250ms linear;
|
||||
-o-transition: margin 250ms linear;
|
||||
transition: margin 250ms linear;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.oe_drop_zone.oe_insert:not(.oe_vertical):before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: dashed 2px rgba(209, 178, 255, 0.72);
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_hover:before {
|
||||
border-top: dashed 2px rgba(116, 255, 161, 0.72);
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_vertical {
|
||||
width: 48px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0px -24px !important;
|
||||
}
|
||||
.oe_drop_zone.oe_insert.oe_overlay {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: rgba(153, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.oe_drop_zone, .oe_drop_zone_style {
|
||||
border: none;
|
||||
background: rgba(153, 0, 255, 0.3);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
|
||||
background: rgba(0, 255, 133, 0.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;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: opacity 100ms linear;
|
||||
-moz-transition: opacity 100ms linear;
|
||||
-o-transition: opacity 100ms linear;
|
||||
transition: opacity 100ms linear;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
.oe_overlay.oe_active {
|
||||
display: block;
|
||||
border-style: dashed;
|
||||
border-width: 1px;
|
||||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.oe_overlay .oe_handle {
|
||||
display: block !important;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -2px;
|
||||
}
|
||||
.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
background: white;
|
||||
border: solid 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
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, 0.5);
|
||||
-webkit-transition: background 100ms linear;
|
||||
-moz-transition: background 100ms linear;
|
||||
-o-transition: background 100ms linear;
|
||||
transition: background 100ms linear;
|
||||
}
|
||||
.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
-webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
-moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.oe_overlay .oe_handle.e {
|
||||
left: auto;
|
||||
top: 2px;
|
||||
height: 100%;
|
||||
right: -6px;
|
||||
cursor: w-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.e:before {
|
||||
content: "\F061";
|
||||
}
|
||||
.oe_overlay .oe_handle.s {
|
||||
top: auto;
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
bottom: -6px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.s:before {
|
||||
z-index: 0;
|
||||
content: "\F063";
|
||||
}
|
||||
.oe_overlay .oe_handle.size {
|
||||
top: auto;
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
bottom: -6px;
|
||||
}
|
||||
.oe_overlay .oe_handle.size .oe_handle_button {
|
||||
z-index: 1;
|
||||
content: "Resize";
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
margin-top: -10px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.size .oe_handle_button:hover {
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
color: white;
|
||||
-webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
-moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
.oe_overlay .oe_handle.size div {
|
||||
border-style: dashed;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
.oe_overlay .oe_handle.w {
|
||||
top: 2px;
|
||||
height: 100%;
|
||||
left: -6px;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.w:before {
|
||||
content: "\F060";
|
||||
}
|
||||
.oe_overlay .oe_handle.n {
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
top: -6px;
|
||||
cursor: s-resize;
|
||||
}
|
||||
.oe_overlay .oe_handle.n:before {
|
||||
content: "\F062";
|
||||
}
|
||||
.oe_overlay .icon.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: -11px;
|
||||
z-index: 1002;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown-menu {
|
||||
text-align: left;
|
||||
min-width: 180px;
|
||||
}
|
||||
.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;}
|
||||
.dropdown-submenu:hover>.dropdown-menu{display:block;}
|
||||
.dropdown-submenu>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;}
|
||||
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
|
||||
.dropdown-submenu.pull-left{float:none;}
|
||||
.dropdown-submenu.pull-left>.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_demo .oe_page{
|
||||
margin-top: 50px;
|
||||
margin-bottom: 300px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
}
|
||||
.oe_snippet_demo .oe_page .oe_container{
|
||||
min-height: 200px;
|
||||
}
|
||||
.oe_snippet_demo .oe_page *{
|
||||
outline: 1px solid transparent;
|
||||
-webkit-transiton: all 150ms linear;
|
||||
}
|
||||
.oe_snippet_demo .oe_page .oe_selected{
|
||||
position: relative;
|
||||
outline: 2px dashed rgba(151, 137, 255,0.5) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.oe_snippet_demo .oe_page .oe_selected:after{
|
||||
content:'Insert Snippet Here';
|
||||
position: absolute;
|
||||
height:20px; left:-2px; right:-2px; bottom:-10px;
|
||||
background: rgba(151, 137, 255, 1);
|
||||
border-radius: 2px;
|
||||
z-index: 800;
|
||||
pointer-events :none;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.oe_snippet_demo.oe_new .oe_page .oe_selected:after{
|
||||
content:'';
|
||||
height:100%;
|
||||
top:0px; left:0px; right:0px; bottom:0px;
|
||||
background: rgba(151, 137, 255, 0.2);
|
||||
}
|
||||
*/
|
||||
|
||||
.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;
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.oe_snippet_list{
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
margin-left: 20px;
|
||||
.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;
|
||||
}
|
||||
.oe_snippet_editor .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;
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-submenu:hover > a:after {
|
||||
border-left-color: white;
|
||||
}
|
||||
.dropdown-submenu > 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;
|
||||
}
|
||||
.dropdown-submenu.pull-left {
|
||||
float: none;
|
||||
}
|
||||
.dropdown-submenu.pull-left > .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 .oe_snippet: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_snippet_editor {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 214px;
|
||||
background: #a0a0a0;
|
||||
box-shadow: 0 1px 3px #646464 inset;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active{
|
||||
border: 2px solid rgb(151, 137, 255);
|
||||
box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
|
||||
|
||||
.oe_snippet_editor .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 #646464;
|
||||
position: relative;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
user-select: none;
|
||||
white-space: normal;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet > *{
|
||||
pointer-events: none;
|
||||
margin-top: 16px;
|
||||
line-height: 1em;
|
||||
zoom: 0.6;
|
||||
.oe_snippet_editor .oe_snippet: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_snippet_editor .oe_snippet > .container{
|
||||
margin-top: 15px;
|
||||
zoom: 0.17;
|
||||
line-height: 0.999em;
|
||||
line-height: 1em;
|
||||
.oe_snippet_editor .oe_snippet.oe_selected, .oe_snippet_editor .oe_snippet.oe_active {
|
||||
border: 2px solid #9789ff;
|
||||
box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet > .row{
|
||||
margin-top: 0px;
|
||||
zoom: 0.23;
|
||||
line-height: 0.999em;
|
||||
.oe_snippet_editor .oe_snippet > * {
|
||||
pointer-events: none;
|
||||
margin-top: 16px;
|
||||
line-height: 1em;
|
||||
zoom: 0.6;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet > .span6{
|
||||
margin-top: 18px;
|
||||
zoom: 0.34;
|
||||
.oe_snippet_editor .oe_snippet > .container {
|
||||
margin-top: 15px;
|
||||
zoom: 0.17;
|
||||
line-height: 0.999em;
|
||||
line-height: 1em;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet > .span12{
|
||||
margin-top: 16px;
|
||||
zoom: 0.23;
|
||||
.oe_snippet_editor .oe_snippet > .row {
|
||||
margin-top: 0px;
|
||||
zoom: 0.23;
|
||||
line-height: 0.999em;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet > p{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
padding: 16px;
|
||||
zoom: 1;
|
||||
margin: 0px;
|
||||
.oe_snippet_editor .oe_snippet > .span6 {
|
||||
margin-top: 18px;
|
||||
zoom: 0.34;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new{
|
||||
background: gray;
|
||||
box-shadow: 0px 1px 3px rgb(90,90,90) inset;
|
||||
border: 0px;
|
||||
.oe_snippet_editor .oe_snippet > .span12 {
|
||||
margin-top: 16px;
|
||||
zoom: 0.23;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active{
|
||||
box-shadow: 0px 2px 0px 0px rgb(151,137,255) inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
|
||||
.oe_snippet_editor .oe_snippet > p {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 20px;
|
||||
padding: 16px;
|
||||
zoom: 1;
|
||||
margin: 0px;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new > *{
|
||||
zoom:1;
|
||||
margin: 0;
|
||||
line-height: 160px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 48px;
|
||||
.oe_snippet_editor .oe_snippet.oe_new {
|
||||
background: gray;
|
||||
box-shadow: 0px 1px 3px #5a5a5a inset;
|
||||
border: 0px;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new: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_editor .oe_snippet.oe_new.oe_selected, .oe_snippet_editor .oe_snippet.oe_new.oe_active {
|
||||
box-shadow: 0px 2px 0px 0px #9789ff inset, 0px 3px 17px rgba(99, 53, 150, 0.59) inset;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new > * {
|
||||
zoom: 1;
|
||||
margin: 0;
|
||||
line-height: 160px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 48px;
|
||||
}
|
||||
.oe_snippet_editor .oe_snippet.oe_new: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%;
|
||||
position: relative;
|
||||
border: 2px dashed #ae34ff;
|
||||
background: rgba(147, 52, 255, 0.1);
|
||||
min-height: 28px;
|
||||
margin: -16px auto;
|
||||
border-radius: 5px;
|
||||
max-width: 50%;
|
||||
}
|
||||
.oe_snippet_drop.oe_accepting {
|
||||
border: 2px dashed rgb(52, 255, 166);
|
||||
background: rgba(52, 255, 190, 0.1);
|
||||
border: 2px dashed #34ffa6;
|
||||
background: rgba(52, 255, 190, 0.1);
|
||||
}
|
||||
/*
|
||||
[class*="span"]{
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
*/
|
||||
|
||||
#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;
|
||||
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;
|
||||
}
|
||||
#website-top-edit li.oe_snippet_editorbar > * {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
padding: 4px 6px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
padding: 4px 6px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
#website-top-edit li.oe_snippet_editorbar a.button .icon {
|
||||
cursor: inherit;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
cursor: inherit;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-snippet-id] {
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,467 @@
|
||||
@import "compass/css3"
|
||||
@import "compass/css3/user-interface"
|
||||
@import "compass/css3/transition"
|
||||
|
||||
|
||||
/* ---- SNIPPET EDITOR ---- {{{ */
|
||||
|
||||
#oe_snippets
|
||||
position: fixed
|
||||
left: 0px
|
||||
right: 0px
|
||||
// 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
|
||||
pointer-events: none
|
||||
.oe_snippet_thumbnail
|
||||
pointer-events: auto
|
||||
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
|
||||
position: absolute
|
||||
background: transparent
|
||||
//@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)
|
||||
pointer-events: none
|
||||
&.oe_active
|
||||
display: block
|
||||
border-style: dashed
|
||||
border-width: 1px
|
||||
+box-shadow(0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset)
|
||||
border-color: rgba(0, 0, 0, 0.5)
|
||||
.oe_handle
|
||||
display: block !important
|
||||
pointer-events: auto
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
+box-sizing(border-box)
|
||||
width: 16px
|
||||
height: 16px
|
||||
margin: -2px
|
||||
&.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
|
||||
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
|
||||
left: auto
|
||||
top: 2px
|
||||
height: 100%
|
||||
right: -6px
|
||||
cursor: w-resize
|
||||
&:before
|
||||
content: "\F061"
|
||||
&.s
|
||||
top: auto
|
||||
left: 2px
|
||||
width: 100%
|
||||
bottom: -6px
|
||||
cursor: n-resize
|
||||
&:before
|
||||
z-index: 0
|
||||
content: "\F063"
|
||||
&.size
|
||||
top: auto
|
||||
left: 2px
|
||||
width: 100%
|
||||
bottom: -6px
|
||||
.oe_handle_button
|
||||
z-index: 1
|
||||
content: "Resize"
|
||||
width: 64px
|
||||
text-align: center
|
||||
margin-left: -32px
|
||||
margin-top: -10px
|
||||
cursor: row-resize
|
||||
&:hover
|
||||
background: rgba(30, 30, 30, .8)
|
||||
color: #fff
|
||||
+box-shadow(0 0 5px 3px rgba(255,255,255,.7))
|
||||
div
|
||||
border-style: dashed
|
||||
border-width: 0 0 1px 0
|
||||
border-color: rgba(0, 0, 0, 0.5)
|
||||
position: relative
|
||||
top: 8px
|
||||
&.w
|
||||
top: 2px
|
||||
height: 100%
|
||||
left: -6px
|
||||
cursor: e-resize
|
||||
&:before
|
||||
content: "\F060"
|
||||
&.n
|
||||
left: 2px
|
||||
width: 100%
|
||||
top: -6px
|
||||
cursor: s-resize
|
||||
&:before
|
||||
content: "\F062"
|
||||
|
||||
.icon.btn
|
||||
display: inline-block
|
||||
|
||||
.oe_overlay_options
|
||||
position: absolute
|
||||
width: 100%
|
||||
text-align: center
|
||||
top: -11px
|
||||
z-index: 1002
|
||||
.btn, a
|
||||
pointer-events: auto
|
||||
cursor: pointer
|
||||
.dropdown
|
||||
display: inline-block
|
||||
.dropdown-menu
|
||||
text-align: left
|
||||
min-width: 180px
|
||||
.dropdown-menu select,.dropdown-menu input
|
||||
display: block
|
||||
|
||||
.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)
|
||||
& > *
|
||||
pointer-events: none
|
||||
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
|
||||
|
||||
[data-snippet-id]
|
||||
min-height: 10px
|
||||
min-width: 10px
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@charset "utf-8";
|
||||
/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
|
||||
*
|
||||
* css for editor buttons, openerp widget included in the website and other
|
||||
@@ -324,6 +325,10 @@ ul.nav-stacked > li > a {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.quotecarousel {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Parallax Theme */
|
||||
div.carousel[data-snippet-id="slider"] .carousel-indicators li {
|
||||
border: 1px solid grey;
|
||||
|
||||
@@ -256,6 +256,8 @@ ul.nav-stacked > li > a
|
||||
&.right span
|
||||
right: 10px
|
||||
|
||||
.quotecarousel
|
||||
padding-bottom: 16px
|
||||
|
||||
/* Parallax Theme */
|
||||
|
||||
|
||||
@@ -183,11 +183,11 @@
|
||||
$el.css({
|
||||
'position': 'absolute',
|
||||
'width': $target.outerWidth(),
|
||||
'height': $target.outerHeight() + mt + mb,
|
||||
'height': $target.outerHeight() + mt + mb+1,
|
||||
'top': pos.top - mt,
|
||||
'left': pos.left
|
||||
});
|
||||
$el.find(".oe_handle.size").css("bottom", mb+'px');
|
||||
$el.find(".oe_handle.size").css("bottom", (mb-7)+'px');
|
||||
},
|
||||
show: function () {
|
||||
this.$el.removeClass("hidden");
|
||||
@@ -973,7 +973,7 @@
|
||||
|
||||
this.$overlay.append($box.find(".oe_handles").html());
|
||||
|
||||
this.$overlay.find(".oe_handle").on('mousedown', function (event){
|
||||
this.$overlay.find(".oe_handle:not(:has(.oe_handle_button)), .oe_handle .oe_handle_button").on('mousedown', function (event){
|
||||
event.preventDefault();
|
||||
|
||||
var $handle = $(this);
|
||||
@@ -1007,7 +1007,6 @@
|
||||
|
||||
|
||||
if (compass === 'size') {
|
||||
var grid = resize[0];
|
||||
var offset = self.$target.offset().top;
|
||||
if (self.$target.css("background").match(/rgba\(0, 0, 0, 0\)/)) {
|
||||
self.$target.addClass("resize_editor_busy");
|
||||
@@ -1035,10 +1034,10 @@
|
||||
event.preventDefault();
|
||||
if (compass === 'size') {
|
||||
var dy = event.pageY-offset;
|
||||
dy = dy - dy%resize[0];
|
||||
if (dy <= 0) dy = resize[0];
|
||||
dy = dy - dy%resize;
|
||||
if (dy <= 0) dy = resize;
|
||||
self.$target.css("height", dy+"px");
|
||||
self.on_resize(compass, beginClass, current);
|
||||
self.on_resize(compass, null, dy);
|
||||
self.parent.cover_target(self.$overlay, self.$target);
|
||||
return;
|
||||
}
|
||||
@@ -1083,7 +1082,8 @@
|
||||
// list of class (Array), grid (Array), default value (INT)
|
||||
n: [_.map(grid, function (v) {return 'mt'+v;}), grid],
|
||||
s: [_.map(grid, function (v) {return 'mb'+v;}), grid],
|
||||
size: [8]
|
||||
// INT if the user can resize the snippet (resizing per INT px)
|
||||
size: null
|
||||
};
|
||||
return this.grid;
|
||||
},
|
||||
@@ -1295,6 +1295,11 @@
|
||||
});
|
||||
|
||||
website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.slider.extend({
|
||||
getSize: function () {
|
||||
this.grid = this._super();
|
||||
this.grid.size = 8;
|
||||
return this.grid;
|
||||
},
|
||||
clean_for_save: function () {
|
||||
this._super();
|
||||
this.$target.css("background-image", "");
|
||||
@@ -1363,6 +1368,14 @@
|
||||
});
|
||||
|
||||
website.snippet.editorRegistry.parallax = website.snippet.editorRegistry.resize.extend({
|
||||
getSize: function () {
|
||||
this.grid = this._super();
|
||||
this.grid.size = 8;
|
||||
return this.grid;
|
||||
},
|
||||
on_resize: function (compass, beginClass, current) {
|
||||
this.$target.data("snippet-view").set_values();
|
||||
},
|
||||
start : function () {
|
||||
var self = this;
|
||||
this._super();
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class='oe_handle n'></div>
|
||||
<div class='oe_handle e'></div>
|
||||
<div class='oe_handle w'></div>
|
||||
<div class='oe_handle size'></div>
|
||||
<div class='oe_handle size'><div class="oe_handle_button size">Resize</div><div class="oe_border"/></div>
|
||||
<div class='oe_handle s'></div>
|
||||
</div>
|
||||
<div class='oe_snippet_thumbnail'>Margin resize</div>
|
||||
|
||||
@@ -277,7 +277,7 @@
|
||||
<img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
|
||||
<span class="oe_snippet_thumbnail_title">Quotes Slider</span>
|
||||
</div>
|
||||
<div id="myQuoteCarousel" class="oe_snippet_body carousel slide mb0" style="height: 240px;">
|
||||
<div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators mb0">
|
||||
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
|
||||
@@ -825,7 +825,7 @@
|
||||
data-scroll-background-ratio="0.3">
|
||||
<div>
|
||||
<div class="oe_structure">
|
||||
<div id="myQuoteCarousel" class="carousel slide mb0" style="height: 240px;" data-snippet-id="slider">
|
||||
<div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-snippet-id="slider">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators mb0">
|
||||
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
|
||||
|
||||
Reference in New Issue
Block a user