Skip to content

Commit

Permalink
Merge branch 'release/1.1.7'
Browse files Browse the repository at this point in the history
  • Loading branch information
denniserdmann committed Jun 7, 2021
2 parents 8b2789f + f1bf642 commit 3ddbbcc
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 46 deletions.
88 changes: 51 additions & 37 deletions files/nutshell/scss/base/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// * BASE Contao Framework
// * erdmann-freunde.de/nutshell/
// *
// * Lizenziert unter MIT OPEN SOURCE
// * Lizenziert unter MIT OPEN SOURCE
// *

//
Expand All @@ -30,14 +30,14 @@ $grid__columns: 12 !default;
grid-template-columns: repeat(var(--grid__columns), 1fr);
grid-column-gap: var(--grid__gutter);
grid-auto-columns: 1fr;

@supports not (display: grid) {
display: flex;
flex-wrap: wrap;
margin-left: calc(-1 * var(--grid__gutter) / 2);
margin-right: calc(-1 * var(--grid__gutter) / 2);
}

.ie & {
display: flex;
flex-wrap: wrap;
Expand All @@ -49,83 +49,97 @@ $grid__columns: 12 !default;
// column default floating
%column-floating {
grid-column: 1 / -1;

@supports not(display: grid) {
padding-left: var(--grid__gutter--half);
padding-right: var(--grid__gutter--half);
}

.ie & {
padding-left: var(--grid__gutter--half);
padding-right: var(--grid__gutter--half);
}
}

@for $i from 1 through $grid__columns { // [3][4]
.col-#{$i} { // [2][3]
grid-column: span $i / span $i;

@supports not (display: grid) {
width: percentage($i/$grid__columns);
}

.ie & {
width: percentage($i/$grid__columns);
}
}
}

// [1] length($breakpoints) - go through length of available viewports (xs, sm, md, lg, xl == 5)
// [2] $current - actual viewport (e.g. "xs")
// [3] $i - counter, returns the actual grid-column
// [4] var(--grid__columns) - go through available columns (e.g. 1 --> 12)

// [5] override clear- class for the next viewport by default
// this means, you can add a clear-xs class to an element, but the clear will only affect the current viewport.
// this means, you can add a clear-xs class to an element, but the clear will only affect the current viewport.
@for $size from 1 through length($breakpoints) { // [1]
$x: nth($breakpoints, $size); // [2]
$current: nth($x, 1); // [2]

// column creation
@for $i from 1 through $grid__columns { // [3][4]
.col-#{$current}-#{$i} { // [2][3]
@extend %column-floating;
}
}

// width creation for every col- class
@include media-query(screen-#{$current}) { // [2]

@for $i from 1 through $grid__columns { // [3][4]
.col-#{$current}-#{$i} { // [2][3]
grid-column: span $i / span $i;
@supports not (display: grid) {
@for $i from 1 through $grid__columns { // [3][4]
.col-#{$current}-#{$i} { // [2][3]
grid-column: span $i / span $i;

@supports not (display: grid) {
width: percentage($i/$grid__columns);
}

.ie & {
width: percentage($i/$grid__columns);
}
}
}
}
}
}

// height creation for every row-span- class
@include media-query(screen-#{$current}) { // [2]

@for $i from 1 through $grid__columns { // [3][4]
.row-span-#{$current}-#{$i} { // [2][3]
grid-row: span $i / span $i;
}
}
@for $i from 1 through $grid__columns { // [3][4]
.row-span-#{$current}-#{$i} { // [2][3]
grid-row: span $i / span $i;
}
}
}

// .col-start and .row-start creation
@include media-query(screen-#{$current}) { // [2]
@for $i from 1 through $grid__columns { // [3]
.col-start-#{$current}-#{$i} { // [2][3]
grid-column-start: $i;
}
.row-start-#{$current}-#{$i} { // [2][3]
grid-row-start: $i;
}
}

@for $i from 1 through $grid__columns { // [3]
.col-start-#{$current}-#{$i} { // [2][3]
grid-column-start: $i;
}
.row-start-#{$current}-#{$i} { // [2][3]
grid-row-start: $i;
}
}
}

//pull-left & -right creation
@include media-query(screen-#{$current}) { // [2]
.pull-right-#{$current} { // [2]
grid-column-end: -1;
}

.pull-left-#{$current} { // [2]
grid-row-start: 1;
grid-column-end: inherit;
Expand Down Expand Up @@ -214,10 +228,10 @@ $grid__columns: 12 !default;
// row-span-1-12
@for $i from 1 through $grid__columns { // [1]
.row-start-#{$i} { // [2][3]
grid-row-start: $i;
grid-row-start: $i;
}

.row-span-#{$i} { // [2][3]
grid-row: span $i / span $i;
grid-row: span $i / span $i;
}
}
21 changes: 14 additions & 7 deletions files/nutshell/scss/base/_page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// * BASE Contao Framework
// * erdmann-freunde.de/nutshell/
// *
// * Lizenziert unter MIT OPEN SOURCE
// * Lizenziert unter MIT OPEN SOURCE
// *

//
Expand All @@ -28,7 +28,7 @@
// render text using sub-pixel anti-aliasing.
html {
font-family: var(--base-font-family, sans-serif);
font-size: var(--base-font-size); // [1]
font-size: var(--base-font-size--xs); // [1]
line-height: var(--base-line-height); //[1]
font-weight: var(--base-font-weight);
background-color: var(--color-page-background);
Expand All @@ -39,13 +39,20 @@ html {
-ms-text-size-adjust: 100%; // [4]
-moz-osx-font-smoothing: grayscale; // [5]
-webkit-font-smoothing: antialiased; // [6]

@include media-query(screen-xs-max) {
font-size: var(--base-font-size--xs);

@include media-query(screen-sm) {
font-size: var(--base-font-size--sm, var(--base-font-size));
}

@include media-query(screen-md) {
font-size: var(--base-font-size);
}


@include media-query(screen-lg) {
font-size: var(--base-font-size--lg, var(--base-font-size));
}

@include media-query(screen-xl) {
//font-size: calc(var(--base-font-size--xl) / 1rem * 1em);
font-size: var(--base-font-size--xl);
}
}
3 changes: 2 additions & 1 deletion files/nutshell/scss/components/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ textarea.textarea {
}

.widget-text,
.widget-textarea {
.widget-textarea,
.widget-password {
margin-bottom: var(--base-spacing-unit);
}

Expand Down
2 changes: 1 addition & 1 deletion files/nutshell/scss/components/_links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ div.btn--primary,
}
}

.div.btn--left {
div.btn--left {
text-align: left;
}

Expand Down

0 comments on commit 3ddbbcc

Please sign in to comment.