@concretecms/bedrock 1.1.17 → 1.2.1

package/assets/cms/components/customizer/ColorPageCustomizerWidget.vue

@@ -17,11 +17,13 @@ export default {
         const i18n = window.ccmi18n_styleCustomizer || null
         $('#color-picker-' + this.styleValue.style.variable).spectrum({
             showAlpha: true,
+            type: 'color',
+            showPalette: false,
             preferredFormat: 'rgb',
             allowEmpty: true,
             color: this.color,
             showInitial: true,
-            showInput: true,
+            showInput: false,
             cancelText: i18n && i18n.cancel ? i18n.cancel : 'Cancel',
             chooseText: i18n && i18n.choose ? i18n.choose : 'Choose',
             clearText: i18n && i18n.clearColorSelection ? i18n.clearColorSelection : 'Clear Color Selection',
@@ -29,15 +31,20 @@ export default {
             togglePaletteMoreText: i18n && i18n.togglePaletteMore ? i18n.togglePaletteMore : 'More',
             togglePaletteLessText: i18n && i18n.togglePaletteLess ? i18n.togglePaletteLess : 'Less',
             change: function (r) {
-                var color = r.toRgb()
-                my.$emit('update', {
-                    variable: my.styleValue.style.variable,
-                    value: {
+                let newValue = null
+                if (r) {
+                    const color = r.toRgb()
+                    newValue = {
                         r: color.r,
                         g: color.g,
                         b: color.b,
                         a: color.a
                     }
+                }
+
+                my.$emit('update', {
+                    variable: my.styleValue.style.variable,
+                    value: newValue
                 })
             }
         })

package/assets/cms/components/customizer/block/ToolbarSectionWidget.vue

@@ -0,0 +1,54 @@
+<template>
+    <li class="ccm-inline-toolbar-icon-cell">
+            <button type="button" :id="toolbarName" data-placement="top" data-custom-class="light-tooltip" class="btn btn-sm ccm-input-button" :class="{'btn-success':isActive,'btn-secondary-outline':!isActive}"
+                    :title="title" @click="$emit('dropdown', toolbarName)">
+                <i :class="icon"></i>
+            </button>
+            <div class="ccm-dropdown-menu" :class="{'active':isActive,'ccm-inline-design-dropdown-menu-doubled':isDouble}">
+                <slot></slot>
+            </div>
+    </li>
+</template>
+
+<script>
+/* eslint-disable no-new */
+/* global bootstrap */
+export default {
+    props: {
+        isDouble: {
+            type: Boolean,
+            default: false
+        },
+        toolbarName: {
+            type: String,
+            default: 'toolbarButton'
+        },
+        icon: {
+            type: String,
+            default: 'fas fa-cog'
+        },
+        title: {
+            type: String,
+            default: 'Toolbar'
+        },
+        activeToolbar: null
+    },
+    methods: {
+
+        showTooltip() {
+            $('#' + this.toolbarName).tooltip('show')
+        },
+        hideTooltip() {
+            $('#' + this.toolbarName).tooltip('hide')
+        }
+    },
+    mounted() {
+        new bootstrap.Tooltip(document.querySelector('button#' + this.toolbarName), { customClass: 'light-tooltip' })
+    },
+    computed: {
+        isActive() {
+            return this.activeToolbar === this.toolbarName
+        }
+    }
+}
+</script>

package/assets/cms/components/customizer/block/ToolbarSliderWidget.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <label class="form-label" :for="inputId">{{title}}</label>
+        <div class="ccm-inline-style-slider-wrapper">
+            <div class="ccm-inline-style-sliders">
+                <input v-on:input="handleInput" :id="inputId + '_slider'" type="range" :min="min" :max="max" :step="step" :value="value">
+                <input :value="calculatedValue" :id="inputId" :name="inputId" type="hidden">
+            </div>
+            <span class="input-group input-group-sm">
+                <input type="text" :id="inputId+'_text'" autocomplete="off" class="form-control" :value="value" v-on:input="handleInput">
+                <span class="input-group-text" v-if="units !== ''">{{units}}</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        step: {
+            type: Number,
+            default: 1
+        },
+        value: {
+            type: Number,
+            default: 0
+        },
+        units: {
+            type: String,
+            default: ''
+        },
+        inputId: {
+            type: String,
+            default: ''
+        },
+        attachUnits: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+        handleInput(event) {
+            let newValue = parseInt(event.target.value)
+            if (isNaN(newValue)) {
+                newValue = 0
+            }
+            if (newValue < this.min) {
+                newValue = this.min
+            }
+            if (newValue > this.max) {
+                newValue = this.max
+            }
+
+            this.calculateBackground(newValue)
+
+            this.$emit('input', newValue)
+        },
+        calculateBackground(value) {
+            const target = document.querySelector('input[type=range][id=' + this.inputId + '_slider]')
+
+            target.style.backgroundSize = (value - this.min) * 100 / (this.max - this.min) + '% 100%'
+        }
+    },
+    mounted() {
+        this.calculateBackground(this.value ? this.value : 0)
+    },
+    computed: {
+        calculatedValue() {
+            let value = this.value ? this.value : 0
+            if (this.attachUnits) {
+                value += this.units
+            }
+
+            return value
+        }
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/assets/cms/components/form/ConcreteFileInput.vue

@@ -11,7 +11,7 @@
         <div v-if="isLoading">
             <div class="btn-group">
                 <div class="btn btn-secondary"><svg class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg></div>
-                <button type="button" @click="selectedFileID = null" class="ccm-item-selector-reset btn btn-secondary">
+                <button type="button" @click="clearFile" class="ccm-item-selector-reset btn btn-secondary">
                     <i class="fa fa-times-circle"></i>
                 </button>
             </div>
@@ -101,6 +101,10 @@ export default {
                 my.loadFile(r.fID)
             }, options)
         },
+        clearFile: function() {
+            this.selectedFileID = null
+            this.$emit('selectedfile', null)
+        },
         loadFile(fileId) {
             var my = this
             my.isLoading = true
@@ -108,6 +112,7 @@ export default {
                 my.selectedFile = r.files[0]
                 my.selectedFileID = fileId
                 my.isLoading = false
+                my.$emit('selectedfile', r.files[0])
             })
         }
 

package/assets/cms/components/index.js

@@ -29,7 +29,10 @@ import IconSelector from './form/IconSelector'
 import CompletedProcessList from './CompletedProcessList'
 import RunningProcessList from './RunningProcessList'
 import ThemeCustomizer from './customizer/ThemeCustomizer'
+import ColorPageCustomizerWidget from './customizer/ColorPageCustomizerWidget'
 import ThemeCustomizerPreview from './customizer/ThemeCustomizerPreview'
+import ToolbarSliderWidget from './customizer/block/ToolbarSliderWidget'
+import ToolbarSectionWidget from './customizer/block/ToolbarSectionWidget'
 
 // Export our component library
 export default {
@@ -64,5 +67,8 @@ export default {
     RunningProcessList,
     CompletedProcessList,
     ThemeCustomizer,
-    ThemeCustomizerPreview
+    ThemeCustomizerPreview,
+    ToolbarSliderWidget,
+    ToolbarSectionWidget,
+    ColorPageCustomizerWidget
 }

package/assets/cms/js/ajax-request/block.js

@@ -2,7 +2,7 @@
 /* global ConcreteAjaxForm, ConcreteEvent, CCM_CID, Concrete, CCM_DISPATCHER_FILENAME, ConcreteToolbar, ConcreteAlert, ccmi18n */
 
 /* Block ajax */
-;(function(global, $) {
+; (function (global, $) {
     'use strict'
 
     function ConcreteAjaxBlockForm($form, options) {
@@ -49,7 +49,8 @@
             cID: cID,
             bID: resp.bID,
             arEnableGridContainer: arEnableGridContainer,
-            placeholder: ''
+            placeholder: '',
+            tempFilename: resp.tempFilename
         }, function (r) {
             var block; var edit_mode = Concrete.getEditMode(); var local_area = area.inEditMode(edit_mode)
 
@@ -132,7 +133,7 @@
             $(form).attr('action', newActionURL)
         }
         if (my.options.progressiveOperation) {
-            my.handleProgressiveOperation(resp, function(r) {
+            my.handleProgressiveOperation(resp, function (r) {
                 my.refreshBlock(r)
             })
         } else if (my.validateResponse(resp)) {

package/assets/cms/js/base.js

@@ -88,7 +88,7 @@ import './file-manager/file-manager'
 
 // Miscellaneous UI components
 import 'selectize'
-import 'spectrum-colorpicker'
+import 'spectrum-colorpicker2'
 import 'tristate/jquery.tristate'
 import 'jquery-text-counter/textcounter'
 import './jquery-awesome-rating'

package/assets/cms/js/edit-mode/containerblock.js

@@ -19,20 +19,39 @@ import _ from 'underscore'
             elem.children('.ccm-block-cover').remove()
             my.bindDrag()
             my.bindDelete()
+            my.bindEditDesign()
         },
 
         bindDelete: function ContainerBlockDelete() {
             var my = this
-            var deleter = my.getElem().find('>ul a[data-inline-command=delete-block]')
+            var deleter = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=delete-block]')
             deleter.unbind('click.containerDelete').on('click.containerDelete', function(e) {
                 e.preventDefault()
                 my.delete()
             })
         },
 
+        bindEditDesign: function ContainerBlockEditDesign() {
+            var my = this
+            var menuElem = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=edit-container-design]')
+            menuElem.off('click.edit-mode')
+                .on('click.edit-mode', function (e) {
+                    e.preventDefault()
+                    // we are going to place this at the END of the list.
+                    var $link = $(this)
+                    var bID = parseInt($link.attr('data-container-block-id'))
+                    var editor = Concrete.getEditMode()
+                    var block = _.findWhere(editor.getBlocks(), { id: bID })
+                    Concrete.event.fire('EditModeBlockEditInline', {
+                        block: block, event: e, action: CCM_DISPATCHER_FILENAME + '/ccm/system/dialogs/block/design'
+                    })
+                    return false
+                })
+        },
+
         bindDrag: function ContainerBlockBindDrag() {
             var my = this
-            var mover = my.getElem().find('>ul a[data-inline-command=move-block]').parent()
+            var mover = my.getElem().find('ul.ccm-edit-mode-inline-container a[data-inline-command=move-block]').parent()
 
             $.pep.unbind(mover)
             mover.pep(my.getPepSettings())

package/assets/cms/js/edit-mode/editmode.js

@@ -414,6 +414,10 @@
                         }
                         ConcreteAjaxRequest.validateResponse(r, function(ok) {
                             if (ok) {
+                                ConcreteEvent.fire('EditModeBlockMoveComplete', {
+                                    block: block,
+                                    area: targetArea
+                                })
                                 ConcreteToolbar.disableDirectExit()
                             } else {
                                 if (data.revert) {

package/assets/cms/js/edit-mode/layout.js

@@ -26,8 +26,7 @@ import _ from 'underscore'
 
         bindDrag: function layoutBindDrag() {
             var my = this
-            var peper = $('a[data-layout-command="move-block"]').parent()
-
+            var peper = $('[data-layout-command="move-block"]')
             $.pep.unbind(peper)
             peper.pep(my.getPepSettings())
         },

package/assets/cms/js/edit-mode/style-customizer/style-customizer.js

@@ -1,4 +1,4 @@
-import './inline-toolbar'
+// import './inline-toolbar'
 import './palette'
 import './color'
 import './image'

package/assets/cms/js/modifiable-bootstrap-select.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
 
 /* Extend bootstrap-select */
-;(function (global, $) {
+; (function (global, $) {
     // grab a reference to existing functions
     var _init = $.fn.selectpicker.Constructor.prototype.init
     var _destroy = $.fn.selectpicker.Constructor.prototype.destroy
 
     // extend the prototype with own functions
     $.extend(true, $.fn.selectpicker.Constructor.prototype, {
-    // this will replace the original $.fn.selectpicker.Constructor.prototype.init function
+        // this will replace the original $.fn.selectpicker.Constructor.prototype.init function
         init: function () {
             var that = this
             var addNoResultClassName = function (addedNode) {
@@ -16,8 +16,8 @@
                 var $addedNodeBsSelect = $addedNode.closest('.bootstrap-select')
                 if (
                     $addedNode.hasClass('no-results') &&
-          $addedNodeBsSelect.length &&
-          $addedNodeBsSelect.find('select').selectpicker('liveSearch') == true
+                    $addedNodeBsSelect.length &&
+                    $addedNodeBsSelect.find('select').selectpicker('liveSearch') == true
                 ) {
                     $addedNode.addClass('ccm-enhanced-select-input-add-new-term')
                 }
@@ -84,6 +84,8 @@
                     }
 
                     select.selectpicker('refresh')
+                    var event = new Event('change', { detail: txt })
+                    select[0].dispatchEvent(event)
                     $searchbox.trigger('focus')
                 })
             }
@@ -96,9 +98,9 @@
 
             if (
                 this.options.liveSearch &&
-        this.options.allowAdd &&
-        this.allowAddMutationObserver &&
-        typeof this.allowAddMutationObserver != 'undefined'
+                this.options.allowAdd &&
+                this.allowAddMutationObserver &&
+                typeof this.allowAddMutationObserver != 'undefined'
             ) {
                 // free up memory if possible
                 this.allowAddMutationObserver.disconnect()
@@ -106,5 +108,5 @@
             }
         }
     })
-// }
+    // }
 })(window, jQuery); // eslint-disable-line semi

package/assets/cms/scss/_base.scss

@@ -72,7 +72,6 @@
 // Forms
 @import './forms';
 
-
 // Bs5 box-shadow mixin needs to be imported again
 // Otherwise we will get a SassError due a mixin names conflict
 // Previously wasn't throwing the error because Selectize includes the BS mixins
@@ -93,7 +92,7 @@
 @import './item-select-list';
 @import './permission-grid';
 @import './tooltips';
-@import 'spectrum-colorpicker/spectrum';
+@import 'spectrum-colorpicker2/dist/spectrum';
 @import './icons';
 @import './date-time';
 @import './dropdown';

package/assets/cms/scss/_inline-toolbar.scss

@@ -16,131 +16,20 @@
   top: 0 !important;
 }
 
-/*
- old customizer. delete.
- */
-/*
-.ccm-panel-left {
-  .sp-container {
-    background-color: rgba(0, 0, 0, 0.95);
-    border: 0;
-    border-radius: 4px;
-
-    .sp-picker-container {
-      border-left: 0;
-
-      .sp-color,
-      .sp-alpha,
-      .sp-initial,
-      .sp-hue {
-        border: 2px solid #232323;
-        border-radius: 4px;
-
-        .sp-alpha-inner {
-          border: 0;
-        }
-      }
-
-      .sp-slider {
-        border-radius: 6px;
-      }
-
-      .sp-alpha {
-        background-color: #232323;
-        height: 4px;
-      }
-
-      .sp-input-container {
-        float: none;
-        width: 100%;
-
-        .sp-input {
-          border: 1px solid #666;
-          color: #8f969a;
-          outline: 0;
-
-          &:focus {
-            border: 1px solid #666;
-            box-shadow: none;
-            outline: 0;
-          }
-        }
-      }
-
-      .sp-alpha-handle {
-        background-color: #fff;
-        background-image: none;
-        border: 0;
-        border-radius: 6px;
-        height: 12px;
-        outline: none !important;
-        top: -4px;
-        width: 12px;
-
-      }
-
-      a.sp-cancel {
-        color: #8f969a !important;
-        float: left;
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        font-size: $font-size-sm;
-        font-weight: bold;
-        text-transform: capitalize;
-
-        &:hover {
-          color: rgb(235, 54, 54) !important;
-          text-decoration: none;
-        }
-      }
-
-      .sp-button-container {
-        display: block;
-        float: none;
-        padding-top: 5px;
-
-        button.sp-choose {
-          background-color: transparent !important;
-          background-image: none !important;
-          border: 0 !important;
-          box-shadow: none;
-          color: #8f969a !important;
-          float: right;
-          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-          font-size: $font-size-sm;
-          font-weight: bold;
-          padding: 2px;
-          text-shadow: none !important;
-          text-transform: capitalize;
-
-          &:hover {
-            color: #0c6 !important;
-            text-decoration: none;
-          }
-
-          &:focus {
-            outline: none;
-          }
-
-          &:active {
-            outline: none;
-          }
-        }
-      }
-
-      .sp-initial {
-        float: none;
-        overflow: hidden;
-        width: 100%;
-
-        span {
-          width: 172px;
-        }
-      }
-    }
+.light-tooltip {
+  .tooltip-inner {
+    background-color: $dropdown-bg;
+    border-color: $gray-300;
+    box-shadow: $dropdown-box-shadow;
+    color: $gray-700;
+    font-weight: bold;
   }
 
+  .tooltip-arrow::before {
+    border-bottom-color: $dropdown-bg;
+    border-top-color: $dropdown-bg;
+  }
 }
- */
 
 .ccm-ui {
   div.dropdown-menu.ccm-inline-design-dropdown-menu,
@@ -169,7 +58,6 @@
       margin: 0;
     }
 
-
     .ccm-inline-style-slider-display-value {
       display: inline-block;
       margin-left: 5%;
@@ -194,9 +82,8 @@
 
     .ccm-inline-style-sliders {
       display: inline-block;
-      margin-bottom: 15px;
       vertical-align: middle;
-      width: 68%;
+      width: 60%;
 
       &.ui-slider-horizontal {
         margin-bottom: 15px;
@@ -316,31 +203,109 @@
     display: block;
     width: 100%;
 
-    .ui-slider {
-      display: block;
-      float: left;
-      margin-top: 10px;
-      width: calc(95% - 65px);
-
-      .ui-slider-handle {
-        background-color: #ccc !important;
-        border-color: #fff;
-        margin-top: 2px;
-        outline: none !important;
+    .input-group.input-group-sm {
+      display: inline-flex;
+      height: 34px;
+      margin: 0;
+      padding: 0;
+      width: 38%;
+
+      input {
+        margin: 0;
       }
     }
 
-    .ccm-inline-style-slider-display-value {
-      display: block;
-      float: right;
-      width: 65px;
+    .input[type='range'] {
+      appearance: none;
+      appearance: none;
+      background: $gray-300;
+      background-color: transparent;
+      background-image: linear-gradient($primary, $primary);
+      background-repeat: no-repeat;
+      background-size: 0% 100%;
+      height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+      padding: 0;
+      width: 100%;
 
-      input {
-        display: block;
-        float: right;
-        height: 34px;
-        padding: 0;
-        width: 100%;
+      &:focus {
+        outline: 0;
+
+        &::-webkit-slider-thumb {
+          box-shadow: $form-range-thumb-focus-box-shadow;
+        }
+
+        &::-moz-range-thumb {
+          box-shadow: $form-range-thumb-focus-box-shadow;
+        }
+      }
+
+      &::-moz-focus-outer {
+        border: 0;
+      }
+
+      &::-webkit-slider-thumb {
+        @include gradient-bg($form-range-thumb-bg);
+        @include border-radius($form-range-thumb-border-radius);
+        @include box-shadow($form-range-thumb-box-shadow);
+        @include transition($form-range-thumb-transition);
+        appearance: none;
+        border: $form-range-thumb-border;
+        height: $form-range-thumb-height;
+        margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
+        width: $form-range-thumb-width;
+
+        &:active {
+          @include gradient-bg($form-range-thumb-active-bg);
+        }
+      }
+
+      &::-webkit-slider-runnable-track {
+        @include border-radius($form-range-track-border-radius);
+        @include box-shadow($form-range-track-box-shadow);
+        background-color: $form-range-track-bg;
+        border-color: transparent;
+        color: transparent;
+        cursor: $form-range-track-cursor;
+        height: $form-range-track-height;
+        width: $form-range-track-width;
+      }
+
+      &::-moz-range-thumb {
+        @include gradient-bg($form-range-thumb-bg);
+        @include border-radius($form-range-thumb-border-radius);
+        @include box-shadow($form-range-thumb-box-shadow);
+        @include transition($form-range-thumb-transition);
+        appearance: none;
+        border: $form-range-thumb-border;
+        height: $form-range-thumb-height;
+        width: $form-range-thumb-width;
+
+        &:active {
+          @include gradient-bg($form-range-thumb-active-bg);
+        }
+      }
+
+      &::-moz-range-track {
+        @include border-radius($form-range-track-border-radius);
+        @include box-shadow($form-range-track-box-shadow);
+        background-color: $form-range-track-bg;
+        border-color: transparent;
+        color: transparent;
+        cursor: $form-range-track-cursor;
+        height: $form-range-track-height;
+        width: $form-range-track-width;
+      }
+
+      &:disabled {
+        pointer-events: none;
+
+        &::-webkit-slider-thumb {
+          background-color: $form-range-thumb-disabled-bg;
+        }
+
+        &::-moz-range-thumb {
+          background-color: $form-range-thumb-disabled-bg;
+        }
       }
     }
   }
@@ -356,7 +321,6 @@
     outline: none;
     padding: 3px 8px;
     vertical-align: middle;
-
   }
 
   > li:first-child {
@@ -399,6 +363,8 @@
 
   li.ccm-inline-toolbar-icon-selected {
     a,
+    .btn,
+    .btn:hover
     a:hover {
       background-color: $blue;
 
@@ -449,7 +415,6 @@
       }
     }
 
-
     .bootstrap-select {
       background: transparent;
       float: right;
@@ -473,7 +438,7 @@
         width: 100%;
 
         &:hover,
-        &[aria-expanded=true] {
+        &[aria-expanded='true'] {
           @include gradient-y(#f3f3f3, #d2d2d2);
           box-shadow: inset 1px 1px 5px -1px rgba(0, 0, 0, 0.35) !important;
           transition: none;
@@ -506,13 +471,21 @@
     background-image: none;
   }
 
+  toolbar-section-widget {
+    display: none;
+
+    > * {
+      display: none;
+    }
+  }
+
   li.ccm-inline-toolbar-icon-cell > div.ccm-dropdown-menu {
     display: none;
 
     &.active {
       box-shadow: $dropdown-box-shadow;
       display: block;
-      margin-top: 1px;
+      margin-top: 2px;
       position: absolute;
     }
   }

package/assets/cms/scss/_item-select-list.scss

@@ -50,16 +50,15 @@ ul.item-select-list i.ccm-item-select-list-sort {
   font-style: normal;
   margin: 0;
   padding-left: 5px;
-  padding-left: 5px;
-  padding-right: 5px;
   padding-right: 5px;
   position: absolute;
   right: 10px;
   top: 10px;
 
   &::after {
-    content: $fa-var-arrows-alt-v;
-    font-family: FontAwesome;
+    content: '\f338';
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 600;
   }
 
   &:hover {

package/assets/cms/scss/_page-areas.scss

@@ -313,41 +313,46 @@ div#ccm-menu-highlighter.ccm-block-highlight {
  */
 ul.ccm-edit-mode-inline-commands {
   background-color: #fff;
-  height: 20px !important;
+  border-bottom-left-radius: 3px;
+  box-shadow: $popover-box-shadow;
+  display: flex;
+  height: 25px;
   list-style-type: none;
   margin: 0 !important;
   opacity: 0;
   padding: 0 !important;
   position: absolute;
-  right: 1px;
-  top: 1px;
+  right: 0;
+  top: 0;
   z-index: $index-level-inline-commands; // has to be over the click proxy
   li {
-    display: inline-block;
-    height: 20px !important;
-    line-height: 20px !important;
+    align-items: center;
+    display: flex;
     margin: 0 !important;
     padding: 0 !important;
 
+    span {
+      color: #888;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: bold;
+      line-height: 12px;
+      padding-left: 4px;
+      padding-right: 4px;
+      text-transform: uppercase;
+    }
+
     a {
-      color: #555 !important;
+      color: #444 !important;
       display: inline-block;
       font-weight: lighter;
-      height: 20px !important;
-      line-height: 20px !important;
+      padding: 0;
       position: relative;
       text-align: center;
-      width: 20px !important;
+      width: 25px !important;
 
       &:hover {
-        color: #000 !important;
-      }
-
-      i {
-        left: 3px;
-        position: absolute;
-        top: 3px;
-        vertical-align: middle;
+        color: $blue !important;
       }
 
       &.ccm-edit-mode-inline-command-move {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.1.17",
+  "version": "1.2.1",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",
@@ -44,7 +44,7 @@
     "pnotify": "^5.2.0",
     "selectize": "^0.12.6",
     "selectize-bootstrap4-theme": "^2.0.2",
-    "spectrum-colorpicker": "^1.8.1",
+    "spectrum-colorpicker2": "^2.0.0",
     "tristate": "^1.2.0",
     "underscore": "^1.13",
     "v-calendar": "^1.0.8",