From 4a05f1752dac432e4ff1a91fd1bd74b86c0fc895 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 30 Nov 2016 16:29:52 +0100 Subject: [PATCH] Update UI style --- index.html | 55 ++++++ src/selector_manager/template/classTags.html | 10 +- .../templates/propertyColor.html | 12 +- .../templates/propertyInput.html | 4 +- .../templates/propertyInteger.html | 12 +- .../templates/propertyRadio.html | 4 +- .../templates/propertySelect.html | 8 +- src/style_manager/view/PropertyColorView.js | 4 +- src/style_manager/view/PropertyIntegerView.js | 11 +- src/style_manager/view/PropertyRadioView.js | 8 +- styles/css/font-awesome.css | 2 +- styles/css/main.css | 142 ++++++++++++-- styles/scss/main.scss | 181 +++++++++++++++--- 13 files changed, 373 insertions(+), 80 deletions(-) diff --git a/index.html b/index.html index 323643296..9f63d2532 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,61 @@ +
diff --git a/src/selector_manager/template/classTags.html b/src/selector_manager/template/classTags.html index 32e0c7bb0..7905f16d2 100644 --- a/src/selector_manager/template/classTags.html +++ b/src/selector_manager/template/classTags.html @@ -2,20 +2,20 @@
<%= label %>
-
- +
+ -
-
+
+
-
+
diff --git a/src/style_manager/templates/propertyColor.html b/src/style_manager/templates/propertyColor.html index af08e44e0..bccdeae08 100644 --- a/src/style_manager/templates/propertyColor.html +++ b/src/style_manager/templates/propertyColor.html @@ -1,7 +1,9 @@ -
- -
-
+
+
+
+
+
+
-
\ No newline at end of file +
diff --git a/src/style_manager/templates/propertyInput.html b/src/style_manager/templates/propertyInput.html index b07ba910f..7277ecdaf 100644 --- a/src/style_manager/templates/propertyInput.html +++ b/src/style_manager/templates/propertyInput.html @@ -1,4 +1,4 @@ -
+
-
\ No newline at end of file +
diff --git a/src/style_manager/templates/propertyInteger.html b/src/style_manager/templates/propertyInteger.html index 6da774c62..0a3260c5f 100644 --- a/src/style_manager/templates/propertyInteger.html +++ b/src/style_manager/templates/propertyInteger.html @@ -1,8 +1,8 @@ -
+
- -
-
-
+ +
+
+
-
\ No newline at end of file +
diff --git a/src/style_manager/templates/propertyRadio.html b/src/style_manager/templates/propertyRadio.html index 8b7876ab1..2a7ba9cb1 100644 --- a/src/style_manager/templates/propertyRadio.html +++ b/src/style_manager/templates/propertyRadio.html @@ -1,4 +1,4 @@ -
+
-
\ No newline at end of file +
diff --git a/src/style_manager/templates/propertySelect.html b/src/style_manager/templates/propertySelect.html index 295dbf8a5..aac26216a 100644 --- a/src/style_manager/templates/propertySelect.html +++ b/src/style_manager/templates/propertySelect.html @@ -1,5 +1,7 @@ -
+
-
+
+
+
-
\ No newline at end of file +
diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index d90ea3386..6f0b3addc 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/src/style_manager/view/PropertyColorView.js @@ -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 = $('
', {class: this.pfx + "color-picker"}); + this.$colorPicker = $('
', {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); }, diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 7f6a8686e..7661a4c1e 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -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 = $('', {placeholder: 'auto', type: 'text' }); this.$el.find('#'+ pfx +'input-holder').html(this.$input); } if(!this.$unit){ if(this.units && this.units.length){ - this.unitS = ''; _.each(this.units,function(unit){ var selected = unit == this.selectedUnit ? 'selected': ''; this.unitS += ''; },this); this.unitS += ''; 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); diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js index df55905cb..9a3ff751b 100644 --- a/src/style_manager/view/PropertyRadioView.js +++ b/src/style_manager/view/PropertyRadioView.js @@ -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 += '
'+ + this.input += '
'+ ''+ - '
'; + '
'; },this); this.$inputEl = $(this.input); this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl); diff --git a/styles/css/font-awesome.css b/styles/css/font-awesome.css index e3ca7e253..10f6136a9 100644 --- a/styles/css/font-awesome.css +++ b/styles/css/font-awesome.css @@ -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; diff --git a/styles/css/main.css b/styles/css/main.css index 1037f9913..b7dc67ba0 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -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; } diff --git a/styles/scss/main.scss b/styles/scss/main.scss index f000f328e..2f0c7e38d 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -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 {