less/patternfly/variables.less

   1 //
   2 // Variables
   3 // --------------------------------------------------
   4 // Bootstrap overrides and PatternFly-specific variables
   5
   6 /* Bootstrap overrides */
   7 @alert-danger-bg:                                                   @body-bg;
   8 @alert-danger-border:                                               @brand-danger;
   9 @alert-danger-text:                                                 @gray-dark;
  10 @alert-info-bg:                                                     @body-bg;
  11 @alert-info-border:                                                 #ccc;
  12 @alert-info-text:                                                   @gray-dark;
  13 @alert-link-font-weight:                                            500;
  14 @alert-padding:                                                     7px;
  15 @alert-success-bg:                                                  @body-bg;
  16 @alert-success-border:                                              @brand-success;
  17 @alert-success-text:                                                @gray-dark;
  18 @alert-warning-bg:                                                  @body-bg;
  19 @alert-warning-border:                                              @brand-warning;
  20 @alert-warning-text:                                                @gray-dark;
  21 @badge-border-radius:                                               @border-radius-base;
  22 @border-radius-base:                                                1px;
  23 @border-radius-large:                                               @border-radius-base;
  24 @border-radius-small:                                               @border-radius-base;
  25 @brand-primary:                                                     #1cace9;
  26 @brand-success:                                                     #5cb75c;
  27 @brand-info:                                                        #27799c;
  28 @brand-warning:                                                     #eb7720;
  29 @brand-danger:                                                      #c90813;
  30 @breadcrumb-active-color:                                           @gray-pf;
  31 @breadcrumb-bg:                                                     transparent;
  32 @breadcrumb-color:                                                  @gray-pf;
  33 @breadcrumb-separator:                                              @fa-var-angle-right;
  34 @btn-danger-bg:                                                     #ab070f;
  35 @btn-danger-border:                                                 #781919;
  36 @btn-default-bg:                                                    @gray-lighter;
  37 @btn-default-border:                                                #b7b7b7;
  38 @btn-default-color:                                                 @gray-pf;
  39 @btn-font-weight:                                                   600;
  40 @btn-primary-bg:                                                    #189AD1;
  41 @btn-primary-border:                                                #267DA1;
  42 @caret-width-base:                                                  0;
  43 @caret-width-large:                                                 @caret-width-base;
  44 @dropdown-border:                                                   #b6b6b6;
  45 @dropdown-divider-bg:                                               #e5e5e5;
  46 @dropdown-fallback-border:                                          @dropdown-border;
  47 @dropdown-link-active-bg:                                           @link-color;
  48 @dropdown-link-active-color:                                        #fff;
  49 @dropdown-link-hover-bg:                                            #d4edfa;
  50 @dropdown-link-hover-color:                                         @gray-pf;
  51 @font-family-base:                                                  "Open Sans", Helvetica, Arial, sans-serif;
  52 @font-size-base:                                                    11px;
  53 @font-size-large:                                                   ceil(@font-size-base * 1.1818); // ~13px
  54 @font-size-small:                                                   ceil(@font-size-base * .9090); // ~10px
  55 @icon-font-path:                                                    "../../components/bootstrap/dist/fonts/";
  56 @input-bg-disabled:                                                 #F8F8F8;
  57 @input-border:                                                      #BABABA;
  58 @input-color:                                                       @gray-dark;
  59 @input-height-base:                                                 26px;
  60 @line-height-base:                                                  1.81818181; // 20/11
  61 @link-color:                                                        #0099d3;
  62 @list-group-border:                                                 @input-border;
  63 @list-group-hover-bg:                                               #d4edfa;
  64 @link-hover-color:                                                  #00618a;
  65 @nav-tabs-active-link-hover-color:                                  @link-color;
  66 @nav-tabs-border-color:                                             #e9e8e8;
  67 @nav-tabs-justified-link-border-color:                              @nav-tabs-border-color;
  68 @nav-tabs-link-hover-border-color:                                  transparent;
  69 @padding-base-horizontal:                                           6px;
  70 @padding-base-vertical:                                             2px;
  71 @padding-large-horizontal:                                          10px;
  72 @padding-large-vertical:                                            6px;
  73 @padding-small-horizontal:                                          @padding-base-horizontal;
  74 @padding-small-vertical:                                            @padding-base-vertical;
  75 @pager-border-radius:                                               0;
  76 @pager-disabled-color:                                              #969696;
  77 @pagination-bg:                                                     #f5f5f5;
  78 @pagination-border:                                                 #bbbbbb;
  79 @pagination-hover-bg:                                               #ededed;
  80 @panel-danger-border:                                               @brand-danger;
  81 @panel-danger-heading-bg:                                           @brand-danger;
  82 @panel-danger-text:                                                 @panel-primary-text;
  83 @panel-info-border:                                                 @brand-info;
  84 @panel-info-heading-bg:                                             @brand-info;
  85 @panel-info-text:                                                   @panel-primary-text;
  86 @panel-inner-border:                                                #cecdcd;
  87 @panel-success-border:                                              @brand-success;
  88 @panel-success-heading-bg:                                          @brand-success;
  89 @panel-success-text:                                                @panel-primary-text;
  90 @panel-warning-border:                                              @brand-warning;
  91 @panel-warning-heading-bg:                                          @brand-warning;
  92 @panel-warning-text:                                                @panel-primary-text;
  93 @popover-arrow-color:                                               #fff;
  94 @popover-arrow-outer-color:                                         #bbb;
  95 @popover-border-color:                                              #bbb;
  96 @popover-max-width:                                                 220px;
  97 @popover-title-bg:                                                  #f5f5f5;
  98 @tooltip-arrow-width:                                               8px;
  99 @tooltip-bg:                                                        #434343;
 100 @tooltip-max-width:                                                 220px;
 101
 102 /* PatternFly-specific */
 103 @btn-danger-bg-img-start:                                           #d60915;
 104 @btn-danger-bg-img-stop:                                            #ac0710;
 105 @btn-default-bg-img-start:                                          #fafafa;
 106 @btn-default-bg-img-stop:                                           #ededed;
 107 @btn-primary-bg-img-start:                                          #1CACE8;
 108 @btn-primary-bg-img-stop:                                           #1998CC;
 109 @btn-xs-font-weight:                                                400;
 110 @dropdown-divider-margin:                                           4px 1px;
 111 @dropdown-link-focus-bg:                                            @link-color;
 112 @dropdown-link-focus-color:                                         #fff;
 113 @fa-font-path:                                                      "../../components/font-awesome/fonts";
 114 @font-path:                                                         "../fonts";
 115 @gray-light-pf:                                                     #aaa;
 116 @gray-pf:                                                           #4d5258;
 117 @icon-font-name-fa:                                                 "FontAwesome";
 118 @icon-font-name-pf:                                                 "PatternFlyIcons-webfont";
 119 @icon-prefix:                                                       pficon;
 120 @img-badge-ie8:                                                     "logo.png";
 121 @img-badge-ie8-height:                                              69px;
 122 @img-badge-ie8-width:                                               73px;
 123 @img-bg-login:                                                      "bg-login.jpg";
 124 @img-brand-ie8:                                                     "brand.png";
 125 @img-brand-lg-ie8:                                                  "brand-lg.png";
 126 @img-path:                                                          "../img";
 127 @img-path-alt:                                                      @img-path;
 128 @input-border-disabled:                                             #d4d4d4;
 129 @list-group-focus-border:                                           #0076b7;
 130 @list-group-hover-border:                                           #b3d3e7;
 131 @login-bg-color:                                                    #080808;
 132 @login-container-bg-color:                                          #181818;
 133 @login-container-bg-color-rgba:                                     rgba(255, 255, 255, 0.055);
 134 @modal-title-padding-horizontal:                                    18px;
 135 @modal-title-padding-vertical:                                      10px;
 136 @nav-tabs-color:                                                    @gray-pf;
 137 @navbar-pf-bg-color:                                                #030303; //#393F45
 138 @navbar-pf-border-color:                                            #199dde;
 139 @navbar-pf-active-color:                                            #f1f1f1;
 140 @navbar-pf-color:                                                   #cfcfcf;
 141 @navbar-pf-icon-bar-bg-color:                                       #fff;
 142 @navbar-pf-navbar-header-border-color:                              lighten(@navbar-pf-bg-color, 15%);
 143 @navbar-pf-navbar-nav-active-bg-color:                              lighten(@navbar-pf-bg-color, 12.5%);
 144 @navbar-pf-navbar-nav-active-active-bg-color:                       lighten(@navbar-pf-bg-color, 8%);
 145 @navbar-pf-navbar-nav-active-active-open-bg-color:                  lighten(@navbar-pf-bg-color, 11%);;
 146 @navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px;
 147 @navbar-pf-navbar-navbar-brand-min-width:                           270px;
 148 @navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6;
 149 @navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd;
 150 @navbar-pf-navbar-primary-active-bg-color-start:                    lighten(@navbar-pf-navbar-primary-hover-bg-color-start, 5%);
 151 @navbar-pf-navbar-primary-active-bg-color-stop:                     lighten(@navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%);
 152 @navbar-pf-navbar-primary-active-border-color:                      lighten(@navbar-pf-navbar-primary-hover-border-color, 5%);
 153 @navbar-pf-navbar-primary-bg-color-start:                           lighten(@navbar-pf-bg-color, 10%); // #474C50;
 154 @navbar-pf-navbar-primary-bg-color-stop:                            @navbar-pf-bg-color; // #383F43;
 155 @navbar-pf-navbar-primary-context-active-bg-color-start:            lighten(@navbar-pf-navbar-primary-context-hover-bg-color-start, 5%);
 156 @navbar-pf-navbar-primary-context-active-bg-color-stop:             lighten(@navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%);
 157 @navbar-pf-navbar-primary-context-active-border-color:              lighten(@navbar-pf-navbar-primary-context-hover-border-color, 5%);
 158 @navbar-pf-navbar-primary-context-active-border-right-color:        @navbar-pf-navbar-primary-context-active-border-color;
 159 @navbar-pf-navbar-primary-context-active-border-top-color:          lighten(@navbar-pf-navbar-primary-context-hover-border-top-color, 6%);
 160 @navbar-pf-navbar-primary-context-bg-color-start:                   lighten(@navbar-pf-navbar-primary-bg-color-start, 8.5%);
 161 @navbar-pf-navbar-primary-context-bg-color-stop:                    lighten(@navbar-pf-navbar-primary-bg-color-stop, 11%);
 162 @navbar-pf-navbar-primary-context-border-color:                     lighten(@navbar-pf-navbar-header-border-color, 8%);
 163 @navbar-pf-navbar-primary-context-border-top-color:                 lighten(@navbar-pf-navbar-header-border-color, 7%);
 164 @navbar-pf-navbar-primary-context-hover-bg-color-start:             lighten(@navbar-pf-navbar-primary-context-bg-color-start, 5%);
 165 @navbar-pf-navbar-primary-context-hover-bg-color-stop:              lighten(@navbar-pf-navbar-primary-context-bg-color-stop, 7.5%);
 166 @navbar-pf-navbar-primary-context-hover-border-color:               lighten(@navbar-pf-navbar-primary-context-border-color, 5%);
 167 @navbar-pf-navbar-primary-context-hover-border-top-color:           lighten(@navbar-pf-navbar-primary-context-border-top-color, 6%);
 168 @navbar-pf-navbar-primary-hover-bg-color-start:                     lighten(@navbar-pf-navbar-primary-bg-color-start, 10%);
 169 @navbar-pf-navbar-primary-hover-bg-color-stop:                      lighten(@navbar-pf-navbar-primary-bg-color-stop, 10%);
 170 @navbar-pf-navbar-primary-hover-border-color:                       lighten(@navbar-pf-navbar-header-border-color, 20%);
 171 @navbar-pf-navbar-utility-border-color:                             lighten(@navbar-pf-bg-color, 15.5%);
 172 @navbar-pf-navbar-utility-color:                                    @navbar-pf-color;
 173 @navbar-pf-navbar-utility-hover-bg-color:                           lighten(@navbar-pf-bg-color, 12.5%);
 174 @navbar-pf-navbar-utility-hover-border-color:                       lighten(@navbar-pf-navbar-utility-border-color, 5%);
 175 @navbar-pf-navbar-utility-open-bg-color:                            lighten(@navbar-pf-navbar-utility-hover-bg-color, 7.5%);
 176 @navbar-pf-navbar-utility-open-border-color:                        lighten(@navbar-pf-navbar-utility-hover-border-color, 5%);
 177 @pagination-padding-small-vertical:                                 0;
 178 @panel-default-border-color:                                        #bebdbd;
 179 @tooltip-font-size:                                                 @font-size-base;