@c8y/style/variables/_navbar-vars.less

Styles for Cumulocity IoT applications

@navbar-height:                                 var(--c8y-navbar-height);
@navbar-margin-bottom:                          var(--c8y-navbar-margin-bottom);

@navbar-background-default:                     var(--c8y-navbar-background-default);
@navbar-color-default:                          var(--c8y-navbar-color-default);
@navbar-border-color:                           var(--c8y-navbar-border-color);

@navbar-padding-horizontal:                     calc(@grid-gutter-width * .5);
@navbar-padding-vertical:                       calc(@margin-16 - 2px);
@navbar-collapse-max-height:                    340px;

// c8y-nav-stacked
@nav-stacked-active-bg:                         @gray-90;
@nav-stacked-color-active:                      @text-color;

/* NAVLINK */
@navlink-background-default:                    var(--c8y-navlink-background-default);
@navlink-background-active:                     var(--c8y-navlink-background-active);
@navlink-background-hover:                      var(--c8y-navlink-background-hover);
@navlink-background-focus:                      var(--c8y-navlink-background-focus);

@navlink-color-default:                         var(--c8y-navbar-color-link);
@navlink-color-active:                          var(--c8y-navbar-color-active);
@navlink-color-hover:                           var(--c8y-navbar-color-link-hover);
@navlink-color-focus:                           var(--c8y-navbar-color-link-hover);

@navlink-padding:                               var(--c8y-navlink-padding-vertical) var(--c8y-navlink-padding-horizontal);


@nav-tabs-background-default:                   var(--c8y-nav-tabs-background-default);
@nav-tabs-background-actions:                   var(--c8y-nav-tabs-background-actions);
@nav-tabs-background-hover:                     var(--c8y-nav-tabs-background-hover);
@nav-tabs-background-active:                    var(--c8y-nav-tabs-background-active);
@nav-tabs-background-focus:                     var(--c8y-nav-tabs-background-focus);

@nav-tabs-color-default:                        var(--c8y-nav-tabs-color-default);
@nav-tabs-color-hover:                          var(--c8y-nav-tabs-color-hover);
@nav-tabs-color-active:                         var(--c8y-nav-tabs-color-active);
@nav-tabs-color-focus:                          var(--c8y-nav-tabs-color-active);

@nav-tabs-border-color-default:                 var(--c8y-nav-tabs-border-color-default);
@nav-tabs-border-color-active:                  var(--c8y-nav-tabs-border-color-active);
@nav-tabs-border-width-default:                 var(--c8y-nav-tabs-border-width-default);
@nav-tabs-border-width-active:                  var(--c8y-nav-tabs-border-width-active);

@nav-tabs-icon-size:                            var(--c8y-nav-tabs-icon-size);
@nav-tabs-icon-color-default:                   var(--c8y-nav-tabs-icon-color-default);
@nav-tabs-icon-color-hover:                     var(--c8y-nav-tabs-icon-color-hover);
@nav-tabs-icon-color-active:                    var(--c8y-nav-tabs-icon-color-active);

@nav-tabs-padding:                              var(--c8y-nav-tabs-padding-vertical) var(--c8y-nav-tabs-padding-horizontal);

//tabs vertical
@nav-tabs-vertical-width:                       var(--c8y-nav-tabs-vertical-width);
@nav-tabs-vertical-padding:                     var(--c8y-nav-tabs-vertical-padding-vertical) var(--c8y-nav-tabs-vertical-padding-horizontal);

/* NAVPILLS */
@nav-pills-padding:                             var(--c8y-nav-pills-padding-vertical) var(--c8y-nav-pills-padding-horizontal);
@nav-pills-background-active:                   var(--c8y-nav-pills-background-active);
@nav-pills-color-active:                        var(--c8y-nav-pills-color-active);
@nav-pills-border-radius:                       var(--c8y-nav-pills-border-radius);