GIPainter-helpers 0.2.3 → 0.2.5

data/assets/stylesheets/Base/_spacing.scss

@@ -1,187 +1,135 @@
-//-----------------------------------
-// HELPER
-// PADDINGS & MARGINS CLASSES GENERATION
-//-----------------------------------
-
-// From Bootstrap 4
-
-/*----------------
-    Margin and Padding
-----------------*/
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-$grid-breakpoints: (
-        xs: 0,
-        sm: 576px,
-        md: 768px,
-        lg: 992px,
-        xl: 1200px
-) !default;
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
-//
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
-//    767px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-$spacer:   1rem !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
-$spacers: (
-        0: (
-                x: 0,
-                y: 0
-        ),
-        1: (
-                x: ($spacer-x * .25),
-                y: ($spacer-y * .25)
-        ),
-        2: (
-                x: ($spacer-x * .5),
-                y: ($spacer-y * .5)
-        ),
-        3: (
-                x: $spacer-x,
-                y: $spacer-y
-        ),
-        4: (
-                x: ($spacer-x * 1.5),
-                y: ($spacer-y * 1.5)
-        ),
-        5: (
-                x: ($spacer-x * 3),
-                y: ($spacer-y * 3)
-        )
-) !default;
-
-////
-/// @access public
-/// @group Margin/Padding
-/// @type Margin & Paddings
-////
-
-/// Margins & Paddings wicth all breakpoints, from xs to xl and X-Y positions.
-///
-/// ! Max Padding/Margin Values : 5
-/// @example css - class="mg/pd(Pos)-(value)"
-/// .mgt-2 {
-///   margin-top: 2px;
-/// }
-/// @example css - class="mg(Pos-X/Y)-(breakpoint)-(value)"
-/// .mgy-sm-4 {
-///   @media (min-width: 576px) {
-///     margin-top: 4px;
-///     margin-bottom: 4px;
-///   }
-/// }
-
-$GI_spacing : mg/pd(Pos)-(value);
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @each $prop, $abbrev in (margin: mg, padding: pd) {
-      @each $size, $lengths in $spacers {
-        $length-x: map-get($lengths, x);
-        $length-y: map-get($lengths, y);
-
-        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
-        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
-        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
-        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
-        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
-        .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right: $length-x !important;
-          #{$prop}-left:  $length-x !important;
-        }
-        .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length-y !important;
-          #{$prop}-bottom: $length-y !important;
-        }
-      }
-    }
-
-    // Some special margin utils
-    .m#{$infix}-auto  { margin:        auto !important; }
-    .mt#{$infix}-auto { margin-top:    auto !important; }
-    .mr#{$infix}-auto { margin-right:  auto !important; }
-    .mb#{$infix}-auto { margin-bottom: auto !important; }
-    .ml#{$infix}-auto { margin-left:   auto !important; }
-    .mx#{$infix}-auto {
-      margin-right: auto !important;
-      margin-left:  auto !important;
-    }
-    .my#{$infix}-auto {
-      margin-top:    auto !important;
-      margin-bottom: auto !important;
-    }
-  }
-}
-
-/*----------------
-    Display utilities
-----------------*/
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .d#{$infix}-none         { display: none !important; }
-    .d#{$infix}-inline       { display: inline !important; }
-    .d#{$infix}-inline-block { display: inline-block !important; }
-    .d#{$infix}-block        { display: block !important; }
-    .d#{$infix}-table        { display: table !important; }
-    .d#{$infix}-table-cell   { display: table-cell !important; }
-    .d#{$infix}-flex         { display: flex !important; }
-    .d#{$infix}-inline-flex  { display: inline-flex !important; }
-  }
-}
-
-
+//-----------------------------------
+// HELPER
+// PADDINGS & MARGINS CLASSES GENERATION
+//-----------------------------------
+
+// From Bootstrap 4
+
+/*----------------
+    Margin and Padding
+----------------*/
+
+////
+/// @access public
+/// @group Margin/Padding
+/// @type Margin & Paddings
+////
+
+/// Margins & Paddings wicth all breakpoints, from xs to xl and X-Y positions.
+///
+/// ! Max Padding/Margin Values : 5
+/// @example css - class="mg/pd(Pos)-(value)"
+/// .mgt-2 {
+///   margin-top: 2px;
+/// }
+/// @example css - class="mg(Pos-X/Y)-(breakpoint)-(value)"
+/// .mgy-sm-4 {
+///   @media (min-width: 576px) {
+///     margin-top: 4px;
+///     margin-bottom: 4px;
+///   }
+/// }
+
+@each $prop, $abbrev in (margin: mg, padding: pd) {
+  @each $size, $lengths in $spacers {
+    $length-x: map-get($lengths, x);
+    $length-y: map-get($lengths, y);
+
+    .#{$abbrev}-#{$size}  { #{$prop}:        $length-y $length-x; }
+    .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y; }
+    .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x; }
+    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y; }
+    .#{$abbrev}l-#{$size} { #{$prop}-left:   $length-x; }
+    .#{$abbrev}x-#{$size} {
+      #{$prop}-right: $length-x;
+      #{$prop}-left:  $length-x;
+    }
+    .#{$abbrev}y-#{$size} {
+      #{$prop}-top:    $length-y;
+      #{$prop}-bottom: $length-y;
+    }
+  }
+}
+
+// Some special margin utils
+.m-auto  { margin:        auto; }
+.mt-auto { margin-top:    auto; }
+.mr-auto { margin-right:  auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left:   auto; }
+.mx-auto {
+  margin-right: auto;
+  margin-left:  auto;
+}
+.my-auto {
+  margin-top:    auto;
+  margin-bottom: auto;
+}
+
+@each $breakpoint-name, $breakpoint-value in $default_breakpoints {
+  @include mquery($breakpoint-value) {
+    @each $prop, $abbrev in (margin: mg, padding: pd) {
+      @each $size, $lengths in $spacers {
+        $length-x: map-get($lengths, x);
+        $length-y: map-get($lengths, y);
+
+        .#{$abbrev}#{$breakpoint-name}-#{$size}  { #{$prop}:        $length-y $length-x; }
+        .#{$abbrev}t#{$breakpoint-name}-#{$size} { #{$prop}-top:    $length-y; }
+        .#{$abbrev}r#{$breakpoint-name}-#{$size} { #{$prop}-right:  $length-x; }
+        .#{$abbrev}b#{$breakpoint-name}-#{$size} { #{$prop}-bottom: $length-y; }
+        .#{$abbrev}l#{$breakpoint-name}-#{$size} { #{$prop}-left:   $length-x; }
+        .#{$abbrev}x#{$breakpoint-name}-#{$size} {
+          #{$prop}-right: $length-x;
+          #{$prop}-left:  $length-x;
+        }
+        .#{$abbrev}y#{$breakpoint-name}-#{$size} {
+          #{$prop}-top:    $length-y;
+          #{$prop}-bottom: $length-y;
+        }
+      }
+    }
+
+    // Some special margin utils
+    .m#{$breakpoint-name}-auto  { margin:        auto; }
+    .mt#{$breakpoint-name}-auto { margin-top:    auto; }
+    .mr#{$breakpoint-name}-auto { margin-right:  auto; }
+    .mb#{$breakpoint-name}-auto { margin-bottom: auto; }
+    .ml#{$breakpoint-name}-auto { margin-left:   auto; }
+    .mx#{$breakpoint-name}-auto {
+      margin-right: auto;
+      margin-left:  auto;
+    }
+    .my#{$breakpoint-name}-auto {
+      margin-top:    auto;
+      margin-bottom: auto;
+    }
+  }
+}
+
+/*----------------
+    Display utilities
+----------------*/
+
+.d-none         { display: none; }
+.d-inline       { display: inline; }
+.d-inline-block { display: inline-block; }
+.d-block        { display: block; }
+.d-table        { display: table; }
+.d-table-cell   { display: table-cell; }
+.d-flex         { display: flex; }
+.d-inline-flex  { display: inline-flex; }
+
+@each $breakpoint-name, $breakpoint-value in $default_breakpoints {
+  @include mquery($breakpoint-value) {
+    .d#{$breakpoint-name}-none         { display: none; }
+    .d#{$breakpoint-name}-inline       { display: inline; }
+    .d#{$breakpoint-name}-inline-block { display: inline-block; }
+    .d#{$breakpoint-name}-block        { display: block; }
+    .d#{$breakpoint-name}-table        { display: table; }
+    .d#{$breakpoint-name}-table-cell   { display: table-cell; }
+    .d#{$breakpoint-name}-flex         { display: flex; }
+    .d#{$breakpoint-name}-inline-flex  { display: inline-flex; }
+  }
+}
+
+

data/assets/stylesheets/Base/{_typo.scss → _typography.scss}

@@ -1,180 +1,147 @@
-//-----------------------------------
-// HELPER
-// TYPOGRAPHY CLASSES GENERATION
-//-----------------------------------
-
-////
-/// @access public
-/// @group Typography
-/// @type typography
-////
-
-//** Default Typography
-
-/// @prop {typography} font-family-sans-serif [$font-family-sans-serif]
-/// @prop {typography} font-family-serif [$font-family-serif]
-/// @prop {typography} gray-font-family-monospace [$font-family-monospace]
-/// @prop {typography} gray-font-family-base [$font-family-base]
-
-$default_typo: (
-        font-family-sans-serif: $font-family-sans-serif,
-        font-family-serif: $font-family-serif,
-        font-family-monospace: $font-family-monospace,
-        font-family-base: $font-family-base
-);
-
-/*----------------
-    Fonts Family
-----------------*/
-
-@each $name, $value in $default_typo {
-  .#{"" + $name} {
-    font-family: $value;
-  }
-}
-
-//** Default Typography size
-
-/// @prop {typography} font-size-base [$font-size-base]
-/// @prop {typography} font-size-large [$font-size-large]
-/// @prop {typography} font-size-small [$font-size-small]
-
-$default_typo_size: (
-        font-size-base: $font-size-base,
-        font-size-large: $font-size-large,
-        font-size-small: $font-size-small
-);
-
-/*----------------
-    Fonts sizes
-----------------*/
-
-@each $name, $value in $default_typo_size {
-  .#{"" + $name} {
-    font-size: $value;
-  }
-}
-
-.small {
-  font-size: floor((100% * $font-size-small / $font-size-base));
-}
-
-/*----------------
-    Lead-Sizes
-----------------*/
-
-.lead {
-  margin-bottom: $line-height-computed;
-  @include font-size( floor(($font-size-base * 1.15)));
-  font-weight: 300;
-  line-height: 1.4;
-
-  @media (min-width: $screen-sm) {
-    @include font-size($font-size-base * 1.5);
-  }
-}
-
-$max-lead : 28;
-
-@for $i from 10 through $max-lead{
-
-  .lead-#{"" + $i}{
-    font-size: $i + px;
-    line-height: $i;
-  }
-}
-
-/*----------------
-    Fonts Weight & Styles
-----------------*/
-
-$style: normal, bold, bolder;
-@each $i in $style {
-  .#{$i}{
-    font-weight: #{$i};
-  }
-}
-
-//Emphasis
-.italic{
-  font-style: italic;
-}
-
-//Strong
-.strong{
-  font-family: inherit;
-  font-weight: bold;
-}
-
-/*----------------
-    Text Align
-----------------*/
-
-$style: left, center, right, justify;
-@each $i in $style {
-  .#{$i}{
-    text-align: #{$i};
-  }
-}
-
-.text-nowrap{
-  white-space: nowrap;
-}
-
-.truncate {
-  @include truncate;
-}
-
-/*----------------
-    Text Transform
-----------------*/
-
-$style: lowercase, capitalize, uppercase;
-@each $i in $style {
-  .#{$i}{
-    text-transform: #{$i};
-  }
-}
-
-/*----------------
-    Text Decoration
-----------------*/
-
-$style: underline, none;
-@each $i in $style {
-  .decoration-#{$i}{
-    text-decoration: #{$i};
-  }
-}
-
-
-
-.mark {
-  background-color: $brand-warning;
-  padding: .2em;
-}
-
-//Horizontal Rule
-.separator{
-  clear: both;
-  margin: 0;
-  border: 0;
-  height: 2px;
-  background: $gray;
-}
-
-// Abbreviations and acronyms
-.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-
-//Deleted
-.delete{
-  text-decoration: line-through;
-}
-
-//Underline
-.underline{
-  text-decoration: underline;
+//-----------------------------------
+// HELPER
+// TYPOGRAPHY CLASSES GENERATION
+//-----------------------------------
+
+////
+/// @access public
+/// @group Typography
+/// @type typography
+////
+
+/*----------------
+    Fonts Family
+----------------*/
+
+@each $name, $value in $default_typo {
+  .#{"" + $name} {
+    font-family: $value;
+  }
+}
+
+/*----------------
+    Fonts sizes
+----------------*/
+
+@each $name, $value in $default_typo_size {
+  .#{"" + $name} {
+    @include font-size($value);
+  }
+}
+
+.small {
+  @include font-size($font-size-small);
+}
+
+/*----------------
+    Lead-Sizes
+----------------*/
+
+.lead {
+  margin-bottom: $line-height-computed;
+  @include font-size( floor($font-size-base * 1.15));
+  @include line-height( floor($font-size-base * 1.15));
+  font-weight: 300;
+
+  @include mquery($screen-sm) {
+    @include font-size($font-size-base * 1.5);
+  }
+}
+
+@for $i from 10 through $max-lead{
+  .lead-#{"" + $i}{
+    @include font-size($i);
+    @include line-height($i);
+  }
+}
+
+/*----------------
+    Fonts Weight & Styles
+----------------*/
+
+@each $i in $weight-style {
+  .#{$i}{
+    font-weight: #{$i};
+  }
+}
+
+//Emphasis
+.italic{
+  font-style: italic;
+}
+
+//Strong
+.strong{
+  font-family: inherit;
+  font-weight: bold;
+}
+
+/*----------------
+    Text Align
+----------------*/
+
+@each $i in $align-style {
+  .#{$i}{
+    text-align: #{$i};
+  }
+}
+
+.text-nowrap{
+  white-space: nowrap;
+}
+
+.truncate {
+  @include truncate;
+}
+
+/*----------------
+    Text Transform
+----------------*/
+
+@each $i in $style {
+  .#{$i}{
+    text-transform: #{$i};
+  }
+}
+
+/*----------------
+    Text Decoration
+----------------*/
+
+@each $i in $style {
+  .decoration-#{$i}{
+    text-decoration: #{$i};
+  }
+}
+
+
+
+.mark {
+  background-color: $brand-warning;
+  padding: .2em;
+}
+
+//Horizontal Rule
+.separator{
+  clear: both;
+  margin: 0;
+  border: 0;
+  height: 2px;
+  background: $gray;
+}
+
+// Abbreviations and acronyms
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+//Deleted
+.delete{
+  text-decoration: line-through;
+}
+
+//Underline
+.underline{
+  text-decoration: underline;
 }