Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 1... Línea 1...
1 
/// Grid system
 1 
// Grid system
2 
//
 2 
//
3 
// Generate semantic grid columns with these mixins.
 3 
// Generate semantic grid columns with these mixins.
Línea 4... Línea -...
4 
 
 - 
 
5 
@mixin make-container($gutter: $grid-gutter-width) {
 - 
 
6 
  width: 100%;
 - 
 
7 
  padding-right: $gutter * .5;
 - 
 
8 
  padding-left: $gutter * .5;
 - 
 
9 
  margin-right: auto;
 - 
 
10 
  margin-left: auto;
 - 
 
11 
}
 - 
 
12 
 
 4 
 
- 
 
 5 
@mixin make-row($gutter: $grid-gutter-width) {
- 
 
 6 
  --#{$prefix}gutter-x: #{$gutter};
13 
@mixin make-row($gutter: $grid-gutter-width) {
 7 
  --#{$prefix}gutter-y: 0;
14 
  display: flex;
 8 
  display: flex;
15 
  flex-wrap: wrap;
 - 
 
16 
  margin-right: -$gutter * .5;
 - 
 
17 
  margin-left: -$gutter * .5;
 - 
 
18 
}
 - 
 
19 
 
 9 
  flex-wrap: wrap;
20 
// For each breakpoint, define the maximum width of the container in a media query
 10 
  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
21 
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
 - 
 
22 
  @each $breakpoint, $container-max-width in $max-widths {
 11 
  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
23 
    @include media-breakpoint-up($breakpoint, $breakpoints) {
 - 
 
24 
      max-width: $container-max-width;
 - 
 
25 
    }
 - 
 
26 
  }
 12 
  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
27 
  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
 13 
  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
Línea 28... Línea 14...
28 
}
 14 
}
29 
 
 15 
 
- 
 
 16 
@mixin make-col-ready() {
30 
@mixin make-col-ready($gutter: $grid-gutter-width) {
 17 
  // Add box sizing if only the grid is loaded
31 
  position: relative;
 18 
  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
32 
  // Prevent columns from becoming too narrow when at smaller grid tiers by
 19 
  // Prevent columns from becoming too narrow when at smaller grid tiers by
- 
 
 20 
  // always setting `width: 100%;`. This works because we set the width
33 
  // always setting `width: 100%;`. This works because we use `flex` values
 21 
  // later on to override this initial width.
- 
 
 22 
  flex-shrink: 0;
34 
  // later on to override this initial width.
 23 
  width: 100%;
- 
 
 24 
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
35 
  width: 100%;
 25 
  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
36 
  padding-right: $gutter * .5;
 26 
  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
Línea 37... Línea 27...
37 
  padding-left: $gutter * .5;
 27 
  margin-top: var(--#{$prefix}gutter-y);
- 
 
 28 
}
- 
 
 29 
 
38 
}
 30 
@mixin make-col($size: false, $columns: $grid-columns) {
39 
 
 - 
 
- 
 
 31 
  @if $size {
40 
@mixin make-col($size, $columns: $grid-columns) {
 32 
    flex: 0 0 auto;
41 
  flex: 0 0 percentage(divide($size, $columns));
 33 
    width: percentage(divide($size, $columns));
42 
  // Add a `max-width` to ensure content within each column does not blow out
 34 
 
- 
 
 35 
  } @else {
43 
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 36 
    flex: 1 1 0;
Línea 44... Línea 37...
44 
  // do not appear to require this.
 37 
    max-width: 100%;
45 
  max-width: percentage(divide($size, $columns));
 38 
  }
46 
}
 39 
}
47 
 
 - 
 
48 
@mixin make-col-auto() {
 40 
 
Línea 49... Línea 41...
49 
  flex: 0 0 auto;
 41 
@mixin make-col-auto() {
50 
  width: auto;
 42 
  flex: 0 0 auto;
51 
  max-width: 100%; // Reset earlier grid tiers
 43 
  width: auto;
52 
}
 44 
}
Línea 53... Línea 45...
53 
 
 45 
 
54 
@mixin make-col-offset($size, $columns: $grid-columns) {
 46 
@mixin make-col-offset($size, $columns: $grid-columns) {
55 
  $num: divide($size, $columns);
 47 
  $num: divide($size, $columns);
56 
  margin-left: if($num == 0, 0, percentage($num));
 48 
  margin-left: if($num == 0, 0, percentage($num));
57 
}
 49 
}
58 
 
 50 
 
59 
// Row columns
 51 
// Row columns
60 
//
 52 
//
61 
// Specify on a parent element(e.g., .row) to force immediate children into NN
 53 
// Specify on a parent element(e.g., .row) to force immediate children into NN
- 
 
 54 
// number of columns. Supports wrapping to new lines, but does not do a Masonry
- 
 
 55 
// style grid.
- 
 
 56 
@mixin row-cols($count) {
- 
 
 57 
  > * {
- 
 
 58 
    flex: 0 0 auto;
- 
 
 59 
    width: percentage(divide(1, $count));
- 
 
 60 
  }
- 
 
 61 
}
- 
 
 62 
 
- 
 
 63 
// Framework grid generation
- 
 
 64 
//
- 
 
 65 
// Used only by Bootstrap to generate the correct number of grid classes given
- 
 
 66 
// any value of `$grid-columns`.
- 
 
 67 
 
- 
 
 68 
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
- 
 
 69 
  @each $breakpoint in map-keys($breakpoints) {
- 
 
 70 
    $infix: breakpoint-infix($breakpoint, $breakpoints);
- 
 
 71 
 
- 
 
 72 
    @include media-breakpoint-up($breakpoint, $breakpoints) {
- 
 
 73 
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
- 
 
 74 
      .col#{$infix} {
- 
 
 75 
        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
- 
 
 76 
      }
- 
 
 77 
 
- 
 
 78 
      .row-cols#{$infix}-auto > * {
- 
 
 79 
        @include make-col-auto();
- 
 
 80 
      }
- 
 
 81 
 
- 
 
 82 
      @if $grid-row-columns > 0 {
- 
 
 83 
        @for $i from 1 through $grid-row-columns {
- 
 
 84 
          .row-cols#{$infix}-#{$i} {
- 
 
 85 
            @include row-cols($i);
- 
 
 86 
          }
- 
 
 87 
        }
- 
 
 88 
      }
- 
 
 89 
 
- 
 
 90 
      .col#{$infix}-auto {
- 
 
 91 
        @include make-col-auto();
- 
 
 92 
      }
- 
 
 93 
 
- 
 
 94 
      @if $columns > 0 {
- 
 
 95 
        @for $i from 1 through $columns {
- 
 
 96 
          .col#{$infix}-#{$i} {
- 
 
 97 
            @include make-col($i, $columns);
- 
 
 98 
          }
- 
 
 99 
        }
- 
 
 100 
 
- 
 
 101 
        // `$columns - 1` because offsetting by the width of an entire row isn't possible
- 
 
 102 
        @for $i from 0 through ($columns - 1) {
- 
 
 103 
          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
- 
 
 104 
            .offset#{$infix}-#{$i} {
- 
 
 105 
              @include make-col-offset($i, $columns);
- 
 
 106 
            }
- 
 
 107 
          }
- 
 
 108 
        }
- 
 
 109 
      }
- 
 
 110 
 
- 
 
 111 
      // Gutters
- 
 
 112 
      //
- 
 
 113 
      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
- 
 
 114 
      @each $key, $value in $gutters {
- 
 
 115 
        .g#{$infix}-#{$key},
- 
 
 116 
        .gx#{$infix}-#{$key} {
- 
 
 117 
          --#{$prefix}gutter-x: #{$value};
- 
 
 118 
        }
- 
 
 119 
 
- 
 
 120 
        .g#{$infix}-#{$key},
- 
 
 121 
        .gy#{$infix}-#{$key} {
- 
 
 122 
          --#{$prefix}gutter-y: #{$value};
- 
 
 123 
        }
- 
 
 124 
      }
- 
 
 125 
    }
- 
 
 126 
  }
- 
 
 127 
}
- 
 
 128 
 
- 
 
 129 
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
- 
 
 130 
  @each $breakpoint in map-keys($breakpoints) {
- 
 
 131 
    $infix: breakpoint-infix($breakpoint, $breakpoints);
- 
 
 132 
 
- 
 
 133 
    @include media-breakpoint-up($breakpoint, $breakpoints) {
- 
 
 134 
      @if $columns > 0 {
- 
 
 135 
        @for $i from 1 through $columns {
- 
 
 136 
          .g-col#{$infix}-#{$i} {
- 
 
 137 
            grid-column: auto / span $i;
- 
 
 138 
          }
- 
 
 139 
        }
- 
 
 140 
 
- 
 
 141 
        // Start with `1` because `0` is an invalid value.
- 
 
 142 
        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
- 
 
 143 
        @for $i from 1 through ($columns - 1) {
62 
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
 144 
          .g-start#{$infix}-#{$i} {
63 
// style grid.
 145 
            grid-column-start: $i;