mno-enterprise-frontend 2.0.0

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

@@ -0,0 +1,477 @@
+/*-----------------------------------------------------------------------*/
+/*                       Dashboard Section Title                         */
+/*-----------------------------------------------------------------------*/
+.myspace .section-title {
+  color: @dashboard-section-title-color;
+  text-align: @dashboard-section-title-alignment;
+}
+.myspace .section-title:after when (@dashboard-section-title-alignment = center) and (@dashboard-section-title-display-subline = true){
+  .fa;
+  display: block;
+  content: @fa-var-caret-up;
+  margin-top: 10px;
+  font-size: 24px;
+  border-bottom: solid 1px @dashboard-section-title-color;
+  line-height: 8px;
+  max-width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+/*-----------------------------------------------------------------------*/
+/*                     Dashboard specific form style                     */
+/*-----------------------------------------------------------------------*/
+.myspace form {
+  label {
+    font-size: 13px;
+    font-weight: 600;
+    margin: 10px 0px;
+  }
+
+  input {
+    border:0px;
+    box-shadow:none;
+    height:45px;
+  }
+
+  .input-group-addon {
+    border:0px;
+  }
+}
+
+
+/*-----------------------------------------------------------------------*/
+/*                  Dashboard Company Select Box (top right)             */
+/*-----------------------------------------------------------------------*/
+.myspace .company-select-box {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background-color: @dashboard-cpy-select-bg-color;
+  color: @dashboard-cpy-select-header-text-color;
+  font-size: @dashboard-cpy-select-header-text-size;
+  padding: @dashboard-cpy-select-padding;
+  .border-bottom-radius(@dashboard-cpy-select-border-radius);
+  z-index: 10;
+  
+  // Change company button
+  .btn.switch-company {
+    color: @dashboard-cpy-select-header-text-color;
+    background-color: @dashboard-cpy-select-switch-btn-bg-color;
+    margin-left: 15px;
+  }
+  .btn.switch-company i {
+    @dashboard-cpy-select-switch-btn-icon();
+  }
+  .btn.switch-company i.active {
+    @dashboard-cpy-select-switch-btn-icon-active();
+  }
+  
+  // Section always visible
+  .box-header {
+    text-align: right;
+  }
+  
+  // Section visible when change company is clicked
+  .box-content {
+    margin-top: 10px;
+    border-top: solid 1px @dashboard-cpy-select-link-color;
+    .border-bottom-radius(5px);
+  }
+  .box-content ul {
+    list-style: none;
+    padding-top: 15px;
+    max-height: 400px;
+    min-width: 250px;
+    overflow-y: auto;
+  }
+  .box-content ul li a {
+    color: @dashboard-cpy-select-link-color;
+    line-height: 25px;
+    display: block;
+    padding-left: 5px;
+
+    &:hover {
+      text-decoration: none;
+      color: @dashboard-cpy-select-link-hover-color;
+      background-color: @dashboard-cpy-select-link-hover-bg-color;
+    }
+  }
+  
+  // Circle next to company name
+  // Indicate which company is currently viewed on dashboard
+  .box-content ul li a i.fa {
+    width: 13px;
+    margin-right: 6px;
+    text-align: center;
+    color: @dashboard-cpy-select-link-color;
+  }
+
+  // Create new company
+  .box-content .create-new, .box-content .admin-link {
+    text-align: center;
+  }
+  .box-content .create-new a {
+    color: @dashboard-cpy-select-link-create-color;
+  }
+
+  // Admin platform link
+  .box-content .admin-link {
+    margin-top: 3px;
+
+    a {
+      color: @dashboard-cpy-select-link-admin-color;
+    }
+  }
+
+  // Play well with menu at the top in responsive mode
+  @media (max-width: @screen-sm-min) { top: 46px; }
+}
+
+/*-----------------------------------------------------------------------*/
+/*                         Impersonate top bar                           */
+/*-----------------------------------------------------------------------*/
+#impersonate-bar {
+  border-bottom: 2px solid #A0A0A0;
+  padding: 5px 0 5px 95px;
+
+  @media (max-width: @screen-xs-max) {
+    padding: 46px 0 5px 0;
+  }
+
+  button {
+    margin-top: 3px;
+  }
+}
+
+/*-----------------------------------------------------------------------*/
+/*                         Dashboard Left Navbar                         */
+/*-----------------------------------------------------------------------*/
+.myspace .menu {
+
+  a:hover { text-decoration: none; }
+
+  // Dashboard Button > Active State
+  .dashboard-button.active, .dashboard-button.active:hover {
+    color: @dashboard-side-menu-link-active-color;
+    background-color: @dashboard-side-menu-link-active-bg-color;
+  }
+
+  // Dashboard Button Content > Active State
+  .dashboard-button.active .content, .dashboard-button.active:hover .content {
+    color: @dashboard-side-menu-link-active-color;
+    background-color: @dashboard-side-menu-link-active-bg-color;
+  }
+
+  // Dashboard Button Content > Normal State
+  .dashboard-button, 
+  .dashboard-button .content {
+    color: @dashboard-side-menu-link-color;
+    background-color: @dashboard-side-menu-link-bg-color;
+  }
+
+  // Dashboard Button Content > Normal State Hover
+  .dashboard-button:hover, .dashboard-button:hover .content {
+    color: @dashboard-side-menu-link-hover-color;
+    background-color: @dashboard-side-menu-link-hover-bg-color;
+  }
+  
+  // Vertical menu
+  &.vertical {
+    z-index:100;
+    position:fixed;
+    left:0px;
+    top:0px;
+    padding: @dashboard-side-menu-padding;
+    width:80px;
+    min-height:100%;
+    height:99%;
+
+    // Dashboard Button > Normal State
+    .dashboard-button {
+      .border-radius(5px);
+      width: 51px;
+      height: 51px;
+      padding-top: 7px;
+      padding-left: 9px;
+    }
+    
+    &:hover .dashboard-button {
+      width: 250px;
+    }
+    
+    // Dashboard Button Content > Normal State
+    .dashboard-button .content {
+      display: none;
+    }
+    &:hover .dashboard-button .content {
+      display: block;
+      white-space: nowrap;
+      position: absolute;
+      margin: 8px 0px 0px 55px;
+      font-size: 15px;
+    }
+
+    // Side menu brand logo
+    .brand-logo {
+      height: 90px;
+      background-repeat: no-repeat;
+      background-image: asset-url(@dashboard-side-menu-brand-logo-img);
+      background-size: 100%;
+      @dashboard-side-menu-brand-logo();
+    }
+    .brand-logo.expanded {
+      @dashboard-side-menu-brand-logo-expanded();
+    }
+  }
+
+  // Horizontal menu
+  &.horizontal {
+    @dashboard-side-menu-horizontal();
+    z-index:100;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    // Side menu brand logo
+    .brand-logo {
+      height: 70px;
+      background-repeat: no-repeat;
+      background-image: asset-url(@dashboard-side-menu-brand-logo-img);
+      background-size: 100%;
+      @dashboard-side-menu-brand-logo();
+    }
+    .brand-logo.expanded {
+      @dashboard-side-menu-brand-logo-expanded();
+    }
+
+    // Dashboard Button
+    .dashboard-button {
+      text-align: center;
+      margin-left: 10px;
+      margin-right: 10px;
+      font-weight: bold;
+    }
+
+    // Dashboard Buttons > Links
+    .dashboard-button a {
+      padding: 10px;
+      display: block;
+      text-decoration: none;
+      min-width: 100px;
+    }
+  }
+  
+  overflow-x:hidden;
+  overflow-y:auto;
+
+  background-color: @dashboard-side-menu-bg-color;
+  
+  hr {
+    border-top:2px dashed darken(@dashboard-side-menu-bg-color,5%);
+    margin-right:11px;
+  }
+  
+  // Dashboard Button Icon > Normal State
+  // .dashboard-button .fa {
+  //   font-size: 31px;
+  //   margin-top: 4px;
+  //   color: @dashboard-side-menu-link-color;
+  // }
+  
+  // Dashboard Button Icon > Active State
+  // .dashboard-button.active .fa,
+  // &:hover .dashboard-button.active .fa {
+  //   color: @dashboard-side-menu-link-active-color;
+  // }
+  
+  
+  // Icon configuration for each dashboard button
+  .dashboard-button i.dhb-icon-dashboard { 
+    @dashboard-side-menu-btn-dashboard(); 
+  };
+  .dashboard-button:hover i.dhb-icon-dashboard,
+  .dashboard-button.active i.dhb-icon-dashboard { 
+    @dashboard-side-menu-btn-dashboard-active(); 
+  };
+  
+  .dashboard-button i.dhb-icon-impac { 
+    @dashboard-side-menu-btn-impac(); 
+  };
+  .dashboard-button.active i.dhb-icon-impac,
+  .dashboard-button:hover i.dhb-icon-impac { 
+    @dashboard-side-menu-btn-impac-active(); 
+  };
+  
+  .dashboard-button i.dhb-icon-account { 
+    @dashboard-side-menu-btn-account(); 
+  };
+  .dashboard-button:hover i.dhb-icon-account,
+  .dashboard-button.active i.dhb-icon-account { 
+    @dashboard-side-menu-btn-account-active(); 
+  };
+  
+  .dashboard-button i.dhb-icon-company { 
+    @dashboard-side-menu-btn-company(); 
+  };
+  .dashboard-button:hover i.dhb-icon-company,
+  .dashboard-button.active i.dhb-icon-company { 
+    @dashboard-side-menu-btn-company-active(); 
+  };
+  
+  .dashboard-button i.dhb-icon-marketplace { 
+    @dashboard-side-menu-btn-marketplace(); 
+  };
+  .dashboard-button:hover i.dhb-icon-marketplace,
+  .dashboard-button.active i.dhb-icon-marketplace { 
+    @dashboard-side-menu-btn-marketplace-active(); 
+  };
+  
+  .dashboard-button i.dhb-icon-logout { 
+    @dashboard-side-menu-btn-logout(); 
+  };
+  .dashboard-button:hover i.dhb-icon-logout,
+  .dashboard-button.active i.dhb-icon-logout { 
+    @dashboard-side-menu-btn-logout-active(); 
+  };
+}
+
+.myspace .app-dashboard {
+  min-height: 280px;
+  max-width: 225px;
+  margin-left: auto;
+  margin-right: auto;
+  .border-radius(5px);
+  background-color: @dashboard-apps-tile-bg-color;
+  text-align: center;
+  padding: 30px 0px;
+  padding-bottom: 0px;
+  margin-top: 15px;
+
+  .btn-change-plan {
+    margin-top:50px;
+  }
+
+  .title {
+    .font(14px,normal,@dashboard-apps-tile-text-color);
+    margin-top:10px;
+    margin-bottom:10px;
+  }
+
+  .app-line {
+    .font(12px,normal,@text-inverse-color);
+  }
+
+  img.app-logo {
+    .border-radius(5px);
+    .square(85px);
+    border: solid @dashboard-apps-tile-logo-border-size @dashboard-apps-tile-logo-border-color;
+  }
+
+  .connector-logo {
+    margin-top: 3px;
+    margin-bottom: 3px;
+    cursor: pointer;
+  }
+
+  .office365-connector-logo {
+    height: 32px;
+    padding: 2px;
+  }
+
+  .tutorial {
+    display:block;
+    margin-top: 7px;
+  }
+
+  // App Tile Settings (top right)
+  a.options {
+    line-height: 19px;
+    .square(20px);
+    .border-radius(20px);
+    color: @dashboard-apps-tile-settings-color;
+    background-color: @dashboard-apps-tile-settings-bg-color;
+    float:right;
+    margin: -25px 5px 0px 0px;
+  }
+  
+  a.options:hover {
+    color: @dashboard-apps-tile-settings-hover-color;
+    background-color: @dashboard-apps-tile-settings-hover-bg-color;
+  }
+  a.options i {
+    margin-top: 3px;
+  }
+
+  .app-custom-info {
+    position: relative;
+    top: -10px;
+    z-index: 999;
+  }
+}
+
+// Add application tile (tile with + button)
+.myspace .app-dashboard.add-app {
+  padding:15px 0px;
+  font-size:140px;
+  color: @dashboard-apps-tile-add-color;
+  background-color: @dashboard-apps-tile-add-bg-color;
+}
+.myspace .app-dashboard.add-app a {
+  color: @dashboard-bg-color;
+  
+  &:hover {
+    color: @brand-warning;
+  }
+}
+
+/*-----------------------------------------------------------------------*/
+/*                   Dashboard Elements (remaining)                      */
+/*-----------------------------------------------------------------------*/
+.myspace {
+  background-color: @dashboard-bg-color;
+  min-height:100%;
+  padding-top:30px;
+
+  .accordion .panel-group .panel .panel-body p {
+    font-weight:normal;
+  }
+
+  p {
+    font-weight:normal;
+  }
+
+  .star-wizard-button-wrapper {
+    float:right;
+    .star-button {
+      float:right;
+      margin:4px 198px 0px 0px;
+    }
+  }
+
+  .panel-group {
+    .panel {
+      border:0px;
+      box-shadow:none;
+      margin:25px 0px;
+      
+      .panel-heading {
+        background-color: white;
+      }
+    }
+  }
+  .editable-wrap {
+    white-space:normal;
+    margin:10px 0px;
+    button {
+      margin-top:7px;
+    }
+  }
+
+  @media(max-width: 844px) {
+    padding-top:40px;
+  }
+}