frontpack 0.1.0

data/app/assets/stylesheets/frontpack/000-reset.scss

@@ -0,0 +1,15 @@
+* {
+  box-sizing: border-box
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  padding: 0;
+  margin: 0;
+}

data/app/assets/stylesheets/frontpack/010-config.scss

@@ -0,0 +1,148 @@
+/* Responsive breakpoints */
+$column-width: 400px !default;
+$responsive-sm-breakpoint: 599px !default;
+$responsive-lg-breakpoint: 1200px !default;
+$content-width: 1200px;
+
+$theme-mode: 'light' !default;
+
+@function mode-brightness($color, $factor) {
+  @if $theme-mode == 'dark' {
+    @return lighten($color, $factor);
+  } @else {
+    @return darken($color, $factor);
+  }
+}
+
+/* Colors */
+$light: #eee !default;
+$dark: #343a40 !default;
+$primary: #007bff !default;
+$secondary: #999999 !default;
+$success: #28a745 !default;
+$info: #17a2b8 !default;
+$warning: #ffc107 !default;
+$danger: #dc3545 !default;
+$special: rebeccapurple !default;
+$alert: $danger;
+$notice: $info;
+
+@function mode-color($light: $light, $dark: $dark) {
+  @if $theme-mode == 'dark' {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+$theme-colors: (
+  primary: ($primary, $light),
+  secondary: ($secondary, $light),
+  success: ($success, $light),
+  info: ($info, $dark),
+  notice: ($notice, $dark),
+  warning: ($warning, $dark),
+  danger: ($danger, $light),
+  alert: ($alert, $light),
+  special: ($special, $light)
+) !default;
+
+/* Design */
+$background: #d4d4d4 !default;
+$foreground: mode-color($dark, $light) !default;
+$highlight: #dcac0b !default;
+
+/* Layout & Design */
+$custom-layout: false !default;
+$default-padding: .5rem !default;
+$default-border-color: mode-brightness($background, 10%) !default;
+$default-border: solid 1px $default-border-color !default;
+$default-outline-color: $highlight !default;
+$default-outline: solid 1px $default-outline-color !default;
+
+$text-font-url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap';
+$text-font: 'Roboto';
+$icon-font-url: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap';
+$icon-font: 'Material Icons';
+
+$header-enable: true !default;
+$header-background: darken($background, 5%) !default;
+$header-foreground: $foreground !default;
+$header-border-bottom: $default-border !default;
+$header-padding: $default-padding !default;
+
+$logo-height: 100px;
+
+$main-menu-enable: true !default;
+$main-menu-background: $header-background !default;
+$main-menu-hover-background: $main-menu-background !default;
+$main-menu-padding: $default-padding !default;
+
+$breadcrumbs-enable: true !default;
+$breadcrumbs-background: $header-background !default;
+$breadcrumbs-foreground: $header-foreground !default;
+$breadcrumbs-border-bottom: $header-border-bottom !default;
+$breadcrumbs-padding: $default-padding !default;
+
+$left-column-enable: true !default;
+$left-column-background: $background !default;
+$left-column-foreground: $foreground !default;
+$left-column-border-right: $default-border !default;
+$left-column-padding: $default-padding !default;
+
+$right-column-enable: true !default;
+$right-column-background: $background !default;
+$right-column-foreground: $foreground !default;
+$right-column-border-left: $default-border !default;
+$right-column-padding: $default-padding !default;
+
+$footer-enable: true !default;
+$footer-background: darken($background, 5%) !default;
+$footer-foreground: $foreground !default;
+$footer-border-top: $default-border !default;
+$footer-padding: $default-padding !default;
+
+/* Typography */
+$link-color: $highlight !default;
+$link-color-hover: lighten($link-color, 10) !default;
+$link-color-visited: darken($link-color, 10) !default;
+$link-color-active: lighten($link-color, 10) !default;
+@import url(#{$text-font-url});
+@import url(#{$icon-font-url});
+
+/* Components */
+/* Card */
+$card-background: $light !default;
+$card-foreground: #444 !default;
+$card-header-background-color: #ececec !default;
+$card-header-foreground-color: #444 !default;
+$card-border-color: darken($card-header-background-color, 10%) !default;
+
+/* Form Controls */
+$fieldset-border-color: $highlight !default;
+$input-background: mode-color() !default;
+$input-foreground: mode-color($dark, $light) !default;
+$input-border-bottom-width: 2px !default;
+$input-border-color: transparent !default;
+$input-background-focus: lighten($background, 20) !default;
+$input-border-color-focus: $highlight !default;
+$input-background-color-error: transparentize($danger, 0.5) !default;
+$input-border-color-error: $danger !default;
+$input-text-error: $danger !default;
+$form-background-color: lighten($background, 10) !default;
+
+/* Table */
+$table-stripped-odd-row-background: #6c757d !default;
+$table-selectable-hover-background-color: #17a2b8 !default;
+$table-bordered-border-color: #000000 !default;
+$table-bordered-rows-border-color: #000000 !default;
+$table-bordered-columns-border-color: #730E15 !default;
+
+$toggle-box-border-color: $input-border-color;
+$toggle-box-background-color: $background;
+$toggle-box-border-color-yes: lighten($success, 30);
+$toggle-box-border-color-no: lighten($dark, 50);
+$toggle-box-button-color-yes: $success;
+$toggle-box-button-background-color-yes: lighten($success, 40);
+$toggle-box-button-color-no: $danger;
+$toggle-box-button-background-color-no: lighten($danger, 40);

data/app/assets/stylesheets/frontpack/020-mixins.scss

@@ -0,0 +1,218 @@
+@use "010-config" as config;
+
+@mixin for-phones-only() {
+  @media (max-width: config.$responsive-sm-breakpoint) {
+    @content;
+  }
+}
+
+@mixin for-tablets-up() {
+  @media (min-width: config.$responsive-sm-breakpoint + 1px) and (max-width: config.$responsive-lg-breakpoint - 1px) {
+    @content;
+  }
+}
+
+@mixin for-desktops-up {
+  @media (min-width: config.$responsive-lg-breakpoint) {
+    @content;
+  }
+}
+
+@mixin background-variants($color-map, $brightness: 0%, $hover-brightness: 0%, $border-brightness: -10%, $transparency: -.4, $includeDisable: false) {
+  background-origin: border-box;
+
+  @each $name, $colors in $color-map {
+    &.#{$name} {
+      $color: nth($colors, 1);
+
+      background-color: adjust-color($color, $lightness: $brightness, $alpha: $transparency);
+      color: nth($colors, 2);
+
+      @if $border-brightness != 0 {
+        border: 1px solid adjust-color($color, $lightness: $border-brightness, $alpha: $transparency);
+      }
+
+      @if $hover-brightness != 0 {
+        &:hover {
+          background-color: adjust-color($color, $lightness: $hover-brightness, $alpha: $transparency);
+        }
+      }
+
+      @if $includeDisable {
+        &:disabled {
+          opacity: .4;
+        }
+      }
+    }
+  }
+}
+
+@mixin color-variants($color-map, $brightness: 0%, $hover-brightness: 0%) {
+  @each $name, $colors in $color-map {
+    &.text-#{$name} {
+      $color: nth($colors, 1);
+      color: adjust-color($color, $lightness: $brightness);
+
+      @if $hover-brightness != 0% {
+        &:hover {
+          color: adjust-color($color, $lightness: $hover-brightness);
+        }
+      }
+    }
+  }
+}
+
+@mixin grid-area($names...) {
+  @each $name in $names {
+    ##{$name} {
+      grid-area: $name;
+    }
+  }
+}
+
+@mixin responsive-breakpoints($class: "", $include-base-class: true) {
+  @if $class != "" {
+    @include for-phones-only() { .sm-#{$class} { @content; } }
+    @include for-tablets-up() { .md-#{$class} { @content; } }
+    @include for-desktops-up() { .lg-#{$class} { @content; } }
+    @if $include-base-class {
+      @include for-desktops-up() { .#{$class} { @content; } }
+    }
+  } @else {
+    @include for-phones-only() { @content("sm-"); }
+    @include for-tablets-up() { @content("md-"); }
+    @include for-desktops-up() { @content("lg-"); }
+    @if $include-base-class {
+      @content("");
+    }
+  }
+}
+
+$measurements: (w width, h height, min-w min-width, min-h min-height, max-w max-width, max-h max-height);
+$side-variants: ("" "", b "-bottom", t "-top", r "-right", l "-left");
+
+@mixin sizes($class, $property, $breakpoint, $measurement) {
+  $i: 5;
+  @while $i <= 100 {
+    .#{$class}#{$breakpoint}-#{$i} {
+      #{$property}: $i * $measurement;
+    }
+    $i: $i + 5;
+  }
+}
+
+@mixin size-variants($property, $alias, $factor, $sides: false, $responsive: false, $include-base-class: false, $extras: "", $selector-prefix: "") {
+  @for $multiplier from 1 through 16 {
+    @if $responsive {
+      @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
+        @if $sides {
+          @each $suffix, $modifier in $side-variants {
+            #{$selector-prefix}.#{$prefix}#{$alias}#{$suffix}-#{$multiplier} {
+              #{$property}#{$modifier}: $multiplier * $factor #{$extras} !important;
+            }
+          }
+          #{$selector-prefix}.#{$prefix}#{$alias}h-#{$multiplier} {
+            #{$property}-left: $multiplier * $factor #{$extras} !important;
+            #{$property}-right: $multiplier * $factor #{$extras} !important;
+          }
+          #{$selector-prefix}.#{$prefix}#{$alias}v-#{$multiplier} {
+            #{$property}-top: $multiplier * $factor #{$extras} !important;
+            #{$property}-bottom: $multiplier * $factor #{$extras} !important;
+          }
+        } @else {
+          #{$selector-prefix}.#{$prefix}#{$alias}-#{$multiplier} { $property: $multiplier * $factor #{$extras} !important; }
+        }
+      }
+    } @else {
+      @if $sides {
+        @each $suffix, $modifier in $side-variants {
+          #{$selector-prefix}.#{$alias}#{$suffix}-#{$multiplier} {
+            #{$property}#{$modifier}: $multiplier * $factor #{$extras} !important;
+          }
+        }
+        #{$selector-prefix}.#{$alias}h-#{$multiplier} {
+          #{$property}-left: $multiplier * $factor #{$extras} !important;
+          #{$property}-right: $multiplier * $factor #{$extras} !important;
+        }
+        #{$selector-prefix}.#{$alias}v-#{$multiplier} {
+          #{$property}-top: $multiplier * $factor #{$extras} !important;
+          #{$property}-bottom: $multiplier * $factor #{$extras} !important;
+        }
+      } @else {
+        #{$selector-prefix}.#{$alias}-#{$multiplier} { #{$property}: $multiplier * $factor #{$extras} !important; }
+      }
+    }
+  }
+}
+
+@mixin property-variants($property, $alias, $variants, $responsive: false, $include-base-class: false) {
+  @if $responsive {
+    @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
+      @each $suffix, $value in $variants {
+        .#{$prefix}#{$alias}-#{$suffix} {
+          #{$property}: $value !important;
+        }
+      }
+    }
+  } @else {
+    @each $suffix, $value in $variants {
+      .#{$alias}-#{$suffix} {
+        #{$property}: $value !important;
+      }
+    }
+  }
+}
+
+@mixin property-range($property, $alias, $min, $max, $responsive: false, $include-base-class: false) {
+  @if $responsive {
+    @for $i from $min through $max {
+      @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
+        .#{$prefix}#{$alias}-#{$i} { @content($i); }
+      }
+    }
+  } @else {
+    @for $i from $min through $max {
+      .#{$alias}-#{$i} {
+        @content($i);
+      }
+    }
+  }
+}
+
+@mixin font-sizes($breakpoint) {
+  @for $i from 1 through 3 {
+    .#{$breakpoint}small-#{$i} {
+      font-size: 1rem - ($i * .25rem);
+    }
+  }
+
+  @for $i from 1 through 12 {
+    .#{$breakpoint}large-#{$i} {
+      font-size: 1rem + ($i * .25rem);
+    }
+  }
+}
+
+@mixin frontpack-gradient($background-color, $color, $gradient-breakpoint: 10px, $brightness: 0%){
+  $background-color: adjust-color($color, $lightness: $brightness);
+  background: linear-gradient(0, lighten($background-color, 20), $background-color $gradient-breakpoint, lighten($background-color, 20));
+  border-bottom: 1px solid $background-color;
+  color: $color;
+}
+
+@mixin outline-variants($color-map, $hover: 0%, $border: -10%) {
+  background: transparent;
+  @each $name, $colors in $color-map {
+    &.outline-#{$name} {
+      $color: nth($colors, 1);
+      color: $color;
+      border: adjust-color($color, $lightness: $border) 1px solid;
+      @if $hover != 0 {
+        &:hover {
+          background: adjust-color($color, $lightness: $hover);
+          color: nth($colors, 2);
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/frontpack/030-consts.scss

@@ -0,0 +1,13 @@
+@use "020-mixins" as mixins;
+
+// display
+@include mixins.responsive-breakpoints(hidden) { display: none !important; }
+@include mixins.responsive-breakpoints(block) { display: block !important; }
+@include mixins.responsive-breakpoints(inline-block) { display: inline-block !important; }
+@include mixins.responsive-breakpoints(inline) { display: inline !important; }
+
+// position
+@include mixins.property-variants(text-align, ta, (l left, c center, r right));
+@include mixins.property-variants(vertical-align, va, (t top, m middle, b bottom));
+@include mixins.property-variants(position, p, (rel relative, abs absolute, sta static));
+

data/app/assets/stylesheets/frontpack/031-margins.scss

@@ -0,0 +1,5 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+@include mixins.size-variants(margin, m, .25rem, true, true, true);
+@include mixins.size-variants(padding, p, .25rem, true, true, true);

data/app/assets/stylesheets/frontpack/100-layout.scss

@@ -0,0 +1,113 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+@use "sass:math";
+
+@if config.$custom-layout == false {
+  body {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content min-content 1fr min-content;
+    grid-template-areas: "header header header" "breadcrumbs breadcrumbs breadcrumbs" "messages messages messages" "left content right" "footer footer footer";
+  }
+
+  @include mixins.grid-area(header, breadcrumbs, messages, left, content, right, footer, actions);
+
+  #header {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: auto;
+    grid-template-areas: "logo main-menu profile";
+    align-items: end;
+  }
+
+  #actions {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: auto;
+    grid-template-areas: "left center right";
+    grid-column-gap: .5rem;
+    padding: .5rem;
+    align-items: stretch;
+
+    > div {
+      display: flex;
+      align-items: center;
+      column-gap: .5rem;
+    }
+
+    .left {
+      grid-area: left;
+    }
+
+    .center {
+      grid-area: center;
+    }
+
+    .right {
+      grid-area: right;
+    }
+  }
+
+  .actions {
+    grid-column: span 12;
+  }
+
+  @include mixins.grid-area(btn-left, logo, btn-right, main-menu, profile);
+
+  #btn-menu {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+
+  #logo {
+    display: inline-block;
+
+    img {
+      height: config.$logo-height;
+    }
+  }
+
+  #main-menu {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  #left, #right {
+    display: inline-block;
+    width: config.$column-width;
+    background: rgba(255, 0, 0, .2);
+  }
+
+  #content {
+    overflow-y: auto;
+    padding: config.$default-padding;
+  }
+
+  @include mixins.for-phones-only() {
+    body {
+      grid-template-columns: 1fr;
+      grid-template-rows: min-content min-content min-content 1fr min-content;
+      grid-template-areas: "header" "breadcrumbs" "messages" "content" "footer";
+    }
+
+    #header {
+      grid-template-columns: 1fr;
+      grid-template-rows: min-content 1fr min-content;
+      grid-template-areas: "logo" "main-menu" "profile";
+      align-items: start;
+      justify-items: center;
+    }
+
+    #logo {
+      img {
+        height: math.div(config.$logo-height, 2);
+      }
+    }
+
+    #main-menu {
+      width: 100%;
+      flex-flow: column nowrap;
+    }
+  }
+}

data/app/assets/stylesheets/frontpack/101-container.scss

@@ -0,0 +1,131 @@
+@use "010-config" as config;
+@use "020-mixins" as mixins;
+
+.container {
+  &.fluid {
+    width: 100%;
+  }
+
+  &.fixed-width {
+    width: config.$content-width;
+    margin: auto;
+  }
+
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-auto-rows: min-content;
+    @for $i from 2 through 11 {
+      &.grid-#{$i} {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+
+    @include mixins.property-range(grid-column, col, 1, 12, true, true) using($i) {
+      grid-column: span $i;
+    }
+    @include mixins.property-range(grid-column, column, 1, 12, true, true) using($i) {
+      grid-column: $i;
+    }
+
+    @include mixins.property-range(grid-row, row, 1, 12, true, true) using($i) {
+      grid-column: span $i;
+    }
+
+    @include mixins.size-variants(grid-gap, gap, .25rem, false, false, true, $selector-prefix: "&");
+    @include mixins.size-variants(grid-row-gap, row-gap, .25rem, false, false, true, $selector-prefix: "&");
+    @include mixins.size-variants(grid-column-gap, col-gap, .25rem, false, false, true, $selector-prefix: "&");
+  }
+
+  &.flex {
+    display: flex;
+
+    &.row {
+      flex-direction: row;
+
+      &.reverse {
+        flex-direction: row-reverse;
+      }
+    }
+
+    &.column {
+      flex-direction: column;
+
+      &.reverse {
+        flex-direction: column-reverse;
+      }
+    }
+
+    &.no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &.wrap {
+      flex-wrap: wrap;
+    }
+
+    @each $position in (start end center) {
+      &.#{$position} {
+        align-items: $position;
+        align-content: $position;
+      }
+      &.justify-#{$position} {
+        justify-items: $position;
+        justify-content: $position;
+      }
+    }
+    @each $position in (stretch space-around space-between space-evenly) {
+      &.#{$position} {
+        align-content: $position;
+      }
+      &.justify-#{$position} {
+        justify-content: $position;
+      }
+    }
+  }
+
+  &.centered {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    align-content: center;
+    justify-items: center;
+    justify-content: center;
+    padding: 1rem;
+
+    .content {
+      width: config.$content-width;
+    }
+  }
+}
+
+@include mixins.for-tablets-up {
+  .container {
+
+    &.fixed-width {
+      width: 100%;
+    }
+
+    .centered {
+      .content {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include mixins.for-phones-only {
+  .container {
+
+    &.fixed-width {
+      width: 100%;
+    }
+
+    .centered {
+      .content {
+        width: 100%;
+      }
+    }
+  }
+}