mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-13 17:33:59 +02:00
Code Issues Releases Wiki Activity

Table module updates and optimization

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-14 00:05:25 +02:00
parent 5d2d6a6422
commit 6101e47393
6 changed files with 44 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dist/mini-default.css vendored
View File

@@ -12,7 +12,7 @@ html, * {
body {
margin: 0;
color: #212121;
background: #fafafa; }
background: #f5f5f5; }
article, aside, section, figcaption, figure, main, details, menu {
display: block; }
@@ -101,7 +101,7 @@ pre {
kbd {
border-radius: 2px;
background: #212121;
color: #fafafa;
color: #f5f5f5;
padding: 2px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
@@ -525,20 +525,20 @@ header {
display: block;
height: 36px;
background: #263238;
color: #fafafa;
color: #f5f5f5;
padding: 2px 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden; }
header .logo {
color: #fafafa;
color: #f5f5f5;
font-size: 1.75em;
line-height: 1.2;
margin: 1px 6px 1px 1px; }
header button, header [type="button"], header a.button, header label.button, header .button {
background: #263238;
color: #fafafa;
color: #f5f5f5;
vertical-align: top;
margin: 2px 0 0;
box-shadow: none; }
@@ -564,7 +564,7 @@ nav {
footer {
display: block;
background: #263238;
color: #fafafa;
color: #f5f5f5;
margin: 18px 0 0;
padding: 22px 10px 12px;
font-size: 85%; }
@@ -614,7 +614,7 @@ textarea {
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
background: #fafafa;
background: #f5f5f5;
color: #212121;
border: 1px solid #b0bec5;
border-radius: 1px;
@@ -742,7 +742,7 @@ input[type="file"] {
content: '';
border: 1px solid #b0bec5;
border-radius: 1px;
background: #fafafa;
background: #f5f5f5;
color: #212121;
margin-left: -21.25px;
vertical-align: text-bottom; }
@@ -785,6 +785,9 @@ th, td {
border-left: 1px solid #bdbdbd;
border-top: 1px solid #bdbdbd; }
td {
background: #fafafa; }
th {
border-top: 0;
background: #eceff1; }
@@ -815,6 +818,7 @@ th:first-child, td:first-child {
display: block;
border: 1px solid #bdbdbd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
background: #fafafa;
margin-bottom: 10px; }
td {
@@ -845,7 +849,7 @@ th:first-child, td:first-child {
align-self: center;
position: relative;
width: 100%;
background: #f5f5f5;
background: #fafafa;
border: 1px solid #9e9e9e;
margin: 2px 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
@@ -1006,7 +1010,7 @@ th:first-child, td:first-child {
border-bottom-right-radius: 2px; } }
mark {
background: #0277bd;
color: #fafafa;
color: #f5f5f5;
font-size: 95%;
line-height: 1;
border-radius: 2px;
@@ -1141,7 +1145,7 @@ ul.breadcrumbs {
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary {
background: #1565c0;
color: #fafafa; }
color: #f5f5f5; }
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
[type="reset"].primary:hover,
[type="reset"].primary:active,
@@ -1151,7 +1155,7 @@ button.primary, [type="button"].primary, [type="submit"].primary,
button.secondary, [type="button"].secondary, [type="submit"].secondary,
[type="reset"].secondary, .button.secondary {
background: rgba(198, 40, 40, 0.85);
color: #fafafa; }
color: #f5f5f5; }
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
[type="reset"].secondary:hover,
[type="reset"].secondary:active,

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
docs/v2/DEVLOG.md
View File

@@ -445,3 +445,6 @@
- Removed the `playground` page as its purpose was fulfilled.
- Closed issue #31 for good.
- Squashed another major bug in the `make-card-alt-size` mixin, stemming from the use of the conditions and logical operators in that. The issue was thoroughly tested and resolved for all cases. `&&` was replaced with `and` in said condition combination.
- Tested some minor color issues with the page's background color and the cards' background color. Made some adjustments, uncertain if I will keep them.
- Added `$table-body-back-color`, `$table-body-fore-color` and `$table-head-fore-color` in addition to the existing `$table-head-back-color` and optimized them accordingly.
- *TODO* Some minor changes to `.button-group` might be needed (button shadows overlapping and existing, the extra border etc.).

2
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161113 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css"> -->
<!-- Local stylesheet -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>

9
src/flavors/mini-default.scss
View File

@@ -10,7 +10,7 @@
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
$back-color: #fafafa; // Body background color
$back-color: #f5f5f5; // Body background color
$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements
$base-font-size: 1em; // Default font sizing for all elements
$base-line-height: 1.5; // Default line height for all elements.
@@ -275,6 +275,9 @@ $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-head-fore-color: $fore-color; // Tex color for <th>
$table-body-back-color: #fafafa; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td>
$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
@@ -285,10 +288,10 @@ $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mob
// in order for their mobile headers to display properly.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #f5f5f5; // Background color for cards
$card-back-color: #fafafa; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards
$card-box-shadow: // Box shadow for cards
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);

18
src/mini/_table.scss
View File

@@ -28,9 +28,22 @@ th, td {
border-left: $table-border-style;
border-top: $table-border-style;
}
td {
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
}
@if $table-body-fore-color != $fore-color {
color: $table-body-fore-color;
}
}
th {
border-top: 0;
background: $table-head-back-color;
@if $table-head-back-color != $back-color {
background: $table-head-back-color;
}
@if $table-head-fore-color != $fore-color {
color: $table-head-fore-color;
}
}
th:first-child, td:first-child {
border-left: 0;
@@ -67,6 +80,9 @@ th:first-child, td:first-child {
@if $table-box-shadow !=0 {
box-shadow: $table-box-shadow;
}
@if $table-body-back-color != $back-color {
background: $table-body-back-color;
}
margin-bottom: $table-mobile-card-spacing;
}
td {