You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.0 KiB
SCSS
132 lines
3.0 KiB
SCSS
@use 'sass:math';
|
|
|
|
@import '../extensions/grid-framework';
|
|
|
|
// .container
|
|
.#{$grid-container} {
|
|
padding-left: map-get($grid-container-padding, 'xs');
|
|
padding-right: map-get($grid-container-padding, 'xs');
|
|
@include clearfix();
|
|
}
|
|
|
|
// .row
|
|
.#{$grid-row} {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
@include clearfix();
|
|
|
|
.#{$grid-row} {
|
|
margin-left: math.div($grid-gutter-width, -2);
|
|
margin-right: math.div($grid-gutter-width, -2);
|
|
}
|
|
|
|
&--centered {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
// .aspect
|
|
.#{$grid-ratio-name} {
|
|
@include keep-aspect();
|
|
}
|
|
|
|
// .aspect--16x9 etc.
|
|
@include grid-ratios();
|
|
|
|
// .aspect > div or .aspect__inner
|
|
.#{$grid-ratio-name} > div,
|
|
.#{$grid-ratio-inner-name} {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
// Create basic styles for every grid class.
|
|
@include make-grid-columns();
|
|
|
|
// Only the extra small grid takes effect at all times. Mobile first!
|
|
@include make-grid(xs, 6);
|
|
|
|
@include breakpoint(sm) {
|
|
@include make-grid(sm);
|
|
|
|
// Add more padding to the container class.
|
|
.#{$grid-container} {
|
|
padding-left: map-get($grid-container-padding, 'sm');
|
|
padding-right: map-get($grid-container-padding, 'sm');
|
|
}
|
|
|
|
.#{$grid-row} {
|
|
max-width: $grid-max-width--desktop;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(md) {
|
|
@include make-grid(md);
|
|
}
|
|
|
|
.code-block {
|
|
position: relative;
|
|
overflow: visible;
|
|
margin-top: 0.5em;
|
|
margin-right: calc(-3.5vw - #{($grid-gutter-width * 0.5)});
|
|
margin-bottom: 0.5em;
|
|
margin-left: calc(-3.5vw - #{($grid-gutter-width * 0.5)});
|
|
|
|
pre {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 56px;
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
padding-left: calc(3.5vw + #{($grid-gutter-width * 0.5)});
|
|
padding-right: calc(3.5vw + #{($grid-gutter-width * 0.5)});
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(sm) {
|
|
.code-block {
|
|
margin-left: calc(-7vw - #{($grid-gutter-width * 0.5)});
|
|
margin-right: calc(-7vw - #{($grid-gutter-width * 0.5)});
|
|
|
|
pre {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-left: calc(7vw + #{($grid-gutter-width * 0.5)});
|
|
padding-right: calc(7vw + #{($grid-gutter-width * 0.5)});
|
|
}
|
|
}
|
|
}
|
|
|
|
// @include breakpoint(md) {
|
|
//
|
|
// .code-block {
|
|
// margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
|
// margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
|
//
|
|
// pre {
|
|
// position: relative;
|
|
// z-index: 1;
|
|
// padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
|
|
// padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
@media (min-width: $viewport-at-max-grid-width) {
|
|
.code-block {
|
|
margin-left: calc(((100vw - #{$grid-max-width--desktop}) / -2) - #{$grid-gutter-width * 0.5});
|
|
margin-right: calc(((100vw - #{$grid-max-width--desktop}) / -2) - #{$grid-gutter-width * 0.5});
|
|
|
|
pre {
|
|
padding-left: calc(((100vw - #{$grid-max-width--desktop}) / 2) + #{$grid-gutter-width * 0.5});
|
|
padding-right: calc(((100vw - #{$grid-max-width--desktop}) / 2) + #{$grid-gutter-width * 0.5});
|
|
}
|
|
}
|
|
}
|