Advertisement
Guest User

Untitled

a guest
Mar 9th, 2015
2,771
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.41 KB | None | 0 0
  1. /*
  2. To change this license header, choose License Headers in Project Properties.
  3. To change this template file, choose Tools | Templates
  4. and open the template in the editor.
  5. */
  6. /*
  7.     Created on : 2015-03-09, 16:41:41
  8.     Author     : chm
  9. */
  10.  
  11. $screen-xl:                  1440px !default;
  12. $screen-xl-min:              $screen-xl !default;
  13. //** Deprecated `$screen-lg-desktop` as of v3.0.1
  14. $screen-xl-desktop:          $screen-xl-min !default;
  15.  
  16.  
  17.  
  18. $screen-lg-max:              ($screen-xl-min - 1) !default;
  19.  
  20. $container-xlarge-desktop:      (1380px + $grid-gutter-width) !default;
  21. //** For `$screen-lg-min` and up.
  22. $container-xl:                 $container-xlarge-desktop !default;
  23.  
  24.  
  25.  
  26. .container {
  27.   @include container-fixed;
  28.  
  29.  
  30.   @media (min-width: $screen-xl-min) {
  31.     width: $container-xl;
  32.   }
  33. }
  34.  
  35.  
  36. // xLarge grid
  37. //
  38. // Columns, offsets, pushes, and pulls for the large desktop device range.
  39.  
  40. @media (min-width: $screen-xl-min) {
  41.   @include make-grid(xl);
  42. }
  43.  
  44.  
  45.  
  46.  
  47. // Generate the xlarge columns
  48. @mixin make-xl-column($columns, $gutter: $grid-gutter-width) {
  49.   position: relative;
  50.   min-height: 1px;
  51.   padding-left:  ($gutter / 2);
  52.   padding-right: ($gutter / 2);
  53.  
  54.   @media (min-width: $screen-xl-min) {
  55.     float: left;
  56.     width: percentage(($columns / $grid-columns));
  57.   }
  58. }
  59. @mixin make-xl-column-offset($columns) {
  60.   @media (min-width: $screen-xl-min) {
  61.     margin-left: percentage(($columns / $grid-columns));
  62.   }
  63. }
  64. @mixin make-xl-column-push($columns) {
  65.   @media (min-width: $screen-xl-min) {
  66.     left: percentage(($columns / $grid-columns));
  67.   }
  68. }
  69. @mixin make-xl-column-pull($columns) {
  70.   @media (min-width: $screen-xl-min) {
  71.     right: percentage(($columns / $grid-columns));
  72.   }
  73. }
  74.  
  75.  
  76.  
  77. @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
  78.   @for $i from (1 + 1) through $grid-columns {
  79.     $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
  80.   }
  81.   #{$list} {
  82.     position: relative;
  83.     // Prevent columns from collapsing when empty
  84.     min-height: 1px;
  85.     // Inner gutter via padding
  86.     padding-left:  ($grid-gutter-width / 2);
  87.     padding-right: ($grid-gutter-width / 2);
  88.   }
  89. }
  90.  
  91.  
  92.  
  93. @include responsive-invisibility('.visible-xl');
  94.  
  95.  
  96. .visible-xl-block,
  97. .visible-xl-inline,
  98. .visible-xl-inline-block {
  99.   display: none !important;
  100. }
  101.  
  102. .visible-lg-block {
  103.   @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
  104.     display: block !important;
  105.   }
  106. }
  107. .visible-lg-inline {
  108.   @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
  109.     display: inline !important;
  110.   }
  111. }
  112. .visible-lg-inline-block {
  113.   @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
  114.     display: inline-block !important;
  115.   }
  116. }
  117.  
  118.  
  119. @media (min-width: $screen-xl-min) {
  120.   @include responsive-visibility('.visible-xl');
  121. }
  122. .visible-xl-block {
  123.   @media (min-width: $screen-xl-min) {
  124.     display: block !important;
  125.   }
  126. }
  127. .visible-xl-inline {
  128.   @media (min-width: $screen-xl-min) {
  129.     display: inline !important;
  130.   }
  131. }
  132. .visible-xl-inline-block {
  133.   @media (min-width: $screen-xl-min) {
  134.     display: inline-block !important;
  135.   }
  136. }
  137.  
  138.  
  139. @media (min-width: $screen-lg-min) and  (max-width: $screen-lg-max){
  140.   @include responsive-invisibility('.hidden-lg');
  141. }
  142.  
  143. @media (min-width: $screen-xl-min) {
  144.   @include responsive-invisibility('.hidden-lg');
  145. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement