$table-striped-alt-body-back-color: #263238; // Alternate background color for in striped
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
-// [2] - If $include-horizontal-table is `true`, then the horizontal biew will be included in a class defined by
-// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
+// [2] - If $include-horizontal-table is `true`, then the horizontal view will be included in a class defined by
+// $table-horizontal-name.
+// [3] - If $include-scrollable-table is `true`, then the scrollable view will be included in a class defined by
+// $table-scrollable-name and a height defined by $table-scrollable-height.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #232e33; // Background color for cards
diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss
index 51827a3..429c1e0 100644
--- a/src/flavors/mini-default.scss
+++ b/src/flavors/mini-default.scss
@@ -274,7 +274,7 @@ $header-padding: 0.125rem 0.5rem; // Padding for
$header-box-shadow: none; // Box shadow for
$header-logo-name: 'logo'; // Class name for 's logo
$header-logo-font-size: 1.75rem; // Font size for 's logo
-$header-logo-line-height: 1.3125em; // Line height for 's logo
+$header-logo-line-height: 1.3125em; // Line height for 's logo
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for 's logo
$header-logo-padding: 0; // Padding for 's logo
$header-link-hover-color: #20292e; // Hover color for 's links
@@ -283,7 +283,7 @@ $include-header-sticky: true; // Should sticky elements be i
$header-sticky-name: 'sticky'; // Class name for sticky
$nav-back-color: #eceff1; // Background for
$nav-fore-color: $fore-color; // Text color for
-$nav-border-style: $_1px solid #c9c9c9; // Border style for
+$nav-border-style: $_1px solid #c9c9c9; // Border style for
$nav-border-radius: 0; // Border radius for
$nav-padding: 0.75rem 1rem; // Padding for
$nav-margin: 0.5rem; // Margin for
@@ -294,7 +294,7 @@ $nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
-$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
+$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
$drawer-name: 'drawer'; // Class name for the drawer component
$drawer-back-color: $nav-back-color; // Background color of the drawer component
@@ -348,26 +348,30 @@ $table-mobile-card-spacing: 0.625rem; // Space between cards - mobil
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: true; // Should horizontal elements be included? (`true`/`false`) [2]
-$table-horizontal-breakpoint: 768px; // Breakpoint for horizontal view
$table-horizontal-name: 'horizontal'; // Class name for horizontal view
+$include-scrollable-table: true; // Should scrollable elements be included? (`true`/`false`) [3]
+$table-scrollable-name: 'scrollable'; // Class name for scrollable view
+$table-scrollable-height: 400px; // Height for scrolalble view.
$table-not-responsive-name: 'preset'; // Class name for non-responsive view
$table-striped-name: 'striped'; // Class name for striped
$table-striped-alt-body-back-color: #e5e5e5; // Alternate background color for in striped
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
-// [2] - If $include-horizontal-table is `true`, then the horizontal biew will be included in a class defined by
-// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
+// [2] - If $include-horizontal-table is `true`, then the horizontal view will be included in a class defined by
+// $table-horizontal-name.
+// [3] - If $include-scrollable-table is `true`, then the scrollable view will be included in a class defined by
+// $table-scrollable-name and a height defined by $table-scrollable-height.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #fafafa; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
-$card-border-style: $_1px solid #acacac; // Border style for cards
+$card-border-style: $_1px solid #acacac; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 0.5rem; // Margin for cards
$card-box-shadow: none; // Box shadow for cards
$card-section-name: 'section'; // Class name for card sections
-$card-section-border-style: $_1px solid #c9c9c9; // Border style for card sections
+$card-section-border-style: $_1px solid #c9c9c9; // Border style for card sections
$card-section-padding: 0.5rem; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions
diff --git a/src/flavors/mini-lite.scss b/src/flavors/mini-lite.scss
index 0f11600..5ec217d 100644
--- a/src/flavors/mini-lite.scss
+++ b/src/flavors/mini-lite.scss
@@ -286,13 +286,14 @@ $table-mobile-card-spacing: 0.625rem; // Space between cards - mobil
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: false; // Should horizontal elements be included? (`true`/`false`) [2]
+$include-scrollable-table: false; // Should scrollable elements be included? (`true`/`false`) [2]
$include-striped-table: false; // [Hidden flag override] Should striped elements be included (`true`/`false`) [2]
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
-// [2] - Due to the $include-horizontal-table and $include-striped-table flags being set to `false`, no styling will be
-// provided for horizontal and striped elements. Please refer to a full fulavor to find the variables associated
-// with these components, if you want to enable them.
+// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
+// no styling will be provided for horizontal, scrollable and striped elements. Please refer to a full fulavor to find
+// the variables associated with these components, if you want to enable them.
$card-name: 'card'; // Class name for cards
$card-back-color: #fafafa; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
diff --git a/src/flavors/mini-nord.scss b/src/flavors/mini-nord.scss
index c9bf71b..b34619f 100644
--- a/src/flavors/mini-nord.scss
+++ b/src/flavors/mini-nord.scss
@@ -360,16 +360,20 @@ $table-mobile-card-spacing: 10px; // Space between cards - mobile
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
$table-mobile-label-font-weight: $bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: true; // Should horizontal elements be included? (`true`/`false`) [2]
-$table-horizontal-breakpoint: 768px; // Breakpoint for horizontal view
$table-horizontal-name: 'horizontal'; // Class name for horizontal view
+$include-scrollable-table: true; // Should scrollable elements be included? (`true`/`false`) [3]
+$table-scrollable-name: 'scrollable'; // Class name for scrollable view
+$table-scrollable-height: 400px; // Height for scrolalble view.
$table-not-responsive-name: 'preset'; // Class name for non-responsive view
$table-striped-name: 'striped'; // Class name for striped
$table-striped-alt-body-back-color: #E5E9F0; // Alternate background color for in striped
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
-// [2] - If $include-horizontal-table is `true`, then the horizontal biew will be included in a class defined by
-// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
+// [2] - If $include-horizontal-table is `true`, then the horizontal view will be included in a class defined by
+// $table-horizontal-name.
+// [3] - If $include-scrollable-table is `true`, then the scrollable view will be included in a class defined by
+// $table-scrollable-name and a height defined by $table-scrollable-height.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #ECEFF4; // Background color for cards
diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss
index b93d956..585f7ec 100644
--- a/src/flavors/mini-sucroa.scss
+++ b/src/flavors/mini-sucroa.scss
@@ -338,6 +338,7 @@ $table-mobile-card-spacing: 12px; // Space between cards - mobile
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
$include-horizontal-table: false; // Should horizontal elements be included? (`true`/`false`) [2]
+$include-scrollable-table: false; // Should scrollable elements be included? (`true`/`false`) [2]
$table-not-responsive-name: 'preset'; // Class name for non-responsive view
$table-striped-name: 'striped'; // Class name for striped
$table-striped-alt-body-back-color: #ece4ff; // Alternate background color for in striped
@@ -345,7 +346,9 @@ $table-striped-alt-body-back-color: #ece4ff; // Alternate background color fo
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
// [2] - If $include-horizontal-table is `true`, then the horizontal view will be included in a class defined by
-// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
+// $table-horizontal-name.
+// [3] - If $include-scrollable-table is `true`, then the scrollable view will be included in a class defined by
+// $table-scrollable-name and a height defined by $table-scrollable-height.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #f2d7d8; // Background color for cards
diff --git a/src/mini/_core.scss b/src/mini/_core.scss
index 6513fb4..8fe3d93 100644
--- a/src/mini/_core.scss
+++ b/src/mini/_core.scss
@@ -171,7 +171,7 @@ hr {
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
@if $horizontal-rule-fancy-style {
- height: 1px;
+ height: $_1px;
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
diff --git a/src/mini/_table.scss b/src/mini/_table.scss
index 9d7bc46..fcdd5fa 100644
--- a/src/mini/_table.scss
+++ b/src/mini/_table.scss
@@ -6,8 +6,11 @@ $table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile vi
$table-mobile-card-spacing: 10px !default; // Space between cards - mobile view.
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
-$include-horizontal-table: true !default; // Should horizontal tables be included?
+$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
+$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
+$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
+$table-scrollable-height: 400px !default; // Height for table scrollable view.
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
$table-striped-name: 'striped' !default; // Class name for striped table.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
@@ -118,8 +121,290 @@ table {
}
}
// Horizontal table view.
-@if $include-horizontal-table {
- @media screen and (min-width: #{$table-horizontal-breakpoint}) {
+@if $include-horizontal-table and $include-scrollable-table {
+ @media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
+ table.#{$table-horizontal-name}, table.#{$table-scrollable-name} {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ padding: $table-row-padding;
+ caption {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ }
+ thead, tbody {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ }
+ thead {
+ z-index: 999; // Fixes the visibility of the element.
+ }
+ tr {
+ // Old syntax
+ display: -webkit-box;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ }
+ }
+ table.#{$table-horizontal-name} {
+ thead, tbody {
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ }
+ tbody {
+ overflow: auto; // Allows content scrolling.
+ // Old syntax
+ -webkit-box-pack: justify;
+ // New syntax
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
+ -webkit-flex: 1 0 0;
+ flex: 1 0 0;
+ }
+ tr {
+ // Old syntax
+ -webkit-box-flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ // New syntax
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex: 1 0 auto;
+ flex: 1 0 auto;
+ }
+ th, td {
+ width: 100%;
+ border: $table-border-style; // Apply to overwrite.
+ @if $table-border-style != 0 {
+ &:not(:first-child) {
+ border-top: 0;
+ }
+ }
+ }
+ th {
+ text-align: right;
+ }
+ thead {
+ tr:first-child {
+ padding-left: 0;
+ }
+ }
+ tbody {
+ tr:first-child > td {
+ padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
+ }
+ }
+ }
+ table.#{$table-scrollable-name} {
+ overflow: auto;
+ height: $table-scrollable-height;
+ border: 0;
+ padding-top: 0;
+ thead, tbody {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ border: $table-border-style;
+ }
+ tbody {
+ border-top: 0;
+ margin-top: -0.0625rem;
+ }
+ tr {
+ // Old syntax
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ padding: 0; // Resets padding to avooid awkward spacing.
+ }
+ th, td {
+ // Old syntax
+ -webkit-box-flex: 1;
+ // New syntax
+ -webkit-flex: 1 0 0%;
+ flex: 1 0 0%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ thead {
+ position: sticky;
+ top: 0;
+ }
+ }
+ }
+ @media screen and (max-width: #{$table-mobile-breakpoint}) {
+ table.#{$table-horizontal-name}.#{$table-not-responsive-name}, table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ padding: $table-row-padding;
+ caption {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ }
+ thead, tbody {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ }
+ thead {
+ z-index: 999; // Fixes the visibility of the element.
+ }
+ tr {
+ // Old syntax
+ display: -webkit-box;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ }
+ }
+ table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
+ thead, tbody {
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ }
+ tbody {
+ overflow: auto; // Allows content scrolling.
+ // Old syntax
+ -webkit-box-pack: justify;
+ // New syntax
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
+ -webkit-flex: 1 0 0;
+ flex: 1 0 0;
+ }
+ tr {
+ // Old syntax
+ -webkit-box-flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ // New syntax
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex: 1 0 auto;
+ flex: 1 0 auto;
+ }
+ th, td {
+ width: 100%;
+ border: $table-border-style; // Apply to overwrite.
+ @if $table-border-style != 0 {
+ &:not(:first-child) {
+ border-top: 0;
+ }
+ }
+ }
+ th {
+ text-align: right;
+ }
+ thead {
+ tr:first-child {
+ padding-left: 0;
+ }
+ }
+ tbody {
+ tr:first-child > td {
+ padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
+ }
+ }
+ }
+ table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
+ overflow: auto;
+ height: $table-scrollable-height;
+ border: 0;
+ padding-top: 0;
+ thead, tbody {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ border: $table-border-style;
+ }
+ tbody {
+ border-top: 0;
+ margin-top: -0.0625rem;
+ }
+ tr {
+ // Old syntax
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ padding: 0; // Resets padding to avooid awkward spacing.
+ }
+ th, td {
+ // Old syntax
+ -webkit-box-flex: 1;
+ // New syntax
+ -webkit-flex: 1 0 0%;
+ flex: 1 0 0%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ thead {
+ position: sticky;
+ top: 0;
+ }
+ }
+ }
+}
+@else if $include-horizontal-table {
+ @media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
table.#{$table-horizontal-name} {
// Old syntax
display: -webkit-box;
@@ -133,17 +418,17 @@ table {
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
- padding: $table-row-padding;
- caption {
- // Old syntax
+ padding: $table-row-padding;
+ caption {
+ // Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex: 0 0 100%;
- flex: 0 0 100%;
- }
- thead, tbody {
- // Old syntax
+ flex: 0 0 100%;
+ }
+ thead, tbody {
+ // Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
@@ -153,22 +438,22 @@ table {
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
- }
- thead {
- z-index: 999; // Fixes the visibility of the element.
- }
- tbody {
- overflow: auto; // Allows content scrolling.
- // Old syntax
- -webkit-box-pack: justify;
- // New syntax
- -webkit-justify-content: space-between;
- justify-content: space-between;
+ }
+ thead {
+ z-index: 999; // Fixes the visibility of the element.
+ }
+ tbody {
+ overflow: auto; // Allows content scrolling.
+ // Old syntax
+ -webkit-box-pack: justify;
+ // New syntax
+ -webkit-justify-content: space-between;
+ justify-content: space-between;
-webkit-flex: 1 0 0;
flex: 1 0 0;
- }
- tr {
- // Old syntax
+ }
+ tr {
+ // Old syntax
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
@@ -180,30 +465,29 @@ table {
flex-direction: column;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
- }
- th, td {
- width: 100%;
- border: $table-border-style; // Apply to overwrite.
- @if $table-border-style != 0 {
- &:not(:first-child) {
- border-top: 0;
- }
+ }
+ th, td {
+ width: 100%;
+ border: $table-border-style; // Apply to overwrite.
+ @if $table-border-style != 0 {
+ &:not(:first-child) {
+ border-top: 0;
}
- }
- th {
- text-align: right;
- }
- thead {
- tr:first-child {
- padding-left: 0;
- }
- }
- tbody {
- tr:first-child > td {
- padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
- }
- }
-
+ }
+ }
+ th {
+ text-align: right;
+ }
+ thead {
+ tr:first-child {
+ padding-left: 0;
+ }
+ }
+ tbody {
+ tr:first-child > td {
+ padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
+ }
+ }
}
}
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
@@ -289,6 +573,164 @@ table {
}
}
}
+@else if $include-scrollable-table {
+ @media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
+ table.#{$table-scrollable-name} {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ overflow: auto;
+ height: $table-scrollable-height;
+ border: 0;
+ padding: $table-row-padding;
+ padding-top: 0;
+ caption {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ }
+ thead, tbody {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ border: $table-border-style;
+ }
+ thead {
+ z-index: 999; // Fixes the visibility of the element.
+ position: sticky;
+ top: 0;
+ }
+ tbody {
+ border-top: 0;
+ margin-top: -0.0625rem;
+ }
+ tr {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ padding: 0; // Resets padding to avooid awkward spacing.
+ }
+ th, td {
+ // Old syntax
+ -webkit-box-flex: 1;
+ // New syntax
+ -webkit-flex: 1 0 0%;
+ flex: 1 0 0%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+ @media screen and (max-width: #{$table-mobile-breakpoint}) {
+ table.#{$table-scrollable-name} {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ overflow: auto;
+ height: $table-scrollable-height;
+ border: 0;
+ padding: $table-row-padding;
+ padding-top: 0;
+ caption {
+ // Old syntax
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ // New syntax
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ }
+ thead, tbody {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 1;
+ max-width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ border: $table-border-style;
+ }
+ thead {
+ z-index: 999; // Fixes the visibility of the element.
+ position: sticky;
+ top: 0;
+ }
+ tbody {
+ border-top: 0;
+ margin-top: -0.0625rem;
+ }
+ tr {
+ // Old syntax
+ display: -webkit-box;
+ -webkit-box-flex: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ // New syntax
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-flex: 0 0 100%;
+ flex: 0 0 100%;
+ padding: 0; // Resets padding to avooid awkward spacing.
+ }
+ th, td {
+ // Old syntax
+ -webkit-box-flex: 1;
+ // New syntax
+ -webkit-flex: 1 0 0%;
+ flex: 1 0 0%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
// Striped tables.
@if $include-striped-table { // Striped tables can be turned on or off.
table.#{$table-striped-name} {