jekyll-sharp-styleguide 0.1.0

data/_sass/_helpers.scss

@@ -0,0 +1,85 @@
+/*	HELPER CLASSES
+=========================================================================================*/
+
+// Margins
+@for $i from 0 through 5 {
+    .mt-#{$i} {
+        margin-top: $i * 10px !important;
+    }
+    .me-#{$i} {
+        margin-right: $i * 10px !important;
+    }
+    .mb-#{$i} {
+        margin-bottom: $i * 10px  !important;
+    }
+    .ms-#{$i} {
+        margin-left: $i * 10px  !important;
+    }
+}
+
+// Paddings
+@for $i from 0 through 5 {
+    .pt-#{$i} {
+        padding-top: $i * 10px !important;
+    }
+    .pe-#{$i} {
+        padding-right: $i * 10px !important;
+    }
+    .pb-#{$i} {
+        padding-bottom: $i * 10px  !important;
+    }
+    .ps-#{$i} {
+        padding-left: $i * 10px  !important;
+    }
+}
+
+// Color theme
+$color-theme:(
+    accent  : $accent,
+    dark    : $dark,
+    light   : $light,
+    white   : $white
+);
+
+// Backgrounds
+@each $background, $color in $color-theme {
+    .bg-#{$background}{ 
+        background-color: $color !important;
+    }
+} 
+
+// Colors
+@each $text, $color in $color-theme {
+    .text-#{$text}{ 
+        color: $color !important;
+    }
+} 
+
+// Opacity
+@for $i from 1 through 10 {
+    .opacity-#{$i}0 {
+        opacity: $i / 10;
+    }
+}
+
+// Display
+.d-none {
+    display: none !important;
+}
+
+.d-block {
+    display: block !important;
+}
+
+.d-inline-block {
+    display: inline-block !important;
+}
+
+.d-inline {
+    display: inline !important;
+}
+
+// Width
+.w-100 {
+    width: 100% !important;
+}