mno-enterprise-frontend 2.0.0

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

@@ -0,0 +1,729 @@
+// Use this instead of TWB3 img-responsive class
+// This class does not add a 'display: block' like TWB3 img-responsive class
+.img-autosize {
+  max-width: 100%;
+  height: auto;
+}
+
+//-----------------------------------------
+// Overflow scrollbars (webkit only)
+// Need to be applied to the element wrapping
+// the overflowable element
+//-----------------------------------------
+.scrollbar-lightgrey {
+  ::-webkit-scrollbar { width: 15px; }
+  ::-webkit-scrollbar-track {
+    background-color: lighten(@bg-main-color,6%);
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: darken(@bg-main-color,10%);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: darken(@bg-main-color,15%);
+  }
+}
+
+.scrollbar-hidden {
+  ::-webkit-scrollbar { display: none; width:0; }
+}
+
+//-----------------------------------------
+// Frames
+//-----------------------------------------
+
+.scrollable-frame {
+  max-height: 75px;
+  overflow: auto;
+}
+
+.youtube-video {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 0px;
+    height: 0;
+}
+
+.youtube-video iframe,
+.youtube-video object,
+.youtube-video embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+
+//-----------------------------------------
+// Text Colors
+//-----------------------------------------
+
+.text-blue {
+  color: #67bbe9;
+}
+
+.text-orange {
+  color: #fab451;
+}
+
+.text-green {
+  color: #dae173;
+}
+
+.text-purple {
+  color: @elem-cozy-color;
+}
+
+.text-bg-inverse {
+  color: @bg-inverse-color;
+}
+
+//-----------------------------------------
+// Text Size
+//-----------------------------------------
+
+.text-size-15 {
+  font-size: 15px;
+}
+
+//-----------------------------------------
+// Responsive tables (using TWB grid)
+// see templates/dashboard/organization/invoices.html
+// for an example
+//-----------------------------------------
+.table-cell .th-row,
+.table-cell .td-row {
+  margin-top: @table-cell-row-spacing;
+  margin-bottom: @table-cell-row-spacing;
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-top: @table-cell-row-padding;
+  padding-bottom: @table-cell-row-padding;
+  
+}
+
+.table-cell .th-row {
+  color: @table-cell-header-text-color;
+  background-color: @table-cell-header-bg-color;
+  font-size: @table-cell-header-text-size;
+  line-height: (@table-cell-header-text-size + @table-cell-row-padding)*2;
+  @table-cell-header-additional-rule();
+}
+
+.table-cell .td-row {
+  font-size: @table-cell-row-text-size;
+  line-height: (@table-cell-row-text-size + @table-cell-row-padding)*2;
+}
+
+.table-cell .td-row:nth-child(odd) { 
+  background-color: @table-cell-row-odd-bg-color;
+}
+
+.table-cell .td-row:nth-child(even) {
+  background-color: @table-cell-row-even-bg-color;
+}
+
+.table-cell .td-row .cell > .cell-label { 
+  font-weight: bold;
+}
+
+.table-cell .td-row .cell > a > i {
+  font-size: 20px;
+}
+@media (max-width: @screen-sm) {
+  .table-cell .td-row .cell > a { padding-left: 0px; }
+}
+
+// Inverse Style
+.table-cell.inverse .th-row {
+  background-color: @bg-inverse-intense-color;
+  color: white;
+}
+
+.table-cell.inverse .td-row:nth-child(odd) { 
+  background-color: lighten(@bg-inverse-color,3%);
+}
+
+.table-cell.inverse .td-row:nth-child(even) {
+  background-color: lighten(@bg-inverse-color,5%);
+}
+
+// Table style in a well
+.well .table-cell .th-row,
+.well .table-cell .td-row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
+//-----------------------------------------
+// Shadows
+//-----------------------------------------
+.double-shadow {
+  background: transparent image-url('double_shadow.png') 0px 0px no-repeat;
+  background-size: 639*0.88px 43*0.88px;
+  background-position: center;
+  height: 43*0.88px;
+}
+
+.double-shadow.xlarge {
+  background-size: 639*1.15px 43*1.15px;
+  background-position: center;
+  height: 43*1.15px;
+}
+
+.double-shadow.large {
+  background-size: 639*0.7px 43*0.7px;
+  background-position: center;
+  height: 43*0.7px;
+}
+
+.double-shadow.medium {
+  background-size: 639*0.4px 43*0.4px;
+  background-position: center;
+  height: 43*0.4px;
+}
+
+.double-shadow.small-medium {
+  background-size: 639*0.3px 43*0.3px;
+  background-position: center;
+  height: 43*0.3px;
+}
+
+.double-shadow.small {
+  background-size: 639*0.265px 43*0.265px;
+  background-position: center;
+  height: 43*0.265px;
+}
+
+//-----------------------------------------
+// Alignments
+//-----------------------------------------
+.align-left,
+th.align-left,
+td.align-left {
+	text-align: left;
+}
+
+.align-center,
+th.align-center,
+td.align-center {
+	text-align: center;
+}
+
+.align-right,
+th.align-right,
+td.align-right {
+	text-align: right;
+}
+
+.align-justified,
+th.align-justified,
+td.align-justified {
+  text-align:justify;
+  text-justify: inter-word;
+}
+
+//-----------------------------------------
+// Static widths
+//-----------------------------------------
+.width-0 { width: 0px; }
+
+//-----------------------------------------
+// Grid Extension
+//-----------------------------------------
+// Add offet type to TWB grid
+.offset05 {
+  margin-left: 65px;
+}
+.offset1-25 {
+  margin-left: 65*2.5px;
+}
+.offset1-5 {
+  margin-left: 65*3px;
+}
+.offset2-5 {
+  margin-left: 295px;
+}
+.offset3-5 {
+  margin-left: 380px;
+}
+
+.span2-5 {
+  width:235px;
+}
+
+//-----------------------------------------
+// Separators
+//-----------------------------------------
+hr.thin {
+  width: 400px;
+  margin: 20px auto 15px auto;
+  border: none;
+  height: 5px;
+  background: transparent image-url('separator_light.png') 0px 0px no-repeat;
+}
+
+//-----------------------------------------
+// Static heights
+//-----------------------------------------
+.height-50 { height: 50px; }
+.height-75 { height: 75px; }
+.height-100 { height: 100px; }
+.height-150 { height: 150px; }
+.height-200 { height: 200px; }
+.height-250 { height: 250px; }
+.height-300 { height: 300px; }
+.height-350 { height: 350px; }
+.height-400 { height: 400px; }
+.height-450 { height: 450px; }
+.height-500 { height: 500px; }
+.height-550 { height: 550px; }
+.height-600 { height: 600px; }
+.height-650 { height: 650px; }
+.height-700 { height: 700px; }
+.height-750 { height: 750px; }
+.height-800 { height: 800px; }
+.height-1000 { height: 1000px; }
+.height-1200 { height: 1200px; }
+.height-1250 { height: 1250px; }
+.height-1300 { height: 1300px; }
+.height-1400 { height: 1400px; }
+.height-1450 { height: 1450px; }
+.height-1500 { height: 1500px; }
+
+//-----------------------------------------
+// Spacers (deprecated, see Top-buffers instead)
+//-----------------------------------------
+@baseSpacerHeight: 20px;
+.spacer1 { clear: both; margin-bottom: @baseSpacerHeight; }
+.spacer2 { clear: both; margin-bottom: 2*@baseSpacerHeight; }
+.spacer3 { clear: both; margin-bottom: 3*@baseSpacerHeight; }
+.spacer4 { clear: both; margin-bottom: 4*@baseSpacerHeight; }
+.spacer5 { clear: both; margin-bottom: 5*@baseSpacerHeight; }
+.spacer6 { clear: both; margin-bottom: 6*@baseSpacerHeight; }
+.spacer7 { clear: both; margin-bottom: 7*@baseSpacerHeight; }
+.spacer8 { clear: both; margin-bottom: 8*@baseSpacerHeight; }
+.spacer9 { clear: both; margin-bottom: 9*@baseSpacerHeight; }
+.spacer10 { clear: both; margin-bottom: 10*@baseSpacerHeight; }
+.spacer11 { clear: both; margin-bottom: 11*@baseSpacerHeight; }
+.spacer12 { clear: both; margin-bottom: 12*@baseSpacerHeight; }
+.spacer13 { clear: both; margin-bottom: 13*@baseSpacerHeight; }
+.spacer14 { clear: both; margin-bottom: 14*@baseSpacerHeight; }
+.spacer15 { clear: both; margin-bottom: 15*@baseSpacerHeight; }
+
+//-----------------------------------------
+// Top-buffers
+// <div class="top-buffer-1">
+//   <span>...</span>
+//   ...
+// </div>)
+//-----------------------------------------
+@top-buffer-height: @grid-gutter-width/2;
+.top-buffer-1 { margin-top: @top-buffer-height; }
+.top-buffer-2 { margin-top: 2*@top-buffer-height; }
+.top-buffer-3 { margin-top: 3*@top-buffer-height; }
+.top-buffer-4 { margin-top: 4*@top-buffer-height; }
+.top-buffer-5 { margin-top: 5*@top-buffer-height; }
+.top-buffer-6 { margin-top: 6*@top-buffer-height; }
+.top-buffer-7 { margin-top: 7*@top-buffer-height; }
+.top-buffer-8 { margin-top: 8*@top-buffer-height; }
+.top-buffer-9 { margin-top: 9*@top-buffer-height; }
+.top-buffer-10 { margin-top: 10*@top-buffer-height; }
+
+//-----------------------------------------
+// Grid
+//-----------------------------------------
+// Vertical Separator
+hr.vertical {
+  float: left;
+  margin-left: 15px;
+  margin-right: -18px;
+  width: 0px;
+  border: none;
+  border-right: solid 1px #ddd;
+  min-height: 10px;
+}
+
+//------------------------------------
+// disclaimer
+//------------------------------------
+.disclaimer {
+  .muted();
+  font-size: 11px;
+  font-style: italic;
+}
+
+//------------------------------------
+// Header Sticky
+//------------------------------------
+.header-attached {
+  position: absolute;
+  top: 82px;
+}
+
+//------------------------------------
+// Page Header
+//------------------------------------
+.page-header {
+  text-align: center;
+  margin-top: -30px;
+  border: none;
+}
+
+@media (max-width: 1170px) {
+  // Remove margin top on element to
+  // compensate the loss of padding top on body
+  .page-header {
+    margin-top: 23px;
+  }
+}
+
+.page-header h1,
+.page-header h2 {
+  color: #878787;
+  font-weight: 500;
+  text-align: center;
+}
+
+//------------------------------------
+// Green Banners
+//------------------------------------
+.popular-apps-banner {
+  min-height: 355px;
+  margin: -30px 0px;
+  position: absolute;
+  z-index: -1;
+  min-width: 1030px;
+  border-radius: 5px;
+  background-color: rgba(255,255,255,0.3);
+  border: 1px solid #d0d0d0;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+}
+
+.popular-apps-ribbon {
+  //min-height: 149px;
+  //min-width: 149px;
+  z-index: 2;
+  background-image: image-url('ribbon_popular_apps.png');
+  background-size: 149px 149px;
+  background-repeat: no-repeat;
+  float:right;
+  position: absolute;
+  right: 0px;
+}
+
+.ribbon-wrapper {
+  width: 1031px;
+  height: 1px;
+  position: absolute;
+  margin-top: -30px;
+}
+
+.green-banner {
+  background-color: @elem-positive-color;
+  min-height: 150px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+}
+
+.lightgreen-banner.bordered,
+.green-banner.bordered {
+  border-top: solid 1px darken(@elem-positive-color,15%);
+  border-bottom: solid 1px darken(@elem-positive-color,15%);
+}
+
+.lightgreen-banner {
+  background-color: #e9edab;
+  min-height: 50px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+}
+
+.grey-banner {
+  background-color: #e5e5e5;
+  min-height: 50px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+}
+
+.lightgrey-banner {
+  background-color: #f2f2f2;
+  min-height: 50px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+}
+
+
+.grey-banner.bordered,
+.lightgrey-banner.bordered {
+  border-top: solid 1px darken(#f2f2f2,15%);
+  border-bottom: solid 1px darken(#f2f2f2,15%);
+}
+
+.black-banner {
+  background-color: black;
+  min-height: 50px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+}
+
+.blacklight-banner {
+  background-color: black;
+  min-height: 50px;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  min-width: 1170px;
+  opacity: .8
+}
+
+.narrow-dark-box {
+  border-radius: 5px;
+  background-color: rgba(255,255,255,0.3);
+  border: 1px solid #d0d0d0;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+  margin: 20px 30px;
+  padding: 20px;
+}
+
+//------------------------------------
+// Text Gradient
+//------------------------------------
+// The gradient color should be the same as the background color
+// The element needs to have position:relative
+// Eg.
+// .mygradient {
+//    position: relative;
+// }
+// .mygradient:after {
+//    .text-gradient(255,255,255);
+// }
+.text-gradient(@r: 255, @g: 255, @b: 255) {
+  content: '';
+  position:absolute;
+  display:block;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+
+  background: -moz-linear-gradient(top,  rgba(@r,@g,@b,0) 0%, rgba(@r,@g,@b,1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,rgba(@r,@g,@b,0)), color-stop(100%,rgba(@r,@g,@b,1)));
+  background: -webkit-linear-gradient(top,  rgba(@r,@g,@b,0) 35%,rgba(@r,@g,@b,1) 100%);
+  background: -o-linear-gradient(top,  rgba(@r,@g,@b,0) 0%,rgba(@r,@g,@b,1) 100%);
+  background: -ms-linear-gradient(top,  rgba(@r,@g,@b,0) 0%,rgba(@r,@g,@b,1) 100%);
+  background: linear-gradient(top,  rgba(@r,@g,@b,0) 0%,rgba(@r,@g,@b,1) 100%);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(rgba(@r,@g,@b,0)),argb(rgba(@r,@g,@b,1))));
+}
+
+//------------------------------------
+// Search Bar
+//------------------------------------
+.search-bar {
+  border-bottom: solid 1px #d1d1d1;
+  margin-bottom: 10px;
+}
+
+.search-bar .input-prepend,
+.search-bar .input-append {
+  margin-bottom: 0px;
+}
+
+.search-bar .input-prepend > .add-on,
+.search-bar .input-append > .add-on {
+  background: transparent;
+}
+
+.search-bar input {
+  background: transparent;
+  line-height: 17px;
+  border: none;
+
+  &:focus {
+    background-color: #f4f4f4;
+    .box-shadow(0px 0px 0px rgba(0,0,0,0));
+  }
+}
+
+//------------------------------------
+// Text Color (Override TWB)
+//------------------------------------
+.text-danger,
+.text-error {
+  color: #f03838;
+}
+
+.text-success {
+  color: #dae173;
+}
+
+.text-info {
+  color: #67bbe9;
+}
+
+//------------------------------------
+// Table Striped (Override TWB)
+//------------------------------------
+table.table-striped {
+  border-spacing: 0px;
+  color: #878787;
+  font-weight: 500;
+}
+
+table.table-striped thead th {
+  background-color: #e6e6e6;
+}
+
+table.table-striped.green-header thead th {
+  background-color: #e9edab;
+  color: white;
+}
+
+table.table-striped td {
+  border: none;
+}
+
+table.table-striped tbody > tr:nth-child(odd) > td {
+  background-color: white;
+}
+
+table.table-striped tbody > tr:nth-child(even) > td {
+  background-color: #f4f4f4;
+}
+
+//------------------------------------
+// Accordion (Override TWB)
+//------------------------------------
+.accordion .accordion-group {
+  .border-radius(0px);
+  border: none;
+}
+
+.accordion .accordion-group .accordion-heading {
+  background-color: #e9edab;
+}
+
+.accordion .accordion-group .accordion-heading a {
+  color: white;
+  font-weight: bold;
+}
+
+.accordion .accordion-group .accordion-body .accordion-inner {
+  border: none;
+  background-color: #f4f4f4;
+}
+
+//------------------------------------
+// Tabs (Override TWB)
+//------------------------------------
+.nav.nav-tabs {
+  border: none;
+  background-color: white;
+}
+
+.nav.nav-tabs > li {
+  background-color: white;
+  min-width: 120px;
+  text-align: center;
+}
+
+.nav.nav-tabs > li > a {
+  color: #878787;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  margin-right: 0px;
+
+}
+
+.nav.nav-tabs > li > a:hover,
+.nav.nav-tabs > li > a:focus {
+  background-color: lighten(#f4f4f4,3%);
+  border: none;
+  padding-bottom: 16px;
+  .border-radius(0px);
+}
+
+.nav.nav-tabs > .active > a,
+.nav.nav-tabs > .active > a:hover,
+.nav.nav-tabs > .active > a:focus {
+  color: #878787;
+  background-color: #f4f4f4;
+  border: none;
+  padding-bottom: 16px;
+  font-weight: bold;
+  .border-radius(0px);
+}
+
+.tab-content .tab-pane {
+  background-color: #f4f4f4;
+}
+
+//------------------------------------
+// Tabs Inverse (Override TWB)
+//------------------------------------
+.tabbable.inverse .nav.nav-tabs,
+.nav.nav-tabs.inverse  {
+  background-color: #f2f2f2;
+}
+
+.tabbable.inverse .nav.nav-tabs > li,
+.nav.nav-tabs.inverse > li {
+  background-color: #f2f2f2;
+}
+
+.tabbable.inverse .nav.nav-tabs > .active > a,
+.tabbable.inverse .nav.nav-tabs > .active > a:hover,
+.tabbable.inverse .nav.nav-tabs > .active > a:focus,
+.nav.nav-tabs.inverse > .active > a,
+.nav.nav-tabs.inverse > .active > a:hover,
+.nav.nav-tabs.inverse > .active > a:focus {
+  background-color: white;
+}
+
+.tabbable.inverse .nav.nav-tabs > li > a:hover,
+.tabbable.inverse .nav.nav-tabs > li > a:focus,
+.nav.nav-tabs.inverse > li > a:hover,
+.nav.nav-tabs.inverse > li > a:focus {
+  background-color: darken(#f2f2f2,3%);
+}
+
+
+.tabbable.inverse .tab-pane,
+.tab-content.inverse .tab-pane {
+  background-color: white;
+}
+
+//------------------------------------
+// caret-up
+//------------------------------------
+.caret-up {
+  .caret;
+  border-top-width: 0;
+  border-bottom: 4px solid;
+}
+
+.caret-down {
+  .caret;
+}
+
+.no-padding {
+  padding:0px;
+}