@stackoverflow/stacks 0.75.0 → 1.0.0
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.
- package/dist/controllers/index.d.ts +7 -0
- package/dist/controllers/s-expandable-control.d.ts +17 -0
- package/dist/controllers/s-modal.d.ts +97 -0
- package/dist/controllers/s-navigation-tablist.d.ts +36 -0
- package/dist/controllers/s-popover.d.ts +155 -0
- package/dist/controllers/s-table.d.ts +8 -0
- package/dist/controllers/s-tooltip.d.ts +82 -0
- package/dist/controllers/s-uploader.d.ts +48 -0
- package/dist/css/stacks.css +4379 -2660
- package/dist/css/stacks.min.css +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/js/stacks.js +6026 -5403
- package/dist/js/stacks.min.js +1 -1
- package/dist/stacks.d.ts +21 -0
- package/lib/css/atomic/{_stacks-borders.less → borders.less} +30 -30
- package/lib/css/atomic/{_stacks-colors.less → colors.less} +0 -0
- package/lib/css/atomic/{_stacks-flex.less → flex.less} +14 -13
- package/lib/css/atomic/{_stacks-grid.less → grid.less} +12 -11
- package/lib/css/atomic/{_stacks-misc.less → misc.less} +22 -22
- package/lib/css/atomic/spacing.less +314 -0
- package/lib/css/atomic/{_stacks-typography.less → typography.less} +29 -29
- package/lib/css/atomic/width-height.less +194 -0
- package/lib/css/base/{_stacks-body.less → body.less} +3 -5
- package/lib/css/base/{_stacks-configuration-static.less → configuration-static.less} +3 -1
- package/lib/css/base/{_stacks-icons.less → icons.less} +0 -0
- package/lib/css/base/{_stacks-internals.less → internals.less} +0 -10
- package/lib/css/base/{_stacks-reset-meyer.less → reset-meyer.less} +0 -0
- package/lib/css/base/{_stacks-reset-normalize.less → reset-normalize.less} +0 -0
- package/lib/css/base/{_stacks-reset.less → reset.less} +2 -2
- package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less} +9 -9
- package/lib/css/components/{_stacks-avatars.less → avatars.less} +40 -40
- package/lib/css/components/{_stacks-badges.less → badges.less} +11 -11
- package/lib/css/components/{_stacks-banners.less → banners.less} +5 -6
- package/lib/css/components/{_stacks-blank-states.less → blank-states.less} +2 -2
- package/lib/css/components/{_stacks-breadcrumbs.less → breadcrumbs.less} +7 -7
- package/lib/css/components/{_stacks-button-groups.less → button-groups.less} +2 -2
- package/lib/css/components/{_stacks-buttons.less → buttons.less} +77 -72
- package/lib/css/components/{_stacks-cards.less → cards.less} +2 -2
- package/lib/css/components/{_stacks-code-blocks.less → code-blocks.less} +8 -8
- package/lib/css/components/{_stacks-collapsible.less → collapsible.less} +0 -0
- package/lib/css/components/{_stacks-inputs.less → inputs.less} +41 -41
- package/lib/css/components/{_stacks-link-previews.less → link-previews.less} +17 -17
- package/lib/css/components/{_stacks-links.less → links.less} +4 -4
- package/lib/css/components/{_stacks-menu.less → menu.less} +5 -5
- package/lib/css/components/{_stacks-modals.less → modals.less} +20 -20
- package/lib/css/components/{_stacks-navigation.less → navigation.less} +12 -12
- package/lib/css/components/{_stacks-notices.less → notices.less} +12 -12
- package/lib/css/components/{_stacks-page-titles.less → page-titles.less} +9 -9
- package/lib/css/components/{_stacks-pagination.less → pagination.less} +8 -8
- package/lib/css/components/{_stacks-popovers.less → popovers.less} +17 -17
- package/lib/css/components/{_stacks-post-summary.less → post-summary.less} +35 -35
- package/lib/css/components/{_stacks-progress-bars.less → progress-bars.less} +29 -30
- package/lib/css/components/{_stacks-prose.less → prose.less} +31 -31
- package/lib/css/components/{_stacks-spinner.less → spinner.less} +14 -14
- package/lib/css/components/{_stacks-tables.less → tables.less} +10 -10
- package/lib/css/components/{_stacks-tags.less → tags.less} +33 -41
- package/lib/css/components/{_stacks-toggle-switches.less → toggle-switches.less} +5 -5
- package/lib/css/components/{_stacks-topbar.less → topbar.less} +27 -40
- package/lib/css/components/{_stacks-uploader.less → uploader.less} +18 -18
- package/lib/css/components/{_stacks-user-cards.less → user-cards.less} +14 -14
- package/lib/css/components/{_stacks-widget-dynamic.less → widget-dynamic.less} +1 -1
- package/lib/css/components/{_stacks-widget-static.less → widget-static.less} +39 -38
- package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less} +10 -30
- package/lib/css/exports/constants-helpers.less +108 -0
- package/lib/css/exports/constants-type.less +153 -0
- package/lib/css/exports/{_stacks-exports.less → exports.less} +4 -4
- package/lib/css/exports/{_stacks-mixins.less → mixins.less} +18 -1
- package/lib/css/stacks-dynamic.less +12 -13
- package/lib/css/stacks-static.less +38 -38
- package/lib/ts/controllers/index.ts +8 -0
- package/lib/ts/controllers/s-expandable-control.ts +163 -164
- package/lib/ts/controllers/s-modal.ts +259 -261
- package/lib/ts/controllers/s-navigation-tablist.ts +96 -97
- package/lib/ts/controllers/s-popover.ts +438 -440
- package/lib/ts/controllers/s-table.ts +203 -203
- package/lib/ts/controllers/s-tooltip.ts +195 -196
- package/lib/ts/controllers/s-uploader.ts +162 -164
- package/lib/ts/index.ts +20 -0
- package/lib/ts/stacks.ts +73 -68
- package/lib/tsconfig.json +8 -6
- package/package.json +40 -24
- package/dist/css/stacks-flexgrid-shim.min.css +0 -1
- package/lib/css/atomic/_stacks-spacing.less +0 -168
- package/lib/css/atomic/_stacks-width-height.less +0 -195
- package/lib/css/base/_stacks-configuration-dynamic.less +0 -106
- package/lib/css/exports/_stacks-constants-helpers.less +0 -139
- package/lib/css/exports/_stacks-constants-type.less +0 -91
- package/lib/ts/finalize.ts +0 -1
- package/lib/ts/stimulus.d.ts +0 -4
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.grid{display:flex}.grid__fl0,.grid__fl0>.grid,.grid__fl0>.grid--cell{flex:0 auto}.grid__fl1,.grid__fl1>.grid,.grid__fl1>.grid--cell{flex:1 auto}.grid--cell1{flex-basis:8.33333333%}.grid--cell2{flex-basis:16.66666667%}.grid--cell3{flex-basis:25%}.grid--cell4{flex-basis:33.33333333%}.grid--cell5{flex-basis:41.66666667%}.grid--cell6{flex-basis:50%}.grid--cell7{flex-basis:58.33333333%}.grid--cell8{flex-basis:66.66666667%}.grid--cell9{flex-basis:75%}.grid--cell10{flex-basis:83.33333333%}.grid--cell11{flex-basis:91.66666667%}.grid--cell12{flex-basis:100%}.grid__allcells1>.grid,.grid__allcells1>.grid--cell{flex-basis:8.33333333%}.grid__allcells2>.grid,.grid__allcells2>.grid--cell{flex-basis:16.66666667%}.grid__allcells3>.grid,.grid__allcells3>.grid--cell{flex-basis:25%}.grid__allcells4>.grid,.grid__allcells4>.grid--cell{flex-basis:33.33333333%}.grid__allcells5>.grid,.grid__allcells5>.grid--cell{flex-basis:41.66666667%}.grid__allcells6>.grid,.grid__allcells6>.grid--cell{flex-basis:50%}.grid__allcells7>.grid,.grid__allcells7>.grid--cell{flex-basis:58.33333333%}.grid__allcells8>.grid,.grid__allcells8>.grid--cell{flex-basis:66.66666667%}.grid__allcells9>.grid,.grid__allcells9>.grid--cell{flex-basis:75%}.grid__allcells10>.grid,.grid__allcells10>.grid--cell{flex-basis:83.33333333%}.grid__allcells11>.grid,.grid__allcells11>.grid--cell{flex-basis:91.66666667%}.grid__allcells12>.grid,.grid__allcells12>.grid--cell{flex-basis:100%}.gs2{margin:-1px}.gs2>.grid,.gs2>.grid--cell{margin:1px}.gs2>.grid--cell1{margin:1px}.gs2.grid__allcells1>.grid,.gs2.grid__allcells1>.grid--cell,.gs2>.grid--cell1{flex-basis:calc(8.333333333333334% - 2px)}.gs2>.grid--cell2{margin:1px}.gs2.grid__allcells2>.grid,.gs2.grid__allcells2>.grid--cell,.gs2>.grid--cell2{flex-basis:calc(16.666666666666668% - 2px)}.gs2>.grid--cell3{margin:1px}.gs2.grid__allcells3>.grid,.gs2.grid__allcells3>.grid--cell,.gs2>.grid--cell3{flex-basis:calc(25% - 2px)}.gs2>.grid--cell4{margin:1px}.gs2.grid__allcells4>.grid,.gs2.grid__allcells4>.grid--cell,.gs2>.grid--cell4{flex-basis:calc(33.333333333333336% - 2px)}.gs2>.grid--cell5{margin:1px}.gs2.grid__allcells5>.grid,.gs2.grid__allcells5>.grid--cell,.gs2>.grid--cell5{flex-basis:calc(41.666666666666664% - 2px)}.gs2>.grid--cell6{margin:1px}.gs2.grid__allcells6>.grid,.gs2.grid__allcells6>.grid--cell,.gs2>.grid--cell6{flex-basis:calc(50% - 2px)}.gs2>.grid--cell7{margin:1px}.gs2.grid__allcells7>.grid,.gs2.grid__allcells7>.grid--cell,.gs2>.grid--cell7{flex-basis:calc(58.333333333333336% - 2px)}.gs2>.grid--cell8{margin:1px}.gs2.grid__allcells8>.grid,.gs2.grid__allcells8>.grid--cell,.gs2>.grid--cell8{flex-basis:calc(66.66666666666667% - 2px)}.gs2>.grid--cell9{margin:1px}.gs2.grid__allcells9>.grid,.gs2.grid__allcells9>.grid--cell,.gs2>.grid--cell9{flex-basis:calc(75% - 2px)}.gs2>.grid--cell10{margin:1px}.gs2.grid__allcells10>.grid,.gs2.grid__allcells10>.grid--cell,.gs2>.grid--cell10{flex-basis:calc(83.33333333333333% - 2px)}.gs2>.grid--cell11{margin:1px}.gs2.grid__allcells11>.grid,.gs2.grid__allcells11>.grid--cell,.gs2>.grid--cell11{flex-basis:calc(91.66666666666667% - 2px)}.gs2>.grid--cell12{margin:1px}.gs2.grid__allcells12>.grid,.gs2.grid__allcells12>.grid--cell,.gs2>.grid--cell12{flex-basis:calc(100% - 2px)}.gs4{margin:-2px}.gs4>.grid,.gs4>.grid--cell{margin:2px}.gs4>.grid--cell1{margin:2px}.gs4.grid__allcells1>.grid,.gs4.grid__allcells1>.grid--cell,.gs4>.grid--cell1{flex-basis:calc(8.333333333333334% - 4px)}.gs4>.grid--cell2{margin:2px}.gs4.grid__allcells2>.grid,.gs4.grid__allcells2>.grid--cell,.gs4>.grid--cell2{flex-basis:calc(16.666666666666668% - 4px)}.gs4>.grid--cell3{margin:2px}.gs4.grid__allcells3>.grid,.gs4.grid__allcells3>.grid--cell,.gs4>.grid--cell3{flex-basis:calc(25% - 4px)}.gs4>.grid--cell4{margin:2px}.gs4.grid__allcells4>.grid,.gs4.grid__allcells4>.grid--cell,.gs4>.grid--cell4{flex-basis:calc(33.333333333333336% - 4px)}.gs4>.grid--cell5{margin:2px}.gs4.grid__allcells5>.grid,.gs4.grid__allcells5>.grid--cell,.gs4>.grid--cell5{flex-basis:calc(41.666666666666664% - 4px)}.gs4>.grid--cell6{margin:2px}.gs4.grid__allcells6>.grid,.gs4.grid__allcells6>.grid--cell,.gs4>.grid--cell6{flex-basis:calc(50% - 4px)}.gs4>.grid--cell7{margin:2px}.gs4.grid__allcells7>.grid,.gs4.grid__allcells7>.grid--cell,.gs4>.grid--cell7{flex-basis:calc(58.333333333333336% - 4px)}.gs4>.grid--cell8{margin:2px}.gs4.grid__allcells8>.grid,.gs4.grid__allcells8>.grid--cell,.gs4>.grid--cell8{flex-basis:calc(66.66666666666667% - 4px)}.gs4>.grid--cell9{margin:2px}.gs4.grid__allcells9>.grid,.gs4.grid__allcells9>.grid--cell,.gs4>.grid--cell9{flex-basis:calc(75% - 4px)}.gs4>.grid--cell10{margin:2px}.gs4.grid__allcells10>.grid,.gs4.grid__allcells10>.grid--cell,.gs4>.grid--cell10{flex-basis:calc(83.33333333333333% - 4px)}.gs4>.grid--cell11{margin:2px}.gs4.grid__allcells11>.grid,.gs4.grid__allcells11>.grid--cell,.gs4>.grid--cell11{flex-basis:calc(91.66666666666667% - 4px)}.gs4>.grid--cell12{margin:2px}.gs4.grid__allcells12>.grid,.gs4.grid__allcells12>.grid--cell,.gs4>.grid--cell12{flex-basis:calc(100% - 4px)}.gs8{margin:-4px}.gs8>.grid,.gs8>.grid--cell{margin:4px}.gs8>.grid--cell1{margin:4px}.gs8.grid__allcells1>.grid,.gs8.grid__allcells1>.grid--cell,.gs8>.grid--cell1{flex-basis:calc(8.333333333333334% - 8px)}.gs8>.grid--cell2{margin:4px}.gs8.grid__allcells2>.grid,.gs8.grid__allcells2>.grid--cell,.gs8>.grid--cell2{flex-basis:calc(16.666666666666668% - 8px)}.gs8>.grid--cell3{margin:4px}.gs8.grid__allcells3>.grid,.gs8.grid__allcells3>.grid--cell,.gs8>.grid--cell3{flex-basis:calc(25% - 8px)}.gs8>.grid--cell4{margin:4px}.gs8.grid__allcells4>.grid,.gs8.grid__allcells4>.grid--cell,.gs8>.grid--cell4{flex-basis:calc(33.333333333333336% - 8px)}.gs8>.grid--cell5{margin:4px}.gs8.grid__allcells5>.grid,.gs8.grid__allcells5>.grid--cell,.gs8>.grid--cell5{flex-basis:calc(41.666666666666664% - 8px)}.gs8>.grid--cell6{margin:4px}.gs8.grid__allcells6>.grid,.gs8.grid__allcells6>.grid--cell,.gs8>.grid--cell6{flex-basis:calc(50% - 8px)}.gs8>.grid--cell7{margin:4px}.gs8.grid__allcells7>.grid,.gs8.grid__allcells7>.grid--cell,.gs8>.grid--cell7{flex-basis:calc(58.333333333333336% - 8px)}.gs8>.grid--cell8{margin:4px}.gs8.grid__allcells8>.grid,.gs8.grid__allcells8>.grid--cell,.gs8>.grid--cell8{flex-basis:calc(66.66666666666667% - 8px)}.gs8>.grid--cell9{margin:4px}.gs8.grid__allcells9>.grid,.gs8.grid__allcells9>.grid--cell,.gs8>.grid--cell9{flex-basis:calc(75% - 8px)}.gs8>.grid--cell10{margin:4px}.gs8.grid__allcells10>.grid,.gs8.grid__allcells10>.grid--cell,.gs8>.grid--cell10{flex-basis:calc(83.33333333333333% - 8px)}.gs8>.grid--cell11{margin:4px}.gs8.grid__allcells11>.grid,.gs8.grid__allcells11>.grid--cell,.gs8>.grid--cell11{flex-basis:calc(91.66666666666667% - 8px)}.gs8>.grid--cell12{margin:4px}.gs8.grid__allcells12>.grid,.gs8.grid__allcells12>.grid--cell,.gs8>.grid--cell12{flex-basis:calc(100% - 8px)}.gs12{margin:-6px}.gs12>.grid,.gs12>.grid--cell{margin:6px}.gs12>.grid--cell1{margin:6px}.gs12.grid__allcells1>.grid,.gs12.grid__allcells1>.grid--cell,.gs12>.grid--cell1{flex-basis:calc(8.333333333333334% - 12px)}.gs12>.grid--cell2{margin:6px}.gs12.grid__allcells2>.grid,.gs12.grid__allcells2>.grid--cell,.gs12>.grid--cell2{flex-basis:calc(16.666666666666668% - 12px)}.gs12>.grid--cell3{margin:6px}.gs12.grid__allcells3>.grid,.gs12.grid__allcells3>.grid--cell,.gs12>.grid--cell3{flex-basis:calc(25% - 12px)}.gs12>.grid--cell4{margin:6px}.gs12.grid__allcells4>.grid,.gs12.grid__allcells4>.grid--cell,.gs12>.grid--cell4{flex-basis:calc(33.333333333333336% - 12px)}.gs12>.grid--cell5{margin:6px}.gs12.grid__allcells5>.grid,.gs12.grid__allcells5>.grid--cell,.gs12>.grid--cell5{flex-basis:calc(41.666666666666664% - 12px)}.gs12>.grid--cell6{margin:6px}.gs12.grid__allcells6>.grid,.gs12.grid__allcells6>.grid--cell,.gs12>.grid--cell6{flex-basis:calc(50% - 12px)}.gs12>.grid--cell7{margin:6px}.gs12.grid__allcells7>.grid,.gs12.grid__allcells7>.grid--cell,.gs12>.grid--cell7{flex-basis:calc(58.333333333333336% - 12px)}.gs12>.grid--cell8{margin:6px}.gs12.grid__allcells8>.grid,.gs12.grid__allcells8>.grid--cell,.gs12>.grid--cell8{flex-basis:calc(66.66666666666667% - 12px)}.gs12>.grid--cell9{margin:6px}.gs12.grid__allcells9>.grid,.gs12.grid__allcells9>.grid--cell,.gs12>.grid--cell9{flex-basis:calc(75% - 12px)}.gs12>.grid--cell10{margin:6px}.gs12.grid__allcells10>.grid,.gs12.grid__allcells10>.grid--cell,.gs12>.grid--cell10{flex-basis:calc(83.33333333333333% - 12px)}.gs12>.grid--cell11{margin:6px}.gs12.grid__allcells11>.grid,.gs12.grid__allcells11>.grid--cell,.gs12>.grid--cell11{flex-basis:calc(91.66666666666667% - 12px)}.gs12>.grid--cell12{margin:6px}.gs12.grid__allcells12>.grid,.gs12.grid__allcells12>.grid--cell,.gs12>.grid--cell12{flex-basis:calc(100% - 12px)}.gs16{margin:-8px}.gs16>.grid,.gs16>.grid--cell{margin:8px}.gs16>.grid--cell1{margin:8px}.gs16.grid__allcells1>.grid,.gs16.grid__allcells1>.grid--cell,.gs16>.grid--cell1{flex-basis:calc(8.333333333333334% - 16px)}.gs16>.grid--cell2{margin:8px}.gs16.grid__allcells2>.grid,.gs16.grid__allcells2>.grid--cell,.gs16>.grid--cell2{flex-basis:calc(16.666666666666668% - 16px)}.gs16>.grid--cell3{margin:8px}.gs16.grid__allcells3>.grid,.gs16.grid__allcells3>.grid--cell,.gs16>.grid--cell3{flex-basis:calc(25% - 16px)}.gs16>.grid--cell4{margin:8px}.gs16.grid__allcells4>.grid,.gs16.grid__allcells4>.grid--cell,.gs16>.grid--cell4{flex-basis:calc(33.333333333333336% - 16px)}.gs16>.grid--cell5{margin:8px}.gs16.grid__allcells5>.grid,.gs16.grid__allcells5>.grid--cell,.gs16>.grid--cell5{flex-basis:calc(41.666666666666664% - 16px)}.gs16>.grid--cell6{margin:8px}.gs16.grid__allcells6>.grid,.gs16.grid__allcells6>.grid--cell,.gs16>.grid--cell6{flex-basis:calc(50% - 16px)}.gs16>.grid--cell7{margin:8px}.gs16.grid__allcells7>.grid,.gs16.grid__allcells7>.grid--cell,.gs16>.grid--cell7{flex-basis:calc(58.333333333333336% - 16px)}.gs16>.grid--cell8{margin:8px}.gs16.grid__allcells8>.grid,.gs16.grid__allcells8>.grid--cell,.gs16>.grid--cell8{flex-basis:calc(66.66666666666667% - 16px)}.gs16>.grid--cell9{margin:8px}.gs16.grid__allcells9>.grid,.gs16.grid__allcells9>.grid--cell,.gs16>.grid--cell9{flex-basis:calc(75% - 16px)}.gs16>.grid--cell10{margin:8px}.gs16.grid__allcells10>.grid,.gs16.grid__allcells10>.grid--cell,.gs16>.grid--cell10{flex-basis:calc(83.33333333333333% - 16px)}.gs16>.grid--cell11{margin:8px}.gs16.grid__allcells11>.grid,.gs16.grid__allcells11>.grid--cell,.gs16>.grid--cell11{flex-basis:calc(91.66666666666667% - 16px)}.gs16>.grid--cell12{margin:8px}.gs16.grid__allcells12>.grid,.gs16.grid__allcells12>.grid--cell,.gs16>.grid--cell12{flex-basis:calc(100% - 16px)}.gs24{margin:-12px}.gs24>.grid,.gs24>.grid--cell{margin:12px}.gs24>.grid--cell1{margin:12px}.gs24.grid__allcells1>.grid,.gs24.grid__allcells1>.grid--cell,.gs24>.grid--cell1{flex-basis:calc(8.333333333333334% - 24px)}.gs24>.grid--cell2{margin:12px}.gs24.grid__allcells2>.grid,.gs24.grid__allcells2>.grid--cell,.gs24>.grid--cell2{flex-basis:calc(16.666666666666668% - 24px)}.gs24>.grid--cell3{margin:12px}.gs24.grid__allcells3>.grid,.gs24.grid__allcells3>.grid--cell,.gs24>.grid--cell3{flex-basis:calc(25% - 24px)}.gs24>.grid--cell4{margin:12px}.gs24.grid__allcells4>.grid,.gs24.grid__allcells4>.grid--cell,.gs24>.grid--cell4{flex-basis:calc(33.333333333333336% - 24px)}.gs24>.grid--cell5{margin:12px}.gs24.grid__allcells5>.grid,.gs24.grid__allcells5>.grid--cell,.gs24>.grid--cell5{flex-basis:calc(41.666666666666664% - 24px)}.gs24>.grid--cell6{margin:12px}.gs24.grid__allcells6>.grid,.gs24.grid__allcells6>.grid--cell,.gs24>.grid--cell6{flex-basis:calc(50% - 24px)}.gs24>.grid--cell7{margin:12px}.gs24.grid__allcells7>.grid,.gs24.grid__allcells7>.grid--cell,.gs24>.grid--cell7{flex-basis:calc(58.333333333333336% - 24px)}.gs24>.grid--cell8{margin:12px}.gs24.grid__allcells8>.grid,.gs24.grid__allcells8>.grid--cell,.gs24>.grid--cell8{flex-basis:calc(66.66666666666667% - 24px)}.gs24>.grid--cell9{margin:12px}.gs24.grid__allcells9>.grid,.gs24.grid__allcells9>.grid--cell,.gs24>.grid--cell9{flex-basis:calc(75% - 24px)}.gs24>.grid--cell10{margin:12px}.gs24.grid__allcells10>.grid,.gs24.grid__allcells10>.grid--cell,.gs24>.grid--cell10{flex-basis:calc(83.33333333333333% - 24px)}.gs24>.grid--cell11{margin:12px}.gs24.grid__allcells11>.grid,.gs24.grid__allcells11>.grid--cell,.gs24>.grid--cell11{flex-basis:calc(91.66666666666667% - 24px)}.gs24>.grid--cell12{margin:12px}.gs24.grid__allcells12>.grid,.gs24.grid__allcells12>.grid--cell,.gs24>.grid--cell12{flex-basis:calc(100% - 24px)}.gs32{margin:-16px}.gs32>.grid,.gs32>.grid--cell{margin:16px}.gs32>.grid--cell1{margin:16px}.gs32.grid__allcells1>.grid,.gs32.grid__allcells1>.grid--cell,.gs32>.grid--cell1{flex-basis:calc(8.333333333333334% - 32px)}.gs32>.grid--cell2{margin:16px}.gs32.grid__allcells2>.grid,.gs32.grid__allcells2>.grid--cell,.gs32>.grid--cell2{flex-basis:calc(16.666666666666668% - 32px)}.gs32>.grid--cell3{margin:16px}.gs32.grid__allcells3>.grid,.gs32.grid__allcells3>.grid--cell,.gs32>.grid--cell3{flex-basis:calc(25% - 32px)}.gs32>.grid--cell4{margin:16px}.gs32.grid__allcells4>.grid,.gs32.grid__allcells4>.grid--cell,.gs32>.grid--cell4{flex-basis:calc(33.333333333333336% - 32px)}.gs32>.grid--cell5{margin:16px}.gs32.grid__allcells5>.grid,.gs32.grid__allcells5>.grid--cell,.gs32>.grid--cell5{flex-basis:calc(41.666666666666664% - 32px)}.gs32>.grid--cell6{margin:16px}.gs32.grid__allcells6>.grid,.gs32.grid__allcells6>.grid--cell,.gs32>.grid--cell6{flex-basis:calc(50% - 32px)}.gs32>.grid--cell7{margin:16px}.gs32.grid__allcells7>.grid,.gs32.grid__allcells7>.grid--cell,.gs32>.grid--cell7{flex-basis:calc(58.333333333333336% - 32px)}.gs32>.grid--cell8{margin:16px}.gs32.grid__allcells8>.grid,.gs32.grid__allcells8>.grid--cell,.gs32>.grid--cell8{flex-basis:calc(66.66666666666667% - 32px)}.gs32>.grid--cell9{margin:16px}.gs32.grid__allcells9>.grid,.gs32.grid__allcells9>.grid--cell,.gs32>.grid--cell9{flex-basis:calc(75% - 32px)}.gs32>.grid--cell10{margin:16px}.gs32.grid__allcells10>.grid,.gs32.grid__allcells10>.grid--cell,.gs32>.grid--cell10{flex-basis:calc(83.33333333333333% - 32px)}.gs32>.grid--cell11{margin:16px}.gs32.grid__allcells11>.grid,.gs32.grid__allcells11>.grid--cell,.gs32>.grid--cell11{flex-basis:calc(91.66666666666667% - 32px)}.gs32>.grid--cell12{margin:16px}.gs32.grid__allcells12>.grid,.gs32.grid__allcells12>.grid--cell,.gs32>.grid--cell12{flex-basis:calc(100% - 32px)}.gs48{margin:-24px}.gs48>.grid,.gs48>.grid--cell{margin:24px}.gs48>.grid--cell1{margin:24px}.gs48.grid__allcells1>.grid,.gs48.grid__allcells1>.grid--cell,.gs48>.grid--cell1{flex-basis:calc(8.333333333333334% - 48px)}.gs48>.grid--cell2{margin:24px}.gs48.grid__allcells2>.grid,.gs48.grid__allcells2>.grid--cell,.gs48>.grid--cell2{flex-basis:calc(16.666666666666668% - 48px)}.gs48>.grid--cell3{margin:24px}.gs48.grid__allcells3>.grid,.gs48.grid__allcells3>.grid--cell,.gs48>.grid--cell3{flex-basis:calc(25% - 48px)}.gs48>.grid--cell4{margin:24px}.gs48.grid__allcells4>.grid,.gs48.grid__allcells4>.grid--cell,.gs48>.grid--cell4{flex-basis:calc(33.333333333333336% - 48px)}.gs48>.grid--cell5{margin:24px}.gs48.grid__allcells5>.grid,.gs48.grid__allcells5>.grid--cell,.gs48>.grid--cell5{flex-basis:calc(41.666666666666664% - 48px)}.gs48>.grid--cell6{margin:24px}.gs48.grid__allcells6>.grid,.gs48.grid__allcells6>.grid--cell,.gs48>.grid--cell6{flex-basis:calc(50% - 48px)}.gs48>.grid--cell7{margin:24px}.gs48.grid__allcells7>.grid,.gs48.grid__allcells7>.grid--cell,.gs48>.grid--cell7{flex-basis:calc(58.333333333333336% - 48px)}.gs48>.grid--cell8{margin:24px}.gs48.grid__allcells8>.grid,.gs48.grid__allcells8>.grid--cell,.gs48>.grid--cell8{flex-basis:calc(66.66666666666667% - 48px)}.gs48>.grid--cell9{margin:24px}.gs48.grid__allcells9>.grid,.gs48.grid__allcells9>.grid--cell,.gs48>.grid--cell9{flex-basis:calc(75% - 48px)}.gs48>.grid--cell10{margin:24px}.gs48.grid__allcells10>.grid,.gs48.grid__allcells10>.grid--cell,.gs48>.grid--cell10{flex-basis:calc(83.33333333333333% - 48px)}.gs48>.grid--cell11{margin:24px}.gs48.grid__allcells11>.grid,.gs48.grid__allcells11>.grid--cell,.gs48>.grid--cell11{flex-basis:calc(91.66666666666667% - 48px)}.gs48>.grid--cell12{margin:24px}.gs48.grid__allcells12>.grid,.gs48.grid__allcells12>.grid--cell,.gs48>.grid--cell12{flex-basis:calc(100% - 48px)}.gs64{margin:-32px}.gs64>.grid,.gs64>.grid--cell{margin:32px}.gs64>.grid--cell1{margin:32px}.gs64.grid__allcells1>.grid,.gs64.grid__allcells1>.grid--cell,.gs64>.grid--cell1{flex-basis:calc(8.333333333333334% - 64px)}.gs64>.grid--cell2{margin:32px}.gs64.grid__allcells2>.grid,.gs64.grid__allcells2>.grid--cell,.gs64>.grid--cell2{flex-basis:calc(16.666666666666668% - 64px)}.gs64>.grid--cell3{margin:32px}.gs64.grid__allcells3>.grid,.gs64.grid__allcells3>.grid--cell,.gs64>.grid--cell3{flex-basis:calc(25% - 64px)}.gs64>.grid--cell4{margin:32px}.gs64.grid__allcells4>.grid,.gs64.grid__allcells4>.grid--cell,.gs64>.grid--cell4{flex-basis:calc(33.333333333333336% - 64px)}.gs64>.grid--cell5{margin:32px}.gs64.grid__allcells5>.grid,.gs64.grid__allcells5>.grid--cell,.gs64>.grid--cell5{flex-basis:calc(41.666666666666664% - 64px)}.gs64>.grid--cell6{margin:32px}.gs64.grid__allcells6>.grid,.gs64.grid__allcells6>.grid--cell,.gs64>.grid--cell6{flex-basis:calc(50% - 64px)}.gs64>.grid--cell7{margin:32px}.gs64.grid__allcells7>.grid,.gs64.grid__allcells7>.grid--cell,.gs64>.grid--cell7{flex-basis:calc(58.333333333333336% - 64px)}.gs64>.grid--cell8{margin:32px}.gs64.grid__allcells8>.grid,.gs64.grid__allcells8>.grid--cell,.gs64>.grid--cell8{flex-basis:calc(66.66666666666667% - 64px)}.gs64>.grid--cell9{margin:32px}.gs64.grid__allcells9>.grid,.gs64.grid__allcells9>.grid--cell,.gs64>.grid--cell9{flex-basis:calc(75% - 64px)}.gs64>.grid--cell10{margin:32px}.gs64.grid__allcells10>.grid,.gs64.grid__allcells10>.grid--cell,.gs64>.grid--cell10{flex-basis:calc(83.33333333333333% - 64px)}.gs64>.grid--cell11{margin:32px}.gs64.grid__allcells11>.grid,.gs64.grid__allcells11>.grid--cell,.gs64>.grid--cell11{flex-basis:calc(91.66666666666667% - 64px)}.gs64>.grid--cell12{margin:32px}.gs64.grid__allcells12>.grid,.gs64.grid__allcells12>.grid--cell,.gs64>.grid--cell12{flex-basis:calc(100% - 64px)}.gsx,.gsx>.grid,.gsx>[class*=grid--cell]{margin-top:0;margin-bottom:0}.gsy,.gsy>.grid,.gsy>[class*=grid--cell]{margin-right:0;margin-left:0}.s-btn.grid{display:flex}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// SPACING
|
|
4
|
-
//
|
|
5
|
-
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
-
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
-
// visit https://stackoverflow.design/
|
|
8
|
-
//
|
|
9
|
-
// • MARGIN
|
|
10
|
-
// • PADDING
|
|
11
|
-
// • POSITIONING
|
|
12
|
-
//
|
|
13
|
-
// ============================================================================
|
|
14
|
-
// $ MARGIN
|
|
15
|
-
// ----------------------------------------------------------------------------
|
|
16
|
-
// $$ All margin
|
|
17
|
-
#stacks-internals #build-classes(
|
|
18
|
-
responsive,
|
|
19
|
-
'.m', { .template(@value) { margin: @value !important; } },
|
|
20
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
// $$ Top margin
|
|
24
|
-
#stacks-internals #build-classes(
|
|
25
|
-
responsive,
|
|
26
|
-
'.mt', { .template(@value) { margin-top: @value !important; } },
|
|
27
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
// $$ Negative & auto top margin
|
|
31
|
-
#stacks-internals #build-classes(
|
|
32
|
-
'.mt', { .template(@value) { margin-top: @value !important; } },
|
|
33
|
-
auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
// $$ Right margin
|
|
37
|
-
#stacks-internals #build-classes(
|
|
38
|
-
responsive,
|
|
39
|
-
'.mr', { .template(@value) { margin-right: @value !important; } },
|
|
40
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
41
|
-
);
|
|
42
|
-
|
|
43
|
-
// $$ Negative & auto right margin
|
|
44
|
-
#stacks-internals #build-classes(
|
|
45
|
-
'.mr', { .template(@value) { margin-right: @value !important; } },
|
|
46
|
-
auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
// $$ Bottom margin
|
|
50
|
-
#stacks-internals #build-classes(
|
|
51
|
-
responsive,
|
|
52
|
-
'.mb', { .template(@value) { margin-bottom: @value !important; } },
|
|
53
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
// $$ Negative & auto bottom margin
|
|
57
|
-
#stacks-internals #build-classes(
|
|
58
|
-
'.mb', { .template(@value) { margin-bottom: @value !important; } },
|
|
59
|
-
auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
60
|
-
);
|
|
61
|
-
|
|
62
|
-
// $$ Left margin
|
|
63
|
-
#stacks-internals #build-classes(
|
|
64
|
-
responsive,
|
|
65
|
-
'.ml', { .template(@value) { margin-left: @value !important; } },
|
|
66
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
// $$ Negative & auto left margin
|
|
70
|
-
#stacks-internals #build-classes(
|
|
71
|
-
'.ml', { .template(@value) { margin-left: @value !important; } },
|
|
72
|
-
auto -(@su2/2) -@su2 -@su4 -@su6 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
// $$ X-Axis margin
|
|
76
|
-
#stacks-internals #build-classes(
|
|
77
|
-
'.mx', { .template(@value) { margin-left: @value !important; margin-right: @value !important; } },
|
|
78
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
// $$ Y-Axis margin
|
|
82
|
-
#stacks-internals #build-classes(
|
|
83
|
-
'.my', { .template(@value) { margin-top: @value !important; margin-bottom: @value !important; } },
|
|
84
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128 auto -(@su2/2) -@su2 -@su4 -@su8 -@su12 -@su16 -@su24 -@su32 -@su48 -@su64 -@su96 -@su128
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
// ============================================================================
|
|
88
|
-
// $ PADDING
|
|
89
|
-
// ----------------------------------------------------------------------------
|
|
90
|
-
// $$ All padding
|
|
91
|
-
#stacks-internals #build-classes(
|
|
92
|
-
responsive,
|
|
93
|
-
'.p', { .template(@value) { padding: @value !important; } },
|
|
94
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
// $$ Top Padding
|
|
98
|
-
#stacks-internals #build-classes(
|
|
99
|
-
responsive,
|
|
100
|
-
'.pt', { .template(@value) { padding-top: @value !important; } },
|
|
101
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
102
|
-
);
|
|
103
|
-
|
|
104
|
-
// $$ Right Padding
|
|
105
|
-
#stacks-internals #build-classes(
|
|
106
|
-
responsive,
|
|
107
|
-
'.pr', { .template(@value) { padding-right: @value !important; } },
|
|
108
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
109
|
-
);
|
|
110
|
-
|
|
111
|
-
// $$ Bottom Padding
|
|
112
|
-
#stacks-internals #build-classes(
|
|
113
|
-
responsive,
|
|
114
|
-
'.pb', { .template(@value) { padding-bottom: @value !important; } },
|
|
115
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
116
|
-
);
|
|
117
|
-
|
|
118
|
-
// $$ Left Padding
|
|
119
|
-
#stacks-internals #build-classes(
|
|
120
|
-
responsive,
|
|
121
|
-
'.pl', { .template(@value) { padding-left: @value !important; } },
|
|
122
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
123
|
-
);
|
|
124
|
-
|
|
125
|
-
// $$ X-Axis Padding
|
|
126
|
-
#stacks-internals #build-classes(
|
|
127
|
-
'.px', { .template(@value) { padding-left: @value !important; padding-right: @value !important; } },
|
|
128
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
129
|
-
);
|
|
130
|
-
|
|
131
|
-
// $$ Y-Axis Padding
|
|
132
|
-
#stacks-internals #build-classes(
|
|
133
|
-
'.py', { .template(@value) { padding-top: @value !important; padding-bottom: @value !important; } },
|
|
134
|
-
0 (@su2/2) @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
135
|
-
);
|
|
136
|
-
|
|
137
|
-
// ============================================================================
|
|
138
|
-
// $ POSITIONING
|
|
139
|
-
// ----------------------------------------------------------------------------
|
|
140
|
-
// $$ Top
|
|
141
|
-
#stacks-internals #build-classes(
|
|
142
|
-
'.t', { .template(@value) { top: @value !important; } },
|
|
143
|
-
0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
|
|
144
|
-
);
|
|
145
|
-
|
|
146
|
-
// $$ Right
|
|
147
|
-
#stacks-internals #build-classes(
|
|
148
|
-
'.r', { .template(@value) { right: @value !important; } },
|
|
149
|
-
0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
// $$ Bottom
|
|
153
|
-
#stacks-internals #build-classes(
|
|
154
|
-
'.b', { .template(@value) { bottom: @value !important; } },
|
|
155
|
-
0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
|
|
156
|
-
);
|
|
157
|
-
|
|
158
|
-
// $$ Left
|
|
159
|
-
#stacks-internals #build-classes(
|
|
160
|
-
'.l', { .template(@value) { left: @value !important; } },
|
|
161
|
-
0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
|
|
162
|
-
);
|
|
163
|
-
|
|
164
|
-
// $$ Inset
|
|
165
|
-
#stacks-internals #build-classes(
|
|
166
|
-
'.i', { .template(@value) { inset: @value !important; } },
|
|
167
|
-
0 1px @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
168
|
-
);
|
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// WIDTH & HEIGHT
|
|
4
|
-
//
|
|
5
|
-
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
-
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
-
// visit https://stackoverflow.design/
|
|
8
|
-
//
|
|
9
|
-
// • WIDTH
|
|
10
|
-
// • PERCENTAGE
|
|
11
|
-
// • STATIC
|
|
12
|
-
// • MAX-WIDTH
|
|
13
|
-
// • MIN-WIDTH
|
|
14
|
-
// • HEIGHT
|
|
15
|
-
// • PERCENTAGE
|
|
16
|
-
// • STATIC
|
|
17
|
-
// • MAX-HEIGHT
|
|
18
|
-
// • MIN-HEIGHT
|
|
19
|
-
//
|
|
20
|
-
// ============================================================================
|
|
21
|
-
// $ WIDTH
|
|
22
|
-
// ----------------------------------------------------------------------------
|
|
23
|
-
// $$ PERCENTAGE AND VIEWPORT UNITS
|
|
24
|
-
.w0 { width: 0 !important; }
|
|
25
|
-
.w10 { width: 10% !important; }
|
|
26
|
-
.w20 { width: 20% !important; }
|
|
27
|
-
#stacks-internals #responsify('.w25', { width: 25% !important; });
|
|
28
|
-
.w30 { width: 30% !important; }
|
|
29
|
-
#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
|
|
30
|
-
.w40 { width: 40% !important; }
|
|
31
|
-
#stacks-internals #responsify('.w50', { width: 50% !important; });
|
|
32
|
-
.w60 { width: 60% !important; }
|
|
33
|
-
#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
|
|
34
|
-
.w70 { width: 70% !important; }
|
|
35
|
-
#stacks-internals #responsify('.w75', { width: 75% !important; });
|
|
36
|
-
.w80 { width: 80% !important; }
|
|
37
|
-
.w90 { width: 90% !important; }
|
|
38
|
-
#stacks-internals #responsify('.w100', { width: 100% !important; });
|
|
39
|
-
#stacks-internals #responsify('.w-auto', { width: auto !important; });
|
|
40
|
-
#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
// $$ STATIC
|
|
44
|
-
.ws0,
|
|
45
|
-
.w0 { width: 0 !important; }
|
|
46
|
-
.ws1 { width: @s-step !important; }
|
|
47
|
-
.ws2 { width: @s-step * 2 !important; }
|
|
48
|
-
.ws3 { width: @s-step * 3 !important; }
|
|
49
|
-
.ws4 { width: @s-step * 4 !important; }
|
|
50
|
-
.ws5 { width: @s-step * 5 !important; }
|
|
51
|
-
.ws6 { width: @s-step * 6 !important; }
|
|
52
|
-
.ws7 { width: @s-step * 7 !important; }
|
|
53
|
-
.ws8 { width: @s-step * 8 !important; }
|
|
54
|
-
.ws9 { width: @s-step * 9 !important; }
|
|
55
|
-
.ws10 { width: @s-step * 10 !important; }
|
|
56
|
-
.ws11 { width: @s-step * 11 !important; }
|
|
57
|
-
.ws12 { width: @s-full !important; }
|
|
58
|
-
|
|
59
|
-
// $$ SPACING UNITS
|
|
60
|
-
.w2 { width: @su2 !important; }
|
|
61
|
-
.w4 { width: @su4 !important; }
|
|
62
|
-
.w6 { width: @su6 !important; }
|
|
63
|
-
.w8 { width: @su8 !important; }
|
|
64
|
-
.w12 { width: @su12 !important; }
|
|
65
|
-
.w16 { width: @su16 !important; }
|
|
66
|
-
.w24 { width: @su24 !important; }
|
|
67
|
-
.w32 { width: @su32 !important; }
|
|
68
|
-
.w48 { width: @su48 !important; }
|
|
69
|
-
.w64 { width: @su64 !important; }
|
|
70
|
-
.w96 { width: @su96 !important; }
|
|
71
|
-
.w128 { width: @su128 !important; }
|
|
72
|
-
|
|
73
|
-
// ============================================================================
|
|
74
|
-
// $ MAX-WIDTH
|
|
75
|
-
// ----------------------------------------------------------------------------
|
|
76
|
-
.wmx0 { max-width: 0 !important; }
|
|
77
|
-
.wmx1 { max-width: @s-step !important; }
|
|
78
|
-
.wmx2 { max-width: @s-step * 2 !important; }
|
|
79
|
-
.wmx25 { max-width: 25% !important; }
|
|
80
|
-
.wmx3 { max-width: @s-step * 3 !important; }
|
|
81
|
-
.wmx4 { max-width: @s-step * 4 !important; }
|
|
82
|
-
.wmx5 { max-width: @s-step * 5 !important; }
|
|
83
|
-
.wmx50 { max-width: 50% !important; }
|
|
84
|
-
.wmx6 { max-width: @s-step * 6 !important; }
|
|
85
|
-
.wmx7 { max-width: @s-step * 7 !important; }
|
|
86
|
-
.wmx75 { max-width: 75% !important; }
|
|
87
|
-
.wmx8 { max-width: @s-step * 8 !important; }
|
|
88
|
-
.wmx9 { max-width: @s-step * 9 !important; }
|
|
89
|
-
.wmx10 { max-width: @s-step * 10 !important; }
|
|
90
|
-
.wmx11 { max-width: @s-step * 11 !important; }
|
|
91
|
-
.wmx12 { max-width: @s-full !important; }
|
|
92
|
-
#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
|
|
93
|
-
#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
|
|
94
|
-
#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
|
|
95
|
-
|
|
96
|
-
// ============================================================================
|
|
97
|
-
// $ MIN-WIDTH
|
|
98
|
-
// ----------------------------------------------------------------------------
|
|
99
|
-
.wmn0 { min-width: 0 !important; }
|
|
100
|
-
.wmn1 { min-width: @s-step !important; }
|
|
101
|
-
.wmn2 { min-width: @s-step * 2 !important; }
|
|
102
|
-
.wmn25 { min-width: 25% !important; }
|
|
103
|
-
.wmn3 { min-width: @s-step * 3 !important; }
|
|
104
|
-
.wmn4 { min-width: @s-step * 4 !important; }
|
|
105
|
-
.wmn5 { min-width: @s-step * 5 !important; }
|
|
106
|
-
.wmn50 { min-width: 50% !important; }
|
|
107
|
-
.wmn6 { min-width: @s-step * 6 !important; }
|
|
108
|
-
.wmn7 { min-width: @s-step * 7 !important; }
|
|
109
|
-
.wmn75 { min-width: 75% !important; }
|
|
110
|
-
.wmn8 { min-width: @s-step * 8 !important; }
|
|
111
|
-
.wmn9 { min-width: @s-step * 9 !important; }
|
|
112
|
-
.wmn10 { min-width: @s-step * 10 !important; }
|
|
113
|
-
.wmn11 { min-width: @s-step * 11 !important; }
|
|
114
|
-
.wmn12 { min-width: @s-full !important; }
|
|
115
|
-
#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
|
|
116
|
-
#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
|
|
117
|
-
|
|
118
|
-
// ============================================================================
|
|
119
|
-
// $ HEIGHT
|
|
120
|
-
// ----------------------------------------------------------------------------
|
|
121
|
-
// $$ PERCENTAGE AND VIEWPORT UNITS
|
|
122
|
-
.h0 { height: 0 !important; }
|
|
123
|
-
#stacks-internals #responsify('.h100', { height: 100% !important; });
|
|
124
|
-
#stacks-internals #responsify('.h-auto', { height: auto !important; });
|
|
125
|
-
#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
|
|
126
|
-
|
|
127
|
-
// $$ STATIC
|
|
128
|
-
.hs0,
|
|
129
|
-
.h0 { height: 0 !important; }
|
|
130
|
-
.hs1 { height: @s-step !important; }
|
|
131
|
-
.hs2 { height: @s-step * 2 !important; }
|
|
132
|
-
.hs3 { height: @s-step * 3 !important; }
|
|
133
|
-
.hs4 { height: @s-step * 4 !important; }
|
|
134
|
-
.hs5 { height: @s-step * 5 !important; }
|
|
135
|
-
.hs6 { height: @s-step * 6 !important; }
|
|
136
|
-
.hs7 { height: @s-step * 7 !important; }
|
|
137
|
-
.hs8 { height: @s-step * 8 !important; }
|
|
138
|
-
.hs9 { height: @s-step * 9 !important; }
|
|
139
|
-
.hs10 { height: @s-step * 10 !important; }
|
|
140
|
-
.hs11 { height: @s-step * 11 !important; }
|
|
141
|
-
.hs12 { height: @s-full !important; }
|
|
142
|
-
|
|
143
|
-
// $$ SPACING UNITS
|
|
144
|
-
.h2 { height: @su2 !important; }
|
|
145
|
-
.h4 { height: @su4 !important; }
|
|
146
|
-
.h6 { height: @su6 !important; }
|
|
147
|
-
.h8 { height: @su8 !important; }
|
|
148
|
-
.h12 { height: @su12 !important; }
|
|
149
|
-
.h16 { height: @su16 !important; }
|
|
150
|
-
.h24 { height: @su24 !important; }
|
|
151
|
-
.h32 { height: @su32 !important; }
|
|
152
|
-
.h48 { height: @su48 !important; }
|
|
153
|
-
.h64 { height: @su64 !important; }
|
|
154
|
-
.h96 { height: @su96 !important; }
|
|
155
|
-
.h128 { height: @su128 !important; }
|
|
156
|
-
|
|
157
|
-
// ============================================================================
|
|
158
|
-
// $ MAX-HEIGHT
|
|
159
|
-
// ----------------------------------------------------------------------------
|
|
160
|
-
.hmx0 { max-height: 0 !important; }
|
|
161
|
-
.hmx1 { max-height: @s-step !important; }
|
|
162
|
-
.hmx2 { max-height: @s-step * 2 !important; }
|
|
163
|
-
.hmx3 { max-height: @s-step * 3 !important; }
|
|
164
|
-
.hmx4 { max-height: @s-step * 4 !important; }
|
|
165
|
-
.hmx5 { max-height: @s-step * 5 !important; }
|
|
166
|
-
.hmx6 { max-height: @s-step * 6 !important; }
|
|
167
|
-
.hmx7 { max-height: @s-step * 7 !important; }
|
|
168
|
-
.hmx8 { max-height: @s-step * 8 !important; }
|
|
169
|
-
.hmx9 { max-height: @s-step * 9 !important; }
|
|
170
|
-
.hmx10 { max-height: @s-step * 10 !important; }
|
|
171
|
-
.hmx11 { max-height: @s-step * 11 !important; }
|
|
172
|
-
.hmx12 { max-height: @s-full !important; }
|
|
173
|
-
#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
|
|
174
|
-
#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
|
|
175
|
-
#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
|
|
176
|
-
|
|
177
|
-
// ============================================================================
|
|
178
|
-
// $ MIN-HEIGHT
|
|
179
|
-
// ----------------------------------------------------------------------------
|
|
180
|
-
.hmn0 { min-height: 0 !important; }
|
|
181
|
-
.hmn1 { min-height: @s-step !important; }
|
|
182
|
-
.hmn2 { min-height: @s-step * 2 !important; }
|
|
183
|
-
.hmn3 { min-height: @s-step * 3 !important; }
|
|
184
|
-
.hmn4 { min-height: @s-step * 4 !important; }
|
|
185
|
-
.hmn5 { min-height: @s-step * 5 !important; }
|
|
186
|
-
.hmn6 { min-height: @s-step * 6 !important; }
|
|
187
|
-
.hmn7 { min-height: @s-step * 7 !important; }
|
|
188
|
-
.hmn8 { min-height: @s-step * 8 !important; }
|
|
189
|
-
.hmn9 { min-height: @s-step * 9 !important; }
|
|
190
|
-
.hmn10 { min-height: @s-step * 10 !important; }
|
|
191
|
-
.hmn11 { min-height: @s-step * 11 !important; }
|
|
192
|
-
.hmn12 { min-height: @s-full !important; }
|
|
193
|
-
#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
|
|
194
|
-
#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
|
|
195
|
-
#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
// Some small parts of Stacks is configurable, so e.g. different Stack Exchange communities
|
|
2
|
-
// can have different button styles. The default styles are the Stack Overflow brand styles.
|
|
3
|
-
// To compile a modified version of stacks, create a LESS file that imports Stacks and
|
|
4
|
-
// modifies the configuration, e.g. like this:
|
|
5
|
-
//
|
|
6
|
-
// @import "path/to/stacks.less";
|
|
7
|
-
//
|
|
8
|
-
// #stacks-config {
|
|
9
|
-
// @button-primary-background-color: magenta;
|
|
10
|
-
// }
|
|
11
|
-
//
|
|
12
|
-
// These configuration options only apply to the "dynamic" part of Stacks, which (on the Q&A sites) gets
|
|
13
|
-
// compiled into the site's primary.css. The "static" part of Stacks, which is a shared CSS file across
|
|
14
|
-
// all Q&A sites, has no access to these options.
|
|
15
|
-
//
|
|
16
|
-
// A few global configuration options that are per-project, not per-site, and thus apply to the static part
|
|
17
|
-
// as well, are in _stacks-configuration-static.less
|
|
18
|
-
|
|
19
|
-
#stacks-config {
|
|
20
|
-
// Overall body element properties
|
|
21
|
-
@body-font-color: var(--theme-body-font-color);
|
|
22
|
-
@body-type-face: var(--theme-body-font-family);
|
|
23
|
-
@body-background: var(--white);
|
|
24
|
-
@body-site-width: 1060px; // DEPRECATED will be removed in a future release
|
|
25
|
-
|
|
26
|
-
// DEPRECATED will be removed in a future release
|
|
27
|
-
// Button Muted
|
|
28
|
-
@button-muted-color: var(--black-500);
|
|
29
|
-
@button-muted-hover-color: var(--black-600);
|
|
30
|
-
@button-muted-hover-background-color: var(--black-025);
|
|
31
|
-
@button-muted-active-background-color: var(--black-050);
|
|
32
|
-
@button-muted-selected-color: var(--black-700);
|
|
33
|
-
@button-muted-selected-background-color: var(--black-075);
|
|
34
|
-
|
|
35
|
-
// DEPRECATED will be removed in a future release
|
|
36
|
-
// Button Muted Outlined
|
|
37
|
-
@button-muted-outlined-border-color: var(--black-300);
|
|
38
|
-
@button-muted-outlined-selected-border-color: var(--black-400);
|
|
39
|
-
|
|
40
|
-
// DEPRECATED will be removed in a future release
|
|
41
|
-
// Button Muted Filled
|
|
42
|
-
@button-muted-filled-color: var(--black-700);
|
|
43
|
-
@button-muted-filled-background-color: var(--black-100);
|
|
44
|
-
@button-muted-filled-hover-color: var(--black-700);
|
|
45
|
-
@button-muted-filled-hover-background-color: var(--black-150);
|
|
46
|
-
@button-muted-filled-active-background-color: var(--black-200);
|
|
47
|
-
@button-muted-filled-selected-color: var(--black-800);
|
|
48
|
-
@button-muted-filled-selected-background-color: var(--black-350);
|
|
49
|
-
|
|
50
|
-
// DEPRECATED will be removed in a future release
|
|
51
|
-
// Button Danger
|
|
52
|
-
@button-danger-color: var(--red-600);
|
|
53
|
-
@button-danger-hover-color: var(--red-700);
|
|
54
|
-
@button-danger-hover-background-color: var(--red-050);
|
|
55
|
-
@button-danger-active-background-color: var(--red-100);
|
|
56
|
-
@button-danger-selected-color: var(--red-900);
|
|
57
|
-
@button-danger-selected-background-color: var(--red-200);
|
|
58
|
-
|
|
59
|
-
// DEPRECATED will be removed in a future release
|
|
60
|
-
// Button Danger Outlined
|
|
61
|
-
@button-danger-outlined-border-color: var(--red-500);
|
|
62
|
-
@button-danger-outlined-selected-border-color: var(--red-600);
|
|
63
|
-
|
|
64
|
-
// DEPRECATED will be removed in a future release
|
|
65
|
-
// Button Danger Filled
|
|
66
|
-
@button-danger-filled-color: @white;
|
|
67
|
-
@button-danger-filled-background-color: var(--red-500);
|
|
68
|
-
@button-danger-filled-hover-color: @white;
|
|
69
|
-
@button-danger-filled-hover-background-color: var(--red-600);
|
|
70
|
-
@button-danger-filled-active-background-color: var(--red-700);
|
|
71
|
-
@button-danger-filled-selected-color: var(--white);
|
|
72
|
-
@button-danger-filled-selected-background-color: var(--red-800);
|
|
73
|
-
@button-danger-filled-number-color: var(--black-900);
|
|
74
|
-
|
|
75
|
-
// DEPRECATED will be removed in a future release
|
|
76
|
-
// Tags
|
|
77
|
-
@tags-moderator-border: var(--red-200);
|
|
78
|
-
@tags-moderator-background: var(--red-050);
|
|
79
|
-
@tags-moderator-color: var(--red-800);
|
|
80
|
-
@tags-moderator-hover-border: var(--red-300);
|
|
81
|
-
@tags-moderator-hover-background: var(--red-100);
|
|
82
|
-
@tags-moderator-hover-color: var(--red-900);
|
|
83
|
-
@tags-moderator-selected-border: var(--red-400);
|
|
84
|
-
@tags-moderator-selected-background: var(--red-200);
|
|
85
|
-
@tags-moderator-selected-color: var(--red-800);
|
|
86
|
-
|
|
87
|
-
@tags-required-border: var(--bc-darker);
|
|
88
|
-
@tags-required-background: var(--black-075);
|
|
89
|
-
@tags-required-color: var(--black-700);
|
|
90
|
-
@tags-required-hover-border: var(--black-300);
|
|
91
|
-
@tags-required-hover-background: var(--black-100);
|
|
92
|
-
@tags-required-hover-color: var(--black-800);
|
|
93
|
-
@tags-required-selected-border: var(--black-500);
|
|
94
|
-
@tags-required-selected-background: var(--black-200);
|
|
95
|
-
@tags-required-selected-color: var(--black-900);
|
|
96
|
-
|
|
97
|
-
@tags-muted-border: transparent;
|
|
98
|
-
@tags-muted-background: var(--black-075);
|
|
99
|
-
@tags-muted-color: var(--black-700);
|
|
100
|
-
@tags-muted-hover-border: transparent;
|
|
101
|
-
@tags-muted-hover-background: var(--black-100);
|
|
102
|
-
@tags-muted-hover-color: var(--black-800);
|
|
103
|
-
@tags-muted-selected-border: transparent;
|
|
104
|
-
@tags-muted-selected-background: var(--black-200);
|
|
105
|
-
@tags-muted-selected-color: var(--black-900);
|
|
106
|
-
}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// STACK OVERFLOW
|
|
3
|
-
// CONSTANTS -- HELPERS
|
|
4
|
-
//
|
|
5
|
-
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
-
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
-
// visit https://stackoverflow.design/
|
|
8
|
-
//
|
|
9
|
-
// These are helper variables to quickly set values.
|
|
10
|
-
// These SHOULD NOT be reset.
|
|
11
|
-
//
|
|
12
|
-
// Table of Contents
|
|
13
|
-
// • z-index (zi-)
|
|
14
|
-
// • border-radius (br-)
|
|
15
|
-
// • box-shadow (bs-)
|
|
16
|
-
// • spacing units (su-)
|
|
17
|
-
// • transition easings (te-)
|
|
18
|
-
//
|
|
19
|
-
// ============================================================================
|
|
20
|
-
// $ Z-INDEX (zi-)
|
|
21
|
-
// Used for a bird's eye view of components dependent on the z-axis.
|
|
22
|
-
// Try to avoid customizing these.
|
|
23
|
-
// ----------------------------------------------------------------------------
|
|
24
|
-
@zi-hide: -1; // Hide something all the elements
|
|
25
|
-
@zi-base: 0; // Reset to 0
|
|
26
|
-
@zi-selected: 25; // Pop above siblings
|
|
27
|
-
@zi-active: 30; // Pop above selected siblings
|
|
28
|
-
@zi-dropdown: 1000; // Dropdowns
|
|
29
|
-
@zi-popovers: 2000; // Popovers, Popups, Autocompletes
|
|
30
|
-
@zi-tooltips: 3000; // Tooltips
|
|
31
|
-
@zi-banners: 4000; // Banners
|
|
32
|
-
@zi-navigation: 5000; // Navigation Bars
|
|
33
|
-
@zi-navigation-fixed: 5050; // Fixed navigation bars
|
|
34
|
-
@zi-modals: 9000; // Modals
|
|
35
|
-
@zi-modals-background: @zi-modals - 50;
|
|
36
|
-
|
|
37
|
-
// ============================================================================
|
|
38
|
-
// $ RESPONSIVE BREAKPOINTS
|
|
39
|
-
// ----------------------------------------------------------------------------
|
|
40
|
-
@breakpoint-lg: 1264px;
|
|
41
|
-
@breakpoint-md: 980px;
|
|
42
|
-
@breakpoint-sm: 640px;
|
|
43
|
-
|
|
44
|
-
// ============================================================================
|
|
45
|
-
// $ BORDER RADIUS (br-)
|
|
46
|
-
// ----------------------------------------------------------------------------
|
|
47
|
-
@br-sm: 3px;
|
|
48
|
-
@br-md: 5px;
|
|
49
|
-
@br-lg: 7px;
|
|
50
|
-
@br-circle: 50%;
|
|
51
|
-
|
|
52
|
-
// ============================================================================
|
|
53
|
-
// $ SPACING UNITS (su-)
|
|
54
|
-
// ----------------------------------------------------------------------------
|
|
55
|
-
@su1: 1px;
|
|
56
|
-
@su2: 2px;
|
|
57
|
-
@su4: 4px;
|
|
58
|
-
@su6: 6px;
|
|
59
|
-
@su8: 8px;
|
|
60
|
-
@su12: 12px;
|
|
61
|
-
@su16: 16px;
|
|
62
|
-
@su24: 24px;
|
|
63
|
-
@su32: 32px;
|
|
64
|
-
@su48: 48px;
|
|
65
|
-
@su64: 64px;
|
|
66
|
-
@su96: 96px;
|
|
67
|
-
@su128: 128px;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
// ============================================================================
|
|
71
|
-
// $ SIZING UNITS (su-)
|
|
72
|
-
// ----------------------------------------------------------------------------
|
|
73
|
-
@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
|
|
74
|
-
@s-step: (@s-full / 12);
|
|
75
|
-
|
|
76
|
-
// TODO These helpers allow us to create our own timing functions with
|
|
77
|
-
// cubic-bezier ~ but perhaps the default timing functions are acceptable?
|
|
78
|
-
|
|
79
|
-
// ============================================================================
|
|
80
|
-
// $ TRANSITION EASINGS (te-)
|
|
81
|
-
// ----------------------------------------------------------------------------
|
|
82
|
-
@te-smooth-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94); // easeOutQuad
|
|
83
|
-
@te-smooth: cubic-bezier(0.165, 0.84, 0.44, 1); // easeOutQuart
|
|
84
|
-
@te-smooth-quick: cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
|
|
85
|
-
@te-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275); // easeOutBack
|
|
86
|
-
@te-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55); // easeInOutBack
|
|
87
|
-
@te-ease-in: cubic-bezier(0.47, 0, 0.745, 0.715); // easeIn
|
|
88
|
-
@te-ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95); // easeInOut
|
|
89
|
-
@te-ease-out: cubic-bezier(0.39, 0.575, 0.565, 1); // easeOut
|
|
90
|
-
|
|
91
|
-
@default-transition-duration: 0.1s;
|
|
92
|
-
@transition-time: @default-transition-duration;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
// ============================================================================
|
|
96
|
-
// $ SCROLLBAR STYLING
|
|
97
|
-
// ----------------------------------------------------------------------------
|
|
98
|
-
@scrollbar-styles: {
|
|
99
|
-
&::-webkit-scrollbar {
|
|
100
|
-
width: @su12 - @su2;
|
|
101
|
-
height: @su12 - @su2;
|
|
102
|
-
background-color: transparent;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&::-webkit-scrollbar-track {
|
|
106
|
-
border-radius: @su12 - @su2;
|
|
107
|
-
background-color: transparent;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&::-webkit-scrollbar-thumb {
|
|
111
|
-
border-radius: @su12 - @su2;
|
|
112
|
-
background-color: var(--scrollbar);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&::-webkit-scrollbar-corner {
|
|
116
|
-
background-color: transparent;
|
|
117
|
-
border-color: transparent;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
scrollbar-color: var(--scrollbar) transparent;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// ============================================================================
|
|
124
|
-
// $ FOCUS STYLING
|
|
125
|
-
// ----------------------------------------------------------------------------
|
|
126
|
-
@focus-styles: {
|
|
127
|
-
// Hide focus styles if they're not needed, for example,
|
|
128
|
-
// when an element receives focus via the mouse.
|
|
129
|
-
&:focus:not(:focus-visible) {
|
|
130
|
-
outline: none;
|
|
131
|
-
box-shadow: none;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// Show focus styles on keyboard focus.
|
|
135
|
-
&:focus-visible {
|
|
136
|
-
outline: none;
|
|
137
|
-
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
138
|
-
}
|
|
139
|
-
}
|