mno-enterprise-frontend 2.0.0

data/app/assets/stylesheets/mno_enterprise/custom/header.less

@@ -0,0 +1,281 @@
+//--------------------------------------------------------------
+// Header used for public/external pages
+//--------------------------------------------------------------
+.public-page-header {
+  z-index: 1;
+  display: block;
+  // margin-bottom: 60px;
+  // position: absolute;
+  width: 100%;
+  background-color: @public-page-header-bg-color;
+  padding: @public-page-header-padding inherit;
+}
+  
+.public-page-header .brand-logo {
+  min-width: 170px;
+  min-height: 80px;
+  background-repeat: no-repeat;
+  background-image: asset-url(@public-page-header-logo-img);
+  background-size: 100%;
+  
+  @public-page-header-logo();
+}
+
+//--------------------------------------------------------------
+// Navbar
+//--------------------------------------------------------------
+.lock-login-link {
+  float: right;
+  margin: 12px 18px 0px 0px;
+  font-size: 27px;
+  color: white;
+}
+
+.navbar {
+  ul.nav.large-margin {
+    li {
+      margin-left: 50px;
+    }
+  }
+}
+
+.navbar.navbar-inverse ul.nav.navbar-nav.navbar-right a.my-apps {
+  width:100%;
+  .border-radius(5px);
+  background-color:@bg-inverse-color;
+  .font(14px,700,@brand-primary);
+
+  .label-myapps {
+    display:inline;
+  }
+
+  img {
+    margin-top:-3px;
+  }
+
+  &:hover {
+    color:@brand-primary;
+  }
+}
+
+.navbar-submenu-padding {
+  margin-top:163px;
+}
+.navbar {
+  &.navbar-dashboard {
+    top:0px;
+    .container-fluid {
+
+      .navbar-brand {
+        position:absolute;
+        margin-top:-44px;
+      }
+    }
+  }
+
+  .navbar-submenu {
+    background-color:@elem-cozy-color;
+    padding:15px;
+    margin-top:34px;
+    margin-bottom:-1px;
+    width:100%;
+    
+    ul {
+      margin:auto;
+      list-style-type: none;
+      li {
+        display:inline;
+        margin:0px 13px;
+        a {
+          color:white;
+          font-size:14px;
+          font-weight:300;
+          &.active {
+            color:@bg-inverse-color;
+            font-weight:300;
+          }
+        }
+      }
+    }
+  }
+
+
+  .navbar-nav {
+    &.navbar-right:last-child {
+      margin-right:10px;
+    }
+
+    li.active {
+      .navbar-arrow {
+        position:absolute;
+        margin-top:60px;
+        width: 0;
+        height: 0;
+        border-left: 27px solid transparent;
+        border-right: 27px solid transparent;
+        margin-left:50%-27px;
+        border-bottom: 20px solid @elem-cozy-color;
+      }
+    }
+  }
+
+  .container-fluid {
+    .navbar-brand {
+      margin-left:20px;
+      margin-top:-17px;
+    }
+  }
+
+  &.navbar-inverse {
+    font-weight:300;
+    letter-spacing:1px;
+
+    ul.nav.navbar-nav {
+      text-transform:uppercase;
+      a {
+        font-size:@normal;
+      }
+    }
+
+    ul.nav.navbar-nav.navbar-right {
+      button {
+        margin-top: ((@navbar-height - @line-height-computed) / 2) - 18;
+      }
+
+      a {
+        text-transform:none;
+      }
+    }
+  }
+}
+
+.padding-navbar {
+  margin-top:@navbar-height;
+}
+
+.navbar-background-fixed {
+  background-color: @navbar-inverse-bg;
+  position:fixed;
+  left:0;
+  right:0;
+  top:0;
+  height:@navbar-height;
+  z-index: @zindex-navbar-fixed - 1;
+}
+
+// Reduce the height of the navbar if on mobile device
+@media(min-width: 720px)
+{
+  .navbar-fixed-top {
+    top:(@navbar-desktop-height - @navbar-height) / 2;
+  }
+
+  .padding-navbar {
+    margin-top:@navbar-desktop-height;
+  }
+
+  .navbar-background-fixed {
+    height:@navbar-desktop-height;
+  }
+}
+
+@media(max-width: 720px)
+{
+  .navbar {
+
+    .container-fluid > .navbar-collapse {
+      margin-right: -30px;
+      margin-left: -30px;
+    }
+
+    &.navbar-inverse {
+      font-weight:300;
+      letter-spacing:1px;
+
+      ul.nav.navbar-nav {
+        padding:0px;
+        text-transform:uppercase;
+        a {
+          font-size:@normal;
+          text-align:center;
+          background-color:#111c21;
+          border-bottom: solid 1px @bg-inverse-color;
+          padding:22px 0px;
+        }
+
+        ul.dropdown-menu {
+          padding:0px;
+          a {
+            background-color:@bg-inverse-color;
+            border-bottom: solid 1px #111c21;
+            padding:13px 0px;
+          }
+        }
+      }
+
+    }
+
+    .navbar-nav {
+      margin:0px;
+      &.navbar-right {
+        button {
+          width:90%;
+        }
+      }
+      &.navbar-right:last-child {
+        margin-right:0px;
+      }
+    }
+
+    .menu-sign {
+      position:absolute;
+      right:25px;
+      font-weight:300;
+      &.menu-close {
+        font-size:50px;
+      }
+      &.menu-open {
+        font-size:65px;
+      }
+    }
+
+    li.dropdown.open {
+      .menu-sign.menu-close {
+        display:none;
+      }
+      .menu-sign.menu-open {
+        display:block;
+        margin-top:-6px;
+      }
+    }
+    li.dropdown {
+      .menu-sign.menu-open {
+        display:none;
+      }
+    }
+
+  }
+
+}
+
+.navbar-nav {
+  ul.dropdown-menu {
+    background-color: @bg-inverse-color;
+
+    li a {
+      .font(16px, 300, @bg-main-color);
+      background-color: @bg-inverse-color;
+    }
+
+    li a:hover, li a:focus {
+      .font(16px, 300, @decorator-inverse-color);
+    }
+  }
+}
+
+//-----------------------------------
+// Email lounge
+//-----------------------------------
+.navbar .navbar-nav .greetings  {
+  color: @elem-positive-color;
+}

data/app/assets/stylesheets/mno_enterprise/custom/impac-variables-override.less

@@ -0,0 +1,65 @@
+/*-----------------------------------------------------------------------*/
+/*                              IMPAC                                    */
+/*-----------------------------------------------------------------------*/
+
+// Dashboard
+//--------------------------------------
+@impac-dashboard-padding-top:                   33px;
+@impac-dashboard-margin-left:                   0px;
+
+// Title
+@impac-dashboard-title-label-color:             @text-strong-color;
+@impac-dashboard-title-color:                   @elem-cozy-color;
+@impac-dashboard-source-color:                  @impac-dashboard-title-label-color;
+@impac-dashboard-buttons-border-radius:         4px;
+
+// Widgets container
+@impac-placeholder-border:                      2px dashed @bg-inverse-color;
+@impac-padding-between-widgets:                 12px;
+@impac-minimum-widget-size:                     258px;
+
+// Widgets
+//--------------------------------------
+// Global
+@impac-widget-background-color:                 @bg-inverse-color;
+@impac-widget-text-color:                       @text-inverse-color;
+@impac-widget-text-color-light:                 lighten(@impac-widget-text-color,70%);
+@impac-widget-borders-color:                    lighten(@impac-widget-text-color-light,10%);
+@impac-widget-link-color:                       @decorator-inverse-color;
+
+// Title
+@impac-widget-title-text-color:                 darken(@impac-widget-text-color,5%);
+@impac-widget-title-bg:                         @impac-widget-background-color;
+@impac-widget-title-border:                     solid 1px @impac-widget-borders-color;
+@impac-widget-title-text-transform:             uppercase;
+@impac-widget-title-text-size:                  12px;
+@impac-widget-title-border-radius:              5px 5px 0px 0px;
+
+// Content
+@impac-widget-content-border-radius:            0px 0px 5px 5px;
+@impac-widget-lines-container-max-height:       210px;
+
+// Hist Mode Choser
+@impac-widget-hist-text-transform:              uppercase;
+@impac-widget-hist-text-size:                   12px;
+@impac-widget-hist-text-color:                  @impac-widget-text-color-light;
+
+// Price
+@impac-widget-price-color:                      @impac-widget-text-color;
+@impac-widget-price-positive-color:             @elem-positive-color;
+@impac-widget-price-negative-color:             @elem-cozy-color;
+@impac-widget-currency-color:                   @impac-widget-text-color-light;
+@impac-widget-legend-color:                     lighten(@impac-widget-text-color,30%);
+
+// Edit settings
+@impac-widget-sub-bg-color:                     darken(@impac-widget-background-color,10%);
+@impac-widget-sub-bg-color-light:               lighten(@impac-widget-sub-bg-color,5%);
+
+// Invoices list
+@impac-widget-line-hover-bg:                    lighten(@bg-inverse-color,10%);
+@impac-widget-line-hover-text:                  @text-inverse-color;
+
+// Accounts Comparison
+@impac-big-widget-size:                         581px;
+@impac-big-widget-bottom-padding:               30px;
+@impac-widget-accounts-comparison-lines-container-max-height: 250px;

data/app/assets/stylesheets/mno_enterprise/custom/modal.less

@@ -0,0 +1,183 @@
+.modal.inverse {
+  color: @text-inverse-color;
+
+  h1,h2,h3,h4,h5,h6 {
+    color: @text-inverse-color;
+  }
+
+  .modal-header {
+    border-bottom: transparent;
+  }
+
+
+  .alert {
+    border: solid 1px @decorator-inverse-color;
+    .border-radius(3px);
+  }
+
+  .alert .close {
+    margin-top: -13px;
+    margin-right: -8px;
+  }
+
+  .close {
+    text-align: center;
+    width: 19px;
+    height: 19px;
+    font-weight: 400;
+    background-color: darken(@bg-inverse-intense-color,5%);
+    color: lighten(@decorator-inverse-color,10%);
+    .border-radius(20px);
+    line-height: 19px;
+
+    opacity: .8;
+    text-shadow: none;
+
+    &:hover {
+      color: @brand-danger;
+      opacity: 1;
+    }
+  }
+
+  .modal-content {
+    background-color: @bg-inverse-color;
+  }
+
+  .modal-footer {
+    border-top: transparent;
+  }
+}
+
+.modal {
+  .modal-header {
+    border:0px;
+    img {
+      .border-radius(5px);
+      .square(65px);
+    }
+
+    .media-body {
+      h4.media-heading {
+        .font(20px,700,@bg-inverse-color);
+        text-align:left;
+      }
+      text-align:left;
+      .font(16px,300,@text-inverse-color);
+    }
+  }
+  .modal-body {
+    text-align:left;
+    ul {
+      list-style-type: none;
+      .font(16px,300,@text-inverse-color);
+      .fa {
+        color:@elem-positive-color;
+      }
+
+      .media-heading {
+        margin:0 0 5px 13px;
+      }
+    }
+
+    .screenshots {
+      .carousel-control {
+        opacity:1;
+        text-shadow:none;
+      }
+      .carousel {
+        width:474px;
+        margin:auto;
+      }
+      a {
+        .fa {
+          color:@bg-main-color;
+        }
+      }
+      
+      // Regular
+      .carousel .carousel-inner .item { height: 300px; }
+      .carousel .carousel-inner .item img { max-height: 300px; width: auto; }
+
+      // Mobiles
+      @media(max-width: @screen-xs-max) {
+        .carousel .carousel-inner .item { height: 200px; }
+        .carousel .carousel-inner .item img { max-height: 200px; width: 66%; margin-left: 0; }
+      }
+    }
+  }
+}
+
+.modal {
+  .dark {
+    background-color: @bg-inverse-color;
+    color:@bg-main-color;
+
+    .modal-header {
+      border:0px;
+      img {
+        .border-radius(5px);
+        .square(65px);
+      }
+
+      .media-body {
+        h4.media-heading {
+          .font(20px,700,@bg-inverse-color);
+          text-align:left;
+        }
+        text-align:left;
+        .font(16px,300,@text-inverse-color);
+      }
+    }
+    .modal-body {
+      text-align:left;
+      ul {
+        list-style-type: none;
+        .font(16px,300,@text-inverse-color);
+        .fa {
+          color:@elem-positive-color;
+        }
+
+        .media-heading {
+          margin:0 0 5px 13px;
+        }
+      }
+
+      .screenshots {
+        .carousel-control {
+          opacity:1;
+          text-shadow:none;
+        }
+        .carousel {
+          width:474px;
+          margin:auto;
+        }
+        a {
+          .fa {
+            color:@bg-main-color;
+          }
+        }
+        img {
+          margin:auto;
+          width: 350px;
+        }
+      }
+    }
+    .close {
+      text-align: center;
+      width: 21px;
+      height: 21px;
+      font-weight: 400;
+      background-color: darken(@bg-inverse-intense-color,5%);
+      color: @decorator-inverse-color;
+      .border-radius(8px);
+      line-height: 19px;
+
+      opacity: .5;
+      text-shadow: none;
+
+      &:hover {
+        opacity: .8;
+      }
+    }
+  }
+}