rtl and new cool theme

.gitignore

@@ -14,6 +14,9 @@
 /client/css/sakura-vertical.css
 /client/css/violet.css
 /client/css/violet-vertical.css
+/client/css/espo-rtl.css
+/client/css/hazyblue.css
+
 /tests/unit/testData/cache/*
 !/tests/unit/testData/cache/.data
 /tests/integration/config.php

Gruntfile.js

@@ -76,6 +76,22 @@ module.exports = function (grunt) {
                     'client/css/espo-vertical.css': 'frontend/less/espo-vertical/main.less',
                 }
             },
+            espoRtl: {
+                options: {
+                    yuicompress: true
+                },
+                files: {
+                    'client/css/espo-rtl.css': 'frontend/less/espo-rtl/main.less'
+                }
+            },
+            hazyblue: {
+                options: {
+                    yuicompress: true,
+                },
+                files: {
+                    'client/css/hazyblue.css': 'frontend/less/hazyblue/main.less',
+                }
+            },
             sakura: {
                 options: {
                     yuicompress: true,

application/Espo/Resources/i18n/en_US/Global.json

@@ -648,10 +648,12 @@
     },
     "themes": {
         "Espo": "Espo",
+        "EspoRtl": "RTL Espo",
         "Sakura": "Sakura",
-        "EspoVertical": "Espo Vertical",
-        "SakuraVertical": "Sakura Vertical",
+        "EspoVertical": "Espo sidebarred",
+        "SakuraVertical": "Sakura sidebarred",
         "Violet": "Violet",
-        "VioletVertical": "Violet Vertical"
+        "VioletVertical": "Violet sidebarred",
+        "Hazyblue": "Hazyblue"
     }
 }

application/Espo/Resources/metadata/themes/EspoRtl.json

@@ -0,0 +1,6 @@
+{
+    "stylesheet": "client/css/espo-rtl.css",
+    "dashboardCellHeight": 155,
+    "dashboardCellMargin": 19,
+    "navbarHeight": 44
+}

application/Espo/Resources/metadata/themes/Hazyblue.json

@@ -0,0 +1,9 @@
+{
+    "stylesheet": "client/css/hazyblue.css",
+    "navbarIsVertical": true,
+    "navbarStaticItemsHeight": 65,
+    "recordTopButtonsStickTop": 61,
+    "recordTopButtonsBlockHeight": 21,
+    "dashboardCellHeight": 155,
+    "dashboardCellMargin": 19
+}

client/modules/crm/res/templates/calendar/calendar.tpl

@@ -4,7 +4,7 @@
 {{#if header}}
 <div class="row button-container">
     <div class="col-sm-4 col-xs-3">
-        <div class="btn-group">
+        <div class="btn-group range-switch-group">
             <button class="btn btn-default" data-action="prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
             <button class="btn btn-default" data-action="next"><span class="glyphicon glyphicon-chevron-right"></span></button>
         </div>

client/res/templates/fields/link-parent/edit.tpl

@@ -4,7 +4,7 @@
             {{options foreignScopeList foreignScope category='scopeNames'}}
         </select>
     </span>
-    <input class="main-element form-control" type="text" name="{{nameName}}" value="{{nameValue}}" autocomplete="off" placeholder="{{translate 'Select'}}">
+    <input class="main-element form-control middle-element" type="text" name="{{nameName}}" value="{{nameValue}}" autocomplete="off" placeholder="{{translate 'Select'}}">
     <span class="input-group-btn">
         <button data-action="selectLink" class="btn btn-default" type="button" tabindex="-1" title="{{translate 'Select'}}"><i class="glyphicon glyphicon-arrow-up"></i></button>
         <button data-action="clearLink" class="btn btn-default" type="button" tabindex="-1"><i class="glyphicon glyphicon-remove"></i></button>

client/src/views/fields/base.js

@@ -429,7 +429,7 @@ Espo.define('views/fields/base', 'view', function (Dep) {
         addInlineEditLinks: function () {
             var $cell = this.getCellElement();
             var $saveLink = $('<a href="javascript:" class="pull-right inline-save-link">' + this.translate('Update') + '</a>');
-            var $cancelLink = $('<a href="javascript:" class="pull-right inline-cancel-link">' + this.translate('Cancel') + '</a>').css('margin-left', '8px');
+            var $cancelLink = $('<a href="javascript:" class="pull-right inline-cancel-link">' + this.translate('Cancel') + '</a>');
             $cell.prepend($saveLink);
             $cell.prepend($cancelLink);
             $cell.find('.inline-edit-link').addClass('hidden');

client/src/views/main.js

@@ -92,7 +92,7 @@ Espo.define('views/main', 'view', function (Dep) {
                 a.push('<div class="pull-left">' + item + '</div>');
             }, this);
 
-            return '<div class="clearfix">' + a.join('<div class="pull-left breadcrumb-separator"> &raquo </div>') + '</div>';
+            return '<div class="clearfix header-breadcrumbs">' + a.join('<div class="pull-left breadcrumb-separator"> &raquo </div>') + '</div>';
         },
 
         actionShowModal: function (data) {

client/src/views/preferences/fields/theme.js

@@ -32,7 +32,7 @@ Espo.define('views/preferences/fields/theme', 'views/fields/enum', function (Dep
 
         setup: function () {
             this.params.options = Object.keys(this.getMetadata().get('themes')).sort(function (v1, v2) {
-                return this.translate(v1, 'theme').localeCompare(this.translate(v2, 'theme'));
+                return this.translate(v1, 'themes').localeCompare(this.translate(v2, 'themes'));
             }.bind(this));
 
             this.params.options.unshift('');

frontend/less/espo-rtl/bootstrap-rtl/alerts-rtl.less

@@ -0,0 +1,20 @@
+//
+// RTL Alerts
+// --------------------------------------------------
+
+
+// Dismissable alerts
+//
+// Expand the left padding and account for the close button's positioning.
+
+.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
+.alert-dismissible {
+ padding-left: (@alert-padding + 20);
+ padding-right: (@alert-padding);
+
+  // Adjust close link position
+  .close {
+    right: auto;
+    left: -21px;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/badges-rtl.less

@@ -0,0 +1,21 @@
+//
+// RTL Badges
+// --------------------------------------------------
+
+
+// Base class
+.badge {
+
+  .nav-pills > li > a > & {
+    margin-left: 0px;
+    margin-right: 3px;
+  }
+
+  .list-group-item > & {
+    float: left;
+  }
+  .list-group-item > & + & {
+    margin-left: 5px;
+    margin-right: auto;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/bootstrap-flipped.less

@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// Deprecated flips for Bootstrap RTL v3.x
+// Morteza Ansarinia
+// http://github.com/morteza/bootstrap-rtl
+// --------------------------------------------------
+
+// Regular, semantically correct Bootstrap RTL
+// Core variables and mixins imported from the latest original bootstrap
+@import "../bootstrap/less/variables.less";
+@import "variables-rtl.less";
+@import "mixins-flipped.less";
+
+// ---- Single side border-radius ----
+
+.border-right-radius(@radius) {
+  border-bottom-left-radius: @radius;
+     border-top-left-radius: @radius;
+}
+.border-left-radius(@radius) {
+  border-bottom-right-radius: @radius;
+     border-top-right-radius: @radius;
+}
+
+// Reset and dependencies
+@import "normalize-rtl.less";
+//@import "print.less";
+//@import "glyphicons.less";
+
+// Core CSS
+//@import "scaffolding.less";
+@import "type-rtl.less";
+//@import "code.less";
+@import "grid-rtl.less";
+@import "tables-rtl.less";
+@import "forms-rtl.less";
+//@import "buttons.less";
+
+// Components
+//@import "component-animations.less";
+@import "dropdowns-rtl.less";
+@import "button-groups-rtl.less";
+@import "input-groups-rtl.less";
+@import "navs-rtl.less";
+@import "navbar-rtl.less";
+//@import "breadcrumbs.less";
+@import "pagination-rtl.less";
+@import "pager-rtl.less";
+//@import "labels.less";
+@import "badges-rtl.less";
+//@import "jumbotron.less";
+//@import "thumbnails.less";
+@import "alerts-rtl.less";
+@import "progress-bars-rtl.less";
+@import "media-rtl.less";
+@import "list-group-rtl.less";
+@import "panels-rtl.less";
+@import "responsive-embed-rtl.less";
+//@import "wells.less";
+@import "close-rtl.less";
+
+// Components w/ JavaScript
+@import "modals-rtl.less";
+//@import "tooltip.less";
+@import "popovers-rtl.less";
+@import "carousel-rtl.less";
+
+// Utility classes
+@import "utilities-rtl.less";
+//@import "responsive-utilities.less";
+@import "flipped.less";

frontend/less/espo-rtl/bootstrap-rtl/bootstrap-rtl.less

@@ -0,0 +1,57 @@
+// --------------------------------------------------
+// Right-to-Left (RTL) Theme for Bootstrap 3.x
+// Morteza Ansarinia
+// http://github.com/morteza/bootstrap-rtl
+// --------------------------------------------------
+
+// Core variables and mixins imported from the latest original bootstrap
+@import "../../espo/bootstrap/variables.less";
+@import "variables-rtl.less";
+@import "mixins-rtl.less";
+
+// Reset and dependencies
+@import "normalize-rtl.less";
+//@import "print.less";
+//@import "glyphicons.less";
+
+// Core CSS
+//@import "scaffolding.less";
+@import "type-rtl.less";
+//@import "code.less";
+@import "grid-rtl.less";
+@import "tables-rtl.less";
+@import "forms-rtl.less";
+//@import "buttons.less";
+
+// Components
+//@import "component-animations.less";
+@import "dropdowns-rtl.less";
+@import "button-groups-rtl.less";
+@import "input-groups-rtl.less";
+@import "navs-rtl.less";
+@import "navbar-rtl.less";
+//@import "breadcrumbs.less";
+@import "pagination-rtl.less";
+@import "pager-rtl.less";
+//@import "labels.less";
+@import "badges-rtl.less";
+//@import "jumbotron.less";
+//@import "thumbnails.less";
+@import "alerts-rtl.less";
+@import "progress-bars-rtl.less";
+@import "media-rtl.less";
+@import "list-group-rtl.less";
+@import "panels-rtl.less";
+@import "responsive-embed-rtl.less";
+//@import "wells.less";
+@import "close-rtl.less";
+
+// Components w/ JavaScript
+@import "modals-rtl.less";
+//@import "tooltip.less";
+@import "popovers-rtl.less";
+@import "carousel-rtl.less";
+
+// Utility classes
+@import "utilities-rtl.less";
+//@import "responsive-utilities.less";

frontend/less/espo-rtl/bootstrap-rtl/button-groups-rtl.less

@@ -0,0 +1,102 @@
+//
+// RTL Button groups
+// --------------------------------------------------
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  > .btn {
+    float: right;
+  }
+}
+
+// Prevent double borders when buttons are next to each other
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-right: -1px;
+    margin-left: 0px;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  margin-right: -5px; // Offset the first child's margin
+  margin-left: 0px;
+
+  .btn-group,
+  .input-group {
+    float: right;
+  }
+  > .btn,
+  > .btn-group,
+  > .input-group {
+    margin-right: 5px;
+    margin-left: 0px;
+  }
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-right: 0;
+  &:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+    .border-left-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  .border-right-radius(0);
+}
+
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: right;
+}
+
+.btn-group.btn-group-justified > .btn,
+.btn-group.btn-group-justified > .btn-group {
+  float: none;
+}
+
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
+    .border-left-radius(0);
+  }
+}
+.btn-group > .btn-group:last-child > .btn:first-child {
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
+  .border-right-radius(0);
+}
+
+// Reposition the caret
+.btn .caret {
+  margin-right: 0;
+}
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -1px;
+    margin-right: 0;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/carousel-rtl.less

@@ -0,0 +1,76 @@
+//
+// RTL Carousel
+// --------------------------------------------------
+
+
+// Left/right controls for nav
+// ---------------------------
+
+.carousel-control {
+  right: 0;
+  bottom: 0;
+
+  // Set gradients for backgrounds
+  &.left {
+    right: auto;
+    left: 0;
+    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
+  }
+  &.right {
+    left: auto;
+    right: 0;
+    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
+  }
+
+  .icon-prev,
+  .glyphicon-chevron-left {
+    left: 50%;
+    right: auto;
+    margin-right: -10px;
+  }
+  .icon-next,
+  .glyphicon-chevron-right {
+    right: 50%;
+    left: auto;
+    margin-left: -10px;
+  }
+}
+
+// Optional indicator pips
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  right: 50%;
+  left: 0;
+  margin-right: -30%;
+  margin-left: 0;
+  padding-left: 0;
+
+}
+
+// Scale up controls for tablets and up
+@media screen and (min-width: @screen-sm-min) {
+
+  // Scale up the controls a smidge
+  .carousel-control {
+    .glyphicon-chevron-left,
+    .icon-prev {
+      margin-left: 0;
+      margin-right: -15px;
+    }
+    .glyphicon-chevron-right,
+    .icon-next {
+      margin-left: 0;
+      margin-right: -15px;
+    }
+  }
+
+  // Show and left align the captions
+  .carousel-caption {
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/close-rtl.less

@@ -0,0 +1,8 @@
+//
+// RTL Close icons
+// --------------------------------------------------
+
+
+.close {
+  float: left;
+}

frontend/less/espo-rtl/bootstrap-rtl/dropdowns-rtl.less

@@ -0,0 +1,63 @@
+//
+// RTL Dropdown menus
+// --------------------------------------------------
+
+// Dropdown arrow/caret
+.caret {
+  margin-right: 2px;
+  margin-left: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+  right: auto;
+  left: 0;
+  float: left;
+  text-align: right; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+
+  // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
+  &.pull-right {
+    left: 0;
+    right: auto;
+    float: right;
+  }
+}
+
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-right {
+    .dropdown-menu {
+      .dropdown-menu-right();
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      .dropdown-menu-left();
+    }
+  }
+}
+

frontend/less/espo-rtl/bootstrap-rtl/flipped.less

@@ -0,0 +1,85 @@
+// ---------------------------------------------
+// Flipped classes
+// ---------------------------------------------
+
+// ---- Utilities ----
+.pull-right {
+  float: left !important;
+}
+.pull-left {
+  float: right !important;
+}
+
+//TODO carousel
+//TODO Glyphicons
+
+// ---- Dropdown ----
+.dropdown-menu-left {
+  left: auto;
+  right: 0;
+}
+
+// ---- Media ----
+.media-right,
+.media > .pull-right {
+  padding-right: 10px;
+  padding-left: initial;
+}
+
+.media-left,
+.media > .pull-left {
+  padding-left: 10px;
+  padding-right: initial;
+}
+
+// ---- Navbar ----
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-left  { .pull-left(); }
+  .navbar-right {
+    .pull-right();
+    margin-left: -@navbar-padding-horizontal;
+    margin-right: initial;
+
+    ~ .navbar-right {
+      margin-left: 0;
+      margin-right: initial;
+    }
+  }
+}
+
+// ---- Tooltip ----
+.tooltip {
+  &.top-left .tooltip-arrow {
+    left: @tooltip-arrow-width;
+  }
+  &.top-right .tooltip-arrow {
+    right: @tooltip-arrow-width;
+  }
+  &.right .tooltip-arrow {
+    right: 0;
+    border-left-color: @tooltip-arrow-color;
+  }
+  &.left .tooltip-arrow {
+    left: 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    left: @tooltip-arrow-width;
+  }
+  &.bottom-right .tooltip-arrow {
+    right: @tooltip-arrow-width;
+  }
+}
+
+// ---- Type ----
+.text-left           { text-align: right; }
+.text-right          { text-align: left; }
+
+//DEPRECATED
+blockquote.pull-right {
+  padding-left: 15px;
+  padding-right: 0;
+  border-left: 5px solid @blockquote-border-color;
+  border-right: 0;
+  text-align: left;
+}

frontend/less/espo-rtl/bootstrap-rtl/forms-rtl.less

@@ -0,0 +1,102 @@
+//
+// RTL Forms
+// --------------------------------------------------
+
+
+.radio,
+.checkbox {
+
+  label {
+    padding-right: 20px;
+    padding-left: initial;
+  }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  margin-right: -20px;
+  margin-left: auto;
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+  padding-right: 20px;
+  padding-left: 0;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-right: 10px; // space out consecutive inline controls
+  margin-left: 0;
+}
+
+.has-feedback {
+
+  // Ensure icons don't overlap text
+  .form-control {
+    padding-left: (@input-height-base * 1.25);
+    padding-right: 12px;
+  }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+  left: 0;
+  right: auto;
+}
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+  // Kick in the inline
+  @media (min-width: @screen-sm-min) {
+
+      label {
+        padding-right: 0;
+        padding-left: initial;
+      }
+
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      margin-right: 0;
+      margin-left: auto;
+    }
+
+  }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal {
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: @screen-sm-min) {
+    .control-label {
+      text-align: left;
+    }
+  }
+
+  // Validation states
+  //
+  // Reposition the icon because it's now within a grid column and columns have
+  // `position: relative;` on them. Also accounts for the grid gutter padding.
+  .has-feedback .form-control-feedback {
+    left: (@grid-gutter-width / 2);
+    right: auto;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/grid-rtl.less

@@ -0,0 +1,45 @@
+//
+// RTL Grid system
+// --------------------------------------------------
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+.make-rtl-grid-columns();
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-rtl-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-rtl-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-rtl-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-rtl-grid(lg);
+}

frontend/less/espo-rtl/bootstrap-rtl/input-groups-rtl.less

@@ -0,0 +1,76 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  .form-control {
+    // IE9 fubars the placeholder attribute in text inputs and the arrows on
+    // select elements in input groups. To fix it, we float the input. Details:
+    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+    float: right;
+  }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  .border-right-radius(@border-radius-base);
+  .border-left-radius(0);
+}
+.input-group-addon:first-child {
+  border-left: 0px;
+  border-right: 1px solid;
+}
+
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  .border-left-radius(@border-radius-base);
+  .border-right-radius(0);
+}
+.input-group-addon:last-child {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-right: 0px;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    + .btn {
+      margin-right: -1px;
+      margin-left: auto;
+    }
+  }
+
+  // Negative margin to only have a 1px border between the two
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      margin-left: -1px;
+      margin-right: auto;
+    }
+  }
+  &:last-child {
+    > .btn,
+    > .btn-group {
+      margin-right: -1px;
+      margin-left: auto;
+    }
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/list-group-rtl.less

@@ -0,0 +1,14 @@
+//
+// List groups
+// --------------------------------------------------
+
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  padding-right: 0; // reset padding because ul and ol
+  padding-left: initial;
+}
+

frontend/less/espo-rtl/bootstrap-rtl/media-rtl.less

@@ -0,0 +1,47 @@
+// RTL Media objects
+// --------------------------------------------------
+
+
+// Media image alignment
+// -------------------------
+
+.media {
+  > .pull-left {
+    margin-right: 10px;
+    &.flip {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+  > .pull-right {
+      margin-left: 10px;
+    &.flip {
+      margin-left: 0;
+      margin-right: 10px;
+    }
+  }
+}
+
+.media-right,
+.media > .pull-right {
+  padding-right: 10px;
+  padding-left: initial;
+}
+
+.media-left,
+.media > .pull-left {
+  padding-left: 10px;
+  padding-right: initial;
+}
+
+
+// Media list variation
+// -------------------------
+
+// Undo default ul/ol styles
+.media-list {
+  padding-right: 0;
+  padding-left: initial;
+  list-style: none;
+}
+

frontend/less/espo-rtl/bootstrap-rtl/mixins-flipped.less

@@ -0,0 +1,39 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "../bootstrap/less/mixins/hide-text.less";
+@import "../bootstrap/less/mixins/opacity.less";
+@import "../bootstrap/less/mixins/image.less";
+@import "../bootstrap/less/mixins/labels.less";
+@import "../bootstrap/less/mixins/reset-filter.less";
+@import "../bootstrap/less/mixins/resize.less";
+@import "../bootstrap/less/mixins/responsive-visibility.less";
+@import "../bootstrap/less/mixins/size.less";
+@import "../bootstrap/less/mixins/tab-focus.less";
+@import "../bootstrap/less/mixins/text-emphasis.less";
+@import "../bootstrap/less/mixins/text-overflow.less";
+@import "../bootstrap/less/mixins/vendor-prefixes.less";
+
+// Components
+@import "../bootstrap/less/mixins/alerts.less";
+@import "../bootstrap/less/mixins/buttons.less";
+@import "../bootstrap/less/mixins/panels.less";
+@import "mixins/pagination-rtl.less"; // RTL
+@import "../bootstrap/less/mixins/list-group.less";
+@import "../bootstrap/less/mixins/nav-divider.less";
+@import "../bootstrap/less/mixins/forms.less";
+@import "../bootstrap/less/mixins/progress-bar.less";
+@import "../bootstrap/less/mixins/table-row.less";
+
+// Skins
+@import "../bootstrap/less/mixins/background-variant.less";
+@import "mixins/border-radius-flipped.less"; //FLIPPED
+@import "mixins/gradients-rtl.less"; // RTL
+
+// Layout
+@import "../bootstrap/less/mixins/clearfix.less";
+@import "../bootstrap/less/mixins/center-block.less";
+@import "../bootstrap/less/mixins/nav-vertical-align.less";
+@import "mixins/grid-framework-rtl.less"; // RTL
+@import "mixins/grid-rtl.less"; // RTL

frontend/less/espo-rtl/bootstrap-rtl/mixins-rtl.less

@@ -0,0 +1,39 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "../../espo/bootstrap/mixins/hide-text.less";
+@import "../../espo/bootstrap/mixins/opacity.less";
+@import "../../espo/bootstrap/mixins/image.less";
+@import "../../espo/bootstrap/mixins/labels.less";
+@import "../../espo/bootstrap/mixins/reset-filter.less";
+@import "../../espo/bootstrap/mixins/resize.less";
+@import "../../espo/bootstrap/mixins/responsive-visibility.less";
+@import "../../espo/bootstrap/mixins/size.less";
+@import "../../espo/bootstrap/mixins/tab-focus.less";
+@import "../../espo/bootstrap/mixins/text-emphasis.less";
+@import "../../espo/bootstrap/mixins/text-overflow.less";
+@import "../../espo/bootstrap/mixins/vendor-prefixes.less";
+
+// Components
+@import "../../espo/bootstrap/mixins/alerts.less";
+@import "../../espo/bootstrap/mixins/buttons.less";
+@import "../../espo/bootstrap/mixins/panels.less";
+@import "mixins/pagination-rtl.less"; // RTL
+@import "../../espo/bootstrap/mixins/list-group.less";
+@import "../../espo/bootstrap/mixins/nav-divider.less";
+@import "../../espo/bootstrap/mixins/forms.less";
+@import "../../espo/bootstrap/mixins/progress-bar.less";
+@import "../../espo/bootstrap/mixins/table-row.less";
+
+// Skins
+@import "../../espo/bootstrap/mixins/background-variant.less";
+@import "../../espo/bootstrap/mixins/border-radius.less";
+@import "mixins/gradients-rtl.less"; // RTL
+
+// Layout
+@import "../../espo/bootstrap/mixins/clearfix.less";
+@import "../../espo/bootstrap/mixins/center-block.less";
+@import "../../espo/bootstrap/mixins/nav-vertical-align.less";
+@import "mixins/grid-framework-rtl.less"; // RTL
+@import "mixins/grid-rtl.less"; // RTL

frontend/less/espo-rtl/bootstrap-rtl/mixins/border-radius-flipped.less

@@ -0,0 +1,10 @@
+// Single side flipped border-radius
+
+.border-right-radius(@radius) {
+  border-bottom-left-radius: @radius;
+     border-top-left-radius: @radius;
+}
+.border-left-radius(@radius) {
+  border-bottom-right-radius: @radius;
+     border-top-right-radius: @radius;
+}

frontend/less/espo-rtl/bootstrap-rtl/mixins/gradients-rtl.less

@@ -0,0 +1,24 @@
+// RTL Gradients
+
+#gradient {
+
+  // Horizontal gradient, from right to left
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  .horizontal(@start-color: #333; @end-color: #555; @start-percent: 0%; @end-percent: 100%) {
+    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
+    background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
+  }
+
+  .horizontal-three-colors(@start-color: #c3325f; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #00b3ee) {
+    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
+    background-repeat: no-repeat;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-framework-rtl.less

@@ -0,0 +1,96 @@
+// RTL Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `@grid-columns`.
+
+.make-rtl-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  .col(@index) { // initial
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      // Inner gutter via padding
+      padding-left:  (@grid-gutter-width / 2);
+      padding-right: (@grid-gutter-width / 2);
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.float-rtl-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: right;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.calc-rtl-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+  .col-@{class}-@{index} {
+    width: percentage((@index / @grid-columns));
+  }
+}
+.calc-rtl-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
+  .col-@{class}-push-@{index} {
+    right: percentage((@index / @grid-columns));
+    left: 0;
+  }
+}
+.calc-rtl-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
+  .col-@{class}-push-0 {
+    right: auto;
+    left: 0;
+  }
+}
+.calc-rtl-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
+  .col-@{class}-pull-@{index} {
+    left: percentage((@index / @grid-columns));
+    right: auto;
+  }
+}
+.calc-rtl-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
+  .col-@{class}-pull-0 {
+    left: auto;
+    right: auto;
+  }
+}
+.calc-rtl-grid-column(@index, @class, @type) when (@type = offset) {
+  .col-@{class}-offset-@{index} {
+    margin-right: percentage((@index / @grid-columns));
+    margin-left: 0;
+  }
+}
+
+// Basic looping in LESS
+.loop-rtl-grid-columns(@index, @class, @type) when (@index >= 0) {
+  .calc-rtl-grid-column(@index, @class, @type);
+  // next iteration
+  .loop-rtl-grid-columns((@index - 1), @class, @type);
+}
+
+// Create grid for specific class
+.make-rtl-grid(@class) {
+  .float-rtl-grid-columns(@class);
+  .loop-rtl-grid-columns(@grid-columns, @class, width);
+  .loop-rtl-grid-columns(@grid-columns, @class, pull);
+  .loop-rtl-grid-columns(@grid-columns, @class, push);
+  .loop-rtl-grid-columns(@grid-columns, @class, offset);
+}

frontend/less/espo-rtl/bootstrap-rtl/mixins/grid-rtl.less

@@ -0,0 +1,98 @@
+// RTL Grid system
+//
+// Generate semantic rtl grid columns with these mixins.
+
+// Generate the extra small columns
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+  float: right;
+}
+.make-xs-column-offset(@columns) {
+  margin-right: percentage((@columns / @grid-columns));
+  margin-left: 0;
+}
+.make-xs-column-push(@columns) {
+  right: percentage((@columns / @grid-columns));
+  left: auto;
+}
+.make-xs-column-pull(@columns) {
+  left: percentage((@columns / @grid-columns));
+  right: auto;
+}
+
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+
+  @media (min-width: @screen-sm-min) {
+    float: right;
+  }
+}
+.make-sm-column-offset(@columns) {
+  @media (min-width: @screen-sm-min) {
+    margin-right: percentage((@columns / @grid-columns));
+    margin-left: 0;
+  }
+}
+.make-sm-column-push(@columns) {
+  @media (min-width: @screen-sm-min) {
+    right: percentage((@columns / @grid-columns));
+    left: auto;
+  }
+}
+.make-sm-column-pull(@columns) {
+  @media (min-width: @screen-sm-min) {
+    left: percentage((@columns / @grid-columns));
+    right: auto;
+  }
+}
+
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
+
+  @media (min-width: @screen-md-min) {
+    float: right;
+  }
+}
+.make-md-column-offset(@columns) {
+  @media (min-width: @screen-md-min) {
+    margin-right: percentage((@columns / @grid-columns));
+    margin-left: 0;
+  }
+}
+.make-md-column-push(@columns) {
+  @media (min-width: @screen-md-min) {
+    right: percentage((@columns / @grid-columns));
+    left: auto;
+  }
+}
+.make-md-column-pull(@columns) {
+  @media (min-width: @screen-md-min) {
+    left: percentage((@columns / @grid-columns));
+    right: auto;
+  }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+
+  @media (min-width: @screen-lg-min) {
+    float: right;
+  }
+}
+.make-lg-column-offset(@columns) {
+  @media (min-width: @screen-lg-min) {
+    margin-right: percentage((@columns / @grid-columns));
+    margin-left: 0;
+  }
+}
+.make-lg-column-push(@columns) {
+  @media (min-width: @screen-lg-min) {
+    right: percentage((@columns / @grid-columns));
+    left: auto;
+  }
+}
+.make-lg-column-pull(@columns) {
+  @media (min-width: @screen-lg-min) {
+    left: percentage((@columns / @grid-columns));
+    right: auto;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/mixins/pagination-rtl.less

@@ -0,0 +1,18 @@
+// Pagination
+
+.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
+  > li {
+    &:first-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-left-radius(@border-radius);
+      }
+    }
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/modals-rtl.less

@@ -0,0 +1,27 @@
+//
+// RTL Modals
+// --------------------------------------------------
+
+// Footer (for actions)
+.modal-footer {
+  text-align: left; // right align buttons
+  
+ &.flip {
+    text-align: right;
+  }
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: auto;
+    margin-right: 5px;
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-right: -1px;
+    margin-left: auto;
+  }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-right: 0;
+    margin-left: auto;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/navbar-rtl.less

@@ -0,0 +1,135 @@
+//
+// RTL Navbars
+// --------------------------------------------------
+
+
+// Navbar heading
+//
+// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
+// styling of responsive aspects.
+
+.navbar-header {
+
+  @media (min-width: @grid-float-breakpoint) {
+    float: right;
+  }
+}
+
+
+// Navbar collapse (body)
+//
+// Group your navbar content into this for easy collapsing and expanding across
+// various device sizes. By default, this content is collapsed when <768px, but
+// will expand past that for a horizontal display.
+//
+// To start (on mobile devices) the navbar links, forms, and buttons are stacked
+// vertically and include a `max-height` to overflow in case you have too much
+// content for the user's viewport.
+
+.navbar-collapse {
+  padding-right: @navbar-padding-horizontal;
+  padding-left:  @navbar-padding-horizontal;
+}
+
+
+// Brand/project name
+
+.navbar-brand {
+  float: right;
+
+  @media (min-width: @grid-float-breakpoint) {
+    .navbar > .container &,
+    .navbar > .container-fluid & {
+      margin-right: -@navbar-padding-horizontal;
+      margin-left: auto;
+    }
+  }
+}
+
+
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
+
+.navbar-toggle {
+  float: left;
+  margin-left: @navbar-padding-horizontal;
+  margin-right: auto;
+}
+
+
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+
+.navbar-nav {
+
+  @media (max-width: @grid-float-breakpoint-max) {
+    // Dropdowns get custom display when collapsed
+    .open .dropdown-menu {
+      > li > a,
+      .dropdown-header {
+        padding: 5px 25px 5px 15px;
+      }
+    }
+  }
+
+  // Uncollapse the nav
+  @media (min-width: @grid-float-breakpoint) {
+    float: right;
+
+    > li {
+      float: right !important;
+    }
+
+  }
+}
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-left {
+    float: right !important;
+    &.flip {
+      float: right !important;
+    }
+  }
+
+  .navbar-right {
+    float: left !important;
+    &:last-child {
+      margin-left: -@navbar-padding-horizontal;
+      margin-right: auto;
+    }
+
+    &.flip {
+      float: left !important;
+      margin-left: -@navbar-padding-horizontal;
+      margin-right: auto;
+    }
+
+    .dropdown-menu {
+      left: 0;
+      right: auto;
+    }
+  }
+}
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+
+  @media (min-width: @grid-float-breakpoint) {
+    float: right;
+
+    // Outdent the form if last child to line up with content down the page
+    &.navbar-right:last-child {
+      margin-left: 0;
+      margin-right: auto;
+    }
+  }
+}
+
+

frontend/less/espo-rtl/bootstrap-rtl/navs-rtl.less

@@ -0,0 +1,97 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// Base class
+// --------------------------------------------------
+
+.nav {
+  padding-right: 0; // Override default ul/ol
+  padding-left: initial;
+}
+
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+.nav-tabs {
+  > li {
+    float: right;
+
+    // Actual tabs (as links)
+    > a {
+      margin-left: auto;
+      margin-right: -2px;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+  }
+}
+
+
+// Pills
+// -------------------------
+.nav-pills {
+  > li {
+    float: right;
+
+    // Links rendered as pills
+    > a {
+      border-radius: @nav-pills-border-radius;
+    }
+    + li {
+      margin-right: 2px;
+      margin-left: auto;
+    }
+  }
+}
+
+
+// Stacked pills
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      margin-right: 0; // no need for this gap between nav items
+      margin-left: auto;
+    }
+  }
+}
+
+
+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  
+  //To fix the overridden style by line 21
+  > li{
+    float: none;
+  }
+  
+  > .dropdown .dropdown-menu {
+    right: auto;
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+.nav-tabs-justified {
+
+  > li > a {
+    // Override margin from .nav-tabs
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    > li > a {
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/normalize-rtl.less

@@ -0,0 +1,15 @@
+//
+// 1. Set direction to RTL
+//
+
+html {
+  direction: rtl;
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  direction: rtl;
+}

frontend/less/espo-rtl/bootstrap-rtl/pager-rtl.less

@@ -0,0 +1,24 @@
+//
+// RTL Pager pagination
+// --------------------------------------------------
+
+
+.pager {
+  padding-right: 0;
+  padding-left: initial;
+
+  .next {
+    > a,
+    > span {
+      float: left;
+    }
+  }
+
+  .previous {
+    > a,
+    > span {
+      float: right;
+    }
+  }
+
+}

frontend/less/espo-rtl/bootstrap-rtl/pagination-rtl.less

@@ -0,0 +1,32 @@
+//
+// RTL Pagination (multiple pages)
+// --------------------------------------------------
+.pagination {
+  padding-right: 0;
+
+  > li {
+    > a,
+    > span {
+      float: right; // Collapse white-space
+      margin-right: -1px;
+      margin-left: 0px;
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        .border-right-radius(@border-radius-base);
+        .border-left-radius(0);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        margin-right: -1px;
+        .border-left-radius(@border-radius-base);
+        .border-right-radius(0);
+      }
+    }
+  }
+
+}

frontend/less/espo-rtl/bootstrap-rtl/panels-rtl.less

@@ -0,0 +1,70 @@
+//
+// RTL Panels
+// --------------------------------------------------
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  // Add border top radius for first one
+  > .table:first-child,
+  > .table-responsive:first-child > .table:first-child {
+
+    > thead:first-child,
+    > tbody:first-child {
+      > tr:first-child {
+        td:first-child,
+        th:first-child {
+          border-top-right-radius: (@panel-border-radius - 1);
+          border-top-left-radius: 0;
+        }
+        td:last-child,
+        th:last-child {
+          border-top-left-radius: (@panel-border-radius - 1);
+          border-top-right-radius: 0;
+        }
+      }
+    }
+  }
+  // Add border bottom radius for last one
+  > .table:last-child,
+  > .table-responsive:last-child > .table:last-child {
+
+    > tbody:last-child,
+    > tfoot:last-child {
+      > tr:last-child {
+        td:first-child,
+        th:first-child {
+          border-bottom-left-radius: (@panel-border-radius - 1);
+          border-top-right-radius: 0;
+        }
+        td:last-child,
+        th:last-child {
+          border-bottom-right-radius: (@panel-border-radius - 1);
+          border-top-left-radius: 0;
+        }
+      }
+    }
+  }
+  > .table-bordered,
+  > .table-responsive > .table-bordered {
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th:first-child,
+        > td:first-child {
+          border-right: 0;
+          border-left: none;
+        }
+        > th:last-child,
+        > td:last-child {
+          border-right: none;
+          border-left: 0;
+        }
+      }
+    }
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/popovers-rtl.less

@@ -0,0 +1,33 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+  left: auto;
+  text-align: right;
+}
+
+.popover {
+  &.top > .arrow {
+    right: 50%;
+    left: auto;
+    margin-right: -@popover-arrow-outer-width;
+    margin-left: auto;
+    &:after {
+      margin-right: -@popover-arrow-width;
+      margin-left: auto;
+    }
+  }
+  &.bottom > .arrow {
+    right: 50%;
+    left: auto;
+    margin-right: -@popover-arrow-outer-width;
+    margin-left: auto;
+    &:after {
+      margin-right: -@popover-arrow-width;
+      margin-left: auto;
+    }
+  }
+
+}

frontend/less/espo-rtl/bootstrap-rtl/progress-bars-rtl.less

@@ -0,0 +1,8 @@
+//
+// RTL Progress bars
+// --------------------------------------------------
+
+// Bar of progress
+.progress-bar {
+  float: right;
+}

frontend/less/espo-rtl/bootstrap-rtl/responsive-embed-rtl.less

@@ -0,0 +1,15 @@
+// RTL Embeds responsive
+//
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object {
+    right: 0;
+    left: auto;
+  }
+
+}

frontend/less/espo-rtl/bootstrap-rtl/tables-rtl.less

@@ -0,0 +1,47 @@
+//
+// Tables
+// --------------------------------------------------
+
+//TODO
+caption {
+  text-align: right;
+}
+
+th {
+  text-align: right;
+}
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+  @media screen and (max-width: @screen-xs-max) {
+
+    // Special overrides for the bordered tables
+    > .table-bordered {
+      border: 0;
+
+      // Nuke the appropriate borders so that the parent can handle them
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th:first-child,
+          > td:first-child {
+            border-right: 0;
+            border-left: initial;
+          }
+          > th:last-child,
+          > td:last-child {
+            border-left: 0;
+            border-right: initial;
+          }
+        }
+      }
+
+    }
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/type-rtl.less

@@ -0,0 +1,70 @@
+//
+// RTL Typography
+// --------------------------------------------------
+
+// Flipped Alignment
+.flip.text-left           { text-align: right; }
+.flip.text-right          { text-align: left; }
+
+// List options
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-right: 0;
+  padding-left: initial;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  margin-right: -5px;
+  margin-left: 0;
+}
+
+dd {
+  margin-right: 0; // Undo browser default
+  margin-left: initial;
+}
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+.dl-horizontal {
+
+  @media (min-width: @grid-float-breakpoint) {
+    dt {
+      float: right;
+      clear: right;
+      text-align: left;
+    }
+    dd {
+      margin-right: @component-offset-horizontal;
+      margin-left: 0;
+    }
+  }
+  @media (max-width: @grid-float-breakpoint) {
+    dt {
+      text-align: right;
+    }
+  }
+}
+
+// Blockquotes
+blockquote {
+  border-right: 5px solid @blockquote-border-color;
+  border-left: 0;
+}
+
+// Opposite alignment of blockquote
+//
+// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
+.blockquote-reverse,
+blockquote.pull-left {
+  padding-left: 15px;
+  padding-right: 0;
+  border-left: 5px solid @blockquote-border-color;
+  border-right: 0;
+  text-align: left;
+}

frontend/less/espo-rtl/bootstrap-rtl/utilities-rtl.less

@@ -0,0 +1,15 @@
+//
+// Temporary RTL style to fix bugs rapidly. 
+// They will move to some place more appropriate later.
+// --------------------------------------------------
+
+.pull-right {
+  &.flip {
+    float: left !important;
+  }
+}
+.pull-left {
+  &.flip {
+    float: right !important;
+  }
+}

frontend/less/espo-rtl/bootstrap-rtl/variables-rtl.less

@@ -0,0 +1,8 @@
+//
+// RTL Variables
+// --------------------------------------------------
+
+
+//== Media Objects on pull-left/pull-right + flip
+//REMOVED @media-pull-margin:         10px;  
+

frontend/less/espo-rtl/custom.less

@@ -0,0 +1,232 @@
+ .dropdown-menu {
+    left:  auto;
+    right: 0;
+}
+
+ .dropdown-menu-right {
+    left: 0;
+    right: auto;
+}
+
+.dropdown-menu-left {
+    left: auto;
+    right: 0;
+}
+
+.list .checkbox-dropdown {
+    margin-left: -10px;
+    margin-right: 0;
+}
+
+.list-buttons-container > div {
+    float: right;
+    margin-left: @panel-padding;
+    margin-right: 0;
+}
+
+.list-buttons-container > div.total-count {
+    margin-left: 0;
+    margin-right: 0;
+    float: left;
+    padding: 6px 0;
+}
+
+li .preset .pull-right {
+    float: left !important;
+}
+
+.preset > div {
+    padding-right: 0;
+    padding-left: 20px;
+}
+
+ul.dropdown-menu > li.checkbox {
+    padding: 3px 20px 3px 0;
+}
+
+.remove-filter.pull-right {
+    float: left !important;
+}
+
+.modal-body > div > .list > table td:first-child,
+.modal-body > div > .list > table th:first-child {
+     padding-right: @panel-padding;
+     padding-left: @table-cell-padding / 2;
+}
+.modal-body > div > .list > table td:last-child,
+.modal-body > div > .list > table th:last-child {
+    padding-left: @panel-padding;
+    padding-right: @table-cell-padding / 2;
+}
+
+#main > .list-container > .list {
+    margin-left: -@container-padding;
+    margin-right: -@container-padding;
+}
+#main > .list-container > .list > table td:first-child,
+#main > .list-container > .list > table th:first-child {
+     padding-right: @panel-padding;
+     padding-left: @table-cell-padding / 2;
+}
+#main > .list-container > .list > table td:last-child,
+#main > .list-container > .list > table th:last-child {
+    padding-left: @panel-padding;
+    padding-right: @table-cell-padding / 2;
+}
+
+.panel-body .no-side-margin {
+
+    > table td:first-child,
+    > table th:first-child {
+        padding-right: @panel-padding;
+        padding-left: @table-cell-padding / 2;
+    }
+
+    > table td:last-child,
+    > table th:last-child {
+        padding-left: @panel-padding;
+        padding-right: @table-cell-padding / 2;
+    }
+}
+
+.modal-footer .btn {
+    float: right;
+}
+
+.detail-button-container > .pull-right,
+.edit-button-container > .pull-right
+{
+    float: left !important;
+}
+
+.header-buttons.pull-right {
+    float: left !important;
+}
+
+.header-breadcrumbs > .pull-left {
+    float: right !important;
+}
+
+.calendar-container .range-switch-group .btn {
+    direction: ltr;
+}
+
+.calendar-container .button-container > div > div.pull-right {
+    float: left !important;
+}
+
+.dropdown-menu > li > a > span.pull-right {
+    float: left !important;
+}
+
+.panel > .panel-heading > .pull-right.btn-group {
+    float: left !important;
+    .dropdown-menu {
+        left: 0;
+        right: auto;
+    }
+}
+
+.panel-heading > .btn-group {
+    right: 0;
+    margin-left: -11px;
+}
+
+.panel > .panel-heading > .pull-right.dropdown {
+    float: left !important;
+    right: 0;
+    margin-left: -11px;
+    .dropdown-menu {
+        left: 0;
+        right: auto;
+    }
+}
+
+.panel .panel-heading > a.pull-right {
+    float: left !important;
+}
+
+.cell > a.pull-right {
+    float: left !important;
+}
+
+.inline-save-link {
+    margin-left: 8px;
+}
+
+.inline-cancel-link {
+    margin-left: 0;
+}
+
+td.cell[data-name="buttons"] > .btn-group {
+    margin-right: -17px;
+}
+
+.list-expanded > .list-group > .list-group-item > .pull-right {
+    float: left !important;
+}
+
+.list-expanded > .list-group > .list-group-item > .pull-right > .list-row-buttons {
+    float: left !important;
+    margin-right: 0;
+    margin-left: -16px;
+}
+
+.link-container > .list-group-item > .pull-right {
+    float: left !important;
+}
+
+.link-container > .list-group-item > .pull-left > .pull-right {
+    float: left !important;
+}
+
+.link-container > .list-group-item > .pull-left {
+    float: right !important;
+}
+
+.field .link-container .list-group-item.link-with-role a {
+    margin-right: 14px;
+}
+
+#global-search-panel {
+    left: 35px;
+    right: auto;
+}
+
+#notifications-panel {
+    left: 0;
+    right: auto;
+    .panel .panel-heading .pull-right {
+        float: left !important;
+    }
+}
+
+.page-header > div.row > div > .pull-right {
+    float: left !important;
+}
+
+.grid-stack {
+    direction: ltr;
+}
+
+.grid-stack > div {
+    direction: rtl;
+}
+
+.dynamic-logic-expression-container {
+    .pull-right {
+        float: left !important;
+    }
+}
+
+#fields-panel .cell .field {
+    .pull-right {
+        float: left !important;
+    }
+}
+
+.gray-box {
+    .pull-right {
+        float: left !important;
+    }
+}

frontend/less/espo-rtl/main.less

@@ -0,0 +1,15 @@
+@import "../espo/bootstrap/bootstrap.less";
+
+@import "bootstrap-rtl/bootstrap-rtl.less";
+
+@import "../espo/variables.less";
+@import "variables.less";
+
+@import "../espo/mixins.less";
+@import "../espo/misc.less";
+@import "../espo/layout.less";
+@import "../espo/custom.less";
+
+@import "custom.less";
+
+@import "bootstrap-rtl/utilities-rtl.less";

frontend/less/espo-vertical/custom.less

@@ -12,7 +12,7 @@
 }
 
 #global-search-input {
-    border: 1px solid @main-gray;
+    border: 1px solid @top-navbar-bg-color;
     font-size: 13px;
     width: 200px;
 }
@@ -38,4 +38,5 @@
     #global-search-panel {
         margin-top: -1px;
     }
-}
+}
+

frontend/less/espo-vertical/layout.less

@@ -199,7 +199,7 @@ body > #header .navbar-brand span.home-icon {
     left: 0;
     height: @tob-bar-height;
     width: 100%;
-    background-color: @main-gray;
+    background-color: @top-navbar-bg-color;
     margin-left: @navbar-width;
     padding-right: @navbar-width;
   }

frontend/less/espo-vertical/variables.less

@@ -1,3 +1,4 @@
 @navbar-width: 153px;
 @navbar-minimized-width: 40px;
-@tob-bar-height: 30px;
+@tob-bar-height: 30px;
+@top-navbar-bg-color: @main-gray;

frontend/less/espo/custom.less

@@ -98,6 +98,10 @@ label {
   min-height: 33px;
 }
 
+.page-header > .row {
+    min-height: 33px;
+}
+
 .modal-header {
     background-color: @default-heading-bg-color;
 }
@@ -446,7 +450,7 @@ select[multiple].input-sm {
 }
 
 .input-group-btn > select.form-control {
-    position: relative; 
+    position: relative;
     display: inline-block;
     width: auto;
     vertical-align: middle;
@@ -458,6 +462,10 @@ select[multiple].input-sm {
     margin-left: -1px;
 }
 
+.input-group > .middle-element {
+    margin-left: 0 !important;
+}
+
 .input-group .form-control:focus {
     z-index: 3;
 }
@@ -789,7 +797,7 @@ td.cell[data-name="buttons"] > .btn-group {
 }
 
 .panel {
-    border-width: 2px;
+    border-width: @panel-border-width;
 }
 
 .panel-heading > .btn-group > .btn {
@@ -839,13 +847,13 @@ td.cell[data-name="buttons"] > .btn-group {
 .stick-sub {
     position: fixed;
     top: 0;
-    margin: 44px 0 0;
+    margin: 44px 0 0 -@container-padding;
     z-index: 4;
 }
 
 .stick-sub.button-container {
     background-color: @body-bg;
-    padding: 3px @container-padding*2 3px 0;
+    padding: 3px @container-padding 0 @container-padding;
     width: 100%;
 }
 
@@ -959,7 +967,7 @@ body > footer > p a:visited {
 
 .record .middle > .panel:first-child {
     margin-top: 0;
-    border-top-width: 2px;
+    border-top-width: @panel-border-width;
 }
 
 .record .middle > .panel {
@@ -1255,7 +1263,9 @@ h5 {
     width: 270px;
 }
 
-
+.inline-cancel-link {
+    margin-left: 8px;
+}
 
 .dynamic-logic-expression-container {
     div.item-list {
@@ -1288,6 +1298,18 @@ h5 {
     }
 }
 
+.input-group-addon:not(:first-child):not(:last-child),
+.input-group-btn:not(:first-child):not(:last-child),
+.input-group .form-control:not(:first-child):not(:last-child) {
+    margin-left: -1px;
+}
+
+.input-group > .input-group-btn > .btn:hover,
+.input-group > .input-group-btn > .btn:focus,
+.input-group > .input-group-btn > .btn.active {
+    z-index: 3;
+}
+
 @media screen and (min-width: @screen-sm-min) {
     #global-search-panel {
         margin-top: 5px;

frontend/less/espo/variables.less

@@ -121,3 +121,5 @@
 @logo-height: 44px;
 
 @dashlet-unit-height: 155px;
+
+@panel-border-width: 2px;

frontend/less/hazyblue/custom.less

@@ -0,0 +1,103 @@
+.panel-heading {
+    border-bottom-width: 0;
+}
+
+.panel-default.note-editor .panel-heading .btn-default {
+    background-color: @btn-default-bg;
+    border-color: @btn-default-border;
+}
+
+.panel-default .panel-heading .btn-default {
+    background-color: @panel-default-heading-bg;
+    border-color: @panel-default-heading-bg;
+}
+
+.panel-title {
+    font-size: 15px;
+    line-height: 16px;
+}
+
+.modal-content {
+    background-color: @white-color;
+}
+
+.modal-content > .modal-body {
+    background-color: @body-bg;
+}
+
+.modal-body > .list-group {
+    background-color: @white-color;
+}
+
+.list-container > .list {
+    background-color: @white-color;
+}
+
+.modal-footer {
+    margin-top: 0;
+}
+
+.panel-heading > .btn-group {
+    top: -5px;
+    right: -10px;
+}
+
+table.table {
+    background-color: @white-color;
+}
+
+.record .middle > .panel:first-child {
+    border-top-width: 1px;
+}
+
+.record .middle > .panel {
+    border-top-width: 1px;
+}
+
+.dashlet-body .list-container > .list,
+.panel-body .list-container > .list {
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+}
+
+.list-container > .list,
+.panel,
+.dashlet-container {
+    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.13);
+    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.13);
+    box-shadow: 3px 3px 4px rgba(0,0,0,0.13);
+}
+
+@media (min-width: 768px) {
+    .modal-dialog > .modal-content {
+        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+        -moz-box-shadow: 0 5px 15px -3px rgba(0,0,0,0.5);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+    }
+}
+
+.panel.sticked {
+    border-top-width: 1px;
+}
+
+.list-container .list-buttons-container {
+    margin-bottom: 10px;
+}
+
+.modal-header {
+    background-color: @white-color;
+}
+
+.calendar-container > .calendar,
+.calendar-container > .timeline {
+    background-color: @white-color;
+}
+
+.field .list-group {
+    background-color: @white-color;
+}
+
+.field .grid-stack-item-content {
+    border: 1px solid @default-border-color;
+}

frontend/less/hazyblue/main.less

@@ -0,0 +1,17 @@
+@import "../espo/bootstrap/bootstrap.less";
+
+@import "../espo/variables.less";
+@import "../espo-vertical/variables.less";
+
+@import "../espo/mixins.less";
+
+@import "../espo/misc.less";
+@import "../espo-vertical/layout.less";
+@import "../espo/custom.less";
+@import "../espo-vertical/custom.less";
+
+@import "variables.less";
+
+@import "custom.less";
+
+@import "../espo/bootstrap/utilities.less";

frontend/less/hazyblue/variables.less

@@ -0,0 +1,17 @@
+@navbar-inverse-bg: #546E7A;
+@body-bg: #ececec;
+@top-navbar-bg-color: @body-bg;
+
+@white-color: #FFF;
+
+@panel-default-heading-bg: @white-color;
+
+@panel-border-width: 0;
+
+@panel-default-border: #dcdcdc;
+
+@btn-default-bg: #f7f7f7;
+@btn-default-border: #cccccc;
+
+@brand-success: #85b75f;
+@brand-primary: #537898;