mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-13 16:59:39 +01:00
Responsive tables
This commit is contained in:
Angelos Chalaris
parent
2edf1f3f32
commit
c9d597fac2
@ -158,3 +158,7 @@
|
||||
- Added grid demo on live page.
|
||||
- Deployed live demo.
|
||||
- Added demo docs for progress bars.
|
||||
- Created `mini-core/table` to build the responsive table module.
|
||||
- Reorganized variables and imports in order of importance for core and default flavor.
|
||||
- Added table styling and responsiveness, made customizable etc.
|
||||
- Added demo table to page, tested.
|
||||
|
||||
@ -202,7 +202,7 @@
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div>
|
||||
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p>
|
||||
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
|
||||
<h3>Progress bars</h3>
|
||||
<p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
|
||||
<br>
|
||||
@ -213,6 +213,46 @@
|
||||
<p>Nano progress:</p>
|
||||
<progress class="nano" value="35" max="100"></progress>
|
||||
<br>
|
||||
<h3>Tables</h3>
|
||||
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
|
||||
<table>
|
||||
<caption>Hacker List</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Email</th>
|
||||
<th>Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">John</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Email">johnsmith@mail.com</td>
|
||||
<td data-label="Handle">SmithereensJohn</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Lisa</td>
|
||||
<td data-label="Surname">Cody</td>
|
||||
<td data-label="Email">codyl@mail.com</td>
|
||||
<td data-label="Handle">Codyl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Max</td>
|
||||
<td data-label="Surname">Roberts</td>
|
||||
<td data-label="Email">terminus@mail.com</td>
|
||||
<td data-label="Handle">T3rm1nu5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Leeks</td>
|
||||
<td data-label="Email">leekt@mail.com</td>
|
||||
<td data-label="Handle">Leekt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -117,41 +117,6 @@ a {
|
||||
a:hover, a:focus, a:active {
|
||||
opacity: 0.75; }
|
||||
|
||||
mark {
|
||||
background: #0277bd;
|
||||
color: #fafafa;
|
||||
font-size: 95%;
|
||||
line-height: 1;
|
||||
padding: 1px; }
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
margin: 1px auto;
|
||||
background: #f5f5f5;
|
||||
color: #01579b; }
|
||||
progress::-webkit-progress-value {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress::-webkit-progress-bar {
|
||||
background: #f5f5f5; }
|
||||
progress::-moz-progress-bar {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress[value="100"]::-webkit-progress-value {
|
||||
border-radius: 1px; }
|
||||
progress[value="100"]::-moz-progress-bar {
|
||||
border-radius: 1px; }
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 0 10px; }
|
||||
@ -621,6 +586,105 @@ progress {
|
||||
|
||||
.col-lg-offset-11 {
|
||||
margin-left: 91.66667%; } }
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
margin: 0 auto;
|
||||
table-layout: fixed; }
|
||||
|
||||
caption {
|
||||
font-size: 1.5em;
|
||||
margin: 6px 0 12px; }
|
||||
|
||||
tr {
|
||||
padding: 6px; }
|
||||
|
||||
th, td {
|
||||
padding: 10px;
|
||||
border-left: 1px solid #bdbdbd;
|
||||
border-top: 1px solid #bdbdbd; }
|
||||
|
||||
th {
|
||||
border-top: 0;
|
||||
background: #eceff1; }
|
||||
|
||||
th:first-child, td:first-child {
|
||||
border-left: 0; }
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%; }
|
||||
|
||||
thead {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%); }
|
||||
|
||||
tr {
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
display: block;
|
||||
text-align: right; }
|
||||
|
||||
td:before {
|
||||
content: attr(data-label);
|
||||
float: left;
|
||||
font-weight: 700; }
|
||||
|
||||
td:last-child {
|
||||
border-bottom: 0; } }
|
||||
mark {
|
||||
background: #0277bd;
|
||||
color: #fafafa;
|
||||
font-size: 95%;
|
||||
line-height: 1;
|
||||
padding: 1px; }
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
margin: 1px auto;
|
||||
background: #f5f5f5;
|
||||
color: #01579b; }
|
||||
progress::-webkit-progress-value {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress::-webkit-progress-bar {
|
||||
background: #f5f5f5; }
|
||||
progress::-moz-progress-bar {
|
||||
background: #01579b;
|
||||
border-top-left-radius: 1px;
|
||||
border-bottom-left-radius: 1px; }
|
||||
progress[value="100"]::-webkit-progress-value {
|
||||
border-radius: 1px; }
|
||||
progress[value="100"]::-moz-progress-bar {
|
||||
border-radius: 1px; }
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
|
||||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -104,6 +104,38 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
|
||||
// color, as defined in $link-fore-color.
|
||||
// [9] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||
$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
||||
$grid-small-breakpoint: 768px; // Small screen breakpoint for grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 1024px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1200px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 0 12px; // Margin for <caption>
|
||||
$table-row-padding: 6px; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #eceff1; // Background color for <th>
|
||||
$table-mobile-breakpoint: 768px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
||||
$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
|
||||
// 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.
|
||||
// Variables for contextual background elements
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: $back-color; // Text color for <mark>
|
||||
@ -139,21 +171,6 @@ $progress-style1-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1
|
||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||
// Variables for grid elements
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||
$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
||||
$grid-small-breakpoint: 768px; // Small screen breakpoint for grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 1024px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1200px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Enable base
|
||||
@import '../../scss/v2/core';
|
||||
// Use mixins for contextual background elements
|
||||
|
||||
@ -339,9 +339,10 @@ a{
|
||||
// SECTION: External files.
|
||||
//===================================================
|
||||
// You can comment out modules you do not want to use.
|
||||
@import 'mini-core/grid';
|
||||
@import 'mini-core/table';
|
||||
@import 'mini-core/contextual';
|
||||
@import 'mini-core/progress';
|
||||
@import 'mini-core/grid';
|
||||
|
||||
// TODO: Move to forms and buttons respectively
|
||||
|
||||
|
||||
71
scss/v2/mini-core/_table.scss
Normal file
71
scss/v2/mini-core/_table.scss
Normal file
@ -0,0 +1,71 @@
|
||||
// Definitions for the responsive table component.
|
||||
// The tables use the common table elements and syntax.
|
||||
// Desktop view.
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: $table-border-style;
|
||||
border-radius: $table-border-radius;
|
||||
margin: $table-margin;
|
||||
table-layout: fixed;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
margin: $table-caption-margin;
|
||||
}
|
||||
tr {
|
||||
padding: $table-row-padding;
|
||||
}
|
||||
th, td {
|
||||
padding: $table-column-padding;
|
||||
border-left: $table-border-style;
|
||||
border-top: $table-border-style;
|
||||
}
|
||||
th {
|
||||
border-top: 0;
|
||||
background: $table-head-back-color;
|
||||
}
|
||||
th:first-child, td:first-child{
|
||||
border-left: 0;
|
||||
}
|
||||
// Mobile view.
|
||||
@media only screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
thead {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
// Accessibility (element is not visible, but screen readers read it normally)
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
}
|
||||
tr {
|
||||
border: $table-border-style;
|
||||
border-radius: $table-border-radius;
|
||||
display: block;
|
||||
margin-bottom: $table-mobile-card-spacing;
|
||||
}
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: $table-border-style;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user