swop 0.1.0

data/app/assets/stylesheets/rails_admin/custom/base/variables.scss

@@ -0,0 +1,86 @@
+// Colors
+$white: #fff;
+$black: #000;
+
+$azure: #245ae4;            // Private – Primary color
+$jnquil: #ffd334;           // Private – Secondary color
+$lime-green: #00c648;       // Private – Success color
+$amethyst: #b652e4;         // Private – Info color
+$princeton-orange: #fc9e34; // Private – Warning color
+$vermilion: #e4150a;        // Private – Danger color
+$ghost-white: #f3f6ff;      // Private – Light color
+$eerie-black: #20284e;      // Private – Dark color
+
+$dim-gray: #606884;   // Private – Text color
+$taupe-gray: #8C8ea2; // Private – Text secondary color
+
+$platinum: #ecf0fa; // Private – Border color
+
+$primary-color: $azure;
+$secondary-color: $jnquil;
+$success-color: $lime-green;
+$info-color: $amethyst;
+$warning-color: $princeton-orange;
+$danger-color: $vermilion;
+$light-color: $ghost-white;
+$dark-color: $eerie-black;
+
+$text-color: $dim-gray;
+$text-secondary-color: $taupe-gray;
+
+$primary-gradient: linear-gradient(125deg, lighten($primary-color, 2.5%) 0%, darken($primary-color, 2.5%) 100%);
+
+// Spacing
+$spacer: rem(4px);
+$spacer-1: $spacer;       // 4px
+$spacer-2: $spacer * 2;   // 8px
+$spacer-3: $spacer * 3;   // 12px
+$spacer-4: $spacer * 4;   // 16px
+$spacer-5: $spacer * 5;   // 20px
+$spacer-6: $spacer * 6;   // 24px
+$spacer-7: $spacer * 7;   // 28px
+$spacer-8: $spacer * 8;   // 32px
+$spacer-9: $spacer * 10;  // 40px
+$spacer-10: $spacer * 12; // 48px
+$spacer-11: $spacer * 14; // 56px
+
+// Components
+$border-width: rem(1px);
+$border-color: $platinum;
+
+$base-border-radius: rem(4px);
+$md-border-radius: $base-border-radius * 2; // 8px
+$sm-border-radius: $base-border-radius;     // 4px
+$lg-border-radius: $base-border-radius * 3; // 12px
+$xl-border-radius: $base-border-radius * 5; // 16px
+
+$md-box-shadow: 0 0 rem(16px 12px) rgba(darken($primary-color, 5%), 0.025);
+$lg-box-shadow: 0 0 rem(24px 16px) rgba(darken($primary-color, 5%), 0.05);
+
+// Typography
+$body-family: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$base-font-size: rem(16px);
+
+$md-font-size: $base-font-size;             // 16px
+$xs-font-size: $base-font-size * 0.786625;  // 12.586px
+$sm-font-size: $base-font-size * 0.8869375; // 14.191px
+$lg-font-size: $base-font-size * 1.1275;    // 18.04px
+
+$fw-normal: 400;
+$fw-medium: 500;
+$fw-semibold: 600;
+$fw-bold: 700;
+$fw-extrabold: 800;
+
+$h1-font-size: $base-font-size * 2.0544375; // 32.871px
+$h2-font-size: $base-font-size * 1.822125;  // 29.154px
+$h3-font-size: $base-font-size * 1.6160625; // 25.857px
+$h4-font-size: $base-font-size * 1.4333125; // 22.933px
+$h5-font-size: $base-font-size * 1.27125;   // 20.34px
+$h6-font-size: $base-font-size * 1.1275;    // 18.04px
+
+$headings-family: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// Other
+$md-transition: all 0.275s cubic-bezier(0.1, 0, 0.1, 1);

data/app/assets/stylesheets/rails_admin/custom/components/breadcrumbs.scss

@@ -0,0 +1,18 @@
+.breadcrumb {
+  font-size: $sm-font-size;
+  font-weight: $fw-semibold;
+  line-height: 1;
+  margin-bottom: $spacer-2;
+
+  &-item {
+    align-items: baseline;
+    display: flex;
+
+    & + .breadcrumb-item::before {
+      @extend .fa-sm;
+      @extend .fa-solid;
+      color: $primary-color;
+      content: "\f105";
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/buttons.scss

@@ -0,0 +1,55 @@
+.btn {
+  letter-spacing: -0.01em;
+  transition: $md-transition;
+
+  &-square {
+    padding: 0;
+
+    &.btn-sm {
+      height: rem(36px);
+      width: rem(36px);
+    }
+  }
+
+  &-dropdown {
+    transition: none;
+    color: $text-secondary-color;
+
+    &:hover,
+    &.show {
+      background: linear-gradient($white, $white) padding-box, linear-gradient(darken($border-color, 3%), darken($border-color, 5%)) border-box;
+      box-shadow: 0 rem(1px 2px 0px) rgba($dark-color, 0.0875);
+    }
+  }
+
+  &-white {
+    background: linear-gradient($white, $white) padding-box, linear-gradient(darken($border-color, 1%), darken($border-color, 1.75%)) border-box;
+    box-shadow: 0 rem(2px 3px -1px) rgba($dark-color, 0.075);
+
+    @include button-variant(
+      $background: $white,
+      $border: darken($border-color, 3.25%),
+      $color: $dark-color,
+      $hover-background: $white,
+      $hover-border: transparent,
+      $hover-color: $dark-color,
+      $active-background: $white,
+      $active-border:transparent,
+      $active-color: $dark-color,
+      $disabled-background: $white,
+      $disabled-border: lighten($border-color, 3.25%),
+      $disabled-color: $text-secondary-color
+    );
+
+    &:hover {
+      background: linear-gradient($white, $white) padding-box, linear-gradient(darken($border-color, 3%), darken($border-color, 5%)) border-box;
+      box-shadow: 0 rem(1px 2px 0px) rgba($dark-color, 0.0875);
+    }
+
+    .input-group & {
+      background-color: $white;
+      border-color: $border-color;
+      box-shadow: none;
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/dropdowns.scss

@@ -0,0 +1,40 @@
+.dropdown {
+
+  &-menu {
+    border: $border-width solid $border-color;
+    box-shadow: $md-box-shadow;
+  }
+
+  &-item {
+    font-weight: $fw-semibold;
+
+    .fa-solid,
+    .fas {
+      color: $text-secondary-color;
+      margin-right: $spacer-2;
+    }
+  }
+
+  &-admin {
+
+    .btn {
+
+      @include media-breakpoint-up(md) {
+        max-width: rem(200px);
+        overflow: hidden;
+      }
+
+      @include media-breakpoint-up(xl) {
+        max-width: rem(225px);
+      }
+
+      @include media-breakpoint-up(xxl) {
+        max-width: rem(250px);
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/filtering-select.scss

@@ -0,0 +1,43 @@
+.ui {
+
+  &-widget {
+    font-family: $body-family;
+    font-size: $md-font-size;
+
+    &-content {
+      border: $border-width solid $border-color;
+
+      a {
+        color: $dark-color;
+      }
+    }
+  }
+
+  &-menu {
+    box-shadow: none;
+    padding: $spacer-2 0;
+
+    & &-item a {
+      padding: $spacer * 1.75 $spacer-4; // 7px
+
+      &.ui-state-hover,
+      &.ui-state-active {
+        background-color: rgba($dark-color, 0.05);
+        border: unset;
+        color: $dark-color;
+        margin: unset;
+        text-shadow: unset;
+      }
+
+      span {
+        color: $text-secondary-color;
+      }
+    }
+  }
+
+  &-autocomplete {
+    border-radius: $md-border-radius;
+    box-shadow: none;
+  }
+}
+

data/app/assets/stylesheets/rails_admin/custom/components/forms.scss

@@ -0,0 +1,25 @@
+.form {
+
+  &-switch {
+
+    .form-check-input {
+      margin-top: 0;
+      height: rem(25px);
+      width: rem(48px);
+    }
+  }
+}
+
+.input-group {
+
+  &-btn {
+    border-left: 0;
+
+    &.dropdown-toggle::after {
+      @extend .fa-solid;
+      @extend .fa-xs;
+      border: 0;
+      content: "\f078";
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/images.scss

@@ -0,0 +1,21 @@
+.img {
+
+  &-wrapper {
+
+    &-avatar {
+      border-radius: 50%;
+      display: inline-block;
+      font-size: 0;
+      height: rem(42px);
+      line-height: 0;
+      overflow: hidden;
+      width: rem(42px);
+
+      img {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/navbar.scss

@@ -0,0 +1,18 @@
+.navbar {
+
+  &-toggler {
+
+    .navbar-toggler-icon {
+      background-color: $dark-color;
+      background-image: none;
+      border-radius: $sm-border-radius;
+      display: block;
+      height: rem(2px);
+      width: rem(28px);
+
+      & + .navbar-toggler-icon {
+        margin-top: $spacer-2;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/navs.scss

@@ -0,0 +1,28 @@
+.nav {
+
+  &-tabs {
+
+    &-main-show {
+      border: none;
+
+      li.show_member_link {
+        display: none
+      }
+
+      li.edit_member_link .dropdown-item {
+        @extend .btn;
+        @extend .btn-white;
+      }
+
+      li.delete_member_link .dropdown-item {
+        @extend .btn;
+        @extend .btn-danger;
+        margin-left: $spacer-3;
+
+        .fas {
+          color: $white;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/offcanvas.scss

@@ -0,0 +1,18 @@
+.offcanvas {
+  transition: $md-transition;
+
+  &-body {
+    padding: $spacer-4 $spacer-3;
+
+    @include media-breakpoint-up(md) {
+      padding: $spacer-5 $spacer-4;
+    }
+  }
+
+  .sidebar {
+    display: block;
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/progress.scss

@@ -0,0 +1,11 @@
+.progress {
+  font-weight: $fw-bold;
+
+  &-bar {
+    border-radius: $lg-border-radius;
+    padding-left: $spacer-2;
+    padding-right: $spacer-2;
+    text-align: end;
+    min-width: rem(28px);
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/sidebar.scss

@@ -0,0 +1,115 @@
+.sidebar {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background: $primary-gradient;
+  border-radius: $xl-border-radius;
+  bottom: 0;
+  box-shadow: $lg-box-shadow;
+  display: none;
+  left: 0;
+  padding: $spacer-2;
+  position: fixed;
+  top: 0;
+  transition: $md-transition;
+
+  @include media-breakpoint-up(lg) {
+    bottom: $spacer-6;
+    display: block;
+    left: $spacer-4;
+    top: $spacer-6;
+    width: rem(250px);
+  }
+
+  li {
+    margin-bottom: 0 !important;
+
+    & + li .btn-toggle {
+      border: 0;
+      color: rgba($white, 0.675);
+      font-size: $xs-font-size;
+      font-weight: $fw-medium;
+      line-height: 1;
+      margin-bottom: $spacer-2;
+      margin-top: $spacer-2;
+      padding: $spacer-5 $spacer-4 $spacer-1 $spacer-4;
+      pointer-events: none;
+      position: relative;
+      text-align: start;
+      width: 100%;
+
+      &::before {
+        background-color: rgba($white, 0.15);
+        content: "";
+        height: $border-width;
+        left: 0;
+        margin-left: $spacer-4;
+        margin-right: $spacer-4;
+        position: absolute;
+        top: 0;
+        width: calc(100% - #{$spacer-4 * 2});
+      }
+
+      .fas {
+        display: none;
+      }
+    }
+  }
+
+  .nav-link {
+    border-radius: $base-border-radius * 2.5; // 10px
+    border: 0;
+    color: rgba($white, 0.75);
+    font-size: $sm-font-size;
+    font-weight: $fw-bold;
+    overflow: hidden;
+    padding: $spacer-2 $spacer-4;
+    transition: $md-transition;
+
+    &:hover {
+
+      @include media-breakpoint-up(lg) {
+        background-color: rgba($white, 0.05);
+        color: $white;
+        padding-left: $spacer-5;
+      }
+    }
+
+    &.active {
+      background-color: $white;
+      color: $dark-color;
+      font-weight: $fw-extrabold;
+      position: relative;
+
+      &::after {
+        background-color: lighten(adjust-hue($primary-color, -36%), 8%);
+        border-bottom-left-radius: $sm-border-radius;
+        border-top-left-radius: $sm-border-radius;
+        content: "";
+        height: rem(24px);
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-45%);
+        width: rem(3px);
+      }
+
+      &:hover {
+
+        @include media-breakpoint-up(lg) {
+          background-color: $white;
+          color: $dark-color;
+          padding-left: $spacer-4;
+        }
+      }
+
+      .fas {
+        color: $primary-color;
+      }
+    }
+
+    .fas {
+      margin-right: $spacer-2;
+    }
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/table.scss

@@ -0,0 +1,59 @@
+
+body.rails_admin .table {
+  margin-left: -$spacer-3;
+  margin-right: -$spacer-3;
+
+  .header {
+    cursor: pointer;
+    padding-bottom: $spacer-1;
+    padding-left: $spacer-3;
+    padding-right: $spacer-7;
+    position: relative;
+
+    &:after {
+      @extend .fa-solid;
+      @extend .fa-xs;
+      border: unset;
+      content: "\f077";
+      float: unset;
+      margin-top: unset;
+      position: absolute;
+      right: rem(25px);
+      top: 50%;
+    }
+  }
+
+  .headerSortUp::after {
+    @extend .fa-solid;
+    @extend .fa-xs;
+    content: "\f078";
+    position: absolute;
+    right: rem(25px);
+    top: 50%;
+  }
+
+  td {
+    padding: $spacer-1 $spacer-3;
+  }
+
+  th  {
+    padding-bottom: $spacer-1;
+    padding-left: $spacer-3;
+    padding-right: $spacer-3;
+    padding-top: 0;
+  }
+
+  & > :not(:first-child) {
+    border-top: rem(1px) solid $border-color;
+  }
+
+  .last {
+    background-color: $white;
+    z-index: 2;
+  }
+
+  .sticky {
+    background-color: $white;
+    z-index: 1;
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/components/tiles.scss

@@ -0,0 +1,20 @@
+.tile {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-xs {
+    border-radius: $sm-border-radius;
+    font-size: $xs-font-size;
+    height: rem(24px);
+    width: rem(24px);
+  }
+
+  &-primary {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background: $primary-gradient;
+    color: $white;
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/layouts/body.scss

@@ -0,0 +1,10 @@
+body {
+  letter-spacing: -0.01em;
+
+  &.rails_admin {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding-top: 0;
+  }
+}

data/app/assets/stylesheets/rails_admin/custom/layouts/containers.scss

@@ -0,0 +1,31 @@
+.container,
+.container-fluid {
+
+  @include media-breakpoint-up(md) {
+    padding-left: $spacer-6;
+    padding-right: $spacer-6;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-left: $spacer-8;
+    padding-right: $spacer-8;
+  }
+
+  // Sidebar
+  .sidebar + & {
+    padding-bottom: $spacer-4;
+    padding-top: $spacer-4;
+
+    @include media-breakpoint-up(md) {
+      padding-bottom: $spacer-5;
+      padding-top: $spacer-5;
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-left: rem(250px) + $spacer-4;
+      padding-bottom: $spacer-6;
+      padding-top: $spacer-6;
+      width: calc(100% - 266px);
+    }
+  }
+}