slash_admin 0.1.0 → 1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f1eb8776c07ec77415ce20ceea1075b36554d5ddd7e3b8591206c0b562dbf2a
-  data.tar.gz: fd7d4b221829064885b86a0c2e96588faa006648b41855386da5d3efd706a988
+  metadata.gz: 0c90c097781b6d4de18232be80a73c746c0a635306f09583518dc579fc080f7c
+  data.tar.gz: 3b557ba04b67537b1bff365b4ac7021b09952be5ba659f6f4172da94e70ab309
 SHA512:
-  metadata.gz: 55167cf3a304061acb8b693ea52717d7dda264ee09bc4f90dc8438bed7decc3a0abf75a1881340069539a58736d504b0c684afade373d9ecf3aaf8398bb659e7
-  data.tar.gz: 4db31680e5d862e6810eb46c0172e1e7d3b4b64f25c33911907524d71d44be751765fc82450e4a9551352d21da5f920e35117481c965a95e0bc35a0e03c2dda8
+  metadata.gz: cdf0e1651f829df415e7d0c176645df9556472198817eb1c2de67f423eae9b57bba1fde9674e0da1ea0fff930d615865811327fc03209959a84963b93af81e6d
+  data.tar.gz: 9239fa0a4b215c8b65bad862601d5e305a480851c3dd6223557c0c2c80fc5a4ffc5a80f985b154e3bd3ff788b8bdc0a9bf13ff9b551ac784d15caf0ace9ee3fd

data/README.md

@@ -1,11 +1,25 @@
+<p align="center">
+  <img width="250" src="https://i.imgur.com/Rok5Ocf.png" />
+</p>
+
+# SlashAdmin
+
+[![Gem Version](https://badge.fury.io/rb/slash_admin.svg)](https://badge.fury.io/rb/slash_admin)
 [![Code Climate](https://codeclimate.com/github/nicovak/slash_admin/badges/gpa.svg)](https://codeclimate.com/github/nicovak/slash_admin)
 [![CircleCI](https://circleci.com/gh/nicovak/slash_admin/tree/master.svg?style=svg&circle-token=6e9ebd7fef3ebc881c75a769b0970808024a2ae9)](https://circleci.com/gh/nicovak/slash_admin/tree/master)
 
-# [W.I.P] SlashAdmin
-
-A modern and overridable admin, just the rails way.
+A modern and fully overridable admin, just the rails way.
 Embeded admin user and authentication system, devise is not needed.
 
+❤️ [Demo repository](https://github.com/nicovak/slash_admin_demo)
+🚀 [Live running](https://slashadmin.herokuapp.com/admin)
+
+User
+`admin`
+
+Password
+`admin@admin`
+
 #### Motivation:
 - Provide to rails the admin it deserves without DSL or obscure logic.
 - Provide an easy to use and modern experience to final users.
@@ -19,20 +33,25 @@ Design inspired from the awesome metronic admin theme:
 
 #### Screenshots
 
-![Image of Login screen](http://i.imgur.com/HFQ9hfw.jpg)
-![Image of List](http://i.imgur.com/p34HUU5.png)
-![Image of Create / Edit](http://i.imgur.com/TzOx3i8.png)
+##### Login
+![Image of Login screen](https://i.imgur.com/MJerQSR.jpg)
+##### Dashboard
+![Image of Dashboard](https://i.imgur.com/0g3wSjw.png)
+##### List
+![Image of List](https://i.imgur.com/s1egSS3.png)
+##### Edit / Create
+![Image of Create / Edit](https://i.imgur.com/wf72pZz.png)
 
 ### Installation
-Add this line to your application's Gemfile:
 
+Add this line to your application's Gemfile:
 ```ruby
 gem 'slash_admin'
 ```
 
 And then execute:
 ```bash
-$ bundle
+$ bundle install
 ```
 
 Or install it yourself as:
@@ -47,12 +66,13 @@ gem 'carrierwave'
 
 Then:
 ```bash
-rails g slash_admin:install
-rails slash_admin:install:migrations
-rails db:migrate
+$ rails g slash_admin:install
+$ rails slash_admin:install:migrations
+$ rails db:migrate
 ```
 
 `config/initializers/mime_types.rb`
+
 ```ruby
 Mime::Type.register "application/xls", :xls
 ```
@@ -89,7 +109,13 @@ SlashAdmin::Admin.create!(
 [Read the docs](https://github.com/nicovak/slash_admin/tree/master/docs/index.md)
 
 ## Contributing
-Coming soon.
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/nicovak/slash_admin. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the slash_admin project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/nicovak/slash_admin/tree/master/CODE_OF_CONDUCT.md).

data/app/assets/javascripts/slash_admin/application.js

@@ -13,7 +13,8 @@
 //= require Chart.min
 //= require highcharts
 //= require chartkick
-//= require bootstrap-datepicker
+//= require bootstrap-datepicker.min
+//= require bootstrap-datepicker.fr.min
 //= require sweetalert
 //= require cocoon
 //= require toastr
@@ -33,12 +34,12 @@ $(document).on("turbolinks:load", init);
 function init() {
   Turbolinks.clearCache();
 
-  $('.page-sidebar a[href$="#"]').on('click', function(e) {
-    e.preventDefault()
+  $('.page-sidebar a[href$="#"]').on("click", function(e) {
+    e.preventDefault();
   });
 
   $(".tags").tagsInput({
-    placeholder: I18n.t('slash_admin.view.add_tag'),
+    placeholder: I18n.t("slash_admin.view.add_tag"),
     delimiter: [",", ";", " "]
   });
 
@@ -58,9 +59,11 @@ function init() {
 
   // Automatic hide alert
   window.setTimeout(function() {
-    $(".alert").fadeTo(500, 0).slideUp(500, function() {
-      $(this).remove();
-    });
+    $(".alert")
+      .fadeTo(500, 0)
+      .slideUp(500, function() {
+        $(this).remove();
+      });
   }, 1500);
 
   // clearForm
@@ -98,7 +101,10 @@ function init() {
   });
 
   // MENU
-  $(".sub-menu").has(".active").parent().addClass("active");
+  $(".sub-menu")
+    .has(".active")
+    .parent()
+    .addClass("active");
 
   // BULK ACTIONS
   $(".toggle-all").on("change", function() {
@@ -125,15 +131,16 @@ function init() {
 
     swal(
       {
-        title: I18n.t('slash_admin.view.confirm'),
-        text: I18n.t('slash_admin.view.no_back'),
+        title: I18n.t("slash_admin.view.confirm"),
+        text: I18n.t("slash_admin.view.no_back"),
         type: "warning",
         showCancelButton: true,
         confirmButtonClass: "btn-danger",
         cancelButtonClass: "btn-primary",
-        confirmButtonText: I18n.t('slash_admin.view.yes_delete'),
-        cancelButtonText: I18n.t('slash_admin.view.cancel'),
-        closeOnConfirm: false
+        confirmButtonText: I18n.t("slash_admin.view.yes_delete"),
+        cancelButtonText: I18n.t("slash_admin.view.cancel"),
+        closeOnConfirm: false,
+        showLoaderOnConfirm: true
       },
       function() {
         $.ajax({
@@ -164,15 +171,16 @@ function init() {
     if (ids.length > 0) {
       swal(
         {
-          title: I18n.t('slash_admin.view.confirm'),
+          title: I18n.t("slash_admin.view.confirm"),
           text: message,
           type: "warning",
           showCancelButton: true,
           confirmButtonClass: "btn-danger",
           cancelButtonClass: "btn-primary",
-          confirmButtonText: I18n.t('slash_admin.view.yes_delete'),
-          cancelButtonText: I18n.t('slash_admin.view.cancel'),
-          closeOnConfirm: false
+          confirmButtonText: I18n.t("slash_admin.view.yes_delete"),
+          cancelButtonText: I18n.t("slash_admin.view.cancel"),
+          closeOnConfirm: false,
+          showLoaderOnConfirm: true
         },
         function() {
           $.ajax({
@@ -190,19 +198,19 @@ function init() {
   });
 
   $(".selectize-single").selectize({
+    plugins: ['remove_button'],
     allowEmptyOption: true
   });
 
   $(".selectize-multiple").selectize({
     allowEmptyOption: true,
     persist: false,
-    plugins: {
-      remove_button: {}
-    }
+    plugins: ['remove_button']
   });
 
   $(".selectize-model-single").selectize({
     allowEmptyOption: true,
+    plugins: ['remove_button'],
     valueField: "id",
     labelField: "name",
     searchField: "name",
@@ -238,10 +246,8 @@ function init() {
 
   $(".selectize-model-multiple").selectize({
     allowEmptyOption: true,
+    plugins: ['remove_button'],
     persist: false,
-    plugins: {
-      remove_button: {}
-    },
     valueField: "id",
     labelField: "name",
     searchField: "name",
@@ -277,7 +283,7 @@ function init() {
 
   $(".bootstrap-datepicker").datepicker({
     language: I18n.currentLocale(),
-    format: "YYYY-MM-DD"
+    format: "yyyy-mm-dd"
   });
 
   $(".bootstrap-material-date").bootstrapMaterialDatePicker({
@@ -315,7 +321,9 @@ function init() {
     var url = window.location.href.split("?")[0];
 
     var filtersParams = $("#filters").serialize();
-    var paginationParams = $(".admin-pagination").first().serialize();
+    var paginationParams = $(".admin-pagination")
+      .first()
+      .serialize();
     var orderParams = $("#order").serialize();
 
     parameters = "";

data/app/assets/stylesheets/slash_admin/application.scss

@@ -10,13 +10,12 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require font-awesome
  *= require animate
  *= require toastr
  *= require jquery.nestable
  *= require sweetalert
  *= require selectize
- *= require bootstrap-datepicker
+ *= require bootstrap-datepicker.min
  *= require bootstrap-material-datetimepicker
  *= require jquery.tagsinput-revisited.min
  *= require jquery.minicolors
@@ -30,25 +29,27 @@
  *= require_tree .
  */
 
-@import 'slash_admin/colors';
-@import 'slash_admin/alert';
+@import "slash_admin/colors";
+@import "slash_admin/alert";
 
-$pagination-padding-y: .4rem !default;
+$pagination-padding-y: 0.4rem !default;
 $pagination-border-width: 0 !default;
-$border-radius: .15rem !default;
+$border-radius: 0.15rem !default;
 
-@import 'bootstrap';
-@import 'font-awesome';
+@import "bootstrap";
 
-@import 'https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0/css/froala_editor.pkgd.min.css';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.0/css/froala_style.min.css';
+@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url("https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.9.3/css/froala_editor.pkgd.min.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.9.3/css/froala_style.min.css");
+
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
+  transition: all ease 0.6s;
 }
 
 h1,
@@ -61,10 +62,23 @@ h6 {
 }
 
 .turbolinks-progress-bar {
-  background-color: $primary;
+  background-color: $pink;
   height: 3px;
 }
 
+a {
+  transition: all ease 0.6s;
+  color: $pink;
+
+  &:hover {
+    color: darken($primary, 5%);
+  }
+}
+
+i {
+  transition: all ease 0.6s;
+}
+
 .btn {
   cursor: pointer;
 }
@@ -83,7 +97,7 @@ h6 {
 }
 
 #admin-dashboard {
-  background: $secondary;
+  background: $tertiary;
   padding-top: 68px;
   margin: 0;
 
@@ -93,7 +107,7 @@ h6 {
   }
 
   label.required::after {
-    content: '*';
+    content: "*";
     margin-left: 5px;
   }
 
@@ -105,13 +119,21 @@ h6 {
     }
   }
 
-  .grey-block-form >  {
+  .no-break {
+    word-break: normal;
+  }
+
+  .grey-block-form > {
     .form-group {
       background: #f9f9f9;
       padding: 15px;
     }
   }
 
+  .remote-asset-link {
+    word-break: break-all;
+  }
+
   .btn-add-assoc {
     border-radius: 0;
     padding: 8px 10px;
@@ -155,6 +177,10 @@ h6 {
     background: $red;
   }
 
+  .errors-json {
+    color: $red;
+  }
+
   .tag-boolean {
     width: 45px;
     text-align: center;
@@ -202,14 +228,16 @@ h6 {
     }
 
     .navbar .page-logo {
-      width: 54px;
+      width: 58px;
     }
 
     .page-container {
       .page-sidebar {
-        width: 54px;
+        width: 58px;
 
         ul.nav {
+          display: flex;
+
           li.nav-item {
             &.active::after,
             &:hover::after {
@@ -217,9 +245,9 @@ h6 {
             }
 
             a.nav-link {
-              min-height: 54px;
+              min-height: 58px;
 
-              [class^=icon-] {
+              [class^="icon-"] {
                 margin: 0;
               }
 
@@ -229,20 +257,16 @@ h6 {
             }
 
             ul.sub-menu {
-              margin-left: 54px;
+              margin-left: 58px;
             }
           }
         }
       }
-
-      .page-content {
-        margin-left: 54px;
-      }
     }
   }
 
   .form-control {
-    transition: all ease .6s;
+    transition: all ease 0.6s;
     border: 1px solid #c2cad8;
 
     &:focus {
@@ -255,7 +279,7 @@ h6 {
     overflow: hidden;
     margin: 0;
 
-    input[type='file'] {
+    input[type="file"] {
       position: absolute;
       top: 0;
       right: 0;
@@ -278,17 +302,50 @@ h6 {
       outline: 0;
     }
 
-    input[type='text'] {
+    input[type="text"] {
       color: #9e9e9e;
     }
   }
 
-  .image {
-    width: 300px;
-    min-width: 300px;
-    display: inline-block;
-    margin-right: 25px;
-    background: #fff;
+  .row-end {
+    align-items: flex-end;
+  }
+
+  .image-delete {
+    margin-top: 5px;
+  }
+
+  .cover-image {
+    background-size: cover;
+    position: relative;
+    height: 80px;
+    width: 100%;
+    transition: all ease .6s;
+  }
+
+  .image-overlay {
+    transition: all ease .6s;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba($primary, .0);
+
+    .icon-zoom-image {
+      transition: all ease .6s;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      opacity: 0;
+    }
+
+    &:hover {
+      background: rgba($primary, .4);
+      .icon-zoom-image {
+        opacity: 1;
+      }
+    }
   }
 
   .image-field {
@@ -317,13 +374,13 @@ h6 {
     border-radius: 50%;
     padding: 2px 6px;
     display: none;
-    transition: all ease .6s;
+    transition: all ease 0.6s;
     cursor: pointer;
 
     i {
       display: inline-block;
       color: #687991;
-      opacity: .7;
+      opacity: 0.7;
     }
 
     &:hover {
@@ -371,18 +428,18 @@ h6 {
   }
 
   a.menu-toggler {
-    color: #eee !important;
-    transition: all .6s;
+    color: $pink !important;
+    transition: all 0.6s;
     float: right;
     margin: 23px 0 0;
 
     &:hover {
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 
   .dropdown-toggle {
-    font-size: .95em;
+    font-size: 0.95em;
     white-space: normal;
 
     &::after {
@@ -395,7 +452,7 @@ h6 {
       width: 195px;
       padding: 0;
       border-radius: 0;
-      box-shadow: 5px 5px rgba(102, 102, 102, .1);
+      box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
       border: 1px solid #eee;
       right: 0;
       margin-top: -6px;
@@ -408,7 +465,7 @@ h6 {
       a.dropdown-item {
         padding: 8px 16px;
         color: #555;
-        font-size: .95em;
+        font-size: 0.95em;
 
         &:hover {
           background: #f6f6f6;
@@ -421,9 +478,9 @@ h6 {
         right: 9px;
         display: inline-block;
         border-right: 7px solid transparent;
-        border-bottom: 7px solid rgba(0, 0, 0, .2);
+        border-bottom: 7px solid rgba(0, 0, 0, 0.2);
         border-left: 7px solid transparent;
-        content: '';
+        content: "";
       }
 
       &::after {
@@ -434,7 +491,7 @@ h6 {
         border-right: 6px solid transparent;
         border-bottom: 6px solid #fff;
         border-left: 6px solid transparent;
-        content: '';
+        content: "";
       }
     }
   }
@@ -442,9 +499,8 @@ h6 {
   .navbar {
     padding: 0;
     margin: 0;
-    box-shadow: 0 1px 10px 0 rgba(50, 50, 50, .2);
-    color: #7f96ac;
-    transition: all .6s ease;
+    background: #fff;
+    transition: all 0.6s ease;
 
     .right-nav-fix {
       img {
@@ -502,8 +558,8 @@ h6 {
         color: #7f96ac;
       }
 
-      input[type='text'] {
-        transition: all .6s ease;
+      input[type="text"] {
+        transition: all 0.6s ease;
         width: 150px;
 
         &:focus {
@@ -526,6 +582,7 @@ h6 {
     }
 
     .navbar-collapse {
+      background: #fff;
       width: auto;
       flex: 1;
       padding: 0 15px;
@@ -538,6 +595,10 @@ h6 {
       top: 50%;
       font-weight: 200;
 
+      .icon-menu {
+        color: $pink;
+      }
+
       &:hover {
         color: #fff;
       }
@@ -545,7 +606,7 @@ h6 {
 
     .page-logo {
       position: relative;
-      background: $primary;
+      background: $sidebar;
       float: left;
       display: block;
       width: 195px;
@@ -557,8 +618,9 @@ h6 {
 
   .dashboard-panel {
     background: #fff;
-    border: 1px solid #e7ecf1;
+    border-radius: 10px;
     padding: 15px 15px 30px;
+    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
   }
 
   .line-show {
@@ -604,7 +666,6 @@ h6 {
       float: left;
 
       small {
-        font-size: 14px;
         color: #aab5bc;
         font-weight: 600;
         text-transform: uppercase;
@@ -631,34 +692,48 @@ h6 {
   .selectize-input {
     box-shadow: none;
     border: 1px solid #c2cad8;
+    display: flex;
+    flex-wrap: wrap;
+
+    > input {
+      width: auto !important;
+      flex: 1;
+    }
   }
 
   .page-container {
-    display: block;
+    display: flex;
+    table-layout: fixed;
+    overflow: hidden;
+    width: 100%;
 
     .page-sidebar {
       width: 195px;
-      float: left;
+      background: $sidebar;
       position: relative;
-      margin-right: -100%;
+      display: flex;
 
-      ul.nav >  {
+      ul {
+        flex: 1;
+      }
+
+      ul.nav > {
         li.nav-item {
           position: relative;
 
           &.active {
-            background: #1f2b3d;
+            background: darken($sidebar, 8%);
 
-            a.nav-link {
+            > a.nav-link {
               color: #fff;
 
               i {
-                color: $primary;
+                color: $pink !important;
               }
             }
 
             &::after {
-              content: '';
+              content: "";
               float: right;
               position: absolute;
               top: 30px;
@@ -675,18 +750,34 @@ h6 {
           }
 
           &:hover {
-            background: #232f44;
+            a.nav-link {
+              color: #fff;
+
+              i {
+                color: $pink;
+              }
+            }
 
             > ul.sub-menu {
               display: inline-block;
+
+              a.nav-link {
+                &:hover {
+                  color: #fff;
+
+                  i {
+                    color: $pink;
+                  }
+                }
+              }
             }
 
             &::after {
-              content: '';
+              content: "";
               float: right;
               position: absolute;
+              top: 30px;
               right: 0;
-              top: 26px;
               background: 0 0;
               width: 0;
               height: 0;
@@ -694,7 +785,7 @@ h6 {
               border-top: 12px double transparent;
               border-bottom: 12px double transparent;
               border-left: 0;
-              border-right: 8px solid #1c2637;
+              border-right: 8px solid $pink;
             }
           }
 
@@ -709,8 +800,7 @@ h6 {
             font-size: 13px;
             font-weight: 300;
             text-align: center;
-            color: #c3cee0;
-            border-top: 1px solid #2b3b55;
+            color: $textColor;
             overflow: hidden;
             border-radius: 0;
 
@@ -724,48 +814,49 @@ h6 {
               top: 2px;
               font-size: 24px;
               text-shadow: none;
-              font-weight: 300;
               text-align: center;
-              color: #4d5d7c;
+              color: $blueIcon;
             }
           }
 
           ul.sub-menu {
-            width: 194px;
+            width: 195px;
             margin-left: 195px;
-            background: #1c2637;
+            background: darken($sidebar, 8%);
             top: 0;
             z-index: 9999;
             position: absolute;
             padding: 0;
             list-style: none;
             display: none;
-            box-shadow: 5px 5px rgba(48, 48, 48, .2);
 
             li.nav-item {
               background: none;
-              color: #c3cee0;
+              color: $textColor;
 
               &::after {
                 border: 0;
               }
 
               a.nav-link.active {
-                background: #212d41;
+                background: darken($sidebar, 8%);
+
+                i {
+                  color: $pink !important;
+                }
               }
 
               &:hover {
                 a.nav-link {
-                  background: #212d41;
+                  background: darken($sidebar, 8%);
                 }
               }
 
               a.nav-link {
                 min-height: inherit;
                 padding: 9px 15px;
-                margin: 3px;
                 border: 0;
-                color: #c3cee0;
+                color: $textColor;
 
                 &.active {
                   color: #fff;
@@ -776,9 +867,8 @@ h6 {
                   font-size: 16px;
                   line-height: 16px;
                   text-shadow: none;
-                  font-weight: 300;
                   text-align: center;
-                  color: #5d7bad;
+                  color: $blueIcon;
                   float: left;
                 }
 
@@ -792,6 +882,7 @@ h6 {
                   margin-top: 0;
                   font-size: 13px;
                   float: left;
+                  display: block;
                 }
               }
             }
@@ -801,17 +892,18 @@ h6 {
     }
 
     .page-content {
-      margin-left: 195px;
+      flex: 1;
       margin-top: 0;
-      min-height: calc(100vh - 68px);
+      min-height: 100vh;
       padding: 25px 20px 10px;
-      background: $tertiary;
+      overflow: auto;
     }
   }
 
   .breadcrumb {
     padding: 10px 15px;
-    border: 1px solid #e7ecf1;
+    border: 1px solid rgba(121,133,166,0.1);
+    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
     background-color: #fff;
     margin: 20px 0;
     border-radius: 0;
@@ -832,7 +924,8 @@ h6 {
   .portlet {
     background: #fff;
     margin-bottom: 25px;
-    border: 1px solid #e7ecf1;
+    border: 1px solid rgba(121,133,166,0.1);
+    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
   }
 
   .btn-circle {
@@ -854,7 +947,7 @@ h6 {
   }
 
   .portlet-title {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid rgba(121,133,166,0.1);
     padding: 10px 20px;
     margin-bottom: 10px;
     display: flex;
@@ -862,7 +955,7 @@ h6 {
     justify-content: space-between;
 
     .caption {
-      color: $primary;
+      color: $pink;
       text-transform: uppercase;
       font-weight: bold;
       padding: 10px 0;
@@ -884,7 +977,7 @@ h6 {
 
       a {
         padding: 4px 10px;
-        font-size: .9em;
+        font-size: 0.9em;
         line-height: 1.5;
       }
     }
@@ -905,7 +998,7 @@ h6 {
 
   .datepicker {
     border-radius: 0;
-    box-shadow: 5px 5px rgba(102, 102, 102, .1);
+    box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
     border: 1px solid #efefef;
 
     table {
@@ -933,7 +1026,6 @@ h6 {
     * {
       border-radius: 0 !important;
       margin: 0 5px;
-      font-size: 14px;
       text-transform: capitalize;
     }
 
@@ -952,26 +1044,36 @@ h6 {
     margin-bottom: 3px;
   }
 
-  .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
+  .selectize-dropdown {
+    padding: 5px 8px;
+  }
+
+  .selectize-dropdown [data-selectable],
+  .selectize-dropdown .optgroup-header {
     min-height: 28px;
   }
 
   .selectize-control.plugin-remove_button [data-value] .remove {
     border-color: #d4d4d4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .selectize-control.multi .selectize-input > div {
     margin-bottom: 0;
   }
 
-  .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header {
+  .selectize-dropdown [data-selectable],
+  .selectize-dropdown .optgroup-header {
     min-height: 28px;
   }
 
   .table-data-list {
-    border-color: #e7ecf1 !important;
+    border-color: rgba(121,133,166,0.1) !important;
     margin-top: 1rem;
-    font-size: .95em;
+    background: #fff;
+    font-size: .9em;
 
     .fit {
       white-space: nowrap;
@@ -1005,19 +1107,13 @@ h6 {
         font-weight: 300;
       }
 
-      th,
-      td {
-        border-bottom-width: 3px;
-      }
-
       .selectize-input {
-        margin-top: 5px;
         padding: 5px 8px;
         border-radius: 0;
       }
 
       .input-group + .input-group {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
       }
 
       .form-control {
@@ -1031,7 +1127,7 @@ h6 {
         }
 
         + .form-control {
-          margin-top: .5rem;
+          margin-top: 0.5rem;
         }
       }
 
@@ -1045,7 +1141,7 @@ h6 {
         height: auto;
       }
 
-      .input-group-addon {
+      .input-group-prepend {
         height: 30px;
         border-radius: 0;
         background: #ececec;
@@ -1060,7 +1156,6 @@ h6 {
     td {
       padding: 8px 10px;
       vertical-align: middle;
-      font-size: 14px;
       border-color: #e7ecf1;
     }
 
@@ -1074,7 +1169,6 @@ h6 {
 
     tr.heading th {
       background: #fbfcfd;
-      font-size: 14px;
       font-weight: 600;
       border-bottom: 0;
     }
@@ -1091,8 +1185,8 @@ h6 {
       cursor: pointer;
 
       &::after {
-        content: '\f0dc';
-        font-family: 'FontAwesome';
+        content: "\f0dc";
+        font-family: "Font Awesome 5 Free";
         color: $lightgrey;
         float: right;
       }
@@ -1100,8 +1194,8 @@ h6 {
 
     .asc {
       &::after {
-        content: '\f0dd';
-        font-family: 'FontAwesome';
+        content: "\f0dd";
+        font-family: "Font Awesome 5 Free";
         color: $blue;
         float: right;
       }
@@ -1109,8 +1203,8 @@ h6 {
 
     .desc {
       &::after {
-        content: '\f0de';
-        font-family: 'FontAwesome';
+        content: "\f0de";
+        font-family: "Font Awesome 5 Free";
         color: $blue;
         float: right;
       }
@@ -1118,7 +1212,7 @@ h6 {
   }
 
   .pagination-panel {
-    font-size: .9em;
+    font-size: 0.9em;
     display: flex;
     align-items: center;
 
@@ -1189,15 +1283,13 @@ h6 {
   }
 
   .head-data-list {
+    display: flex;
+    justify-content: space-between;
     overflow: visible;
   }
 
-  .fix-block-head {
-    display: inline-block;
-  }
-
   .block-batch {
-    font-size: .9em;
+    font-size: 0.9em;
     display: flex;
     align-items: center;
 
@@ -1238,7 +1330,6 @@ h6 {
     border-radius: 2px;
 
     .btn {
-      font-size: 14px;
       padding: 8px 14px;
       border-radius: 2px;
     }
@@ -1264,8 +1355,11 @@ h6 {
   }
 
   #toast-container {
+    box-shadow: none;
+
     > div {
       opacity: 1;
+      box-shadow: none;
 
       &hover {
         box-shadow: none;
@@ -1273,19 +1367,19 @@ h6 {
     }
 
     > .toast-success {
-      background-color: rgba($success, .9);
+      background-color: rgba($success, 0.9);
     }
 
     > .toast-error {
-      background-color: rgba($error, .9);
+      background-color: rgba($error, 0.9);
     }
 
     > .toast-info {
-      background-color: rgba($info, .9);
+      background-color: rgba($info, 0.9);
     }
 
     > .toast-warning {
-      background-color: rgba($notice, .9);
+      background-color: rgba($notice, 0.9);
     }
   }
 
@@ -1333,11 +1427,11 @@ h6 {
     color: $red;
     text-align: center;
     display: block;
-    font-size: .9em;
+    font-size: 0.9em;
   }
 
   .container-fluid-admin {
-    height: 100vh;
+    min-height: 100vh;
   }
 
   .bckg-dark {
@@ -1358,28 +1452,33 @@ h6 {
   }
 
   .login-form {
-    background: #1c2c41;
+    background: $sidebar;
     color: #fff;
-    width: 45%;
+    width: 25%;
+    margin: 0 auto 25px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 
     h2 {
-      margin-bottom: 25px;
+      color: #fff;
     }
 
     .links-form {
       a {
-        color: #47566c;
+        color: $blueIcon;
         text-decoration: none;
 
         &:hover {
-          color: #47566c;
+          color: darken($blueIcon, 5%);
         }
       }
     }
 
     i {
       font-size: 1.5em;
-      color: $primary;
+      color: $blueIcon;
     }
 
     .form-control {
@@ -1387,7 +1486,7 @@ h6 {
     }
 
     .input-group {
-      margin-bottom: 20px;
+      margin-bottom: 40px;
     }
 
     .content {
@@ -1398,14 +1497,14 @@ h6 {
       padding: inherit;
     }
 
-    .input-group-addon {
+    .input-group-prepend {
       border-radius: 0;
       padding-bottom: 15px;
     }
 
     input[type="submit"] {
       cursor: pointer;
-      background: #304158;
+      background: $pink;
       color: #fff;
       border-radius: 3px;
       border: 0;
@@ -1415,7 +1514,7 @@ h6 {
       margin-top: 35px;
 
       &:hover {
-        background: darken(#304158, 5%);
+        background: darken($pink, 5%);
       }
     }
 
@@ -1424,6 +1523,7 @@ h6 {
     input[type="password"] {
       background-color: transparent;
       border: 0;
+      border-radius: 0;
       border-bottom: 1px solid #47566c;
       color: #fff;
       padding: 8px 12px 8px 35px;
@@ -1433,37 +1533,62 @@ h6 {
       caret-color: $primary;
     }
 
-    .input-group-addon {
+    .input-group-prepend {
       background-color: transparent;
       border: 0;
-      border-bottom: 1px solid #47566c;
       color: #fff;
-      padding-bottom: 15px;
-      padding-top: 12px;
+      padding-top: 5px;
     }
   }
 }
 
+/* Small devices (tablets, 768px and up) */
 @media (max-width: 768px) {
   #admin-user {
     .login-form {
-      width: 85%;
+      width: 80%;
+    }
+  }
+}
+
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  #admin-user {
+    .login-form {
+      width: 45%;
     }
   }
 }
 
-@media (min-width: 769px) and (max-width: 992px) {
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
   #admin-user {
     .login-form {
-      width: 35%;
+      width: 26%;
+
+      input[type="submit"] {
+        width: 100%;
+      }
+    }
+
+    .app-logo {
+      margin: 0 0 25px;
     }
   }
 }
 
-@media (min-width: 993px) {
-    #admin-user {
+@media (min-width: 1600px) {
+  #admin-user {
     .login-form {
-      width: 30%;
+      width: 20%;
+
+      input[type="submit"] {
+        width: 100%;
+      }
+    }
+
+    .app-logo {
+      margin: 0 0 25px;
     }
   }
-} 
+}