mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 00:29:52 +02:00
New form control sizing, new navbar condensed variation, update nav and navbar spacing
This commit is contained in:
Mark Otto
@@ -228,34 +228,50 @@ input[type="checkbox"] {
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
@include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
.form-group-sm {
|
||||
@include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
.form-control-static {
|
||||
height: $input-height-sm;
|
||||
min-height: ($line-height-computed + $font-size-sm);
|
||||
padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
.form-control-sm {
|
||||
height: $input-height-sm;
|
||||
padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $line-height-sm;
|
||||
border-radius: $input-border-radius-sm;
|
||||
}
|
||||
|
||||
@include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
.form-group-lg {
|
||||
@include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
.form-control-static {
|
||||
height: $input-height-lg;
|
||||
min-height: ($line-height-computed + $font-size-lg);
|
||||
padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
.form-control-lg {
|
||||
height: $input-height-lg;
|
||||
padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-lg;
|
||||
border-radius: $input-border-radius-lg;
|
||||
}
|
||||
|
||||
// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-group-sm {
|
||||
// @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-sm;
|
||||
// min-height: ($line-height-computed + $font-size-sm);
|
||||
// padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
// font-size: $font-size-sm;
|
||||
// line-height: $line-height-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-group-lg {
|
||||
// @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
|
||||
|
||||
// .form-control-static {
|
||||
// height: $input-height-lg;
|
||||
// min-height: ($line-height-computed + $font-size-lg);
|
||||
// padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
// font-size: $font-size-lg;
|
||||
// line-height: $line-height-lg;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Form control feedback states
|
||||
//
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: $nav-link-padding;
|
||||
line-height: $line-height-base;
|
||||
line-height: 1;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
|
||||
@@ -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