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

Bootstrap flavor - navigation

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-08 13:03:27 +03:00
parent 38989e8cb3
commit acb55fc971
3 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
flavors/mini-bootstrap.css
View File

@@ -916,92 +916,98 @@ textarea {
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
used as a default if no valid value is specified. used as a default if no valid value is specified.
*/ */
.nav { .navbar {
box-sizing: border-box; box-sizing: border-box;
background-color: #272727; } background-color: #f8f8f8; }
.nav .logo { .navbar .navbar-brand {
font-size: 135%; font-size: 128.6%;
color: #ddd; } color: #333; }
.nav ul { .navbar ul {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; } padding: 0; }
.nav ul li { .navbar ul li {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
white-space: nowrap; } white-space: nowrap; }
.nav ul li > * { .navbar ul li > * {
display: inline-block; display: inline-block;
padding: 8px; padding: 15px;
color: #ddd; color: #333;
margin: 0; } margin: 0; }
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus { .navbar ul li .navbar-nav:hover, .navbar ul li .navbar-nav:active, .navbar ul li .navbar-nav:focus {
color: #ddd; color: #333;
background: #141414; } background: #e5e5e5; }
.nav ul li .link.disabled, .nav ul li .link[disabled], .nav ul li .link:disabled { .navbar ul li .navbar-nav.disabled, .navbar ul li .navbar-nav[disabled], .navbar ul li .navbar-nav:disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.65; } opacity: 0.65; }
.nav.vertical ul { .navbar.navbar-vertical ul {
display: block; } display: block; }
.nav.vertical ul li { .navbar.navbar-vertical ul li {
display: block; } display: block; }
.nav.vertical ul li > * { .navbar.navbar-vertical ul li > * {
width: 100%; width: 100%;
padding: 8px 0; } padding: 15px 0; }
.nav.fixed { .navbar.navbar-fixed {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 999; z-index: 999;
width: 100%; } width: 100%; }
.nav.fixed.vertical { .navbar.navbar-fixed.navbar-vertical {
height: 100%; height: 100%;
width: 16.66667%; } width: 16.66667%; }
.nav.fixed.vertical ul { .navbar.navbar-fixed.navbar-vertical ul {
width: 100%; } width: 100%; }
.nav.fixed.vertical ul li { .navbar.navbar-fixed.navbar-vertical ul li {
display: block; } display: block; }
.nav + label { .navbar + label {
display: none; display: none;
font-weight: 700; font-weight: 700;
margin: 10px; margin: 10px;
font-size: 1.75em; font-size: 1.75em;
padding: 8px; padding: 15px;
color: #ddd; color: #333;
background-color: #272727; background-color: #f8f8f8;
width: auto; width: auto;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
right: 0; } right: 0; }
.nav + label:before { .navbar + label:before {
position: relative; position: relative;
content: '\2630'; } content: '\2630'; }
.nav + label:hover, .nav + label:active, .nav + label:focus { .navbar + label:hover, .navbar + label:active, .navbar + label:focus {
background: #141414; } background: #e5e5e5; }
@media (max-width: 768px) { @media (max-width: 768px) {
.nav { .navbar {
overflow: auto; } overflow: auto; }
.nav.fixed { .navbar.navbar-fixed {
display: none; } display: none; }
.nav.fixed + label { .navbar.navbar-fixed + label {
display: block; } display: block; }
input[type="checkbox"]:checked + .nav.fixed { input[type="checkbox"]:checked + .navbar.navbar-fixed {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; } height: 100%; }
input[type="checkbox"]:checked + .nav.fixed ul { input[type="checkbox"]:checked + .navbar.navbar-fixed ul {
display: block; } display: block; }
input[type="checkbox"]:checked + .nav.fixed ul li { input[type="checkbox"]:checked + .navbar.navbar-fixed ul li {
display: block; } display: block; }
input[type="checkbox"]:checked + .nav.fixed ul li * { input[type="checkbox"]:checked + .navbar.navbar-fixed ul li * {
width: 100%; width: 100%;
padding: 8px 0; } padding: 15px 0; }
input[type="checkbox"]:checked + .nav.fixed + label:before { input[type="checkbox"]:checked + .navbar.navbar-fixed + label:before {
content: '\00d7'; } } content: '\00d7'; } }
.navbar {
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
.navbar {
border-radius: 4px !important; }
img.thumb { img.thumb {
padding: 0.25em; padding: 0.25em;
border: 1px solid #ccc; border: 1px solid #ccc;
@@ -1298,13 +1304,13 @@ img.thumb {
menus on mobile screens. It is suggested that you set this value to something different than menus on mobile screens. It is suggested that you set this value to something different than
0 to visually represent the menu hierarchy in devices with smaller screens. 0 to visually represent the menu hierarchy in devices with smaller screens.
*/ */
.nav .link.dropdown { .navbar .navbar-nav.dropdown {
cursor: pointer; } cursor: pointer; }
.nav input[type="checkbox"], .nav input[type="radio"] { .navbar input[type="checkbox"], .navbar input[type="radio"] {
display: none; } display: none; }
.nav input[type="checkbox"].dropdown + div, .nav input[type="radio"].dropdown + div { .navbar input[type="checkbox"].dropdown + div, .navbar input[type="radio"].dropdown + div {
display: none; } display: none; }
.nav input[type="checkbox"]:checked.dropdown + div, .nav input[type="radio"]:checked.dropdown + div { .navbar input[type="checkbox"]:checked.dropdown + div, .navbar input[type="radio"]:checked.dropdown + div {
display: block; display: block;
font-size: 0.8em; font-size: 0.8em;
margin-left: 20px; } margin-left: 20px; }

2
flavors/mini-bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
flavors/mini-bootstrap.scss
View File

@@ -242,20 +242,29 @@ $table-body-color: $body-color; // Table body text color
// Variable definitions for the Navigation module (_nav.scss) // Variable definitions for the Navigation module (_nav.scss)
//==================================================================== //====================================================================
// Class names for the navigation elements // Class names for the navigation elements
$navigation-class-name: nav; // Name for the navigation bar class // --- NOTES: ---
$navigation-vertical-name: vertical; // Name for the vertical navigation class // The structure of the navigation bar is based on mini.css structure
$navigation-fixed-name: fixed; // Name for the fixed navigation class // conventions. However naming is applied based on the naming conventions
$navigation-logo-name: logo; // Name for the navigation logo class // of Bootstrap.
$navigation-link-name: link; // Name for the navigation link class // Some colors are based on approximation.
// Border color and border radius are built using generic utility mixins.
// -------------------
$navigation-class-name: navbar; // Name for the navigation bar class
$navigation-vertical-name: navbar-vertical; // Name for the vertical navigation class
$navigation-fixed-name: navbar-fixed; // Name for the fixed navigation class
$navigation-logo-name: navbar-brand; // Name for the navigation logo class
$navigation-link-name: navbar-nav; // Name for the navigation link class
// Colors and breakpoint for the navigation // Colors and breakpoint for the navigation
$navigation-bg-color: #272727; // Background color for the navigation bar $navigation-bg-color: #f8f8f8; // Background color for the navigation bar
$navigation-color: #ddd; // Color for the navigation text $navigation-color: $body-color; // Color for the navigation text
$navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse $navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse
// Enable navigation (_nav.scss). (Use individual mixins below to use.) // Enable navigation (_nav.scss). (Use individual mixins below to use.)
@import '../scss/mini/nav'; @import '../scss/mini/nav';
// Use nav mixin to create nav with default specs. For more information // Use nav mixin to create nav with default specs. For more information
// refer to the _nav.scss file to check the definitions. // refer to the _nav.scss file to check the definitions.
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em); @include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 128.6%, $navigation-link-name, 15px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
@include make-border-generic($navigation-class-name);
@include make-border-radial-style($navigation-class-name, 4px);
//==================================================================== //====================================================================
// Variable definitions for the Utilities and Helper Classes module (_utility.scss) // Variable definitions for the Utilities and Helper Classes module (_utility.scss)
//==================================================================== //====================================================================