Add padding

Author: Adrian Bece

dist/clay.css

@@ -1,19 +1,22 @@
 /* --- DEFAULT VALUES --- */
 $default-background: rgba(0, 0, 0, 0.005);
 $default-border-radius: 32px;
-$default-shadow-outset: 16px 0 48px 0 rgba(0, 0, 0, 0.5);
-$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.6);
-$default-shadow-inset-secondary: 0px 12px 24px 0 rgb(255, 255, 255);
+$default-shadow-outset: 8px 8px 16px 0 rgba(0, 0, 0, 0.25);
+$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.25);
+$default-shadow-inset-secondary: 8px 8px 16px 0 rgba(255, 255, 255, 0.2);
+$default-padding: $default-border-radius;
 
 /* --- MIXIN --- */
 @mixin clay(
   $background: $default-background,
   $border-radius: $default-border-radius,
   $shadow-outset: $default-shadow-outset,
   $shadow-inset-primary: $default-shadow-inset-primary,
-  $shadow-inset-secondary: $default-shadow-inset-secondary
+  $shadow-inset-secondary: $default-shadow-inset-secondary,
+  $padding: $default-padding
 ) {
   background-color: $background;
+  padding: $padding;
   border-radius: var(--clay-border-radius, 32px);
   box-shadow: $shadow-outset, inset $shadow-inset-primary, inset $shadow-inset-secondary;
 }
@@ -22,6 +25,7 @@ $default-shadow-inset-secondary: 0px 12px 24px 0 rgb(255, 255, 255);
 .clay {
   @include clay(
     $background: var(--clay-background, $default-background),
+    $padding: var(--clay-padding, $default-padding),
     $border-radius: var(--clay-border-radius, $default-border-radius),
     $shadow-outset: var(--clay-shadow-outset, $default-shadow-outset),
     $shadow-inset-primary: var(--clay-shadow-inset-primary, $default-shadow-inset-primary),

dist/clay.css.map

@@ -1,19 +1,22 @@
 /* --- DEFAULT VALUES --- */
 $default-background: rgba(0, 0, 0, 0.005);
 $default-border-radius: 32px;
-$default-shadow-outset: 16px 0 48px 0 rgba(0, 0, 0, 0.5);
-$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.6);
-$default-shadow-inset-secondary: 0px 12px 24px 0 rgb(255, 255, 255);
+$default-shadow-outset: 8px 8px 16px 0 rgba(0, 0, 0, 0.25);
+$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.25);
+$default-shadow-inset-secondary: 8px 8px 16px 0 rgba(255, 255, 255, 0.2);
+$default-padding: $default-border-radius;
 
 /* --- MIXIN --- */
 @mixin clay(
   $background: $default-background,
   $border-radius: $default-border-radius,
   $shadow-outset: $default-shadow-outset,
   $shadow-inset-primary: $default-shadow-inset-primary,
-  $shadow-inset-secondary: $default-shadow-inset-secondary
+  $shadow-inset-secondary: $default-shadow-inset-secondary,
+  $padding: $default-padding
 ) {
   background-color: $background;
+  padding: $padding;
   border-radius: var(--clay-border-radius, 32px);
   box-shadow: $shadow-outset, inset $shadow-inset-primary, inset $shadow-inset-secondary;
 }
@@ -22,6 +25,7 @@ $default-shadow-inset-secondary: 0px 12px 24px 0 rgb(255, 255, 255);
 .clay {
   @include clay(
     $background: var(--clay-background, $default-background),
+    $padding: var(--clay-padding, $default-padding),
     $border-radius: var(--clay-border-radius, $default-border-radius),
     $shadow-outset: var(--clay-shadow-outset, $default-shadow-outset),
     $shadow-inset-primary: var(--clay-shadow-inset-primary, $default-shadow-inset-primary),