global.scss

/*************/
/* Utilities */
/*************/

// height and width
.h-auto {
  height: auto !important;
}
.h-fit-content {
  height: fit-content !important;
}
.max-content-height {
  height: max-content !important;
}
.w-auto {
  width: auto !important;
}
.w-fit-content {
  width: fit-content !important;
}
.max-content-width {
  width: max-content !important;
}

//h-0 through h-100, w-0 through w-100
$dim-start: 0 !default;
$dim-end: 100 !default;
$interval: 1 !default;
$dimensions: (
  height: h,
  width: w,
);

@each $dimension, $dim in $dimensions {
  $i: $dim-start;

  @while $i <= $dim-end {
    .#{$dim}-#{$i} {
      #{$dimension}: #{$i}#{'%'} !important;

      $i: $i + $interval;
    }
  }
}

//min-height and min-width
@each $dimension, $dim in $dimensions {
  $i: $dim-start;

  @while $i <= $dim-end {
    .min-#{$dim}-#{$i} {
      min-#{$dimension}: #{$i}#{'%'} !important;

      $i: $i + $interval;
    }
  }
}

//max-height and max-width
@each $dimension, $dim in $dimensions {
  $i: $dim-start;

  @while $i <= $dim-end {
    .max-#{$dim}-#{$i} {
      max-#{$dimension}: #{$i}#{'%'} !important;

      $i: $i + $interval;
    }
  }
}
// margin and padding
.m-auto {
  margin: auto !important;
}
.m-0-auto {
  margin: 0 auto !important;
}
.p-0-auto {
  padding: 0 auto !important;
}
.p-auto {
  padding: auto !important;
}

// padding .25rem and .5rem
.p-quarter {
  padding: 0.25rem !important;
}
.py-quarter {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.px-quarter {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.pb-quarter {
  padding-bottom: 0.25rem !important;
}
.pt-quarter {
  padding-top: 0.25rem !important;
}
.pr-quarter {
  padding-right: 0.25rem !important;
}
.pl-quarter {
  padding-left: 0.25rem !important;
}

.p-half {
  padding: 0.5rem !important;
}
.py-half {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.px-half {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.pb-half {
  padding-bottom: 0.5rem !important;
}
.pt-half {
  padding-top: 0.5rem !important;
}
.pr-half {
  padding-right: 0.5rem !important;
}
.pl-half {
  padding-left: 0.5rem !important;
}

//margin .25rem and .5rem
.m-quarter {
  margin: 0.25rem !important;
}
.my-quarter {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.mx-quarter {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.mb-quarter {
  margin-bottom: 0.25rem !important;
}
.mt-quarter {
  margin-top: 0.25rem !important;
}
.mr-quarter {
  margin-right: 0.25rem !important;
}
.ml-quarter {
  margin-left: 0.25rem !important;
}

.m-half {
  margin: 0.5rem !important;
}
.my-half {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.mx-half {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.mb-half {
  margin-bottom: 0.5rem !important;
}
.mt-half {
  margin-top: 0.5rem !important;
}
.mr-half {
  margin-right: 0.5rem !important;
}
.ml-half {
  margin-left: 0.5rem !important;
}

$start: 0 !default;
$end: 10 !default;

$properties: (
  margin: m,
  padding: p,
);
$sides: (
  top: t,
  right: r,
  bottom: b,
  left: l,
);

// UNITS: REM !!
// margin & padding m-0 through m-10, p-0 through p-10
@each $property, $prop in $properties {
  @for $i from $start through $end {
    .#{$prop}-#{$i} {
      #{$property}: #{$i}rem !important;
    }
  }
}

// margin & padding x (m or p)x-0 through (m or p)x-10
@each $property, $prop in $properties {
  @for $i from $start through $end {
    .#{$prop}x-#{$i} {
      #{$property}-left: #{$i}rem !important;
      #{$property}-right: #{$i}rem !important;
    }
  }
}

// margin & padding y (m or p)y-0 through (m or p)y-10
@each $property, $prop in $properties {
  @for $i from $start through $end {
    .#{$prop}y-#{$i} {
      #{$property}-top: #{$i}rem !important;
      #{$property}-bottom: #{$i}rem !important;
    }
  }
}

// margin & padding sides m(side)-(0 to 10), p(side)-(0 to 10)
@each $property, $prop in $properties {
  @each $side, $name in $sides {
    @for $i from $start through $end {
      .#{$prop}#{$name}-#{$i} {
        #{$property}-#{$side}: #{$i}rem !important;
      }
    }
  }
}

// UNITS: PIXELS!!
$startPX: 0 !default;
$endPX: 50 !default;

// margin & padding m-0px through m-50px, p-0px through p-50px
@each $property, $prop in $properties {
  @for $i from $startPX through $endPX {
    .#{$prop}-#{$i}px {
      #{$property}: #{$i}px !important;
    }
  }
}

// margin & padding x (m or p)x-0px through (m or p)x-50px
@each $property, $prop in $properties {
  @for $i from $startPX through $endPX {
    .#{$prop}x-#{$i}px {
      #{$property}-left: #{$i}px !important;
      #{$property}-right: #{$i}px !important;
    }
  }
}

// margin & padding y (m or p)y-0px through (m or p)y-50px
@each $property, $prop in $properties {
  @for $i from $startPX through $endPX {
    .#{$prop}y-#{$i}px {
      #{$property}-top: #{$i}px !important;
      #{$property}-bottom: #{$i}px !important;
    }
  }
}

// margin & padding sides m(side)-(0 to 50)px, p(side)-(0 to 50)px
@each $property, $prop in $properties {
  @each $side, $name in $sides {
    @for $i from $startPX through $endPX {
      .#{$prop}#{$name}-#{$i}px {
        #{$property}-#{$side}: #{$i}px !important;
      }
    }
  }
}

// position
.relative {
  position: relative !important;
}

.fixed {
  position: fixed !important;
}

.absolute {
  position: absolute !important;
}

.r-50 {
  right: 50% !important;
}

.t-50 {
  top: 50% !important;
}

.stick-b {
  position: fixed !important;
  bottom: 0px !important;
}

// z-index z-0 to z-10
$i: 0;

@for $i from 0 through 10 {
  .z-#{$i} {
    z-index: #{$i} !important;
  }
}

// display
.dib {
  display: inline-block !important;
}

.d-inline {
  display: inline !important;
}

.d-block {
  display: block !important;
}

//opacity
.opacity0 {
  opacity: 0 !important;
}

.opacity1 {
  opacity: 1 !important;
}

// text
.text-align-start {
  text-align: start !important;
}

.text-align-end {
  text-align: end !important;
}

.text-align-right {
  text-align: right !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-center {
  text-align: center !important;
}

.rtl {
  direction: rtl !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.br-8px {
  border-radius: 8px !important;
}

.br-16px {
  border-radius: 16px !important;
}

.br-50 {
  border-radius: 50% !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}
/* text color */
.black {
  color: #2a3032 !important;
}

.gray {
  color: #666666 !important;
}

.white {
  color: white !important;
}

/* flex */
.flex {
  display: flex !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.grow-0 {
  flex-grow: 0 !important;
}
.grow-1 {
  flex-grow: 1 !important;
}
.grow-2 {
  flex-grow: 2 !important;
}

.shrink-0 {
  flex-shrink: 0 !important;
}
.shrink-1 {
  flex-shrink: 1 !important;
}
.shrink-2 {
  flex-shrink: 2 !important;
}

.row {
  flex-direction: row !important;
}

.column {
  flex-direction: column !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-strech {
  align-self: stretch !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

// misc
.pointer {
  cursor: pointer !important;
}