_helpers.scss

_helpers.scss

/**

space
-----

Spacing between elements as multiple of 5

**/


//.font-size-10, .font-size-36
$fontamounts: (
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  16,
  18,
  20,
  24,
  28,
  36
); // Adjust this to include the pixel amounts you need.

@each $fontsize in $fontamounts {

  .font-size-#{$fontsize} {
    font-size: #{$fontsize}px;
  }
}

// .padding-0 , .padding-1, .padding-3 ... .padding-50, .margin-0, .margin-1,...., .margin-50
$spaceamounts: (
  0,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  60,
  75,
  100,
  125,
  150,
  175,
  200
); // Adjust this to include the pixel amounts you need.

@each $space in $spaceamounts {

  .margin-#{$space} {
    margin: #{$space}px !important;
  }

  .margin-t-#{$space} {
    margin-top: #{$space}px !important;
  }

  .margin-b-#{$space} {
    margin-bottom: #{$space}px !important;
  }

  .padding-#{$space} {
    padding: #{$space}px !important;
  }

  .padding-x-#{$space} {
    padding-right: #{$space}px !important;
    padding-left: #{$space}px !important;
  }

  .padding-y-#{$space} {
    padding-top: #{$space}px !important;
    padding-bottom: #{$space}px !important;
  }

  .padding-t-#{$space} {
    padding-top: #{$space}px !important;
  }

  .padding-b-#{$space} {
    padding-bottom: #{$space}px !important;
  }

  .padding-l-#{$space} {
    padding-left: #{$space}px !important;
  }

  .padding-r-#{$space} {
    padding-right: #{$space}px !important;
  }

  .gap-#{$space} {
    height: #{$space}px !important;
    clear: both;
  }
}

$radiusamounts: (0, 2, 4, 8, 16); // Adjust this to include the pixel amounts you need.

@each $radius in $radiusamounts {

  .r-#{$radius} {
    border-radius: #{$radius}px !important;
  }
}

.pointer {
  cursor: pointer;
}

.display-contents {
  display: contents !important;
}