beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Cards and tables finished

Browse source
This commit is contained in:
Angeliki Daskalakis 2017-01-01 14:23:08 +02:00
parent 0a80d8a9ac
commit d852fb08c4
4 changed files with 63 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
dist/mini-sucroa-test.html vendored
View file

@ -281,13 +281,20 @@
</div>
</div>
</div>
<div class="row">
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div></div>
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section light"><h3>Dark section</h3></div><div class="section lighter"><h3>Darker section</h3></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
</div>
<div class="row">
<div class="col-sm">
<div>
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><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>
<table class="striped">
<caption>Hacker List</caption>
<thead>
<tr>

88
dist/mini-sucroa.css vendored
View file

@ -885,24 +885,25 @@ button.large, [type="button"].large, [type="submit"].large,
table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #bdbdbd;
border: 1px solid #a9a2ba;
border-radius: 2px;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
table caption {
font-size: 1.5em;
margin: 6px 8px 12px; }
margin: 6px 10px 12px; }
table tr {
padding: 8px; }
padding: 10x; }
table th, table td {
padding: 10px;
border-left: 1px solid #bdbdbd;
border-top: 1px solid #bdbdbd; }
border-left: 1px solid #a9a2ba;
border-top: 1px solid #a9a2ba; }
table td {
background: #fafafa; }
background: #f2edff; }
table thead th {
border-top: 0; }
table th {
background: #e0e0e0; }
background: #d3cae8; }
table th:first-child, table td:first-child {
border-left: 0; }
@ -925,14 +926,15 @@ table {
clip-path: inset(100%); }
table:not(.preset) tr {
display: block;
border: 1px solid #bdbdbd;
border: 1px solid #a9a2ba;
border-radius: 2px;
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; }
background: #f2edff;
margin-bottom: 12px; }
table:not(.preset) td {
display: block;
border: 0;
border-bottom: 1px solid #bdbdbd;
border-bottom: 1px solid #a9a2ba;
text-align: right; }
table:not(.preset) td:before {
content: attr(data-label);
@ -952,7 +954,7 @@ table {
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: 8px; }
padding: 10x; }
table.horizontal caption {
-webkit-box-flex: 1;
max-width: 100%;
@ -989,7 +991,7 @@ table {
flex: 1 0 auto; }
table.horizontal th, table.horizontal td {
width: 100%;
border: 1px solid #bdbdbd; }
border: 1px solid #a9a2ba; }
table.horizontal th + th, table.horizontal th + td, table.horizontal td + th, table.horizontal td + td {
border-top: 0; }
table.horizontal th {
@ -1046,7 +1048,7 @@ table {
flex: 1 0 auto; }
table.horizontal.preset th, table.horizontal.preset td {
width: 100%;
border: 1px solid #bdbdbd; }
border: 1px solid #a9a2ba; }
table.horizontal.preset th + th, table.horizontal.preset th + td, table.horizontal.preset td + th, table.horizontal.preset td + td {
border-top: 0; }
table.horizontal.preset th {
@ -1054,11 +1056,11 @@ table {
table.horizontal.preset tbody tr:first-child > td {
padding-left: 20px; } }
table.striped tr:nth-of-type(2n) > td {
background: #eeeeee; }
background: #ece4ff; }
@media (max-width: 767px) {
table.striped:not(.preset) tr:nth-of-type(2n) {
background: #eeeeee; } }
background: #ece4ff; } }
/*
Definitions for cards and containers.
*/
@ -1078,14 +1080,15 @@ table.striped tr:nth-of-type(2n) > td {
position: relative;
width: 100%;
background: #f2d7d8;
border: 1px solid #9e9e9e;
margin: 2px 10px 20px;
border: 1px solid #9b898a;
border-radius: 2px;
margin: 4px 10px 22px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
.card > .section {
box-sizing: border-box;
margin: 0;
border-bottom: 1px solid #bdbdbd;
padding: 6px 8px 6px;
border-bottom: 1px solid #c7b0b1;
padding: 8px 10px;
width: 100%; }
.card > .section.media {
height: 200px;
@ -1115,21 +1118,21 @@ table.striped tr:nth-of-type(2n) > td {
.card.inverse {
background: #211423;
color: #fafafa;
border: 1px solid #424242; }
color: #fffddc;
border: 1px solid #190f1a; }
.card.inverse > .section {
border-bottom: 1px solid #616161; }
border-bottom: 1px solid #493e4b; }
.card.inverse > .section:last-child {
border-bottom: 0; }
.card > .section.dark {
background: #e0e0e0; }
.card > .section.light {
background: #f6e5e6; }
.card > .section.darker {
background: #bdbdbd; }
.card > .section.lighter {
background: #fbf4f4; }
.card > .section.double-padded {
padding: 10px 12px 10px; }
padding: 12px 14px; }
/*
Definitions for tabs/horizontal accordions.
@ -1255,28 +1258,6 @@ mark {
mark.inline-block {
display: inline-block; }
@-webkit-keyframes alert-anim {
0% {
-webkit-transform: scale(1); }
45% {
-webkit-transform: scale(1); }
50% {
-webkit-transform: scale(1.005); }
55% {
-webkit-transform: scale(1); }
100% {
-webkit-transform: scale(1); } }
@keyframes alert-anim {
0% {
transform: scale(1); }
45% {
transform: scale(1); }
50% {
transform: scale(1.005); }
55% {
transform: scale(1); }
100% {
transform: scale(1); } }
.alert {
display: block;
background: #eeeeee;
@ -1284,13 +1265,6 @@ mark {
margin: 1px 10px;
padding: 12px 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26); }
.alert.animated {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite; }
/*
Custom contextual background elements and alerts.

2
dist/mini-sucroa.min.css vendored
View file

File diff suppressed because one or more lines are too long

46
src/flavors/mini-sucroa.scss
View file

@ -295,21 +295,21 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabl
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// Variables for responsive tables
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children
$table-border-style: 1px solid #a9a2ba; // Border style for <table> and children
$table-border-radius: 2px; // Border radius for <table> and children
$table-margin: 0 auto; // Margin for <table>
$table-box-shadow: // Box shadow for <table>
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$table-caption-font-size: 1.5em; // Font size for <caption>
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
$table-row-padding: 8px; // Padding for <tr> - both views
$table-caption-margin: 6px 10px 12px; // Margin for <caption>
$table-row-padding: 10x; // Padding for <tr> - both views
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
$table-head-back-color: #e0e0e0; // Background color for <th>
$table-head-back-color: #d3cae8; // 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-back-color: #f2edff; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
$table-mobile-card-spacing: 12px; // 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
@ -318,7 +318,7 @@ $table-horizontal-name: 'horizontal'; // Class name for <table> horizo
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: // Alternate background color for <td> in
#eeeeee; // striped <table>
#ece4ff; // striped <table>
// 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.
@ -326,14 +326,14 @@ $table-striped-alt-body-back-color: // Alternate background color for
$card-name: 'card'; // Class name for cards
$card-back-color: #f2d7d8; // 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-margin: 2px 10px 20px; // Margin for cards
$card-border-style: 1px solid #9b898a; // Border style for cards
$card-border-radius: 2px; // Border radius for cards
$card-margin: 4px 10px 22px; // 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);
$card-section-name: 'section'; // Class name for card sections
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
$card-section-padding: 6px 8px 6px; // Padding for card sections
$card-section-border-style: 1px solid #c7b0b1; // Border style for card sections
$card-section-padding: 8px 10px; // 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
$card-normal-width: 320px; // Width for normal cards
@ -345,19 +345,19 @@ $card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color for card style 1
$card-style1-fore-color: #fafafa; // Text color for card style 1
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-fore-color: #fffddc; // Text color for card style 1
$card-style1-border-style: 1px solid #190f1a; // Border style for card style 1
$card-style1-border-radius: 2px; // Border radius for card style 1
$card-style1-section-border-style: // Border style for card style 1 sections
1px solid #616161;
$card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color:#e0e0e0; // Background color for card section style 1
1px solid #493e4b;
$card-section-style1-name: 'light'; // Class name for card section style 1
$card-section-style1-back-color:#f6e5e6; // Background color for card section style 1
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
$card-section-style2-name: 'darker'; // Class name for card section style 2
$card-section-style2-back-color:#bdbdbd; // Background color for card section style 2
$card-section-style2-name: 'lighter'; // Class name for card section style 2
$card-section-style2-back-color:#fbf4f4; // Background color for card section style 2
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
$card-section-padding1-padding: 12px 14px; // Padding for card section padding style 1
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Variables for tabs
@ -414,7 +414,7 @@ $alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 1px 10px; // Margin for alerts
$alert-box-shadow: // Box shadow for alerts
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
$alert-include-animated: true; // Should animated alerts be included?
$alert-include-animated: false; // Should animated alerts be included?
// (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1