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

Header styling fixes and additions

Browse Source 
Logo and fixed alignment for elements.
This commit is contained in:
Angelos Chalaris
2017-11-08 18:36:25 +02:00
parent 58f505e8ba
commit bdfe498b1b
4 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/v3/DEVLOG.md
View File

@@ -113,3 +113,10 @@
- Removed `header` `display` fix as it was targeting IE 9-.
- Implemented `header` and links/buttons in it, `logo` is still missing.
- Implemented `.sticky` for all `navigation` elements that needed it.
## 20171108
- Started debugging the extremely problematic `header` `.button`s. Figured out that `line-height: 2.4375` can fix the issue, no clue why that is, but I am going to use it for a little while.
- Realized that `header` button-like elements don't need that high a specificity, provided that they should always appear after the definitions of `input_control`, thus lowered the specificity. This will trim off a couple of bytes, but it might eventually cause problems. Remember this decision should that happen and blame the **hugging cat**.
- Figured out the `line-height` thing for the afforementioned elements.
- Styled `.logo` in `header`. The styling is now far simpler and easier to use.

9
docs/v3_dev/src/App.js
View File

@@ -4,13 +4,20 @@ class App extends Component {
render() {
return (
<div className="App">
<header><label htmlFor="doc-drawer-checkbox" className="button drawer-toggle hide"></label></header>
<header>
<span href="#" className="logo">mini.css</span>
<button id='button'>Docs</button>
<a class='button' href='#'>Get started</a>
<input class='button' type='submit' value='github' />
{/*<label htmlFor="doc-drawer-checkbox" className="button drawer-toggle hide"></label>*/}
</header>
<div className="row" id="doc-wrapper">
<input type="checkbox" id="doc-drawer-checkbox" />
<nav className="drawer col-md-4 col-lg-3" id="doc-drawer">
<label htmlFor="doc-drawer-checkbox" className="button drawer-toggle close"></label>
</nav>
<main className="col-sm-12 col-md-8 col-lg-9" id="doc-content">
<button>Home</button><a href="#" class="button">News</a>
</main>
</div>
</div>

37
docs/v3_dev/src/index.css
View File

@@ -791,29 +791,46 @@ header.row {
box-sizing: content-box;
}
header button, header [type="button"],
header a.button, header label.button, header .button,
header a[role="button"], header label[role="button"], header [role="button"] {
header .logo {
color: var(--header-fore-color);
font-size: 1.75rem;
padding: var(--universal-padding) calc(2 * var(--universal-padding));
text-decoration: none;
}
header button, header [type="button"], header .button, header [role="button"] {
box-sizing: border-box;
position: relative;
top: calc(0rem - var(--universal-padding) / 4);
height: calc(100% + var(--universal-padding) / 2);
height: calc(3.1875rem + var(--universal-padding) / 2);
background: var(--header-back-color);
line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
text-align: center;
color: var(--header-fore-color);
border: 0;
border-radius: 0;
vertical-align: top;
margin: 0;
text-transform: uppercase;
}
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus,
header a.button:hover,
header a.button:focus, header label.button:hover, header label.button:focus, header .button:hover, header .button:focus,
header a[role="button"]:hover,
header a[role="button"]:focus, header label[role="button"]:hover, header label[role="button"]:focus, header [role="button"]:hover, header [role="button"]:focus {
header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
background: var(--header-hover-back-color);
}
header.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
top: 0;
}
footer.sticky {
position: -webkit-sticky;
position: sticky;
z-index: 1101;
bottom: 0;
}
:not(.doc) {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}