mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-29 18:47:51 +01:00
Header styling fixes and additions
Logo and fixed alignment for elements.
This commit is contained in:
Angelos Chalaris
parent
4a8d172ff6
commit
76a7bd5529
@ -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.
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -5,10 +5,12 @@
|
||||
$header-height: 3.1875rem !default; // Height of the header element.
|
||||
$header-back-color: #f8f8f8 !default; // Background color for the header element.
|
||||
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
|
||||
$header-fore-color: #444 !default; // Text color for the header element.
|
||||
$header-fore-color: #444 !default; // Text color for the header element.
|
||||
$header-border-color: #ddd !default; // Border color for the header element.
|
||||
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
|
||||
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
|
||||
$header-logo-name: 'logo' !default; // Class name for the header logo element.
|
||||
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
|
||||
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$header-fore-color-var: '--header-fore-color' !default;
|
||||
@ -43,38 +45,24 @@ header {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
// Header logo styling.
|
||||
// .#{$header-logo-name} {
|
||||
// @if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs.
|
||||
// color: $header-fore-color; // Only toggle off if you know what you're doing.
|
||||
// }
|
||||
// @if $header-logo-font-size != $base-font-size {
|
||||
// font-size: $header-logo-font-size;
|
||||
// }
|
||||
// @if $header-logo-line-height != $base-line-height {
|
||||
// line-height: $header-logo-line-height;
|
||||
// }
|
||||
// @if $header-logo-margin != 0 {
|
||||
// margin: $header-logo-margin;
|
||||
// }
|
||||
// @if $header-logo-padding != 0 {
|
||||
// padding: $header-logo-padding;
|
||||
// }
|
||||
// @if $apply-link-hover-fade {
|
||||
// transition: opacity 0.3s ;
|
||||
// }
|
||||
// }
|
||||
.#{$header-logo-name} {
|
||||
color: var(#{$header-fore-color-var});
|
||||
font-size: $header-logo-font-size;
|
||||
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
|
||||
text-decoration: none;
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
button, [type="button"], .#{$button-class-name}, [role="button"] {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
|
||||
height: calc(100% + var(#{$universal-padding-var}) / 2); // Fill header.
|
||||
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
|
||||
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
|
||||
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
|
||||
text-align: center;
|
||||
color: var(#{$header-fore-color-var});
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
vertical-align: top; // Alignemt, really important to make this work well.
|
||||
margin: 0;
|
||||
@if $_header-links-uppercase {
|
||||
text-transform: uppercase;
|
||||
@ -83,11 +71,6 @@ header {
|
||||
background: var(#{$header-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
// @if $apply-link-underline { // Override for links if underline is enabled.
|
||||
// .#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// TODO: Add footer definitions here.
|
||||
// Definitions for sticky headers and footers.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user