beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added navigation subcategory sidebar

Browse source
This commit is contained in:
Angelos Chalaris 2017-01-27 11:27:02 +02:00
parent 63bd62686b
commit ee36a28bed
6 changed files with 61 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
dist/mini-default.css vendored
View file

@ -661,9 +661,27 @@ nav {
display: block;
color: #1565c0; }
nav .sublink-1 {
padding-left: 12px; }
padding-left: 12px;
position: relative; }
nav .sublink-1:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #78909c;
border-left: 0; }
nav .sublink-2 {
padding-left: 24px; }
padding-left: 24px;
position: relative; }
nav .sublink-2:before {
position: absolute;
left: 3px;
top: -1px;
content: '';
height: 100%;
border: 1px solid #78909c;
border-left: 0; }
footer {
display: block;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View file

@ -784,4 +784,6 @@
## 20170127
- `tooltip` updated, dealing with a small misalignment bug in alterante styles.
- `tooltip` updated, dealing with a small misalignment bug in alternate styles.
- Added `$nav-include-sublink-bar` flag for `nav` element's subcategories to add a sidebar to them. Styled them as necessary and used proper variables. Tested reasonably extensively, no bugs should be present.
- With the addition of the new `nav` sidebar to the main flavor, the file size is now `6.86KB`. This is very close to the final size for the *v2.1.0* release, as most of the new features have been added already.

20
docs/v2/demo.html
View file

@ -152,16 +152,20 @@
<li>File</li>
</ul>
</div>
<style>
.tooltip:before, .tooltip:after {
opacity: 1 !important;
clip: auto !important;
-webkit-clip-path: inset(0%) !important;
clip-path: inset(0%) !important;
}
}</style>
<div class="col-md-offset-1">
<mark class="tooltip large" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
<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>
</div>
</div>

11
src/flavors/mini-default.scss
View file

@ -191,6 +191,11 @@ $nav-link-fore-color: #1565c0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to
// subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #78909c; // Subcategory bar color
$footer-back-color: #263238; // Background color for <footer>
$footer-fore-color: #fafafa; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
@ -199,12 +204,14 @@ $footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #039be5; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be
// included (`true`/`false`) [2]
// included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
// subcategories, using the values specified.
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms

19
src/mini/_navigation.scss
View file

@ -101,12 +101,25 @@ nav {
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
}
// Subcategories in navigation.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px !default; // Left padding to add to subcategories
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px !default; // Left padding to add to subcategories
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories?
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left;
position: relative;
@if $nav-include-sublink-bar {
&:before {
position: absolute;
left: $nav-sublink-bar-left-position;
top: -$nav-sublink-bar-width;
content: '';
height: 100%;
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
border-left: 0;
}
}
}
}
}