// // Proto CNS - Custom properties // -------------------------------------------------- // Core variables and mixins @import "bootstrap/bootstrap.less"; // Menu @import "proto-cns/menu.less"; // Picturebook @import "proto-cns/picturebook.less"; // Header header { @header-height: floor(@font-size-h3 * @headings-line-height) + @line-height-computed + (@line-height-computed / 2); min-height: @header-height + @line-height-computed; margin-bottom: @line-height-computed; background-color: desaturate(@brand-primary, 20%); #gradient .vertical(@start-color: lighten(desaturate(@brand-primary, 20%), 10%); @end-color: desaturate(@brand-primary, 20%)); .banner { position: relative; > .logo { h1 { a { color: #fff; text-decoration: none; .user-select(@select: none); } img { max-height: (@header-height - 10); margin-top: -@line-height-computed + 5 ; margin-bottom: -(@line-height-computed / 2) + 5; vertical-align: top; } span { margin-left: @padding-large-horizontal; } } } > .search { form { margin-top: @header-height - (@line-height-computed / 2) - @input-height-small; margin-bottom: (@line-height-computed / 2); margin-left: @padding-large-horizontal; } } } .tabs-default { min-height: @line-height-computed; margin: 0 floor(@grid-gutter-width / -2); padding: 0 floor(@grid-gutter-width / 2); border-color: darken(@brand-primary, 10%); ul li { &.active { a { border-color: darken(@brand-primary, 10%) darken(@brand-primary, 10%) transparent; } } &:not(.active) { a { color: #f8f8f8; &:hover, &:focus { color: #fff; } } } } } } // Drawer @media screen and (max-width: @screen-xs-max) { #drawer-toolbar { .drawer-toolbar-header { background-color: desaturate(@brand-primary, 20%); #gradient .vertical(@start-color: lighten(desaturate(@brand-primary, 20%), 10%); @end-color: desaturate(@brand-primary, 20%)); } } } // Footer footer { margin-bottom: @line-height-computed; }