Update some components and examples for easier usage

alexander-schranz · Apr 20, 2021 · 5153028 · 5153028
1 parent 537bae1
commit 5153028
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 33 deletions.
diff --git a/src/1-settings/_font.scss b/src/1-settings/_font.scss
@@ -1,11 +1,11 @@
 $font-family: 'IBM Plex Sans', sans-serif;
 $font-sizes: (
-        default: 16px,
-        mobile: 14px,
+    default: 16px,
+    mobile: 14px,
 );
 $line-heights: (
-        default: 24px,
-        mobile: 22px,
+    default: 24px,
+    mobile: 22px,
 );
 // Mono
 $font-family-mono: 'IBM Plex Mono', monospace;
diff --git a/src/1-settings/_small.scss b/src/1-settings/_small.scss
@@ -1,9 +1,9 @@
 // Defines the font-size and line-heights for the <small> tag here:
 $small-font-sizes: (
-        default: 14px,
-        mobile: 28px,
+    default: 14px,
+    mobile: 28px,
 );
 $small-line-heights: (
-        default: 22px,
-        mobile: 36px,
+    default: 22px,
+    mobile: 36px,
 );
diff --git a/src/2-tools/_dot-dot-dot.scss b/src/2-tools/_dot-dot-dot.scss
@@ -0,0 +1,5 @@
+@mixin dotDotDot() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/src/5-objects/_inline.scss b/src/5-objects/_inline.scss
@@ -1,9 +1,9 @@
 .o-inline {
     display: flex;
     flex-wrap: wrap;
-    margin: -15px;
+    margin: -16px;
 }
 
 .o-inline > * {
-    margin: 15px;
+    margin: 16px;
 }
diff --git a/src/5-objects/_stack.scss b/src/5-objects/_stack.scss
@@ -1,4 +1,4 @@
-$stack-gap: 30px;
+$stack-gap: 32px;
 
 .o-stack {
     margin-top: -$stack-gap;

diff --git a/src/6-components/_teaser.scss b/src/6-components/_teaser.scss
@@ -1,11 +1,11 @@
 .c-teaser {
     border: 1px solid $grey;
-    padding: 40px;
+    padding: 32px;
     position: relative;
 }
 
 .c-teaser__title {
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     overflow: hidden;
 
     .teaser:hover &,
@@ -19,8 +19,8 @@
 }
 
 .c-teaser__description {
-    margin-bottom: 20px;
-    margin-top: 5px;
+    margin-bottom: 24px;
+    margin-top: 8px;
     overflow: hidden;
 
     @include mediaEachMax((
@@ -31,7 +31,7 @@
 .c-teaser__link {
     color: $blue;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: 24px;
     text-decoration: none;
     @include containerLink;
 

diff --git a/src/7-utilities/_space.scss b/src/7-utilities/_space.scss
@@ -1,54 +1,54 @@
 .u-space-after-big {
-    margin-bottom: 80px;
+    margin-bottom: 96px;
 
     @include media('<tablet') {
-        margin-bottom: 40px;
+        margin-bottom: 48px;
     }
 }
 
 .u-space-after-medium {
-    margin-bottom: 30px;
+    margin-bottom: 32px;
 
     @include media('<tablet') {
-        margin-bottom: 20px;
+        margin-bottom: 24px;
     }
 }
 
 .u-space-before-medium {
-    margin-top: 30px;
+    margin-top: 32px;
 
     @include media('<tablet') {
-        margin-bottom: 20px;
+        margin-bottom: 24px;
     }
 }
 
 .u-space-after-small {
-    margin-bottom: 10px;
+    margin-bottom: 12px;
 
     @include media('<tablet') {
-        margin-bottom: 7px;
+        margin-bottom: 8px;
     }
 }
 
 .u-space-mobile-after-small {
     @include media('<tablet') {
-        margin-bottom: 7px;
+        margin-bottom: 8px;
     }
 }
 
 .u-space-big {
-    margin: 80px 0;
+    margin: 96px 0;
 
     @include media('<tablet') {
-        margin: 40px 0;
+        margin: 48px 0;
     }
 }
 
 .u-space-big-before {
-    margin-top: 80px;
+    margin-top: 96px;
 
     @include media('<tablet') {
-        margin-top: 40px;
+        margin-top: 48px;
     }
 }
 

diff --git a/src/main.scss b/src/main.scss
@@ -13,12 +13,13 @@
 @import '1-settings/small';
 @import '1-settings/stack';
 @import '1-settings/zindex';
-@import '../../../public/website/fonts/icomoon-sulu/variables';
+// @import '../../../public/website/fonts/icomoon-sulu/variables';
 
 // Tools - (mixins and functions for make coding easier)
-@import '2-tools/container-link';
-@import '2-tools/map-math';
-@import '2-tools/media';
+@import '2-tools/container-link'; // @import '../node_modules/@sulu/web/packages/scss/tools/container-link/container-link';
+@import '2-tools/map-math'; // @import '../node_modules/@sulu/web/packages/scss/tools/map-math/map-math';
+@import '2-tools/media'; // @import '../node_modules/@sulu/web/packages/scss/tools/media/media';
+@import '2-tools/dot-dot-dot'; // @import '../node_modules/@sulu/web/packages/scss/tools/dot-dot-dot/dot-dot-dot';
 @import '2-tools/paragraph-spacing';
 
 // Generic - (generic css like reset, normalize, box sizing)
@@ -59,3 +60,4 @@
 @import '7-utilities/none';
 @import '7-utilities/space';
 @import '7-utilities/text';
+// @import '../../../public/website/fonts/icomoon-sulu/style.scss';