@bootstrap-styled/v4 - npm Package Compare versions

Comparing version 3.0.7 to 3.0.8

CHANGELOG.md

@@ -0,1 +1,9 @@
+## [3.0.8](https://github.com/bootstrap-styled/v4/compare/v3.0.7...v3.0.8) (2019-03-10)
+
+
+### Bug Fixes
+
+* **documentation:** fixed bug wiht Tooltip ([286316d](https://github.com/bootstrap-styled/v4/commit/286316d))
+* **documentation:** Fixed some minor documentation bugs. ([3706154](https://github.com/bootstrap-styled/v4/commit/3706154))
+
 ## [3.0.7](https://github.com/bootstrap-styled/v4/compare/v3.0.6...v3.0.7) (2019-03-10)
@@ -2,0 +10,0 @@

lib/Alert/index.js

@@ -143,3 +143,3 @@ "use strict";
    */
-  autoHideDuration: _propTypes.default.number,
+  autoHideDuration: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
@@ -146,0 +146,0 @@ /** Theme variables. */

lib/Blockquote/index.js

@@ -51,2 +51,4 @@ "use strict";
   theme: {
+    $spacer: '1rem',
+    '$spacer-halved': '0.5rem',
     '$blockquote-small-color': '#636c72',
@@ -72,2 +74,4 @@ '$blockquote-font-size': '1.25rem',
   theme: _propTypes.default.shape({
+    $spacer: _propTypes.default.string,
+    '$spacer-halved': _propTypes.default.string,
     '$blockquote-small-color': _propTypes.default.string,
@@ -74,0 +78,0 @@ '$blockquote-font-size': _propTypes.default.string,

lib/Breadcrumb/index.js

@@ -62,2 +62,3 @@ "use strict";
     '$breadcrumb-divider': '"/"',
+    '$spacer-y': '1rem',
     '$enable-rounded': false
@@ -87,2 +88,3 @@ }
     '$breadcrumb-divider': _propTypes.default.string,
+    '$spacer-y': _propTypes.default.string,
     '$enable-rounded': _propTypes.default.bool
@@ -89,0 +91,0 @@ }),

lib/Code/index.js

@@ -54,3 +54,4 @@ "use strict";
     '$code-bg': '#f7f7f9',
-    '$enable-rounded': false
+    '$enable-rounded': false,
+    '$font-family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
   }
@@ -77,3 +78,4 @@ };
     '$code-bg': _propTypes.default.string,
-    '$enable-rounded': _propTypes.default.bool
+    '$enable-rounded': _propTypes.default.bool,
+    '$font-family-monospace': _propTypes.default.string
   })
@@ -80,0 +82,0 @@ };

lib/Dt/index.js

@@ -22,2 +22,3 @@ "use strict";
   theme: {
+    '$dt-font-weight': 'bold',
     '$grid-columns': '12',
@@ -39,2 +40,3 @@ '$grid-gutter-width': '30px',
   theme: _propTypes.default.shape({
+    '$dt-font-weight': _propTypes.default.string,
     '$grid-columns': _propTypes.default.string,
@@ -41,0 +43,0 @@ '$grid-gutter-width': _propTypes.default.string,

lib/Form/index.js

@@ -409,3 +409,3 @@ "use strict";
 })(["  ", ""], function (props) {
-  return "\n    /*\n     Textual form controls\n    */\n\n    ".concat((0, _forms.formControl)(props.theme['$enable-rounded'], props.theme['$enable-transitions'], props.theme['$enable-shadows'], props.theme['$input-height'], props.theme['$input-padding-y'], props.theme['$input-padding-x'], props.theme['$font-size-base'], props.theme['$input-line-height'], props.theme['$input-color'], props.theme['$input-bg'], props.theme['$input-border-radius'], props.theme['$input-btn-border-width'], props.theme['$input-border-color'], props.theme['$input-transition'], props.theme['$input-box-shadow'], props.theme['$input-color-focus'], props.theme['$input-bg-focus'], props.theme['$input-border-focus'], props.theme['$input-box-shadow-focus'], props.theme['$input-color-placeholder'], props.theme['$input-bg-disabled'], props.theme['$cursor-disabled']), "\n    \n    select.form-control {\n      &:focus::-ms-value {\n        /* Suppress the nested default white text on blue background highlight given to\n         the selected option text when the (still closed) <select> receives focus\n         in IE and (under certain conditions) Edge, as it looks bad and cannot be made to\n         match the appearance of the native widget.\n         See https://github.com/twbs/bootstrap/issues/19398.\n         */\n        color: ").concat(props.theme['$input-color'], ";\n        background-color: ").concat(props.theme['$input-bg'], ";\n      }\n    }\n\n    /* Make file inputs better match text inputs by forcing them to new lines. */\n    & .form-control-file,\n    .form-control-range {\n      display: block;\n    }\n\n    /*\n     Labels\n    */\n\n    /* For use with horizontal and inline forms, when you need the label text to */\n    /* align with the form controls. */\n    & .col-form-label {\n      padding-top: calc(").concat(props.theme['$input-padding-y'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      margin-bottom: 0; /* Override the '<label>' default */\n    }\n\n    & .col-form-label-lg {\n      padding-top: calc(").concat(props.theme['$input-padding-y-lg'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y-lg'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      font-size: ").concat(props.theme['$font-size-lg'], ";\n    }\n\n    & .col-form-label-sm {\n      padding-top: calc(").concat(props.theme['$input-padding-y-sm'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y-sm'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      font-size: ").concat(props.theme['$font-size-sm'], ";\n    }\n\n    /*\n     Legends\n    */\n\n    /* For use with horizontal and inline forms, when you need the legend text to */\n    /* be the same size as regular labels, and to align with the form controls. */\n    & .col-form-legend {\n      padding-top: ").concat(props.theme['$input-padding-y'], ";\n      padding-bottom: ").concat(props.theme['$input-padding-y'], ";\n      margin-bottom: 0;\n      font-size: ").concat(props.theme['$font-size-base'], ";\n    }\n\n\n    /* Static form control text\n\n     Apply class to an element to make any string of text align with labels in a\n     horizontal form layout.\n    */\n\n    & .form-control-static {\n      padding-top: ").concat(props.theme['$input-padding-y'], ";\n      padding-bottom: ").concat(props.theme['$input-padding-y'], ";\n      margin-bottom: 0; /* match inputs if this class comes on inputs with default margins */\n      line-height: ").concat(props.theme['$input-line-height'], ";\n      border: solid transparent;\n      border-width: ").concat(props.theme['$input-btn-border-width'], " 0;\n\n      &.form-control-sm,\n      &.form-control-lg {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n\n    /* Form control sizing\n\n     Build on .form-control with modifier classes to decrease or increase the\n     height and font-size of form controls.\n\n     The .form-group-* form-control variations are sadly duplicated to avoid the\n     issue documented in https://github.com/twbs/bootstrap/issues/15074.\n    */\n\n    & .form-control-sm {\n      padding: ").concat(props.theme['$input-padding-y-sm'], " ").concat(props.theme['$input-padding-x-sm'], ";\n      font-size: ").concat(props.theme['$font-size-sm'], ";\n      ").concat((0, _borderRadius.borderRadius)(props.theme['$enable-rounded'], props.theme['$input-border-radius-sm']), "\n    }\n\n    select.form-control-sm {\n      &:not([size]):not([multiple]) {\n        height: ").concat(props.theme['$input-height-sm'], ";\n      }\n    }\n\n    & .form-control-lg {\n      padding: ").concat(props.theme['$input-padding-y-lg'], " ").concat(props.theme['$input-padding-x-lg'], ";\n      font-size: ").concat(props.theme['$font-size-lg'], ";\n      ").concat((0, _borderRadius.borderRadius)(props.theme['$enable-rounded'], props.theme['$input-border-radius-lg']), "\n    }\n\n    select.form-control-lg {\n      &:not([size]):not([multiple]) {\n        height: ").concat(props.theme['$input-height-lg'], ";\n      }\n    }\n\n\n    /* Form groups Designed to help with the organization and spacing of vertical forms. For horizontal forms, use the predefined grid classes. */\n\n    &.form-group,\n     & .form-group {\n      margin-bottom: ").concat(props.theme['$form-group-margin-bottom'], ";\n    }\n\n    & .form-text {\n      display: block;\n      margin-top: ").concat(props.theme['$form-text-margin-top'], "\n    }\n\n\n    /* Checkboxes and radios Indent the labels to position radios/checkboxes as hanging controls. */\n\n    & .form-check {\n      position: relative;\n      display: block;\n      margin-bottom: ").concat(props.theme['$form-check-margin-bottom'], ";\n\n      &.disabled {\n        .form-check-label {\n          color: ").concat(props.theme['$text-muted'], ";\n          cursor: ").concat(props.theme['$cursor-disabled'], ";\n        }\n      }\n    }\n\n    & .form-check-label {\n      padding-left: ").concat(props.theme['$form-check-input-gutter'], ";\n      margin-bottom: 0; /* Override default <label> bottom margin */\n      cursor: pointer;\n    }\n\n    & .form-check-input {\n      position: absolute;\n      margin-top: ").concat(props.theme['$form-check-input-margin-y'], ";\n      margin-left: -").concat(props.theme['$form-check-input-gutter'], ";\n\n      &:only-child {\n        position: static;\n      }\n    }\n\n    /* Radios and checkboxes on same line */\n    & .form-check-inline {\n      display: inline-block;\n      .form-check-label {\n        vertical-align: middle;\n      }\n\n      + .form-check-inline {\n        margin-left: ").concat(props.theme['$form-check-inline-margin-x'], ";\n      }\n\n      &.disabled {\n        color: ").concat(props.theme['$text-muted'], ";\n        cursor: ").concat(props.theme['$cursor-disabled'], ";\n      }\n    }\n\n\n    /* Form control feedback states Apply contextual and semantic states to individual form controls. */\n    & .form-control-feedback {\n      margin-top: ").concat(props.theme['$form-feedback-margin-top'], ";\n    }\n\n    & .form-control-success,\n    & .form-control-warning,\n    & .form-control-danger {\n      padding-right: ").concat(_unitUtils.default.math.multiply(props.theme['$input-padding-x'], 3), ";\n      background-repeat: no-repeat;\n      background-position: center right ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 4), ";\n      background-size: ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 2), " ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 2), ";\n    }\n\n    /* Form validation states */\n    & .has-success {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-success'], props.theme['$box-shadow']), "\n\n      .form-control-success {\n        background-image: ").concat(props.theme['$form-icon-success'], ";\n      }\n    }\n\n    & .has-warning {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-warning'], props.theme['$box-shadow']), "\n\n      .form-control-warning {\n        background-image: ").concat(props.theme['$form-icon-warning'], ";\n      }\n    }\n\n    & .has-danger {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-danger'], props.theme['$box-shadow']), "\n\n      .form-control-danger {\n        background-image: ").concat(props.theme['$form-icon-danger'], ";\n      }\n    }\n\n\n    /* Inline forms\n\n     Make forms appear inline(-block) by adding the .form-inline class. Inline\n     forms begin stacked on extra small (mobile) devices and then go inline when\n     viewports reach <768px.\n\n     Requires wrapping inputs and labels with .form-group for proper display of\n     default HTML form controls and our custom form controls (e.g., input groups).\n    */\n\n    &.form-inline {\n      display: flex;\n      flex-flow: row wrap;\n      align-items: center; /* Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) */\n\n      & .form-check {\n         width: 100%;\n      }\n\n      /* Kick in the inline */\n      ").concat((0, _breakpoints.mediaBreakpointUp)('sm', props.theme['$grid-breakpoints'], "\n          label {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 0;\n          }\n          \n          /* Inline-block all the things for inline */\n          & .form-group {\n            display: flex;\n            flex: 0 0 auto;\n            flex-flow: row wrap;\n            margin-bottom: 0;\n          }\n      \n          /* Allow folks to *not* use .form-group */\n          & .form-control {\n            display: inline-block;\n            width: auto; /* Prevent labels from stacking above inputs in .form-group */\n            vertical-align: middle;\n          }\n      \n          /* Make static controls behave like regular ones */\n          & .form-control-static {\n            display: inline-block;\n          }\n      \n          & .input-group {\n            width: auto;\n          }\n          \n          & .form-control-label {\n             margin-bottom: 0;\n            vertical-align: middle;\n          }\n      \n          /* Remove default margin on radios/checkboxes that were used for stacking, and */\n          /*  then undo the floating of radios and checkboxes to match. */\n          & .form-check {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: auto;\n            margin-top: 0;\n            margin-bottom: 0;\n          }\n          & .form-check-label {\n            padding-left: 0;\n          }\n          & .form-check-input {\n            position: relative;\n            margin-left: 0;\n            margin-top: 0;\n            margin-right: ".concat(props.theme['$form-check-input-margin-x'], ";\n          }\n          \n          /* Custom form controls */\n          & .custom-control {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-left: 0;\n          }\n          \n          & .custom-control-indicator {\n            position: static;\n            display: inline-block;\n            margin-right: ").concat(props.theme['$form-check-input-margin-x'], "; /* Flexbox alignment means we lose our HTML space here, so we compensate. */\n            vertical-align: text-bottom;\n          }\n          \n          /* Re-override the feedback icon. */\n          & .has-feedback .form-control-feedback {\n            top: 0;\n          }\n        ")), "\n    }\n    ").concat((0, _customForms.customForms)(props.theme['$enable-rounded'], props.theme['$enable-shadows'], props.theme['$custom-control-checked-indicator-box-shadow'], props.theme['$custom-control-active-indicator-box-shadow'], props.theme['$custom-control-indicator-box-shadow'], props.theme['$custom-checkbox-indeterminate-box-shadow'], props.theme['$custom-select-focus-box-shadow'], props.theme['$custom-file-focus-box-shadow'], props.theme['$custom-file-box-shadow'], props.theme['$custom-select-border-radius'], props.theme['$custom-file-border-radius'], props.theme['$custom-checkbox-radius'], props.theme['$input-bg'], props.theme['$custom-select-line-height'], props.theme['$line-height-base'], props.theme['$custom-control-gutter'], props.theme['$custom-control-spacer-x'], props.theme['$custom-control-checked-indicator-color'], props.theme['$custom-control-checked-indicator-bg'], props.theme['$custom-control-focus-indicator-box-shadow'], props.theme['$custom-control-active-indicator-color'], props.theme['$custom-control-active-indicator-bg'], props.theme['$custom-control-disabled-cursor'], props.theme['$custom-control-disabled-indicator-bg'], props.theme['$custom-control-disabled-description-color'], props.theme['$custom-control-indicator-size'], props.theme['$custom-control-indicator-bg'], props.theme['$custom-control-indicator-bg-size'], props.theme['$custom-checkbox-checked-icon'], props.theme['$custom-checkbox-indeterminate-bg'], props.theme['$custom-checkbox-indeterminate-icon'], props.theme['$custom-radio-radius'], props.theme['$custom-radio-checked-icon'], props.theme['$custom-control-spacer-y'], props.theme['$border-width'], props.theme['$input-height'], props.theme['$custom-select-padding-y'], props.theme['$custom-select-padding-x'], props.theme['$custom-select-indicator-padding'], props.theme['$custom-select-color'], props.theme['$custom-select-bg'], props.theme['$custom-select-indicator'], props.theme['$custom-select-bg-size'], props.theme['$custom-select-border-width'], props.theme['$custom-select-border-color'], props.theme['$custom-select-focus-border-color'], props.theme['$input-color'], props.theme['$custom-select-disabled-color'], props.theme['$cursor-disabled'], props.theme['$custom-select-disabled-bg'], props.theme['$custom-select-sm-font-size'], props.theme['$custom-file-width'], props.theme['$custom-file-height'], props.theme['$custom-file-padding-x'], props.theme['$custom-file-padding-y'], props.theme['$custom-file-line-height'], props.theme['$custom-file-color'], props.theme['$custom-file-bg'], props.theme['$custom-file-border-width'], props.theme['$custom-file-border-color'], props.theme['$custom-file-button-color'], props.theme['$custom-file-button-bg'], props.theme['$custom-file-text']), "\n    & .row {\n      ").concat((0, _grid.makeRow)(props.theme['$enable-grid-classes'], props.theme['$grid-gutter-width']), "\n    }\n  ");
+  return "\n    /*\n     Textual form controls\n    */\n\n    ".concat((0, _forms.formControl)(props.theme['$enable-rounded'], props.theme['$enable-transitions'], props.theme['$enable-shadows'], props.theme['$input-height'], props.theme['$input-padding-y'], props.theme['$input-padding-x'], props.theme['$font-size-base'], props.theme['$input-line-height'], props.theme['$input-color'], props.theme['$input-bg'], props.theme['$input-border-radius'], props.theme['$input-btn-border-width'], props.theme['$input-border-color'], props.theme['$input-transition'], props.theme['$input-box-shadow'], props.theme['$input-color-focus'], props.theme['$input-bg-focus'], props.theme['$input-border-focus'], props.theme['$input-box-shadow-focus'], props.theme['$input-color-placeholder'], props.theme['$input-bg-disabled'], props.theme['$cursor-disabled']), "\n    \n    select.form-control {\n      &:focus::-ms-value {\n        /* Suppress the nested default white text on blue background highlight given to\n         the selected option text when the (still closed) <select> receives focus\n         in IE and (under certain conditions) Edge, as it looks bad and cannot be made to\n         match the appearance of the native widget.\n         See https://github.com/twbs/bootstrap/issues/19398.\n         */\n        color: ").concat(props.theme['$input-color'], ";\n        background-color: ").concat(props.theme['$input-bg'], ";\n      }\n    }\n\n    /* Make file inputs better match text inputs by forcing them to new lines. */\n    & .form-control-file,\n    .form-control-range {\n      display: block;\n    }\n\n    /*\n     Labels\n    */\n\n    /* For use with horizontal and inline forms, when you need the label text to */\n    /* align with the form controls. */\n    & .col-form-label {\n      padding-top: calc(").concat(props.theme['$input-padding-y'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      margin-bottom: 0; /* Override the '<label>' default */\n    }\n\n    & .col-form-label-lg {\n      padding-top: calc(").concat(props.theme['$input-padding-y-lg'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y-lg'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      font-size: ").concat(props.theme['$font-size-lg'], ";\n    }\n\n    & .col-form-label-sm {\n      padding-top: calc(").concat(props.theme['$input-padding-y-sm'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      padding-bottom: calc(").concat(props.theme['$input-padding-y-sm'], " - ").concat(props.theme['$input-btn-border-width'], " *2);\n      font-size: ").concat(props.theme['$font-size-sm'], ";\n    }\n\n    /*\n     Legends\n    */\n\n    /* For use with horizontal and inline forms, when you need the legend text to */\n    /* be the same size as regular labels, and to align with the form controls. */\n    & .col-form-legend {\n      padding-top: ").concat(props.theme['$input-padding-y'], ";\n      padding-bottom: ").concat(props.theme['$input-padding-y'], ";\n      margin-bottom: 0;\n      font-size: ").concat(props.theme['$font-size-base'], ";\n    }\n\n\n    /* Static form control text\n\n     Apply class to an element to make any string of text align with labels in a\n     horizontal form layout.\n    */\n\n    & .form-control-static {\n      display: block;\n      width: 100%;\n      padding-top: ").concat(props.theme['$input-padding-y'], ";\n      padding-bottom: ").concat(props.theme['$input-padding-y'], ";\n      margin-bottom: 0; /* match inputs if this class comes on inputs with default margins */\n      line-height: ").concat(props.theme['$input-line-height'], ";\n      border: solid transparent;\n      border-width: ").concat(props.theme['$input-btn-border-width'], " 0;\n\n      &.form-control-sm,\n      &.form-control-lg {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n\n    /* Form control sizing\n\n     Build on .form-control with modifier classes to decrease or increase the\n     height and font-size of form controls.\n\n     The .form-group-* form-control variations are sadly duplicated to avoid the\n     issue documented in https://github.com/twbs/bootstrap/issues/15074.\n    */\n\n    & .form-control-sm {\n      padding: ").concat(props.theme['$input-padding-y-sm'], " ").concat(props.theme['$input-padding-x-sm'], ";\n      font-size: ").concat(props.theme['$font-size-sm'], ";\n      ").concat((0, _borderRadius.borderRadius)(props.theme['$enable-rounded'], props.theme['$input-border-radius-sm']), "\n    }\n\n    select.form-control-sm {\n      &:not([size]):not([multiple]) {\n        height: ").concat(props.theme['$input-height-sm'], ";\n      }\n    }\n\n    & .form-control-lg {\n      padding: ").concat(props.theme['$input-padding-y-lg'], " ").concat(props.theme['$input-padding-x-lg'], ";\n      font-size: ").concat(props.theme['$font-size-lg'], ";\n      ").concat((0, _borderRadius.borderRadius)(props.theme['$enable-rounded'], props.theme['$input-border-radius-lg']), "\n    }\n\n    select.form-control-lg {\n      &:not([size]):not([multiple]) {\n        height: ").concat(props.theme['$input-height-lg'], ";\n      }\n    }\n\n\n    /* Form groups Designed to help with the organization and spacing of vertical forms. For horizontal forms, use the predefined grid classes. */\n\n    &.form-group,\n     & .form-group {\n      margin-bottom: ").concat(props.theme['$form-group-margin-bottom'], ";\n    }\n\n    & .form-text {\n      display: block;\n      margin-top: ").concat(props.theme['$form-text-margin-top'], "\n    }\n\n\n    /* Checkboxes and radios Indent the labels to position radios/checkboxes as hanging controls. */\n\n    & .form-check {\n      position: relative;\n      display: block;\n      margin-bottom: ").concat(props.theme['$form-check-margin-bottom'], ";\n\n      &.disabled {\n        .form-check-label {\n          color: ").concat(props.theme['$text-muted'], ";\n          cursor: ").concat(props.theme['$cursor-disabled'], ";\n        }\n      }\n    }\n\n    & .form-check-label {\n      padding-left: ").concat(props.theme['$form-check-input-gutter'], ";\n      margin-bottom: 0; /* Override default <label> bottom margin */\n      cursor: pointer;\n    }\n\n    & .form-check-input {\n      position: absolute;\n      margin-top: ").concat(props.theme['$form-check-input-margin-y'], ";\n      margin-left: -").concat(props.theme['$form-check-input-gutter'], ";\n\n      &:only-child {\n        position: static;\n      }\n    }\n\n    /* Radios and checkboxes on same line */\n    & .form-check-inline {\n      display: inline-block;\n      .form-check-label {\n        vertical-align: middle;\n      }\n\n      + .form-check-inline {\n        margin-left: ").concat(props.theme['$form-check-inline-margin-x'], ";\n      }\n\n      &.disabled {\n        color: ").concat(props.theme['$text-muted'], ";\n        cursor: ").concat(props.theme['$cursor-disabled'], ";\n      }\n    }\n\n\n    /* Form control feedback states Apply contextual and semantic states to individual form controls. */\n    & .form-control-feedback {\n      margin-top: ").concat(props.theme['$form-feedback-margin-top'], ";\n    }\n\n    & .form-control-success,\n    & .form-control-warning,\n    & .form-control-danger {\n      padding-right: ").concat(_unitUtils.default.math.multiply(props.theme['$input-padding-x'], 3), ";\n      background-repeat: no-repeat;\n      background-position: center right ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 4), ";\n      background-size: ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 2), " ").concat(_unitUtils.default.math.divide(props.theme['$input-height'], 2), ";\n    }\n\n    /* Form validation states */\n    & .has-success {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-success'], props.theme['$box-shadow']), "\n\n      .form-control-success {\n        background-image: ").concat(props.theme['$form-icon-success'], ";\n      }\n    }\n\n    & .has-warning {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-warning'], props.theme['$box-shadow']), "\n\n      .form-control-warning {\n        background-image: ").concat(props.theme['$form-icon-warning'], ";\n      }\n    }\n\n    & .has-danger {\n      ").concat((0, _forms.formControlValidation)(props.theme['$enable-shadows'], props.theme['$brand-danger'], props.theme['$box-shadow']), "\n\n      .form-control-danger {\n        background-image: ").concat(props.theme['$form-icon-danger'], ";\n      }\n    }\n\n\n    /* Inline forms\n\n     Make forms appear inline(-block) by adding the .form-inline class. Inline\n     forms begin stacked on extra small (mobile) devices and then go inline when\n     viewports reach <768px.\n\n     Requires wrapping inputs and labels with .form-group for proper display of\n     default HTML form controls and our custom form controls (e.g., input groups).\n    */\n\n    &.form-inline {\n      display: flex;\n      flex-flow: row wrap;\n      align-items: center; /* Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height) */\n\n      & .form-check {\n         width: 100%;\n      }\n\n      /* Kick in the inline */\n      ").concat((0, _breakpoints.mediaBreakpointUp)('sm', props.theme['$grid-breakpoints'], "\n          label {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 0;\n          }\n          \n          /* Inline-block all the things for inline */\n          & .form-group {\n            display: flex;\n            flex: 0 0 auto;\n            flex-flow: row wrap;\n            margin-bottom: 0;\n          }\n      \n          /* Allow folks to *not* use .form-group */\n          & .form-control {\n            display: inline-block;\n            width: auto; /* Prevent labels from stacking above inputs in .form-group */\n            vertical-align: middle;\n          }\n      \n          /* Make static controls behave like regular ones */\n          & .form-control-static {\n            display: inline-block;\n          }\n      \n          & .input-group {\n            width: auto;\n          }\n          \n          & .form-control-label {\n             margin-bottom: 0;\n            vertical-align: middle;\n          }\n      \n          /* Remove default margin on radios/checkboxes that were used for stacking, and */\n          /*  then undo the floating of radios and checkboxes to match. */\n          & .form-check {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: auto;\n            margin-top: 0;\n            margin-bottom: 0;\n          }\n          & .form-check-label {\n            padding-left: 0;\n          }\n          & .form-check-input {\n            position: relative;\n            margin-left: 0;\n            margin-top: 0;\n            margin-right: ".concat(props.theme['$form-check-input-margin-x'], ";\n          }\n          \n          /* Custom form controls */\n          & .custom-control {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-left: 0;\n          }\n          \n          & .custom-control-indicator {\n            position: static;\n            display: inline-block;\n            margin-right: ").concat(props.theme['$form-check-input-margin-x'], "; /* Flexbox alignment means we lose our HTML space here, so we compensate. */\n            vertical-align: text-bottom;\n          }\n          \n          /* Re-override the feedback icon. */\n          & .has-feedback .form-control-feedback {\n            top: 0;\n          }\n        ")), "\n    }\n    ").concat((0, _customForms.customForms)(props.theme['$enable-rounded'], props.theme['$enable-shadows'], props.theme['$custom-control-checked-indicator-box-shadow'], props.theme['$custom-control-active-indicator-box-shadow'], props.theme['$custom-control-indicator-box-shadow'], props.theme['$custom-checkbox-indeterminate-box-shadow'], props.theme['$custom-select-focus-box-shadow'], props.theme['$custom-file-focus-box-shadow'], props.theme['$custom-file-box-shadow'], props.theme['$custom-select-border-radius'], props.theme['$custom-file-border-radius'], props.theme['$custom-checkbox-radius'], props.theme['$input-bg'], props.theme['$custom-select-line-height'], props.theme['$line-height-base'], props.theme['$custom-control-gutter'], props.theme['$custom-control-spacer-x'], props.theme['$custom-control-checked-indicator-color'], props.theme['$custom-control-checked-indicator-bg'], props.theme['$custom-control-focus-indicator-box-shadow'], props.theme['$custom-control-active-indicator-color'], props.theme['$custom-control-active-indicator-bg'], props.theme['$custom-control-disabled-cursor'], props.theme['$custom-control-disabled-indicator-bg'], props.theme['$custom-control-disabled-description-color'], props.theme['$custom-control-indicator-size'], props.theme['$custom-control-indicator-bg'], props.theme['$custom-control-indicator-bg-size'], props.theme['$custom-checkbox-checked-icon'], props.theme['$custom-checkbox-indeterminate-bg'], props.theme['$custom-checkbox-indeterminate-icon'], props.theme['$custom-radio-radius'], props.theme['$custom-radio-checked-icon'], props.theme['$custom-control-spacer-y'], props.theme['$border-width'], props.theme['$input-height'], props.theme['$custom-select-padding-y'], props.theme['$custom-select-padding-x'], props.theme['$custom-select-indicator-padding'], props.theme['$custom-select-color'], props.theme['$custom-select-bg'], props.theme['$custom-select-indicator'], props.theme['$custom-select-bg-size'], props.theme['$custom-select-border-width'], props.theme['$custom-select-border-color'], props.theme['$custom-select-focus-border-color'], props.theme['$input-color'], props.theme['$custom-select-disabled-color'], props.theme['$cursor-disabled'], props.theme['$custom-select-disabled-bg'], props.theme['$custom-select-sm-font-size'], props.theme['$custom-file-width'], props.theme['$custom-file-height'], props.theme['$custom-file-padding-x'], props.theme['$custom-file-padding-y'], props.theme['$custom-file-line-height'], props.theme['$custom-file-color'], props.theme['$custom-file-bg'], props.theme['$custom-file-border-width'], props.theme['$custom-file-border-color'], props.theme['$custom-file-button-color'], props.theme['$custom-file-button-bg'], props.theme['$custom-file-text']), "\n    & .row {\n      ").concat((0, _grid.makeRow)(props.theme['$enable-grid-classes'], props.theme['$grid-gutter-width']), "\n    }\n  ");
 });
@@ -412,0 +412,0 @@ Form.defaultProps = defaultProps;

lib/Hr/index.js

@@ -16,2 +16,3 @@ "use strict";
   theme: {
+    '$spacer-y': '1rem',
     '$hr-border-width': '1px',
@@ -25,2 +26,3 @@ '$hr-border-color': 'rgba(0, 0, 0, 0.1)'
   theme: _propTypes.default.shape({
+    '$spacer-y': _propTypes.default.string,
     '$hr-border-width': _propTypes.default.string,
@@ -27,0 +29,0 @@ '$hr-border-color': _propTypes.default.string

lib/Label/index.js

@@ -56,2 +56,3 @@ "use strict";
   theme: _propTypes.default.shape({
+    '$label-margin-bottom': _propTypes.default.string,
     '$btn-padding-x': _propTypes.default.string,
@@ -145,2 +146,3 @@ '$btn-padding-y': _propTypes.default.string,
   theme: {
+    '$label-margin-bottom': '.5rem',
     '$enable-rounded': true,
@@ -147,0 +149,0 @@ '$enable-shadows': false,

lib/Modal/index.js

@@ -108,3 +108,4 @@ "use strict";
     '$modal-inner-padding': _propTypes.default.string,
-    '$modal-footer-border-color': _propTypes.default.string
+    '$modal-footer-border-color': _propTypes.default.string,
+    '$modal-footer-border-width': _propTypes.default.string
   }),
@@ -229,3 +230,4 @@
     '$modal-inner-padding': '15px',
-    '$modal-footer-border-color': '#eceeef'
+    '$modal-footer-border-color': '#eceeef',
+    '$modal-footer-border-width': '1px'
   },
@@ -232,0 +234,0 @@ fade: true,

lib/Table/index.js

@@ -58,2 +58,3 @@ "use strict";
   theme: {
+    $spacer: '1rem',
     '$body-bg': '#fff',
@@ -119,2 +120,3 @@ '$table-cell-padding': '.75rem',
   theme: _propTypes.default.shape({
+    $spacer: _propTypes.default.string,
     '$body-bg': _propTypes.default.string,
@@ -216,3 +218,3 @@ '$table-cell-padding': _propTypes.default.string,
 })(["", ""], function (props) {
-  return "\n    /*\n     Basic Bootstrap table\n    */\n    &.table {\n      width: 100%;\n      max-width: 100%;\n      margin-bottom: ".concat(props.theme['$spacer'], ";\n      background-color: ").concat(props.theme['$table-bg'], ";\n\n      th,\n      td {\n        padding: ").concat(props.theme['$table-cell-padding'], ";\n        vertical-align: top;\n        border-top: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      thead th {\n        vertical-align: bottom;\n        border-bottom: ").concat(_unitUtils.default.math.multiply(props.theme['$table-border-width'], 2), " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      tbody + tbody {\n        border-top: ").concat(_unitUtils.default.math.multiply(props.theme['$table-border-width'], 2), " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      .table {\n        background-color: ").concat(props.theme['$body-bg'], ";\n      }\n    }\n    \n    \n    /*\n     Condensed table w/ half padding\n    */\n    \n    &.table-sm {\n      th,\n      td {\n        padding: ").concat(props.theme['$table-sm-cell-padding'], ";\n      }\n    }\n    \n    \n    /* Bordered version\n     Add borders all around the table and between all the columns.\n    */\n    &.table-bordered {\n      border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n    \n      th,\n      td {\n        border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      thead {\n        th,\n        td {\n          border-bottom-width: ").concat(_unitUtils.default.math.multiply(2, props.theme['$table-border-width']), ";\n        }\n      }\n    }\n    \n    \n    /* Zebra-striping\n     Default zebra-stripe styles (alternating gray and transparent backgrounds)\n    */\n    \n    &.table-striped {\n      tbody tr:nth-of-type(odd) {\n        background-color: ").concat(props.theme['$table-bg-accent'], ";\n      }\n    }\n    \n    \n    /* \n    Hover effect Placed here since it has to come after the potential zebra striping\n    */\n\n    \n    &.table-hover {\n      tbody tr {\n        ").concat((0, _hover.hover)("\n          background-color: ".concat(props.theme['$table-bg-hover'], ";\n        ")), "\n      }\n    }\n    \n    /* Table backgrounds\n    Exact selectors below required to override '.table-striped' and prevent\n    inheritance to nested tables.\n    */\n        \n    /* Generate the contextual variants */\n    ").concat((0, _tableRow.tableRowVariant)('active', props.theme['$table-bg-active']), "\n    ").concat((0, _tableRow.tableRowVariant)('success', props.theme['$state-success-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('info', props.theme['$state-info-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('warning', props.theme['$state-warning-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('danger', props.theme['$state-danger-bg']), "\n     \n    \n    /* Inverse styles\n    Same table markup, but inverted color scheme: dark background and light text.\n    */ \n    \n    & thead.thead-inverse {\n      th {\n        color: ").concat(props.theme['$table-inverse-color'], ";\n        background-color: ").concat(props.theme['$table-inverse-bg'], ";\n      }\n    }\n    \n    \n    & thead.thead-default {\n      th {\n        color: ").concat(props.theme['$table-head-color'], ";\n        background-color: ").concat(props.theme['$table-head-bg'], ";\n      }\n    }\n    \n    &.table-inverse {\n      color: ").concat(props.theme['$table-inverse-color'], ";\n      background-color: ").concat(props.theme['$table-inverse-bg'], ";\n    \n      th,\n      td,\n      thead th {\n        border-color: ").concat(props.theme['$table-inverse-border'], ";\n      }\n    \n      &.table-bordered {\n        border: 0;\n      }\n      \n      &.table-striped {\n        tbody tr:nth-of-type(odd) {\n        background-color: ").concat(props.theme['$table-inverse-bg-accent'], ";\n        }\n      }\n      \n      &.table-hover {\n        tbody tr {\n          ").concat((0, _hover.hover)("\n            background-color: ".concat(props.theme['$table-inverse-bg-hover'], ";\n          ")), "\n        }\n      }\n    }\n    \n    /* Responsive tables\n     Wrap your tables in '.table-responsive' and we'll make them mobile friendly\n     by enabling horizontal scrolling. Only applies <768px. Everything above that\n     will display normally.\n     */\n    \n    &.table-responsive {\n      display: block;\n      width: 100%;\n      overflow-x: auto;\n      -ms-overflow-style: -ms-autohiding-scrollbar; /* See https://github.com/twbs/bootstrap/pull/10057 */\n      &.table-bordered {\n        border: 0;\n      }\n    }\n    \n    &.table-reflow {\n    \n      /* added bs4 missing tfoot rule */\n      thead, tfoot {\n        float: left;\n      }\n    \n      tbody {\n        display: block;\n        white-space: nowrap;\n      }\n    \n      th,\n      td {\n        border-top: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        border-left: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n    \n        &:last-child {\n          border-right: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        }\n      }\n    \n      thead,\n      tbody,\n      tfoot {\n        &:last-child {\n          tr:last-child th,\n          tr:last-child td {\n            border-bottom: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n          }\n        }\n      }\n    \n      tr {\n        float: left;\n    \n        th,\n        td {\n          display: block !important;\n          border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        }\n      }\n    }\n    \n    /* from reboot.scss */\n    th {\n      /* Centered by default, but left-align-ed to match the tds below. */\n      text-align: left;\n    }\n      \n    /* Reboot Scss */\n    /* No longer part of Normalize since v4 */\n    border-collapse: collapse;\n    /*  Reset for nesting within parents with 'background-color'. */\n    background-color: ").concat(props.theme['$table-bg'], ";    \n    \n  ");
+  return "\n    /*\n     Basic Bootstrap table\n    */\n    &.table {\n      width: 100%;\n      max-width: 100%;\n      margin-bottom: ".concat(props.theme.$spacer, ";\n      background-color: ").concat(props.theme['$table-bg'], ";\n\n      th,\n      td {\n        padding: ").concat(props.theme['$table-cell-padding'], ";\n        vertical-align: top;\n        border-top: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      thead th {\n        vertical-align: bottom;\n        border-bottom: ").concat(_unitUtils.default.math.multiply(props.theme['$table-border-width'], 2), " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      tbody + tbody {\n        border-top: ").concat(_unitUtils.default.math.multiply(props.theme['$table-border-width'], 2), " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      .table {\n        background-color: ").concat(props.theme['$body-bg'], ";\n      }\n    }\n    \n    \n    /*\n     Condensed table w/ half padding\n    */\n    \n    &.table-sm {\n      th,\n      td {\n        padding: ").concat(props.theme['$table-sm-cell-padding'], ";\n      }\n    }\n    \n    \n    /* Bordered version\n     Add borders all around the table and between all the columns.\n    */\n    &.table-bordered {\n      border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n    \n      th,\n      td {\n        border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n      }\n    \n      thead {\n        th,\n        td {\n          border-bottom-width: ").concat(_unitUtils.default.math.multiply(2, props.theme['$table-border-width']), ";\n        }\n      }\n    }\n    \n    \n    /* Zebra-striping\n     Default zebra-stripe styles (alternating gray and transparent backgrounds)\n    */\n    \n    &.table-striped {\n      tbody tr:nth-of-type(odd) {\n        background-color: ").concat(props.theme['$table-bg-accent'], ";\n      }\n    }\n    \n    \n    /* \n    Hover effect Placed here since it has to come after the potential zebra striping\n    */\n\n    \n    &.table-hover {\n      tbody tr {\n        ").concat((0, _hover.hover)("\n          background-color: ".concat(props.theme['$table-bg-hover'], ";\n        ")), "\n      }\n    }\n    \n    /* Table backgrounds\n    Exact selectors below required to override '.table-striped' and prevent\n    inheritance to nested tables.\n    */\n        \n    /* Generate the contextual variants */\n    ").concat((0, _tableRow.tableRowVariant)('active', props.theme['$table-bg-active']), "\n    ").concat((0, _tableRow.tableRowVariant)('success', props.theme['$state-success-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('info', props.theme['$state-info-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('warning', props.theme['$state-warning-bg']), "\n    ").concat((0, _tableRow.tableRowVariant)('danger', props.theme['$state-danger-bg']), "\n     \n    \n    /* Inverse styles\n    Same table markup, but inverted color scheme: dark background and light text.\n    */ \n    \n    & thead.thead-inverse {\n      th {\n        color: ").concat(props.theme['$table-inverse-color'], ";\n        background-color: ").concat(props.theme['$table-inverse-bg'], ";\n      }\n    }\n    \n    \n    & thead.thead-default {\n      th {\n        color: ").concat(props.theme['$table-head-color'], ";\n        background-color: ").concat(props.theme['$table-head-bg'], ";\n      }\n    }\n    \n    &.table-inverse {\n      color: ").concat(props.theme['$table-inverse-color'], ";\n      background-color: ").concat(props.theme['$table-inverse-bg'], ";\n    \n      th,\n      td,\n      thead th {\n        border-color: ").concat(props.theme['$table-inverse-border'], ";\n      }\n    \n      &.table-bordered {\n        border: 0;\n      }\n      \n      &.table-striped {\n        tbody tr:nth-of-type(odd) {\n        background-color: ").concat(props.theme['$table-inverse-bg-accent'], ";\n        }\n      }\n      \n      &.table-hover {\n        tbody tr {\n          ").concat((0, _hover.hover)("\n            background-color: ".concat(props.theme['$table-inverse-bg-hover'], ";\n          ")), "\n        }\n      }\n    }\n    \n    /* Responsive tables\n     Wrap your tables in '.table-responsive' and we'll make them mobile friendly\n     by enabling horizontal scrolling. Only applies <768px. Everything above that\n     will display normally.\n     */\n    \n    &.table-responsive {\n      display: block;\n      width: 100%;\n      overflow-x: auto;\n      -ms-overflow-style: -ms-autohiding-scrollbar; /* See https://github.com/twbs/bootstrap/pull/10057 */\n      &.table-bordered {\n        border: 0;\n      }\n    }\n    \n    &.table-reflow {\n    \n      /* added bs4 missing tfoot rule */\n      thead, tfoot {\n        float: left;\n      }\n    \n      tbody {\n        display: block;\n        white-space: nowrap;\n      }\n    \n      th,\n      td {\n        border-top: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        border-left: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n    \n        &:last-child {\n          border-right: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        }\n      }\n    \n      thead,\n      tbody,\n      tfoot {\n        &:last-child {\n          tr:last-child th,\n          tr:last-child td {\n            border-bottom: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n          }\n        }\n      }\n    \n      tr {\n        float: left;\n    \n        th,\n        td {\n          display: block !important;\n          border: ").concat(props.theme['$table-border-width'], " solid ").concat(props.theme['$table-border-color'], ";\n        }\n      }\n    }\n    \n    /* from reboot.scss */\n    th {\n      /* Centered by default, but left-align-ed to match the tds below. */\n      text-align: left;\n    }\n      \n    /* Reboot Scss */\n    /* No longer part of Normalize since v4 */\n    border-collapse: collapse;\n    /*  Reset for nesting within parents with 'background-color'. */\n    background-color: ").concat(props.theme['$table-bg'], ";    \n    \n  ");
 });
@@ -219,0 +221,0 @@ Table.defaultProps = defaultProps;

package.json

 {
   "name": "@bootstrap-styled/v4",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11456268

increased by0.09%

Lines of code

70027

increased by0.11%

No dependency changes