mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
New form control sizing, new navbar condensed variation, update nav and navbar spacing
This commit is contained in:
Mark Otto
+125
-87
@@ -75,11 +75,11 @@
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding: .725rem .75rem;
|
||||
padding: .95rem .75rem;
|
||||
margin-right: $spacer;
|
||||
margin-bottom: 0; // For headings
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-computed;
|
||||
line-height: 1;
|
||||
|
||||
> a {
|
||||
@include hover-focus {
|
||||
@@ -203,15 +203,15 @@
|
||||
//
|
||||
// Add a class to make any element properly align itself vertically within the navbars.
|
||||
|
||||
.navbar-text {
|
||||
// @include navbar-vertical-align($line-height-computed);
|
||||
// .navbar-text {
|
||||
// // @include navbar-vertical-align($line-height-computed);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
float: left;
|
||||
margin-right: $navbar-padding-horizontal;
|
||||
margin-left: $navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// float: left;
|
||||
// margin-right: $navbar-padding-horizontal;
|
||||
// margin-left: $navbar-padding-horizontal;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Component alignment
|
||||
@@ -222,16 +222,52 @@
|
||||
//
|
||||
// Declared after the navbar components to ensure more specificity on the margins.
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar-left {
|
||||
@include pull-left();
|
||||
}
|
||||
.navbar-right {
|
||||
@include pull-right();
|
||||
margin-right: -$navbar-padding-horizontal;
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// .navbar-left {
|
||||
// @include pull-left();
|
||||
// }
|
||||
// .navbar-right {
|
||||
// @include pull-right();
|
||||
// margin-right: -$navbar-padding-horizontal;
|
||||
|
||||
~ .navbar-right {
|
||||
margin-right: 0;
|
||||
// ~ .navbar-right {
|
||||
// margin-right: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Condensed navbar
|
||||
|
||||
.navbar-condensed {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.form-inline {
|
||||
margin-top: .6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding-top: .95rem;
|
||||
padding-bottom: .95rem;
|
||||
line-height: 1.25; // Match the `.navbar-brand`
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
cursor: default;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -240,6 +276,8 @@
|
||||
// Alternate navbars
|
||||
// --------------------------------------------------
|
||||
|
||||
// todo: audit these styles
|
||||
|
||||
// Default navbar
|
||||
.navbar-default {
|
||||
background-color: $navbar-default-bg;
|
||||
@@ -254,83 +292,83 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-default-color;
|
||||
}
|
||||
// .navbar-text {
|
||||
// color: $navbar-default-color;
|
||||
// }
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: $navbar-default-link-color;
|
||||
// .navbar-nav {
|
||||
// > li > a {
|
||||
// color: $navbar-default-link-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-hover-color;
|
||||
background-color: $navbar-default-link-hover-bg;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-disabled-color;
|
||||
background-color: $navbar-default-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// background-color: $navbar-default-link-hover-bg;
|
||||
// }
|
||||
// }
|
||||
// > .active > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-active-color;
|
||||
// background-color: $navbar-default-link-active-bg;
|
||||
// }
|
||||
// }
|
||||
// > .disabled > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-disabled-color;
|
||||
// background-color: $navbar-default-link-disabled-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: $navbar-default-toggle-border-color;
|
||||
@include hover-focus {
|
||||
background-color: $navbar-default-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: $navbar-default-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
// .navbar-toggle {
|
||||
// border-color: $navbar-default-toggle-border-color;
|
||||
// @include hover-focus {
|
||||
// background-color: $navbar-default-toggle-hover-bg;
|
||||
// }
|
||||
// .icon-bar {
|
||||
// background-color: $navbar-default-toggle-icon-bar-bg;
|
||||
// }
|
||||
// }
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: $navbar-default-border;
|
||||
}
|
||||
// .navbar-collapse,
|
||||
// .navbar-form {
|
||||
// border-color: $navbar-default-border;
|
||||
// }
|
||||
|
||||
// Dropdown menu items
|
||||
.navbar-nav {
|
||||
// Remove background color from open dropdown
|
||||
> .open > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // Dropdown menu items
|
||||
// .navbar-nav {
|
||||
// // Remove background color from open dropdown
|
||||
// > .open > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-active-color;
|
||||
// background-color: $navbar-default-link-active-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Links in navbars
|
||||
//
|
||||
// Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
// // Links in navbars
|
||||
// //
|
||||
// // Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
|
||||
.navbar-link {
|
||||
color: $navbar-default-link-color;
|
||||
@include hover {
|
||||
color: $navbar-default-link-hover-color;
|
||||
}
|
||||
}
|
||||
// .navbar-link {
|
||||
// color: $navbar-default-link-color;
|
||||
// @include hover {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
.btn-link {
|
||||
color: $navbar-default-link-color;
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-hover-color;
|
||||
}
|
||||
&:disabled,
|
||||
fieldset[disabled] & {
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .btn-link {
|
||||
// color: $navbar-default-link-color;
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// }
|
||||
// &:disabled,
|
||||
// fieldset[disabled] & {
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-disabled-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// Inverse navbar
|
||||
|
||||
Reference in New Issue
Block a user