tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update file style

up-style-manager
Artur Arseniev 5 years ago
parent
bdad988d69
commit
326397c467
3 changed files with 325 additions and 329 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 4
      src/style_manager/view/PropertyFileView.js
  3. 648
      src/styles/scss/_gjs_style_manager.scss

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

4
src/style_manager/view/PropertyFileView.js
View File

@ -18,8 +18,8 @@ export default PropertyView.extend({
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
</div> </div>
<div id="${pfx}preview-box" class="${pfx}preview-file-box"> <div id="${pfx}preview-box" class="${pfx}preview-file">
<div id="${pfx}preview-file" class="${pfx}preview-file"></div> <div id="${pfx}preview-file" class="${pfx}preview-file-cnt"></div>
<div id="${pfx}close" class="${pfx}preview-file-close">&Cross;</div> <div id="${pfx}close" class="${pfx}preview-file-close">&Cross;</div>
</div> </div>
</div> </div>

648
src/styles/scss/_gjs_style_manager.scss
View File

@ -74,413 +74,409 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
}
/* ------------------Field-------------------- */
/* ------------------Field-------------------- */ .#{$sm-prefix}field {
width: 100%;
position: relative;
.#{$sm-prefix}field { input,
select {
background-color: transparent;
color: $mainLhlColor;
border: none;
width: 100%; width: 100%;
}
input {
box-sizing: border-box;
}
select {
position: relative; position: relative;
z-index: 1;
input, @include appearance(none);
select {
background-color: transparent;
color: $mainLhlColor;
border: none;
width: 100%;
}
input { &::-ms-expand {
box-sizing: border-box; display: none;
} }
}
select { select:-moz-focusring {
position: relative; color: transparent;
z-index: 1; text-shadow: 0 0 0 $mainLhlColor;
}
@include appearance(none); input:focus,
select:focus {
outline: none;
}
&::-ms-expand { .#{$sm-prefix}unit {
display: none; position: absolute;
} right: 10px;
} top: 3px;
font-size: 10px;
color: $mainLhlColor;
cursor: pointer;
}
select:-moz-focusring { .#{$clm-prefix}sel-arrow,
color: transparent; .#{$sm-prefix}int-arrows,
text-shadow: 0 0 0 $mainLhlColor; .#{$sm-prefix}sel-arrow {
} height: 100%;
width: 9px;
position: absolute;
right: 0;
top: 0;
cursor: ns-resize;
}
input:focus, .#{$sm-prefix}sel-arrow {
select:focus { cursor: pointer;
outline: none; }
}
.#{$sm-prefix}unit { .#{$clm-prefix}d-s-arrow,
position: absolute; .#{$sm-prefix}d-arrow,
right: 10px; .#{$sm-prefix}d-s-arrow,
top: 3px; .#{$sm-prefix}u-arrow {
font-size: 10px; position: absolute;
color: $mainLhlColor; height: 0;
cursor: pointer; width: 0;
} border-left: 3px solid transparent;
border-right: 4px solid transparent;
cursor: pointer;
}
.#{$clm-prefix}sel-arrow, .#{$sm-prefix}u-arrow {
.#{$sm-prefix}int-arrows, border-bottom: 4px solid $mainLhlColor;
.#{$sm-prefix}sel-arrow { top: 4px;
height: 100%; }
width: 9px;
position: absolute;
right: 0;
top: 0;
cursor: ns-resize;
}
.#{$sm-prefix}sel-arrow { .#{$clm-prefix}d-s-arrow,
cursor: pointer; .#{$sm-prefix}d-arrow,
} .#{$sm-prefix}d-s-arrow {
border-top: 4px solid $mainLhlColor;
bottom: 4px;
}
.#{$clm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow,
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow {
.#{$sm-prefix}d-s-arrow, bottom: 7px;
.#{$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 { &.#{$sm-prefix}color,
border-bottom: 4px solid $mainLhlColor; &.#{$sm-prefix}input,
top: 4px; &.#{$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;
}
.#{$clm-prefix}d-s-arrow, &.#{$sm-prefix}composite {
.#{$sm-prefix}d-arrow, border-radius: 2px;
.#{$sm-prefix}d-s-arrow { }
border-top: 4px solid $mainLhlColor;
bottom: 4px;
}
.#{$clm-prefix}d-s-arrow, &.#{$sm-prefix}select {
.#{$sm-prefix}d-s-arrow { padding: 0;
bottom: 7px; }
}
&.#{$sm-prefix}color, &.#{$sm-prefix}select select {
&.#{$sm-prefix}input, height: 20px;
&.#{$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 { &.#{$sm-prefix}select option {
border-radius: 2px; padding: 3px 0;
} }
&.#{$sm-prefix}select { &.#{$sm-prefix}composite {
padding: 0; background-color: $mainDklColor;
} border: 1px solid rgba(0, 0, 0, 0.25);
}
&.#{$sm-prefix}select select { &.#{$sm-prefix}list {
height: 20px; width: auto;
} padding: 0;
overflow: hidden;
float: left;
&.#{$sm-prefix}select option { input {
padding: 3px 0; display: none;
} }
&.#{$sm-prefix}composite { label {
background-color: $mainDklColor; cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.25); padding: 5px;
display: block;
} }
&.#{$sm-prefix}list { .#{$sm-prefix}radio:checked + label {
width: auto; background-color: rgba(255, 255, 255, 0.2);
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 { .#{$sm-prefix}icon {
width: auto; background-repeat: no-repeat;
padding: 0; background-position: center;
text-shadow: none;
line-height: normal;
//padding: 5px 19px;
} }
} }
/* ------------------END Field-------------------- */ &.#{$sm-prefix}integer select {
width: auto;
padding: 0;
}
}
.#{$sm-prefix}list .#{$sm-prefix}el { /* ------------------END Field-------------------- */
float: left;
border-left: 1px solid $mainDkColor;
&:first-child { .#{$sm-prefix}list .#{$sm-prefix}el {
border: none; float: left;
} border-left: 1px solid $mainDkColor;
&:hover { &:first-child {
background: $mainDkColor; border: none;
}
} }
/* ------------------Property-------------------- */ &:hover {
background: $mainDkColor;
.#{$sm-prefix} {
&slider {
.#{$app-prefix}field-integer {
flex: 1 1 65px;
}
}
} }
}
.#{$sm-prefix}property { /* ------------------Property-------------------- */
box-sizing: border-box;
float: left;
width: 50%;
margin-bottom: 5px;
padding: 0 5px;
&--full,
&.#{$sm-prefix}composite,
&.#{$sm-prefix}file,
&.#{$sm-prefix}list,
&.#{$sm-prefix}stack,
&.#{$sm-prefix}slider,
&.#{$sm-prefix}color {
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 { .#{$sm-prefix} {
box-sizing: border-box; &slider {
float: left; .#{$app-prefix}field-integer {
width: 100%; flex: 1 1 65px;
} }
}
}
.#{$sm-prefix}preview-file-box { .#{$sm-prefix}property {
background-color: $lightBorder; box-sizing: border-box;
border-radius: 2px; float: left;
margin-top: 5px; width: 50%;
position: relative; margin-bottom: 5px;
overflow: hidden; padding: 0 5px;
&--full,
&.#{$sm-prefix}composite,
&.#{$sm-prefix}file,
&.#{$sm-prefix}list,
&.#{$sm-prefix}stack,
&.#{$sm-prefix}slider,
&.#{$sm-prefix}color {
width: 100%;
}
&.#{$sm-prefix}show { .#{$sm-prefix}btn {
border: 1px solid darken($lightBorder, 1%); background-color: lighten($mainDkColor, 13%);
padding: 3px 20px; 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;
.#{$sm-prefix}preview-file-close { @include opacity(0.85);
@extend .#{$sm-prefix}close-btn; }
top: -5px; .#{$sm-prefix}btn-c {
display: block; box-sizing: border-box;
} float: left;
} width: 100%;
}
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file { .#{$sm-prefix}preview-file {
height: 50px; background-color: $lightBorder;
} border-radius: 2px;
margin-top: 5px;
position: relative;
overflow: hidden;
border: 1px solid darken($lightBorder, 1%);
padding: 3px 20px;
&.#{$sm-prefix}file ##{$sm-prefix}preview-file { &-cnt {
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
height: 50px;
} }
.#{$sm-prefix}layers { &-close {
margin-top: 5px; @extend .#{$sm-prefix}close-btn;
padding: 1px 3px;
min-height: 30px;
}
.#{$sm-prefix}layer { top: -5px;
background-color: rgba(255, 255, 255, 0.055); display: block;
border-radius: 2px;
margin: 2px 0;
padding: 7px;
position: relative;
&.#{$sm-prefix}active {
background-color: rgba(255, 255, 255, 0.12);
}
.#{$sm-prefix}label-wrp {
display: flex;
align-items: center;
}
##{$sm-prefix}move {
height: 14px;
width: 14px;
min-width: 14px;
cursor: grab;
}
##{$sm-prefix}label {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 5px;
}
&-preview {
@extend .checker-bg;
height: 15px;
width: 15px;
min-width: 15px;
margin-right: 5px;
border-radius: 2px;
&-cnt {
border-radius: 2px;
background-color: white;
height: 100%;
width: 100%;
background-size: cover !important;
}
}
##{$sm-prefix}close-layer {
display: block;
cursor: pointer;
height: 14px;
width: 14px;
min-width: 14px;
@include opacity(0.5);
&:hover {
@include opacity(0.8);
}
}
} }
} }
}
##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after { // Layers
color: #000;
content: "T"; .#{$sm-prefix}layers {
font-weight: 900; margin-top: 5px;
line-height: 17px; padding: 1px 3px;
padding: 0 4px; min-height: 30px;
} }
/* ------------------END Property-------------------- */ .#{$sm-prefix}layer {
background-color: rgba(255, 255, 255, 0.055);
border-radius: 2px;
margin: 2px 0;
padding: 7px;
position: relative;
.#{$sm-prefix}stack .#{$sm-prefix}properties { &.#{$sm-prefix}active {
padding: 5px 0 0; background-color: rgba(255, 255, 255, 0.12);
} }
.#{$sm-prefix}stack ##{$sm-prefix}add { .#{$sm-prefix}label-wrp {
@extend .#{$app-prefix}color-main; display: flex;
align-items: center;
}
background: none; ##{$sm-prefix}move {
border: none; height: 14px;
cursor: pointer; width: 14px;
outline: none; min-width: 14px;
position: absolute; cursor: grab;
right: 0; }
top: -17px;
opacity: 0.75;
padding: 0;
width: 18px;
height: 18px;
&:hover { ##{$sm-prefix}label {
@include opacity(1); flex-grow: 1;
} overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 5px;
} }
.#{$sm-prefix}colorp-c { &-preview {
@extend .#{$app-prefix}bg-main; @extend .checker-bg;
height: 100%; height: 15px;
width: 20px; width: 15px;
position: absolute; min-width: 15px;
right: 0; margin-right: 5px;
top: 0;
box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
padding: 2px;
.#{$app-prefix}checker-bg { &-cnt {
border-radius: 2px;
background-color: white;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 1px; background-size: cover !important;
} }
} }
.#{$sm-prefix}color-picker { ##{$sm-prefix}close-layer {
background-color: $fontColor; display: block;
cursor: pointer; cursor: pointer;
height: 16px; height: 14px;
width: 100%; width: 14px;
margin-top: -16px; min-width: 14px;
box-shadow: 0 0 1px $mainDkColor;
border-radius: 1px; @include opacity(0.5);
&:hover {
@include opacity(0.8);
}
} }
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload { ##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after {
left: 0; color: #000;
top: 0; content: "T";
position: absolute; font-weight: 900;
width: 100%; line-height: 17px;
opacity: 0; padding: 0 4px;
cursor: pointer; }
/* ------------------END Property-------------------- */
.#{$sm-prefix}stack .#{$sm-prefix}properties {
padding: 5px 0 0;
}
.#{$sm-prefix}stack ##{$sm-prefix}add {
@extend .#{$app-prefix}color-main;
background: none;
border: none;
cursor: pointer;
outline: none;
position: absolute;
right: 0;
top: -17px;
opacity: 0.75;
padding: 0;
width: 18px;
height: 18px;
&:hover {
@include opacity(1);
} }
}
.#{$sm-prefix}colorp-c {
@extend .#{$app-prefix}bg-main;
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { height: 100%;
padding: 2px 0; 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 { .#{$sm-prefix}layer > ##{$sm-prefix}move {
@include opacity(0.7); @include opacity(0.7);

Write Preview
Loading…
Cancel
Save