Add custom callout padding for small screens

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index fc33961d20ba6913bd24d3c99a7dfc1a2151b4e9..191909807b992b6828d81d9e1032676e5780f65b 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -18,6 +18,10 @@ $callout-background-fade: 85% !default;
 /// @type Length
 $callout-padding: 10px !default;
 
+/// Padding inside a callout on small screens.
+/// @type Length
+$callout-padding-small: $callout-padding !default;
+
 /// Bottom margin of a callout.
 /// @type Length
 $callout-margin-bottom: $global-margin !default;

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index e99488c2f29cbc7e0f284978af0fe035185ccecb..b7c0a864bdae5cc54ba7ec3157f0f74d1e5ec2ec 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -128,5 +128,10 @@
       min-width: 0;
     }
   }
+
+  // Small padding inside callouts
+  th.callout-inner {
+    padding: $callout-padding-small !important;
+  }
 }
 

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 301d579cedc712ed0d8a2affb19b25a82f646e3f..25f044644f46ae5d9a0dc173926acde04f414adf 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -124,6 +124,7 @@ $button-rounded: $global-rounded;
 $callout-background: $white;
 $callout-background-fade: 85%;
 $callout-padding: 10px;
+$callout-padding-small: $callout-padding;
 $callout-margin-bottom: $global-margin;
 $callout-border: 1px solid darken($callout-background, 20%);
 $callout-border-primary: 1px solid darken($primary-color, 20%);