Merge branch 'release/1.1.5'

erdmannfreunde · Feb 11, 2021 · dcf0d39 · dcf0d39
2 parents a299126 + c2a281e
commit dcf0d39
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 90 deletions.
diff --git a/files/nutshell/scss/base/_grid.scss b/files/nutshell/scss/base/_grid.scss
@@ -161,7 +161,7 @@ $grid__columns:         12 !default;
   @include media-query(screen-#{$current}) { // [2]
 
     .justify-#{$current}-start { // [2][3]
-      justify-self: flex-start;
+      justify-self: start;
       text-align: left;
     }
 
@@ -171,7 +171,7 @@ $grid__columns:         12 !default;
     }
 
     .justify-#{$current}-end { // [2][3]
-      justify-self: flex-end;
+      justify-self: end;
       text-align: right;
     }
   }
@@ -197,18 +197,15 @@ $grid__columns:         12 !default;
   @include media-query(screen-#{$current}) { // [2]
 
     .align-#{$current}-start { // [2][3]
-      justify-self: flex-start;
-      text-align: left;
+      align-self: start;
     }
 
     .align-#{$current}-center { // [2][3]
-      justify-self: center;
-      text-align: center;
+      align-self: center;
     }
 
     .align-#{$current}-end { // [2][3]
-      justify-self: flex-end;
-      text-align: right;
+      align-self: end;
     }
   }
 }

diff --git a/files/nutshell/scss/base/_type.scss b/files/nutshell/scss/base/_type.scss
@@ -3,9 +3,9 @@
 // * BASE Contao Framework
 // * erdmann-freunde.de/nutshell/
 // *
-// * Lizenziert unter MIT OPEN SOURCE 
+// * Lizenziert unter MIT OPEN SOURCE
 // *
-  
+
 //
 // BASE/TYPE
 // --------------------------------------------------
@@ -97,9 +97,9 @@ html {
   --selection-background:								var(--color-brand);
   --pre__color-background:  						var(--color-gray);
   --pre__color:             						var(--color-text--inverted);
-  
+
   --selection-color: 										var(--color-text--inverted);
-  
+
   --hr-border: 													var(--base-border);
   --paragraph__link-decoration:         underline;
   --paragraph__link-decoration--hover:  none;
@@ -128,55 +128,59 @@ html {
 // [6] loop through all viewports and add font-size for every viewport
 
 @each $element,$options in $headlines {
-  $count: index(map-keys($headlines), $element);  
-  
+  $count: index(map-keys($headlines), $element);
+
   %#{$element},
   %_#{$element} {
     $sizes: map-get($options, sizes);
     $line-height: map-get($options, line-height);
     $margin-top: map-get($options, margin-top);
     $margin-bottom: map-get($options, margin-bottom);
-
-    
+    $color: map-get($options, color);
+
     font-size: map-get($sizes, xs); // [5]
     font-family: var(--headings__font-family);
     font-weight: var(--headings__font-weight);
     line-height: $line-height;
     margin-bottom: $margin-bottom;
-
+
+    @if $color {
+      color: $color;
+    }
+
     // [6]
     @for $i from 2 through length($sizes) {
 	    $current: nth($sizes, $i); // $i = 2 = sm, $i = 5 = xl
 	    $viewport: nth($current, 1);
-	    $font-size: nth($current, 2);	    
-	    
+	    $font-size: nth($current, 2);
+
 	    @include media-query(screen-#{$viewport}) {
 	      font-size: $font-size;
 	    }
     }
   }
-  
+
   #{$element} {
     @extend %_#{$element};
-    
+
     $sizes: map-get($options, sizes);
     $line-height: map-get($options, line-height);
     $margin-top: map-get($options, margin-top);
     $margin-bottom: map-get($options, margin-bottom);
-    
+
     p + &,  // [1]
     ul + &,
     ol + & {
       margin-top: $margin-top;
     }
-    
+
 
     .ce_text + .ce_text & {
       &:first-child {
         margin-top: $margin-top;
       }
     }
-    
+
     @if $count < 6 {
       & + h#{$count + 1} { // [4]
         margin-top: -1 * $margin-bottom;
@@ -190,15 +194,15 @@ p,
 ul,
 ol {
   margin-top: 0;
-  
+
   a {
     text-decoration: var(--paragraph__link-decoration);
-    
+
     &:hover {
       --paragraph__link-decoration: var(--paragraph__link-decoration--hover);
     }
   }
-  
+
   &:last-child {
     margin-bottom: 0;
   }

diff --git a/files/nutshell/scss/components/_media.scss b/files/nutshell/scss/components/_media.scss
@@ -105,67 +105,25 @@ html {
 
 .ce_player,
 .ce_youtube {
-
-  .inside,
-  .mejs-video,
-  .mejs__video {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .mejs-video,
-  .mejs__video {
-		width: 100% !important;
-		height: auto !important;
-		padding-top: 56.25%;
-	}
-
-	.mejs-audio,
-	.mejs__audio {
-  	margin-top: 30px;
-
-    audio {
-    	height: auto;
-  	}
-  }
-
-	.mejs-overlay, 
-	.mejs-poster,
-	.mejs__overlay,
-	.mejs__poster {
-		width: 100% !important;
-		height: 100% !important;
-	}
-
-	.mejs-video {
-  	.mejs-mediaelement video,
-  	.mejs-mediaelement .me-plugin,
-  	.mejs-mediaelement embed {
-  		position: absolute;
-  		top: 0; left: 0; right: 0; bottom: 0;
-  		width: 100% !important;
-  		height: 100% !important;
-  	}
+  .video_container {
+    position: relative;
+    padding-bottom: 56.25%;
+    width: 100%;
+    height: auto;
   }
-
-  .mejs__video {
-  	.mejs__mediaelement video,
-  	.mejs__mediaelement .me__plugin,
-  	.mejs__mediaelement embed {
-  		position: absolute;
-  		top: 0; left: 0; right: 0; bottom: 0;
-  		width: 100% !important;
-  		height: 100% !important;
-  	}
+}
+
+.ce_player {
+  video {
+    border: 0;
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    width: 100% !important;
+    height: 100% !important;
   }
 }
 
 .ce_youtube {
-  position: relative;
-  padding-bottom: 56.25%;
-  width: 100%;
-  height: auto;
-
   iframe {
     border: 0;
     position: absolute;

diff --git a/files/nutshell/scss/components/_navs.scss b/files/nutshell/scss/components/_navs.scss
@@ -37,7 +37,8 @@ html {
 
   a,
   strong.active,
-  strong.trail {
+  strong.trail,
+  strong.forward  {
     display: block;
     padding: calc(var(--nav--main__item-padding) / 2) var(--nav--main__item-padding);
   }
@@ -46,7 +47,8 @@ html {
 .nav--vertical {
   a,
   strong.active,
-  strong.trail {
+  strong.trail,
+  strong.forward  {
     display: block;
     padding: calc(var(--nav--main__item-padding) / 2) var(--nav--main__item-padding);
   }
@@ -57,7 +59,8 @@ html {
 
   a,
   strong.active,
-  strong.trail {
+  strong.trail,
+  strong.forward {
     padding: var(--nav--main__item-padding) var(--nav--main__item-padding);
     border-bottom: 1px solid var(--base-border-color);
 

diff --git a/files/nutshell/scss/mixins/_general.scss b/files/nutshell/scss/mixins/_general.scss
@@ -11,6 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
+$grid__columns: 12 !default;
 
 // USED FROM _variables.scss
 
@@ -35,9 +36,9 @@
 }
 
 // make-row
-@mixin make-row() {
+@mixin make-row($total__columns: $grid__columns) {
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat($total__columns, 1fr);
   grid-column-gap: var(--grid__gutter);
   grid-auto-columns: 1fr;
 
@@ -78,11 +79,11 @@
   grid-column: span $columns / span $columns;
 
   @supports not (display: grid) {
-    width: percentage($columns/12);
+    width: percentage($columns/$grid__columns);
   }
 
   .ie & {
-    width: percentage($columns/12);
+    width: percentage($columns/$grid__columns);
   }
 }