mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
62 changed files with 1914 additions and 1185 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,60 @@ |
|||
export default { |
|||
|
|||
/** |
|||
* To trigger the style change event on models I have to |
|||
* pass a new object instance |
|||
* @param {Object} prop |
|||
* @return {Object} |
|||
*/ |
|||
extendStyle(prop) { |
|||
return Object.assign({}, this.getStyle(), prop); |
|||
}, |
|||
|
|||
/** |
|||
* Get style object |
|||
* @return {Object} |
|||
*/ |
|||
getStyle() { |
|||
return this.get('style'); |
|||
}, |
|||
|
|||
/** |
|||
* Set new style object |
|||
* @param {Object} prop |
|||
* @param {Object} opts |
|||
*/ |
|||
setStyle(prop = {}, opts = {}) { |
|||
this.set('style', Object.assign({}, prop), opts); |
|||
}, |
|||
|
|||
/** |
|||
* Add style property |
|||
* @param {Object|string} prop |
|||
* @param {string} value |
|||
* @example |
|||
* this.addStyle({color: 'red'}); |
|||
* this.addStyle('color', 'blue'); |
|||
*/ |
|||
addStyle(prop, value = '', opts = {}) { |
|||
if (typeof prop == 'string') { |
|||
prop = { |
|||
prop: value |
|||
}; |
|||
} else { |
|||
opts = value || {}; |
|||
} |
|||
|
|||
prop = this.extendStyle(prop); |
|||
this.setStyle(prop, opts); |
|||
}, |
|||
|
|||
/** |
|||
* Remove style property |
|||
* @param {string} prop |
|||
*/ |
|||
removeStyle(prop) { |
|||
let style = Object.assign({}, this.getStyle()); |
|||
delete style[prop]; |
|||
this.setStyle(style); |
|||
} |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
.#{$app-prefix}dropzone { |
|||
display: none; |
|||
opacity: 0; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 5; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: opacity 0.25s; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.#{$app-prefix}dropzone-active { |
|||
.#{$app-prefix}dropzone { |
|||
display: block; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
.#{$am-prefix}assets { |
|||
height: 290px; |
|||
overflow: auto; |
|||
clear: both; |
|||
} |
|||
|
|||
.#{$am-prefix}assets-header { |
|||
padding: 5px; |
|||
} |
|||
|
|||
.#{$am-prefix}add-asset { |
|||
.#{$am-prefix}add-field { |
|||
width: 70%; |
|||
float: left; |
|||
} |
|||
button{ |
|||
width: 25%; |
|||
float: right; |
|||
} |
|||
} |
|||
|
|||
.#{$am-prefix}add-field input { |
|||
padding: 6px; |
|||
} |
|||
|
|||
.#{$am-prefix}assets-cont { |
|||
background-color: $mainDklColor; |
|||
border-radius: 3px; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
width: 45%; |
|||
float:right; |
|||
height: 325px; |
|||
overflow: hidden; |
|||
|
|||
##{$am-prefix}preview-cont{ |
|||
position: relative; |
|||
height: 70px; width: 30%; |
|||
background-color: $mainColor; |
|||
border-radius: 2px; |
|||
float: left; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
##{$am-prefix}preview{ |
|||
position: absolute; |
|||
background-position: center center; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
height: 100%; |
|||
width: 100%; |
|||
z-index: 1; |
|||
} |
|||
|
|||
##{$am-prefix}preview-bg{ |
|||
position: absolute; |
|||
height: 100%; |
|||
width: 100%; |
|||
@include opacity(0.5); |
|||
z-index: 0; |
|||
} |
|||
|
|||
.#{$am-prefix}highlight { |
|||
background-color: $mainLhColor; |
|||
} |
|||
|
|||
.#{$am-prefix}asset { |
|||
border-bottom: 1px solid darken($mainDkColor, 3%); |
|||
padding: 5px; |
|||
cursor:pointer; |
|||
position: relative; |
|||
|
|||
&:hover ##{$am-prefix}close { display: block;} |
|||
|
|||
} |
|||
##{$am-prefix}close { |
|||
@extend .btn-cl; |
|||
position: absolute; |
|||
right: 5px; |
|||
top: 0; |
|||
display: none; |
|||
} |
|||
|
|||
##{$am-prefix}meta { |
|||
width: 70%; |
|||
float: left; |
|||
font-size: 12px; |
|||
padding: 5px 0 0 5px; |
|||
box-sizing: border-box; |
|||
|
|||
> div { margin-bottom: 5px;} |
|||
##{$am-prefix}dimensions { |
|||
font-size: 10px; |
|||
@include opacity(0.5); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,454 @@ |
|||
|
|||
.#{$sm-prefix} { |
|||
&clear { |
|||
font-size: 1rem; |
|||
line-height: 0; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}close-btn { |
|||
display: block; |
|||
font-size: 23px; |
|||
position: absolute; |
|||
cursor: pointer; |
|||
right: 5px; |
|||
top: 0; |
|||
|
|||
@include opacity(0.2); |
|||
|
|||
&:hover { |
|||
@include opacity(0.7); |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}header { |
|||
font-size: 11px; |
|||
font-weight: lighter; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.#{$sm-prefix}sector { |
|||
clear: both; |
|||
font-weight: lighter; |
|||
text-align: left; |
|||
|
|||
##{$sm-prefix}caret { |
|||
padding-right: 5px; |
|||
font-size: 11px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}open { |
|||
@extend .#{$app-prefix}category-open; |
|||
} |
|||
|
|||
.#{$sm-prefix}title { |
|||
@extend .#{$app-prefix}category-title; |
|||
} |
|||
|
|||
.#{$sm-prefix}label { |
|||
margin: 5px 5px 2px 0; |
|||
} |
|||
|
|||
/* ------------------Field-------------------- */ |
|||
|
|||
.#{$sm-prefix}field { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
input, |
|||
select { |
|||
background-color: transparent; |
|||
color: $mainLhlColor; |
|||
border: none; |
|||
width: 100%; |
|||
} |
|||
|
|||
input { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
select { |
|||
position: relative; |
|||
z-index: 1; |
|||
|
|||
@include appearance(none); |
|||
|
|||
&::-ms-expand { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
select:-moz-focusring { |
|||
color: transparent; |
|||
text-shadow: 0 0 0 $mainLhlColor; |
|||
} |
|||
|
|||
input:focus, |
|||
select:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.#{$sm-prefix}unit { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 3px; |
|||
font-size: 10px; |
|||
color: $mainLhlColor; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$clm-prefix}sel-arrow, |
|||
.#{$sm-prefix}int-arrows, |
|||
.#{$sm-prefix}sel-arrow { |
|||
height: 100%; |
|||
width: 9px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
cursor: ns-resize; |
|||
} |
|||
|
|||
.#{$sm-prefix}sel-arrow { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$clm-prefix}d-s-arrow, |
|||
.#{$sm-prefix}d-arrow, |
|||
.#{$sm-prefix}d-s-arrow, |
|||
.#{$sm-prefix}u-arrow { |
|||
position: absolute; |
|||
height: 0; |
|||
width: 0; |
|||
border-left: 3px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$sm-prefix}u-arrow { |
|||
border-bottom: 4px solid $mainLhlColor; |
|||
top: 4px; |
|||
} |
|||
|
|||
.#{$clm-prefix}d-s-arrow, |
|||
.#{$sm-prefix}d-arrow, |
|||
.#{$sm-prefix}d-s-arrow { |
|||
border-top: 4px solid $mainLhlColor; |
|||
bottom: 4px; |
|||
} |
|||
|
|||
.#{$clm-prefix}d-s-arrow, |
|||
.#{$sm-prefix}d-s-arrow { |
|||
bottom: 7px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}color, |
|||
&.#{$sm-prefix}input, |
|||
&.#{$sm-prefix}integer, |
|||
&.#{$sm-prefix}list, |
|||
&.#{$sm-prefix}select { |
|||
background-color: $mainDkColor; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
box-shadow: 1px 1px 0 $mainLhColor; |
|||
color: $mainLhlColor; |
|||
border-radius: 2px; |
|||
box-sizing: border-box; |
|||
padding: 0 5px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}composite { |
|||
@extend .#{$app-prefix}color-main; |
|||
|
|||
border-radius: 2px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}select { |
|||
padding: 0; |
|||
} |
|||
|
|||
&.#{$sm-prefix}select select { |
|||
height: 20px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}select option { |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
&.#{$sm-prefix}composite { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
border: 1px solid rgba(0, 0, 0, 0.25); |
|||
} |
|||
|
|||
&.#{$sm-prefix}list { |
|||
width: auto; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
float: left; |
|||
|
|||
input { |
|||
display: none; |
|||
} |
|||
|
|||
label { |
|||
cursor: pointer; |
|||
padding: 5px; |
|||
display: block; |
|||
} |
|||
|
|||
.#{$sm-prefix}radio:checked + label { |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
.#{$sm-prefix}icon { |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
text-shadow: none; |
|||
line-height: normal; |
|||
//padding: 5px 19px; |
|||
} |
|||
} |
|||
|
|||
&.#{$sm-prefix}integer select { |
|||
width: auto; |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
/* ------------------END Field-------------------- */ |
|||
|
|||
.#{$sm-prefix}list .#{$sm-prefix}el { |
|||
float: left; |
|||
border-left: 1px solid $mainDkColor; |
|||
|
|||
&:first-child { |
|||
border: none; |
|||
} |
|||
|
|||
&:hover { |
|||
background: $mainDkColor; |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}properties { |
|||
font-size: 11px; |
|||
padding: 10px 5px; |
|||
} |
|||
|
|||
/* ------------------Property-------------------- */ |
|||
|
|||
.#{$sm-prefix}property { |
|||
box-sizing: border-box; |
|||
float: left; |
|||
width: 50%; |
|||
margin-bottom: 5px; |
|||
padding: 0 5px; |
|||
|
|||
&.#{$sm-prefix}composite, |
|||
&.#{$sm-prefix}file, |
|||
&.#{$sm-prefix}list, |
|||
&.#{$sm-prefix}stack { |
|||
width: 100%; |
|||
} |
|||
|
|||
.#{$sm-prefix}btn { |
|||
background-color: lighten($mainDkColor, 13%); |
|||
border-radius: 2px; |
|||
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset; |
|||
padding: 5px; |
|||
position: relative; |
|||
text-align: center; |
|||
height: auto; |
|||
width: 100%; |
|||
cursor: pointer; |
|||
color: $fontColor; |
|||
box-sizing: border-box; |
|||
text-shadow: -1px -1px 0 $mainDkColor; |
|||
border: none; |
|||
|
|||
@include opacity(0.85); |
|||
} |
|||
|
|||
.#{$sm-prefix}btn-c { |
|||
box-sizing: border-box; |
|||
float: left; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}file ##{$sm-prefix}preview-box { |
|||
background-color: $lightBorder; |
|||
border-radius: 2px; |
|||
margin-top: 5px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
&.#{$sm-prefix}show { |
|||
border: 1px solid darken($lightBorder, 1%); |
|||
padding: 3px 5px; |
|||
} |
|||
|
|||
##{$sm-prefix}close { |
|||
@extend .#{$sm-prefix}close-btn; |
|||
|
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file { |
|||
height: 50px; |
|||
} |
|||
|
|||
&.#{$sm-prefix}file ##{$sm-prefix}preview-file { |
|||
background-size: auto 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.#{$sm-prefix}layers { |
|||
margin-top: 5px; |
|||
min-height: 30px; |
|||
} |
|||
|
|||
.#{$sm-prefix}layer { |
|||
background-color: rgba(255, 255, 255, 0.055); |
|||
border-radius: 2px; |
|||
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset; |
|||
margin: 2px; |
|||
padding: 7px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
|
|||
> ##{$sm-prefix}preview-box { |
|||
@extend .checker-bg; |
|||
|
|||
height: 15px; |
|||
position: absolute; |
|||
right: 27px; |
|||
top: 6px; |
|||
width: 15px; |
|||
} |
|||
|
|||
##{$sm-prefix}preview, |
|||
##{$sm-prefix}preview-box { |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
##{$sm-prefix}close-layer { |
|||
display: block; |
|||
font-size: 23px; |
|||
position: absolute; |
|||
cursor: pointer; |
|||
right: 5px; |
|||
top: 0; |
|||
|
|||
@include opacity(0.5); |
|||
|
|||
&:hover { |
|||
@include opacity(0.8); |
|||
} |
|||
} |
|||
|
|||
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview { |
|||
background-color: white; |
|||
height: 100%; |
|||
width: 100%; |
|||
background-size: cover !important; |
|||
} |
|||
|
|||
&.#{$sm-prefix}active { |
|||
background-color: rgba(255, 255, 255, 0.12); |
|||
} |
|||
|
|||
&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after { |
|||
color: #000; |
|||
content: "T"; |
|||
font-weight: 900; |
|||
line-height: 17px; |
|||
padding: 0 4px; |
|||
} |
|||
|
|||
/* ------------------END Property-------------------- */ |
|||
|
|||
.#{$sm-prefix}stack .#{$sm-prefix}properties { |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.#{$sm-prefix}stack ##{$sm-prefix}add { |
|||
@extend .#{$app-prefix}color-main; |
|||
|
|||
background: none; |
|||
border: none; |
|||
cursor: pointer; |
|||
font-size: 22px; |
|||
line-height: 10px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: -20px; |
|||
opacity: 0.75; |
|||
|
|||
&:hover { |
|||
@include opacity(1); |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}colorp-c { |
|||
@extend .#{$app-prefix}bg-main; |
|||
|
|||
height: 100%; |
|||
width: 20px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
box-sizing: border-box; |
|||
border-radius: 2px; |
|||
padding: 2px; |
|||
|
|||
.#{$app-prefix}checker-bg { |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 1px; |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}color-picker { |
|||
background-color: $fontColor; |
|||
cursor: pointer; |
|||
height: 16px; |
|||
width: 100%; |
|||
margin-top: -16px; |
|||
box-shadow: 0 0 1px $mainDkColor; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload { |
|||
left: 0; |
|||
top: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { |
|||
padding: 2px 0; |
|||
} |
|||
} |
|||
|
|||
.#{$sm-prefix}layer > ##{$sm-prefix}move { |
|||
@include opacity(0.7); |
|||
|
|||
cursor: move; |
|||
font-size: 12px; |
|||
float: left; |
|||
margin: 0 5px 0 0; |
|||
|
|||
&:hover { |
|||
@include opacity(0.9); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue