Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • naicko's avatar
    Update scss mixins to comply with scss-linting rules (#22151) · 890c6041
    naicko authored 
    * Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus
    890c6041
_grid.scss 2.96 KiB
1 
/// Grid system
2 
//
3 
// Generate semantic grid columns with these mixins.
4
5 
@mixin make-container($gutters: $grid-gutter-widths) {
6 
  position: relative;
7 
  margin-right: auto;
8 
  margin-left: auto;
9
10 
  @each $breakpoint in map-keys($gutters) {
11 
    @include media-breakpoint-up($breakpoint) {
12 
      $gutter: map-get($gutters, $breakpoint);
13 
      padding-right: ($gutter / 2);
14 
      padding-left:  ($gutter / 2);
15 
    }
16 
  }
17 
}
18
19
20 
// For each breakpoint, define the maximum width of the container in a media query
21 
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
22 
  @each $breakpoint, $container-max-width in $max-widths {
23 
    @include media-breakpoint-up($breakpoint, $breakpoints) {
24 
      width: $container-max-width;
25 
      max-width: 100%;
26 
    }
27 
  }
28 
}
29
30 
@mixin make-gutters($gutters: $grid-gutter-widths) {
31 
  @each $breakpoint in map-keys($gutters) {
32 
    @include media-breakpoint-up($breakpoint) {
33 
      $gutter: map-get($gutters, $breakpoint);
34 
      padding-right: ($gutter / 2);
35 
      padding-left:  ($gutter / 2);
36 
    }
37 
  }
38 
}
39
40 
@mixin make-row($gutters: $grid-gutter-widths) {
41 
  display: flex;
42 
  flex-wrap: wrap;
43
44 
  @each $breakpoint in map-keys($gutters) {
45 
    @include media-breakpoint-up($breakpoint) {
46 
      $gutter: map-get($gutters, $breakpoint);
47 
      margin-right: ($gutter / -2);
48 
      margin-left:  ($gutter / -2);
49 
    }
50 
  }
51 
}
52
53 
@mixin make-col-ready($gutters: $grid-gutter-widths) {
54 
  position: relative;
55 
  // Prevent columns from becoming too narrow when at smaller grid tiers by
56 
  // always setting `width: 100%;`. This works because we use `flex` values
57 
  // later on to override this initial width.
58 
  width: 100%;
59 
  min-height: 1px; // Prevent collapsing
60
61 
  @each $breakpoint in map-keys($gutters) {
62 
    @include media-breakpoint-up($breakpoint) {
63 
      $gutter: map-get($gutters, $breakpoint);
64 
      padding-right: ($gutter / 2);
65 
      padding-left:  ($gutter / 2);
66 
    }
67 
  }
68 
}
69
70 
@mixin make-col($size, $columns: $grid-columns) {
7172737475767778798081828384858687888990919293949596979899100101
flex: 0 0 percentage($size / $columns); // width: percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. max-width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) { margin-left: percentage($size / $columns); } @mixin make-col-push($size, $columns: $grid-columns) { left: if($size > 0, percentage($size / $columns), auto); } @mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto); } @mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) @if $type == push { @include make-col-push($size, $columns); } @else if $type == pull { @include make-col-pull($size, $columns); } @else if $type == offset { @include make-col-offset($size, $columns); } }