Nav styling
Styling for sidebar navigation
This commit is contained in:
Angelos Chalaris
parent
bdfe498b1b
commit
9ea6a68988
5 changed files with 128 additions and 115 deletions
|
|
@ -120,3 +120,5 @@
|
|||
- 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.
|
||||
- Removed `display:block` fix from `nav` as it was targeting IE 9-.
|
||||
- Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
|
||||
|
|
|
|||
|
|
@ -13,9 +13,18 @@ class App extends Component {
|
|||
</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>
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -774,6 +774,10 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
|
|||
--header-hover-back-color: #f0f0f0;
|
||||
--header-fore-color: #444;
|
||||
--header-border-color: #ddd;
|
||||
--nav-back-color: #f8f8f8;
|
||||
--nav-hover-back-color: #f0f0f0;
|
||||
--nav-fore-color: #444;
|
||||
--nav-border-color: #ddd;
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -817,6 +821,61 @@ header button:hover, header button:focus, header [type="button"]:hover, header [
|
|||
background: var(--header-hover-back-color);
|
||||
}
|
||||
|
||||
nav {
|
||||
background: var(--nav-back-color);
|
||||
color: var(--nav-fore-color);
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
margin: var(--universal-margin);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav * {
|
||||
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: var(--a-link-color);
|
||||
border-radius: var(--universal-border-radius);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
|
||||
text-decoration: none;
|
||||
background: var(--nav-hover-back-color);
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
position: relative;
|
||||
margin-left: calc(2 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: calc(var(--universal-padding) - 1 * var(--universal-padding));
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
position: relative;
|
||||
margin-left: calc(4 * var(--universal-padding));
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: calc(var(--universal-padding) - 3 * var(--universal-padding));
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid var(--nav-border-color);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
header.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
|
@ -970,50 +1029,6 @@ p.splash {
|
|||
clip-path: inset(100%);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #145caf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.drawer-toggle:before {
|
||||
position: relative;
|
||||
top: 0.4375rem;
|
||||
|
|
|
|||
|
|
@ -126,31 +126,6 @@ p.splash {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: Replace with actual header when ready
|
||||
// header {
|
||||
// display: block;
|
||||
// height: 3.25rem;
|
||||
// background: #f8f8f8;
|
||||
// color: #444;
|
||||
// padding: 0.125rem 0.5rem;
|
||||
// white-space: nowrap;
|
||||
// overflow-x: auto;
|
||||
// overflow-y: hidden;
|
||||
// position: sticky;
|
||||
// border-bottom: 1px solid #ddd;
|
||||
// top: 0;
|
||||
// text-transform: uppercase;
|
||||
// // Rough testing draft, not for production use
|
||||
// line-height: 3.5rem;
|
||||
// font-weight: 500;
|
||||
// cursor: pointer;
|
||||
// &:hover {
|
||||
// color: #111;
|
||||
// }
|
||||
// }
|
||||
|
||||
// TODO: Use module, copied from v2
|
||||
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
|
@ -162,49 +137,6 @@ p.splash {
|
|||
clip-path: inset(100%);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
nav a, nav a:visited {
|
||||
display: block;
|
||||
color: #145caf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav .sublink-1 {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
nav .sublink-2 {
|
||||
padding-left: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.drawer-toggle:before {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -7,22 +7,36 @@ $header-back-color: #f8f8f8 !default; // Background color for the header
|
|||
$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-border-color: #ddd !default; // Border color for the header element.
|
||||
$nav-back-color: #f8f8f8 !default; // Background color for the header element.
|
||||
$nav-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
|
||||
$nav-fore-color: #444 !default; // Text color for the header element.
|
||||
$nav-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.
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$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;
|
||||
$header-back-color-var: '--header-back-color' !default;
|
||||
$header-hover-back-color-var: '--header-hover-back-color' !default;
|
||||
$header-border-color-var: '--header-border-color' !default;
|
||||
$nav-fore-color-var: '--nav-fore-color' !default;
|
||||
$nav-back-color-var: '--nav-back-color' !default;
|
||||
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
|
||||
$nav-border-color-var: '--nav-border-color' !default;
|
||||
/* Navigation module CSS variable definitions */
|
||||
:root {
|
||||
#{$header-back-color-var}: $header-back-color;
|
||||
#{$header-hover-back-color-var}: $header-hover-back-color;
|
||||
#{$header-fore-color-var}: $header-fore-color;
|
||||
#{$header-border-color-var}: $header-border-color;
|
||||
#{$nav-back-color-var}: $nav-back-color;
|
||||
#{$nav-hover-back-color-var}: $nav-hover-back-color;
|
||||
#{$nav-fore-color-var}: $nav-fore-color;
|
||||
#{$nav-border-color-var}: $nav-border-color;
|
||||
}
|
||||
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
|
||||
header {
|
||||
|
|
@ -72,6 +86,47 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
background: var(#{$nav-back-color-var});
|
||||
color: var(#{$nav-fore-color-var});
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
margin: var(#{$universal-margin-var});
|
||||
padding: 0;
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
* {
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
}
|
||||
a, a:visited {
|
||||
display: block;
|
||||
color: var(#{$a-link-color-var}); // Apply regardless to de-stylize visited links.
|
||||
border-radius: var(#{$universal-border-radius-var});
|
||||
transition: background 0.3s;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
background: var(#{$a-hover-back-color-var});
|
||||
}
|
||||
}
|
||||
// Subcategories in navigation.
|
||||
@for $i from 1 through $nav-sublink-depth {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
position: relative;
|
||||
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
|
||||
top: -#{$__1px};
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $__1px solid var(#{$nav-border-color-var});
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// TODO: Add footer definitions here.
|
||||
// Definitions for sticky headers and footers.
|
||||
header.#{$sticky-name} {
|
||||
|
|
|
|||
Loading…
Reference in a new issue