mno-enterprise-frontend 2.0.0

data/app/assets/stylesheets/mno_enterprise/custom/utility/progress-bar.less

@@ -0,0 +1,55 @@
+.bootstrap2 {
+  .progress-bar {
+    background-color: #C1E88E;
+  }
+
+  // Additional Progress bars
+  // Maestrano (mno green)
+  .progress-mno,
+  .progress-mno-success,
+  .progress-mno-warning,
+  .progress-mno-none,
+  .progress-mno-danger{
+    margin: auto;
+    margin-top: 5px;
+    height: 12px;
+  }
+
+  // Bootstrap 3
+  .progress-mno .progress-bar,
+  .progress-mno-success .progress-bar,
+  .progress .progress-bar-mno {
+    #gradient > .vertical(lighten(@elem-positive-color, 10%), darken(@elem-positive-color,20%));
+  }
+  .progress-mno.progress-striped .progress-bar,
+  .progress-mno-success.progress-striped .progress-bar,
+  .progress-striped .progress-bar-mno {
+    #gradient > .striped(lighten(@elem-positive-color, 10%));
+  }
+
+  .progress-mno-warning .progress-bar {
+    #gradient > .vertical(lighten(#fab451, 10%), darken(#fab451,20%));
+  }
+  .progress-mno-warning.progress-striped .progress-bar {
+    #gradient > .striped(lighten(#fab451, 10%));
+  }
+
+  .progress-mno-danger .progress-bar {
+    #gradient > .vertical(lighten(#df5426, 10%), darken(#df5426,20%));
+  }
+  .progress-mno-danger.progress-striped .progress-bar {
+    #gradient > .striped(lighten(#df5426, 10%));
+  }
+
+  .progress-mno-none .progress-bar {
+    #gradient > .vertical(lighten(#999999, 10%), darken(#999999,20%));
+  }
+  .progress-mno-none.progress-striped .progress-bar {
+    #gradient > .striped(lighten(#999999, 10%));
+  }
+
+  .progress-indicator {
+    font-size: 10px;
+    margin-right: 3px;
+  }
+}

data/app/assets/stylesheets/mno_enterprise/custom/utility/step.less

@@ -0,0 +1,101 @@
+.step {
+  margin-left:-1px;
+  display:inline-block;
+  width:33%;
+  .font(16px,500,@text-inverse-color);
+  background-color:@bg-inverse-color;
+  padding:7px 0px 7px 26px;
+
+  .wrapper {
+    float:right;
+    margin:-8px 17px 0px 0px;
+    img {
+      position:absolute;
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    margin:18px 0px 0px -5px;
+  }
+
+  .arrow:before, .arrow:after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-right: 0;
+  }
+
+  .arrow:before {
+    bottom: -19px;
+    left: 22px;
+    border-left-color: #131f25;
+    border-width: 19px;
+  }
+
+  .arrow:after {
+    bottom: -17px;
+    left: 22px;
+    border-left-color: @bg-inverse-color;
+    border-width: 17px;
+  }
+
+  &.active {
+    background-color:@brand-primary;
+    color:white;
+    .wrapper {
+      margin:-7px 17px 0px 0px;
+    }
+
+    .arrow:before {
+      bottom: -18px;
+      border-width: 18px;
+      border-left-color: @brand-primary;
+    }
+
+    .arrow:after {
+      border-left-color: @brand-primary;
+      bottom: -16px;
+      border-width: 16px;
+    }
+  }
+
+  &.left {
+    .border-left-radius(5px);
+  }
+
+  &.right {
+    .border-right-radius(5px);
+    margin-left:-2px;
+  }
+
+  &.light-color {
+    background-color:@decorator-inverse-color;
+    border: solid 1px @decorator-inverse-color;
+    
+    .arrow:before {
+      border-left-color: #7F9496;
+    }
+
+    .arrow:after {
+      border-left-color: @decorator-inverse-color;
+    }
+    
+    &.active {
+      background-color:@brand-primary;
+      border: solid 1px @brand-primary;
+      
+      .arrow:before {
+        border-left-color: @brand-primary;
+      }
+
+      .arrow:after {
+        border-left-color: @brand-primary;
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/mno_enterprise/custom/utility/tabset.less

@@ -0,0 +1,87 @@
+// Cozy tabset 
+// Large nav buttons separated from body
+.tabset.tabset-cozy {
+  ul.nav.nav-tabs {
+    background-color: transparent;
+  }
+
+  ul.nav.nav-tabs > li {
+    margin-right: 5px;
+    padding-bottom: 5px;
+    background-color: transparent;
+    border-bottom: solid 5px transparent;
+    padding: 0px;
+  }
+
+  ul.nav.nav-tabs > li.active {
+    border-bottom: solid 5px white;
+  }
+  
+  ul.nav.nav-tabs > li > a:hover {
+    background-color: @elem-cozy-color;
+    color: white;
+  }
+
+  ul.nav.nav-tabs > li.active > a,
+  ul.nav.nav-tabs > li.active > a:hover,
+  ul.nav.nav-tabs > li.active > a:focus {
+    padding-bottom: 20px;
+    background-color: white;
+    color: #878787;
+  }
+
+  ul.nav.nav-tabs > li > a {
+    padding: 20px 40px;
+    border: none;
+    background-color: white;
+  }
+
+  .tab-content {
+    border-top: solid 2px white;
+    padding-top: 20px;
+  }
+
+  .tab-content .tab-pane {
+    background-color: transparent;
+  }
+
+  @media(max-width: 720px) {
+    ul.nav.nav-tabs > li {
+      width:100%;
+
+      &.active {
+        border-bottom: solid 5px transparent;
+        a {
+          background-color:@brand-primary;
+          color:white;
+        }
+      }
+    }
+  }
+}
+
+// Cozy style on dark background
+.tabset.tabset-cozy.tabset-inverse {
+  ul.nav.nav-tabs > li.active {
+    border-bottom: solid 5px @elem-cozy-color;
+  }
+  
+  //ul.nav.nav-tabs > li.active,
+  ul.nav.nav-tabs > li > a:hover {
+    background-color: lighten(@elem-cozy-color,28%);
+    color: darken(@elem-cozy-color,10%);;
+  }
+  
+  ul.nav.nav-tabs > li.active > a,
+  ul.nav.nav-tabs > li.active > a:hover,
+  ul.nav.nav-tabs > li.active > a:focus {
+    padding-bottom: 20px;
+    background-color: @elem-cozy-color;
+    color: white;
+  }
+  
+  .tab-content {
+    border-top: solid 2px @elem-cozy-color;
+  }
+}
+  

data/app/assets/stylesheets/mno_enterprise/custom/utility/testimonial.less

@@ -0,0 +1,118 @@
+.testimonial {
+  font-size: 25px;
+  font-weight:300;
+  color:@bg-inverse-color;
+  padding:20px;
+  min-height: 115px;
+
+  &.promo-dark {
+    color:white;
+    .border-radius(10px);
+    .rgba(@bg-inverse-color,0.7);
+  }
+
+  .author {
+    font-style:italic;
+    font-size:16px;
+  }
+
+  .body {
+    background-color:@bg-main-color;
+    .border-radius(5px);
+    padding:20px;
+    color:@text-strong-color;
+    font-weight:300;
+    font-size:16px;
+    font-style:italic;
+
+
+    .arrow {
+      .rotate(45deg);
+      width: 0;
+      height: 0;
+      border-top: 18px solid transparent;
+      border-bottom: 18px solid transparent;
+      border-right:18px solid @decorator-main-color;
+      position:absolute;
+      right:48px;
+      margin-top:8px;
+    }
+  }
+
+  .from {
+    margin:7px 0px 0px 30px;
+    .name {
+      display:inline;
+      font-size:14px;
+      font-weight:700;
+      color:@text-inverse-color;
+    }
+
+    .company {
+      display:inline;
+      font-size:14px;
+      font-weight:300;
+      color:@decorator-inverse-color;
+    }
+
+    .avatar {
+      img {
+        float:right;
+        margin:33px 9px 0px 0px;
+      }
+    }
+  }
+}
+
+.ribbon-testimonial {
+  .body {
+    background-color:@bg-main-color;
+    .border-radius(5px);
+    padding:20px;
+    color:@text-strong-color;
+    font-weight:300;
+    font-size:16px;
+    font-style:italic;
+
+
+    .arrow {
+      .rotate(45deg);
+      width: 0;
+      height: 0;
+      border-top: 18px solid transparent;
+      border-bottom: 18px solid transparent;
+      border-right:18px solid @decorator-main-color;
+      position:absolute;
+      right:28px;
+      margin-top:8px;
+    }
+  }
+
+  .from {
+    margin:7px 0px 0px 30px;
+    .name {
+      display:inline;
+      font-size:14px;
+      font-weight:700;
+      color:@text-inverse-color;
+    }
+
+    .company {
+      display:inline;
+      font-size:14px;
+      font-weight:300;
+      color:@decorator-inverse-color;
+    }
+
+  }
+}
+
+.ribbon-testimonial.ribbon-white {
+  .body {
+    background-color: white;
+  }
+
+  .arrow {
+    border-right:18px solid #ccc;
+  }
+}

data/app/assets/stylesheets/mno_enterprise/custom/utility/text.less

@@ -0,0 +1,23 @@
+.center {
+  text-align:center;
+}
+
+.text-align-left {
+  text-align:left;
+}
+
+.text-align-center {
+  text-align:center;
+}
+
+.text-color-fluroblue {
+  color:@brand-primary;
+}
+
+.text-color-purple {
+  color:@elem-cozy-color;
+}
+
+.text-color-darkblue {
+  color:@bg-inverse-color;
+}

data/app/assets/stylesheets/mno_enterprise/custom/views/apps.less

@@ -0,0 +1,243 @@
+.apps-index {
+  .selected-app {
+    color:@elem-positive-color;
+    font-size:16px;
+    position:absolute;
+    left:50%;
+    margin:-10px 0px 0px 28px;
+    img {
+      border:solid 1px white;
+    }
+  }
+
+  .remark {
+    .font(20px,300,white);
+    text-align:center;
+    img.check {
+      background-color:black;
+      padding:6px 4px;
+      margin:0px 5px;
+    }
+  }
+
+  .banners.promo.bundle h3 {
+    .font(20px,500,@bg-inverse-color);
+    text-align:left;
+  }
+
+  .banners.promo.dark.header  {
+
+    h2,h3 {
+    text-align:left;
+    }
+
+    img.app-logo {
+      margin:8px 15px 0px 0px;
+      .border-radius(5px);
+    }
+
+  }
+
+  .price-presenter .body {
+    background-color:@bg-inverse-color;
+    .price,.title {
+      color:white;
+    }
+  }
+
+  .app-bundle-custom {
+    .close-app {
+      background-color:@text-inverse-color;
+      border:solid 1px @bg-main-color;
+      a, a.fluroblue {
+        color:@bg-main-color;
+      }
+    }
+    .app-description .title {
+      color:@text-inverse-color;
+    }
+  }
+
+  .app-presentation {
+    .title {
+      .font(20px,700,@bg-inverse-color);
+    }
+
+    .tagline {
+      .font(16px,300,@text-inverse-color);
+    }
+
+    .media-heading {
+      .font(12px,300,@decorator-inverse-color);
+    }
+
+    img.app-logo {
+      width:75px;
+      height:75px;
+      .border-radius(5px);
+    }
+
+    .app-name {
+      .font(14px,700,@text-inverse-color);
+    }
+
+  }
+}
+
+.apps-show {
+
+  .app-feature {
+    .font(12px,500,@decorator-inverse-color);
+    margin-left:40px;
+    display:inline-block;
+    img {
+      margin-right:5px;
+    }
+  }
+  
+  .trademark {
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: -30px;
+    margin-top: 20px;
+    text-align: center;
+  }
+
+  .screenshots {
+    h3 {
+      font-weight:700;
+      font-size:20px;
+      color:@bg-inverse-color;
+      margin-bottom: 50px;
+    }
+    
+    // Regular
+    .carousel .carousel-inner .item { height: 400px; }
+    .carousel .carousel-inner .item img { max-height: 400px; width: auto; }
+    
+    // Tablets
+    @media(max-width: @screen-sm-max) {
+      .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: auto; }
+    }
+  }
+
+  .banners.promo.about {
+    h3 {
+      font-weight:700;
+      text-align:left;
+    }
+
+    p {
+      font-size: 16px;
+      color:@text-inverse-color;
+    }
+
+    .usage {
+      font-size:20px;
+      color:@text-inverse-color;
+      font-weight:300;
+    }
+
+    .number {
+      font-size:45px;
+      color:@elem-positive-color;
+      font-weight:900;
+    }
+
+    .people {
+      font-size:20px;
+      color:@text-inverse-color;
+      font-weight:300;
+    }
+  }
+
+  ul.key_benefits {
+    list-style-type: none;
+    padding:0px;
+    .fa {
+      color:@elem-positive-color;
+    }
+
+    .title {
+      color:white;
+      font-size:16px;
+      font-weight:300;
+      margin-left:10px;
+    }
+  }
+
+  .notice {
+    .border-radius(5px);
+    padding:8px 15px;
+    color:white;
+    background-color: #131f25;
+    font-weight:300;
+    width:206px;
+  }
+
+  .banners.promo.dark.header  {
+
+    h2,h3 {
+    text-align:left;
+    }
+
+    img.app-logo {
+      margin:8px 15px 0px 0px;
+      .border-radius(5px);
+    }
+
+  }
+
+  //===============================
+  // Pricing Section
+  //===============================
+  .pricing-section {
+
+    .btn-shaded {
+      background-color: @bg-inverse-intense-color;
+      min-height: 42px;
+    }
+
+    .pricing-table-wrapper .pricing-table {
+      font-size: 16px;
+      color: @decorator-inverse-color;
+      background-color: @bg-inverse-intense-color;
+
+      .cell {
+        padding: 20px 60px;
+      }
+      @media(max-width: @screen-sm) { .cell { text-align: center; } }
+      
+      .middle-cell {
+        padding: 20px;
+      }
+      
+      .pricing-name {
+        color: @elem-cozy-color;
+        font-size: 22px;
+      }
+
+      .pricing-price {
+        color: white;
+        font-size: 18px;
+      }
+
+      .pricing-price .pricing-price-factors {
+        color: @decorator-inverse-color;
+        font-size: 70%;
+      }
+
+      td.pricing-description {
+
+      }
+    }
+
+  }
+}