@madgex/design-system 1.15.6 → 1.16.1

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2019 10:57:21 GMT
+ * Generated on Tue, 16 Jul 2019 12:41:51 GMT
  */
 
 :root {
@@ -128,4 +128,5 @@
  --mds-size-wrapper-max-width: 1280px;
  --mds-size-wrapper-padding: 1.5%;
  --mds-size-surface-padding: 28px 32px;
+ --mds-size-button-border-radius: 4px;
 }

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2019 10:57:21 GMT
+ * Generated on Tue, 16 Jul 2019 12:41:51 GMT
  */
 
 module.exports = {
@@ -2614,6 +2614,29 @@ module.exports = {
           "padding"
         ]
       }
+    },
+    "button": {
+      "border": {
+        "radius": {
+          "value": "4rem",
+          "original": {
+            "value": "{size.border.radius.value}"
+          },
+          "name": "MdsSizeButtonBorderRadius",
+          "attributes": {
+            "category": "size",
+            "type": "button",
+            "item": "border",
+            "subitem": "radius"
+          },
+          "path": [
+            "size",
+            "button",
+            "border",
+            "radius"
+          ]
+        }
+      }
     }
   }
 };

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Fri, 12 Jul 2019 10:57:21 GMT
+  Generated on Tue, 16 Jul 2019 12:41:51 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -128,6 +128,7 @@ $mds-size-wrapper-width: 100% !default;
 $mds-size-wrapper-max-width: 1280px !default;
 $mds-size-wrapper-padding: 1.5% !default;
 $mds-size-surface-padding: 28px 32px !default;
+$mds-size-button-border-radius: 4px !default;
 
 $tokens: (
   'color': (
@@ -388,6 +389,11 @@ $tokens: (
     ),
     'surface': (
       'padding': $mds-size-surface-padding
+    ),
+    'button': (
+      'border': (
+        'radius': $mds-size-button-border-radius
+      )
     )
   )
 );

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Fri, 12 Jul 2019 10:57:21 GMT
+  Generated on Tue, 16 Jul 2019 12:41:51 GMT
 */
 html,
 body,
@@ -489,6 +489,20 @@ body {
   padding: 28px 32px;
 }
 
+.mds-fixed-container {
+  width: 100%;
+  background: #f8f8f8;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 5;
+}
+
+.mds-fixed-container--top {
+  bottom: auto;
+  top: 0;
+}
+
 .mds-list {
   margin: 0 0 20px 0;
   padding: 0;
@@ -1379,6 +1393,7 @@ body {
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
+  border-radius: 4px;
   background-color: #f0af11;
   padding: 8px 12px;
   font-size: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.15.6",
+  "version": "1.16.1",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/button/button.scss

@@ -8,6 +8,7 @@ $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
+  border-radius: $mds-size-button-border-radius;
   background-color: $mds-color-button-bg;
   padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
   font-size: 100%;

package/src/layout/containers/README.md

@@ -4,3 +4,5 @@ Class `mds-site-container` should be added right after the body, it contains all
 `mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages
 
 `mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.
+
+To add a `position: fixed` container, use `mds-fixed-container`. By default it will be fixed at the bottom. Use `mds-fixed-container--top` to fix it at the top.

package/src/layout/containers/containers.njk

@@ -1,4 +1,4 @@
-<div class="mds-site-container container-example">
+<div class="mds-site-container container-example" style="margin: 80px 0;">
   <div class="mds-wrapper">
     <div class="content-example">
       <div class="mds-surface">
@@ -10,4 +10,7 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<div class="mds-fixed-container mds-padding-b5 mds-text-align-center">This a fixed container at the bottom</div>
+<div class="mds-fixed-container mds-fixed-container--top  mds-padding-b5 mds-text-align-center">This a fixed container at the top</div>

package/src/scss/core/_containers.scss

@@ -26,3 +26,17 @@ body {
 .mds-surface__inner {
   padding: $mds-size-surface-padding;
 }
+
+.mds-fixed-container {
+  width: 100%;
+  background: $mds-color-neutral-lightest;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 5;
+
+  &--top {
+    bottom: auto;
+    top: 0;
+  }
+}

package/src/tokens/size.json

@@ -42,6 +42,13 @@
       "padding": {
         "value": "28px 32px"
       }
+    },
+    "button": {
+      "border": {
+        "radius": {
+          "value": "{size.border.radius.value}"
+        }
+      }
     }
   }
 }