@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/assets/jss/rootStyle.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cardLink = exports.cardSubtitle = exports.cardTitle = exports.title = exports.tooltip = exports.defaultBoxShadow = exports.cardHeader = exports.cardActions = exports.roseCardHeader = exports.primaryCardHeader = exports.infoCardHeader = exports.dangerCardHeader = exports.successCardHeader = exports.warningCardHeader = exports.roseBoxShadow = exports.dangerBoxShadow = exports.warningBoxShadow = exports.successBoxShadow = exports.infoBoxShadow = exports.primaryBoxShadow = exports.redditColor = exports.dribbbleColor = exports.behanceColor = exports.tumblrColor = exports.youtubeColor = exports.pinterestColor = exports.linkedinColor = exports.googleColor = exports.facebookColor = exports.twitterColor = exports.whiteColor = exports.blackColor = exports.grayColor = exports.agilityColor = exports.roseColor = exports.infoColor = exports.successColor = exports.dangerColor = exports.warningColor = exports.primaryColor = exports.defaultFont = exports.card = exports.boxShadow = exports.containerFluid = exports.container = exports.transition = exports.drawerMiniWidth = exports.drawerWidth = exports.hexToRgb = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const hexToRgb = input => {
+  input = input + "";
+  input = input.replace("#", "");
+  let hexRegex = /[0-9A-Fa-f]/g;
+
+  if (!hexRegex.test(input) || input.length !== 3 && input.length !== 6) {
+    throw new Error("input is not a valid hex color.");
+  }
+
+  if (input.length === 3) {
+    let first = input[0];
+    let second = input[1];
+    let last = input[2];
+    input = first + first + second + second + last + last;
+  }
+
+  input = input.toUpperCase(input);
+  let first = input[0] + input[1];
+  let second = input[2] + input[3];
+  let last = input[4] + input[5];
+  return parseInt(first, 16) + ", " + parseInt(second, 16) + ", " + parseInt(last, 16);
+};
+
+exports.hexToRgb = hexToRgb;
+const drawerWidth = 260;
+exports.drawerWidth = drawerWidth;
+const drawerMiniWidth = 80;
+exports.drawerMiniWidth = drawerMiniWidth;
+const transition = {
+  transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
+};
+exports.transition = transition;
+const containerFluid = {
+  paddingRight: "15px",
+  paddingLeft: "15px",
+  marginRight: "auto",
+  marginLeft: "auto",
+  "&:before,&:after": {
+    display: "table",
+    content: '" "'
+  },
+  "&:after": {
+    clear: "both"
+  }
+};
+exports.containerFluid = containerFluid;
+const container = {
+  paddingRight: "15px",
+  paddingLeft: "15px",
+  marginRight: "auto",
+  marginLeft: "auto",
+  "@media (min-width: 768px)": {
+    width: "750px"
+  },
+  "@media (min-width: 992px)": {
+    width: "970px"
+  },
+  "@media (min-width: 1200px)": {
+    width: "1170px"
+  },
+  "&:before,&:after": {
+    display: "table",
+    content: '" "'
+  },
+  "&:after": {
+    clear: "both"
+  }
+};
+exports.container = container;
+const defaultFont = {
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeight: "300",
+  lineHeight: "1.5em"
+};
+exports.defaultFont = defaultFont;
+const primaryColor = ["#9c27b0", "#ab47bc", "#8e24aa", "#af2cc5", "#7b1fa2"];
+exports.primaryColor = primaryColor;
+const warningColor = ["#ff9800", "#ffa726", "#fb8c00", "#ffa21a", "#f57c00", "#faf2cc", "#fcf8e3"];
+exports.warningColor = warningColor;
+const dangerColor = ["#f44336", "#ef5350", "#e53935", "#f55a4e", "#d32f2f", "#ebcccc", "#f2dede"];
+exports.dangerColor = dangerColor;
+const successColor = ["#4caf50", "#66bb6a", "#43a047", "#5cb860", "#388e3c", "#d0e9c6", "#dff0d8"];
+exports.successColor = successColor;
+const infoColor = ["#00acc1", "#26c6da", "#00acc1", "#00d3ee", "#0097a7", "#c4e3f3", "#d9edf7"];
+exports.infoColor = infoColor;
+const roseColor = ["#d4a039", "#000000", "#747474", "#7c7474", "#6c7474"];
+exports.roseColor = roseColor;
+const agilityColor = ["#d4a039", "#000000", "#747474", "#7c7474", "#6c7474"];
+exports.agilityColor = agilityColor;
+const grayColor = ["#999", "#777", "#3C4858", "#AAAAAA", "#D2D2D2", "#DDD", "#555555", "#333", "#eee", "#ccc", "#e4e4e4", "#E5E5E5", "#f9f9f9", "#f5f5f5", "#495057", "#e7e7e7", "#212121", "#c8c8c8", "#505050"];
+exports.grayColor = grayColor;
+const blackColor = "#000";
+exports.blackColor = blackColor;
+const whiteColor = "#FFF";
+exports.whiteColor = whiteColor;
+const twitterColor = "#55acee";
+exports.twitterColor = twitterColor;
+const facebookColor = "#3b5998";
+exports.facebookColor = facebookColor;
+const googleColor = "#dd4b39";
+exports.googleColor = googleColor;
+const linkedinColor = "#0976b4";
+exports.linkedinColor = linkedinColor;
+const pinterestColor = "#cc2127";
+exports.pinterestColor = pinterestColor;
+const youtubeColor = "#e52d27";
+exports.youtubeColor = youtubeColor;
+const tumblrColor = "#35465c";
+exports.tumblrColor = tumblrColor;
+const behanceColor = "#1769ff";
+exports.behanceColor = behanceColor;
+const dribbbleColor = "#ea4c89";
+exports.dribbbleColor = dribbbleColor;
+const redditColor = "#ff4500";
+exports.redditColor = redditColor;
+const boxShadow = {
+  boxShadow: "0 10px 30px -12px rgba(" + hexToRgb(blackColor) + ", 0.42), 0 4px 25px 0px rgba(" + hexToRgb(blackColor) + ", 0.12), 0 8px 10px -5px rgba(" + hexToRgb(blackColor) + ", 0.2)"
+};
+exports.boxShadow = boxShadow;
+const primaryBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(primaryColor[0]) + ",.4)"
+};
+exports.primaryBoxShadow = primaryBoxShadow;
+const infoBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(infoColor[0]) + ",.4)"
+};
+exports.infoBoxShadow = infoBoxShadow;
+const successBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(successColor[0]) + ",.4)"
+};
+exports.successBoxShadow = successBoxShadow;
+const warningBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(warningColor[0]) + ",.4)"
+};
+exports.warningBoxShadow = warningBoxShadow;
+const dangerBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(dangerColor[0]) + ",.4)"
+};
+exports.dangerBoxShadow = dangerBoxShadow;
+const roseBoxShadow = {
+  boxShadow: "0 4px 20px 0 rgba(" + hexToRgb(blackColor) + ",.14), 0 7px 10px -5px rgba(" + hexToRgb(roseColor[0]) + ",.4)"
+};
+exports.roseBoxShadow = roseBoxShadow;
+
+const warningCardHeader = _objectSpread({
+  background: "linear-gradient(60deg, " + warningColor[1] + ", " + warningColor[2] + ")"
+}, warningBoxShadow);
+
+exports.warningCardHeader = warningCardHeader;
+
+const successCardHeader = _objectSpread({
+  background: "linear-gradient(60deg, " + successColor[1] + ", " + successColor[2] + ")"
+}, successBoxShadow);
+
+exports.successCardHeader = successCardHeader;
+
+const dangerCardHeader = _objectSpread({
+  background: "linear-gradient(60deg, " + dangerColor[1] + ", " + dangerColor[2] + ")"
+}, dangerBoxShadow);
+
+exports.dangerCardHeader = dangerCardHeader;
+
+const infoCardHeader = _objectSpread({
+  background: "linear-gradient(60deg, " + infoColor[1] + ", " + infoColor[2] + ")"
+}, infoBoxShadow);
+
+exports.infoCardHeader = infoCardHeader;
+
+const primaryCardHeader = _objectSpread({
+  background: "linear-gradient(60deg, " + primaryColor[1] + ", " + primaryColor[2] + ")"
+}, primaryBoxShadow);
+
+exports.primaryCardHeader = primaryCardHeader;
+
+const roseCardHeader = _objectSpread({
+  background: agilityColor[0]
+}, roseBoxShadow);
+
+exports.roseCardHeader = roseCardHeader;
+const card = {
+  display: "inline-block",
+  position: "relative",
+  width: "100%",
+  margin: "25px 0",
+  boxShadow: "0 1px 4px 0 rgba(" + hexToRgb(blackColor) + ", 0.14)",
+  borderRadius: "6px",
+  color: "rgba(" + hexToRgb(blackColor) + ", 0.87)",
+  background: whiteColor
+};
+exports.card = card;
+
+const cardActions = _objectSpread({
+  margin: "0 20px 10px",
+  paddingTop: "10px",
+  borderTop: "1px solid " + grayColor[8],
+  height: "auto"
+}, defaultFont);
+
+exports.cardActions = cardActions;
+const cardHeader = {
+  margin: "-20px 15px 0",
+  borderRadius: "3px",
+  padding: "15px"
+};
+exports.cardHeader = cardHeader;
+const defaultBoxShadow = {
+  border: "0",
+  borderRadius: "3px",
+  boxShadow: "0 10px 20px -12px rgba(" + hexToRgb(blackColor) + ", 0.42), 0 3px 20px 0px rgba(" + hexToRgb(blackColor) + ", 0.12), 0 8px 10px -5px rgba(" + hexToRgb(blackColor) + ", 0.2)",
+  padding: "10px 0",
+  transition: "all 150ms ease 0s"
+};
+exports.defaultBoxShadow = defaultBoxShadow;
+const tooltip = {
+  padding: "10px 15px",
+  minWidth: "130px",
+  color: whiteColor,
+  lineHeight: "1.7em",
+  background: "rgba(" + hexToRgb(grayColor[6]) + ",0.9)",
+  border: "none",
+  borderRadius: "3px",
+  opacity: "1!important",
+  boxShadow: "0 8px 10px 1px rgba(" + hexToRgb(blackColor) + ", 0.14), 0 3px 14px 2px rgba(" + hexToRgb(blackColor) + ", 0.12), 0 5px 5px -3px rgba(" + hexToRgb(blackColor) + ", 0.2)",
+  maxWidth: "200px",
+  textAlign: "center",
+  fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
+  fontSize: "12px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  textShadow: "none",
+  textTransform: "none",
+  letterSpacing: "normal",
+  wordBreak: "normal",
+  wordSpacing: "normal",
+  wordWrap: "normal",
+  whiteSpace: "normal",
+  lineBreak: "auto"
+};
+exports.tooltip = tooltip;
+const title = {
+  color: grayColor[2],
+  textDecoration: "none",
+  fontWeight: "300",
+  marginTop: "30px",
+  marginBottom: "25px",
+  minHeight: "32px",
+  fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+  "& small": {
+    color: grayColor[1],
+    fontSize: "65%",
+    fontWeight: "400",
+    lineHeight: "1"
+  }
+};
+exports.title = title;
+
+const cardTitle = _objectSpread(_objectSpread({}, title), {}, {
+  marginTop: "0",
+  marginBottom: "3px",
+  minHeight: "auto",
+  "& a": _objectSpread(_objectSpread({}, title), {}, {
+    marginTop: ".625rem",
+    marginBottom: "0.75rem",
+    minHeight: "auto"
+  })
+});
+
+exports.cardTitle = cardTitle;
+const cardSubtitle = {
+  marginTop: "-.375rem"
+};
+exports.cardSubtitle = cardSubtitle;
+const cardLink = {
+  "& + $cardLink": {
+    marginLeft: "1.25rem"
+  }
+};
+exports.cardLink = cardLink;

package/dist/assets/jss/views/layoutStyle.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rootStyle = require("../rootStyle");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const appStyle = theme => ({
+  wrapper: {
+    position: "relative",
+    top: "0",
+    height: "100vh",
+    "&:after": {
+      display: "table",
+      clear: "both",
+      content: '" "'
+    }
+  },
+  mainPanel: _objectSpread(_objectSpread({
+    transitionProperty: "top, bottom, width",
+    transitionDuration: ".2s, .2s, .35s",
+    transitionTimingFunction: "linear, linear, ease",
+    [theme.breakpoints.up("md")]: {
+      width: "calc(100% - ".concat(_rootStyle.drawerWidth, "px)")
+    },
+    overflow: "auto",
+    position: "relative",
+    float: "right"
+  }, _rootStyle.transition), {}, {
+    maxHeight: "100%",
+    width: "100%",
+    overflowScrolling: "touch"
+  }),
+  content: {
+    marginTop: "70px",
+    padding: "30px 15px",
+    minHeight: "calc(100vh - 123px)"
+  },
+  container: _objectSpread({}, _rootStyle.containerFluid),
+  map: {
+    marginTop: "70px"
+  },
+  mainPanelSidebarMini: {
+    [theme.breakpoints.up("md")]: {
+      width: "calc(100% - ".concat(_rootStyle.drawerMiniWidth, "px)")
+    }
+  },
+  mainPanelWithPerfectScrollbar: {
+    overflow: "hidden !important"
+  }
+});
+
+var _default = appStyle;
+exports.default = _default;

package/dist/assets/jss/views/loginBasicStyle.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _colors = require("material-ui/styles/colors");
+
+const styles = {
+  title: {
+    minWidth: 320,
+    maxWidth: 400,
+    paddingTop: '56px',
+    height: 'auto',
+    color: _colors.grey400,
+    fontSize: '30px'
+  },
+  loginContainer: {
+    minWidth: 320,
+    maxWidth: 400,
+    padding: '16px',
+    height: 'auto'
+  },
+  paper: {
+    padding: 20,
+    overflow: 'auto'
+  },
+  buttonsDiv: {
+    textAlign: 'center',
+    padding: 10
+  },
+  flatButton: {
+    color: _colors.grey400
+  },
+  checkRemember: {
+    style: {
+      float: 'left',
+      maxWidth: 180,
+      paddingTop: 5
+    },
+    labelStyle: {
+      color: _colors.grey500
+    },
+    iconStyle: {
+      color: _colors.grey500,
+      borderColor: _colors.grey500,
+      fill: _colors.grey500
+    }
+  },
+  loginBtn: {
+    float: 'right'
+  },
+  btn: {
+    background: '#4f81e9',
+    color: _colors.white,
+    padding: 7,
+    borderRadius: 2,
+    margin: 2,
+    fontSize: 13
+  },
+  btnFacebook: {
+    background: '#4f81e9'
+  },
+  btnGoogle: {
+    background: '#e14441'
+  },
+  btnSpan: {
+    marginLeft: 5
+  }
+};
+var _default = styles;
+exports.default = _default;

package/dist/assets/jss/views/loginStyle.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rootStyle = require("../rootStyle");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const loginStyle = theme => ({
+  container: _objectSpread(_objectSpread({}, _rootStyle.container), {}, {
+    zIndex: "4",
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: "100px"
+    }
+  }),
+  right: {
+    margin: "0",
+    fontSize: "12px",
+    float: "right!important",
+    color: "#d32f2f"
+  },
+  cardTitle: _objectSpread(_objectSpread({}, _rootStyle.cardTitle), {}, {
+    color: _rootStyle.whiteColor
+  }),
+  loader: {
+    width: "100%",
+    height: "100",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textCenter: {
+    textAlign: "center"
+  },
+  justifyContentCenter: {
+    justifyContent: "center !important"
+  },
+  customButtonClass: {
+    "&,&:focus,&:hover": {
+      color: _rootStyle.whiteColor
+    },
+    marginLeft: "5px",
+    marginRight: "5px"
+  },
+  inputAdornment: {
+    marginRight: "18px"
+  },
+  inputAdornmentIcon: {
+    color: _rootStyle.grayColor[6]
+  },
+  cardHidden: {
+    opacity: "0",
+    transform: "translate3d(0, -60px, 0)"
+  },
+  cardHeader: {
+    marginBottom: "20px"
+  },
+  socialLine: {
+    padding: "0.9375rem 0"
+  },
+  wrapper: {
+    height: "auto",
+    minHeight: "100vh",
+    position: "relative",
+    top: "0"
+  },
+  fullPage: {
+    padding: "120px 0",
+    position: "relative",
+    minHeight: "100vh",
+    display: "flex!important",
+    margin: "0",
+    border: "0",
+    color: _rootStyle.whiteColor,
+    alignItems: "center",
+    backgroundSize: "cover",
+    backgroundPosition: "center center",
+    height: "100%",
+    [theme.breakpoints.down("sm")]: {
+      minHeight: "700px!important"
+    },
+    "& footer": {
+      position: "absolute",
+      bottom: "0",
+      width: "100%",
+      border: "none !important"
+    },
+    "&:before": {
+      backgroundColor: "rgba(" + (0, _rootStyle.hexToRgb)(_rootStyle.blackColor) + ", 0.65)"
+    },
+    "&:before,&:after": {
+      display: "block",
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: "0",
+      left: "0",
+      zIndex: "2"
+    }
+  }
+});
+
+var _default = loginStyle;
+exports.default = _default;

package/dist/assets/scss/black-dashboard-react/bootstrap/_alert.scss

@@ -0,0 +1,51 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: ($close-font-size + $alert-padding-x * 2);
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

package/dist/assets/scss/black-dashboard-react/bootstrap/_badge.scss

@@ -0,0 +1,47 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

package/dist/assets/scss/black-dashboard-react/bootstrap/_breadcrumb.scss

@@ -0,0 +1,41 @@
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
+      display: inline-block; // Suppress underlining of the separator in modern browsers
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: $breadcrumb-divider;
+    }
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}