npm - @stackoverflow/stacks - Versions diffs - 1.0.0-beta.0 → 1.1.0 - Mend

@stackoverflow/stacks 1.0.0-beta.0 → 1.1.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.

Files changed (74) hide show

package/README.md +47 -47
package/dist/controllers/s-popover.d.ts +11 -2
package/dist/css/stacks.css +214 -3
package/dist/css/stacks.min.css +1 -1
package/dist/js/stacks.js +18 -2
package/dist/js/stacks.min.js +1 -1
package/lib/css/atomic/borders.less +378 -378
package/lib/css/atomic/colors.less +209 -209
package/lib/css/atomic/flex.less +375 -375
package/lib/css/atomic/grid.less +174 -174
package/lib/css/atomic/misc.less +343 -343
package/lib/css/atomic/spacing.less +342 -314
package/lib/css/atomic/typography.less +273 -273
package/lib/css/atomic/width-height.less +194 -194
package/lib/css/base/body.less +44 -44
package/lib/css/base/configuration-static.less +61 -61
package/lib/css/base/icons.less +20 -20
package/lib/css/base/internals.less +220 -220
package/lib/css/base/reset-meyer.less +64 -64
package/lib/css/base/reset-normalize.less +449 -449
package/lib/css/base/reset.less +20 -20
package/lib/css/components/activity-indicator.less +44 -45
package/lib/css/components/avatars.less +189 -189
package/lib/css/components/badges.less +209 -209
package/lib/css/components/banners.less +80 -80
package/lib/css/components/blank-states.less +26 -26
package/lib/css/components/breadcrumbs.less +44 -44
package/lib/css/components/button-groups.less +104 -104
package/lib/css/components/buttons.less +665 -665
package/lib/css/components/cards.less +44 -44
package/lib/css/components/code-blocks.less +130 -130
package/lib/css/components/collapsible.less +104 -104
package/lib/css/components/inputs.less +728 -728
package/lib/css/components/link-previews.less +136 -136
package/lib/css/components/links.less +218 -218
package/lib/css/components/menu.less +47 -47
package/lib/css/components/modals.less +133 -133
package/lib/css/components/navigation.less +146 -146
package/lib/css/components/notices.less +233 -233
package/lib/css/components/page-titles.less +60 -60
package/lib/css/components/pagination.less +55 -55
package/lib/css/components/popovers.less +197 -197
package/lib/css/components/post-summary.less +425 -425
package/lib/css/components/progress-bars.less +330 -330
package/lib/css/components/prose.less +503 -503
package/lib/css/components/spinner.less +107 -107
package/lib/css/components/tables.less +341 -341
package/lib/css/components/tags.less +236 -236
package/lib/css/components/toggle-switches.less +144 -144
package/lib/css/components/topbar.less +427 -427
package/lib/css/components/uploader.less +210 -210
package/lib/css/components/user-cards.less +169 -169
package/lib/css/components/widget-dynamic.less +33 -33
package/lib/css/components/widget-static.less +273 -273
package/lib/css/exports/constants-colors.less +1092 -1092
package/lib/css/exports/constants-helpers.less +108 -108
package/lib/css/exports/constants-type.less +153 -153
package/lib/css/exports/exports.less +15 -15
package/lib/css/exports/mixins.less +237 -237
package/lib/css/stacks-dynamic.less +35 -35
package/lib/css/stacks-static.less +86 -86
package/lib/css/stacks.less +13 -13
package/lib/ts/controllers/index.ts +7 -7
package/lib/ts/controllers/s-expandable-control.ts +188 -188
package/lib/ts/controllers/s-modal.ts +321 -321
package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
package/lib/ts/controllers/s-popover.ts +567 -547
package/lib/ts/controllers/s-table.ts +220 -220
package/lib/ts/controllers/s-tooltip.ts +246 -246
package/lib/ts/controllers/s-uploader.ts +172 -172
package/lib/ts/index.ts +20 -20
package/lib/ts/stacks.ts +88 -88
package/lib/tsconfig.json +13 -13
package/package.json +86 -87

package/lib/css/base/internals.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/css/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 */
+}