swop 0.1.0 → 1.0.0

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-components/swop-tables.scss

@@ -0,0 +1,82 @@
+.table {
+
+  th {
+    background-color: $body-bg !important;
+    padding-bottom: rem(10px) !important;
+    padding-left: $table-cell-padding-x !important;
+    padding-right: $table-cell-padding-x !important;
+    padding-top: 0 !important;
+  }
+
+  th:first-child {
+    padding-left: 0 !important;
+  }
+
+  th.shrink {
+    padding-bottom: rem(8px) !important;
+  }
+
+  th.header {
+    font-weight: $fw-bold !important;
+    color: $body-dark-color !important;
+  }
+
+  th.sticky input[type="checkbox"],
+  td.sticky input[type="checkbox"] {
+    @extend .form-check-input;
+  }
+
+  &-group-divider {
+    border-top: $border-width solid $border-color !important;
+  }
+
+  :not(thead) tr:last-child {
+
+    thead, tbody, tfoot, tr, td, th {
+      border-width: 0 !important;
+    }
+  }
+
+  thead tr th {
+    padding-top: $spacer-1 !important;
+    margin-top: -$spacer-1 !important;
+  }
+
+  td {
+    background-color: $body-bg !important;
+    padding: $table-cell-padding-y $table-cell-padding-x !important;
+  }
+
+  td:first-child {
+    padding-left: 0 !important;
+  }
+
+  tr:first-child th.sticky,
+  td:first-child.sticky {
+    padding-left: $spacer-1 !important;
+  }
+
+  tbody tr:hover .links .nav .nav-item .nav-link {
+    color: $body-color;
+  }
+
+  tbody tr .links .nav .nav-item {
+    padding: 0 $spacer-1 !important;
+
+    .nav-link {
+      color: $body-secondary-color;
+
+      &:hover {
+        color: $body-dark-color;
+      }
+    }
+  }
+}
+
+#sidescroll {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-components/swop-tiles.scss

@@ -0,0 +1,20 @@
+.tile {
+
+  &-avatar {
+    align-items: center;
+    background-color: $avatar-bg-color;
+    border-radius: 50%;
+    color: $avatar-color;
+    display: flex;
+    font-size: rem(26px);
+    height: rem(32px);
+    justify-content: center;
+    overflow: hidden;
+    width: rem(32px);
+
+    &-icon {
+      position: relative;
+      top: rem(5px);
+    }
+  }
+}

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables.scss

@@ -0,0 +1,149 @@
+// paragraphs
+$paragraph-margin-bottom: $spacer-5;
+
+// typography
+$font-weight-base: $fw-medium;
+
+$headings-margin-bottom: $spacer-4;
+$headings-font-weight: $fw-bold;
+
+$lead-font-size: $lg-font-size;
+$lead-font-weight: $fw-medium;
+
+// buttons + forms
+$input-btn-padding-y: $md-inputs-btn-padding-y;
+$input-btn-padding-x: $md-inputs-btn-padding-x;
+
+$input-btn-padding-y-sm: $sm-inputs-btn-padding-y;
+$input-btn-padding-x-sm: $sm-inputs-btn-padding-x;
+
+$input-btn-padding-y-lg: $lg-inputs-btn-padding-y;
+$input-btn-padding-x-lg: $lg-inputs-btn-padding-x;
+
+// buttons
+$btn-font-weight: $fw-semibold;
+
+// forms
+$form-text-margin-top: $spacer-1;
+$form-text-font-size: $sm-font-size;
+$form-text-font-weight: $fw-medium;
+$form-text-color: $body-secondary-color;
+
+$form-label-margin-bottom: $spacer-1;
+$form-label-font-size: $md-font-size;
+$form-label-font-weight: $fw-semibold;
+$form-label-color: $body-dark-color;
+
+$input-disabled-color: $body-secondary-color;
+$input-disabled-bg: $light-color;
+$input-disabled-border-color: $inputs-border-color;
+
+$form-check-input-width: rem(20px);
+$form-check-padding-start: $form-check-input-width + $spacer-2;
+$form-check-margin-bottom: 0;
+$form-check-label-color: $form-label-color;
+
+$form-check-input-border: $border-width solid darken($inputs-border-color, 1.25%);
+$form-check-input-border-radius: $sm-border-radius;
+
+$form-check-inline-margin-end: rem(16px);
+
+$input-group-addon-color: $body-secondary-color;
+$input-group-addon-bg: $body-bg;
+
+// navs
+$nav-link-padding-y: $spacer-3;
+$nav-link-padding-x: 0;
+$nav-link-font-size: $md-font-size;
+$nav-link-font-weight: $fw-medium;
+$nav-link-color: $body-color;
+$nav-link-hover-color: $body-dark-color;
+
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: rem(2px);
+$nav-tabs-link-hover-border-color: $light-color;
+$nav-tabs-link-active-color: $primary-color;
+$nav-tabs-link-active-bg: transparent;
+$nav-tabs-link-active-border-color: $primary-color;
+
+// dropdowns
+$dropdown-min-width: rem(160px);
+$dropdown-padding-y: $spacer-1;
+$dropdown-spacer: $spacer-1;
+$dropdown-color: $body-color;
+$dropdown-bg: $body-bg;
+$dropdown-border-color: $borders-color;
+$dropdown-border-radius: $md-border-radius;
+$dropdown-divider-margin-y: $spacer-1;
+
+$dropdown-link-hover-color: $body-dark-color;
+$dropdown-link-hover-bg: $light-color;
+
+$dropdown-link-active-color: $body-dark-color;
+$dropdown-link-active-bg: $body-bg;
+
+$dropdown-link-disabled-color: $body-secondary-color;
+
+$dropdown-item-padding-y: $spacer * 1.5; // 6px
+$dropdown-item-padding-x: $spacer * 4; // 16px
+
+$dropdown-header-color: $body-secondary-color;
+
+// pagination
+$pagination-padding-y: $spacer-1;
+$pagination-padding-x: $spacer-1;
+
+$pagination-font-size: $sm-font-size;
+
+$pagination-color: $body-color;
+$pagination-bg: $body-bg;
+$pagination-border-radius: $md-inputs-btn-border-radius;
+$pagination-border-width: 0;
+
+$pagination-focus-color: $body-dark-color;
+$pagination-focus-bg: $light-color;
+
+$pagination-hover-color: $body-dark-color;
+$pagination-hover-bg: $light-color;
+
+$pagination-active-color: $white;
+$pagination-active-bg: $primary-color;
+
+$pagination-disabled-color: $body-secondary-color;
+$pagination-disabled-bg: transparent;
+
+$pagination-transition: color .0s ease-in-out, background-color .0s ease-in-out, box-shadow .0s ease-in-out;
+
+// alerts
+$alert-padding-y: $spacer-3;
+$alert-padding-x: $spacer-4;
+$alert-margin-bottom: $spacer-4;
+$alert-border-radius: $md-border-radius;
+$alert-link-font-weight: $fw-semibold;
+$alert-border-width: 0;
+$alert-dismissible-padding-r: $alert-padding-x * 3;
+
+// progress bars
+$progress-height: rem(14px);
+$progress-font-size: $sm-font-size;
+$progress-bg: $light-color;
+$progress-border-radius: $lg-border-radius;
+
+// offcanvas
+$offcanvas-padding-y: $spacer-4;
+$offcanvas-padding-x: $spacer-4;
+$offcanvas-horizontal-width: rem(256px);
+$offcanvas-border-width: 0;
+$offcanvas-bg-color: $body-bg;
+$offcanvas-backdrop-bg: $overlay-bg;
+$offcanvas-backdrop-opacity: 0.5;
+
+// cards
+$card-spacer-y: 0;
+$card-spacer-x: 0;
+$card-title-spacer-y: 0;
+$card-border-width: 0;
+$card-border-radius: $lg-border-radius;
+$card-cap-padding-y: 0;
+$card-cap-padding-x: 0;
+$card-bg: transparent;

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-core/swop-variables.scss

@@ -0,0 +1,41 @@
+// components
+$sm-border-radius: $base-border-radius * 1; // 4px
+$md-border-radius: $base-border-radius * 2; // 8px
+$lg-border-radius: $base-border-radius * 3; // 12px
+$xl-border-radius: $base-border-radius * 4; // 16px
+
+$sm-box-shadow: 0 0 rem(24px) 0 rgba($box-shadow-color, 0.075);
+$md-box-shadow: 0 0 rem(48px) 0 rgba($box-shadow-color, 0.075);
+$lg-box-shadow: 0 0 rem(96px) 0 rgba($box-shadow-color, 0.075);
+
+// typography
+$figtree: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; // private
+$font-family: $figtree;
+
+$h1-font-size: $base-font-size * 2;     // 32px
+$h2-font-size: $base-font-size * 1.75;  // 28px
+$h3-font-size: $base-font-size * 1.4;   // 24px
+$h4-font-size: $base-font-size * 1.25;  // 20px
+$h5-font-size: $base-font-size * 1.125; // 18px
+$h6-font-size: $base-font-size * 1;     // 16px
+
+$lg-font-size: $base-font-size * 1;     // 16px
+$md-font-size: $base-font-size * 0.875; // 14px
+$sm-font-size: $base-font-size * 0.75;  // 12px
+
+// buttons + forms
+$lg-inputs-btn-padding-y: $spacer * 3;    // 12px
+$lg-inputs-btn-padding-x: $spacer * 4;    // 16px
+$md-inputs-btn-padding-y: $spacer * 2.75; // 11px
+$md-inputs-btn-padding-x: $spacer * 4;    // 16px
+$sm-inputs-btn-padding-y: $spacer * 2.5;  // 10px
+$sm-inputs-btn-padding-x: $spacer * 3.5;  // 14px
+
+$lg-inputs-btn-border-radius: $base-border-radius * 2.5;  // 10px
+$md-inputs-btn-border-radius: $base-border-radius * 2.25; // 9px
+$sm-inputs-btn-border-radius: $base-border-radius * 2;    // 8px
+
+// buttons
+$lg-btn-padding-x: $spacer * 6;   // 24px
+$md-btn-padding-x: $spacer * 5.5; // 22px
+$sm-btn-padding-x: $spacer * 5;   // 20px

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-layouts/swop-containers.scss

@@ -0,0 +1,24 @@
+.container {
+
+  &-fluid {
+
+    @include media-breakpoint-up(md) {
+      padding-left: $spacer-6;
+      padding-right: $spacer-6;
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-left: $spacer-7;
+      padding-right: $spacer-7;
+    }
+
+    @include media-breakpoint-up(xl) {
+      display: flex;
+      flex-direction: column;
+      flex-direction: row;
+      gap: $spacer-9;
+      padding-left: $spacer-4;
+      padding-right: $spacer-9;
+    }
+  }
+}

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-layouts/swop-header.scss

@@ -0,0 +1,15 @@
+header {
+  align-items: start;
+  display: flex;
+  gap: $spacer-4;
+  justify-content: space-between;
+  margin-bottom: $spacer-4 !important;
+
+  h1 {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    margin-bottom: 0 !important;
+    overflow: hidden;
+  }
+}

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-amethyst.scss

@@ -0,0 +1,35 @@
+// swop
+@import "swop/swop";
+
+// theme colors
+@import "swop/swop-themes/swop-simple/swop-colors/swop-amethyst";
+
+// core
+@import "swop/swop-core/swop-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-variables";
+
+// core
+@import "swop/swop-core/swop-bootstrap-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables";
+
+// fontawesome
+@import "rails_admin/font-awesome";
+
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// base
+@import "swop/swop-base/swop-typography";
+
+// theme base
+@import "swop/swop-themes/swop-simple/swop-simple-base";
+
+// theme layouts
+@import "swop/swop-themes/swop-simple/swop-simple-layouts";
+
+// theme components
+@import "swop/swop-themes/swop-simple/swop-simple-components";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-base.scss

@@ -0,0 +1,3 @@
+@import "swop/swop-themes/swop-simple/swop-base/swop-base";
+@import "swop/swop-themes/swop-simple/swop-base/swop-main";
+@import "swop/swop-themes/swop-simple/swop-base/swop-typography";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-components.scss

@@ -0,0 +1,17 @@
+@import "swop/swop-themes/swop-simple/swop-components/swop-alerts";
+@import "swop/swop-themes/swop-simple/swop-components/swop-badges";
+@import "swop/swop-themes/swop-simple/swop-components/swop-buttons";
+@import "swop/swop-themes/swop-simple/swop-components/swop-dropdowns";
+@import "swop/swop-themes/swop-simple/swop-components/swop-filters";
+@import "swop/swop-themes/swop-simple/swop-components/swop-forms";
+@import "swop/swop-themes/swop-simple/swop-components/swop-images";
+@import "swop/swop-themes/swop-simple/swop-components/swop-input-groups";
+@import "swop/swop-themes/swop-simple/swop-components/swop-loading";
+@import "swop/swop-themes/swop-simple/swop-components/swop-navbar";
+@import "swop/swop-themes/swop-simple/swop-components/swop-navs";
+@import "swop/swop-themes/swop-simple/swop-components/swop-offcanvas";
+@import "swop/swop-themes/swop-simple/swop-components/swop-pagination";
+@import "swop/swop-themes/swop-simple/swop-components/swop-progress";
+@import "swop/swop-themes/swop-simple/swop-components/swop-sidebars";
+@import "swop/swop-themes/swop-simple/swop-components/swop-tables";
+@import "swop/swop-themes/swop-simple/swop-components/swop-tiles";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-dark.scss

@@ -0,0 +1,35 @@
+// swop
+@import "swop/swop";
+
+// theme colors
+@import "swop/swop-themes/swop-simple/swop-colors/swop-dark";
+
+// core
+@import "swop/swop-core/swop-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-variables";
+
+// core
+@import "swop/swop-core/swop-bootstrap-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables";
+
+// fontawesome
+@import "rails_admin/font-awesome";
+
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// base
+@import "swop/swop-base/swop-typography";
+
+// theme base
+@import "swop/swop-themes/swop-simple/swop-simple-base";
+
+// theme layouts
+@import "swop/swop-themes/swop-simple/swop-simple-layouts";
+
+// theme components
+@import "swop/swop-themes/swop-simple/swop-simple-components";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-forest.scss

@@ -0,0 +1,35 @@
+// swop
+@import "swop/swop";
+
+// theme colors
+@import "swop/swop-themes/swop-simple/swop-colors/swop-forest";
+
+// core
+@import "swop/swop-core/swop-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-variables";
+
+// core
+@import "swop/swop-core/swop-bootstrap-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables";
+
+// fontawesome
+@import "rails_admin/font-awesome";
+
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// base
+@import "swop/swop-base/swop-typography";
+
+// theme base
+@import "swop/swop-themes/swop-simple/swop-simple-base";
+
+// theme layouts
+@import "swop/swop-themes/swop-simple/swop-simple-layouts";
+
+// theme components
+@import "swop/swop-themes/swop-simple/swop-simple-components";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-layouts.scss

@@ -0,0 +1,2 @@
+@import "swop/swop-themes/swop-simple/swop-layouts/swop-containers";
+@import "swop/swop-themes/swop-simple/swop-layouts/swop-header";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-light.scss

@@ -0,0 +1,35 @@
+// swop
+@import "swop/swop";
+
+// theme colors
+@import "swop/swop-themes/swop-simple/swop-colors/swop-light";
+
+// core
+@import "swop/swop-core/swop-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-variables";
+
+// core
+@import "swop/swop-core/swop-bootstrap-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables";
+
+// fontawesome
+@import "rails_admin/font-awesome";
+
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// base
+@import "swop/swop-base/swop-typography";
+
+// theme base
+@import "swop/swop-themes/swop-simple/swop-simple-base";
+
+// theme layouts
+@import "swop/swop-themes/swop-simple/swop-simple-layouts";
+
+// theme components
+@import "swop/swop-themes/swop-simple/swop-simple-components";

data/app/assets/stylesheets/swop/swop-themes/swop-simple/swop-simple-royal.scss

@@ -0,0 +1,35 @@
+// swop
+@import "swop/swop";
+
+// theme colors
+@import "swop/swop-themes/swop-simple/swop-colors/swop-royal";
+
+// core
+@import "swop/swop-core/swop-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-variables";
+
+// core
+@import "swop/swop-core/swop-bootstrap-variables";
+
+// theme core
+@import "swop/swop-themes/swop-simple/swop-core/swop-bootstrap-variables";
+
+// fontawesome
+@import "rails_admin/font-awesome";
+
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
+
+// base
+@import "swop/swop-base/swop-typography";
+
+// theme base
+@import "swop/swop-themes/swop-simple/swop-simple-base";
+
+// theme layouts
+@import "swop/swop-themes/swop-simple/swop-simple-layouts";
+
+// theme components
+@import "swop/swop-themes/swop-simple/swop-simple-components";

data/app/assets/stylesheets/swop/swop.scss

@@ -0,0 +1,8 @@
+// mixins
+@import "swop/swop-core/swop-mixins";
+
+// base
+@import "swop/swop-base/swop-base";
+
+// colors
+@import "swop/swop-colors/swop-colors";

data/app/views/kaminari/ra-twitter-bootstrap/_next_page.html.erb

@@ -0,0 +1,7 @@
+<% current_page = current_page %>
+
+<% if Swop.configuration.style == :simple %>
+  <%= render partial: "kaminari/ra-twitter-bootstrap/swop-simple/next_page", locals: { current_page: current_page, url: url } %>
+<% else %>
+  <%= render partial: "kaminari/ra-twitter-bootstrap/default/next_page", locals: { current_page: current_page, url: url } %>
+<% end %>

data/app/views/kaminari/ra-twitter-bootstrap/_prev_page.html.erb

@@ -0,0 +1,5 @@
+<% if Swop.configuration.style == :simple %>
+  <%= render partial: "kaminari/ra-twitter-bootstrap/swop-simple/prev_page", locals: { current_page: current_page, url: url } %>
+<% else %>
+  <%= render partial: "kaminari/ra-twitter-bootstrap/default/prev_page", locals: { current_page: current_page, url: url } %>
+<% end %>

data/app/views/kaminari/ra-twitter-bootstrap/default/_next_page.html.erb

@@ -0,0 +1,9 @@
+<% if current_page.last? %>
+  <li class="page-item next disabled">
+    <%= link_to raw(t 'admin.pagination.next'), '#', class: 'page-link' %>
+  </li>
+<% else %>
+  <li class="page-item next">
+    <%= link_to raw(t 'admin.pagination.next'), url, class: 'page-link' %>
+  </li>
+<% end %>

data/app/views/kaminari/ra-twitter-bootstrap/default/_prev_page.html.erb

@@ -0,0 +1,9 @@
+<% if current_page.first? %>
+  <li class="page-item prev disabled">
+    <%= link_to raw(t 'admin.pagination.previous'), '#', class: 'page-link' %>
+  </li>
+<% else %>
+  <li class="page-item prev">
+    <%= link_to raw(t 'admin.pagination.previous'), url, class: 'page-link' %>
+  </li>
+<% end %>

data/app/views/kaminari/ra-twitter-bootstrap/swop-simple/_next_page.html.erb

@@ -0,0 +1,9 @@
+<% if current_page.last? %>
+  <li class="page-item next disabled">
+    <%= link_to "Next", '#', class: 'page-link' %>
+  </li>
+<% else %>
+  <li class="page-item next">
+    <%= link_to "Next", url, class: 'page-link' %>
+  </li>
+<% end %>

data/app/views/kaminari/ra-twitter-bootstrap/swop-simple/_prev_page.html.erb

@@ -0,0 +1,9 @@
+<% if current_page.first? %>
+  <li class="page-item prev disabled">
+    <%= link_to "Prev", '#', class: 'page-link' %>
+  </li>
+<% else %>
+  <li class="page-item prev">
+    <%= link_to "Prev", url, class: 'page-link' %>
+  </li>
+<% end %>

data/app/views/layouts/rails_admin/_head.html.erb

@@ -0,0 +1,5 @@
+<% if Swop.configuration.style == :simple %>
+  <%= render partial: "layouts/rails_admin/swop-simple/head" %>
+<% else %>
+  <%= render partial: "layouts/rails_admin/default/head" %>
+<% end %>

data/app/views/layouts/rails_admin/_sidebar_navigation.html.erb

@@ -1 +1,5 @@
-<%= render partial: "layouts/rails_admin/custom/nav" %>
+<% if Swop.configuration.style == :simple %>
+  <%= render partial: "layouts/rails_admin/swop-simple/sidebar_navigation" %>
+<% else %>
+  <%= render partial: "layouts/rails_admin/default/sidebar_navigation" %>
+<% end %>

data/app/views/layouts/rails_admin/application.html.erb

@@ -1,24 +1,5 @@
-<!DOCTYPE html>
-<html lang="<%= I18n.locale %>">
-  <head>
-    <%= render "layouts/rails_admin/head" %>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
-    <title>
-      <%= "#{@abstract_model.try(:pretty_name) || @page_name} | #{[_get_plugin_name[0] || 'Rails', _get_plugin_name[1] || 'Admin'].join(' ')}" %>
-    </title>
-  </head>
-  <body class="rails_admin">
-    <div data-i18n-options="<%= I18n.t("admin.js").to_json %>" id="admin-js"></div>
-    <!-- To-DO: Review this -->
-    <div class="badge bg-warning" id="loading" style="display:none; position:fixed; right:20px; bottom:20px; z-index:100000">
-      <%= t('admin.loading') %>
-    </div>
-    <%= render "layouts/rails_admin/sidebar_navigation" %>
-    <div class="container-fluid position-relative">
-      <%= render template: 'layouts/rails_admin/content' %>
-    </div>
-  </body>
-</html>
+<% if Swop.configuration.style == :simple %>
+  <%= render partial: "layouts/rails_admin/swop-simple/application" %>
+<% else %>
+  <%= render partial: "layouts/rails_admin/default/application" %>
+<% end %>