refactor(ZNTA-2460): split legacy.less into frontend-nav and frontend…

…-jsf (#784) * refactor: split up legacy.less into 4 files * refactor(ZNTA-2460) break up legacy.css * refactor(ZNTA-2460) split legacy css into frontend-nav and frontend-jsf
zanata · Apr 24, 2018 · 82c7127 · 82c7127
1 parent b920cd3
commit 82c7127
Show file tree

Hide file tree

Showing 4 changed files with 427 additions and 422 deletions.
diff --git a/server/zanata-frontend/src/app/containers/App.js b/server/zanata-frontend/src/app/containers/App.js
@@ -37,7 +37,7 @@ class App extends Component {
     }
     return (
       <div className='bstrapReact'>
-        <div className='view H(100vh)! Fld(c) Fld(r)--sm'>
+        <div className='view'>
           <Icons />
           <Helmet
             title='Zanata'

diff --git a/server/zanata-frontend/src/app/styles/frontend-jsf.less b/server/zanata-frontend/src/app/styles/frontend-jsf.less
@@ -0,0 +1,373 @@
+@import "./variables.less";
+
+body.bodyStyle {
+  margin: 0;
+  padding: 0;
+}
+
+.htmlStyle {
+  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  background-color: #fff;
+  font-size: @font-size-base;
+}
+
+.new-zanata {
+  //body class
+  .bg--pop-highest {
+    border: none;
+  }
+  /* Fixes for Add translation modal buttons */
+  #uploadForm .rf-fu,
+  #uploadForm .rf-fu-btns-lft,
+  #uploadForm .rf-fu-btns-lft .rf-fu-btn-add,
+  #uploadForm .rf-fu-btns-lft .rf-fu-btn-add .rf-fu-btn-cnt-add,
+  #uploadForm .rf-fu-btns-lft .rf-fu-btn-add .rf-fu-btn-cnt-add input.rf-fu-inp {
+    width: 100%;
+  }
+  #uploadForm .rf-fu-btns-lft .rf-fu-btn-add .rf-fu-btn-cnt-add .rf-fu-inp-cntr {
+    position: relative;
+  }
+  /* remove + icon that cannot be clicked */
+  #uploadForm .rf-fu-btns-lft .rf-fu-btn-add .rf-fu-btn-cnt-add {
+    padding: 0 0 0 10px !important;
+    background-image: none;
+  }
+  .view {
+    width: 100%;
+    height: 100%;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  .list--panel .list__item__info, .list--stats .list__item__info {
+    width: 100%;
+  }
+  .list--stats .list__item__content {
+    width: inherit !important;
+  }
+  .panel__header__actions a.button--snug {
+    padding: 0.1rem;
+  }
+  .u-fullWidth {
+    width: 100%;
+  }
+  .i--left.i--document {
+    color: @color-muted;
+  }
+  .txt--meta {
+    color: @color-new-zanata-blue;
+  }
+  .u-blockPadding {
+    padding: @spacing-rh;
+  }
+  .u-textNeutral-top {
+    color: @color-neutral;
+    margin-top: 0.3rem;
+  }
+  .u-textNeutral, .txt--neutral {
+    color: @color-neutral;
+  }
+  .iconUser {
+    fill: #03A6D7;
+    margin-right: @spacing-re;
+    vertical-align: sub;
+  }
+  .iconProject {
+    margin-right: @spacing-re;
+  }
+  .iconLanguage {
+    vertical-align: sub;
+  }
+  .iconUser-muted {
+    color: @color-muted;
+    margin-right: @spacing-rh;
+  }
+  .iconsStatus {
+    margin-right: @spacing-rh;
+  }
+  .iconDelete {
+    vertical-align: sub;
+  }
+  .iconsHeader {
+    vertical-align: sub;
+  }
+  .iconUsers-muted, .iconTranslate-muted {
+    color: @color-muted;
+    margin-right: @spacing-rh;
+    margin-left: @spacing-rq;
+    vertical-align: sub;
+  }
+  .iconTranslate-neutral, .iconLanguage-neutral, .iconGlossary-neutral {
+    color: rgb(189, 212, 220);
+    margin-left: @spacing-rq;
+    margin-right: @spacing-re;
+  }
+  .lineClamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    max-height: 24px;
+    padding-left: @spacing-rh;
+  }
+  a.lineClamp {
+    display: -webkit-box;
+    *display: inline;
+    zoom: 1;
+  }
+  a.lineClamp:after {
+    content: ".";
+    font-size: 0;
+    visibility: hidden;
+    display: inline-block;
+    overflow: hidden;
+    height: 0;
+    width: 0;
+  }
+  .u-embedResponsive {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    height: 0;
+    padding: 0;
+  }
+  .u-block {
+    display: block;
+  }
+  .u-centerBlock {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .u-pullRight {
+    float: right !important;
+  }
+  .u-pullLeft {
+    float: left !important;
+  }
+  .hide {
+    display: none !important;
+  }
+  .show {
+    display: block !important;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .text-hide {
+    font: 0/0 a;
+    color: transparent;
+    border: 0;
+    background-color: transparent;
+    text-shadow: none;
+  }
+  .hidden {
+    display: none !important;
+  }
+  .affix {
+    position: fixed;
+  }
+  .panel__header a#new-version-link i.i.i--add:not(.i--large) {
+    color: @color-light;
+  } //fix for admin panel icons
+  .panel__header i.i--add:not(.i--large) {
+    color: inherit !important;
+  }
+  .button--small i.i--settings {
+    vertical-align: baseline;
+  }
+  i.i--left.i--lock, i.i--left.i--trash {
+    color: #fff;
+    vertical-align: baseline;
+  }
+  #versionPage.g {
+    width: 100%;
+  }
+  #fileUpload-toggleBtn i.i--add, #addMember-btn i.i--add {
+    color: @color-dark;
+  }
+  .page {
+    overflow: hidden;
+  }
+  .abs {
+    position: absolute;
+  }
+  body.templateStyle {
+    background-color: inherit;
+    font-size: inherit;
+    overflow: hidden !important;
+  }
+  .templateWrapper {
+    align-items: flex-start;
+    -webkit-align-items: flex-start;
+    /* Safari 7.0+ */
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-shrink: 0;
+    -webkit-flex-shrink: 0;
+    height: 100%;
+  }
+  .templateContainer {
+    align-items: flex-start;
+    -webkit-align-items: flex-start;
+    /* Safari 7.0+ */
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-shrink: 0;
+    -webkit-flex-shrink: 0;
+    height: 100%;
+    min-height: 100vh;
+    width: 100%;
+    position: fixed;
+  }
+  .templateContainer .rootMain {
+    min-width: fit-content;
+  }
+  .rootMain {
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 0 !important;
+    margin-bottom: @spacing-base-and-a-half;
+  }
+  .rootMain-content {
+    align-items: flex-start;
+    -webkit-align-items: flex-start;
+    /* Safari 7.0+ */
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    flex: 1;
+    -webkit-box-flex: 1;
+    -moz-flex: 1;
+    -webkit-flex: 1;
+    overflow: hidden;
+    height: auto;
+    min-height: max-content;
+  }
+  .h1, h1 {
+    font-weight: 500 !important;
+  }
+  .g {
+    align-self: center;
+    padding-bottom: 1rem;
+  }
+  .panel {
+    background-color: #fdfdfd;
+    border: 1px solid rgba(32, 113, 138, 0.15) !important;
+  }
+  .panel__header {
+    border-width: 1px !important;
+  }
+  .panel__results--bottom {
+    border-top: none !important;
+  }
+  #project-info h1 {
+    height: auto;
+  }
+  button.close {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    padding: 0.75rem;
+  }
+  .bg--pop-highest thead, &.bg--pop-highest tbody {
+    border: 1px solid rgba(32, 113, 138, 0.15);
+  }
+  .l-wrapper {
+    align-items: center;
+    -webkit-align-items: center;
+    /* Safari 7.0+ */
+    display: inherit;
+  }
+  .g--centered {
+    text-align: center;
+    width: 100%;
+  }
+  #versionAutocomplete .autocomplete__results {
+    position: relative;
+    margin-top: -1rem;
+  }
+  .button--group input[type=radio]:checked+.button--Off, .button--group input[type=radio]:checked+.button--Off:hover {
+    background-color: #546677 !important;
+    color: #f7f7f7 !important;
+  }
+  .button--group input[type=radio]:checked+.button--danger, .button--group input[type=radio]:checked+.button--danger:hover {
+    color: #f7f7f7 !important;
+  }
+  label {
+    color: #546677 !important;
+  }
+  .panel__results__type i.i.txt--neutral.i--users {
+    vertical-align: super;
+  }
+  .panel__results .txt--meta {
+    color: #BDD4DC;
+  }
+  #cacheStatisticsTable {
+    overflow: auto;
+    overflow-x: scroll;
+    width: 48rem;
+    font-size: 0.875rem;
+  }
+  .panel__results__type {
+    top: 0.2rem !important;
+  }
+  select {
+    width: inherit !important;
+  }
+  .revision__box {
+    display: flex !important;
+    padding: 10px !important;
+  }
+
+  //fixes to Versions/Projects page
+  #projectsWrapper ~ .g.u-fullWidth, li#projects.is-active {
+    padding-bottom: 12rem;
+  }
+  // fix to settings dropdowns on languages tab
+  li#settings ul.tabsContent {
+    padding-bottom: 10rem;
+  }
+}
+/* Media queries shared between jsf and bootstrap pages */
+
+// @screen-xs variable depreciated
+@media (max-width: 29.375rem) {
+  .templateContainer {
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    width: 100%;
+  }
+  main {
+    margin-left: 0;
+  }
+}
+@media (min-width: 29.376rem) {
+  main {
+    margin-left: 4.5rem;
+  }
+}
+