forked from openedx/paragon
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: added missing SCSS variables in design tokens (openedx#2364)
* feat: added missing SCSS variables in design tokens * feat: added grid-gutter-width token
- Loading branch information
1 parent
b463e1c
commit 88e0a41
Showing
14 changed files
with
229 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,4 @@ | ||
| // Components | ||
| @import "mixins/list-group"; | ||
| @import "mixins/grid"; | ||
| @import "mixins/grid-framework"; |
80 changes: 80 additions & 0 deletions
80
styles/scss/core/bootstrap-override/mixins/_grid-framework.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| // Framework grid generation | ||
| // | ||
| // Used only by Bootstrap to generate the correct number of grid classes given | ||
| // any value of `$grid-columns`. | ||
|
|
||
| @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { | ||
| // Common properties for all breakpoints | ||
| %grid-column { | ||
| position: relative; | ||
| width: 100%; | ||
| padding-right: calc(#{$gutter} * .5); | ||
| padding-left: calc(#{$gutter} * .5); | ||
| } | ||
|
|
||
| @each $breakpoint in map-keys($breakpoints) { | ||
| $infix: breakpoint-infix($breakpoint, $breakpoints); | ||
|
|
||
| @if $columns > 0 { | ||
| // Allow columns to stretch full width below their breakpoints | ||
| @for $i from 1 through $columns { | ||
| .col#{$infix}-#{$i} { | ||
| @extend %grid-column; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .col#{$infix}, | ||
| .col#{$infix}-auto { | ||
| @extend %grid-column; | ||
| } | ||
|
|
||
| @include media-breakpoint-up($breakpoint, $breakpoints) { | ||
| // Provide basic `.col-{bp}` classes for equal-width flexbox columns | ||
| .col#{$infix} { | ||
| flex-basis: 0; | ||
| flex-grow: 1; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| @if $grid-row-columns > 0 { | ||
| @for $i from 1 through $grid-row-columns { | ||
| .row-cols#{$infix}-#{$i} { | ||
| @include row-cols($i); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .col#{$infix}-auto { | ||
| @include make-col-auto(); | ||
| } | ||
|
|
||
| @if $columns > 0 { | ||
| @for $i from 1 through $columns { | ||
| .col#{$infix}-#{$i} { | ||
| @include make-col($i, $columns); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .order#{$infix}-first { order: -1; } | ||
|
|
||
| .order#{$infix}-last { order: $columns + 1; } | ||
|
|
||
| @for $i from 0 through $columns { | ||
| .order#{$infix}-#{$i} { order: $i; } | ||
| } | ||
|
|
||
| @if $columns > 0 { | ||
| // `$columns - 1` because offsetting by the width of an entire row isn't possible | ||
| @for $i from 0 through ($columns - 1) { | ||
| @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 | ||
| .offset#{$infix}-#{$i} { | ||
| @include make-col-offset($i, $columns); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /// Grid system | ||
| // | ||
| // Generate semantic grid columns with these mixins. | ||
|
|
||
| @mixin make-container($gutter: $grid-gutter-width) { | ||
| width: 100%; | ||
| padding-right: calc($gutter * .5); | ||
| padding-left: calc($gutter * .5); | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| } | ||
|
|
||
| @mixin make-row($gutter: $grid-gutter-width) { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin-right: calc(-1 * calc($gutter * .5)); | ||
| margin-left: calc(-1 * calc($gutter * .5)); | ||
| } | ||
|
|
||
| // For each breakpoint, define the maximum width of the container in a media query | ||
| @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { | ||
| @each $breakpoint, $container-max-width in $max-widths { | ||
| @include media-breakpoint-up($breakpoint, $breakpoints) { | ||
| max-width: $container-max-width; | ||
| } | ||
| } | ||
| @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); | ||
| } | ||
|
|
||
| @mixin make-col-ready($gutter: $grid-gutter-width) { | ||
| position: relative; | ||
| // Prevent columns from becoming too narrow when at smaller grid tiers by | ||
| // always setting `width: 100%;`. This works because we use `flex` values | ||
| // later on to override this initial width. | ||
| width: 100%; | ||
| padding-right: calc($gutter * .5); | ||
| padding-left: calc($gutter * .5); | ||
| } | ||
|
|
||
| @mixin make-col($size, $columns: $grid-columns) { | ||
| flex: 0 0 percentage(divide($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(divide($size, $columns)); | ||
| } | ||
|
|
||
| @mixin make-col-auto() { | ||
| flex: 0 0 auto; | ||
| width: auto; | ||
| max-width: 100%; // Reset earlier grid tiers | ||
| } | ||
|
|
||
| @mixin make-col-offset($size, $columns: $grid-columns) { | ||
| $num: divide($size, $columns); | ||
| margin-left: if($num == 0, 0, percentage($num)); | ||
| } | ||
|
|
||
| // Row columns | ||
| // | ||
| // Specify on a parent element(e.g., .row) to force immediate children into NN | ||
| // numberof columns. Supports wrapping to new lines, but does not do a Masonry | ||
| // style grid. | ||
| @mixin row-cols($count) { | ||
| > * { | ||
| flex: 0 0 divide(100%, $count); | ||
| max-width: divide(100%, $count); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.