npm - claritas-web-framework - Versions diffs - 6.4.26 → 7.0.1 - Mend

claritas-web-framework 6.4.26 → 7.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/index.css +1 -1
package/index.js +1 -1
package/package.json +13 -22
package/sass/modules/_modal.scss +1 -0
package/js/polyfills/customevent.js +0 -16
package/postcss.config.js +0 -42
package/styles/helpers/container.css +0 -21
package/styles/helpers/embed.css +0 -70
package/styles/helpers/grid.css +0 -64
package/styles/helpers/image.css +0 -5
package/styles/helpers/link.css +0 -20
package/styles/helpers/screen-readers.css +0 -22
package/styles/helpers/wrap.css +0 -5
package/styles/helpers.css +0 -7
package/styles/index.css +0 -6
package/styles/mixins/caret.css +0 -32
package/styles/mixins/clearfix.css +0 -7
package/styles/mixins/group.css +0 -78
package/styles/mixins/helpers/container.css +0 -12
package/styles/mixins/helpers/grid.css +0 -20
package/styles/mixins/helpers/link.css +0 -18
package/styles/mixins/helpers/wrap.css +0 -7
package/styles/mixins/modules/button.css +0 -91
package/styles/mixins/modules/card.css +0 -29
package/styles/mixins/modules/close.css +0 -42
package/styles/mixins/modules/list.css +0 -24
package/styles/mixins/modules/pill.css +0 -43
package/styles/mixins/modules/table.css +0 -75
package/styles/mixins.css +0 -13
package/styles/modules/alert.css +0 -85
package/styles/modules/breadcrumbs.css +0 -41
package/styles/modules/button.css +0 -151
package/styles/modules/card.css +0 -80
package/styles/modules/close.css +0 -5
package/styles/modules/details.css +0 -61
package/styles/modules/dialog.css +0 -82
package/styles/modules/dropdown.css +0 -126
package/styles/modules/form/checkbox.css +0 -99
package/styles/modules/form/file.css +0 -119
package/styles/modules/form/form-field-group.css +0 -71
package/styles/modules/form/output.css +0 -5
package/styles/modules/form/progress.css +0 -57
package/styles/modules/form/radio.css +0 -49
package/styles/modules/form/range.css +0 -105
package/styles/modules/form/select.css +0 -25
package/styles/modules/form/text.css +0 -19
package/styles/modules/form.css +0 -176
package/styles/modules/list.css +0 -99
package/styles/modules/loader.css +0 -229
package/styles/modules/nav.css +0 -99
package/styles/modules/pill.css +0 -72
package/styles/modules/table.css +0 -21
package/styles/modules/tabs.css +0 -101
package/styles/modules/tag.css +0 -118
package/styles/modules/tile.css +0 -114
package/styles/modules.css +0 -26
package/styles/reboot.css +0 -403
package/styles/utilities/align.css +0 -5
package/styles/utilities/border.css +0 -63
package/styles/utilities/colors.css +0 -65
package/styles/utilities/display.css +0 -45
package/styles/utilities/flex.css +0 -131
package/styles/utilities/float.css +0 -15
package/styles/utilities/order.css +0 -33
package/styles/utilities/overflow.css +0 -31
package/styles/utilities/pointer-events.css +0 -5
package/styles/utilities/position.css +0 -79
package/styles/utilities/shadow.css +0 -7
package/styles/utilities/size.css +0 -123
package/styles/utilities/spacing.css +0 -866
package/styles/utilities/tooltip.css +0 -127
package/styles/utilities/translate.css +0 -15
package/styles/utilities/typography.css +0 -74
package/styles/utilities/visibility.css +0 -14
package/styles/utilities/zindex.css +0 -7
package/styles/utilities.css +0 -18
package/styles/vars.css +0 -159
/package/sass/{_index.scss → index.scss} +0 -0

package/styles/utilities/spacing.css DELETED Viewed

@@ -1,866 +0,0 @@
-.margin--1 {
-  margin: calc(var(--spacer) * 0.25) !important;
-}
-.margin-top--1,
-.margin-y--1 {
-  margin-top: calc(var(--spacer) * 0.25) !important;
-}
-.margin-right--1,
-.margin-x--1 {
-  margin-right: calc(var(--spacer) * 0.25) !important;
-}
-.margin-bottom--1,
-.margin-y--1 {
-  margin-bottom: calc(var(--spacer) * 0.25) !important;
-}
-.margin-left--1,
-.margin-x--1 {
-  margin-left: calc(var(--spacer) * 0.25) !important;
-}
-.margin--2 {
-  margin: calc(var(--spacer) * 0.5) !important;
-}
-.margin-top--2,
-.margin-y--2 {
-  margin-top: calc(var(--spacer) * 0.5) !important;
-}
-.margin-right--2,
-.margin-x--2 {
-  margin-right: calc(var(--spacer) * 0.5) !important;
-}
-.margin-bottom--2,
-.margin-y--2 {
-  margin-bottom: calc(var(--spacer) * 0.5) !important;
-}
-.margin-left--2,
-.margin-x--2 {
-  margin-left: calc(var(--spacer) * 0.5) !important;
-}
-.margin--3 {
-  margin: var(--spacer) !important;
-}
-.margin-top--3,
-.margin-y--3 {
-  margin-top: var(--spacer) !important;
-}
-.margin-right--3,
-.margin-x--3 {
-  margin-right: var(--spacer) !important;
-}
-.margin-bottom--3,
-.margin-y--3 {
-  margin-bottom: var(--spacer) !important;
-}
-.margin-left--3,
-.margin-x--3 {
-  margin-left: var(--spacer) !important;
-}
-.margin--4 {
-  margin: calc(var(--spacer) * 1.5) !important;
-}
-.margin-top--4,
-.margin-y--4 {
-  margin-top: calc(var(--spacer) * 1.5) !important;
-}
-.margin-right--4,
-.margin-x--4 {
-  margin-right: calc(var(--spacer) * 1.5) !important;
-}
-.margin-bottom--4,
-.margin-y--4 {
-  margin-bottom: calc(var(--spacer) * 1.5) !important;
-}
-.margin-left--4,
-.margin-x--4 {
-  margin-left: calc(var(--spacer) * 1.5) !important;
-}
-.margin--5 {
-  margin: calc(var(--spacer) * 3) !important;
-}
-.margin-top--5,
-.margin-y--5 {
-  margin-top: calc(var(--spacer) * 3) !important;
-}
-.margin-right--5,
-.margin-x--5 {
-  margin-right: calc(var(--spacer) * 3) !important;
-}
-.margin-bottom--5,
-.margin-y--5 {
-  margin-bottom: calc(var(--spacer) * 3) !important;
-}
-.margin-left--5,
-.margin-x--5 {
-  margin-left: calc(var(--spacer) * 3) !important;
-}
-.margin--0 {
-  margin: 0 !important;
-}
-.margin-top--0,
-.margin-y--0 {
-  margin-top: 0 !important;
-}
-.margin-right--0,
-.margin-x--0 {
-  margin-right: 0 !important;
-}
-.margin-bottom--0,
-.margin-y--0 {
-  margin-bottom: 0 !important;
-}
-.margin-left--0,
-.margin-x--0 {
-  margin-left: 0 !important;
-}
-.padding--1 {
-  padding: calc(var(--spacer) * 0.25) !important;
-}
-.padding-top--1,
-.padding-y--1 {
-  padding-top: calc(var(--spacer) * 0.25) !important;
-}
-.padding-right--1,
-.padding-x--1 {
-  padding-right: calc(var(--spacer) * 0.25) !important;
-}
-.padding-bottom--1,
-.padding-y--1 {
-  padding-bottom: calc(var(--spacer) * 0.25) !important;
-}
-.padding-left--1,
-.padding-x--1 {
-  padding-left: calc(var(--spacer) * 0.25) !important;
-}
-.padding--2 {
-  padding: calc(var(--spacer) * 0.5) !important;
-}
-.padding-top--2,
-.padding-y--2 {
-  padding-top: calc(var(--spacer) * 0.5) !important;
-}
-.padding-right--2,
-.padding-x--2 {
-  padding-right: calc(var(--spacer) * 0.5) !important;
-}
-.padding-bottom--2,
-.padding-y--2 {
-  padding-bottom: calc(var(--spacer) * 0.5) !important;
-}
-.padding-left--2,
-.padding-x--2 {
-  padding-left: calc(var(--spacer) * 0.5) !important;
-}
-.padding--3 {
-  padding: var(--spacer) !important;
-}
-.padding-top--3,
-.padding-y--3 {
-  padding-top: var(--spacer) !important;
-}
-.padding-right--3,
-.padding-x--3 {
-  padding-right: var(--spacer) !important;
-}
-.padding-bottom--3,
-.padding-y--3 {
-  padding-bottom: var(--spacer) !important;
-}
-.padding-left--3,
-.padding-x--3 {
-  padding-left: var(--spacer) !important;
-}
-.padding--4 {
-  padding: calc(var(--spacer) * 1.5) !important;
-}
-.padding-top--4,
-.padding-y--4 {
-  padding-top: calc(var(--spacer) * 1.5) !important;
-}
-.padding-right--4,
-.padding-x--4 {
-  padding-right: calc(var(--spacer) * 1.5) !important;
-}
-.padding-bottom--4,
-.padding-y--4 {
-  padding-bottom: calc(var(--spacer) * 1.5) !important;
-}
-.padding-left--4,
-.padding-x--4 {
-  padding-left: calc(var(--spacer) * 1.5) !important;
-}
-.padding--5 {
-  padding: calc(var(--spacer) * 3) !important;
-}
-.padding-top--5,
-.padding-y--5 {
-  padding-top: calc(var(--spacer) * 3) !important;
-}
-.padding-right--5,
-.padding-x--5 {
-  padding-right: calc(var(--spacer) * 3) !important;
-}
-.padding-bottom--5,
-.padding-y--5 {
-  padding-bottom: calc(var(--spacer) * 3) !important;
-}
-.padding-left--5,
-.padding-x--5 {
-  padding-left: calc(var(--spacer) * 3) !important;
-}
-.padding--0 {
-  padding: 0 !important;
-}
-.padding-top--0,
-.padding-y--0 {
-  padding-top: 0 !important;
-}
-.padding-right--0,
-.padding-x--0 {
-  padding-right: 0 !important;
-}
-.padding-bottom--0,
-.padding-y--0 {
-  padding-bottom: 0 !important;
-}
-.padding-left--0,
-.padding-x--0 {
-  padding-left: 0 !important;
-}
-.margin--neg-1 {
-  margin: calc(var(--spacer) * -0.25) !important;
-}
-.margin-top--neg-1,
-.margin-y--neg-1 {
-  margin-top: calc(var(--spacer) * -0.25) !important;
-}
-.margin-right--neg-1,
-.margin-x--neg-1 {
-  margin-right: calc(var(--spacer) * -0.25) !important;
-}
-.margin-bottom--neg-1,
-.margin-y--neg-1 {
-  margin-bottom: calc(var(--spacer) * -0.25) !important;
-}
-.margin-left--neg-1,
-.margin-x--neg-1 {
-  margin-left: calc(var(--spacer) * -0.25) !important;
-}
-.margin--neg-2 {
-  margin: calc(var(--spacer) * -0.5) !important;
-}
-.margin-top--neg-2,
-.margin-y--neg-2 {
-  margin-top: calc(var(--spacer) * -0.5) !important;
-}
-.margin-right--neg-2,
-.margin-x--neg-2 {
-  margin-right: calc(var(--spacer) * -0.5) !important;
-}
-.margin-bottom--neg-2,
-.margin-y--neg-2 {
-  margin-bottom: calc(var(--spacer) * -0.5) !important;
-}
-.margin-left--neg-2,
-.margin-x--neg-2 {
-  margin-left: calc(var(--spacer) * -0.5) !important;
-}
-.margin--neg-3 {
-  margin: calc(var(--spacer) * -1) !important;
-}
-.margin-top--neg-3,
-.margin-y--neg-3 {
-  margin-top: calc(var(--spacer) * -1) !important;
-}
-.margin-right--neg-3,
-.margin-x--neg-3 {
-  margin-right: calc(var(--spacer) * -1) !important;
-}
-.margin-bottom--neg-3,
-.margin-y--neg-3 {
-  margin-bottom: calc(var(--spacer) * -1) !important;
-}
-.margin-left--neg-3,
-.margin-x--neg-3 {
-  margin-left: calc(var(--spacer) * -1) !important;
-}
-.margin--neg-4 {
-  margin: calc(var(--spacer) * -1.5) !important;
-}
-.margin-top--neg-4,
-.margin-y--neg-4 {
-  margin-top: calc(var(--spacer) * -1.5) !important;
-}
-.margin-right--neg-4,
-.margin-x--neg-4 {
-  margin-right: calc(var(--spacer) * -1.5) !important;
-}
-.margin-bottom--neg-4,
-.margin-y--neg-4 {
-  margin-bottom: calc(var(--spacer) * -1.5) !important;
-}
-.margin-left--neg-4,
-.margin-x--neg-4 {
-  margin-left: calc(var(--spacer) * -1.5) !important;
-}
-.margin--neg-5 {
-  margin: calc(var(--spacer) * -3) !important;
-}
-.margin-top--neg-5,
-.margin-y--neg-5 {
-  margin-top: calc(var(--spacer) * -3) !important;
-}
-.margin-right--neg-5,
-.margin-x--neg-5 {
-  margin-right: calc(var(--spacer) * -3) !important;
-}
-.margin-bottom--neg-5,
-.margin-y--neg-5 {
-  margin-bottom: calc(var(--spacer) * -3) !important;
-}
-.margin-left--neg-5,
-.margin-x--neg-5 {
-  margin-left: calc(var(--spacer) * -3) !important;
-}
-.margin--auto {
-  margin: auto !important;
-}
-.margin-top--auto,
-.margin-y--auto {
-  margin-top: auto !important;
-}
-.margin-right--auto,
-.margin-x--auto {
-  margin-right: auto !important;
-}
-.margin-bottom--auto,
-.margin-y--auto {
-  margin-bottom: auto !important;
-}
-.margin-left--auto,
-.margin-x--auto {
-  margin-left: auto !important;
-}
-@each $view in mobile, tablet, desktop, widescreen, fullhd {
-  @media (--viewport-$(view)) {
-    .margin--$(view)-1 {
-      margin: calc(var(--spacer) * 0.25) !important;
-    }
-    .margin-top--$(view)-1,
-    .margin-y--$(view)-1 {
-      margin-top: calc(var(--spacer) * 0.25) !important;
-    }
-    .margin-right--$(view)-1,
-    .margin-x--$(view)-1 {
-      margin-right: calc(var(--spacer) * 0.25) !important;
-    }
-    .margin-bottom--$(view)-1,
-    .margin-y--$(view)-1 {
-      margin-bottom: calc(var(--spacer) * 0.25) !important;
-    }
-    .margin-left--$(view)-1,
-    .margin-x--$(view)-1 {
-      margin-left: calc(var(--spacer) * 0.25) !important;
-    }
-    .margin--$(view)-2 {
-      margin: calc(var(--spacer) * 0.5) !important;
-    }
-    .margin-top--$(view)-2,
-    .margin-y--$(view)-2 {
-      margin-top: calc(var(--spacer) * 0.5) !important;
-    }
-    .margin-right--$(view)-2,
-    .margin-x--$(view)-2 {
-      margin-right: calc(var(--spacer) * 0.5) !important;
-    }
-    .margin-bottom--$(view)-2,
-    .margin-y--$(view)-2 {
-      margin-bottom: calc(var(--spacer) * 0.5) !important;
-    }
-    .margin-left--$(view)-2,
-    .margin-x--$(view)-2 {
-      margin-left: calc(var(--spacer) * 0.5) !important;
-    }
-    .margin--$(view)-3 {
-      margin: var(--spacer) !important;
-    }
-    .margin-top--$(view)-3,
-    .margin-y--$(view)-3 {
-      margin-top: var(--spacer) !important;
-    }
-    .margin-right--$(view)-3,
-    .margin-x--$(view)-3 {
-      margin-right: var(--spacer) !important;
-    }
-    .margin-bottom--$(view)-3,
-    .margin-y--$(view)-3 {
-      margin-bottom: var(--spacer) !important;
-    }
-    .margin-left--$(view)-3,
-    .margin-x--$(view)-3 {
-      margin-left: var(--spacer) !important;
-    }
-    .margin--$(view)-4 {
-      margin: calc(var(--spacer) * 1.5) !important;
-    }
-    .margin-top--$(view)-4,
-    .margin-y--$(view)-4 {
-      margin-top: calc(var(--spacer) * 1.5) !important;
-    }
-    .margin-right--$(view)-4,
-    .margin-x--$(view)-4 {
-      margin-right: calc(var(--spacer) * 1.5) !important;
-    }
-    .margin-bottom--$(view)-4,
-    .margin-y--$(view)-4 {
-      margin-bottom: calc(var(--spacer) * 1.5) !important;
-    }
-    .margin-left--$(view)-4,
-    .margin-x--$(view)-4 {
-      margin-left: calc(var(--spacer) * 1.5) !important;
-    }
-    .margin--$(view)-5 {
-      margin: calc(var(--spacer) * 3) !important;
-    }
-    .margin-top--$(view)-5,
-    .margin-y--$(view)-5 {
-      margin-top: calc(var(--spacer) * 3) !important;
-    }
-    .margin-right--$(view)-5,
-    .margin-x--$(view)-5 {
-      margin-right: calc(var(--spacer) * 3) !important;
-    }
-    .margin-bottom--$(view)-5,
-    .margin-y--$(view)-5 {
-      margin-bottom: calc(var(--spacer) * 3) !important;
-    }
-    .margin-left--$(view)-5,
-    .margin-x--$(view)-5 {
-      margin-left: calc(var(--spacer) * 3) !important;
-    }
-    .margin--$(view)-0 {
-      margin: 0 !important;
-    }
-    .margin-top--$(view)-0,
-    .margin-y--$(view)-0 {
-      margin-top: 0 !important;
-    }
-    .margin-right--$(view)-0,
-    .margin-x--$(view)-0 {
-      margin-right: 0 !important;
-    }
-    .margin-bottom--$(view)-0,
-    .margin-y--$(view)-0 {
-      margin-bottom: 0 !important;
-    }
-    .margin-left--$(view)-0,
-    .margin-x--$(view)-0 {
-      margin-left: 0 !important;
-    }
-    .padding--$(view)-1 {
-      padding: calc(var(--spacer) * 0.25) !important;
-    }
-    .padding-top--$(view)-1,
-    .padding-y--$(view)-1 {
-      padding-top: calc(var(--spacer) * 0.25) !important;
-    }
-    .padding-right--$(view)-1,
-    .padding-x--$(view)-1 {
-      padding-right: calc(var(--spacer) * 0.25) !important;
-    }
-    .padding-bottom---$(view)-1,
-    .padding-y--$(view)-1 {
-      padding-bottom: calc(var(--spacer) * 0.25) !important;
-    }
-    .padding-left--$(view)-1,
-    .padding-x--$(view)-1 {
-      padding-left: calc(var(--spacer) * 0.25) !important;
-    }
-    .padding--$(view)-2 {
-      padding: calc(var(--spacer) * 0.5) !important;
-    }
-    .padding-top--$(view)-2,
-    .padding-y--$(view)-2 {
-      padding-top: calc(var(--spacer) * 0.5) !important;
-    }
-    .padding-right--$(view)-2,
-    .padding-x--$(view)-2 {
-      padding-right: calc(var(--spacer) * 0.5) !important;
-    }
-    .padding-bottom---$(view)-2,
-    .padding-y--$(view)-2 {
-      padding-bottom: calc(var(--spacer) * 0.5) !important;
-    }
-    .padding-left--$(view)-2,
-    .padding-x--$(view)-2 {
-      padding-left: calc(var(--spacer) * 0.5) !important;
-    }
-    .padding--$(view)-3 {
-      padding: var(--spacer) !important;
-    }
-    .padding-top--$(view)-3,
-    .padding-y--$(view)-3 {
-      padding-top: var(--spacer) !important;
-    }
-    .padding-right--$(view)-3,
-    .padding-x--$(view)-3 {
-      padding-right: var(--spacer) !important;
-    }
-    .padding-bottom---$(view)-3,
-    .padding-y--$(view)-3 {
-      padding-bottom: var(--spacer) !important;
-    }
-    .padding-left--$(view)-3,
-    .padding-x--$(view)-3 {
-      padding-left: var(--spacer) !important;
-    }
-    .padding--$(view)-4 {
-      padding: calc(var(--spacer) * 1.5) !important;
-    }
-    .padding-top--$(view)-4,
-    .padding-y--$(view)-4 {
-      padding-top: calc(var(--spacer) * 1.5) !important;
-    }
-    .padding-right--$(view)-4,
-    .padding-x--$(view)-4 {
-      padding-right: calc(var(--spacer) * 1.5) !important;
-    }
-    .padding-bottom---$(view)-4,
-    .padding-y--$(view)-4 {
-      padding-bottom: calc(var(--spacer) * 1.5) !important;
-    }
-    .padding-left--$(view)-4,
-    .padding-x--$(view)-4 {
-      padding-left: calc(var(--spacer) * 1.5) !important;
-    }
-    .padding--$(view)-5 {
-      padding: calc(var(--spacer) * 3) !important;
-    }
-    .padding-top--$(view)-5,
-    .padding-y--$(view)-5 {
-      padding-top: calc(var(--spacer) * 3) !important;
-    }
-    .padding-right--$(view)-5,
-    .padding-x--$(view)-5 {
-      padding-right: calc(var(--spacer) * 3) !important;
-    }
-    .padding-bottom---$(view)-5,
-    .padding-y--$(view)-5 {
-      padding-bottom: calc(var(--spacer) * 3) !important;
-    }
-    .padding-left--$(view)-5,
-    .padding-x--$(view)-5 {
-      padding-left: calc(var(--spacer) * 3) !important;
-    }
-    .padding--$(view)-0 {
-      padding: 0 !important;
-    }
-    .padding-top--$(view)-0,
-    .padding-y--$(view)-0 {
-      padding-top: 0 !important;
-    }
-    .padding-right--$(view)-0,
-    .padding-x--$(view)-0 {
-      padding-right: 0 !important;
-    }
-    .padding-bottom---$(view)-0,
-    .padding-y--$(view)-0 {
-      padding-bottom: 0 !important;
-    }
-    .padding-left--$(view)-0,
-    .padding-x--$(view)-0 {
-      padding-left: 0 !important;
-    }
-    .margin--$(view)-neg-1 {
-      margin: calc(var(--spacer) * -0.25) !important;
-    }
-    .margin-top--$(view)-neg-1,
-    .margin-y--$(view)-neg-1 {
-      margin-top: calc(var(--spacer) * -0.25) !important;
-    }
-    .margin-right--$(view)-neg-1,
-    .margin-x--$(view)-neg-1 {
-      margin-right: calc(var(--spacer) * -0.25) !important;
-    }
-    .margin-bottom--$(view)-neg-1,
-    .margin-y--$(view)-neg-1 {
-      margin-bottom: calc(var(--spacer) * -0.25) !important;
-    }
-    .margin-left--$(view)-neg-1,
-    .margin-x--$(view)-neg-1 {
-      margin-left: calc(var(--spacer) * -0.25) !important;
-    }
-    .margin--$(view)-neg-2 {
-      margin: calc(var(--spacer) * -0.5) !important;
-    }
-    .margin-top--$(view)-neg-2,
-    .margin-y--$(view)-neg-2 {
-      margin-top: calc(var(--spacer) * -0.5) !important;
-    }
-    .margin-right--$(view)-neg-2,
-    .margin-x--$(view)-neg-2 {
-      margin-right: calc(var(--spacer) * -0.5) !important;
-    }
-    .margin-bottom--$(view)-neg-2,
-    .margin-y--$(view)-neg-2 {
-      margin-bottom: calc(var(--spacer) * -0.5) !important;
-    }
-    .margin-left--$(view)-neg-2,
-    .margin-x--$(view)-neg-2 {
-      margin-left: calc(var(--spacer) * -0.5) !important;
-    }
-    .margin--$(view)-neg-3 {
-      margin: calc(var(--spacer) * -1) !important;
-    }
-    .margin-top--$(view)-neg-3,
-    .margin-y--$(view)-neg-3 {
-      margin-top: calc(var(--spacer) * -1) !important;
-    }
-    .margin-right--$(view)-neg-3,
-    .margin-x--$(view)-neg-3 {
-      margin-right: calc(var(--spacer) * -1) !important;
-    }
-    .margin-bottom--$(view)-neg-3,
-    .margin-y--$(view)-neg-3 {
-      margin-bottom: calc(var(--spacer) * -1) !important;
-    }
-    .margin-left--$(view)-neg-3,
-    .margin-x--$(view)-neg-3 {
-      margin-left: calc(var(--spacer) * -1) !important;
-    }
-    .margin--$(view)-neg-4 {
-      margin: calc(var(--spacer) * -1.5) !important;
-    }
-    .margin-top--$(view)-neg-4,
-    .margin-y--$(view)-neg-4 {
-      margin-top: calc(var(--spacer) * -1.5) !important;
-    }
-    .margin-right--$(view)-neg-4,
-    .margin-x--$(view)-neg-4 {
-      margin-right: calc(var(--spacer) * -1.5) !important;
-    }
-    .margin-bottom--$(view)-neg-4,
-    .margin-y--$(view)-neg-4 {
-      margin-bottom: calc(var(--spacer) * -1.5) !important;
-    }
-    .margin-left--$(view)-neg-4,
-    .margin-x--$(view)-neg-4 {
-      margin-left: calc(var(--spacer) * -1.5) !important;
-    }
-    .margin--$(view)-neg-5 {
-      margin: calc(var(--spacer) * -3) !important;
-    }
-    .margin-top--$(view)-neg-5,
-    .margin-y--$(view)-neg-5 {
-      margin-top: calc(var(--spacer) * -3) !important;
-    }
-    .margin-right--$(view)-neg-5,
-    .margin-x--$(view)-neg-5 {
-      margin-right: calc(var(--spacer) * -3) !important;
-    }
-    .margin-bottom--$(view)-neg-5,
-    .margin-y--$(view)-neg-5 {
-      margin-bottom: calc(var(--spacer) * -3) !important;
-    }
-    .margin-left--$(view)-neg-5,
-    .margin-x--$(view)-neg-5 {
-      margin-left: calc(var(--spacer) * -3) !important;
-    }
-    .margin--$(view)-auto {
-      margin: auto !important;
-    }
-    .margin-top--$(view)-auto,
-    .margin-y--$(view)-auto {
-      margin-top: auto !important;
-    }
-    .margin-right--$(view)-auto,
-    .margin-x--$(view)-auto {
-      margin-right: auto !important;
-    }
-    .margin-bottom--$(view)-auto,
-    .margin-y--$(view)-auto {
-      margin-bottom: auto !important;
-    }
-    .margin-left--$(view)-auto,
-    .margin-x--$(view)-auto {
-      margin-left: auto !important;
-    }
-  }
-}