WIP: convert container and component editor css to less - remove suit…

server/zanata-frontend/src/frontend/.storybook-editor/storybook.css

@@ -5,4 +5,4 @@
  *
  * The path is relative to the top level of this project.
  */
-@import '../app/editor/app.css';
+@import '../app/editor/app.less';

server/zanata-frontend/src/frontend/.stylelintrc

@@ -32,17 +32,12 @@
     "color-hex-length": "short",
     "font-family-name-quotes": "always-where-recommended",
     "function-max-empty-lines": 0,
-    "string-quotes": "double",
     "unit-case": "lower",
     "value-list-comma-newline-before": "never-multi-line",
-    "value-list-comma-newline-after": "never-multi-line",
     "value-list-max-empty-lines": 0,
     "property-case": "lower",
     "declaration-bang-space-after": "never",
-    "declaration-bang-space-before": "always",
-    "declaration-empty-line-before": "never",
     "declaration-block-semicolon-newline-before": "never-multi-line",
-    "block-closing-brace-empty-line-before": "never",
     "selector-type-case": "lower",
     "selector-pseudo-class-case": "lower",
     "selector-pseudo-element-case": "lower",

server/zanata-frontend/src/frontend/app/editor/app.css → server/zanata-frontend/src/frontend/app/editor/app.less

@@ -3,6 +3,9 @@
  * Utils
  */
 
+@import '../styles/variables.less';
+
+
 @import './css/utils-layout/index.css';
 @import './css/utils-background/index.css';
 @import './css/utils-display/index.css';
@@ -17,7 +20,6 @@
  * Components
  */
 
-@import 'suitcss-components-grid';
 @import './css/base/index.css';
 @import './components/SplitDropdown/index.css';
 @import './components/Button/index.css';
@@ -42,7 +44,7 @@
  * Views
  */
 
-@import './containers/Root/index.css';
+@import './containers/Root/index.less';
 @import './containers/SuggestionDetailsModal/index.css';
 @import './containers/Sidebar/index.css';
 

server/zanata-frontend/src/frontend/app/editor/containers/Root/index.css → server/zanata-frontend/src/frontend/app/editor/containers/Root/index.less

@@ -1,17 +1,15 @@
 /** @define Editor; use strict */
-
 :root {
-  --Editor-rhythm: 1.5rem;
   --Editor-transition-ease: cubic-bezier(.175, .885, .320, 1.275);
-  --Editor-color-status-bg: color(#416988 tint(82%));
+  --Editor-color-status-bg: #416988;
   --Editor-color-translation-bg: #ECEFF0;
   --Editor-loader-z-index: 900;
   --Editor-panel-z-index: 200;
   --Editor-suggestions-header-z-index: 301;
   --Editor-suggestionsSearch-z-index: 300;
   --LogoLoader-transition-ease: cubic-bezier(.175, .885, .320, 1.275);
   --Editor-color-light: #90b8c5;
-  --Editor-color-dark: #20718a;
+  --Editor-color-dark: @color-dark;
   --Editor-color-bright: #1ba7d9;
   --Editor-badge-radius: 4px;
   --Editor-border-radius-small: 3px;
@@ -195,7 +193,7 @@ input, textarea, select, button  {
 }
 
 .Editor-header.is-minimised {
-  transform: translateY(calc(var(--Editor-rhythm) * -2));
+  transform: translateY(calc(1.5rem * -2));
 }
 
 .Editor-header.is-minimised .Editor-mainNav {
@@ -206,7 +204,7 @@ input, textarea, select, button  {
   left: 50%;
   position: absolute;
   top: 0;
-  transform: translate(-50%, calc(var(--Editor-rhythm) * .25));
+  transform: translate(-50%, calc(1.5rem * .25));
   z-index: var(--Editor-loader-z-index);
 }
 
@@ -247,7 +245,7 @@ li.DocName span.ellipsis {
 }
 
 .Editor-mainNav {
-  height: calc(var(--Editor-rhythm) * 2);
+  height: calc(1.5rem * 2);
 }
 
 .Editor-content {
@@ -257,13 +255,13 @@ li.DocName span.ellipsis {
   overflow-x: hidden;
   position: absolute;
   right: 0;
-  top: calc(var(--Editor-rhythm) * 3.75);
+  top: calc(1.5rem * 3.75);
   width: 100%;
   -webkit-overlow-scrolling: touch;
 }
 
 .Editor-content.is-maximised {
-  top: calc(var(--Editor-rhythm) * 1.75);
+  top: calc(1.5rem * 1.75);
 }
 
 /*So firefox keeps the background at 100% height when there are only a few translations*/
@@ -277,20 +275,20 @@ li.DocName span.ellipsis {
   background-repeat: no-repeat;
   background-size: var(--rhythm) 100%;
   min-height: 100%;
-  padding: calc(var(--Editor-rhythm) * 2) 0;
+  padding: calc(1.5rem * 2) 0;
 }
 
 .Editor-currentDoc {
-  max-width: calc(var(--Editor-rhythm) * 3.5);
+  max-width: calc(1.5rem * 3.5);
 }
 
 .Editor-currentLang {
-  max-width: calc(var(--Editor-rhythm) * 3.5);
+  max-width: calc(1.5rem * 3.5);
 }
 
 .Editor-suggestions {
   bottom: 0;
-  box-shadow: 0 -calc(var(--Editor-rhythm) *.125) var(--Header-rhythm) rgba(0, 0, 0, .1);
+  box-shadow: 0 -calc(1.5rem *.125) var(--Header-rhythm) rgba(0, 0, 0, .1);
   left: 0;
   overflow: hidden;
   right: 0;
@@ -315,11 +313,11 @@ li.DocName span.ellipsis {
   overflow-y: auto;
   position: absolute;
   right: 0;
-  top: calc(var(--Editor-rhythm) * 1.5);
+  top: calc(1.5rem * 1.5);
 }
 
 .Editor-suggestions.is-search-active .Editor-suggestionsBody {
-  top: calc(var(--Editor-rhythm) * 3);
+  top: calc(1.5rem * 3);
 }
 
 .Editor-suggestionsSearch {
@@ -999,7 +997,7 @@ label span.n1 {
 
 @media (--sm-viewport) {
   .Editor-currentProject {
-    max-width: calc(var(--Editor-rhythm) * 3.5);
+    max-width: calc(1.5rem * 3.5);
   }
 }
 

server/zanata-frontend/src/frontend/app/editor/index.js

@@ -21,7 +21,7 @@ import { fetchSettings } from './actions/settings-actions'
 // This is needed to load intl-polyfill
 __webpack_public_path__ = serverUrl || '/' // eslint-disable-line
 
-import './index.css'
+import './index.less'
 
 /**
  * Top level of the Zanata editor app.

server/zanata-frontend/src/frontend/app/editor/index.css → server/zanata-frontend/src/frontend/app/editor/index.less

@@ -4,4 +4,4 @@
  * relative to the directory where webpack is run, and we want just one place to
  * update the path if the app directory moves.
  */
-@import './app.css';
+@import 'app.less';

server/zanata-frontend/src/frontend/app/index.js

@@ -13,7 +13,7 @@ import rootReducer from './reducers'
 import Root from './containers/Root'
 
 import './styles/style.less'
-import './editor/index.css'
+import './editor/index.less'
 
 WebFont.load({
   google: {