Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
public.components.flat-ui.less.modules.navbar.less Maven / Gradle / Ivy
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
font-size: floor(@component-font-size-base * 1.067); // ~16px
min-height: @navbar-height-base;
margin-bottom: @navbar-margin-bottom;
border: none;
border-radius: @navbar-border-radius;
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
box-shadow: none;
padding-right: 21px;
padding-left: 21px;
@media (min-width: @grid-float-breakpoint) {
// Account for first and last children spacing
.navbar-nav.navbar-left:first-child {
margin-left: -21px;
> li:first-child a {
.border-left-radius(@navbar-border-radius);
}
}
.navbar-nav.navbar-right:last-child {
margin-right: -21px;
.navbar > .container & {
margin-right: -36px;
}
> .dropdown:last-child > a {
border-radius: 0 @navbar-border-radius @navbar-border-radius 0;
}
}
.navbar-form.navbar-right:last-child {
margin-right: -17px;
.navbar-fixed-top &,
.navbar-fixed-bottom & {
margin-right: 0;
}
}
}
@media (max-width: @grid-float-breakpoint-max) {
.navbar-nav.navbar-right:last-child {
margin-bottom: 3px;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: -21px;
margin-left: -21px;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0;
border-radius: 0;
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top {
border-width: 0;
}
.navbar-fixed-bottom {
margin-bottom: 0; // override .navbar defaults
border-width: 0;
}
// Brand/project name
.navbar-brand {
font-size: floor(@component-font-size-base * 1.6); // ~24px
line-height: 1.042; // ~25px
font-weight: 700;
padding: ((@navbar-height-base - 25px) / 2) 21px;
> [class*="fui-"] {
font-size: floor(@component-font-size-base * 1.267); // ~19px
line-height: 1.263; // ~24px
vertical-align: top;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -21px;
}
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
border: none;
color: @brand-primary;
margin: 0 0 0 21px;
padding: 0 21px;
height: @navbar-height-base;
line-height: @navbar-height-base;
&:before {
color: @link-color;
content: "\e00c";
font-family: "Flat-UI-Icons";
font-size: floor(@component-font-size-base * 1.467); // ~22px
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
.transition(color .25s linear);
}
&:hover,
&:focus {
outline: none;
&:before {
color: @link-hover-color;
}
}
.icon-bar {
display: none;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: 0;
> li > a {
font-size: floor(@component-font-size-base * 1.067); // ~16px
padding: ((@navbar-height-base - 23px) / 2) 21px;
line-height: 23px;
font-weight: 700;
}
.dropdown-toggle .caret {
border-top-color: @link-color;
border-bottom-color: @link-color;
border-width: 8px 6px 0;
margin-left: 12px;
}
> li > a:hover,
> li > a:focus,
.open > a:focus,
.open > a:hover {
background-color: transparent;
.caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
}
[class^="fui-"] {
line-height: 20px;
position: relative;
top: 1px;
}
.visible-sm,
.visible-xs {
> [class^="fui-"] {
margin-left: 12px;
}
}
@media (max-width: @grid-float-breakpoint-max) {
margin: 0 -21px;
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a,
.dropdown-header {
padding: 7px 15px 7px 31px !important;
}
> li > a {
line-height: 23px;
}
}
> li > a {
padding-top: 7px;
padding-bottom: 7px;
}
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-input {
.input-size(@input-height-small; 5px; 10px; @input-font-size-small; @navbar-input-line-height);
}
.navbar-form {
.box-shadow(none);
margin-top: 0;
margin-bottom: 0;
padding-right: 19px;
padding-left: 19px;
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-small);
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
}
}
@media (max-width: @grid-float-breakpoint-max) {
margin: 3px -21px;
width: auto;
}
.navbar-nav + &.navbar-left,
&.navbar-right:last-child { // Width fix for Webkit and IE11
@media (min-width: @grid-float-breakpoint) {
width: 260px;
}
}
// Controls sizing
.form-control,
.input-group-addon,
.btn { .navbar-input(); }
// Reset rounded corners
.form-controls-corners-reset();
.form-control {
font-size: @component-font-size-base;
border-radius: 5px;
display: table-cell;
}
.form-group + .btn {
font-size: @component-font-size-base;
border-radius: 5px;
margin-left: 4px;
}
@media (max-width: @grid-float-breakpoint-max) {
.form-group {
margin-bottom: 0;
& + .btn {
margin-top: 9px;
margin-left: 0;
}
}
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li {
> .dropdown-menu {
min-width: 100%;
border-radius: @border-radius-base;
@media (max-width: @grid-float-breakpoint-max) {
.transition(all 0s);
display: none;
}
}
&.open > .dropdown-menu {
@media (max-width: @grid-float-breakpoint-max) {
margin-top: 0 !important;
display: block;
}
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(@border-radius-base);
}
.navbar-nav > .open > .dropdown-toggle,
.navbar-nav > .open > .dropdown-toggle:focus,
.navbar-nav > .open > .dropdown-toggle:hover {
background-color: transparent;
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
font-size: floor(@component-font-size-base * 1.067); // ~16px
line-height: 1.438; // ~23px
color: @brand-primary;
margin-top: 0;
margin-bottom: 0;
.navbar-vertical-align(23px, @navbar-height-base);
@media (min-width: @grid-float-breakpoint) {
margin-left: 21px;
margin-right: 21px;
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: 0;
}
}
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height-base - @input-height-base) / 2);
margin-bottom: ((@navbar-height-base - @input-height-base) / 2);
&.btn-sm {
margin-top: ((@navbar-height-base - @input-height-small) / 2);
margin-bottom: ((@navbar-height-base - @input-height-small) / 2) - 1;
}
&.btn-xs {
margin-top: ((@navbar-height-base - 25) / 2);
margin-bottom: ((@navbar-height-base - 25) / 2);
}
}
// Unread icon
//
.navbar-unread,
.navbar-new {
font-family: @font-family-base;
background-color: @brand-secondary;
border-radius: 50%;
color: @inverse;
font-size: 0;
font-weight: 700;
height: 6px;
line-height: 1;
position: absolute;
right: 12px;
text-align: center;
top: 35%;
width: 6px;
z-index: 10;
@media (max-width: @grid-float-breakpoint) {
position: static;
float: right;
margin: 0 0 0 10px;
}
.active & {
background-color: @inverse;
display: none;
}
}
.navbar-new {
background-color: @brand-danger;
font-size: 12px;
height: 18px;
line-height: 17px;
margin: -6px -10px;
min-width: 18px;
padding: 0 1px;
width: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-toggle {
&:before {
color: @navbar-default-toggle-color;
}
&:hover,
&:focus {
background-color: transparent;
&:before {
color: @navbar-default-toggle-hover-color;
}
}
}
.navbar-collapse,
.navbar-form {
border-color: @navbar-default-form-border;
border-width: 2px;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
// Dropdown menu items and carets
.navbar-nav {
// Caret text color
> .dropdown > a .caret {
border-top-color: @navbar-default-caret-color;
border-bottom-color: @navbar-default-caret-color;
}
// Caret should match text color on active
> .active > a .caret {
border-top-color: @navbar-default-caret-active-color;
border-bottom-color: @navbar-default-caret-active-color;
}
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-default-caret-hover-color;
border-bottom-color: @navbar-default-caret-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
.caret {
border-top-color: @navbar-default-caret-active-color;
border-bottom-color: @navbar-default-caret-active-color;
}
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
.navbar-form {
.form-control {
border-color: transparent;
.placeholder(@navbar-default-form-placeholder);
&:focus {
border-color: @brand-secondary;
color: @brand-secondary;
}
}
.input-group-btn .btn {
border-color: transparent;
color: @navbar-default-form-icon;
}
.input-group.focus {
.form-control,
.input-group-btn .btn {
border-color: @brand-secondary;
color: @brand-secondary;
}
}
}
.navbar-text {
color: @brand-primary;
a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: @navbar-inverse-bg;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-toggle {
&:before {
color: @navbar-inverse-toggle-color;
}
&:hover,
&:focus {
background-color: transparent;
&:before {
color: @navbar-inverse-toggle-hover-color;
}
}
}
.navbar-collapse {
border-color: @navbar-inverse-form-border;
border-width: 2px;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-inverse-caret-hover-color;
border-bottom-color: @navbar-inverse-caret-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
border-left-color: transparent;
.caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-inverse-caret-color;
border-bottom-color: @navbar-inverse-caret-color;
}
> .open {
> .dropdown-arrow {
border-top-color: @navbar-inverse-dropdown-arrow;
border-bottom-color: @navbar-inverse-dropdown-arrow;
}
> .dropdown-menu {
background-color: @navbar-inverse-dropdown-bg;
padding: 3px 4px;
> li > a {
color: @navbar-inverse-dropdown-link-color;
border-radius: @border-radius-base;
padding: 6px 9px;
&:hover,
&:focus {
color: @navbar-inverse-dropdown-link-hover-color;
background-color: @navbar-inverse-dropdown-link-hover-bg;
}
}
> .divider {
background-color: @navbar-inverse-divider;
height: 2px;
margin-left: -4px;
margin-right: -4px;
}
}
}
@media (max-width: @grid-float-breakpoint-max) {
> li > a {
border-left-width: 0;
}
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Custom background for dividers when collapsed
.dropdown-menu .divider {
background-color: @navbar-inverse-divider;
}
}
}
.navbar-form {
.form-control {
color: @navbar-inverse-form-placeholder;
border-color: transparent;
background-color: @navbar-inverse-form-bg;
.placeholder(@navbar-inverse-form-placeholder);
&:focus {
border-color: @brand-secondary;
color: @brand-secondary;
}
}
.btn {
.button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
}
.input-group-btn .btn {
border-color: transparent;
background-color: @navbar-inverse-form-bg;
color: @navbar-inverse-form-icon;
}
.input-group.focus {
.form-control,
.input-group-btn .btn {
border-color: @brand-secondary;
color: @brand-secondary;
}
}
@media (max-width: @grid-float-breakpoint-max) {
border-color: @navbar-inverse-form-border;
border-width: 2px 0;
}
}
.navbar-text {
color: @inverse;
a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
}
}
.navbar-btn {
.button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
}
}
// Embossed navbar
.navbar-embossed {
@media (min-width: @grid-float-breakpoint) {
> .navbar-collapse {
border-radius: @navbar-border-radius;
.box-shadow(inset 0 -2px 0 fade(black, 15%));
}
&.navbar-inverse .navbar-nav {
.active > a,
.open > a {
.box-shadow(inset 0 -2px 0 fade(black, 15%));
}
}
}
}
// Large navbar
.navbar-lg {
min-height: @navbar-height-large;
.navbar-brand {
line-height: 1;
padding-top: ((@navbar-height-large - 24px) / 2);
padding-bottom: ((@navbar-height-large - 24px) / 2);
> [class*="fui-"] {
font-size: floor(@component-font-size-base * 1.6); // ~24px
line-height: 1;
}
}
.navbar-nav {
> li > a {
font-size: @component-font-size-base;
line-height: 1.6;
@media (min-width: @grid-float-breakpoint) {
padding-top: ((@navbar-height-large - 24px) / 2);
padding-bottom: ((@navbar-height-large - 24px) / 2);
}
}
}
.navbar-toggle {
height: @navbar-height-large;
line-height: @navbar-height-large;
}
.navbar-form {
.navbar-vertical-align(@input-height-small; @navbar-height-large);
}
.navbar-text {
.navbar-vertical-align(23px; @navbar-height-large);
}
.navbar-btn {
margin-top: ((@navbar-height-large - @input-height-base) / 2);
margin-bottom: ((@navbar-height-large - @input-height-base) / 2);
&.btn-sm {
margin-top: ((@navbar-height-large - @input-height-small) / 2);
margin-bottom: ((@navbar-height-large - @input-height-small) / 2);
}
&.btn-xs {
margin-top: ((@navbar-height-large - 25px) / 2);
margin-bottom: ((@navbar-height-large - 25px) / 2);
}
}
}
