Skip to content

Commit

Permalink
Style to hide a table column in mobile mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilafian
dpilafian committed Jun 18, 2024
1 parent 2c5412a commit 5c817e8
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 24 deletions.
9 changes: 7 additions & 2 deletions src/css/layouts/color-blocks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,12 @@ body >header {
main {
display: flex;
min-height: 300px;
padding-bottom: 10px;
margin: 0px -5px;
}
main >div {
margin-bottom: 10px;
}
main >div:nth-child(1) {
flex: 0 0 65%; /* wide 1st column */
}
Expand All @@ -58,15 +62,15 @@ main >div:first-child:last-child {
main >div >section {
border-width: 2px;
border-style: solid;
padding: 10px;
padding: 10px 10px 20px 10px;
margin: 0px 5px 10px 5px;
}
main >div >section h2 {
position: relative;
font-size: 1.2rem;
color: white;
padding: 3px 8px;
margin: -10px -10px 10px -10px;
margin: -10px -10px 15px -10px;
}
main >div >section h2 i.font-icon {
position: absolute;
Expand Down Expand Up @@ -101,6 +105,7 @@ main >div >section >fieldset {
margin-bottom: 1em;
}
main >div >section >fieldset >legend {
font-weight: normal;
border: 1px solid;
border-color: inherit;
border-radius: 2px;
Expand Down
6 changes: 6 additions & 0 deletions src/css/layouts/color-blocks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,12 @@ <h2>Block header #5 (h2)</h2>
<span>Email:<i data-icon=envelope data-href=.></i></span>
<input type=email placeholder="Enter your email address">
</label>
<fieldset>
<legend>Colors:</legend>
<label><input type=checkbox value=red checked>Red</label>
<label><input type=checkbox value=blue disabled>Blue</label>
<label><input type=checkbox value=green>Green</label>
</fieldset>
</fieldset>
</section>

Expand Down
48 changes: 34 additions & 14 deletions src/css/reset.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ body, h1, h2, h3, h4, h5, h6, p, figure, nav ul, nav ul li { padding: 0px; margi
h1, h2, h3, h4, h5, h6 { letter-spacing: 0.04em; margin-bottom: 0.2em; }
section, header, figure { margin-bottom: 20px; }
p, ul, ol { margin-bottom: 0.9em; }
section, figure, p, ul, ol {
&:last-child {
margin-bottom: 0px;
}
}
ul, ol { margin-top: 2px; }
ul li, ol li { font-size: 0.9em; padding-left: 1.2em; text-indent: -1.3em; }
nav ul { list-style-type: none; }
Expand Down Expand Up @@ -76,7 +81,14 @@ a figure:hover figcaption { color: black; }
.plain a img, a.plain img, a img.plain { opacity: 1 }

// Forms and input controls
form, fieldset, label { display: block; max-width: 25em; margin-bottom: 1em; }
form, fieldset, label {
display: block;
max-width: 25em;
margin-bottom: 1em;
&:last-child {
margin-bottom: 0px;
}
}
label >span:first-child { display: block; }
input, textarea, select, fieldset >aside { width: 100%; max-width: 25em; font-size: 1.1em; }
input, textarea { border: 1px solid silver; border-radius: 5px; padding: 0.3em; }
Expand All @@ -89,9 +101,10 @@ input[type=range] { appearance: none; height: 1.2em; padding: 0px; cursor: grab;
input[type=range]:active { cursor: grabbing; }
button, input[type=checkbox], input[type=radio], input[type=file], select { cursor: pointer; }
button, input, select, optgroup, option, textarea { transition: all 500ms; }
*:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
*:disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; }
input:out-of-range { background-color: pink; }
form nav, fieldset nav { text-align: right; margin-bottom: 1em; }
form nav:last-child, fieldset nav:last-child { margin-bottom: 0px; }
form nav button, fieldset nav button { margin-left: 0.5em; }

// Form colors
Expand Down Expand Up @@ -147,20 +160,26 @@ label:has(select) {
// <lable><span>Name:</span><input></label>
// </fieldset>
fieldset {
border: none;
padding: 0px;
&:not(:has(>label>input[type=checkbox],>label>input[type=radio])) {
border: 1px solid silver;
border-radius: 5px;
padding: 0.8em 1.0em 0.0em 1.0em;
border: 1px solid silver;
border-radius: 5px;
padding: 0.8em 1.0em;
&:has(>label>input[type=checkbox],>label>input[type=radio]) {
border: none;
padding: 0px;
>legend {
font-size: 1.1em;
font-weight: bold;
border: 1px solid silver;
border-radius: 1000px;
padding: 0.3em 1.0em;
font-size: 1em;
font-weight: normal;
border: none;
padding: 0px;
}
}
>legend {
font-size: 1.1em;
font-weight: bold;
border: 1px solid silver;
border-radius: 1000px;
padding: 0.3em 1.0em;
}
}

// Tables
Expand All @@ -171,7 +190,7 @@ table thead tr { border-bottom-width: 3px; }
table tbody tr:hover { background-color: aliceblue; }
table tbody tr th[colspan] { font-size: 0.8rem; font-weight: normal; text-align: center; text-transform: uppercase; color: white; background-color: steelblue; padding: 3px 0px; }
table tbody tr td { font-size: 0.9rem; vertical-align: top; text-align: center; }
table tbody tr td.num { text-align: right; }
table tbody tr td.num { text-align: right; } //DEPRECATED
table th, table td { padding: 6px 15px; }
table.data-box { background-color: aliceblue; border: 3px solid gainsboro; }
table.data-box tr { border: none; }
Expand All @@ -184,6 +203,7 @@ table.data-box tbody tr th[colspan] { background-color: darkgray; }
.plain-tables table tbody td { text-align: left; }
.plain-tables table tbody tr:hover { background-color: transparent; }
@media (max-width: 667px) { table th, table td { padding: 6px 6px; } }
@import "reset/tables";

// Flex columns
.flex-columns { display: flex; margin-bottom: 20px; }
Expand Down
2 changes: 1 addition & 1 deletion src/css/reset/perfect.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ form.perfect fieldset { border: none; padding: 0px; }
form.perfect fieldset legend { font-size: 1.0em; }
form.perfect fieldset label { display: flex; align-items: center; padding-left: 1.2em; margin-bottom: 0.1em; }
form.perfect fieldset label input { width: auto; margin-right: 0.3em; }
form.perfect nav { display: flex; justify-content: space-between; align-items: flex-end; }
form.perfect nav { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
form.perfect nav button { font-size: 1.1rem; font-weight: bold; color: white; background-color: dimgray; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; cursor: pointer; transition: all 500ms; }
form.perfect nav button:hover:not(:disabled), form.perfect nav button:focus { background-color: black; }
form.perfect nav small { font-size: 0.6rem; color: gray; }
Expand Down
47 changes: 47 additions & 0 deletions src/css/reset/tables.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Tables

@import "reset/utility-box";

// data-code-column
table {
&[data-code-column*="1"] tbody tr td:nth-child(1),
&[data-code-column*="2"] tbody tr td:nth-child(2),
&[data-code-column*="3"] tbody tr td:nth-child(3),
&[data-code-column*="4"] tbody tr td:nth-child(4),
&[data-code-column*="5"] tbody tr td:nth-child(5) {
.MonospaceText();
}
}

// data-number-column
table {
&[data-number-column*="1"] tbody tr td:nth-child(1),
&[data-number-column*="2"] tbody tr td:nth-child(2),
&[data-number-column*="3"] tbody tr td:nth-child(3),
&[data-number-column*="4"] tbody tr td:nth-child(4),
&[data-number-column*="5"] tbody tr td:nth-child(5) {
text-align: right;
}
}

// data-hide-column
table {
&[data-hide-column] thead tr th, tbody tr td { transition: all 1s };
.MobileMode({
&[data-hide-column*="1"] tbody tr td:nth-child(1),
&[data-hide-column*="1"] thead tr th:nth-child(1),
&[data-hide-column*="2"] tbody tr td:nth-child(2),
&[data-hide-column*="2"] thead tr th:nth-child(2),
&[data-hide-column*="3"] tbody tr td:nth-child(3),
&[data-hide-column*="3"] thead tr th:nth-child(3),
&[data-hide-column*="4"] tbody tr td:nth-child(4),
&[data-hide-column*="4"] thead tr th:nth-child(4),
&[data-hide-column*="5"] tbody tr td:nth-child(5),
&[data-hide-column*="5"] thead tr th:nth-child(5) {
max-width: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
});
}
6 changes: 6 additions & 0 deletions src/css/reset/utility-box.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,19 @@
@symbolAngleRight: "\276F"; //character: ❯
@symbolArrowDown: "\21E9"; //character: ⇩
@symbolArrowUp: "\21E7"; //character: ⇧
@symbolBallotXMark: "\2718"; //character: ✘
@symbolCheckmark: "\2714"; //character: ✔
@symbolEmDash: "\2014"; //character: —
@symbolTriangleDown: "\25BC"; //character: ▼
@symbolTriangleUp: "\25B2"; //character: ▲

// Tools

.MonospaceText() {
font-family: menlo, consolas, monospace;
font-weight: 700;
}

.Bullseye() {
display: flex;
justify-content: center;
Expand Down
14 changes: 7 additions & 7 deletions src/css/spec-css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,16 +180,16 @@ <h3>3/3</h3>
<section>
<h2>Tables</h2>

<table>
<table data-number-column=3>
<caption>Regular Table</caption>
<thead>
<tr><th>Tree</th><th>Leaves</th><th>List Price</th></tr>
</thead>
<tbody>
<tr><td>Redbud</td> <td>Deciduous</td><td class=num>139.00</td></tr>
<tr><td>Pine</td> <td>Evergreen</td><td class=num>12.00</td></tr>
<tr><td>Redbud</td> <td>Deciduous</td><td>139.00</td></tr>
<tr><td>Pine</td> <td>Evergreen</td><td>12.01</td></tr>
<tr><th colspan=3>Discontinued</th></tr>
<tr><td>Potato Tree</td><td>Deciduous</td><td class=num>24.99</td></tr>
<tr><td>Potato Tree</td><td>Deciduous</td><td>24.99</td></tr>
</tbody>
</table>

Expand All @@ -199,10 +199,10 @@ <h2>Tables</h2>
<tr><th>Tree</th><th>Leaves</th><th>List Price</th></tr>
</thead>
<tbody>
<tr><td>Redbud</td> <td>Deciduous</td><td class=num>139.00</td></tr>
<tr><td>Pine</td> <td>Evergreen</td><td class=num>12.00</td></tr>
<tr><td>Redbud</td> <td>Deciduous</td><td>139.00</td></tr>
<tr><td>Pine</td> <td>Evergreen</td><td>12.00</td></tr>
<tr><th colspan=3>Discontinued</th></tr>
<tr><td>Potato Tree</td><td>Deciduous</td><td class=num>24.99</td></tr>
<tr><td>Potato Tree</td><td>Deciduous</td><td>24.99</td></tr>
</tbody>
</table>

Expand Down

0 comments on commit 5c817e8

Please sign in to comment.