POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/css/less.html

   1 <div class="bs-docs-section">
   2   <h1 id="less" class="page-header">Using Less</h1>
   3
   4   <p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
   5
   6   <p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
   7
   8
   9   <h2 id="less-bootstrap">Compiling Bootstrap</h2>
  10   <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
  11   <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
  12
  13   <h2 id="less-variables">Variables</h2>
  14   <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
  15
  16   <h3 id="less-variables-colors">Colors</h3>
  17   <p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
  18   <div class="bs-example">
  19     <div class="color-swatches">
  20       <div class="color-swatch gray-darker"></div>
  21       <div class="color-swatch gray-dark"></div>
  22       <div class="color-swatch gray"></div>
  23       <div class="color-swatch gray-light"></div>
  24       <div class="color-swatch gray-lighter"></div>
  25     </div>
  26   </div>
  27 {% highlight scss %}
  28 @gray-darker:  lighten(#000, 13.5%); // #222
  29 @gray-dark:    lighten(#000, 20%);   // #333
  30 @gray:         lighten(#000, 33.5%); // #555
  31 @gray-light:   lighten(#000, 46.7%); // #777
  32 @gray-lighter: lighten(#000, 93.5%); // #eee
  33 {% endhighlight %}
  34
  35   <div class="bs-example">
  36     <div class="color-swatches">
  37       <div class="color-swatch brand-primary"></div>
  38       <div class="color-swatch brand-success"></div>
  39       <div class="color-swatch brand-info"></div>
  40       <div class="color-swatch brand-warning"></div>
  41       <div class="color-swatch brand-danger"></div>
  42     </div>
  43   </div>
  44 {% highlight scss %}
  45 @brand-primary: darken(#428bca, 6.5%); // #337ab7
  46 @brand-success: #5cb85c;
  47 @brand-info:    #5bc0de;
  48 @brand-warning: #f0ad4e;
  49 @brand-danger:  #d9534f;
  50 {% endhighlight %}
  51
  52   <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
  53 {% highlight scss %}
  54 // Use as-is
  55 .masthead {
  56   background-color: @brand-primary;
  57 }
  58
  59 // Reassigned variables in Less
  60 @alert-message-background: @brand-info;
  61 .alert {
  62   background-color: @alert-message-background;
  63 }
  64 {% endhighlight %}
  65
  66   <h3 id="less-variables-scaffolding">Scaffolding</h3>
  67   <p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
  68 {% highlight scss %}
  69 // Scaffolding
  70 @body-bg:    #fff;
  71 @text-color: @black-50;
  72 {% endhighlight %}
  73
  74   <h3 id="less-variables-links">Links</h3>
  75   <p>Easily style your links with the right color with only one value.</p>
  76 {% highlight scss %}
  77 // Variables
  78 @link-color:       @brand-primary;
  79 @link-hover-color: darken(@link-color, 15%);
  80
  81 // Usage
  82 a {
  83   color: @link-color;
  84   text-decoration: none;
  85
  86   &:hover {
  87     color: @link-hover-color;
  88     text-decoration: underline;
  89   }
  90 }
  91 {% endhighlight %}
  92   <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
  93
  94   <h3 id="less-variables-typography">Typography</h3>
  95   <p>Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
  96 {% highlight scss %}
  97 @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  98 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
  99 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 100 @font-family-base:        @font-family-sans-serif;
 101
 102 @font-size-base:          14px;
 103 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 104 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 105
 106 @font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
 107 @font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
 108 @font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
 109 @font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
 110 @font-size-h5:            @font-size-base;
 111 @font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 112
 113 @line-height-base:        1.428571429; // 20/14
 114 @line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 115
 116 @headings-font-family:    inherit;
 117 @headings-font-weight:    500;
 118 @headings-line-height:    1.1;
 119 @headings-color:          inherit;
 120 {% endhighlight %}
 121
 122   <h3 id="less-variables-icons">Icons</h3>
 123   <p>Two quick variables for customizing the location and filename of your icons.</p>
 124 {% highlight scss %}
 125 @icon-font-path:          "../fonts/";
 126 @icon-font-name:          "glyphicons-halflings-regular";
 127 {% endhighlight %}
 128
 129   <h3 id="less-variables-components">Components</h3>
 130   <p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
 131 {% highlight scss %}
 132 @padding-base-vertical:          6px;
 133 @padding-base-horizontal:        12px;
 134
 135 @padding-large-vertical:         10px;
 136 @padding-large-horizontal:       16px;
 137
 138 @padding-small-vertical:         5px;
 139 @padding-small-horizontal:       10px;
 140
 141 @padding-xs-vertical:            1px;
 142 @padding-xs-horizontal:          5px;
 143
 144 @line-height-large:              1.33;
 145 @line-height-small:              1.5;
 146
 147 @border-radius-base:             4px;
 148 @border-radius-large:            6px;
 149 @border-radius-small:            3px;
 150
 151 @component-active-color:         #fff;
 152 @component-active-bg:            @brand-primary;
 153
 154 @caret-width-base:               4px;
 155 @caret-width-large:              5px;
 156 {% endhighlight %}
 157
 158
 159   <h2 id="less-mixins-vendor">Vendor mixins</h2>
 160   <p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.</p>
 161
 162
 163   <h3 id="less-mixins-box-sizing">Box-sizing</h3>
 164   <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
 165   <p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
 166 {% highlight scss %}
 167 .box-sizing(@box-model) {
 168   -webkit-box-sizing: @box-model; // Safari <= 5
 169      -moz-box-sizing: @box-model; // Firefox <= 19
 170           box-sizing: @box-model;
 171 }
 172 {% endhighlight %}
 173
 174   <h3 id="less-mixins-rounded-corners">Rounded corners</h3>
 175   <p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
 176 {% highlight scss %}
 177 .border-top-radius(@radius) {
 178   border-top-right-radius: @radius;
 179    border-top-left-radius: @radius;
 180 }
 181 .border-right-radius(@radius) {
 182   border-bottom-right-radius: @radius;
 183      border-top-right-radius: @radius;
 184 }
 185 .border-bottom-radius(@radius) {
 186   border-bottom-right-radius: @radius;
 187    border-bottom-left-radius: @radius;
 188 }
 189 .border-left-radius(@radius) {
 190   border-bottom-left-radius: @radius;
 191      border-top-left-radius: @radius;
 192 }
 193 {% endhighlight %}
 194
 195   <h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
 196   <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the <strong>deprecated</strong> mixin to pick up the required <code>-webkit</code> prefix.</p>
 197   <p>The mixin is <strong>deprecated</strong> as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
 198   <p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
 199 {% highlight scss %}
 200 .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
 201   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
 202           box-shadow: @shadow;
 203 }
 204 {% endhighlight %}
 205
 206   <h3 id="less-mixins-transitions">Transitions</h3>
 207   <p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
 208   <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 209 {% highlight scss %}
 210 .transition(@transition) {
 211   -webkit-transition: @transition;
 212           transition: @transition;
 213 }
 214 .transition-property(@transition-property) {
 215   -webkit-transition-property: @transition-property;
 216           transition-property: @transition-property;
 217 }
 218 .transition-delay(@transition-delay) {
 219   -webkit-transition-delay: @transition-delay;
 220           transition-delay: @transition-delay;
 221 }
 222 .transition-duration(@transition-duration) {
 223   -webkit-transition-duration: @transition-duration;
 224           transition-duration: @transition-duration;
 225 }
 226 .transition-timing-function(@timing-function) {
 227   -webkit-transition-timing-function: @timing-function;
 228           transition-timing-function: @timing-function;
 229 }
 230 .transition-transform(@transition) {
 231   -webkit-transition: -webkit-transform @transition;
 232      -moz-transition: -moz-transform @transition;
 233        -o-transition: -o-transform @transition;
 234           transition: transform @transition;
 235 }
 236 {% endhighlight %}
 237
 238   <h3 id="less-mixins-transformations">Transformations</h3>
 239   <p>Rotate, scale, translate (move), or skew any object.</p>
 240   <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 241 {% highlight scss %}
 242 .rotate(@degrees) {
 243   -webkit-transform: rotate(@degrees);
 244       -ms-transform: rotate(@degrees); // IE9 only
 245           transform: rotate(@degrees);
 246 }
 247 .scale(@ratio; @ratio-y...) {
 248   -webkit-transform: scale(@ratio, @ratio-y);
 249       -ms-transform: scale(@ratio, @ratio-y); // IE9 only
 250           transform: scale(@ratio, @ratio-y);
 251 }
 252 .translate(@x; @y) {
 253   -webkit-transform: translate(@x, @y);
 254       -ms-transform: translate(@x, @y); // IE9 only
 255           transform: translate(@x, @y);
 256 }
 257 .skew(@x; @y) {
 258   -webkit-transform: skew(@x, @y);
 259       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
 260           transform: skew(@x, @y);
 261 }
 262 .translate3d(@x; @y; @z) {
 263   -webkit-transform: translate3d(@x, @y, @z);
 264           transform: translate3d(@x, @y, @z);
 265 }
 266
 267 .rotateX(@degrees) {
 268   -webkit-transform: rotateX(@degrees);
 269       -ms-transform: rotateX(@degrees); // IE9 only
 270           transform: rotateX(@degrees);
 271 }
 272 .rotateY(@degrees) {
 273   -webkit-transform: rotateY(@degrees);
 274       -ms-transform: rotateY(@degrees); // IE9 only
 275           transform: rotateY(@degrees);
 276 }
 277 .perspective(@perspective) {
 278   -webkit-perspective: @perspective;
 279      -moz-perspective: @perspective;
 280           perspective: @perspective;
 281 }
 282 .perspective-origin(@perspective) {
 283   -webkit-perspective-origin: @perspective;
 284      -moz-perspective-origin: @perspective;
 285           perspective-origin: @perspective;
 286 }
 287 .transform-origin(@origin) {
 288   -webkit-transform-origin: @origin;
 289      -moz-transform-origin: @origin;
 290       -ms-transform-origin: @origin; // IE9 only
 291           transform-origin: @origin;
 292 }
 293 {% endhighlight %}
 294
 295   <h3 id="less-mixins-animations">Animations</h3>
 296   <p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
 297   <p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
 298 {% highlight scss %}
 299 .animation(@animation) {
 300   -webkit-animation: @animation;
 301           animation: @animation;
 302 }
 303 .animation-name(@name) {
 304   -webkit-animation-name: @name;
 305           animation-name: @name;
 306 }
 307 .animation-duration(@duration) {
 308   -webkit-animation-duration: @duration;
 309           animation-duration: @duration;
 310 }
 311 .animation-timing-function(@timing-function) {
 312   -webkit-animation-timing-function: @timing-function;
 313           animation-timing-function: @timing-function;
 314 }
 315 .animation-delay(@delay) {
 316   -webkit-animation-delay: @delay;
 317           animation-delay: @delay;
 318 }
 319 .animation-iteration-count(@iteration-count) {
 320   -webkit-animation-iteration-count: @iteration-count;
 321           animation-iteration-count: @iteration-count;
 322 }
 323 .animation-direction(@direction) {
 324   -webkit-animation-direction: @direction;
 325           animation-direction: @direction;
 326 }
 327 {% endhighlight %}
 328
 329   <h3 id="less-mixins-opacity">Opacity</h3>
 330   <p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
 331 {% highlight scss %}
 332 .opacity(@opacity) {
 333   opacity: @opacity;
 334   // IE8 filter
 335   @opacity-ie: (@opacity * 100);
 336   filter: ~"alpha(opacity=@{opacity-ie})";
 337 }
 338 {% endhighlight %}
 339
 340   <h3 id="less-mixins-placeholder">Placeholder text</h3>
 341   <p>Provide context for form controls within each field.</p>
 342 {% highlight scss %}
 343 .placeholder(@color: @input-color-placeholder) {
 344   &::-moz-placeholder           { color: @color; } // Firefox
 345   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
 346   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
 347 }
 348 {% endhighlight %}
 349
 350   <h3 id="less-mixins-columns">Columns</h3>
 351   <p>Generate columns via CSS within a single element.</p>
 352 {% highlight scss %}
 353 .content-columns(@width; @count; @gap) {
 354   -webkit-column-width: @width;
 355      -moz-column-width: @width;
 356           column-width: @width;
 357   -webkit-column-count: @count;
 358      -moz-column-count: @count;
 359           column-count: @count;
 360   -webkit-column-gap: @gap;
 361      -moz-column-gap: @gap;
 362           column-gap: @gap;
 363 }
 364 {% endhighlight %}
 365
 366   <h3 id="less-mixins-gradients">Gradients</h3>
 367   <p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
 368 {% highlight scss %}
 369 #gradient > .vertical(#333; #000);
 370 #gradient > .horizontal(#333; #000);
 371 #gradient > .radial(#333; #000);
 372 {% endhighlight %}
 373   <p>You can also specify the angle of a standard two-color, linear gradient:</p>
 374 {% highlight scss %}
 375 #gradient > .directional(#333; #000; 45deg);
 376 {% endhighlight %}
 377   <p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
 378 {% highlight scss %}
 379 #gradient > .striped(#333; 45deg);
 380 {% endhighlight %}
 381   <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
 382 {% highlight scss %}
 383 #gradient > .vertical-three-colors(#777; #333; 25%; #000);
 384 #gradient > .horizontal-three-colors(#777; #333; 25%; #000);
 385 {% endhighlight %}
 386   <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
 387
 388
 389   <h2 id="less-mixins-utility">Utility mixins</h2>
 390   <p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
 391
 392   <h3 id="less-mixins-clearfix">Clearfix</h3>
 393   <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a>.</p>
 394 {% highlight scss %}
 395 // Mixin
 396 .clearfix() {
 397   &:before,
 398   &:after {
 399     content: " ";
 400     display: table;
 401   }
 402   &:after {
 403     clear: both;
 404   }
 405 }
 406
 407 // Usage
 408 .container {
 409   .clearfix();
 410 }
 411 {% endhighlight %}
 412
 413   <h3 id="less-mixins-centering">Horizontal centering</h3>
 414   <p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
 415 {% highlight scss %}
 416 // Mixin
 417 .center-block() {
 418   display: block;
 419   margin-left: auto;
 420   margin-right: auto;
 421 }
 422
 423 // Usage
 424 .container {
 425   width: 940px;
 426   .center-block();
 427 }
 428 {% endhighlight %}
 429
 430   <h3 id="less-mixins-sizing">Sizing helpers</h3>
 431   <p>Specify the dimensions of an object more easily.</p>
 432 {% highlight scss %}
 433 // Mixins
 434 .size(@width; @height) {
 435   width: @width;
 436   height: @height;
 437 }
 438 .square(@size) {
 439   .size(@size; @size);
 440 }
 441
 442 // Usage
 443 .image { .size(400px; 300px); }
 444 .avatar { .square(48px); }
 445 {% endhighlight %}
 446
 447   <h3 id="less-mixins-resizable">Resizable textareas</h3>
 448   <p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
 449 {% highlight scss %}
 450 .resizable(@direction: both) {
 451   // Options: horizontal, vertical, both
 452   resize: @direction;
 453   // Safari fix
 454   overflow: auto;
 455 }
 456 {% endhighlight %}
 457
 458   <h3 id="less-mixins-truncating">Truncating text</h3>
 459   <p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
 460 {% highlight scss %}
 461 // Mixin
 462 .text-overflow() {
 463   overflow: hidden;
 464   text-overflow: ellipsis;
 465   white-space: nowrap;
 466 }
 467
 468 // Usage
 469 .branch-name {
 470   display: inline-block;
 471   max-width: 200px;
 472   .text-overflow();
 473 }
 474 {% endhighlight %}
 475
 476   <h3 id="less-mixins-retina-images">Retina images</h3>
 477   <p>Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
 478 {% highlight scss %}
 479 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
 480   background-image: url("@{file-1x}");
 481
 482   @media
 483   only screen and (-webkit-min-device-pixel-ratio: 2),
 484   only screen and (   min--moz-device-pixel-ratio: 2),
 485   only screen and (     -o-min-device-pixel-ratio: 2/1),
 486   only screen and (        min-device-pixel-ratio: 2),
 487   only screen and (                min-resolution: 192dpi),
 488   only screen and (                min-resolution: 2dppx) {
 489     background-image: url("@{file-2x}");
 490     background-size: @width-1x @height-1x;
 491   }
 492 }
 493
 494 // Usage
 495 .jumbotron {
 496   .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
 497 }
 498 {% endhighlight %}
 499 </div>