aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/table.scss
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/web-shared/src/styles/components/table.scss')
-rw-r--r--old-apps/web-shared/src/styles/components/table.scss147
1 files changed, 0 insertions, 147 deletions
diff --git a/old-apps/web-shared/src/styles/components/table.scss b/old-apps/web-shared/src/styles/components/table.scss
deleted file mode 100644
index af8207f..0000000
--- a/old-apps/web-shared/src/styles/components/table.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@use '../base'as *;
-
-/* --------------------------------
-
-File#: _1_table
-Title: Table
-Descr: Data tables used to organize and display information in rows and columns
-Usage: codyhouse.co/license
-
--------------------------------- */
-
-// >>> style affecting all (block + expanded) versions 👇
-.table {
- position: relative;
- z-index: 1;
-}
-
-// <<< end style affecting all versions
-
-// >>> block version only (mobile) 👇
-.table:not(.table--expanded) {
- border-collapse: separate;
- border-spacing: 0 var(--space-md); // row gap
- margin-top: calc(-2 * var(--space-md)); // set spacing variable = row gap ☝️
-
- .table__header {
- // hide table header - but keep it accessible to SR
- @include srHide;
- }
-
- .table__row {
- .table__cell:first-child {
- border-radius: var(--radius-md) var(--radius-md) 0 0;
- }
-
- .table__cell:last-child {
- border-radius: 0 0 var(--radius-md) var(--radius-md);
-
- &::after {
- // hide border bottom
- display: none;
- }
- }
- }
-
- .table__cell {
- position: relative;
- display: flex;
- justify-content: space-between;
- width: 100%;
- text-align: right;
- padding: var(--space-md);
- background-color: var(--color-bg-light);
-
- &::after {
- // border bottom
- content: '';
- position: absolute;
- bottom: 0;
- left: var(--space-md);
- width: calc(100% - (2 * var(--space-md)));
- height: 1px;
- background-color: var(--color-contrast-lower);
- }
- }
-
- .table__label {
- // inline labels -> visible when table header is hidden
- font-weight: bold;
- text-align: left;
- color: var(--color-contrast-higher);
- margin-right: var(--space-md);
- }
-}
-
-// <<< end block version
-
-// >>> expanded version only (desktop) 👇 -> show standard rows and cols
-.table--expanded {
- border-bottom: 1px solid var(--color-contrast-lower); // table border bottom
-
- .table__header {
- .table__cell {
- // header cell style
- position: relative;
- z-index: 10;
- background-color: var(--color-bg);
- border-bottom: 1px solid var(--color-contrast-lower); // header border bottom
- font-weight: bold;
- color: var(--color-contrast-higher);
- }
- }
-
- .table__body {
- .table__row {
- &:nth-child(odd) {
- background-color: alpha(var(--color-bg-dark), 0.85);
- }
- }
- }
-
- .table__cell {
- padding: var(--space-xxxs);
- }
-
- .table__label {
- // hide inline labels
- display: none;
- }
-
- // --header-sticky
- .table__header--sticky {
- .table__cell {
- // header cell style
- position: sticky;
- top: 0;
- }
- }
-}
-
-// <<< end expanded version
-
-.js {
- .table {
- opacity: 0; // hide table while it is initialized in JS
- }
-
- .table--loaded {
- opacity: 1;
- }
-}
-
-// detect when the table needs to switch from the mobile layout to an expanded one - used in JS
-[class*="table--expanded"]::before {
- display: none;
-}
-
-@each $breakpoint,
-$value in $breakpoints {
- .table--expanded\@#{$breakpoint}::before {
- content: 'collapsed';
-
- @include breakpoint(#{$breakpoint}) {
- content: 'expanded';
- }
- }
-}