@concretecms/bedrock 1.3.7 → 1.4.1

package/assets/cms/scss/_popover.scss

@@ -1,7 +1,12 @@
 #ccm-popover-menu-container {
   .popover {
+    position: absolute;
     z-index: 2001;
 
+    .popover-arrow {
+      display: none;
+    }
+
     &.bs-popover-top,
     &.bs-popover-bottom {
       .popover-arrow {

package/assets/cms/scss/_select-combo-box.scss

@@ -0,0 +1,18 @@
+/**
+ * Handles fancy selects (currently TomSelect, formerly a million different things like Bootstrap Select,
+ * Selectize, select2, etc... Most of the styles for these components are contained in their own
+ * library styles included in _base.scss, but this includes extensions to those component styles
+ */
+@import '~tom-select/src/scss/tom-select.bootstrap5';
+
+/**
+ * Customize TomSelect drop shadow. Wish we could do this with some variables but the box shadow is not
+ * exposed as a variable
+ */
+.ccm-ui {
+  .ts-dropdown,
+  .ts-dropdown.form-select,
+  .ts-dropdown.form-control {
+    box-shadow: $dropdown-box-shadow;
+  }
+}

package/assets/cms/scss/_toolbar.scss

@@ -131,6 +131,10 @@ div#ccm-toolbar {
         padding: 0 17px;
         position: relative;
         text-decoration: none;
+
+        > .ts-wrapper {
+          width: 100%;
+        }
       }
 
     }
@@ -260,26 +264,13 @@ div#ccm-toolbar {
   div.ccm-menu-item-site-list-container {
     padding: 0 17px;
     text-align: left;
-    width: 240px;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    .btn {
-      padding-left: 9px;
-      padding-right: 9px;
-    }
+    width: 360px;
 
     i {
       margin-left: 0;
       margin-right: 8px;
     }
 
-    .dropdown-menu {
-      max-height: 400px;
-    }
-
   }
 
   a.ccm-menu-item-site-list {

package/assets/cms/scss/_transitions.scss

@@ -24,4 +24,17 @@
   opacity: 0;
 }
 
+/**
+ * General fade
+ */
+.concrete-fade-enter-active,
+.concrete-fade-leave-active {
+  transition: opacity 0.15s ease-out;
+}
+
+.concrete-fade-enter,
+.concrete-fade-leave-to {
+  opacity: 0;
+}
+
 

package/assets/cms/scss/_variables.scss

@@ -23,6 +23,8 @@ $dark-blue: #005163;
 
 $primary: #4a90e2;
 
+$min-contrast-ratio: 3;
+
 /* typography */
 $body-color: $gray-700;
 $small-font-size: 0.9rem;
@@ -43,6 +45,7 @@ $hr-opacity: 1;
 /* borders */
 $border-radius: 3px;
 $border-radius-sm: 2px;
+$border-color-translucent: rgba(#000, 0.075);
 
 /* buttons */
 $btn-font-weight: 600;
@@ -69,7 +72,7 @@ $form-label-font-weight: 600;
 
 /* cards */
 $card-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
-$card-border-width: 0;
+$card-border-width: 1px;
 
 /* transitions */
 $transition-base: all 0.25s ease-in-out;
@@ -84,13 +87,13 @@ $modal-sm: 420px;
 $modal-header-border-width: 0;
 $modal-content-border-width: 0;
 $modal-footer-border-width: 0;
-$modal-content-border-radius: 0;
-$modal-content-inner-border-radius: 0;
+$modal-content-border-radius: 5px;
+$modal-content-inner-border-radius: 5px;
 $modal-header-padding-y: 1.25rem;
 $modal-header-padding-x: 1.8rem;
 $modal-title-line-height: 1.25em;
 $modal-inner-padding: 1.8rem;
-$modal-fade-transform: none;
+$modal-fade-transform: scale(0.8);
 $modal-transition: 0.1s ease-in-out;
 $modal-content-box-shadow-sm-up: 0 2px 4px 2px rgba(0, 0, 0, 0.2);
 $modal-content-box-shadow-xs: 0 2px 4px 2px rgba(0, 0, 0, 0.2);
@@ -134,10 +137,18 @@ $dropdown-box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65,
 $popover-border-color: transparent;
 $popover-border-radius: 5px;
 $popover-inner-border-radius: 5px;
-$popover-border-width: 0;
 $popover-box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
-$popover-arrow-width: 0;
-$popover-arrow-height: 0;
+// Originally I had set the following three items as well, but I can't do that. Why?
+// Setting these unintentionally removes the arrow from guide popovers (the walk throughs we launch
+// from the help dialog. The arrows are very important in that context so let's not globally disable them.
+// (Why does border width set those to zero? No idea. But I had to disable my setting of border width to
+// get this to work as well.)
+// So instead, in order to remove the arrow from the in-page popovers (which I think looks gauche) let's
+// Use separate CSS within the _popover.scss file, rather than globally removing them. Finally, let's
+// Get rid of the outer border around popovers by setting a transparent color rather than border width of 0.
+// $popover-border-width: 0;
+// $popover-arrow-width: 0;
+// $popover-arrow-height: 0;
 
 /* Links */
 $link-decoration: none;

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

@@ -2,20 +2,15 @@
 // Content grouping
 //
 // 1. Reset Firefox's gray color
-// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
 
 hr {
   margin: $hr-margin-y 0;
   color: $hr-color; // 1
-  background-color: currentColor;
   border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
   opacity: $hr-opacity;
 }
 
-hr:not([size]) {
-  height: $hr-height; // 2
-}
-
 
 // Typography
 //
@@ -77,16 +72,14 @@ p {
 
 // Abbreviations
 //
-// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
-// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-// 4. Prevent the text-decoration to be skipped.
+// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+// 2. Add explicit cursor to indicate changed behavior.
+// 3. Prevent the text-decoration to be skipped.
 
-abbr[title],
-abbr[data-bs-original-title] { // 1
-  text-decoration: underline dotted; // 2
-  cursor: help; // 3
-  text-decoration-skip-ink: none; // 4
+abbr[title] {
+  text-decoration: underline dotted; // 1
+  cursor: help; // 2
+  text-decoration-skip-ink: none; // 3
 }
 
 
@@ -162,7 +155,7 @@ small {
 
 mark {
   padding: $mark-padding;
-  background-color: $mark-bg;
+  background-color: var(--#{$prefix}highlight-bg);
 }
 
 
@@ -186,11 +179,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--#{$prefix}link-color);
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--#{$prefix}link-hover-color);
     text-decoration: $link-hover-decoration;
   }
 }
@@ -217,8 +210,6 @@ kbd,
 samp {
   font-family: $font-family-code;
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-  direction: ltr #{"/* rtl:ignore */"};
-  unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -243,7 +234,7 @@ pre {
 
 code {
   @include font-size($code-font-size);
-  color: $code-color;
+  color: var(--#{$prefix}code-color);
   word-wrap: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
@@ -382,11 +373,11 @@ select {
   }
 }
 
-// Remove the dropdown arrow in Chrome from inputs built with datalists.
+// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
 // See https://stackoverflow.com/a/54997118
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+  display: none !important;
 }
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ -508,16 +499,10 @@ legend {
 }
 
 
-// Inherit font family and line height for file input buttons
-
-::file-selector-button {
-  font: inherit;
-}
-
-// 1. Change font properties to `inherit`
+// 1. Inherit font family and line height for file input buttons
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
-::-webkit-file-upload-button {
+::file-selector-button {
   font: inherit; // 1
   -webkit-appearance: button; // 2
 }

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

@@ -22,13 +22,23 @@
 
 body div.ccm-ui { // Added body for extra specificity
   margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size($font-size-base);
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $body-color;
-  text-align: $body-text-align;
-  //background-color: $body-bg; // 2 Concrete can't have this
+  font-family: var(--#{$prefix}body-font-family);
+  // Concrete CMS
+  // I know this is not ideal – font size root is usually 1rem and then you use the browser defaults. However
+  // In the case of our CMS css intermingling with theme CSS, there are older theme frameworks that explicitly
+  // set font size on html (as in Bootstrap 3, etc...). In those cases, sometimes they set really low font sizes
+  // on html, which then in turn means the Concrete panels, etc... have tiny font sizes. For the CMS CSS to get
+  // around this we need to just be explicit about our root font size.
+  // And NO – before you ask – we cannot just change our $font-size-base to 16px in our variables.scss CMS file
+  // because a million Bootstrap things are derived from this, and they're all using 1rem and 1.2rem and
+  // !@#$! like that, so when they try to use 16px / 1.2rem or whatever they complain about mixing units.
+  font-size: 16px;
+  //@include font-size(var(--#{$prefix}body-font-size));
+  font-weight: var(--#{$prefix}body-font-weight);
+  line-height: var(--#{$prefix}body-line-height);
+  color: var(--#{$prefix}body-color);
+  // text-align: var(--#{$prefix}body-text-align); // Concrete can't have this
+  // background-color: var(--#{$prefix}body-bg); ; // 2 Concrete can't have this
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }

package/assets/cms/scss/bootstrap/_root-modified.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable order/order */
 .ccm-ui {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
@@ -6,48 +7,68 @@
   // Generate palettes for full colors, grays, and theme colors.
 
   @each $color, $value in $colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $grays {
-    --#{$variable-prefix}gray-#{$color}: #{$value};
+    --#{$prefix}gray-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors {
-    --#{$variable-prefix}#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-colors-rgb {
-    --#{$variable-prefix}#{$color}-rgb: #{$value};
+    --#{$prefix}#{$color}-rgb: #{$value};
   }
 
-  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
-  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
-  --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};
+  --#{$prefix}white-rgb: #{to-rgb($white)};
+  --#{$prefix}black-rgb: #{to-rgb($black)};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
-  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
-  --#{$variable-prefix}gradient: #{$gradient};
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
 
   // Root and body
-  // stylelint-disable custom-property-empty-line-before
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
-    --#{$variable-prefix}root-font-size: #{$font-size-root};
+    --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$variable-prefix}body-font-family: #{$font-family-base};
-  --#{$variable-prefix}body-font-size: #{$font-size-base};
-  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
-  --#{$variable-prefix}body-line-height: #{$line-height-base};
-  --#{$variable-prefix}body-color: #{$body-color};
+  --#{$prefix}body-font-family: #{$font-family-base};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}body-color: #{$body-color};
   @if $body-text-align != null {
-    --#{$variable-prefix}body-text-align: #{$body-text-align};
+    --#{$prefix}body-text-align: #{$body-text-align};
   }
-  --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
   // scss-docs-end root-body-variables
-  // stylelint-enable custom-property-empty-line-before
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+
+  --#{$prefix}code-color: #{$code-color};
+
+  --#{$prefix}highlight-bg: #{$mark-bg};
 }

package/assets/cms/scss/file-manager/_thumbnail-image-editor.scss

@@ -0,0 +1,45 @@
+div.ccm-image-thumbnail-editor {
+  .ccm-image-thumbnail-editor-cropper {
+    background: #ddd;
+    height: 600px;
+    width: 100%;
+  }
+
+  .ccm-image-thumbnail-editor-controls {
+    left: 20px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    a {
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.8);
+      cursor: pointer;
+      display: flex;
+      height: 40px;
+      margin-bottom: 10px;
+      text-align: center;
+      width: 40px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        background-color: $primary;
+      }
+
+      svg {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
+  .ccm-image-thumbnail-editor-save {
+    bottom: 20px;
+    left: 20px;
+    position: absolute;
+    right: 20px;
+  }
+}

package/assets/cms/scss/panels/_help.scss

@@ -6,17 +6,7 @@
   }
 
   section {
-
     margin-bottom: 1.5rem;
-
-    >div.ccm-panel-help-media {
-      display: flex;
-
-      >div {
-        flex: 1;
-      }
-    }
-
   }
 
   h1 {

package/assets/staging/scss/frontend/_frontend.scss

@@ -0,0 +1,12 @@
+div.ccm-production-notice-staging {
+  background-color: black;
+  bottom: 0;
+  color: white;
+  font-weight: bold;
+  left: 0;
+  padding: 10px;
+  position: fixed;
+  text-align: center;
+  width: 100%;
+  z-index: 1000;
+}

package/assets/staging/scss/frontend.scss

@@ -0,0 +1,4 @@
+// This is an entry point so it just includes the partial that includes everything else.
+// That way if we want to include full support in our theme we just include the partial (rather
+// than including the entry point because I think it's bad practice.)
+@import 'frontend/frontend';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.3.7",
+  "version": "1.4.1",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",
@@ -17,10 +17,11 @@
     "ajax-bootstrap-select": "^1.4.5",
     "backstretch": "^1.2.2",
     "blueimp-file-upload": "^10.31.0",
-    "bootbox": "^5.5.1",
-    "bootstrap": "^5.0.1",
+    "bootbox": "github:makeusabrew/bootbox#master",
+    "bootstrap": "^5.2.0",
     "bootstrap-select": "github:snapappointments/bootstrap-select",
     "bootstrap-tourist": "git+https://git@github.com/concrete5/bootstrap-tourist.git",
+    "check-password-strength": "^2.0.7",
     "ckeditor4": "^4.17.1",
     "ckeditor4-vue": "^1.3.2",
     "dropzone": "^5.7.2",
@@ -35,20 +36,19 @@
     "jquery.cookie": "^1.4.1",
     "jquery.fancytree": "^2.37.0",
     "json5": "^2.1.1",
-    "less": "^3.12.2",
-    "less-loader": "^5.0.0",
     "magnific-popup": "^1.1.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.32",
     "nprogress": "^0.2.0",
     "pnotify": "^5.2.0",
-    "selectize": "^0.12.6",
     "selectize-bootstrap4-theme": "^2.0.2",
     "spectrum-colorpicker2": "^2.0.0",
+    "tom-select": "^2.2.2",
     "tristate": "^1.2.0",
     "underscore": "^1.13",
     "v-calendar": "^1.0.8",
     "vue": "^2.6.12",
+    "vue-advanced-cropper": "^1.11.6",
     "vue-js-toggle-button": "^1.3.3",
     "vuedraggable": "^2.24.3"
   },
@@ -64,15 +64,15 @@
   "homepage": "https://github.com/concrete5/concrete5#readme",
   "devDependencies": {
     "@babel/core": "^7.12.3",
-    "@storybook/vue": "^5.3.21",
+    "@storybook/vue": "^6.5.13",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",
     "babel-loader": "^8.2.1",
     "babel-preset-vue": "^2.0.2",
     "caniuse-lite": "^1.0",
     "eslint-plugin-vue": "^6.2.2",
-    "laravel-mix": "^5.0.9",
-    "resolve-url-loader": "^3.1.2",
+    "laravel-mix": "^6.0.49",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.32.13",
     "sass-loader": "^8.0.2",
     "standardx": "^5.0.0",