@stackoverflow/stacks 3.0.0-beta.13 → 3.0.0-beta.14

package/lib/components/vote/vote.less

@@ -0,0 +1,134 @@
+.s-vote {
+    --_vo-fd: column;
+    --_vo-child-bg: var(--black-150);
+    --_vo-child-br: unset;
+    --_vo-child-fd: var(--_vo-fd);
+    --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+    --_vo-child-h: unset;
+    --_vo-child-w: calc(var(--su48) + var(--su2)); // 50px
+    --_vo-child-p: unset;
+    
+    // CHILD ELEMENTS
+    &:not(&__horizontal){
+        :first-child {
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2)); // 14px 0 10px
+            --_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
+        }
+        
+        :last-child {
+            --_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2)); // 10px 0 14px
+            --_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su16) + var(--su4)); // 18px
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0; // 14px 0
+        }
+    }
+
+    // MODIFIERS
+    &&__expanded {
+        --_vo-child-g: var(--su2);
+        --_vo-child-p: 0;
+
+        .s-vote {
+            &--total {
+                display: none;
+            }
+            &--upvotes,
+            &--downvotes {
+                display: block;
+            }
+        }
+    }
+
+    &&__horizontal {
+        --_vo-fd: row;
+        --_vo-child-h: var(--su32);
+        --_vo-child-p: 0 var(--su4);
+        --_vo-child-w: unset;
+        
+        :first-child {
+            --_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2)); // 0 6px 0 10px
+            --_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
+        }
+
+        :last-child {
+            --_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6); // 0 10px 0 6px
+            --_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
+        }
+
+        .s-vote--votes:last-child:not(:only-child) {
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4); // 0 14px 0 4px
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2)); // 0 10px
+        }
+    }
+
+    // CHILD ELEMENTS
+    > button {
+        // Reset button styles
+        appearance: none;
+        -webkit-appearance: none;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    & &--btn,
+    & > &--votes {
+        background-color: var(--_vo-child-bg);
+        border-radius: var(--_vo-child-br);
+        flex-direction: var(--_vo-child-fd);
+        gap: var(--_vo-child-g);
+        height: var(--_vo-child-h);
+        padding: var(--_vo-child-p);
+        width: var(--_vo-child-w);
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        font-weight: 600;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    & &--upvotes,
+    & &--downvotes {
+        display: none;
+    }
+
+    & &--upvotes {
+        color: var(--green-500);
+    }
+
+    & &--downvotes {
+        color: var(--red-500);
+    }
+
+    // INTERACTION
+    > button,
+    & &--btn {
+        &:focus-visible {
+            .focus-styles(true, false);
+        }
+
+        &:hover {
+            --_vo-child-bg: var(--black-200);
+        }
+    }
+
+    flex-direction: var(--_vo-fd);
+
+    display: flex;
+}

package/lib/stacks-static.less

@@ -17,9 +17,8 @@
 @import "components/button/button.less";
 @import "components/button-group/button-group.less";
 @import "components/card/card.less";
-@import "components/check-control/check-control.less";
-@import "components/check-group/check-group.less";
 @import "components/checkbox_radio/checkbox_radio.less";
+@import "components/form-group/form-group.less";
 @import "components/code-block/code-block.less";
 @import "components/description/description.less";
 @import "components/empty-state/empty-state.less";
@@ -53,6 +52,7 @@
 @import "components/topbar/topbar.less";
 @import "components/uploader/uploader.less";
 @import "components/user-card/user-card.less";
+@import "components/vote/vote.less";
 
 // LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

package/lib/tsconfig.json

@@ -5,7 +5,7 @@
         "lib": ["dom", "es6", "dom.iterable", "scripthost"],
         "outDir": "../dist",
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "declaration": true,
         "allowSyntheticDefaultImports": true,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.13",
+    "version": "3.0.0-beta.14",
     "files": [
         "dist",
         "lib",

package/lib/components/check-control/check-control.less

@@ -1,17 +0,0 @@
-.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
-    --_cc-ai: center;
-
-    // CONTEXTUAL STYLES
-    .s-check-group & {
-        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
-    }
-
-    // CHILD ELEMENTS
-    .s-label {
-        font-weight: normal;
-    }
-
-    align-items: var(--_cc-ai);
-    display: flex;
-    gap: var(--su8);
-}

package/lib/components/check-group/check-group.less

@@ -1,19 +0,0 @@
-.s-check-group {
-    --_cg-fd: column;
-
-    // MODIFIERS
-    &&__horizontal {
-        --_cg-fd: row;
-    }
-
-    // CHILD ELEMENTS
-    // TODO HACK? <legend> isn't respecting gap...
-    legend.s-label {
-        margin-bottom: var(--su8);
-    }
-
-    flex-direction: var(--_cg-fd);
-
-    display: flex;
-    gap: var(--su8);
-}