mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-06 21:27:03 +02:00
Code Issues Releases Wiki Activity

feat: improved table markup & CSS cleanup

Browse Source
This commit is contained in:
Jonas Kuske
2019-06-10 15:22:06 +02:00
parent 6434c142d2
commit 4db53a2790
2 changed files with 9 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/style.css
View File

@@ -29,34 +29,24 @@ html {
.version-select__options > label { .version-select__options > label {
white-space: pre; white-space: pre;
} }
.version-select__options > label:first-child { .version-select__options > label:not(:last-of-type) {
margin-right: 1rem; margin-right: 1rem;
} }
.version-select__options__additional { .version-select__options__additional,
display: flex;
flex-direction: column;
margin: 1rem 0;
}
.version-select__options__additional > *:not(summary) { .version-select__options__additional > *:not(summary) {
display: block; display: block;
margin-top: 1rem; margin: 1rem 0;
} }
.version-select__options__additional summary { .version-select__options__additional summary {
outline: none;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
} }
.version-select__options__additional summary:focus {
outline: none;
}
.version-select__options__additional summary:hover span, .version-select__options__additional summary:hover span,
.version-select__options__additional summary:focus span { .version-select__options__additional summary:focus span {
text-decoration: underline; text-decoration: underline;
} }
/* Fixed layout so columns don't jump when content changes */
.version-select__info {
table-layout: fixed;
}
.version-select__info caption { .version-select__info caption {
text-align: left; text-align: left;
} }
@@ -73,16 +63,14 @@ body > footer {
align-items: flex-end; align-items: flex-end;
} }
/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
/* Use proper Emoji instead of plain Unicode chars */
.emoji { .emoji {
/* Use proper Emoji instead of plain Unicode chars */
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system, font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,
BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif; Helvetica Neue, sans-serif;

8
docs/versionpicker.html
View File

@@ -60,15 +60,15 @@
</caption> </caption>
<tbody> <tbody>
<tr> <tr>
<th>File</th> <th scope="row">File</th>
<td>{{ selectedVersion.fileName }}</td> <td>{{ selectedVersion.fileName }}</td>
</tr> </tr>
<tr> <tr>
<th>Size (min+gzip)</th> <th scope="row">Size (min+gzip)</th>
<td>{{ selectedVersion.fileSize }}KB</td> <td>{{ selectedVersion.fileSize }}KB</td>
</tr> </tr>
<tr> <tr>
<th>Theme</th> <th scope="row">Theme</th>
<td> <td>
<template v-if="versionOptions.isStandalone"> <template v-if="versionOptions.isStandalone">
<span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span> <span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
@@ -101,7 +101,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Browser support</th> <th scope="row">Browser support</th>
<td> <td>
<template v-if="versionOptions.isLegacy"> <template v-if="versionOptions.isLegacy">
All browsers (including Internet Explorer) All browsers (including Internet Explorer)