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

Update UI style

pull/36/head
Artur Arseniev 9 years ago
parent
5f39e9de53
commit
4a05f1752d
13 changed files with 373 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      index.html
  2. 10
      src/selector_manager/template/classTags.html
  3. 12
      src/style_manager/templates/propertyColor.html
  4. 4
      src/style_manager/templates/propertyInput.html
  5. 12
      src/style_manager/templates/propertyInteger.html
  6. 4
      src/style_manager/templates/propertyRadio.html
  7. 8
      src/style_manager/templates/propertySelect.html
  8. 4
      src/style_manager/view/PropertyColorView.js
  9. 11
      src/style_manager/view/PropertyIntegerView.js
  10. 8
      src/style_manager/view/PropertyRadioView.js
  11. 2
      styles/css/font-awesome.css
  12. 142
      styles/css/main.css
  13. 181
      styles/scss/main.scss

55
index.html
View File

@ -10,6 +10,61 @@
<style>
body, html{ height: 100%; margin: 0;}
</style>
<style>
body, html{ height: 100%; margin: 0;}
.gjs-clm-tags .gjs-sm-title,
.gjs-sm-sector .gjs-sm-title{
border-top: none;
}
.gjs-clm-tags .gjs-clm-tag {
background-color: #4c9790; /*#008f73 #4c9790*/
border: none;
box-shadow: none;
padding: 5px 8px;
text-shadow: none;
}
.gjs-field {
background-color: rgba(0, 0, 0, 0.15);
box-shadow: none;
}
.gjs-btnt.gjs-pn-active, .gjs-pn-btn.gjs-pn-active{
box-shadow: none;
}
.gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active{
color: #35d7bb;
}
#gjs-rte-toolbar .gjs-rte-btn,
.gjs-btn-prim, .gjs-btnt,
.gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
.gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
.gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
.gjs-color-main, .gjs-mdl-dialog,
.gjs-off-prv, .gjs-pn-btn, .gjs-pn-panel,
.gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
.gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
.gjs-sm-sector .gjs-sm-stack #gjs-sm-add{
color: #a0aabf; /*#a0aabf #d0d6e2*/
}
#gjs-rte-toolbar, .gjs-bg-main,
.gjs-clm-select option,
.gjs-clm-tags .gjs-sm-colorp-c,
.gjs-editor, .gjs-mdl-dialog,
.gjs-nv-item .gjs-nv-title-c,
.gjs-off-prv, .gjs-pn-panel,
.gjs-select option,
.gjs-sm-sector .gjs-sm-colorp-c,
.gjs-sm-select option,
.gjs-sm-unit option,
.sp-container{
background-color: #373d49;
}
</style>
<body>
<div id="gjs" style="height:0px; overflow:hidden">

10
src/selector_manager/template/classTags.html
View File

@ -2,20 +2,20 @@
<div id="<%= pfx %>label"><%= label %></div>
<div id="<%= pfx %>status-c">
<span id="<%= pfx %>input-c">
<div class="<%= pfx %>field <%= ppfx %>select">
<span id="<%= pfx %>input-holder">
<div class="<%= ppfx %>field <%= ppfx %>select">
<span id="<%= ppfx %>input-holder">
<select id="<%= pfx %>states">
<option value=""><%= statesLabel %></option>
</select>
</span>
<div class="<%= pfx %>sel-arrow">
<div class="<%= pfx %>d-s-arrow"></div>
<div class="<%= ppfx %>sel-arrow">
<div class="<%= ppfx %>d-s-arrow"></div>
</div>
</div>
</span>
</div>
</div>
<div id="<%= pfx %>tags-field">
<div id="<%= pfx %>tags-field" class="<%= ppfx %>field">
<div id="<%= pfx %>tags-c"></div>
<input id="<%= pfx %>new" />
<span id="<%= pfx %>add-tag" class="fa fa-plus"></span>

12
src/style_manager/templates/propertyColor.html
View File

@ -1,7 +1,9 @@
<div class="<%= pfx %>field <%= pfx %>color">
<span id='<%= pfx %>input-holder'></span>
<div class="<%= pfx %>colorp-c">
<div class="<%= ppfx %>checker-bg"></div>
<div class="<%= ppfx %>field <%= ppfx %>field-color">
<div id='<%= pfx %>input-holder'></div>
<div class="<%= ppfx %>field-colorp">
<div class="<%= ppfx %>field-colorp-c">
<div class="<%= ppfx %>checker-bg"></div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>

4
src/style_manager/templates/propertyInput.html
View File

@ -1,4 +1,4 @@
<div class="<%= pfx %>field <%= pfx %>input">
<div class="<%= ppfx %>field">
<span id='<%= pfx %>input-holder'></span>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>

12
src/style_manager/templates/propertyInteger.html
View File

@ -1,8 +1,8 @@
<div class="<%= pfx %>field <%= pfx %>integer">
<div class="<%= ppfx %>field">
<span id='<%= pfx %>input-holder'></span>
<span id='<%= pfx %>units-holder'></span>
<div class="<%= pfx %>int-arrows">
<div class="<%= pfx %>u-arrow"></div>
<div class="<%= pfx %>d-arrow"></div>
<span class='<%= ppfx %>field-units'></span>
<div class="<%= ppfx %>field-arrows">
<div class="<%= ppfx %>field-arrow-u"></div>
<div class="<%= ppfx %>field-arrow-d"></div>
</div>
</div>
</div>

4
src/style_manager/templates/propertyRadio.html
View File

@ -1,4 +1,4 @@
<div class="<%= pfx %>field <%= pfx %>list">
<div class="<%= ppfx %>field <%= ppfx %>field-radio">
<span id='<%= pfx %>input-holder'></span>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>

8
src/style_manager/templates/propertySelect.html
View File

@ -1,5 +1,7 @@
<div class="<%= pfx %>field <%= pfx %>select">
<div class="<%= ppfx %>field <%= ppfx %>select">
<span id='<%= pfx %>input-holder'></span>
<div class="<%= pfx %>sel-arrow"><div class="<%= pfx %>d-s-arrow"></div></div>
<div class="<%= ppfx %>sel-arrow">
<div class="<%= ppfx %>d-s-arrow"></div>
</div>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>

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

@ -14,7 +14,7 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
this.$el.find('#' + this.pfx + 'input-holder').html(this.$input);
}
if(!this.$colorPicker){
this.$colorPicker = $('<div>', {class: this.pfx + "color-picker"});
this.$colorPicker = $('<div>', {class: this.ppfx + "field-color-picker"});
cpStyle = this.$colorPicker.get(0).style;
var that = this;
var el = this.target.config ? this.target.config.el : '';
@ -37,7 +37,7 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
that.model.set('value', c);
}
});
this.$el.find('.' + this.pfx + 'colorp-c').append(this.$colorPicker);
this.$el.find('.' + this.ppfx + 'field-colorp-c').append(this.$colorPicker);
}
this.setValue(this.componentValue, 0);
},

11
src/style_manager/view/PropertyIntegerView.js
View File

@ -14,9 +14,9 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
this.max = this.model.get('max') || this.model.get('max')===0 ? this.model.get('max') : null;
this.units = this.model.get('units');
this.unit = this.model.get('unit') ? this.model.get('unit') : (this.units.length ? this.units[0] : '');
this.events['click .'+this.pfx+'u-arrow'] = 'upArrowClick';
this.events['click .'+this.pfx+'d-arrow'] = 'downArrowClick';
this.events['mousedown .'+this.pfx+'int-arrows'] = 'downIncrement';
this.events['click .'+this.ppfx+'field-arrow-u'] = 'upArrowClick';
this.events['click .'+this.ppfx+'field-arrow-d'] = 'downArrowClick';
this.events['mousedown .'+this.ppfx+'field-arrows'] = 'downIncrement';
this.listenTo( this.model ,'change:unit', this.valueChanged);
this.delegateEvents();
},
@ -128,20 +128,21 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
/** @inheritdoc */
renderInput: function() {
var pfx = this.pfx;
var ppfx = this.ppfx;
if(!this.$input){
this.$input = $('<input>', {placeholder: 'auto', type: 'text' });
this.$el.find('#'+ pfx +'input-holder').html(this.$input);
}
if(!this.$unit){
if(this.units && this.units.length){
this.unitS = '<select class="' + pfx + 'unit">';
this.unitS = '<select>';
_.each(this.units,function(unit){
var selected = unit == this.selectedUnit ? 'selected': '';
this.unitS += '<option ' + selected + ' >' + unit + '</option>';
},this);
this.unitS += '</select>';
this.$unit = $(this.unitS);
this.$el.find('#' + pfx + 'units-holder').html(this.$unit);
this.$el.find('.' + ppfx + 'field-units').html(this.$unit);
}
}
this.setValue(this.componentValue);

8
src/style_manager/view/PropertyRadioView.js
View File

@ -16,17 +16,19 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyRadio.html'],
/** @inheritdoc */
renderInput: function() {
var pfx = this.pfx;
var ppfx = this.ppfx;
var itemCls = ppfx + 'radio-item-label';
if(!this.$input){
if(this.list && this.list.length){
this.input = '';
_.each(this.list,function(el){
var cl = el.className ? el.className + ' ' + pfx + 'icon' : '',
var cl = el.className ? el.className + ' ' + pfx + 'icon ' + itemCls : '',
id = this.property + '-' + el.value,
labelTxt = el.name ? el.name : el.value;
titleAttr = el.title ? 'title="' + el.title + '"': '';
this.input += '<div class="' + pfx + 'el">'+
this.input += '<div class="' + ppfx + 'radio-item">'+
'<input class="'+pfx+'radio" type="radio" id="'+ id +'" name="'+this.property+'" value="'+el.value+'" />'+
'<label class="'+cl+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>';
'<label class="'+(cl ? cl : itemCls)+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>';
},this);
this.$inputEl = $(this.input);
this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl);

2
styles/css/font-awesome.css
View File

@ -14,7 +14,7 @@
.fa {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;

142
styles/css/main.css
View File

@ -494,7 +494,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.fa {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
@ -3016,7 +3016,7 @@ ol.example li.placeholder:before {
font-weight: lighter;
text-align: left;
position: relative;
background-color: rgba(0, 0, 0, 0.2); }
background-color: rgba(0, 0, 0, 0.1); }
.gjs-nv-navigator .gjs-nv-item.gjs-nv-hide {
opacity: 0.55;
filter: alpha(opacity=55); }
@ -3033,7 +3033,6 @@ ol.example li.placeholder:before {
top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
color: #aaaaaa;
cursor: pointer;
z-index: 1; }
.gjs-nv-navigator .gjs-nv-item .gjs-nv-title {
@ -3069,7 +3068,6 @@ ol.example li.placeholder:before {
display: none; }
.gjs-nv-item > #gjs-nv-move {
color: #aaaaaa;
position: absolute;
cursor: move;
font-size: 12px;
@ -3134,9 +3132,10 @@ ol.example li.placeholder:before {
padding: 3px 0;
z-index: 1; }
.gjs-field select {
height: 20px; }
height: 20px;
padding-right: 12px; }
.gjs-field option {
padding: 5px 0; }
padding: 3px 0; }
.gjs-field .gjs-sel-arrow {
height: 100%;
width: 9px;
@ -3154,6 +3153,112 @@ ol.example li.placeholder:before {
border-right: 4px solid transparent;
cursor: pointer; }
.gjs-field-color input {
padding-right: 20px;
box-sizing: border-box; }
.gjs-field-colorp {
border-left: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
height: 100%;
padding: 2px;
position: absolute;
right: 0;
top: 0;
width: 20px;
z-index: 10; }
.gjs-field-colorp .gjs-checker-bg {
height: 100%;
width: 100%;
border-radius: 1px; }
.gjs-field-colorp-c {
height: 100%;
position: relative;
width: 100%; }
.gjs-field-color-picker {
background-color: #ddd;
cursor: pointer;
height: 100%;
width: 100%;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
border-radius: 1px;
position: absolute;
top: 0; }
.gjs-field-radio {
float: left;
overflow: hidden;
padding: 0;
width: auto; }
/*???*/
.gjs-field-checkbox {
padding: 0;
width: auto !important; }
.gjs-field-checkbox input {
display: none; }
.gjs-field-checkbox input:checked + .gjs-chk-icon {
border-color: rgba(255, 255, 255, 0.5);
border-width: 0 2px 2px 0;
border-style: solid; }
.gjs-radio-item {
float: left;
border-left: 1px solid rgba(0, 0, 0, 0.3); }
.gjs-radio-item:first-child {
border: none; }
.gjs-radio-item:hover {
background: rgba(0, 0, 0, 0.3); }
.gjs-radio-item input {
display: none; }
.gjs-radio-item input:checked + .gjs-radio-item-label {
background-color: rgba(255, 255, 255, 0.2); }
.gjs-radio-item-label {
cursor: pointer;
display: block;
padding: 5px; }
.gjs-field-units {
position: absolute;
right: 0;
top: 0; }
.gjs-field-unit {
position: absolute;
right: 10px;
top: 3px;
font-size: 10px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer; }
.gjs-field-arrows {
z-index: 10;
cursor: ns-resize;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 9px; }
.gjs-field-arrow-u,
.gjs-field-arrow-d {
position: absolute;
height: 0;
width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255, 255, 255, 0.7);
bottom: 4px;
cursor: pointer; }
.gjs-field-arrow-u {
border-bottom: 4px solid rgba(255, 255, 255, 0.7);
border-top: none;
top: 4px; }
.gjs-field-select {
padding: 0; }
@ -3215,16 +3320,6 @@ ol.example li.placeholder:before {
width: 6px;
cursor: pointer; }
.gjs-field-checkbox {
padding: 0;
width: auto !important; }
.gjs-field-checkbox input {
display: none; }
.gjs-field-checkbox input:checked + .gjs-chk-icon {
border-color: rgba(255, 255, 255, 0.5);
border-width: 0 2px 2px 0;
border-style: solid; }
.gjs-add-trasp {
background: none;
border: none;
@ -3359,7 +3454,7 @@ ol.example li.placeholder:before {
bottom: 4px; }
.gjs-sm-sector .gjs-sm-field .gjs-sm-d-s-arrow, .gjs-clm-tags .gjs-sm-field .gjs-sm-d-s-arrow, .gjs-sm-sector .gjs-clm-field .gjs-sm-d-s-arrow, .gjs-clm-tags .gjs-clm-field .gjs-sm-d-s-arrow, .gjs-sm-sector .gjs-sm-field .gjs-clm-d-s-arrow, .gjs-clm-tags .gjs-sm-field .gjs-clm-d-s-arrow, .gjs-sm-sector .gjs-clm-field .gjs-clm-d-s-arrow, .gjs-clm-tags .gjs-clm-field .gjs-clm-d-s-arrow {
bottom: 7px; }
.gjs-sm-sector .gjs-sm-field.gjs-sm-integer, .gjs-clm-tags .gjs-sm-field.gjs-sm-integer, .gjs-sm-sector .gjs-sm-integer.gjs-clm-field, .gjs-clm-tags .gjs-sm-integer.gjs-clm-field, .gjs-clm-tags #gjs-clm-tags-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-select, .gjs-clm-tags .gjs-sm-field.gjs-sm-select, .gjs-sm-sector .gjs-sm-select.gjs-clm-field, .gjs-clm-tags .gjs-sm-select.gjs-clm-field, .gjs-sm-sector .gjs-clm-select, .gjs-clm-tags .gjs-clm-select, .gjs-sm-sector .gjs-sm-field.gjs-sm-list, .gjs-clm-tags .gjs-sm-field.gjs-sm-list, .gjs-sm-sector .gjs-sm-list.gjs-clm-field, .gjs-clm-tags .gjs-sm-list.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-color, .gjs-clm-tags .gjs-sm-field.gjs-sm-color, .gjs-sm-sector .gjs-sm-color.gjs-clm-field, .gjs-clm-tags .gjs-sm-color.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-input, .gjs-clm-tags .gjs-sm-field.gjs-sm-input, .gjs-sm-sector .gjs-sm-input.gjs-clm-field, .gjs-clm-tags .gjs-sm-input.gjs-clm-field {
.gjs-sm-sector .gjs-sm-field.gjs-sm-integer, .gjs-clm-tags .gjs-sm-field.gjs-sm-integer, .gjs-sm-sector .gjs-sm-integer.gjs-clm-field, .gjs-clm-tags .gjs-sm-integer.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-select, .gjs-clm-tags .gjs-sm-field.gjs-sm-select, .gjs-sm-sector .gjs-sm-select.gjs-clm-field, .gjs-clm-tags .gjs-sm-select.gjs-clm-field, .gjs-sm-sector .gjs-clm-select, .gjs-clm-tags .gjs-clm-select, .gjs-sm-sector .gjs-sm-field.gjs-sm-list, .gjs-clm-tags .gjs-sm-field.gjs-sm-list, .gjs-sm-sector .gjs-sm-list.gjs-clm-field, .gjs-clm-tags .gjs-sm-list.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-color, .gjs-clm-tags .gjs-sm-field.gjs-sm-color, .gjs-sm-sector .gjs-sm-color.gjs-clm-field, .gjs-clm-tags .gjs-sm-color.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-input, .gjs-clm-tags .gjs-sm-field.gjs-sm-input, .gjs-sm-sector .gjs-sm-input.gjs-clm-field, .gjs-clm-tags .gjs-sm-input.gjs-clm-field {
background-color: rgba(0, 0, 0, 0.3);
/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);
@ -3400,7 +3495,7 @@ ol.example li.placeholder:before {
background-position: center;
text-shadow: none;
line-height: normal; }
.gjs-sm-sector .gjs-sm-field.gjs-sm-integer select, .gjs-clm-tags .gjs-sm-field.gjs-sm-integer select, .gjs-sm-sector .gjs-sm-integer.gjs-clm-field select, .gjs-clm-tags .gjs-sm-integer.gjs-clm-field select, .gjs-clm-tags #gjs-clm-tags-field select {
.gjs-sm-sector .gjs-sm-field.gjs-sm-integer select, .gjs-clm-tags .gjs-sm-field.gjs-sm-integer select, .gjs-sm-sector .gjs-sm-integer.gjs-clm-field select, .gjs-clm-tags .gjs-sm-integer.gjs-clm-field select {
width: auto;
padding: 0; }
.gjs-sm-sector .gjs-sm-list .gjs-sm-el, .gjs-clm-tags .gjs-sm-list .gjs-sm-el {
@ -3652,16 +3747,20 @@ ol.example li.placeholder:before {
.gjs-clm-tags #gjs-clm-close {
font-size: 20px;
line-height: 0;
cursor: pointer; }
cursor: pointer;
color: rgba(255, 255, 255, 0.9); }
.gjs-clm-tags #gjs-clm-close:hover {
opacity: 0.7;
filter: alpha(opacity=70); }
.gjs-clm-tags #gjs-clm-checkbox {
color: rgba(255, 255, 255, 0.9);
vertical-align: middle;
cursor: pointer;
font-size: 9px; }
.gjs-clm-tags #gjs-clm-tag-label {
cursor: text; }
.gjs-clm-tags #gjs-clm-tag-label input {
width: auto; }
/********* END Class manager **********/
/********* Modal dialog **********/
@ -3949,7 +4048,10 @@ ol.example li.placeholder:before {
padding: 5px 10px 0; }
.sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover {
border: 1px solid rgba(0, 0, 0, 0.8); }
border: 1px solid rgba(0, 0, 0, 0.9); }
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: rgba(0, 0, 0, 0.9); }
.gjs-hidden {
display: none; }

181
styles/scss/main.scss
View File

@ -560,7 +560,7 @@ ol.example li.placeholder:before {position: absolute;}
font-weight: lighter;
text-align: left;
position: relative;
background-color: rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.1);
}
.#{$nv-prefix}item.#{$nv-prefix}hide {
@include opacity(0.55);
@ -575,12 +575,11 @@ ol.example li.placeholder:before {position: absolute;}
@extend .btn;
height: auto !important; width: auto !important;
font-size: 13px;
left: 0; top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
color: darken($fontColor, 20%);
cursor:pointer;
z-index: 1;
left: 0; top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
cursor:pointer;
z-index: 1;
}
.#{$nv-prefix}item .#{$nv-prefix}title {
font-size: 11px;
@ -614,7 +613,6 @@ ol.example li.placeholder:before {position: absolute;}
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
.#{$nv-prefix}no-chld > ##{$nv-prefix}caret{ display:none; }
.#{$nv-prefix}item > ##{$nv-prefix}move {
color: darken($fontColor, 20%);
position: absolute;
cursor: move;
font-size: 12px;
@ -660,6 +658,7 @@ $darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
$darkTextShadow: $mainDkColor; /*#252525*/
$arrowColor: $mainLhlColor; /*b1b1b1*/
$colorpSize: 20px;
@mixin rangeThumbStyle() {
height: 10px; width: 10px;
@ -702,10 +701,11 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
select{
height: 20px;
padding-right: 12px;
}
option{
padding: 5px 0;
padding: 3px 0;
}
.#{$app-prefix}sel-arrow {
@ -725,6 +725,140 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
}
}
.#{$app-prefix}field-color {
input {
padding-right: $colorpSize;
box-sizing: border-box;
}
}
.#{$app-prefix}field-colorp {
border-left: 1px solid $mainDklColor;
box-sizing: border-box;
height: 100%;
padding: 2px;
position: absolute;
right: 0;
top: 0;
width: $colorpSize;
z-index: 10;
.#{$app-prefix}checker-bg{
height: 100%;
width: 100%;
border-radius: 1px;
}
}
.#{$app-prefix}field-colorp-c {
height: 100%;
position: relative;
width: 100%;
}
.#{$app-prefix}field-color-picker {
background-color: $fontColor;
cursor: pointer;
height: 100%;
width: 100%;
box-shadow: 0 0 1px $mainDkColor;
border-radius: 1px;
position: absolute;
top: 0;
}
.#{$app-prefix}field-radio {
float: left;
overflow: hidden;
padding: 0;
width: auto;
}
/*???*/
.#{$app-prefix}field-checkbox {
padding: 0;
width: auto !important;
input {
display: none;
}
input:checked + .#{$app-prefix}chk-icon{
border-color: rgba(255, 255, 255, 0.5);
border-width: 0 2px 2px 0;
border-style: solid;
}
}
.#{$app-prefix}radio-item{
float:left;
border-left: 1px solid $darkTextShadow;
&:first-child{
border:none
}
&:hover{
background: $mainDkColor;
}
input {
display: none;
}
input:checked + .#{$app-prefix}radio-item-label{
background-color: rgba(255, 255, 255, 0.2);
}
}
.#{$app-prefix}radio-item-label{
cursor: pointer;
display: block;
padding: 5px;
}
.#{$app-prefix}field-units {
position: absolute;
right: 0;
top: 0;
}
.#{$app-prefix}field-unit {
position: absolute;
right: 10px; top: 3px;
font-size: 10px;
color: $arrowColor;
cursor:pointer;
}
.#{$app-prefix}field-arrows {
z-index: 10;
cursor: ns-resize;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 9px;
}
.#{$app-prefix}field-arrow-u,
.#{$app-prefix}field-arrow-d{
position: absolute;
height: 0; width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid $arrowColor;
bottom: 4px;
cursor:pointer;
}
.#{$app-prefix}field-arrow-u {
border-bottom: 4px solid $arrowColor;
border-top: none;
top: 4px;
}
.#{$app-prefix}field-select {
padding: 0;
}
@ -776,21 +910,6 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
cursor: pointer;
}
.#{$app-prefix}field-checkbox {
padding: 0;
width: auto !important;
input {
display: none;
}
input:checked + .#{$app-prefix}chk-icon{
border-color: rgba(255, 255, 255, 0.5);
border-width: 0 2px 2px 0;
border-style: solid;
}
}
.#{$app-prefix}add-trasp {
background: none;
@ -1266,7 +1385,6 @@ $paddElClm: 5px 6px;
}
##{$clm-prefix}tags-field{
@extend .#{$sm-prefix}field.#{$sm-prefix}integer;
clear:both;
padding: 5px;
margin-bottom: 5px;
@ -1308,12 +1426,14 @@ $paddElClm: 5px 6px;
font-size: 20px;
line-height: 0;
cursor:pointer;
color: rgba(255, 255, 255, 0.9);
@extend .no-select;
&:hover{
@include opacity(0.7);
}
}
##{$clm-prefix}checkbox {
color: rgba(255, 255, 255, 0.9);
vertical-align: middle;
cursor: pointer;
font-size: 9px;
@ -1322,6 +1442,10 @@ $paddElClm: 5px 6px;
##{$clm-prefix}tag-label {
cursor: text;
@extend .no-select;
input {
width: auto;
}
}
}
/********* END Class manager **********/
@ -1643,9 +1767,14 @@ $uploadPadding: 150px 10px;
padding:5px 10px 0;
}
.sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
border: 1px solid rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.9);
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: rgba(0, 0, 0, 0.9);
}
.#{$app-prefix}hidden{ display: none; }
@keyframes #{$app-prefix}-slide-down {

Write Preview
Loading…
Cancel
Save