mno-enterprise-frontend 2.0.0

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

@@ -0,0 +1,30 @@
+.alert {
+  &.alert-error {
+    background-color:@brand-danger;
+    color:white;
+  }
+
+  &.alert-error {
+    ul {
+      font-weight:300;
+      li {
+        color:white;
+      }
+    }
+  }
+
+  .btn {
+    color: #abc4c6;
+    background-color: #17262d;
+  }
+
+  .btn:hover {
+    color: #abc4c6;
+    background-color: #20343e;
+  }
+
+  .btn:focus {
+    color: white;
+    background-color: #101b20;
+  }
+}

data/app/assets/stylesheets/mno_enterprise/custom/angular-animate.less

@@ -0,0 +1,42 @@
+// Premade angular animations for ng-show/ng-hide/ng-repeat etc..
+
+.fade-in-out {
+  opacity: 1;
+}
+
+.fade-in-out.ng-hide-add.ng-hide-add-active,
+.fade-in-out.ng-hide-remove.ng-hide-remove-active {
+  -webkit-transition: all linear 0.5s;
+  transition: all linear 0.5s;
+}
+
+.fade-in-out.ng-hide {
+  opacity: 0;
+}
+
+// .fade-in-out.ng-enter {
+//   transition: 0.6s linear all;
+//   opacity: 1;
+// }
+//
+// .fade-in-out.ng-leave {
+//   transition: 0.6s linear all;
+//   opacity: 0;
+// }
+
+.fade-in-out-repeat.ng-move,
+.fade-in-out-repeat.ng-enter,
+.fade-in-out-repeat.ng-leave {
+  -webkit-transition: all linear 0.5s;
+  transition: all linear 0.5s;
+}
+
+.fade-in-out-repeat.ng-leave.ng-leave-active,
+.fade-in-out-repeat.ng-enter {
+  opacity: 0;
+}
+
+.fade-in-out-repeat.ng-leave,
+.fade-in-out-repeat.ng-enter.ng-enter-active {
+  opacity: 1;
+}

data/app/assets/stylesheets/mno_enterprise/custom/angular-material.less

@@ -0,0 +1,56 @@
+// Material Design Extensions
+// TODO: color values are currently harcoded - need to align with theme
+
+//-------------------------------------------
+// Toolbar
+//-------------------------------------------
+
+// Neutral style
+md-toolbar.neutral {
+  background: #f2f2f2 !important;
+  color: #616161;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+md-toolbar.success {
+  background: @brand-success !important;
+  color: darken(@brand-success,40%);
+  border-bottom: 1px solid darken(@brand-success,20%);
+}
+
+
+//-------------------------------------------
+// Buttons
+//-------------------------------------------
+// Fix image size when inside a button
+.md-button.md-img {
+  padding: 0;
+}
+
+.md-button.md-img img {
+  width: 100%;
+  height: 100%;
+}
+
+// Check icon inside button - position top right
+.md-button .md-icon-check {
+  position: absolute;
+  top: 0px;
+  right: -2px;
+  color: @brand-success;
+  font-size: 22px;
+}
+
+//-------------------------------------------
+// md-item
+//-------------------------------------------
+// Create sublist style with left margin and smaller md-items
+.md-sublist {
+  margin-top: -10px;
+  margin-left: 20px;
+}
+
+.md-sublist > md-list-item,
+.md-sublist > md-list-item > .md-list-item-inner {
+  min-height: 30px;
+}

data/app/assets/stylesheets/mno_enterprise/custom/bootstrap-on-juice.less

@@ -0,0 +1,22 @@
+.col-sm-offset-1-5 {
+  margin-left:12.5%;
+}
+
+@media(max-width: 720px)
+{
+  .sm-align-center {
+    margin-left:auto;
+    margin-right:auto;
+  }
+
+  .col-sm-50pc {
+    width:50%;
+    float:left;
+  }
+
+}
+
+.container-modal {
+  width:100%;
+  padding:25px;
+}

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

@@ -0,0 +1,84 @@
+.btn-fluid-wrapper .btn {
+  width: 100%;
+}
+
+.btn {
+  &.float-right {
+    float:right;
+  }
+  &.btn-promo {
+    font-size:18px;
+    padding-left:30px;
+    padding-right:30px;
+  }
+
+  .subtitle {
+    font-size:@small;
+    font-weight:300;
+    width:100%;
+    display:block;
+    text-align:center;
+  }
+
+  &.arrow,
+  &.arrow-right {
+    background-image: image-url('icons/icon-arrow-right.png');
+    background-repeat: no-repeat;
+    background-position: 96% 50%;
+  }
+
+  &.arrow-left {
+    background-image: image-url('icons/icon-arrow-left.png');
+    background-repeat: no-repeat;
+    background-position: 4% 50%;
+  }
+
+  &.btn-dark {
+    .font(16px, 300, @bg-main-color);
+    background-color: @bg-inverse-color;
+
+    &:hover {
+      color: @elem-cozy-color;
+    }
+  }
+
+  &.btn-shaded {
+    background-color: @bg-inverse-color;
+    border: solid 1px @bg-inverse-intense-color;
+    color: @text-inverse-color;
+    font-weight: 400;
+
+    &:hover {
+      color: lighten(@text-inverse-color,5%);
+      background-color: lighten(@bg-inverse-color,5%);
+    }
+  }
+
+  &.btn-grey {
+    background-color: @bg-main-color;
+    border: solid 1px @bg-main-color;
+    color: lighten(@bg-inverse-color,5%);
+    font-weight: 400;
+
+    &:hover {
+      color: @bg-inverse-color;
+      background-color: darken(@bg-main-color,5%);
+    }
+
+    &.btn-grey-bordered {
+      border: solid 1px darken(@bg-main-color,5%);
+    }
+  }
+
+  &.btn-whited {
+    background-color: lighten(#ccc,15%);
+    border: solid 1px #ccc;
+    color: #ccc;
+    font-weight: 400;
+
+    &:hover {
+      color: darken(#ccc,20%);
+      background-color: #ccc;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+.footer {
+  background-color: @bg-main-color;
+  padding: 60px 0px;
+
+  h2 {
+    color: @decorator-main-color;
+    font-size:14px;
+    font-weight:500;
+  }
+
+  ul {
+    color:@text-inverse-color;
+    font-size:13px;
+    font-weight:300;
+    list-style-type: none;
+    padding:0px;
+
+    a {
+      .font(12px,300,@text-inverse-color);
+    }
+  }
+
+  .copyright {
+    color:@decorator-main-color;
+    text-align:center;
+    font-weight:300;
+    font-size:12px;
+    padding-top:25px;
+  }
+
+  .fa {
+    font-size: 25px;
+    color: @decorator-main-color;
+    &:hover {
+      color: darken(@decorator-main-color,30%);
+      text-decoration:none;
+    }
+  }
+
+  a.social-link:hover {
+    text-decoration:none;
+  }
+
+}

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

@@ -0,0 +1,191 @@
+input.fluroblue[type=radio] {
+  width   : 18px;
+  margin  : 0;
+  padding : 0;
+  opacity : 0;
+}
+
+input.fluroblue[type=radio] + label{
+  display      : inline-block;
+  margin-left  : -12px;
+  padding-left : 25px;
+  background   : image-url('icons/radio-fluroblue.png') no-repeat 0 -18px;
+  line-height  : 18px;
+}
+
+input.fluroblue[type=radio]:checked + label{
+  background-position : 0 1px;
+}
+
+form label {
+  color: @input-label-color;
+}
+
+.input-group-addon.select select {
+  background-color: @input-bg;
+}
+
+
+select {
+    text-indent: 1px;
+    text-overflow: '';
+}
+
+// Remove dropdown arrow (Chrome, Firefox and IE)
+select.unstyled {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+//----------------------------------------
+// Styling for phone: select + input
+//----------------------------------------
+form .phone {
+  select.form-control {
+    width:30%;
+    .border-right-radius(0px);
+  }
+
+  input.form-control[type='text'] {
+    margin-left:23%;
+    margin-top:-34px;
+    width:77%;
+    .border-left-radius(0px);
+  }
+}
+
+form select.form-control  {
+  height:44px;
+  -webkit-appearance: none;
+}
+
+form .select.fa {
+  margin: -28px 7% 0px 0px;
+  float: right;
+}
+
+//----------------------------------------
+// Styling for password checker
+//----------------------------------------
+form li.checked {
+  color: lighten(@decorator-inverse-color,30%);
+}
+
+form li.unchecked {
+  color: lighten(@text-strong-color,70%);
+}
+
+//----------------------------------------
+// Style for forms on inverse backgrounds
+//----------------------------------------
+form.inverse {
+  select {
+    background-color: @bg-inverse-color;
+    .font(16px, 300, @decorator-inverse-color);
+    border:solid 1px #111c21;
+    
+    .border-radius(5px);
+    height:44px;
+    -webkit-appearance: none;
+    padding-left:15px;
+    width:100%;
+    
+    // Placeholder
+    .placeholder(@decorator-inverse-color);
+  }
+
+  .select.fa {
+    .font(16px,300,@decorator-inverse-color);
+    margin: -28px 7% 0px 0px;
+    float: right;
+  }
+  
+  .form-control {
+    // Placeholder
+    .placeholder(@decorator-inverse-color);
+  }
+}
+
+//------------------------------------
+// Dark forms styles
+//------------------------------------
+
+form.dark {
+  input[type='text'], input[type='email'], textarea {
+    .border-radius(5px);
+    .font(16px, 300, @bg-main-color);
+    background-color: @bg-inverse-color;
+    border: solid 1px @bg-inverse-color;
+    line-height: 25px;
+    margin-bottom: 0px;
+    width: 100%;
+    min-height: 42px;
+    padding: 5px 5px 5px 15px;
+  }
+
+  *::-webkit-input-placeholder {
+      color: @bg-main-color;
+  }
+  *:-moz-placeholder {
+      /* FF 4-18 */
+      color: @bg-main-color;
+  }
+  *::-moz-placeholder {
+      /* FF 19+ */
+      color: @bg-main-color;
+  }
+  *:-ms-input-placeholder {
+      /* IE 10+ */
+      color: @bg-main-color;
+  }
+
+  label {
+    color: @bg-main-color;
+  }
+}
+
+.dark {
+  .bootstrap-select {
+    select {
+      .font(16px, 300, @bg-main-color);
+      background-color: @bg-inverse-color;
+    }
+
+    .dropdown-toggle {
+      height: 42px;
+    }
+
+    .dropdown-menu {
+      .font(16px, 300, @bg-main-color);
+      background-color: @bg-inverse-color;
+    }
+    .dropdown-menu > li > a {
+      .font(16px, 300, @bg-main-color);
+    }
+
+    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+      .font(16px, 300, @decorator-inverse-color);
+      background-color: @bg-inverse-color;
+    }
+  }
+}
+
+// Put a dropdown inside an input-group-addon
+.input-group-addon.select {
+  padding:0px;
+  select {
+    height:100%;
+    border:0px;
+  }
+}
+
+//------------------------------------
+// Invalid inputs (AngularJS)
+//------------------------------------
+input.ng-dirty.ng-invalid {
+  border-color: @brand-danger;
+}