@stackoverflow/stacks 1.6.6 → 1.7.0

package/lib/css/components/links.less

@@ -1,214 +0,0 @@
-a,
-.s-link {
-    text-decoration: none;
-    color: var(--theme-link-color);
-    cursor: pointer;
-    user-select: auto;
-
-    .highcontrast-mode({
-        text-decoration: underline;
-    });
-
-    &.s-link__visited:visited {
-        color: var(--theme-link-color-visited);
-    }
-
-    &:hover,
-    &.s-link__visited:hover,
-    &:active,
-    &.s-link__visited:active {
-        color: var(--theme-link-color-hover);
-    }
-
-    &.s-link__grayscale {
-        color: var(--black-800);
-
-        &.s-link__visited:visited {
-            color: var(--black-700);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--black-900);
-        }
-    }
-
-    &.s-link__muted {
-        color: var(--black-500);
-
-        &.s-link__visited:visited {
-            color: var(--black-700);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--black-600);
-        }
-    }
-
-    &.s-link__danger {
-        color: var(--red-500);
-
-        &.s-link__visited:visited {
-            color: var(--red-600);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--red-400);
-        }
-    }
-
-    &.s-link__inherit {
-        color: inherit !important;
-
-        &:hover,
-        &:active,
-        &.s-link__visited:visited {
-            color: inherit !important;
-        }
-    }
-
-    &.s-link__underlined {
-        text-decoration: underline !important;
-    }
-
-    &.s-link__dropdown {
-        position: relative;
-        padding-right: 0.9em;
-
-        &:after {
-            content: "";
-            position: absolute;
-            z-index: var(--zi-active);
-            top: calc(50% - 2px);
-            right: 0;
-            border-style: solid;
-            border-width: var(--su-static4);
-            border-top-width: var(--su-static4);
-            border-bottom-width: 0;
-            border-color: currentColor transparent;
-            pointer-events: none;
-        }
-    }
-}
-
-button.s-link {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: transparent;
-    border: 0;
-    padding: 0;
-    line-height: inherit;
-    user-select: auto;
-    font-family: inherit;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.s-anchors {
-    .colorize-all(@name, @normal, @hover) {
-        &.s-anchors__@{name},
-        & .s-anchors.s-anchors__@{name} {
-            a:not(.s-link),
-            .s-btn.s-btn__link {
-                color: @normal;
-
-                &:hover,
-                &:active {
-                    color: @hover;
-                }
-
-                &:visited {
-                    color: @normal;
-
-                    &:hover,
-                    &:active {
-                        color: @hover;
-                    }
-                }
-            }
-        }
-    }
-    &.s-anchors__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            text-decoration: underline;
-        }
-    }
-    .colorize-all(default, var(--theme-link-color), var(--theme-link-color-hover));
-    .colorize-all(grayscale, var(--black-700), var(--black-600));
-    .colorize-all(inherit, inherit, inherit);
-    .colorize-all(muted, var(--black-500), var(--black-400));
-    .colorize-all(danger, var(--red-500), var(--red-400));
-}
-
-.s-block-link {
-    display: block;
-    width: 100%;
-    color: var(--black-600);
-    padding: var(--su6) var(--su12);
-
-    // Normalize for when applying to a button
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    border-radius: 0;
-    text-align: left;
-    line-height: inherit;
-    font-family: inherit;
-
-    &:hover,
-    &:active {
-        color: var(--black-800);
-    }
-
-    @focus-styles();
-
-    &.is-selected {
-        --_li-block-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
-
-        color: var(--black-800);
-        font-weight: bold;
-        background-color: var(--black-050);
-
-        .dark-mode({
-            background-color: var(--black-025);
-        });
-
-        &.s-block-link__right {
-            --_li-block-bs-offset-x: -3px;
-        }
-
-        &.s-block-link__left,
-        &.s-block-link__right {
-            box-shadow: var(--_li-block-bs);
-
-            &:focus:not(:focus-visible),
-            &:focus-visible {
-                outline: none;
-            }
-
-            &:focus-visible {
-                box-shadow: var(--_li-block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
-            }
-        }
-    }
-
-    &.s-block-link__danger {
-        color: var(--red-500);
-
-        &:hover,
-        &:active {
-            color: var(--red-700);
-        }
-    }
-}

package/lib/css/components/tables.less

@@ -1,313 +0,0 @@
-//  ============================================================================
-//  $    CONTAINER
-//  Give tables an optional container for responsive scrolling
-//  ----------------------------------------------------------------------------
-.s-table-container {
-    overflow-x: auto;
-    @scrollbar-styles();
-}
-
-//  ============================================================================
-//  $    BASE TABLE STYLE
-//  ----------------------------------------------------------------------------
-.s-table {
-    display: table;
-    width: 100%;
-    max-width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    font-size: var(--fs-body1);
-
-    th,
-    td {
-        padding: var(--su8);
-        border-top: 1px solid var(--bc-medium);
-        border-left: 1px solid var(--bc-medium);
-        border-right: 1px solid var(--bc-medium);
-        vertical-align: middle;
-        color: var(--fc-medium);
-        text-align: left;
-
-        &.s-table--bulk {
-            width: calc(var(--su32) - var(--su2));
-        }
-
-        .s-checkbox {
-            display: block;
-        }
-    }
-
-    th {
-        font-weight: bold;
-        color: var(--fc-dark);
-    }
-
-    //  Custom styles when in a table head
-    thead th {
-        vertical-align: bottom;
-        white-space: nowrap;
-        background-color: var(--black-025);
-        line-height: var(--lh-sm);
-    }
-
-    //  When in a table body, don't make it bold.
-    tbody th {
-        font-weight: normal;
-    }
-
-    //  If it's the last row, add a bottom border
-    tr:last-of-type td,
-    tr:last-of-type th {
-        border-bottom: 1px solid var(--bc-medium);
-    }
-
-    //  If two table bodies are next to each other, visually separate them
-    tbody + tbody {
-        border-top: var(--su-static2) solid var(--bc-medium);
-    }
-}
-
-//  ============================================================================
-//  $    ALIGNMENTS
-//  ----------------------------------------------------------------------------
-.s-table {
-    //  $$  VERTICAL ALIGNMENT
-    //      This applies vertical alignment classes to all of a table's cells.
-    //  ------------------------------------------------------------------------
-    //  --  TOP
-    &.va-top {
-        th,
-        td {
-            vertical-align: top;
-        }
-    }
-
-    //  --  MIDDLE
-    &.va-middle {
-        th,
-        td {
-            vertical-align: middle;
-        }
-    }
-
-    //  --  BOTTOM
-    &.va-bottom {
-        th,
-        td {
-            vertical-align: bottom;
-        }
-    }
-
-    //  $$  TEXT ALIGNMENT
-    //      This applies the text alignment classes to all of a table's cells.
-    //  ------------------------------------------------------------------------
-    //  --  LEFT ALIGN
-    &.ta-left {
-        th,
-        td {
-            text-align: left;
-        }
-    }
-
-    //  --  CENTER ALIGN
-    &.ta-center {
-        th,
-        td {
-            text-align: center;
-        }
-    }
-
-    //  --  RIGHT ALIGN
-    &.ta-right {
-        th,
-        td {
-            text-align: right;
-        }
-    }
-
-    //  --  JUSTIFY ALIGN
-    &.ta-justify {
-        th,
-        td {
-            text-align: justify;
-        }
-    }
-}
-
-//  ============================================================================
-//  $    LAYOUT VARIATIONS
-//  ----------------------------------------------------------------------------
-.s-table {
-    //  $$  STRIPES
-    //  ------------------------------------------------------------------------
-    &.s-table__stripes {
-        // Darken the header
-        thead th {
-            background-color: var(--black-050);
-        }
-        // Add in stripes
-        tbody tr:nth-child(even) {
-            background-color: var(--black-025);
-        }
-    }
-
-    //  $$  SPACING
-    //  ------------------------------------------------------------------------
-    //  --  SMALL
-    &.s-table__sm {
-        th,
-        td {
-            padding: var(--su4);
-        }
-    }
-    //  --  LARGE
-    &.s-table__lg {
-        th,
-        td {
-            padding: var(--su12);
-        }
-    }
-
-    //  $$  BORDERS
-    //  ------------------------------------------------------------------------
-    //  --  No Borders
-    &.s-table__b0 {
-        th,
-        td,
-        tr:last-of-type th,
-        tr:last-of-type td {
-            border-color: transparent;
-        }
-
-        //  Clear Header Styles
-        thead th {
-            background-color: transparent;
-            text-transform: initial;
-            font-size: inherit;
-            letter-spacing: initial;
-        }
-
-        //  This makes the border transparent, so we need to use whitespace
-        //  to achieve the same effect a 2px gray border achieves.
-        tbody + tbody {
-            border-color: transparent;
-            border-width: var(--su-static12);
-        }
-    }
-
-    //  --  Horizontal Only with Table Outline
-    &.s-table__bx {
-        tr {
-            > *:not(:first-child) {
-                border-left-color: transparent;
-            }
-            > *:not(:last-child) {
-                border-right-color: transparent;
-            }
-        }
-    }
-
-    //  --  Horizontal Only without Table Outline
-    &.s-table__bx-simple {
-        th,
-        td {
-            border-left-color: transparent;
-            border-right-color: transparent;
-        }
-        thead th {
-            border-top-color: transparent;
-            border-bottom-color: var(--bc-darker);
-            //  Clear Header Styles
-            background-color: transparent;
-            text-transform: initial;
-            font-size: inherit;
-            letter-spacing: initial;
-        }
-        tbody tr {
-            &:first-of-type th,
-            &:first-of-type td {
-                border-top-color: transparent;
-            }
-            &:last-of-type th,
-            &:last-of-type td {
-                border-bottom-color: transparent;
-            }
-        }
-        tfoot th,
-        tfoot td {
-            border-bottom-color: transparent;
-        }
-    }
-
-    //  $$  TOTALS ROW
-    //  ------------------------------------------------------------------------
-    .s-table--totals {
-        th,
-        td {
-            padding-top: var(--su12);
-            font-size: var(--fs-subheading);
-            font-weight: bold;
-        }
-    }
-
-    //  $$  Sortable Table Columns
-    //  ------------------------------------------------------------------------
-    &.s-table__sortable thead th {
-        color: var(--fc-light);
-        cursor: pointer;
-
-        //  If an anchor is used, it should appear like a normal header
-        a {
-            color: inherit;
-        }
-
-        //  Selected state
-        &.is-sorted {
-            color: var(--black-900);
-        }
-    }
-
-    //  $$  Progress Bar
-    //  ------------------------------------------------------------------------
-    td.s-table--progress {
-        border-right: none;
-        text-align: right;
-    }
-
-    td.s-table--progress-bar {
-        border-left: none;
-        padding-left: 0;
-        width: 120px;
-    }
-
-    //  $$  Disabled rows
-    //  ------------------------------------------------------------------------
-    tr.is-disabled {
-        background-color: var(--black-025);
-
-        th:not(.is-enabled),
-        td:not(.is-enabled) {
-            opacity: calc(var(--_o-disabled) * 0.6); // 0.5 * 0.6 = 0.3
-        }
-    }
-}
-
-//  ============================================================================
-//  $  TABLE CELL SIZES
-//  ============================================================================
-//  $$  General Column Sizes
-//  ----------------------------------------------------------------------------
-@table-columns: (100% / 12);
-
-.s-table--cell1 { width: @table-columns * 1; }
-.s-table--cell2 { width: @table-columns * 2; }
-.s-table--cell3 { width: @table-columns * 3; }
-.s-table--cell4 { width: @table-columns * 4; }
-.s-table--cell5 { width: @table-columns * 5; }
-.s-table--cell6 { width: @table-columns * 6; }
-.s-table--cell7 { width: @table-columns * 7; }
-.s-table--cell8 { width: @table-columns * 8; }
-.s-table--cell9 { width: @table-columns * 9; }
-.s-table--cell10 { width: @table-columns * 10; }
-.s-table--cell11 { width: @table-columns * 11; }
-.s-table--cell12 { width: @table-columns * 12; }