@provoly/dashboard 0.11.0

package/styles/layout/grid/_grid.scss

@@ -0,0 +1,141 @@
+@use './mixins/grid-mixins' as *;
+@use './variables/grid-variables' as *;
+
+// Creds to https://github.com/kristoferjoseph/flexboxgrid
+// No gutters
+// No text alignment with justified container classes (center-xs, for example)
+
+.row {
+  @include row();
+}
+
+.row.reverse {
+  @include row-reverse();
+}
+
+.row.natural-height {
+  @include row-natural-height();
+}
+
+.row.flex-column {
+  @include row-flex-column();
+}
+
+.col {
+  @include col();
+}
+
+.col.reverse {
+  @include col-reverse();
+}
+
+.first {
+  order: -1;
+}
+
+.last {
+  order: 1;
+}
+
+.align-start {
+  align-self: flex-start;
+}
+
+.align-end {
+  align-self: flex-end;
+}
+
+.align-center {
+  align-self: center;
+}
+
+.align-baseline {
+  align-self: baseline;
+}
+
+.align-stretch {
+  align-self: stretch;
+}
+
+// Mixin to run inside of for loop - creates col/breakpoint classes * Not for developer use *
+@mixin col-factory($thisPrefix) {
+  .col-#{$thisPrefix} {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+    padding: $gutter;
+  }
+  @for $i from 1 through $grid-columns {
+    .col-#{$thisPrefix}-#{$i} {
+      flex-basis: calc(100% / $grid-columns) * $i;
+      max-width: calc(100% / $grid-columns) * $i;
+      padding: $gutter;
+    }
+    .col-#{$thisPrefix}-offset-#{$i} {
+      margin-left: calc(100% / $grid-columns) * $i;
+    }
+  }
+  .row.start-#{$thisPrefix} {
+    justify-content: flex-start;
+  }
+  .row.center-#{$thisPrefix} {
+    justify-content: center;
+  }
+  .row.end-#{$thisPrefix} {
+    justify-content: flex-end;
+  }
+  .row.top-#{$thisPrefix} {
+    align-items: flex-start;
+  }
+  .row.middle-#{$thisPrefix} {
+    align-items: center;
+  }
+  .row.bottom-#{$thisPrefix} {
+    align-items: flex-end;
+  }
+  .row.around-#{$thisPrefix} {
+    justify-content: space-around;
+  }
+  .row.between-#{$thisPrefix} {
+    justify-content: space-between;
+  }
+  .first-#{$thisPrefix} {
+    order: -1;
+  }
+  .last-#{$thisPrefix} {
+    order: 1;
+  }
+}
+
+// Mixin to run inside of for loop - creates col/breakpoint classes
+
+@for $i from 1 through length($breakpoint-up-prefixes) {
+  $thisPrefix: nth($breakpoint-up-prefixes, $i);
+  @if $thisPrefix == 'xs' {
+    @include col-factory($thisPrefix);
+  } @else if $thisPrefix == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      @include col-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'md' {
+    @media #{$breakpoint-md-up} {
+      @include col-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      @include col-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      @include col-factory($thisPrefix);
+    }
+  }
+}
+
+.col-gutter-lr {
+  padding: 0 $gutter;
+}
+
+.col-no-gutter {
+  padding: 0;
+}

package/styles/layout/grid/_visibility.scss

@@ -0,0 +1,71 @@
+@use './variables/grid-variables' as *;
+
+.show {
+  display: block !important;
+}
+
+.row.show {
+  display: -webkit-flex !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.hide {
+  display: none !important;
+}
+
+// Mixin to run inside of for loop - creates visibility classes * Not for developer use *
+@mixin vis-factory($thisPrefix) {
+  .show-#{$thisPrefix} {
+    display: block !important;
+  }
+  .row.show-#{$thisPrefix} {
+    display: -webkit-flex !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .hide-#{$thisPrefix} {
+    display: none !important;
+  }
+}
+
+// Mixin to run inside of for loop - creates visibility classes * Not for developer use *
+
+@for $i from 1 through length($breakpoint-all-prefixes) {
+  $thisPrefix: nth($breakpoint-all-prefixes, $i);
+  @if $thisPrefix == 'xs' {
+    @include vis-factory($thisPrefix);
+  } @else if $thisPrefix == 'xs-only' {
+    @media #{$breakpoint-xs-only} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'sm-only' {
+    @media #{$breakpoint-sm-only} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'md' {
+    @media #{$breakpoint-md-up} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'md-only' {
+    @media #{$breakpoint-md-only} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'lg-only' {
+    @media #{$breakpoint-lg-only} {
+      @include vis-factory($thisPrefix);
+    }
+  } @else if $thisPrefix == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      @include vis-factory($thisPrefix);
+    }
+  }
+}

package/styles/layout/grid/mixins/_grid-mixins.scss

@@ -0,0 +1,368 @@
+@use '../variables/grid-variables' as *;
+
+@mixin row($full-width: 'false') {
+  margin: 0 auto;
+  width: 100%;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  // // Overrides flexbox's default behavior of making all children equal height
+  // align-items: flex-start; // If this was not in place it would require two classes to make a row full of unequal height columns aligned top, middle, bottom
+  @if type-of($content-well-max-width) == number and $content-well-max-width != 0 and $full-width == 'false' {
+    max-width: $content-well-max-width;
+  }
+}
+
+@mixin row-reverse() {
+  flex-direction: row-reverse;
+}
+
+@mixin row-natural-height() {
+  align-items: flex-start;
+}
+
+@mixin row-flex-column() {
+  flex-direction: column;
+}
+
+@mixin col-reverse() {
+  flex-direction: column-reverse;
+}
+
+// Condition to run inside of the col mixin * not for developer use *
+@mixin col-condition($col-number) {
+  @if type-of($col-number) == number {
+    @if $col-number > $grid-columns or $col-number == 0 {
+      @warn "Column number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})";
+    } @else {
+      flex-basis: 100% / $grid-columns * $col-number;
+      max-width: 100% / $grid-columns * $col-number;
+      padding: $gutter;
+    }
+    // If no col number is passed then arg is set to "auto" by default
+    // "auto" mode fills the horizontal space with evenly sized containers
+  } @else if $col-number == 'auto' {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+    padding: $gutter;
+  } @else {
+    @warn "Column number argument must either be the string 'auto' or a number greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})";
+  }
+}
+
+// Condition to run inside of the col mixin * not for developer use *
+
+@mixin col($breakpoint: 'xs', $col-number: 'auto') {
+  // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs
+  @if type-of($breakpoint) == number {
+    $col-number: $breakpoint;
+    @include col-condition($col-number);
+  } @else if $breakpoint == 'xs' {
+    @include col-condition($col-number);
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      @include col-condition($col-number);
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      @include col-condition($col-number);
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      @include col-condition($col-number);
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      @include col-condition($col-number);
+    }
+  } @else {
+    @warn "col mixin requires one of the existing breakpoint prefixes (#{$breakpoint-up-prefixes})";
+  }
+}
+
+// Condition to run inside of the col-offset mixin * not for developer use *
+@mixin col-offset-condition($offset-number) {
+  @if type-of($offset-number) != number {
+    @warn "Column offset number must be a number (only arg or second arg in the col mixin)";
+  } @else if $offset-number == 0 {
+    @warn "Column offset number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})";
+  } @else if $offset-number > $grid-columns {
+    @warn "Column offset number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})";
+  } @else {
+    margin-left: 100% / $grid-columns * $offset-number;
+  }
+}
+
+// Condition to run inside of the col-offset mixin * not for developer use *
+
+@mixin col-offset($breakpoint: 'xs', $offset-number: 0) {
+  // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs
+  @if type-of($breakpoint) == number {
+    $offset-number: $breakpoint;
+    @include col-offset-condition($offset-number);
+  } @else if $breakpoint == 'xs' {
+    @include col-offset-condition($offset-number);
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      @include col-offset-condition($offset-number);
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      @include col-offset-condition($offset-number);
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      @include col-offset-condition($offset-number);
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      @include col-offset-condition($offset-number);
+    }
+  } @else {
+    @warn "col mixin requires one of the existing breakpoint prefixes (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin start($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    justify-content: flex-start;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      justify-content: flex-start;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      justify-content: flex-start;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      justify-content: flex-start;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      justify-content: flex-start;
+    }
+  } @else {
+    @warn "start mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin center($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    justify-content: center;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      justify-content: center;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      justify-content: center;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      justify-content: center;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      justify-content: center;
+    }
+  } @else {
+    @warn "center mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin end($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    justify-content: flex-end;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      justify-content: flex-end;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      justify-content: flex-end;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      justify-content: flex-end;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      justify-content: flex-end;
+    }
+  } @else {
+    @warn "end mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin top($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    align-items: flex-start;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      align-items: flex-start;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      align-items: flex-start;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      align-items: flex-start;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      align-items: flex-start;
+    }
+  } @else {
+    @warn "top mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin middle($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    align-items: center;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      align-items: center;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      align-items: center;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      align-items: center;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      align-items: center;
+    }
+  } @else {
+    @warn "middle mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin bottom($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    align-items: flex-end;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      align-items: flex-end;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      align-items: flex-end;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      align-items: flex-end;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      align-items: flex-end;
+    }
+  } @else {
+    @warn "bottom mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin around($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    justify-content: space-around;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      justify-content: space-around;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      justify-content: space-around;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      justify-content: space-around;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      justify-content: space-around;
+    }
+  } @else {
+    @warn "around mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin between($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    justify-content: space-between;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      justify-content: space-between;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      justify-content: space-between;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      justify-content: space-between;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      justify-content: space-between;
+    }
+  } @else {
+    @warn "between mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin first($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    order: -1;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      order: -1;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      order: -1;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      order: -1;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      order: -1;
+    }
+  } @else {
+    @warn "first mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}
+
+@mixin last($breakpoint: 'xs') {
+  @if $breakpoint == 'xs' {
+    order: 1;
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      order: 1;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      order: 1;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      order: 1;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      order: 1;
+    }
+  } @else {
+    @warn "last mixin arg must be one of the existing breakpoints (#{$breakpoint-up-prefixes})";
+  }
+}

package/styles/layout/grid/mixins/_visibility-mixins.scss

@@ -0,0 +1,115 @@
+@mixin show($breakpoint, $row) {
+  @if $breakpoint == 'xs' {
+    @if $row == 'true' or $row == 'row' {
+      display: flex;
+    } @else {
+      display: block;
+    }
+  } @else if $breakpoint == 'xs-only' {
+    @media #{$breakpoint-xs-only} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'sm-only' {
+    @media #{$breakpoint-sm-only} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'md-only' {
+    @media #{$breakpoint-md-only} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'lg-only' {
+    @media #{$breakpoint-lg-only} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      @if $row == 'true' or $row == 'row' {
+        display: flex;
+      } @else {
+        display: block;
+      }
+    }
+  } @else {
+    @warn "show mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
+  }
+}
+
+@mixin hide($breakpoint) {
+  @if $breakpoint == 'xs' {
+    display: none;
+  } @else if $breakpoint == 'xs-only' {
+    @media #{$breakpoint-xs-only} {
+      display: none;
+    }
+  } @else if $breakpoint == 'sm' {
+    @media #{$breakpoint-sm-up} {
+      display: none;
+    }
+  } @else if $breakpoint == 'sm-only' {
+    @media #{$breakpoint-sm-only} {
+      display: none;
+    }
+  } @else if $breakpoint == 'md' {
+    @media #{$breakpoint-md-up} {
+      display: none;
+    }
+  } @else if $breakpoint == 'md-only' {
+    @media #{$breakpoint-md-only} {
+      display: none;
+    }
+  } @else if $breakpoint == 'lg' {
+    @media #{$breakpoint-lg-up} {
+      display: none;
+    }
+  } @else if $breakpoint == 'lg-only' {
+    @media #{$breakpoint-lg-only} {
+      display: none;
+    }
+  } @else if $breakpoint == 'xl' {
+    @media #{$breakpoint-xl-up} {
+      display: none;
+    }
+  } @else {
+    @warn "hide mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})";
+  }
+}