diff --git a/docs/product/base/grid.html b/docs/product/base/grid.html index b8bd6ec302..3e968aacd3 100644 --- a/docs/product/base/grid.html +++ b/docs/product/base/grid.html @@ -5,11 +5,6 @@ ---
{% header "h2", "Overview" %} - {% tip, "warning", "mb24" %} -

Looking for our old flex grid? Flex layouts have been moved and renamed now that CSS grid is here. Our .grid, and .grid--cell classes have been removed in favor of .d-flex and .flex--item.

-

If you need to continue using the old .grid, and .grid--cell classes, Stacks provides a shim for backwards compatability.

- {% endtip %} -

CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike flex layouts which can only do one at a time. Applying .d-grid to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual .grid--item will change that cell’s behavior.

{% header "h3", "Examples" %} diff --git a/docs/product/guidelines/releasing.html b/docs/product/guidelines/releasing.html index 75b3903c14..dc7db18792 100644 --- a/docs/product/guidelines/releasing.html +++ b/docs/product/guidelines/releasing.html @@ -1,7 +1,7 @@ --- layout: page title: Releasing Stacks -description: The following is a guide to releasing a new version of Stacks and making it available in production on Core and Careers. +description: The following is a guide to releasing a new version of Stacks and making it available in production on Stack Overflow and Careers. ---
@@ -19,7 +19,7 @@
{% header "h2", "Ship the new version to Stack Overflow" %} -

In order for the new version of Stacks to be usable on Core and Careers, you’ll need to ship to both.

- -

Within Core and Careers, run the update-stacks.bat script within Tools/. This will copy the files from the latest version of the Stacks repo. You’ll need to do this for both Core and Careers. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the “new pull request” page.

+

In order for the new version of Stacks to be usable on Stack Overflow and Careers, you’ll need to ship to both.

+

Stack Overflow’s dependencies are now managed via NPM, so updating Stacks there is as simple as bumping the version number in package.json

+

Within the Careers repo, run the update-stacks.bat script within the Tools directory. This will copy the files from the latest version of the Stacks repo. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the “new pull request” page.

diff --git a/lib/css/atomic/_stacks-borders.less b/lib/css/atomic/borders.less similarity index 100% rename from lib/css/atomic/_stacks-borders.less rename to lib/css/atomic/borders.less diff --git a/lib/css/atomic/_stacks-colors.less b/lib/css/atomic/colors.less similarity index 100% rename from lib/css/atomic/_stacks-colors.less rename to lib/css/atomic/colors.less diff --git a/lib/css/atomic/_stacks-flex.less b/lib/css/atomic/flex.less similarity index 100% rename from lib/css/atomic/_stacks-flex.less rename to lib/css/atomic/flex.less diff --git a/lib/css/atomic/_stacks-grid.less b/lib/css/atomic/grid.less similarity index 100% rename from lib/css/atomic/_stacks-grid.less rename to lib/css/atomic/grid.less diff --git a/lib/css/atomic/_stacks-misc.less b/lib/css/atomic/misc.less similarity index 100% rename from lib/css/atomic/_stacks-misc.less rename to lib/css/atomic/misc.less diff --git a/lib/css/atomic/_stacks-spacing.less b/lib/css/atomic/spacing.less similarity index 100% rename from lib/css/atomic/_stacks-spacing.less rename to lib/css/atomic/spacing.less diff --git a/lib/css/atomic/_stacks-typography.less b/lib/css/atomic/typography.less similarity index 100% rename from lib/css/atomic/_stacks-typography.less rename to lib/css/atomic/typography.less diff --git a/lib/css/atomic/_stacks-width-height.less b/lib/css/atomic/width-height.less similarity index 56% rename from lib/css/atomic/_stacks-width-height.less rename to lib/css/atomic/width-height.less index cab0e9abcb..44a95b8ac6 100644 --- a/lib/css/atomic/_stacks-width-height.less +++ b/lib/css/atomic/width-height.less @@ -42,18 +42,18 @@ // $$ STATIC .ws0, .w0 { width: 0 !important; } -.ws1 { width: @s-step !important; } -.ws2 { width: @s-step * 2 !important; } -.ws3 { width: @s-step * 3 !important; } -.ws4 { width: @s-step * 4 !important; } -.ws5 { width: @s-step * 5 !important; } -.ws6 { width: @s-step * 6 !important; } -.ws7 { width: @s-step * 7 !important; } -.ws8 { width: @s-step * 8 !important; } -.ws9 { width: @s-step * 9 !important; } -.ws10 { width: @s-step * 10 !important; } -.ws11 { width: @s-step * 11 !important; } -.ws12 { width: @s-full !important; } +.ws1 { width: var(--s-step) !important; } +.ws2 { width: calc(var(--s-step) * 2) !important; } +.ws3 { width: calc(var(--s-step) * 3) !important; } +.ws4 { width: calc(var(--s-step) * 4) !important; } +.ws5 { width: calc(var(--s-step) * 5) !important; } +.ws6 { width: calc(var(--s-step) * 6) !important; } +.ws7 { width: calc(var(--s-step) * 7) !important; } +.ws8 { width: calc(var(--s-step) * 8) !important; } +.ws9 { width: calc(var(--s-step) * 9) !important; } +.ws10 { width: calc(var(--s-step) * 10) !important; } +.ws11 { width: calc(var(--s-step) * 11) !important; } +.ws12 { width: var(--s-full) !important; } // $$ SPACING UNITS .w2 { width: var(--su-static2) !important; } @@ -73,21 +73,21 @@ // $ MAX-WIDTH // ---------------------------------------------------------------------------- .wmx0 { max-width: 0 !important; } -.wmx1 { max-width: @s-step !important; } -.wmx2 { max-width: @s-step * 2 !important; } +.wmx1 { max-width: var(--s-step) !important; } +.wmx2 { max-width: calc(var(--s-step) * 2) !important; } .wmx25 { max-width: 25% !important; } -.wmx3 { max-width: @s-step * 3 !important; } -.wmx4 { max-width: @s-step * 4 !important; } -.wmx5 { max-width: @s-step * 5 !important; } +.wmx3 { max-width: calc(var(--s-step) * 3) !important; } +.wmx4 { max-width: calc(var(--s-step) * 4) !important; } +.wmx5 { max-width: calc(var(--s-step) * 5) !important; } .wmx50 { max-width: 50% !important; } -.wmx6 { max-width: @s-step * 6 !important; } -.wmx7 { max-width: @s-step * 7 !important; } +.wmx6 { max-width: calc(var(--s-step) * 6) !important; } +.wmx7 { max-width: calc(var(--s-step) * 7) !important; } .wmx75 { max-width: 75% !important; } -.wmx8 { max-width: @s-step * 8 !important; } -.wmx9 { max-width: @s-step * 9 !important; } -.wmx10 { max-width: @s-step * 10 !important; } -.wmx11 { max-width: @s-step * 11 !important; } -.wmx12 { max-width: @s-full !important; } +.wmx8 { max-width: calc(var(--s-step) * 8) !important; } +.wmx9 { max-width: calc(var(--s-step) * 9) !important; } +.wmx10 { max-width: calc(var(--s-step) * 10) !important; } +.wmx11 { max-width: calc(var(--s-step) * 11) !important; } +.wmx12 { max-width: var(--s-full) !important; } #stacks-internals #responsify('.wmx100', { max-width: 100% !important; }); #stacks-internals #responsify('.wmx-initial', { max-width: initial !important; }); #stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; }); @@ -96,21 +96,21 @@ // $ MIN-WIDTH // ---------------------------------------------------------------------------- .wmn0 { min-width: 0 !important; } -.wmn1 { min-width: @s-step !important; } -.wmn2 { min-width: @s-step * 2 !important; } +.wmn1 { min-width: var(--s-step) !important; } +.wmn2 { min-width: calc(var(--s-step) * 2) !important; } .wmn25 { min-width: 25% !important; } -.wmn3 { min-width: @s-step * 3 !important; } -.wmn4 { min-width: @s-step * 4 !important; } -.wmn5 { min-width: @s-step * 5 !important; } +.wmn3 { min-width: calc(var(--s-step) * 3) !important; } +.wmn4 { min-width: calc(var(--s-step) * 4) !important; } +.wmn5 { min-width: calc(var(--s-step) * 5) !important; } .wmn50 { min-width: 50% !important; } -.wmn6 { min-width: @s-step * 6 !important; } -.wmn7 { min-width: @s-step * 7 !important; } +.wmn6 { min-width: calc(var(--s-step) * 6) !important; } +.wmn7 { min-width: calc(var(--s-step) * 7) !important; } .wmn75 { min-width: 75% !important; } -.wmn8 { min-width: @s-step * 8 !important; } -.wmn9 { min-width: @s-step * 9 !important; } -.wmn10 { min-width: @s-step * 10 !important; } -.wmn11 { min-width: @s-step * 11 !important; } -.wmn12 { min-width: @s-full !important; } +.wmn8 { min-width: calc(var(--s-step) * 8) !important; } +.wmn9 { min-width: calc(var(--s-step) * 9) !important; } +.wmn10 { min-width: calc(var(--s-step) * 10) !important; } +.wmn11 { min-width: calc(var(--s-step) * 11) !important; } +.wmn12 { min-width: var(--s-full) !important; } #stacks-internals #responsify('.wmn100', { min-width: 100% !important; }); #stacks-internals #responsify('.wmn-initial', { min-width: initial !important; }); @@ -126,18 +126,18 @@ // $$ STATIC .hs0, .h0 { height: 0 !important; } -.hs1 { height: @s-step !important; } -.hs2 { height: @s-step * 2 !important; } -.hs3 { height: @s-step * 3 !important; } -.hs4 { height: @s-step * 4 !important; } -.hs5 { height: @s-step * 5 !important; } -.hs6 { height: @s-step * 6 !important; } -.hs7 { height: @s-step * 7 !important; } -.hs8 { height: @s-step * 8 !important; } -.hs9 { height: @s-step * 9 !important; } -.hs10 { height: @s-step * 10 !important; } -.hs11 { height: @s-step * 11 !important; } -.hs12 { height: @s-full !important; } +.hs1 { height: var(--s-step) !important; } +.hs2 { height: calc(var(--s-step) * 2) !important; } +.hs3 { height: calc(var(--s-step) * 3) !important; } +.hs4 { height: calc(var(--s-step) * 4) !important; } +.hs5 { height: calc(var(--s-step) * 5) !important; } +.hs6 { height: calc(var(--s-step) * 6) !important; } +.hs7 { height: calc(var(--s-step) * 7) !important; } +.hs8 { height: calc(var(--s-step) * 8) !important; } +.hs9 { height: calc(var(--s-step) * 9) !important; } +.hs10 { height: calc(var(--s-step) * 10) !important; } +.hs11 { height: calc(var(--s-step) * 11) !important; } +.hs12 { height: var(--s-full) !important; } // $$ SPACING UNITS .h2 { height: var(--su-static2) !important; } @@ -157,18 +157,18 @@ // $ MAX-HEIGHT // ---------------------------------------------------------------------------- .hmx0 { max-height: 0 !important; } -.hmx1 { max-height: @s-step !important; } -.hmx2 { max-height: @s-step * 2 !important; } -.hmx3 { max-height: @s-step * 3 !important; } -.hmx4 { max-height: @s-step * 4 !important; } -.hmx5 { max-height: @s-step * 5 !important; } -.hmx6 { max-height: @s-step * 6 !important; } -.hmx7 { max-height: @s-step * 7 !important; } -.hmx8 { max-height: @s-step * 8 !important; } -.hmx9 { max-height: @s-step * 9 !important; } -.hmx10 { max-height: @s-step * 10 !important; } -.hmx11 { max-height: @s-step * 11 !important; } -.hmx12 { max-height: @s-full !important; } +.hmx1 { max-height: var(--s-step) !important; } +.hmx2 { max-height: calc(var(--s-step) * 2) !important; } +.hmx3 { max-height: calc(var(--s-step) * 3) !important; } +.hmx4 { max-height: calc(var(--s-step) * 4) !important; } +.hmx5 { max-height: calc(var(--s-step) * 5) !important; } +.hmx6 { max-height: calc(var(--s-step) * 6) !important; } +.hmx7 { max-height: calc(var(--s-step) * 7) !important; } +.hmx8 { max-height: calc(var(--s-step) * 8) !important; } +.hmx9 { max-height: calc(var(--s-step) * 9) !important; } +.hmx10 { max-height: calc(var(--s-step) * 10) !important; } +.hmx11 { max-height: calc(var(--s-step) * 11) !important; } +.hmx12 { max-height: var(--s-full) !important; } #stacks-internals #responsify('.hmx100', { max-height: 100% !important; }); #stacks-internals #responsify('.hmx-initial', { max-height: initial !important; }); #stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; }); @@ -177,18 +177,18 @@ // $ MIN-HEIGHT // ---------------------------------------------------------------------------- .hmn0 { min-height: 0 !important; } -.hmn1 { min-height: @s-step !important; } -.hmn2 { min-height: @s-step * 2 !important; } -.hmn3 { min-height: @s-step * 3 !important; } -.hmn4 { min-height: @s-step * 4 !important; } -.hmn5 { min-height: @s-step * 5 !important; } -.hmn6 { min-height: @s-step * 6 !important; } -.hmn7 { min-height: @s-step * 7 !important; } -.hmn8 { min-height: @s-step * 8 !important; } -.hmn9 { min-height: @s-step * 9 !important; } -.hmn10 { min-height: @s-step * 10 !important; } -.hmn11 { min-height: @s-step * 11 !important; } -.hmn12 { min-height: @s-full !important; } +.hmn1 { min-height: var(--s-step) !important; } +.hmn2 { min-height: calc(var(--s-step) * 2) !important; } +.hmn3 { min-height: calc(var(--s-step) * 3) !important; } +.hmn4 { min-height: calc(var(--s-step) * 4) !important; } +.hmn5 { min-height: calc(var(--s-step) * 5) !important; } +.hmn6 { min-height: calc(var(--s-step) * 6) !important; } +.hmn7 { min-height: calc(var(--s-step) * 7) !important; } +.hmn8 { min-height: calc(var(--s-step) * 8) !important; } +.hmn9 { min-height: calc(var(--s-step) * 9) !important; } +.hmn10 { min-height: calc(var(--s-step) * 10) !important; } +.hmn11 { min-height: calc(var(--s-step) * 11) !important; } +.hmn12 { min-height: var(--s-full) !important; } #stacks-internals #responsify('.hmn100', { min-height: 100% !important; }); #stacks-internals #responsify('.hmn-initial', { min-height: initial !important; }); #stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; }); diff --git a/lib/css/base/_stacks-body.less b/lib/css/base/body.less similarity index 100% rename from lib/css/base/_stacks-body.less rename to lib/css/base/body.less diff --git a/lib/css/base/_stacks-configuration-static.less b/lib/css/base/configuration-static.less similarity index 96% rename from lib/css/base/_stacks-configuration-static.less rename to lib/css/base/configuration-static.less index 17636d6f5c..8312da79c8 100644 --- a/lib/css/base/_stacks-configuration-static.less +++ b/lib/css/base/configuration-static.less @@ -1,4 +1,4 @@ -// Usage of these options is similar to what's described in _stacks-configuration-dynamic.less, but the options +// Usage of these options is similar to what's described in configuration-dynamic.less, but the options // in this file also apply to the "static" part of Stacks. In particular this means that these options cannot // be different per-site in the Q&A project, because the static part is a shared CSS file across all Q&A sites. diff --git a/lib/css/base/_stacks-icons.less b/lib/css/base/icons.less similarity index 100% rename from lib/css/base/_stacks-icons.less rename to lib/css/base/icons.less diff --git a/lib/css/base/_stacks-internals.less b/lib/css/base/internals.less similarity index 100% rename from lib/css/base/_stacks-internals.less rename to lib/css/base/internals.less diff --git a/lib/css/base/_stacks-reset-meyer.less b/lib/css/base/reset-meyer.less similarity index 100% rename from lib/css/base/_stacks-reset-meyer.less rename to lib/css/base/reset-meyer.less diff --git a/lib/css/base/_stacks-reset-normalize.less b/lib/css/base/reset-normalize.less similarity index 100% rename from lib/css/base/_stacks-reset-normalize.less rename to lib/css/base/reset-normalize.less diff --git a/lib/css/base/_stacks-reset.less b/lib/css/base/reset.less similarity index 82% rename from lib/css/base/_stacks-reset.less rename to lib/css/base/reset.less index 2c210fa884..5ad56ca8a7 100644 --- a/lib/css/base/_stacks-reset.less +++ b/lib/css/base/reset.less @@ -2,10 +2,10 @@ #stacks-internals() { #include-css-reset(meyer) { - @import "_stacks-reset-meyer.less"; + @import "reset-meyer.less"; } #include-css-reset(normalize) { - @import "_stacks-reset-normalize.less"; + @import "reset-normalize.less"; } /* stylelint-disable block-no-empty */ #include-css-reset(none) { diff --git a/lib/css/components/_stacks-activity-indicator.less b/lib/css/components/activity-indicator.less similarity index 100% rename from lib/css/components/_stacks-activity-indicator.less rename to lib/css/components/activity-indicator.less diff --git a/lib/css/components/_stacks-avatars.less b/lib/css/components/avatars.less similarity index 100% rename from lib/css/components/_stacks-avatars.less rename to lib/css/components/avatars.less diff --git a/lib/css/components/_stacks-badges.less b/lib/css/components/badges.less similarity index 100% rename from lib/css/components/_stacks-badges.less rename to lib/css/components/badges.less diff --git a/lib/css/components/_stacks-banners.less b/lib/css/components/banners.less similarity index 98% rename from lib/css/components/_stacks-banners.less rename to lib/css/components/banners.less index e1e92835f5..bd051e5d19 100644 --- a/lib/css/components/_stacks-banners.less +++ b/lib/css/components/banners.less @@ -75,6 +75,6 @@ .s-banner--container { position: relative; width: 100%; - max-width: @s-step * 10; + max-width: calc(var(--s-step) * 10); margin: 0 auto; } diff --git a/lib/css/components/_stacks-blank-states.less b/lib/css/components/blank-states.less similarity index 100% rename from lib/css/components/_stacks-blank-states.less rename to lib/css/components/blank-states.less diff --git a/lib/css/components/_stacks-breadcrumbs.less b/lib/css/components/breadcrumbs.less similarity index 100% rename from lib/css/components/_stacks-breadcrumbs.less rename to lib/css/components/breadcrumbs.less diff --git a/lib/css/components/_stacks-button-groups.less b/lib/css/components/button-groups.less similarity index 100% rename from lib/css/components/_stacks-button-groups.less rename to lib/css/components/button-groups.less diff --git a/lib/css/components/_stacks-buttons.less b/lib/css/components/buttons.less similarity index 99% rename from lib/css/components/_stacks-buttons.less rename to lib/css/components/buttons.less index cd20d65633..2e15b33498 100644 --- a/lib/css/components/_stacks-buttons.less +++ b/lib/css/components/buttons.less @@ -642,7 +642,7 @@ border-left-color: currentColor; border-radius: var(--br-circle); animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9); - // see _stacks-spinner.less for an explanation of the following two + // see spinner.less for an explanation of the following two filter: invert(0); // (*) transform-origin: 50% 50% 1px; // (*) } diff --git a/lib/css/components/_stacks-cards.less b/lib/css/components/cards.less similarity index 100% rename from lib/css/components/_stacks-cards.less rename to lib/css/components/cards.less diff --git a/lib/css/components/_stacks-code-blocks.less b/lib/css/components/code-blocks.less similarity index 100% rename from lib/css/components/_stacks-code-blocks.less rename to lib/css/components/code-blocks.less diff --git a/lib/css/components/_stacks-collapsible.less b/lib/css/components/collapsible.less similarity index 100% rename from lib/css/components/_stacks-collapsible.less rename to lib/css/components/collapsible.less diff --git a/lib/css/components/_stacks-inputs.less b/lib/css/components/inputs.less similarity index 100% rename from lib/css/components/_stacks-inputs.less rename to lib/css/components/inputs.less diff --git a/lib/css/components/_stacks-link-previews.less b/lib/css/components/link-previews.less similarity index 100% rename from lib/css/components/_stacks-link-previews.less rename to lib/css/components/link-previews.less diff --git a/lib/css/components/_stacks-links.less b/lib/css/components/links.less similarity index 100% rename from lib/css/components/_stacks-links.less rename to lib/css/components/links.less diff --git a/lib/css/components/_stacks-menu.less b/lib/css/components/menu.less similarity index 100% rename from lib/css/components/_stacks-menu.less rename to lib/css/components/menu.less diff --git a/lib/css/components/_stacks-modals.less b/lib/css/components/modals.less similarity index 97% rename from lib/css/components/_stacks-modals.less rename to lib/css/components/modals.less index 4c443cef82..895992de41 100644 --- a/lib/css/components/_stacks-modals.less +++ b/lib/css/components/modals.less @@ -128,6 +128,6 @@ // $ SIZES // ---------------------------------------------------------------------------- .s-modal__full { - max-width: calc(~"100% - @{su48}"); - max-height: calc(~"100% - @{su48}"); + max-width: calc(100% - var(--su48)); + max-height: calc(100% - var(--su48)); } diff --git a/lib/css/components/_stacks-navigation.less b/lib/css/components/navigation.less similarity index 100% rename from lib/css/components/_stacks-navigation.less rename to lib/css/components/navigation.less diff --git a/lib/css/components/_stacks-notices.less b/lib/css/components/notices.less similarity index 100% rename from lib/css/components/_stacks-notices.less rename to lib/css/components/notices.less diff --git a/lib/css/components/_stacks-page-titles.less b/lib/css/components/page-titles.less similarity index 100% rename from lib/css/components/_stacks-page-titles.less rename to lib/css/components/page-titles.less diff --git a/lib/css/components/_stacks-pagination.less b/lib/css/components/pagination.less similarity index 100% rename from lib/css/components/_stacks-pagination.less rename to lib/css/components/pagination.less diff --git a/lib/css/components/_stacks-popovers.less b/lib/css/components/popovers.less similarity index 100% rename from lib/css/components/_stacks-popovers.less rename to lib/css/components/popovers.less diff --git a/lib/css/components/_stacks-post-summary.less b/lib/css/components/post-summary.less similarity index 100% rename from lib/css/components/_stacks-post-summary.less rename to lib/css/components/post-summary.less diff --git a/lib/css/components/_stacks-progress-bars.less b/lib/css/components/progress-bars.less similarity index 100% rename from lib/css/components/_stacks-progress-bars.less rename to lib/css/components/progress-bars.less diff --git a/lib/css/components/_stacks-prose.less b/lib/css/components/prose.less similarity index 100% rename from lib/css/components/_stacks-prose.less rename to lib/css/components/prose.less diff --git a/lib/css/components/_stacks-spinner.less b/lib/css/components/spinner.less similarity index 100% rename from lib/css/components/_stacks-spinner.less rename to lib/css/components/spinner.less diff --git a/lib/css/components/_stacks-tables.less b/lib/css/components/tables.less similarity index 100% rename from lib/css/components/_stacks-tables.less rename to lib/css/components/tables.less diff --git a/lib/css/components/_stacks-tags.less b/lib/css/components/tags.less similarity index 100% rename from lib/css/components/_stacks-tags.less rename to lib/css/components/tags.less diff --git a/lib/css/components/_stacks-toggle-switches.less b/lib/css/components/toggle-switches.less similarity index 100% rename from lib/css/components/_stacks-toggle-switches.less rename to lib/css/components/toggle-switches.less diff --git a/lib/css/components/_stacks-topbar.less b/lib/css/components/topbar.less similarity index 99% rename from lib/css/components/_stacks-topbar.less rename to lib/css/components/topbar.less index d2fd9fe8e9..16c75c7737 100644 --- a/lib/css/components/_stacks-topbar.less +++ b/lib/css/components/topbar.less @@ -45,7 +45,7 @@ // Wraps the content so the topbar stretches 100% w/ content at some value below that .s-topbar--container { - width: @s-full; // wmx12; Consumers should use atomic classes to override this + width: var(--s-full); // wmx12; Consumers should use atomic classes to override this max-width: 100%; height: 100%; display: flex; diff --git a/lib/css/components/_stacks-uploader.less b/lib/css/components/uploader.less similarity index 100% rename from lib/css/components/_stacks-uploader.less rename to lib/css/components/uploader.less diff --git a/lib/css/components/_stacks-user-cards.less b/lib/css/components/user-cards.less similarity index 100% rename from lib/css/components/_stacks-user-cards.less rename to lib/css/components/user-cards.less diff --git a/lib/css/components/_stacks-widget-dynamic.less b/lib/css/components/widget-dynamic.less similarity index 95% rename from lib/css/components/_stacks-widget-dynamic.less rename to lib/css/components/widget-dynamic.less index b4e7c7e2fb..3909003b00 100644 --- a/lib/css/components/_stacks-widget-dynamic.less +++ b/lib/css/components/widget-dynamic.less @@ -9,7 +9,7 @@ // This file only sets the colors for the "current color" highlight when the // widget is used for navigation. This is the only part of the widget that is // dynamically configurable; the rest can be served in the static part of Stacks -// and is in _stacks-widget-static.less. +// and is in widget-static.less. .s-sidebarwidget--item { &, diff --git a/lib/css/components/_stacks-widget-static.less b/lib/css/components/widget-static.less similarity index 98% rename from lib/css/components/_stacks-widget-static.less rename to lib/css/components/widget-static.less index 5b2e5fdf4d..29953a2ff6 100644 --- a/lib/css/components/_stacks-widget-static.less +++ b/lib/css/components/widget-static.less @@ -9,7 +9,7 @@ // This file contains almost all the CSS for the sidebar widget. The only exception // is the "current color" highlight when the widget is used for navigation. That // part is configurable and is in the dynamic part of Stacks as -// _stacks-widget-dynamic.less. +// widget-dynamic.less. // TODO: Figure out a way to use spacing unit CSS variables here @s-sidebarwidget-content-padding: @su16 - 1px; // subtract 1px for border @@ -194,7 +194,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items { margin-left: -@s-sidebarwidget-content-padding - 1; // the orange selection indicator overlaps with the widget border border-left-width: 3px; border-left-style: solid; - // border-left-color is set in _stacks-widget-dynamic.less + // border-left-color is set in widget-dynamic.less } a, @@ -220,7 +220,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items { &[aria-current="true"], &[aria-current="page"] { - // this is given a bullet-arrow in the primary color in _stacks-widget-dynamic.less + // this is given a bullet-arrow in the primary color in widget-dynamic.less color: var(--black); font-weight: bold; diff --git a/lib/css/exports/_stacks-constants-colors.less b/lib/css/exports/constants-colors.less similarity index 99% rename from lib/css/exports/_stacks-constants-colors.less rename to lib/css/exports/constants-colors.less index 766b86394c..547523cbe7 100644 --- a/lib/css/exports/_stacks-constants-colors.less +++ b/lib/css/exports/constants-colors.less @@ -1,4 +1,4 @@ -@import (reference) "./_stacks-mixins.less"; +@import (reference) "./mixins.less"; // // STACK OVERFLOW diff --git a/lib/css/exports/_stacks-constants-helpers.less b/lib/css/exports/constants-helpers.less similarity index 94% rename from lib/css/exports/_stacks-constants-helpers.less rename to lib/css/exports/constants-helpers.less index 174f3f7c07..9e0863c4c3 100644 --- a/lib/css/exports/_stacks-constants-helpers.less +++ b/lib/css/exports/constants-helpers.less @@ -49,6 +49,10 @@ body { --default-transition-duration: 0.1s; --transition-time: var(--default-transition-duration); + + // Sizing + --s-full: 97.2307692rem; // Based on a pixel size of 1264px; + --s-step: calc(var(--s-full) / 12); } // ============================================================================ @@ -76,13 +80,6 @@ body { @su96: 96px; @su128: 128px; - -// ============================================================================ -// $ SIZING UNITS (su-) -// ---------------------------------------------------------------------------- -@s-full: 97.2307692rem; // Based on a pixel size of 1264px; -@s-step: (@s-full / 12); - // ============================================================================ // $ SCROLLBAR STYLING // ---------------------------------------------------------------------------- diff --git a/lib/css/exports/_stacks-constants-type.less b/lib/css/exports/constants-type.less similarity index 100% rename from lib/css/exports/_stacks-constants-type.less rename to lib/css/exports/constants-type.less diff --git a/lib/css/exports/_stacks-exports.less b/lib/css/exports/exports.less similarity index 58% rename from lib/css/exports/_stacks-exports.less rename to lib/css/exports/exports.less index 4133e556d0..c6147aa83e 100644 --- a/lib/css/exports/_stacks-exports.less +++ b/lib/css/exports/exports.less @@ -9,7 +9,7 @@ // Wherein we establish a bunch of values to make our lives a lot easier. // // ============================================================================ -@import "_stacks-constants-type.less"; // Type styles, sizes, and line-heights -@import "_stacks-constants-helpers.less"; // Border radius, z-index, spacing, transitions, etc -@import "_stacks-constants-colors.less"; // Colors -@import "_stacks-mixins.less"; +@import "constants-type.less"; // Type styles, sizes, and line-heights +@import "constants-helpers.less"; // Border radius, z-index, spacing, transitions, etc +@import "constants-colors.less"; // Colors +@import "mixins.less"; diff --git a/lib/css/exports/_stacks-mixins.less b/lib/css/exports/mixins.less similarity index 100% rename from lib/css/exports/_stacks-mixins.less rename to lib/css/exports/mixins.less diff --git a/lib/css/stacks-dynamic.less b/lib/css/stacks-dynamic.less index 7c493223d5..90747a270e 100644 --- a/lib/css/stacks-dynamic.less +++ b/lib/css/stacks-dynamic.less @@ -15,21 +15,21 @@ // via variables. // ---------------------------------------------------------------------------- // -- SET BASIC STYLES FOR BODY -@import "base/_stacks-body.less"; +@import "base/body.less"; // -- COMPONENTS -@import "components/_stacks-banners.less"; -@import "components/_stacks-buttons.less"; -@import "components/_stacks-links.less"; -@import "components/_stacks-link-previews.less"; -@import "components/_stacks-notices.less"; -@import "components/_stacks-tags.less"; -@import "components/_stacks-pagination.less"; -@import "components/_stacks-widget-dynamic.less"; +@import "components/banners.less"; +@import "components/buttons.less"; +@import "components/links.less"; +@import "components/link-previews.less"; +@import "components/notices.less"; +@import "components/tags.less"; +@import "components/pagination.less"; +@import "components/widget-dynamic.less"; // -- LESS CONSTANTS AND MIXINS -@import "exports/_stacks-exports.less"; +@import "exports/exports.less"; // -- CONFIG -@import "base/_stacks-configuration-static.less"; -@import "base/_stacks-internals.less"; +@import "base/configuration-static.less"; +@import "base/internals.less"; diff --git a/lib/css/stacks-static.less b/lib/css/stacks-static.less index 8a8f105a8c..6ec7454d02 100644 --- a/lib/css/stacks-static.less +++ b/lib/css/stacks-static.less @@ -13,48 +13,48 @@ // The following items are elements which we DO NOT allow communities // to modify via variables. // ---------------------------------------------------------------------------- -@import "base/_stacks-reset.less"; -@import "base/_stacks-icons.less"; +@import "base/reset.less"; +@import "base/icons.less"; // -- COMPONENTS -@import "components/_stacks-activity-indicator.less"; -@import "components/_stacks-avatars.less"; -@import "components/_stacks-badges.less"; -@import "components/_stacks-blank-states.less"; -@import "components/_stacks-breadcrumbs.less"; -@import "components/_stacks-button-groups.less"; -@import "components/_stacks-cards.less"; -@import "components/_stacks-code-blocks.less"; -@import "components/_stacks-collapsible.less"; -@import "components/_stacks-inputs.less"; -@import "components/_stacks-menu.less"; -@import "components/_stacks-modals.less"; -@import "components/_stacks-navigation.less"; -@import "components/_stacks-page-titles.less"; -@import "components/_stacks-popovers.less"; -@import "components/_stacks-post-summary.less"; -@import "components/_stacks-progress-bars.less"; -@import "components/_stacks-prose.less"; -@import "components/_stacks-spinner.less"; -@import "components/_stacks-tables.less"; -@import "components/_stacks-toggle-switches.less"; -@import "components/_stacks-topbar.less"; -@import "components/_stacks-uploader.less"; -@import "components/_stacks-user-cards.less"; -@import "components/_stacks-widget-static.less"; +@import "components/activity-indicator.less"; +@import "components/avatars.less"; +@import "components/badges.less"; +@import "components/blank-states.less"; +@import "components/breadcrumbs.less"; +@import "components/button-groups.less"; +@import "components/cards.less"; +@import "components/code-blocks.less"; +@import "components/collapsible.less"; +@import "components/inputs.less"; +@import "components/menu.less"; +@import "components/modals.less"; +@import "components/navigation.less"; +@import "components/page-titles.less"; +@import "components/popovers.less"; +@import "components/post-summary.less"; +@import "components/progress-bars.less"; +@import "components/prose.less"; +@import "components/spinner.less"; +@import "components/tables.less"; +@import "components/toggle-switches.less"; +@import "components/topbar.less"; +@import "components/uploader.less"; +@import "components/user-cards.less"; +@import "components/widget-static.less"; // -- LESS CONSTANTS AND MIXINS -@import "exports/_stacks-exports.less"; +@import "exports/exports.less"; // -- ATOMIC CLASSES -@import "atomic/_stacks-borders.less"; -@import "atomic/_stacks-colors.less"; -@import "atomic/_stacks-flex.less"; -@import "atomic/_stacks-grid.less"; -@import "atomic/_stacks-spacing.less"; -@import "atomic/_stacks-typography.less"; -@import "atomic/_stacks-misc.less"; -@import "atomic/_stacks-width-height.less"; +@import "atomic/borders.less"; +@import "atomic/colors.less"; +@import "atomic/flex.less"; +@import "atomic/grid.less"; +@import "atomic/spacing.less"; +@import "atomic/typography.less"; +@import "atomic/misc.less"; +@import "atomic/width-height.less"; /* stylelint-disable */ #stacks-internals #screen-lg({ @@ -82,5 +82,5 @@ /* stylelint-enable */ // -- CONFIG -@import "base/_stacks-configuration-static.less"; -@import "base/_stacks-internals.less"; +@import "base/configuration-static.less"; +@import "base/internals.less";