Navigation complete, documentation and wiki page missing
This commit is contained in:
Angelos Chalaris
parent
abc020aad1
commit
9edfb97b2d
7 changed files with 266 additions and 6 deletions
11
README.md
11
README.md
|
|
@ -1,5 +1,5 @@
|
|||
# mini.css
|
||||
A minimal, responsive CSS framework to get you started.
|
||||
A minimal, responsive pure CSS framework to get you started.
|
||||
|
||||
## Components
|
||||
|
||||
|
|
@ -7,6 +7,13 @@ A minimal, responsive CSS framework to get you started.
|
|||
- **button**: button styles `GZIPPED SIZE`: 427 bytes
|
||||
- **form**: form styles `GZIPPED SIZE`: 517 bytes
|
||||
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
|
||||
- **nav**: coming soon
|
||||
- **nav**: navigation bar `GZIPPED SIZE`: 517 bytes
|
||||
- **table**: table styles `GZIPPED SIZE`: 243 bytes
|
||||
- **helper and utility classes**: classes for quick floats, border styling, contextual text and more `GZIPPED SIZE`: 441 bytes
|
||||
|
||||
TODO:
|
||||
- Tabbed navigation (radio button based)
|
||||
- Dropdowns (checkbox based)
|
||||
- Modals (checkbox based)
|
||||
- Labels and badges
|
||||
- Pure css progress bars
|
||||
|
|
|
|||
|
|
@ -917,3 +917,87 @@ img.thumb {
|
|||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
|
||||
.nav {
|
||||
box-sizing: border-box;
|
||||
background-color: #ddd; }
|
||||
.nav .logo {
|
||||
font-size: 135%; }
|
||||
.nav ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.nav ul li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
white-space: nowrap; }
|
||||
.nav ul li * {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
color: #272727;
|
||||
margin: 0; }
|
||||
.nav ul li a:hover, .nav ul li a:active, .nav ul li a:focus {
|
||||
background: #cacaca; }
|
||||
.nav ul li a.disabled, .nav ul li a[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
.nav.vertical ul {
|
||||
display: block; }
|
||||
.nav.vertical ul li {
|
||||
display: block; }
|
||||
.nav.vertical ul li * {
|
||||
width: 100%;
|
||||
padding: 8px 0; }
|
||||
.nav.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%; }
|
||||
.nav.fixed.vertical {
|
||||
height: 100%;
|
||||
width: 16.66667%; }
|
||||
.nav.fixed.vertical ul {
|
||||
width: 100%; }
|
||||
.nav.fixed.vertical ul li {
|
||||
display: block; }
|
||||
.nav + label {
|
||||
display: none;
|
||||
font-weight: 700;
|
||||
margin: 10px;
|
||||
font-size: 1.75em;
|
||||
padding: 8px;
|
||||
background-color: #ddd;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
right: 0; }
|
||||
.nav + label:before {
|
||||
position: relative;
|
||||
content: '\2630'; }
|
||||
.nav + label:hover, .nav + label:active, .nav + label:focus {
|
||||
background: #cacaca; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
overflow: auto; }
|
||||
.nav.fixed {
|
||||
display: none; }
|
||||
.nav.fixed + label {
|
||||
display: block; }
|
||||
|
||||
input[type="checkbox"]:checked + .nav.fixed {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
input[type="checkbox"]:checked + .nav.fixed ul {
|
||||
display: block; }
|
||||
input[type="checkbox"]:checked + .nav.fixed ul li {
|
||||
display: block; }
|
||||
input[type="checkbox"]:checked + .nav.fixed ul li * {
|
||||
width: 100%;
|
||||
padding: 8px 0; }
|
||||
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
||||
content: '\00d7'; } }
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -35,3 +35,6 @@
|
|||
@include make-center-block(ct-block);
|
||||
@include make-clearfix(cf);
|
||||
@include make-hidden(hidden);
|
||||
@import 'mini/nav';
|
||||
// Use nav mixin to create nav with default specs.
|
||||
@include make-nav(nav, vertical, fixed, logo, 135%, 8px, #272727, #ddd, darken, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
background: lighten($btn-variant-bg-color, $btn-variant-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage); // 7.5%
|
||||
background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
153
scss/mini/_nav.scss
Normal file
153
scss/mini/_nav.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
|
||||
|
||||
|
||||
@mixin make-nav( $nav-name, $nav-vertical-name, $nav-fixed-name, $nav-logo-name,
|
||||
$nav-logo-size, $nav-padding, $nav-color, $nav-bg-color, $nav-hover-style,
|
||||
$nav-hover-style-percentage, $nav-disabled-cursor, $nav-disabled-opacity,
|
||||
$nav-fixed-left-right, $grid-columns-total,
|
||||
$grid-columns-count-for-nav-fixed-vertical, $nav-fixed-collapse-breakpoint,
|
||||
$nav-fixed-collapse-label-location, $nav-fixed-collapse-label-margin,
|
||||
$nav-fixed-collapse-label-font-size ){
|
||||
.#{$nav-name}{
|
||||
box-sizing: border-box;
|
||||
background-color: #{$nav-bg-color};
|
||||
.#{$nav-logo-name}{
|
||||
font-size: $nav-logo-size;
|
||||
}
|
||||
ul{
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li{
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
* {
|
||||
display: inline-block;
|
||||
padding: #{$nav-padding};
|
||||
color: #{$nav-color};
|
||||
margin: 0;
|
||||
}
|
||||
& a{
|
||||
&:hover, &:active, &:focus{
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
cursor: $nav-disabled-cursor;
|
||||
opacity: $nav-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.#{$nav-vertical-name}{
|
||||
ul{
|
||||
display: block;
|
||||
li{
|
||||
display: block;
|
||||
* {
|
||||
width: 100%;
|
||||
padding: #{$nav-padding} 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.#{$nav-fixed-name}{
|
||||
position: fixed;
|
||||
@if $nav-fixed-left-right == 'left'{
|
||||
left: 0;
|
||||
}
|
||||
@else{
|
||||
right: 0;
|
||||
}
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
&.#{$nav-vertical-name}{
|
||||
height: 100%;
|
||||
width: #{($grid-columns-count-for-nav-fixed-vertical * 100%/ $grid-columns-total)};
|
||||
ul{
|
||||
width: 100%;
|
||||
li{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& + label{
|
||||
display: none;
|
||||
font-weight: 700;
|
||||
margin: $nav-fixed-collapse-label-margin;
|
||||
font-size: $nav-fixed-collapse-label-font-size;
|
||||
padding: #{$nav-padding};
|
||||
background-color: $nav-bg-color;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
@if $nav-fixed-collapse-label-location == 'top-left'{
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@else if $nav-fixed-collapse-label-location == 'top-right'{
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
@else if $nav-fixed-collapse-label-location == 'bottom-left'{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
@else{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:before{
|
||||
position: relative;
|
||||
content: '\2630';
|
||||
}
|
||||
&:hover, &:active, &:focus{
|
||||
@if $nav-hover-style == 'lighten'{
|
||||
background: lighten($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: $nav-fixed-collapse-breakpoint){
|
||||
.#{$nav-name}{
|
||||
overflow: auto;
|
||||
&.#{$nav-fixed-name}{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + .#{$nav-name}.#{$nav-fixed-name}{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
ul{
|
||||
display: block;
|
||||
li{
|
||||
display: block;
|
||||
* {
|
||||
width: 100%;
|
||||
padding: #{$nav-padding} 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
& + label{
|
||||
&:before{
|
||||
content: '\00d7';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,20 @@
|
|||
<link rel="stylesheet" href="css/mini-full.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading 1 <small>smaller</small></h1>
|
||||
<h1>Heading 1 <small>smaller</small></h1><br>
|
||||
<input type="checkbox" class="hidden" id="nav-toggle"><div class="nav">
|
||||
<span class="logo">mini.css</span>
|
||||
<ul class="pure-menu-list">
|
||||
<li><a href="#" class="nav-link">link 1</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link" disabled>d link</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">other</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">thing</a></li>
|
||||
<li class="nav-link">Separator</li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test2</a></li>
|
||||
<li class="nav-link"><a href="#" class="pure-menu-link">test3!</a></li>
|
||||
</ul>
|
||||
</div><label for="nav-toggle"></label><br>
|
||||
<h2>Heading 2 <small>smaller</small></h2><br>
|
||||
<p><strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. <code>Praesent est mi</code>, commodo vitae mauris at, sagittis vehicula sem. Quisque malesuada dui at justo maximus, vel placerat nibh blandit. Phasellus <sub>quis</sub> ipsum aliquam, <sup>fringilla</sup> ante <kbd>sit</kbd> amet, sagittis magna. In at dignissim eros, id vulputate tellus. Quisque orci urna, pretium in porttitor et, rhoncus in nulla. Aenean viverra ante in velit tincidunt, <kbd>sit</kbd> amet tincidunt ante suscipit. In malesuada consectetur molestie.</p>
|
||||
<br>
|
||||
|
|
|
|||
Loading…
Reference in a new issue