npm - @stackoverflow/stacks - Versions diffs - 2.7.3 → 2.7.4 - Mend

@stackoverflow/stacks 2.7.3 → 2.7.4

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 (83) hide show

package/LICENSE.MD +9 -9
package/README.md +158 -180
package/dist/css/stacks.css +6 -0
package/dist/js/stacks.min.js +1 -1
package/lib/atomic/border.less +139 -139
package/lib/atomic/color.less +36 -36
package/lib/atomic/flex.less +426 -426
package/lib/atomic/gap.less +44 -44
package/lib/atomic/grid.less +139 -139
package/lib/atomic/misc.less +374 -374
package/lib/atomic/spacing.less +98 -98
package/lib/atomic/typography.less +266 -264
package/lib/atomic/width-height.less +194 -194
package/lib/base/body.less +44 -44
package/lib/base/configuration-static.less +61 -61
package/lib/base/fieldset.less +5 -5
package/lib/base/icon.less +11 -11
package/lib/base/internal.less +220 -220
package/lib/base/reset-meyer.less +64 -64
package/lib/base/reset-normalize.less +449 -449
package/lib/base/reset.less +20 -20
package/lib/components/activity-indicator/activity-indicator.less +53 -53
package/lib/components/avatar/avatar.less +108 -108
package/lib/components/award-bling/award-bling.less +31 -31
package/lib/components/banner/banner.less +44 -44
package/lib/components/banner/banner.ts +149 -149
package/lib/components/block-link/block-link.less +82 -82
package/lib/components/breadcrumbs/breadcrumbs.less +41 -41
package/lib/components/button-group/button-group.less +82 -82
package/lib/components/card/card.less +37 -37
package/lib/components/check-control/check-control.less +17 -17
package/lib/components/check-group/check-group.less +19 -19
package/lib/components/checkbox_radio/checkbox_radio.less +159 -159
package/lib/components/code-block/code-block.fixtures.ts +88 -88
package/lib/components/code-block/code-block.less +116 -116
package/lib/components/description/description.less +9 -9
package/lib/components/empty-state/empty-state.less +16 -16
package/lib/components/expandable/expandable.less +118 -118
package/lib/components/input-fill/input-fill.less +35 -35
package/lib/components/input-icon/input-icon.less +45 -45
package/lib/components/input-message/input-message.less +49 -49
package/lib/components/label/label.less +110 -110
package/lib/components/link-preview/link-preview.less +148 -148
package/lib/components/menu/menu.less +41 -41
package/lib/components/modal/modal.less +118 -118
package/lib/components/modal/modal.ts +383 -383
package/lib/components/navigation/navigation.less +136 -136
package/lib/components/navigation/navigation.ts +128 -128
package/lib/components/page-title/page-title.less +51 -51
package/lib/components/popover/popover.less +159 -159
package/lib/components/popover/popover.ts +651 -651
package/lib/components/post-summary/post-summary.less +457 -457
package/lib/components/progress-bar/progress-bar.less +291 -291
package/lib/components/prose/prose.less +452 -452
package/lib/components/select/select.less +138 -138
package/lib/components/spinner/spinner.less +103 -103
package/lib/components/table/table.ts +296 -296
package/lib/components/table-container/table-container.less +4 -4
package/lib/components/tag/tag.less +186 -186
package/lib/components/toast/toast.less +35 -35
package/lib/components/toast/toast.ts +357 -357
package/lib/components/toggle-switch/toggle-switch.less +104 -104
package/lib/components/topbar/topbar.less +553 -553
package/lib/components/uploader/uploader.less +205 -205
package/lib/components/user-card/user-card.less +129 -129
package/lib/controllers.ts +33 -33
package/lib/exports/color-mixins.less +283 -283
package/lib/exports/constants-helpers.less +108 -108
package/lib/exports/constants-type.less +155 -155
package/lib/exports/exports.less +15 -15
package/lib/exports/mixins.less +334 -333
package/lib/exports/spacing-mixins.less +67 -67
package/lib/index.ts +32 -32
package/lib/input-utils.less +41 -41
package/lib/stacks-dynamic.less +24 -24
package/lib/stacks-static.less +93 -93
package/lib/stacks.less +13 -13
package/lib/test/assertions.ts +36 -36
package/lib/test/less-test-utils.ts +28 -28
package/lib/test/open-wc-testing-patch.d.ts +26 -26
package/lib/tsconfig.build.json +4 -4
package/lib/tsconfig.json +17 -17
package/package.json +26 -22

package/lib/base/internal.less CHANGED Viewed

@@ -1,220 +1,220 @@
-/* stylelint-disable */
-#stacks-internals() {
-    #load-static-config() {
-        #stacks-config-static();
-    }
-    //  ===========================================================================
-    //  --  RESPONSIVE (modern)
-    //      #responsify renders a plain class as well as its responsive counterparts.
-    //
-    //      Usage example:
-    //
-    //      #stacks-internals #responsify('.d-none', { display: none !important; });
-    //
-    //  ---------------------------------------------------------------------------
-    #responsify(@class, @rules) {
-        @nodot-s: replace(@class, "^\.", "");
-        @nodot: ~"@{nodot-s}";
-        .@{nodot} {
-            @rules();
-        }
-        #stacks-internals-collect-large() {
-            .lg\:@{nodot} {
-                @rules();
-            };
-        }
-        #stacks-internals-collect-medium() {
-            .md\:@{nodot} {
-                @rules();
-            };
-        }
-        #stacks-internals-collect-small() {
-            .sm\:@{nodot} {
-                @rules();
-            };
-        }
-    }
-    //  ===========================================================================
-    //  --  RESPONSIVE
-    //      The three #screen-XX mixins wrap the given rules in the appropriate
-    //      media queries and (if applicable) selector prefixes for all breakpoint
-    //      groups that have been defined in the static configuration section.
-    //
-    //      Usage example:
-    //
-    //          .lg\:comic-sans {
-    //              #stacks-internals #screen-lg({
-    //                  font-family: "Comic Sans MS";
-    //              });
-    //          }
-    //
-    //      If @force-selector is `true`, the @rules will be evaluated inside a `html { ... }`
-    //      block if a breakpoint group doesn't have a selector. You should only use this if you
-    //      need to apply CSS to the root element itself:
-    //
-    //          #stacks-internals #screen-lg({
-    //              &, body {
-    //                  font-size: 77px;
-    //              }
-    //          }, @force-selector: true);
-    //
-    //      The above sets the font size on <html> and <body> at the appropriate widths, regardless
-    //      of whether responsiveness was configured with or without selectors.
-    //  ---------------------------------------------------------------------------
-    #screen-lg(@rules, @force-selector: false) {
-        #stacks-internals #load-static-config();
-        #stacks-internals #responsive-stuff(0, @rules, @breakpoints, 1, @force-selector);
-    }
-    #screen-md(@rules, @force-selector: false) {
-        #stacks-internals #load-static-config();
-        #stacks-internals #responsive-stuff(1, @rules, @breakpoints, 1, @force-selector);
-    }
-    #screen-sm(@rules, @force-selector: false) {
-        #stacks-internals #load-static-config();
-        #stacks-internals #responsive-stuff(2, @rules, @breakpoints, 1, @force-selector);
-    }
-    // @bp-index is 0 (large), 1 (medium), or 2 (small). @start-index is the index into the @breakpoints config option
-    // which is increased recursively to exhaust the whole list.
-    #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index, @force-selector: false) when (@start-index < length(@breakpoints)) {
-        // If the first list element is a string, it's a selector that is prepended to the responsive class
-        & when (isstring(extract(@breakpoints, @start-index))) {
-            // the actual breakpoint; "+1" to skip the (selector) string
-            @bp: extract(@breakpoints, @start-index + @bp-index + 1);
-            // convert the selector string into an identifier (i.e. remove the quotes)
-            @sel-s: extract(@breakpoints, @start-index);
-            @sel: ~"@{sel-s}";
-            @media (max-width: (@bp)) {
-                @{sel} & {
-                    @rules();
-                }
-            }
-            // recursively descend to handle the next breakpoint group ("+4" for the selector string and the three breakpoint values)
-            #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 4, @force-selector)
-        }
-        // If the first list element is a number (i.e. pixel value), there is no selector string
-        & when (isnumber(extract(@breakpoints, @start-index))) {
-            // the actual breakpoint
-            @bp: extract(@breakpoints, @start-index + @bp-index);
-            & when not (@force-selector) {
-                @media (max-width: (@bp)) {
-                    @rules();
-                }
-            }
-            & when (@force-selector) {
-                @media (max-width: (@bp)) {
-                    html & {
-                        @rules();
-                    }
-                }
-            }
-            // recursively descend to handle the next breakpoint group ("+3" for the three breakpoint values)
-            #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 3, @force-selector)
-        }
-    }
-    //  ===========================================================================
-    //  --  AUTO-GENERATING
-    //      #build-classes is a tool for auto-generating a bunch of related, usually atomic,
-    //      classes.
-    //      The first argument is optional; if given, it must be `responsive`, in which case
-    //      the corresponding responsive classes will be generated as well.
-    //      The next argument, @class-prefix, is the prefix of the generated class names,
-    //      including the dot.
-    //      The @rules argument is a detached ruleset that must contain a mixin called .template()
-    //      which takes a single argument.
-    //      The @values argument is a list of values that will be passed to the template.
-    //
-    //      The final generated class name consists of
-    //      1) the given prefix,
-    //      2a) if the value is a negative number, the letter "n",
-    //      2b) if the value is not a number, a dash "-"
-    //      3) the actual value, stripped of any unit (if applicable).
-    //
-    //      Usage example:
-    //
-    //          #stacks-internals #build-classes(
-    //              '.ml',
-    //              { .template(@value) { margin-left: @value; } },
-    //              -50%, auto, 20px
-    //          )
-    //
-    //      will generate:
-    //
-    //          .mln50 { margin-left: -50%; }
-    //          .ml-auto { margin-left: auto; }
-    //          .ml20 { margin-left: 20px; }
-    //
-    //  ---------------------------------------------------------------------------
-    #build-classes(@class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
-    }
-    #build-classes(responsive, @class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
-    }
-    #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
-        @val: extract(@values, @start-index);
-        & when (isnumber(@val)) {
-            @unitless: unit(@val);
-            & when (@unitless < 0) {
-                @abs: abs(@unitless);
-                @class-name: ~"@{class-prefix}n@{abs}";
-                & when not (@responsive) {
-                    @{class-name} { @rules(); .template(@val); }
-                }
-                & when (@responsive) {
-                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
-                }
-            }
-            & when (@unitless >= 0) {
-                @class-name: ~"@{class-prefix}@{unitless}";
-                & when not (@responsive) {
-                    @{class-name} { @rules(); .template(@val); }
-                }
-                & when (@responsive) {
-                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
-                }
-            }
-        }
-        & when not (isnumber(@val)) {
-            @class-name: ~"@{class-prefix}-@{val}";
-                & when not (@responsive) {
-                    @{class-name} { @rules(); .template(@val); }
-                }
-                & when (@responsive) {
-                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
-                }
-        }
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, @start-index + 1, @responsive, @values);
-    }
-    #bullet-arrow(@col) {
-        @image: '<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 7 10" xmlns="http://www.w3.org/2000/svg"><path d="m0.72153 0.68446 4.1336 4.3077-4.1336 4.3077" fill="none" stroke="@{col}" stroke-width="2"/></svg>';
-        @encoded-image: escape(@image);
-        background-image: url("data:image/svg+xml;,@{encoded-image}");
-    }
-}
+/* stylelint-disable */
+#stacks-internals() {
+    #load-static-config() {
+        #stacks-config-static();
+    }
+    //  ===========================================================================
+    //  --  RESPONSIVE (modern)
+    //      #responsify renders a plain class as well as its responsive counterparts.
+    //
+    //      Usage example:
+    //
+    //      #stacks-internals #responsify('.d-none', { display: none !important; });
+    //
+    //  ---------------------------------------------------------------------------
+    #responsify(@class, @rules) {
+        @nodot-s: replace(@class, "^\.", "");
+        @nodot: ~"@{nodot-s}";
+        .@{nodot} {
+            @rules();
+        }
+        #stacks-internals-collect-large() {
+            .lg\:@{nodot} {
+                @rules();
+            };
+        }
+        #stacks-internals-collect-medium() {
+            .md\:@{nodot} {
+                @rules();
+            };
+        }
+        #stacks-internals-collect-small() {
+            .sm\:@{nodot} {
+                @rules();
+            };
+        }
+    }
+    //  ===========================================================================
+    //  --  RESPONSIVE
+    //      The three #screen-XX mixins wrap the given rules in the appropriate
+    //      media queries and (if applicable) selector prefixes for all breakpoint
+    //      groups that have been defined in the static configuration section.
+    //
+    //      Usage example:
+    //
+    //          .lg\:comic-sans {
+    //              #stacks-internals #screen-lg({
+    //                  font-family: "Comic Sans MS";
+    //              });
+    //          }
+    //
+    //      If @force-selector is `true`, the @rules will be evaluated inside a `html { ... }`
+    //      block if a breakpoint group doesn't have a selector. You should only use this if you
+    //      need to apply CSS to the root element itself:
+    //
+    //          #stacks-internals #screen-lg({
+    //              &, body {
+    //                  font-size: 77px;
+    //              }
+    //          }, @force-selector: true);
+    //
+    //      The above sets the font size on <html> and <body> at the appropriate widths, regardless
+    //      of whether responsiveness was configured with or without selectors.
+    //  ---------------------------------------------------------------------------
+    #screen-lg(@rules, @force-selector: false) {
+        #stacks-internals #load-static-config();
+        #stacks-internals #responsive-stuff(0, @rules, @breakpoints, 1, @force-selector);
+    }
+    #screen-md(@rules, @force-selector: false) {
+        #stacks-internals #load-static-config();
+        #stacks-internals #responsive-stuff(1, @rules, @breakpoints, 1, @force-selector);
+    }
+    #screen-sm(@rules, @force-selector: false) {
+        #stacks-internals #load-static-config();
+        #stacks-internals #responsive-stuff(2, @rules, @breakpoints, 1, @force-selector);
+    }
+    // @bp-index is 0 (large), 1 (medium), or 2 (small). @start-index is the index into the @breakpoints config option
+    // which is increased recursively to exhaust the whole list.
+    #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index, @force-selector: false) when (@start-index < length(@breakpoints)) {
+        // If the first list element is a string, it's a selector that is prepended to the responsive class
+        & when (isstring(extract(@breakpoints, @start-index))) {
+            // the actual breakpoint; "+1" to skip the (selector) string
+            @bp: extract(@breakpoints, @start-index + @bp-index + 1);
+            // convert the selector string into an identifier (i.e. remove the quotes)
+            @sel-s: extract(@breakpoints, @start-index);
+            @sel: ~"@{sel-s}";
+            @media (max-width: (@bp)) {
+                @{sel} & {
+                    @rules();
+                }
+            }
+            // recursively descend to handle the next breakpoint group ("+4" for the selector string and the three breakpoint values)
+            #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 4, @force-selector)
+        }
+        // If the first list element is a number (i.e. pixel value), there is no selector string
+        & when (isnumber(extract(@breakpoints, @start-index))) {
+            // the actual breakpoint
+            @bp: extract(@breakpoints, @start-index + @bp-index);
+            & when not (@force-selector) {
+                @media (max-width: (@bp)) {
+                    @rules();
+                }
+            }
+            & when (@force-selector) {
+                @media (max-width: (@bp)) {
+                    html & {
+                        @rules();
+                    }
+                }
+            }
+            // recursively descend to handle the next breakpoint group ("+3" for the three breakpoint values)
+            #stacks-internals #responsive-stuff(@bp-index, @rules, @breakpoints, @start-index + 3, @force-selector)
+        }
+    }
+    //  ===========================================================================
+    //  --  AUTO-GENERATING
+    //      #build-classes is a tool for auto-generating a bunch of related, usually atomic,
+    //      classes.
+    //      The first argument is optional; if given, it must be `responsive`, in which case
+    //      the corresponding responsive classes will be generated as well.
+    //      The next argument, @class-prefix, is the prefix of the generated class names,
+    //      including the dot.
+    //      The @rules argument is a detached ruleset that must contain a mixin called .template()
+    //      which takes a single argument.
+    //      The @values argument is a list of values that will be passed to the template.
+    //
+    //      The final generated class name consists of
+    //      1) the given prefix,
+    //      2a) if the value is a negative number, the letter "n",
+    //      2b) if the value is not a number, a dash "-"
+    //      3) the actual value, stripped of any unit (if applicable).
+    //
+    //      Usage example:
+    //
+    //          #stacks-internals #build-classes(
+    //              '.ml',
+    //              { .template(@value) { margin-left: @value; } },
+    //              -50%, auto, 20px
+    //          )
+    //
+    //      will generate:
+    //
+    //          .mln50 { margin-left: -50%; }
+    //          .ml-auto { margin-left: auto; }
+    //          .ml20 { margin-left: 20px; }
+    //
+    //  ---------------------------------------------------------------------------
+    #build-classes(@class-prefix, @rules, @values) {
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
+    }
+    #build-classes(responsive, @class-prefix, @rules, @values) {
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
+    }
+    #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
+        @val: extract(@values, @start-index);
+        & when (isnumber(@val)) {
+            @unitless: unit(@val);
+            & when (@unitless < 0) {
+                @abs: abs(@unitless);
+                @class-name: ~"@{class-prefix}n@{abs}";
+                & when not (@responsive) {
+                    @{class-name} { @rules(); .template(@val); }
+                }
+                & when (@responsive) {
+                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
+                }
+            }
+            & when (@unitless >= 0) {
+                @class-name: ~"@{class-prefix}@{unitless}";
+                & when not (@responsive) {
+                    @{class-name} { @rules(); .template(@val); }
+                }
+                & when (@responsive) {
+                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
+                }
+            }
+        }
+        & when not (isnumber(@val)) {
+            @class-name: ~"@{class-prefix}-@{val}";
+                & when not (@responsive) {
+                    @{class-name} { @rules(); .template(@val); }
+                }
+                & when (@responsive) {
+                    #stacks-internals #responsify(@class-name, { @rules(); .template(@val); });
+                }
+        }
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, @start-index + 1, @responsive, @values);
+    }
+    #bullet-arrow(@col) {
+        @image: '<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 7 10" xmlns="http://www.w3.org/2000/svg"><path d="m0.72153 0.68446 4.1336 4.3077-4.1336 4.3077" fill="none" stroke="@{col}" stroke-width="2"/></svg>';
+        @encoded-image: escape(@image);
+        background-image: url("data:image/svg+xml;,@{encoded-image}");
+    }
+}

package/lib/base/reset-meyer.less CHANGED Viewed

@@ -1,64 +1,64 @@
-/* stylelint-disable */
-//  ============================================================================
-//  http://meyerweb.com/eric/tools/css/reset/
-//  v2.0 | 20110126
-//  License: none (public domain)
-//  ----------------------------------------------------------------------------
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
-    vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-body {
-    line-height: 1;
-}
-ol, ul {
-    list-style: none;
-}
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-/* the stuff below isn't in the original Eric Meyer reset */
-sub,
-sup {
-    font-size: 80%;
-    line-height: 1;
-    vertical-align: sub;
-}
-sup {
-    vertical-align: super;
-}
-button {
-    margin: 0; /* for Safari */
-}
+/* stylelint-disable */
+//  ============================================================================
+//  http://meyerweb.com/eric/tools/css/reset/
+//  v2.0 | 20110126
+//  License: none (public domain)
+//  ----------------------------------------------------------------------------
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* the stuff below isn't in the original Eric Meyer reset */
+sub,
+sup {
+    font-size: 80%;
+    line-height: 1;
+    vertical-align: sub;
+}
+sup {
+    vertical-align: super;
+}
+button {
+    margin: 0; /* for Safari */
+}