@concretecms/bedrock 1.3.4 → 1.3.7

package/assets/cms/components/file-manager/Chooser/FileUpload.vue

@@ -3,6 +3,7 @@
         <chooser-header :show-form-factor-selector="false" :title="title"/>
 
         <uploader
+            :dropzone-options="dropzoneOptions"
             @upload-complete="$emit('upload-complete')"
         />
     </div>
@@ -29,6 +30,10 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
         }
     },
     watch: {

package/assets/cms/components/file-manager/Chooser.vue

@@ -37,6 +37,7 @@
                                    :resultsFormFactor.sync="resultsFormFactor"
                                    :filesReadyToUpload.sync="filesReadyToUpload"
                                    :filters="filters"
+                                   :dropzone-options="dropzoneOptions"
                                    @upload-complete="activateTabByKey('recent-uploads')"
                                    ref="c"
                         />
@@ -133,6 +134,10 @@ export default {
         },
         filters: {
             type: Array
+        },
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
         }
     },
     created() {

package/assets/cms/components/file-manager/Uploader/UploadFromComputer.vue

@@ -4,7 +4,7 @@
             <div class="dz-default dz-message">
                 <button type="button" class="dz-button">
                     <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjEuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMzIgMTMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzIgMTMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe29wYWNpdHk6MC45O2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0U2RjVGRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDF7ZmlsbDojNEE5MEUyO30KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojRThGNkZGO3N0cm9rZS13aWR0aDo4O30KPC9zdHlsZT4KPGcgaWQ9IlBhZ2UtMSI+Cgk8ZyBpZD0iRmlsZS1NYW5hZ2VyLS0tRmlsZVNldHMtRHJvcGRvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NTUuMDAwMDAwLCAtNjY3LjAwMDAwMCkiPgoJCTxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjEiIHk9IjQ2OCIgY2xhc3M9InN0MCIgd2lkdGg9IjE0NDAiIGhlaWdodD0iNTQwIi8+CgkJPGcgaWQ9Imljb25zOC1kcmFnLWFuZC1kcm9wIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NTUuMDAwMDAwLCA2NjcuMDAwMDAwKSI+CgkJCTxwYXRoIGlkPSJTaGFwZSIgY2xhc3M9InN0MSIgZD0iTTMuMiwwYzAsMC0wLjEsMC0wLjEsMEMzLjEsMCwzLDAsMi45LDBDMi44LDAsMi43LDAuMSwyLjYsMC4xQzIuNCwwLjIsMi4xLDAuMiwxLjgsMC4zCgkJCQlDMS43LDAuNCwxLjUsMC41LDEuNCwwLjZDMS4yLDAuOCwxLDAuOSwwLjksMUMwLjgsMS4xLDAuNywxLjMsMC42LDEuNEMwLjUsMS42LDAuMywxLjgsMC4yLDIuMUMwLjIsMi4yLDAuMiwyLjQsMC4xLDIuNQoJCQkJQzAuMSwyLjcsMCwyLjksMCwzLjF2MTMuMWMwLDEuNywxLjQsMy4xLDMuMiwzLjFzMy4yLTEuNCwzLjItMy4xVjYuNGgxM2MxLjcsMCwzLjEtMS40LDMuMS0zLjJTMjEuMSwwLDE5LjQsMEgzLjUKCQkJCUMzLjQsMCwzLjQsMCwzLjIsMEMzLjMsMCwzLjIsMCwzLjIsMHogTTMyLjEsMEMzMC40LDAsMjksMS40LDI5LDMuMnMxLjQsMy4yLDMuMSwzLjJoNi42YzEuNywwLDMuMS0xLjQsMy4xLTMuMlM0MC40LDAsMzguNywwCgkJCQlIMzIuMXogTTUxLjQsMGMtMS43LDAtMy4xLDEuNC0zLjEsMy4yczEuNCwzLjIsMy4xLDMuMmg2LjZjMS43LDAsMy4xLTEuNCwzLjEtMy4yUzU5LjgsMCw1OC4xLDBINTEuNHogTTcwLjcsMAoJCQkJYy0xLjcsMC0zLjEsMS40LTMuMSwzLjJzMS40LDMuMiwzLjEsMy4yaDYuNmMxLjcsMCwzLjEtMS40LDMuMS0zLjJTNzkuMSwwLDc3LjQsMEg3MC43eiBNOTAsMGMtMS43LDAtMy4xLDEuNC0zLjEsMy4yCgkJCQlzMS40LDMuMiwzLjEsMy4yaDEzdjkuOGMwLDEuNywxLjQsMy4xLDMuMiwzLjFjMS44LDAsMy4yLTEuNCwzLjItMy4xVjMuMWMwLTAuMi0wLjEtMC40LTAuMS0wLjZjMC0wLjIsMC0wLjMtMC4xLTAuNQoJCQkJYy0wLjEtMC4yLTAuMi0wLjQtMC40LTAuN2MtMC4xLTAuMS0wLjItMC4zLTAuMy0wLjRjLTAuMi0wLjItMC4zLTAuMy0wLjUtMC40Yy0wLjItMC4xLTAuMy0wLjItMC41LTAuMwoJCQkJYy0wLjItMC4xLTAuNS0wLjEtMC44LTAuMmMtMC4xLDAtMC4yLTAuMS0wLjMtMC4xYy0wLjEsMC0wLjEsMC0wLjIsMGMwLDAtMC4xLDAtMC4xLDBjMCwwLDAsMC0wLjEsMGMtMC4xLDAtMC4xLDAtMC4yLDBIOTB6CgkJCQkgTTMuMiwyNS44Yy0xLjgsMC0zLjIsMS40LTMuMiwzLjF2Ni42YzAsMS43LDEuNCwzLjEsMy4yLDMuMXMzLjItMS40LDMuMi0zLjF2LTYuNkM2LjQsMjcuMiw1LDI1LjgsMy4yLDI1Ljh6IE0xMDYuMiwyNS44CgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXY2LjZjMCwxLjcsMS40LDMuMSwzLjIsMy4xYzEuOCwwLDMuMi0xLjQsMy4yLTMuMXYtNi42QzEwOS41LDI3LjIsMTA4LDI1LjgsMTA2LjIsMjUuOHogTTMuMiw0NS4xCgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXY2LjZDMCw1Ni41LDEuNCw1OCwzLjIsNThzMy4yLTEuNCwzLjItMy4xdi02LjZDNi40LDQ2LjUsNSw0NS4xLDMuMiw0NS4xeiBNNDEuOSw0NS4xCgkJCQlDMzQuOCw0NS4xLDI5LDUwLjksMjksNTh2NjEuMmMwLDcuMSw1LjgsMTIuOSwxMi45LDEyLjloNzcuM2M3LjEsMCwxMi45LTUuOCwxMi45LTEyLjlWNThjMC03LjEtNS44LTEyLjktMTIuOS0xMi45SDQxLjl6CgkJCQkgTTQxLjksNTEuNWg3Ny4zYzMuNiwwLDYuNCwyLjgsNi40LDYuNHY2MS4yYzAsMy42LTIuOCw2LjQtNi40LDYuNEg0MS45Yy0zLjYsMC02LjQtMi44LTYuNC02LjRWNTgKCQkJCUMzNS40LDU0LjQsMzguMyw1MS41LDQxLjksNTEuNXogTTMuMiw2NC40Yy0xLjgsMC0zLjIsMS40LTMuMiwzLjF2Ni42YzAsMS43LDEuNCwzLjEsMy4yLDMuMXMzLjItMS40LDMuMi0zLjF2LTYuNgoJCQkJQzYuNCw2NS44LDUsNjQuNCwzLjIsNjQuNHogTTc0LDcwLjhWMTAzbDcuOC02LjZsNC45LDExLjVsNC4xLTEuOGwtNS4yLTExLjNsMTAuOS0xLjRMNzQsNzAuOHogTTMuMiw4My43CgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXYxMi43YzAsMC4xLDAsMC4xLDAsMC4yYzAsMCwwLDAsMCwwLjFjMCwwLDAsMC4xLDAsMC4xYzAsMC4xLDAsMC4xLDAsMC4yYzAsMC4xLDAuMSwwLjIsMC4xLDAuMwoJCQkJYzAuMSwwLjMsMC4xLDAuNSwwLjIsMC44YzAuMSwwLjIsMC4yLDAuMywwLjMsMC41YzAuMSwwLjIsMC4yLDAuNCwwLjQsMC41YzAuMSwwLjEsMC4zLDAuMiwwLjQsMC4zYzAuMiwwLjEsMC40LDAuMywwLjcsMC40CgkJCQljMC4xLDAuMSwwLjMsMC4xLDAuNSwwLjFjMC4yLDAsMC40LDAuMSwwLjYsMC4xaDE2LjNjMS43LDAsMy4xLTEuNCwzLjEtMy4ycy0xLjQtMy4yLTMuMS0zLjJoLTEzdi05LjhDNi40LDg1LjEsNSw4My43LDMuMiw4My43CgkJCQl6Ii8+CgkJPC9nPgoJCTxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS00IiB4PSI0IiB5PSIxNzciIGNsYXNzPSJzdDIiIHdpZHRoPSIxNDMyIiBoZWlnaHQ9IjgyOSIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=" alt="Drop files here or click to upload">
-                    <span>Drop files here or click to upload</span>
+                    <span>{{ this.dropzoneOptions && this.dropzoneOptions.dictDefaultMessage ? this.dropzoneOptions.dictDefaultMessage : 'Drop files here or click to upload' }}</span>
                 </button>
             </div>
             <input type="file" class="ccm-file-uploader-container-dropzone-file-element d-none" multiple="multiple">
@@ -57,6 +57,10 @@ export default {
             type: Object,
             default: () => ({})
         },
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
+        },
         replaceFileId: {
             type: Number,
             required: false,
@@ -72,7 +76,7 @@ export default {
         },
         dropzoneSettings() {
             const me = this
-            return {
+            const dropzoneOptions = {
                 url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/upload`,
                 previewTemplate: this.itemTemplate,
                 autoProcessQueue: false,
@@ -126,8 +130,8 @@ export default {
 
                 queuecomplete: function () {
                     if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
+                        const fileIds = []
                         if (me.uploadedFiles.length !== 0) {
-                            const fileIds = []
                             me.uploadedFiles.forEach(function(file) {
                                 fileIds.push(file.fID)
                             })
@@ -135,7 +139,7 @@ export default {
                             // ConcreteEvent.publish('FileManagerSelectFile', { fID: fileIds })
                             me.uploadedFiles = []
                         }
-                        me.uploadComplete()
+                        me.uploadComplete(fileIds)
                     }
                     me.refresh()
                 },
@@ -161,6 +165,38 @@ export default {
                     $fileElement.addClass('in-progress')
                 }
             }
+            if (this.dropzoneOptions) {
+                for (const key in this.dropzoneOptions) {
+                    let skipMimeTypes
+                    switch (key) {
+                    case '_dontResizeMimeTypes':
+                        skipMimeTypes = this.dropzoneOptions._dontResizeMimeTypes
+                        if (skipMimeTypes && skipMimeTypes.length) {
+                            dropzoneOptions.transformFile = function(file, done) {
+                                if (
+                                    (this.options.resizeWidth || this.options.resizeHeight) &&
+                                            file && file.type && file.type.match(/image.*/) &&
+                                            skipMimeTypes.indexOf(file.type) < 0
+                                ) {
+                                    return this.resizeImage(
+                                        file,
+                                        this.options.resizeWidth,
+                                        this.options.resizeHeight,
+                                        this.options.resizeMethod,
+                                        done
+                                    )
+                                }
+                                return done(file)
+                            }
+                        }
+                        break
+                    default:
+                        dropzoneOptions[key] = this.dropzoneOptions[key]
+                        break
+                    }
+                }
+            }
+            return dropzoneOptions
         }
     },
     mounted() {
@@ -170,14 +206,14 @@ export default {
         $(me.$refs.dropzoneElement).dropzone(settings)
         $(window).on('resize', _.throttle(me.refresh, 100))
 
-        ConcreteEvent.subscribe('FileUploaderUploadSelectedFiles', function(e) {
-            me.dropzone.options.autoProcessQueue = true
-            me.dropzone.processQueue()
+        ConcreteEvent.subscribe('FileUploaderUploadSelectedFiles', () => {
+            this.startUploading()
         })
     },
     watch: {
         filesInQueue() {
             const filesInQueue = this.filesInQueue
+            this.$emit('files-ready-to-upload', filesInQueue)
             ConcreteEvent.publish('FileUploaderFilesReadyToUpload', filesInQueue)
         },
         isUploadInProgress(val, oldVal) {
@@ -222,8 +258,12 @@ export default {
 
             this.dropzone.removeAllFiles(true)
         },
-        uploadComplete() {
-            this.$emit('upload-complete')
+        startUploading() {
+            this.dropzone.options.autoProcessQueue = true
+            this.dropzone.processQueue()
+        },
+        uploadComplete(fileIds) {
+            this.$emit('upload-complete', fileIds)
 
             ConcreteAlert.notify({
                 title: 'Complete',

package/assets/cms/components/file-manager/Uploader.vue

@@ -2,6 +2,7 @@
     <div>
         <upload-from-computer
             :upload-directory-id="uploadDirectoryId"
+            :dropzone-options="dropzoneOptions"
             @upload-complete="$emit('upload-complete')"
             @uploadProgressStateChange="isUploadInProgress = $event"/>
 
@@ -23,6 +24,12 @@ export default {
         UploadFromComputer,
         ConcreteFileDirectoryInput
     },
+    props: {
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
+        }
+    },
     data: () => ({
         uploadDirectoryId: 0,
         isUploadInProgress: false

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

@@ -1,29 +1,29 @@
 <template>
     <div class="ccm-item-selector-group">
-        <input type="hidden" :name="inputName" :value="selectedUserID" />
-
-        <div class="ccm-item-selector-choose" v-if="!selectedUser && !isLoading">
-            <button type="button" @click="openChooser" class="btn btn-secondary">
-                {{chooseText}}
-            </button>
-        </div>
+        <input type="hidden" :name="inputName" :value="selectedUserID" v-if="inputName !== ''" />
 
         <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="reset" class="ccm-item-selector-reset btn btn-secondary">
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
                     <i class="fa fa-times-circle"></i>
                 </button>
             </div>
         </div>
 
-        <div class="ccm-item-selector-loaded" v-if="selectedUser !== null">
+        <div class="ccm-item-selector-choose" v-else-if="!selectedUser">
+            <button type="button" @click="openChooser" :disabled="readonly" class="btn btn-secondary">
+                {{chooseText}}
+            </button>
+        </div>
+
+        <div class="ccm-item-selector-loaded" v-else="selectedUser !== null">
             <div class="btn-group">
-                <div class="btn btn-secondary">
+                <div class="btn btn-secondary" :class="{disabled: readonly}">
                     <span v-html="selectedUser.avatar"></span>
                     <span class="ccm-item-selector-title">{{selectedUser.displayName}}</span>
                 </div>
-                <button type="button" @click="reset" class="ccm-item-selector-reset btn btn-secondary">
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
                     <i class="fa fa-times-circle"></i>
                 </button>
             </div>
@@ -35,21 +35,32 @@
 export default {
     data() {
         return {
-            isLoading: false,
+            isLoadingUserID: 0 /* integer */,
             selectedUser: null /* json object */,
             selectedUserID: 0 /* integer */
         }
     },
+    computed: {
+        isLoading() {
+            return this.isLoadingUserID > 0
+        }
+    },
     props: {
         inputName: {
             type: String,
-            required: true
+            default: ''
         },
         userId: {
-            type: Number
+            type: Number,
+            default: 0
         },
         chooseText: {
-            type: String
+            type: String,
+            default: 'Choose a User'
+        },
+        readonly: {
+            type: Boolean,
+            default: false
         }
     },
     watch: {
@@ -75,22 +86,31 @@ export default {
             this.selectedUserID = selectedUsers[0]
         },
         openChooser: function() {
-            var my = this
-            window.ConcreteUserManager.launchDialog(function(r) {
-                my.loadUser(r.id)
+            window.ConcreteUserManager.launchDialog((r) => {
+                this.loadUser(r.id)
             })
         },
         loadUser(userId) {
-            var my = this
-            my.isLoading = true
-            window.ConcreteUserManager.getUserDetails(userId, function(r) {
-                my.isLoading = false
-                my.selectedUser = r.users[0]
-                my.selectedUserID = userId
+            userId = parseInt(userId)
+            if (this.isLoadingUserID === userId) {
+                return
+            }
+            this.isLoadingUserID = userId
+            window.ConcreteUserManager.getUserDetails(userId, (r) => {
+                if (this.isLoadingUserID !== userId) {
+                    return
+                }
+                this.selectedUserID = userId
+                this.selectedUser = r.users[0]
+                this.$nextTick(() => {
+                    if (this.isLoadingUserID === userId) {
+                        this.isLoadingUserID = 0
+                    }
+                })
             })
         },
         reset() {
-            this.isLoading = false
+            this.isLoadingUserID = 0
             this.selectedUserID = null
         }
     }

package/assets/cms/js/file-manager/uploader.js

@@ -974,8 +974,7 @@
 
                 initYourComputerTab: function () {
                     fileUploader.uploadedFiles = []
-
-                    $dialogEl.find('.ccm-file-upload-container').dropzone({
+                    const dropzoneOptions = {
                         url: CCM_DISPATCHER_FILENAME + '/ccm/system/file/upload',
                         previewTemplate: fileUploader.templates.getPreviewItem().html(),
                         autoProcessQueue: false,
@@ -1096,7 +1095,39 @@
                             $dialogEl.find('.ccm-directory-selector').attr('disabled', 'disabled').selectpicker('refresh')
                             $dialogEl.find('.ccm-file-uploader-create-new-directory-button').addClass('disabled')
                         }
-                    })
+                    }
+                    if (this.options && this.options.dropzone) {
+                        for (const key in this.options.dropzone) {
+                            let skipMimeTypes
+                            switch (key) {
+                                case '_dontResizeMimeTypes':
+                                    skipMimeTypes = this.options.dropzone._dontResizeMimeTypes
+                                    if (skipMimeTypes && skipMimeTypes.length) {
+                                        dropzoneOptions.transformFile = function(file, done) {
+                                            if (
+                                                (this.options.resizeWidth || this.options.resizeHeight) &&
+                                                file && file.type && file.type.match(/image.*/) &&
+                                                skipMimeTypes.indexOf(file.type) < 0
+                                            ) {
+                                                return this.resizeImage(
+                                                    file,
+                                                    this.options.resizeWidth,
+                                                    this.options.resizeHeight,
+                                                    this.options.resizeMethod,
+                                                    done
+                                                )
+                                            }
+                                            return done(file)
+                                        }
+                                    }
+                                    break
+                                default:
+                                    dropzoneOptions[key] = this.options.dropzone[key]
+                                    break
+                            }
+                        }
+                    }
+                    $dialogEl.find('.ccm-file-upload-container').dropzone(dropzoneOptions)
                 },
 
                 uploadComplete: function () {

package/assets/cms/scss/_base.scss

@@ -100,3 +100,4 @@
 @import './utilities';
 @import './popover';
 @import './nav';
+@import './nav-sidebar';

package/assets/cms/scss/_nav-sidebar.scss

@@ -0,0 +1,43 @@
+div.ccm-ui {
+  .nav {
+    &.nav-sidebar {
+      @include border-radius($list-group-border-radius);
+
+      .nav-item {
+        border: $list-group-border-width solid $list-group-border-color;
+
+        &:first-child {
+          @include border-top-radius(inherit);
+        }
+
+        &:last-child {
+          @include border-bottom-radius(inherit);
+        }
+
+        + .nav-item {
+          border-top-width: 0;
+        }
+
+        a {
+          &:hover {
+            background-color: $gray-100;
+          }
+
+          &.active {
+            position: relative;
+
+            &::before {
+              background-color: $blue;
+              bottom: 0;
+              content: '';
+              left: 0;
+              position: absolute;
+              top: 0;
+              width: 2px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/assets/cms/scss/_type.scss

@@ -1,25 +1,40 @@
-div.ccm-ui {
-  h1 {
+// Note - ideally these font families should be handled by Bootstrap but when using with
+// A bootstrap theme the font family from the theme can sometimes take precedence. So let's
+// redeclare it here as well.
+body div.ccm-ui {
+  h1,
+  .h1 {
+    font-family: $headings-font-family;
     font-weight: bold;
   }
 
-  h2 {
+  h2,
+  .h2 {
+    font-family: $headings-font-family;
     font-weight: bold;
   }
 
-  h3 {
+  h3,
+  .h3 {
+    font-family: $headings-font-family;
     font-weight: 300;
   }
 
-  h4 {
+  h4,
+  .h4 {
+    font-family: $headings-font-family;
     font-weight: 700;
   }
 
-  h5 {
+  h5,
+  .h5 {
+    font-family: $headings-font-family;
     font-weight: 600;
   }
 
-  h6 {
+  h6,
+  .h6 {
+    font-family: $headings-font-family;
     font-weight: normal;
     text-transform: uppercase;
   }

package/assets/cms/scss/_variables.scss

@@ -27,6 +27,14 @@ $primary: #4a90e2;
 $body-color: $gray-700;
 $small-font-size: 0.9rem;
 $text-muted: $gray-500;
+// Note, this is the same as $font-family-sans-serif, but we need to explicitly declare it, and since this
+// file is parsed before the bootstrap variables file we don't have access to that variable yet. We have to
+// explicitly define headings-font-family because when the CMS css file is used with Bedrock themes that
+// variable will probably be defined and we will have theme h1, h2 styles bleeding through into our styles.
+// So in order to do that, let's set our own sans serif variable here:
+$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+// That variable will be used in Bootstrap. And then we can reference it here.
+$headings-font-family: $font-family-sans-serif;
 
 /* horizontal rules */
 $hr-color: $gray-200;

package/assets/cms/scss/bootstrap/_reboot.scss

@@ -20,7 +20,7 @@
 }
 
 
-.ccm-ui {
+body div.ccm-ui { // Added body for extra specificity
   margin: 0; // 1
   font-family: $font-family-base;
   @include font-size($font-size-base);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.3.4",
+  "version": "1.3.7",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",