@stackoverflow/stacks 1.3.0 → 1.3.3

package/lib/css/components/activity-indicator.less

@@ -12,13 +12,29 @@
 //  ----------------------------------------------------------------------------
 
 .s-activity-indicator {
+    --_focus-ring: var(--focus-ring);
+    --_bg-color: var(--theme-secondary-400);
+
+    &.s-activity-indicator__success {
+        --_bg-color: var(--green-500);
+        --_focus-ring: var(--focus-ring-success);
+    }
+    &.s-activity-indicator__warning {
+        --_bg-color: var(--yellow-600);
+        --_focus-ring: var(--focus-ring-warning);
+    }
+    &.s-activity-indicator__danger {
+        --_bg-color: var(--red-500);
+        --_focus-ring: var(--focus-ring-error);
+    }
+
     display: inline-block;
     min-width: var(--su-static12);
     min-height: var(--su-static12);
     padding: var(--su2) var(--su4);
     line-height: 1.1; // Custom line-height to satisfy 1x screens
-    background-color: var(--theme-secondary-400);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+    background-color: var(--_bg-color);
+    box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring);
     border-radius: 1000px;
     font-size: var(--fs-fine);
     font-weight: 600;
@@ -27,18 +43,3 @@
 
     .highcontrast-mode({ color: var(--white); });
 }
-
-.s-activity-indicator__success {
-    background-color: var(--green-500);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
-}
-
-.s-activity-indicator__warning {
-    background-color: var(--yellow-600);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
-}
-
-.s-activity-indicator__danger {
-    background-color: var(--red-500);
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
-}

package/lib/css/components/avatars.less

@@ -16,11 +16,52 @@
 //  ----------------------------------------------------------------------------
 
 .s-avatar {
+    --_size: var(--su-static16);
+    --_br: var(--br-sm);
+    --_fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_scale-badge: 1;
+
+    &.s-avatar__24 {
+        --_size: var(--su-static24);
+        --_fs-letter: var(--su-static16);
+        --_scale-badge: 1.1;
+    }
+    &.s-avatar__32 {
+        --_size: var(--su-static32);
+        --_br: var(--br-md);
+        --_fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_scale-badge: 1.3;
+    }
+    &.s-avatar__48 {
+        --_size: var(--su-static48);
+        --_br: var(--br-md);
+        --_fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_scale-badge: 1.6;
+    }
+    &.s-avatar__64 {
+        --_size: var(--su-static64);
+        --_br: var(--br-lg);
+        --_fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_scale-badge: 2.4;
+    }
+    &.s-avatar__96 {
+        --_size: var(--su-static96);
+        --_br: calc(var(--br-lg) + var(--br-sm));
+        --_fs-letter: calc(var(--su-static64) + var(--su-static2));
+        --_scale-badge: 3;
+    }
+    &.s-avatar__128 {
+        --_size: var(--su-static128);
+        --_br: calc(var(--br-lg) + var(--br-sm));
+        --_fs-letter: calc(var(--su-static96) - var(--su-static8));
+        --_scale-badge: 3;
+    }
+
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
-    width: var(--su-static16);
-    height: var(--su-static16);
-    border-radius: var(--br-sm);
+    width: var(--_size);
+    height: var(--_size);
+    border-radius: var(--_br);
     background-color: @white; // Force a white background color for when we have transparent avatars
     background-repeat: no-repeat;
     background-size: 100%;
@@ -39,7 +80,7 @@
     .s-avatar--letter {
         display: block; // Make sure we're treating the letter as a block-level element
         color: @white; // Force a light appearance of text rendering
-        font-size: 11px; // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-size: var(--_fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
         font-weight: bold;
         line-height: 1.4; // Guards against some line-height trolling from the parent
         text-align: center;
@@ -55,136 +96,14 @@
         position: absolute;
         right: -4px;
         bottom: -4px;
+        -webkit-transform: scale(var(--_scale-badge));
+        transform: scale(var(--_scale-badge));
     }
 
     .s-avatar--image {
-        width: var(--su-static16);
-        height: var(--su-static16);
-        border-radius: var(--br-sm);
+        width: var(--_size);
+        height: var(--_size);
+        border-radius: var(--_br);
         display: block;
     }
-
-    &.s-avatar__24 {
-        width: var(--su-static24);
-        height: var(--su-static24);
-
-        .s-avatar--letter {
-            font-size: 16px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.1);
-            transform: scale(1.1);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static24);
-            height: var(--su-static24);
-        }
-    }
-
-    &.s-avatar__32 {
-        width: var(--su-static32);
-        height: var(--su-static32);
-        border-radius: var(--br-md);
-
-        .s-avatar--letter {
-            font-size: 22px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.3);
-            transform: scale(1.3);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static32);
-            height: var(--su-static32);
-            border-radius: var(--br-md);
-        }
-    }
-
-    &.s-avatar__48 {
-        width: var(--su-static48);
-        height: var(--su-static48);
-        border-radius: var(--br-md);
-
-        .s-avatar--letter {
-            font-size: 34px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(1.6);
-            transform: scale(1.6);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static48);
-            height: var(--su-static48);
-            border-radius: var(--br-md);
-        }
-    }
-
-    &.s-avatar__64 {
-        width: var(--su-static64);
-        height: var(--su-static64);
-        border-radius: var(--br-lg);
-
-        .s-avatar--letter {
-            font-size: 44px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(2.4);
-            transform: scale(2.4);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static64);
-            height: var(--su-static64);
-            border-radius: var(--br-lg);
-        }
-    }
-
-    &.s-avatar__96 {
-        width: var(--su-static96);
-        height: var(--su-static96);
-        border-radius: calc(var(--br-lg) + var(--br-sm));
-
-        .s-avatar--letter {
-            font-size: 66px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(3);
-            transform: scale(3);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static96);
-            height: var(--su-static96);
-            border-radius: calc(var(--br-lg) + var(--br-sm));
-        }
-    }
-
-    &.s-avatar__128 {
-        width: var(--su-static128);
-        height: var(--su-static128);
-        border-radius: calc(var(--br-lg) + var(--br-lg));
-
-        .s-avatar--letter {
-            font-size: 88px; // Force the font size regardless of the parent
-        }
-
-        .s-avatar--badge {
-            -webkit-transform: scale(3);
-            transform: scale(3);
-        }
-
-        .s-avatar--image {
-            width: var(--su-static128);
-            height: var(--su-static128);
-            border-radius: calc(var(--br-lg) + var(--br-lg));
-        }
-    }
 }

package/lib/css/components/breadcrumbs.less

@@ -11,7 +11,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: start;
-    color: var(--black-150);
+    color: var(--black-200);
     font-size: var(--fs-caption);
 
     .s-breadcrumbs--item {
@@ -26,7 +26,7 @@
         margin-right: var(--su4);
         margin-left: var(--su4);
 
-        .highcontrast-mode({ color: var(--black-350); });
+        .highcontrast-mode({ color: var(--fc-light); });
 
         #stacks-internals #screen-sm({
             margin-right: var(--su2);
@@ -35,10 +35,10 @@
     }
 
     .s-breadcrumbs--link {
-        color: var(--black-350);
+        color: var(--fc-light);
 
         &:hover {
-            color: var(--black-600);
+            color: var(--fc-medium);
         }
     }
 }

package/lib/css/components/buttons.less

@@ -74,7 +74,7 @@
         }
 
         &[disabled] {
-            opacity: 0.5;
+            opacity: var(--_o-disabled-static);
             pointer-events: none;
             box-shadow: none !important;
         }
@@ -151,15 +151,13 @@
         }
 
         .s-btn--badge {
-            opacity: 0.5;
+            opacity: var(--_o-disabled);
             display: inline-block;
             border-radius: var(--br-sm);
             padding: var(--su2) calc(var(--su4) - var(--su1));
             font-size: var(--fs-caption);
             line-height: var(--lh-xs);
             background-color: currentColor;
-
-            .highcontrast-mode({ opacity: 0.8; });
         }
 
         .s-btn--number {
@@ -640,50 +638,12 @@
     }
 
     //  $$  Loading Icon
-    //      Adds a loading icon into the button
+    //      see spinner.less for full implementation
     //  ----------------------------------------------------------------------------
-    .s-btn {
-        &.is-loading {
-            padding-left: 2.2em;
-
-            &:before {
-                content: "";
-                position: absolute;
-                opacity: 0.3;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: currentColor;
-                border-radius: var(--br-circle);
-            }
-
-            &:after {
-                content: "";
-                position: absolute;
-                left: 0.6em;
-                top: calc(50% - 0.6em);
-                width: 1.23076923em;
-                height: 1.23076923em;
-                border-width: 2px;
-                border-style: solid;
-                border-color: transparent;
-                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 spinner.less for an explanation of the following two
-                filter: invert(0); // (*)
-                transform-origin: 50% 50% 1px; // (*)
-            }
-
-            .svg-icon:first-child {
-                margin-left: -23px;
-                // If the first thing in the button is an icon, let's hide it on loading
-                // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
-                opacity: 0;
-            }
-        }
+    .s-btn.is-loading  .svg-icon:first-child {
+        margin-left: -23px;
+        // If the first thing in the button is an icon, let's hide it on loading
+        // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
+        opacity: 0;
     }
 }

package/lib/css/components/empty-states.less

@@ -0,0 +1,15 @@
+.s-empty-state {
+    color: var(--fc-light);
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+
+    p {
+        font-size: var(--fs-body1);
+        margin-bottom: var(--su12);
+
+        strong {
+            color: var(--fc-dark);
+        }
+    }
+}

package/lib/css/components/inputs.less

@@ -12,8 +12,6 @@
 //    - Base Style (Input / Textarea)
 //    - Textarea Styles
 //    - Fieldset Resets
-//  • Labels
-//  • Label Statuses
 //  • Text Styles
 //  • Connected Input Fills
 //  • Select Menus
@@ -45,7 +43,11 @@
     }
 }
 
-@basic-styling: {
+//  ============================================================================
+//  $  BASE INPUT / TEXTAREA STYLE
+//  ----------------------------------------------------------------------------
+.s-input,
+.s-textarea {
     -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
     width: 100%;
     margin: 0; // A guard against Core's default margins
@@ -95,14 +97,6 @@
     @autofill();
 }
 
-//  ============================================================================
-//  $  BASE INPUT / TEXTAREA STYLE
-//  ----------------------------------------------------------------------------
-.s-input,
-.s-textarea {
-    @basic-styling();
-}
-
 .s-input.s-input__search,
 .s-input.s-input__creditcard {
     padding-left: var(--su-static32);
@@ -122,83 +116,28 @@ fieldset {
         .s-btn,
         .s-link {
             box-shadow: none !important;
-            opacity: 0.5;
+            opacity: var(--_o-disabled-static);
             pointer-events: none;
         }
 
         .s-checkbox,
         .s-input-message,
-        .s-label,
         .s-radio,
         .s-toggle-switch,
         .s-toggle-switch label {
             cursor: not-allowed;
-            opacity: 0.5;
+            opacity: var(--_o-disabled-static);
         }
 
         .s-input,
         .s-textarea,
         .s-select > select {
             cursor: not-allowed;
-            opacity: 0.5;
+            opacity: var(--_o-disabled-static);
         }
     }
 }
 
-//  ============================================================================
-//  $  LABELS
-//  ============================================================================
-.s-label {
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-    color: var(--fc-dark);
-    font-family: inherit;
-    font-size: var(--fs-body2);
-    font-weight: 600;
-
-    &[for] {
-        cursor: pointer;
-    }
-}
-
-//  $$  LABEL STATUS FLAG
-//  ----------------------------------------------------------------------------
-//      Is this form item required or optional? Flag the status for users.
-//      Default styling is optional.
-.s-label--status {
-    margin-left: var(--su4);
-    padding: var(--su2) var(--su8);
-    border-radius: 1000px;
-    background-color: var(--black-050);
-    color: var(--fc-medium);
-    font-size: var(--fs-caption);
-    font-weight: 400;
-    vertical-align: text-bottom;
-
-    .highcontrast-mode({
-        border: 1px solid currentColor;
-    });
-
-    &.s-label--status__required {
-        background-color: var(--red-100);
-        color: var(--red-600);
-
-        .dark-mode({
-            color: var(--red-800);
-        });
-    }
-
-    &.s-label--status__new {
-        background-color: var(--green-100);
-        color: var(--green-700);
-    }
-
-    &.s-label--status__beta {
-        background-color: var(--blue-100);
-        color: var(--blue-700);
-    }
-}
-
-
 //  ============================================================================
 //  $  TEXT STYLES
 //  ============================================================================
@@ -208,14 +147,6 @@ fieldset {
     font-size: var(--fs-caption);
 }
 
-.s-label .s-description,
-.s-label .s-input-message {
-    padding: 0;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-weight: normal;
-}
-
 //  ============================================================================
 //  $   CONNECTED INPUTS
 //      To visually connect inputs together
@@ -363,7 +294,7 @@ fieldset {
 
     //  Disabled
     &[disabled] {
-        opacity: 0.5;
+        opacity: var(--_o-disabled-static);
         cursor: not-allowed;
     }
 }
@@ -462,21 +393,26 @@ fieldset {
 .s-input,
 .s-textarea,
 .s-select > select {
-    //  Disabled, Read-only
-    &[disabled],
-    &[read-only] {
+    //  Disabled
+    &[disabled] {
         cursor: not-allowed;
-        opacity: 0.5;
-
-        .highcontrast-mode({
-            opacity: 0.5;
-        });
+        opacity: var(--_o-disabled-static);
     }
 
-    //  Disabled
-    &[disabled] {
+    //  Readonly
+    //  Note: The readonly attribute is not supported on select elements
+    //  See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+    //  and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086
+    &[readonly],
+    .is-readonly & {
+        border-color: var(--bc-light);
+        background-color: var(--black-050);
+        color: var(--black-200);
         cursor: not-allowed;
-        opacity: 0.5;
+
+        .highcontrast-mode({
+            color: var(--fc-light);
+        });
     }
 }
 
@@ -485,6 +421,7 @@ fieldset {
 //      Classes are applied at the wrapping container level.
 //  ----------------------------------------------------------------------------
 .is-disabled,
+.is-readonly,
 .has-success,
 .has-error,
 .has-warning {
@@ -612,21 +549,24 @@ fieldset {
         border-color: var(--bc-darker) transparent;
     }
 
-    .s-label,
     .s-description {
-        opacity: 0.5;
-
-        .s-description {
-            opacity: unset;
-        }
+        opacity: var(--_o-disabled-static);
     }
 
     .s-input-icon {
         color: var(--black-400);
     }
+}
 
-    .s-label {
-        cursor: not-allowed;
+//  $$  READONLY
+//  ----------------------------------------------------------------------------
+.is-readonly {
+    .s-input-icon {
+        color: var(--black-200);
+
+        .highcontrast-mode({
+            color: var(--fc-light);
+        });
     }
 }
 
@@ -659,25 +599,21 @@ fieldset {
 //  ----------------------------------------------------------------------------
 .s-input__sm,
 .s-textarea__sm,
-.s-label__sm,
 .s-select__sm > select {
     font-size: var(--fs-caption);
 }
 .s-input__md,
 .s-textarea__md,
-.s-label__md,
 .s-select__md > select {
     font-size: var(--fs-body3);
 }
 .s-input__lg,
 .s-textarea__lg,
-.s-label__lg,
 .s-select__lg > select {
     font-size: var(--fs-title);
 }
 .s-input__xl,
 .s-textarea__xl,
-.s-label__xl,
 .s-select__xl > select {
     font-size: var(--fs-headline1);
 }