less/patternfly/variables.less

   1 //
   2 // Variables
   3 // --------------------------------------------------
   4 // Bootstrap overrides and PatternFly-specific variables
   5
   6 // PatternFly-specific
   7 // -------------------
   8 @btn-default-bg-img-start:                                          #fafafa;
   9 @btn-default-bg-img-stop:                                           #ededed;
  10 @btn-xs-font-weight:                                                400;
  11 @card-pf-accented-border-top-color:                                 #39a5dc;
  12 @card-pf-bg-color:                                                  #fff;
  13 @card-pf-border-color:                                              #d1d1d1;
  14 @card-pf-border-top-color:                                          transparent;
  15 @card-pf-container-bg-color:                                        #f5f5f5;
  16 @card-pf-footer-bg-color:                                           #fafafa;
  17 @dropdown-divider-margin:                                           4px 1px;
  18 @dropdown-link-active-border-color:                                 #0076b7;
  19 @dropdown-link-hover-border-color:                                  #b3d3e7;
  20 @dropdown-link-focus-color:                                         #fff;
  21 @font-family-monospace:                                             Menlo, Monaco, Consolas, monospace;
  22 @fa-font-path:                                                      "../fonts/fontawesome/";
  23 @font-path:                                                         "../fonts";
  24 @gray-light-pf:                                                     #aaa;
  25 @gray-pf:                                                           #4d5258;
  26 @icon-font-name-fa:                                                 "FontAwesome";
  27 @icon-font-name-pf:                                                 "PatternFlyIcons";
  28 @icon-prefix:                                                       pficon;
  29 @img-bg-login:                                                      "bg-login.jpg";
  30 @img-path:                                                          "../img";
  31 @img-spinner:                                                       "spinner.gif";
  32 @img-spinner-lg:                                                    "spinner-lg.gif";
  33 @img-spinner-sm:                                                    "spinner-sm.gif";
  34 @img-spinner-xs:                                                    "spinner-xs.gif";
  35 @input-border-disabled:                                             #d4d4d4;
  36 @input-border-hover:                                                #7BB2DD;
  37 @list-group-top-border:                                             #e9e8e8;
  38 @login-bg-color:                                                    #080808;
  39 @login-container-bg-color:                                          #181818;
  40 @login-container-bg-color-rgba:                                     rgba(255, 255, 255, 0.055);
  41 @modal-title-padding-horizontal:                                    18px;
  42 @modal-title-padding-vertical:                                      10px;
  43 @navbar-pf-active-color:                                            #f1f1f1;
  44 @navbar-pf-bg-color:                                                #030303; //#393F45
  45 @navbar-pf-border-color:                                            #199dde;
  46 @navbar-pf-color:                                                   #cfcfcf;
  47 @navbar-pf-icon-bar-bg-color:                                       #fff;
  48 @navbar-pf-navbar-navbar-brand-min-width:                           270px;
  49 @navbar-pf-navbar-navbar-brand-padding:                             8px 0 7px;
  50 @navbar-pf-navbar-navbar-persistent-bg-color:                       #f6f6f6;
  51 @navbar-pf-navbar-navbar-persistent-border-color:                   #cecdcd;
  52 @pagination-padding-small-vertical:                                 0;
  53 @panel-default-border-color:                                        #bebdbd;
  54 @sidebar-pf-bg:                                                     #fafafa;
  55 @sidebar-pf-border-color:                                           #d0d0d0;
  56 @table-border-hover:                                                #a7cadf;
  57 @table-cell-padding-bottom:                                         3px;
  58 @table-cell-padding-top:                                            2px;
  59 // Reference variables declared in block above
  60 @img-path-alt:                                                      @img-path;
  61 @navbar-pf-navbar-header-border-color:                              lighten(@navbar-pf-bg-color, 15%);
  62 @navbar-pf-navbar-nav-active-active-bg-color:                       lighten(@navbar-pf-bg-color, 8%);
  63 @navbar-pf-navbar-nav-active-active-open-bg-color:                  lighten(@navbar-pf-bg-color, 11%);
  64 @navbar-pf-navbar-nav-active-bg-color:                              lighten(@navbar-pf-bg-color, 12.5%);
  65 @navbar-pf-navbar-primary-bg-color-start:                           lighten(@navbar-pf-bg-color, 10%); // #474C50;
  66 @navbar-pf-navbar-primary-bg-color-stop:                            @navbar-pf-bg-color; // #383F43;
  67 @navbar-pf-navbar-utility-border-color:                             lighten(@navbar-pf-bg-color, 15.5%);
  68 @navbar-pf-navbar-utility-color:                                    @navbar-pf-color;
  69 @navbar-pf-navbar-utility-hover-bg-color:                           lighten(@navbar-pf-bg-color, 12.5%);
  70 @nav-tabs-color:                                                    @gray-pf;
  71 // Reference variables declared in block above
  72 @navbar-pf-navbar-primary-context-bg-color-start:                   lighten(@navbar-pf-navbar-primary-bg-color-start, 8.5%);
  73 @navbar-pf-navbar-primary-context-bg-color-stop:                    lighten(@navbar-pf-navbar-primary-bg-color-stop, 11%);
  74 @navbar-pf-navbar-primary-hover-bg-color-start:                     lighten(@navbar-pf-navbar-primary-bg-color-start, 10%);
  75 @navbar-pf-navbar-primary-hover-bg-color-stop:                      lighten(@navbar-pf-navbar-primary-bg-color-stop, 10%);
  76 @navbar-pf-navbar-primary-hover-border-color:                       lighten(@navbar-pf-navbar-header-border-color, 20%);
  77 @navbar-pf-navbar-primary-context-border-color:                     lighten(@navbar-pf-navbar-header-border-color, 8%);
  78 @navbar-pf-navbar-primary-context-border-top-color:                 lighten(@navbar-pf-navbar-header-border-color, 7%);
  79 @navbar-pf-navbar-utility-hover-border-color:                       lighten(@navbar-pf-navbar-utility-border-color, 5%);
  80 @navbar-pf-navbar-utility-open-bg-color:                            lighten(@navbar-pf-navbar-utility-hover-bg-color, 7.5%);
  81 @navbar-pf-navbar-utility-open-border-color:                        lighten(@navbar-pf-navbar-utility-hover-border-color, 5%);
  82 // Reference variables declared in block above
  83 @navbar-pf-navbar-primary-active-bg-color-start:                    lighten(@navbar-pf-navbar-primary-hover-bg-color-start, 5%);
  84 @navbar-pf-navbar-primary-active-bg-color-stop:                     lighten(@navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%);
  85 @navbar-pf-navbar-primary-active-border-color:                      lighten(@navbar-pf-navbar-primary-hover-border-color, 5%);
  86 @navbar-pf-navbar-primary-context-hover-bg-color-start:             lighten(@navbar-pf-navbar-primary-context-bg-color-start, 5%);
  87 @navbar-pf-navbar-primary-context-hover-bg-color-stop:              lighten(@navbar-pf-navbar-primary-context-bg-color-stop, 7.5%);
  88 @navbar-pf-navbar-primary-context-hover-border-color:               lighten(@navbar-pf-navbar-primary-context-border-color, 5%);
  89 @navbar-pf-navbar-primary-context-hover-border-top-color:           lighten(@navbar-pf-navbar-primary-context-border-top-color, 6%);
  90 // Reference variables declared in block above
  91 @navbar-pf-navbar-primary-context-active-bg-color-start:            lighten(@navbar-pf-navbar-primary-context-hover-bg-color-start, 5%);
  92 @navbar-pf-navbar-primary-context-active-bg-color-stop:             lighten(@navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%);
  93 @navbar-pf-navbar-primary-context-active-border-color:              lighten(@navbar-pf-navbar-primary-context-hover-border-color, 5%);
  94 @navbar-pf-navbar-primary-context-active-border-top-color:          lighten(@navbar-pf-navbar-primary-context-hover-border-top-color, 6%);
  95 // References variable declared in block above
  96 @navbar-pf-navbar-primary-context-active-border-right-color:        @navbar-pf-navbar-primary-context-active-border-color;
  97
  98
  99 // Bootstrap overrides
 100 // -------------------
 101 @alert-info-border:                                                 #ccc;
 102 @alert-link-font-weight:                                            500;
 103 @alert-padding:                                                     7px;
 104 @body-bg:                                                           #ffffff;
 105 @border-radius-base:                                                1px;
 106 @brand-danger:                                                      #cc0000;
 107 @brand-info:                                                        #006e9c;
 108 @brand-primary:                                                     #00a8e1;
 109 @brand-success:                                                     #3f9c35;
 110 @brand-warning:                                                     #ec7a08;
 111 @breadcrumb-bg:                                                     transparent;
 112 @breadcrumb-separator:                                              "\f105";
 113 @btn-danger-bg:                                                     #a30000;
 114 @btn-danger-border:                                                 #781919;
 115 @btn-default-border:                                                #b7b7b7;
 116 @btn-font-weight:                                                   600;
 117 @btn-primary-bg:                                                    #0085cf;
 118 @btn-primary-border:                                                #006e9c;
 119 @caret-width-base:                                                  0;
 120 @dropdown-border:                                                   #b6b6b6;
 121 @dropdown-divider-bg:                                               #e5e5e5;
 122 @dropdown-link-active-color:                                        #fff;
 123 @dropdown-link-hover-bg:                                            #d4edfa;
 124 @font-family-base:                                                  "Open Sans", Helvetica, Arial, sans-serif;
 125 @font-size-base:                                                    12px;
 126 @gray-dark:                                                         lighten(#000, 20%);   // #333
 127 @gray-darker:                                                       lighten(#000, 13.5%); // #222
 128 @gray-light:                                                        lighten(#000, 60%);   // #999
 129 @gray-lighter:                                                      lighten(#000, 93.5%); // #eee
 130 @grid-gutter-width:                                                 40px;
 131 @icon-font-path:                                                    "../fonts/";
 132 @input-bg-disabled:                                                 #F8F8F8;
 133 @input-border:                                                      #BABABA;
 134 @line-height-base:                                                  1.66666667; // 20/12
 135 @link-color:                                                        #0099d3;
 136 @list-group-border:                                                 #f2f2f2;
 137 @list-group-border-radius:                                          0;
 138 @list-group-hover-bg:                                               #d4edfa;
 139 @link-hover-color:                                                  #00618a;
 140 @nav-tabs-border-color:                                             #e9e8e8;
 141 @nav-tabs-link-hover-border-color:                                  transparent;
 142 @padding-large-horizontal:                                          10px;
 143 @padding-base-horizontal:                                           6px;
 144 @padding-base-vertical:                                             2px;
 145 @padding-large-vertical:                                            6px;
 146 @pager-border-radius:                                               0;
 147 @pager-disabled-color:                                              #969696;
 148 @pagination-bg:                                                     #f5f5f5;
 149 @pagination-border:                                                 #bbbbbb;
 150 @pagination-hover-bg:                                               #ededed;
 151 @panel-inner-border:                                                #cecdcd;
 152 @popover-arrow-color:                                               #fff;
 153 @popover-arrow-outer-color:                                         #bbb;
 154 @popover-border-color:                                              #bbb;
 155 @popover-max-width:                                                 220px;
 156 @popover-title-bg:                                                  #f5f5f5;
 157 @pre-bg:                                                            #fcfcfc;
 158 @progress-bg:                                                       #ededed;
 159 @table-bg-accent:                                                   #f5f5f5;
 160 @table-bg-hover:                                                    #d5ecf9;
 161 @table-border-color:                                                #d1d1d1;
 162 @table-cell-padding:                                                10px;
 163 @tooltip-arrow-width:                                               8px;
 164 @tooltip-bg:                                                        #434343;
 165 @tooltip-max-width:                                                 220px;
 166 // Reference variables declared in block above
 167 @alert-danger-bg:                                                   @body-bg;
 168 @alert-danger-border:                                               @brand-danger;
 169 @alert-danger-text:                                                 @gray-dark;
 170 @alert-info-bg:                                                     @body-bg;
 171 @alert-info-text:                                                   @gray-dark;
 172 @alert-success-bg:                                                  @body-bg;
 173 @alert-success-border:                                              @brand-success;
 174 @alert-success-text:                                                @gray-dark;
 175 @alert-warning-bg:                                                  @body-bg;
 176 @alert-warning-border:                                              @brand-warning;
 177 @alert-warning-text:                                                @gray-dark;
 178 @badge-border-radius:                                               @border-radius-base;
 179 @border-radius-large:                                               @border-radius-base;
 180 @border-radius-small:                                               @border-radius-base;
 181 @breadcrumb-active-color:                                           @gray-pf;
 182 @breadcrumb-color:                                                  @gray-pf;
 183 @btn-default-bg:                                                    @gray-lighter;
 184 @btn-default-color:                                                 @gray-pf;
 185 @caret-width-large:                                                 @caret-width-base;
 186 @dropdown-fallback-border:                                          @dropdown-border;
 187 @dropdown-link-active-bg:                                           @link-color;
 188 @dropdown-link-hover-color:                                         @gray-pf;
 189 @font-size-h1:                                                      ceil(@font-size-base * 2); // ~24px
 190 @font-size-h2:                                                      ceil(@font-size-base * 1.8333); // ~22px
 191 @font-size-h3:                                                      ceil(@font-size-base * 1.3333); // ~16px
 192 @font-size-h5:                                                      ceil(@font-size-base * 1.0833); // ~13px
 193 @font-size-large:                                                   ceil(@font-size-base * 1.1666); // ~14px
 194 @font-size-small:                                                   ceil(@font-size-base * .9166); // ~11px
 195 @input-color:                                                       @gray-dark;
 196 @nav-tabs-active-link-hover-color:                                  @link-color;
 197 @nav-tabs-justified-link-border-color:                              @nav-tabs-border-color;
 198 @padding-small-horizontal:                                          @padding-base-horizontal;
 199 @padding-small-vertical:                                            @padding-base-vertical;
 200 @panel-danger-border:                                               @brand-danger;
 201 @panel-danger-heading-bg:                                           @brand-danger;
 202 @panel-info-border:                                                 @brand-info;
 203 @panel-info-heading-bg:                                             @brand-info;
 204 @panel-primary-text:                                                @body-bg;
 205 @panel-success-border:                                              @brand-success;
 206 @panel-success-heading-bg:                                          @brand-success;
 207 @panel-warning-border:                                              @brand-warning;
 208 @panel-warning-heading-bg:                                          @brand-warning;
 209 @state-warning-text:                                                @brand-warning;
 210 // Reference variable declared in block above
 211 @panel-danger-text:                                                 @panel-primary-text;
 212 @panel-info-text:                                                   @panel-primary-text;
 213 @panel-success-text:                                                @panel-primary-text;
 214 @panel-warning-text:                                                @panel-primary-text;
 215
 216 // PatternFly-specific variables based on Bootstrap overides
 217 // ---------------------------------------------------------
 218 @btn-danger-bg-img-start:                                           @brand-danger;
 219 @btn-danger-bg-img-stop:                                            @btn-danger-bg;
 220 @btn-primary-bg-img-start:                                          @brand-primary;
 221 @btn-primary-bg-img-stop:                                           @btn-primary-bg;
 222 @dropdown-link-focus-bg:                                            @link-color;
 223 @line-height-computed:                                              floor((@font-size-base * @line-height-base));
 224 @progress-sm:                                                       @line-height-computed - 6;
 225 @progress-xs:                                                       @line-height-computed - 14;
 226 @syntax-1:                                                          @btn-danger-bg;
 227 @syntax-2:                                                          @gray-dark;
 228 @syntax-3:                                                          @brand-success;
 229 @syntax-4:                                                          @brand-info;
 230 @tooltip-font-size:                                                 @font-size-base;