swop 0.1.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7f20e36d72c19d59070aba940459cb56cfddcd16af746989beec6708046c078
-  data.tar.gz: 1bb9176840752dbfce4b6a496ee7df30ab988b6c86231248f5c122db64793fb7
+  metadata.gz: f1c41d193eebf6cb2e455f6ec6cfb059ead151f202dfcbaf512a7d102de4f615
+  data.tar.gz: 8c1b473d4e0dc2cb7298fee8d6671c1bbdda7915e51921c67baee11933a77503
 SHA512:
-  metadata.gz: 5dd3d16f8d641e05332f0b3165c053fd9b1cbca0f56cb441cc69cb3f2d334c999c96917d1f0e691f4e98ee489d57677189c67d746adf492065947c3a548a6b19
-  data.tar.gz: d280467a06ec12655983eeb7171849a9daceee2dcee989c5573ef4af1a29713f792e28917051cb540b0454da86be9f07e075caf1424ca44073d669d6c62e6e41
+  metadata.gz: 256a64805a43a571260bdd17d58811e786da10bf3dc5d6b8e9125408441e6779d55b23d659c278fb960c87204ff8990218e7d06c601b51d13e084fef1e0177d5
+  data.tar.gz: '0676317308009378d1071a6665edd7c399e2fdc84a0ccc54a43bc02684d4ae309e5c874a16a5b7466b86c964cc7d774a2b3a742c181759bd1a5bfd0fd74fca85'

data/README.md

@@ -1,15 +1,53 @@
 # Swop
 
-Theme's for the rails_admin gem
+**Swop** is a Rails Admin theme gem that lets you instantly apply polished, modern themes to your Rails Admin dashboards. With Swop, you don’t need to write any CSS—just install the gem and your admin interface gets a clean, professional look. Swop **saves development time** and helps make your admin dashboards **more effective**, so you can focus on managing your data instead of styling your interface.
 
-## Features
-• Seamlessly responsive on any device.
-• Built with UX research and design.
-• Dedicated support whenever you need it.
-• Effortless installation for your app.
 
 ## Installation
 
-1. Add this line to your Gemfile: 'swop'
-2. Run bundle install in terminal
-3. Start your app and head to /admin (if you chose the default /admin namespace for rails admin) to see your new rails admin theme!
+Install the gem and add to the application's Gemfile by executing:
+
+```bash
+bundle add swop
+```
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+```bash
+gem install swop
+```
+
+## Configuration
+
+After installing, create an initializer file at config/initializers/swop.rb to configure the theme:
+
+```ruby
+Swop.configure do |config|
+  config.style = :simple
+  config.color = :light
+end
+```
+
+This file lets you choose the ```style``` and ```color``` of your Rails Admin dashboard. Currently, there is one ```style``` available (Simple) and multiple ```color``` options (Amethyst, Dark, Forest, Light and Royal). More styles and colors will be added in future releases.
+
+
+## Usage
+
+Swop is completely **plug-and-play**. Once installed and after you have created ```swop.rb``` in your initializers folder, the theme is automatically applied to your Rails Admin dashboards—**no additional setup or configuration is needed**.
+
+Future versions of Swop will include options to **customize the theme**, but for now, you can enjoy a polished, modern admin interface instantly.
+
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/Harissoooon/swop. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/Harissoooon/swop/blob/master/CODE_OF_CONDUCT.md).
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+
+## Code of Conduct
+
+Everyone interacting in the Swop project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/Harissoooon/swop/blob/master/CODE_OF_CONDUCT.md).

data/app/assets/stylesheets/rails_admin/application.scss.erb

@@ -1,37 +1,28 @@
 @charset "UTF-8";
 
-// RailsAdmin - Variables
+// variables
+@import "rails_admin/custom/variables";
 @import "rails_admin/styles/base/variables";
 
-// RailsAdmin - Mixins
+// mixins
 @import "rails_admin/styles/base/mixins";
+@import "rails_admin/custom/mixins";
 
-// Font Awesome
-@import "font-awesome";
+// bootstrap
+@import "rails_admin/bootstrap/bootstrap";
 
-// Themes - Core
-@import "themes/base/mixins";
-
-// Themes - Variables
-@import "themes/base/variables";
-
-// Themes - Base
-@import "themes/base/base";
-
-// Themes
-@import "themes/simple";
-
-// Libraries
+// libraries
 @import "rails_admin/flatpickr";
 @import "rails_admin/styles/filtering-select";
 @import "rails_admin/styles/filtering-multiselect";
 @import "rails_admin/styles/widgets";
 
-// Font awesome
+// fontawesome
 @import "rails_admin/font-awesome";
 
-// RailsAdmin Theming
-@import "rails_admin/themes/base/theming";
+// railsadmin theming
+@import "rails_admin/styles/base/theming";
+@import "rails_admin/custom/theming";
 
 <% if defined?(ActionText::Engine) && Rails.gem_version >= Gem::Version.new('7.0') %>
   @import "trix";

data/app/assets/stylesheets/{rails_admin/themes/base/base.scss → swop/swop-base/swop-base.scss}

@@ -1,9 +1,5 @@
-// Font anti-aliasing fix for Mac users
+// font anti-aliasing fix for Mac users
 * {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 }
-
-.z-1 {
-  z-index: 1 !important;
-}

data/app/assets/stylesheets/swop/swop-base/swop-typography.scss

@@ -0,0 +1,11 @@
+.text-hover-underline {
+  text-decoration: none !important;
+
+  &:hover {
+    text-decoration: underline !important;
+  }
+}
+
+.fw-semibold {
+  font-weight: $fw-semibold !important;
+}

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

@@ -0,0 +1,2 @@
+$white: #ffffff;
+$black: #000000;

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

@@ -0,0 +1,172 @@
+$white: $white;
+$black: $black;
+
+$primary: $primary-color;
+$secondary: $secondary-color;
+$success: $success-color;
+$info: $info-color;
+$warning: $warning-color;
+$danger: $danger-color;
+$light: $light-color;
+$dark: $dark-color;
+
+// options
+$enable-negative-margins: true;
+
+// spacing
+$spacers: (
+  0: 0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+  13: $spacer-13,
+  14: $spacer-14,
+  15: $spacer-15
+);
+
+// body
+$body-color: $body-color;
+$body-bg: $body-bg;
+
+$body-secondary-color: $body-secondary-color;
+
+// links
+$link-color: $body-color;
+$link-decoration: none;
+$link-hover-color: $body-dark-color;
+
+// grid breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1280px,
+  xxl: 1440px
+);
+
+// grid containers
+$container-max-widths: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1184px,
+  xxl: 1344px
+);
+
+// grid columns
+$grid-gutter-width: $spacer-7;
+
+// components
+$border-width: $borders-width;
+$border-color: $borders-color;
+
+$border-radius: $md-border-radius;
+$border-radius-sm: $sm-border-radius;
+$border-radius-lg: $lg-border-radius;
+$border-radius-xl: $xl-border-radius;
+
+$box-shadow: $md-box-shadow;
+$box-shadow-sm: $sm-box-shadow;
+$box-shadow-lg: $lg-box-shadow;
+
+// typography
+$font-family-sans-serif: $font-family;
+
+$font-size-base: $md-font-size;
+$font-size-sm: $sm-font-size;
+$font-size-lg: $lg-font-size;
+
+$font-weight-normal: $fw-normal;
+$font-weight-medium: $fw-medium;
+$font-weight-semibold: $fw-semibold;
+$font-weight-bold: $fw-bold;
+
+$line-height-base: $md-line-height;
+$line-height-sm: $sm-line-height;
+$line-height-lg: $lg-line-height;
+
+$h1-font-size: $h1-font-size;
+$h2-font-size: $h2-font-size;
+$h3-font-size: $h3-font-size;
+$h4-font-size: $h4-font-size;
+$h5-font-size: $h5-font-size;
+$h6-font-size: $h6-font-size;
+
+$headings-line-height: $sm-line-height;
+$headings-color: $body-dark-color;
+
+$small-font-size: $sm-font-size;
+
+$text-muted: $body-secondary-color;
+
+$hr-margin-y: 0;
+$hr-color: $borders-color;
+
+$hr-bg-color: $borders-color;
+
+$hr-border-color: $borders-color;
+$hr-border-width: $borders-width;
+$hr-opacity: 1;
+
+// tables
+$table-cell-padding-y: $spacer-2;
+$table-cell-padding-x: $spacer-3;
+$table-cell-padding-y-sm: $spacer-1;
+$table-cell-padding-x-sm: $spacer-2;
+
+$table-cell-vertical-align: center;
+
+$table-color: $body-color;
+
+$table-striped-bg: $body-bg;
+
+$table-hover-bg: $light-color;
+
+// 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-padding-x: $md-btn-padding-x;
+
+$btn-padding-x-sm: $sm-btn-padding-x;
+
+$btn-padding-x-lg: $lg-btn-padding-x;
+
+$btn-border-radius: $md-inputs-btn-border-radius;
+$btn-border-radius-sm: $sm-inputs-btn-border-radius;
+$btn-border-radius-lg: $lg-inputs-btn-border-radius;
+
+// forms
+$input-padding-y: $md-inputs-btn-padding-y;
+$input-padding-x: $md-inputs-btn-padding-x;
+
+$input-padding-y-sm: $sm-inputs-btn-padding-y;
+$input-padding-x-sm: $sm-inputs-btn-padding-x;
+
+$input-padding-y-lg: $lg-inputs-btn-padding-y;
+$input-padding-x-lg: $lg-inputs-btn-padding-x;
+
+$input-border-color: $inputs-border-color;
+
+$input-border-radius: $md-inputs-btn-border-radius;
+$input-border-radius-sm: $sm-inputs-btn-border-radius;
+$input-border-radius-lg: $lg-inputs-btn-border-radius;
+
+$input-placeholder-color: $body-secondary-color;

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

@@ -0,0 +1,34 @@
+// 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 * 8;	  // 32px
+$spacer-8: $spacer * 10;	// 40px
+$spacer-9: $spacer * 12;  // 48px
+$spacer-10: $spacer * 16; // 64px
+$spacer-11: $spacer * 20; // 80px
+$spacer-12: $spacer * 24; // 96px
+$spacer-13: $spacer * 28; // 112px
+$spacer-14: $spacer * 32; // 128px
+$spacer-15: $spacer * 36; // 144px
+
+// components
+$borders-width: rem(1px);
+
+$base-border-radius: rem(4px);
+
+// typography
+$fw-normal: 400;
+$fw-medium: 500;
+$fw-semibold: 600;
+$fw-bold: 700;
+
+$base-font-size: rem(16px);
+
+$lg-line-height: 2;
+$md-line-height: 1.625;
+$sm-line-height: 1.25;

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

@@ -0,0 +1,3 @@
+* {
+  transition: none !important;
+}

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

@@ -0,0 +1,25 @@
+.main {
+  margin-left: -$spacer-1;
+  margin-right: -$spacer-1;
+  padding-bottom: $spacer-7;
+  padding-left: $spacer-1;
+  padding-right: $spacer-1;
+  padding-top: $spacer-6;
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-x: scroll;
+    padding-bottom: $spacer-8;
+    padding-top: $spacer-7;
+    scrollbar-width: none;
+  }
+
+  &::-webkit-scrollbar {
+
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+ul:not(.nav-tabs):not(.sidebar):not(.dropdown-menu) {
+  margin-bottom: $spacer-4;
+  padding-left: $spacer-4;
+}

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

@@ -0,0 +1,29 @@
+$primary-color: #bc51e6;
+$secondary-color: #695f74;
+$success-color: #0ea247;
+$info-color: #2f99ce;
+$warning-color: #d6961d;
+$danger-color: #c9403d;
+$light-color: #1b0925;
+$dark-color: #fefbff;
+
+$box-shadow-color: $black;
+
+$body-bg: #12031c;
+
+$body-color: #b4bccc;
+$body-secondary-color: $secondary-color;
+$body-dark-color: $dark-color;
+
+$borders-color: #1c0e2c;
+
+$inputs-border-color: #391143;
+
+// miscellaneous
+$avatar-bg-color: desaturate(lighten($light-color, 10%), 8%);
+$avatar-color: desaturate(lighten($light-color, 44%), 8%);
+
+$btn-body-hover-border: lighten($inputs-border-color, 3%);
+$btn-body-active-border: lighten($inputs-border-color, 1.5%);
+
+$overlay-bg: rgba($black, 0.75);

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

@@ -0,0 +1,29 @@
+$primary-color: #0879e9;
+$secondary-color: #586068;
+$success-color: #0ea247;
+$info-color: #2f99ce;
+$warning-color: #d6961d;
+$danger-color: #c9403d;
+$light-color: #0f1117;
+$dark-color: $white;
+
+$box-shadow-color: $black;
+
+$body-bg: #080a0e;
+
+$body-color: #b8c0c8;
+$body-secondary-color: $secondary-color;
+$body-dark-color: $white;
+
+$borders-color: #13151b;
+
+$inputs-border-color: #1f2329;
+
+// miscellaneous
+$avatar-bg-color: desaturate(lighten($light-color, 8%), 16%);
+$avatar-color: desaturate(lighten($light-color, 40%), 16%);
+
+$btn-body-hover-border: lighten($inputs-border-color, 3%);
+$btn-body-active-border: lighten($inputs-border-color, 1.5%);
+
+$overlay-bg: rgba($black, 0.9);

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

@@ -0,0 +1,29 @@
+$primary-color: #0ea247;
+$secondary-color: #5f746d;
+$success-color: #0ea247;
+$info-color: #2f99ce;
+$warning-color: #d6961d;
+$danger-color: #c9403d;
+$light-color: #021512;
+$dark-color: #fbfffd;
+
+$box-shadow-color: $black;
+
+$body-bg: #000e0c;
+
+$body-color: #b9c6c2;
+$body-secondary-color: $secondary-color;
+$body-dark-color: $dark-color;
+
+$borders-color: #041913;
+
+$inputs-border-color: #0a2f28;
+
+// miscellaneous
+$avatar-bg-color: desaturate(lighten($light-color, 8%), 8%);
+$avatar-color: desaturate(lighten($light-color, 40%), 8%);
+
+$btn-body-hover-border: lighten($inputs-border-color, 3%);
+$btn-body-active-border: lighten($inputs-border-color, 1.5%);
+
+$overlay-bg: rgba($black, 0.75);

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

@@ -0,0 +1,29 @@
+$primary-color: #0a84ff;
+$secondary-color: #909098;
+$success-color: #13d95f;
+$info-color: #38bdff;
+$warning-color: #ffb020;
+$danger-color: #f04c49;
+$light-color: #f8f8fa;
+$dark-color: #202024;
+
+$box-shadow-color: $dark-color;
+
+$body-bg: $white;
+
+$body-color: #505058;
+$body-secondary-color: $secondary-color;
+$body-dark-color: $dark-color;
+
+$borders-color: #f2f2f6;
+
+$inputs-border-color: #e6e6eC;
+
+// miscellaneous
+$avatar-bg-color: desaturate(darken($light-color, 4%), 12%);
+$avatar-color: desaturate(darken($light-color, 32%), 12%);
+
+$btn-body-hover-border: darken($inputs-border-color, 3%);
+$btn-body-active-border: darken($inputs-border-color, 1.5%);
+
+$overlay-bg: rgba($dark-color, 0.75);

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

@@ -0,0 +1,29 @@
+$primary-color: #1f58d2;
+$secondary-color: #545c6c;
+$success-color: #0ea247;
+$info-color: #2f99ce;
+$warning-color: #d6961d;
+$danger-color: #c9403d;
+$light-color: #0e1222;
+$dark-color: #fbfbff;
+
+$box-shadow-color: $black;
+
+$body-bg: #070b1b;
+
+$body-color: #b4bccc;
+$body-secondary-color: $secondary-color;
+$body-dark-color: $dark-color;
+
+$borders-color: #101621;
+
+$inputs-border-color: #232545;
+
+// miscellaneous
+$avatar-bg-color: desaturate(lighten($light-color, 10%), 8%);
+$avatar-color: desaturate(lighten($light-color, 44%), 8%);
+
+$btn-body-hover-border: lighten($inputs-border-color, 3%);
+$btn-body-active-border: lighten($inputs-border-color, 1.5%);
+
+$overlay-bg: rgba($black, 0.75);

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

@@ -0,0 +1,12 @@
+.alert {
+
+  &-success {
+    color: $white !important;
+    background-color: $success-color !important;
+  }
+
+  &-danger {
+    color: $white !important;
+    background-color: $danger-color !important;
+  }
+}

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

@@ -0,0 +1,31 @@
+.badge {
+  align-items: center;
+  border-radius: $md-border-radius;
+  display: flex;
+  height: rem(32px);
+  justify-content: center;
+  padding: 0;
+  width: rem(32px);
+
+  &.bg-default {
+    color: $white !important;
+    background-color: $secondary-color !important;
+  }
+
+  &.bg-success {
+    color: $white !important;
+    background-color: $success-color !important;
+  }
+
+  &.bg-danger {
+    color: $white !important;
+    background-color: $danger-color !important;
+  }
+
+  // smaller badges in rows
+  td & {
+    border-radius: $sm-border-radius;
+    height: rem(24px);
+    width: rem(24px);
+  }
+}