openuds/server/templates/admin/app/css/main.scss

// Bootstrap
$icon-font-path: "../fonts/";

@import "_udsvars";

// Own variables
$sidebar-icon-width: 24px;
$sidebar-icon-width-collapsed: 36px;

$sidebar-size: 225px;  // 225 px
$sidebar-size-collapsed: $sidebar-icon-width-collapsed + 2*$font-size-base; // 40px;
$sidebar-top: 50px;


$sidebar-switcher-size: 14px;
$sizebar-switcher-font-size: $sidebar-switcher-size - 2px;
$sidebar-switcher-pos: $sidebar-size - $sidebar-switcher-size;
$sidebar-switcher-pos-collapsed: $sidebar-size-collapsed - $sidebar-switcher-size;


$uds-panel-min-height: 500px;


// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower


@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url(#{$icon-font-path}/DroidSansMono.woff2) format('woff2');
}

// Fix for firefox for fieldsets
@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}

body {
  font-family: 'Droid Sans Mono', sans-serif;
  background-color: $body-bg;
  margin-top: 50px;
}

#wrapper {
  padding-left: 0;
}

#page-wrapper {
  width: 100%;
  padding: 5px 15px;
}

/* collapsable && closeable pannels */

.chevron {
  &:before {
    content: "\f139";
  }

  &.collapsed:before {
    content: "\f13a";
  }
}

.panel-icon {
  margin-left: 0.6em !important;
  cursor: pointer;
}

.table-icon {
  width: 1.2em;
  padding-bottom: 3px;
}

.info-img {
  width: 5em;
}

.navbar-img {
  width: 2em;
  margin-top: -8px;
}

.cursor-pointer {
  cursor: pointer !important;
}

#minimized {
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}

/* modal dialogs & related*/

.modal-dialog {
  /* new custom width */
  width: 90%;
}

/*.modal-backdrop {
  background-color: gray;
}*/

.modal {
  overflow-y: auto;
}

.tab-pane {
  margin-top: 24px;
}

.tooltip {
  z-index: 2014;
}

/* Tables */

/* Logs */

.chart-big {
  display: block;
  height: 400px;
}

.chart-medium {
  display: block;
  height: 250px;
}

.chart-small {
  display: block;
  height: 100px;
}

/* End tables styling */
/* Charts */

.chart-content {
  width: 100%;
  height: 100%;
}

// Hides switcher on small devices, so menu displays correctly
.side-nav {
  padding-top: 0px;
  .switcher {
    visibility: hidden;
    width: 0px;
    height: 0px;
  }
  .icon {
    width: 24px;
    vertical-align: center;
    padding-bottom: 3px;
  }
}

/* Edit Below to Customize Widths > 768px */
@media (min-width: 768px) {
  /* Wrappers */

  #wrapper {
    padding-left: $sidebar-size;
    -webkit-transition: padding 0.3s; /* For Safari 3.1 to 6.0 */
    transition: padding 0.3s;
    
    &.full {
      padding-left: $sidebar-size-collapsed;
    }
  }

  #page-wrapper {
    padding: 15px 25px;
  }

  /* Side Nav */
  .side-nav {
    position: fixed;
    top: $sidebar-top;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border-color: $navbar-default-border;
    border-style: solid;
    border-width: 0 1px 0 0;    
    background-color: $navbar-default-bg;
    -webkit-transition: width 0.3s; /* For Safari 3.1 to 6.0 */
    transition: width 0.3s;

    margin-left: -$sidebar-size-collapsed;
    padding-top: $sidebar-switcher-size;
    left: $sidebar-size-collapsed;
    width: $sidebar-size-collapsed;

    .icon {
      width: $sidebar-icon-width-collapsed;
      -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
      transition: all 0.3s;

    }

    .menu-lnk {
      display: none;
      overflow-x: hidden;
    }

    .switcher {
      visibility: visible;
      position: absolute;
      left: $sidebar-switcher-pos-collapsed;
      top: 0;
      background-color: $navbar-inverse-bg;
      color: $gray-lighter;
      width: $sidebar-switcher-size;
      height: $sidebar-switcher-size;
      font-size: $sizebar-switcher-font-size;
      text-align: center;
      cursor: pointer;
      z-index: $zindex-popover;
      -webkit-transition: left 0.3s; /* For Safari 3.1 to 6.0 */
      transition: left 0.3s;
      &:before {
        content:"\f101";
      }
    }

    > ul > li {
      width: $sidebar-size;
      overflow-x: hidden;
      // border-bottom: 1px solid $navbar-default-border;

      &:hover, &.active, &:focus {
        color: $brand-primary;
        background-color: darken($navbar-default-bg, 15%);
      }

      &.dropdown > ul.dropdown-menu {
        width: $sidebar-size;
        position: relative;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;


        > li > a {
          color: inherit;
          padding: $font-size-base;

          &:hover, &.active, &:focus {
            color: #fff;
            background-color: #080808;
          }
        }
      }
    }


    &.full {
      margin-left: -$sidebar-size;
      left: $sidebar-size;
      width: $sidebar-size;
      .switcher {
        left: $sidebar-switcher-pos;
        &:before {
          content:"\f100";
        }
      }

      .icon {
        width: $sidebar-icon-width;
      }

      .menu-lnk {
        display: inline;
        opacity: 1.0;
        width: 100%;
      }

      > ul > li {
        //border-bottom: none;
      }

    }

    /*&:hover {
      width: $sidebar-size;
    }


    > li {
      &.dropdown > ul.dropdown-menu {
        position: relative;
        min-width: $sidebar-size;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;

        > li > a {
          color: #999999;
          padding: 15px 15px 15px 15px;

          &:hover, &.active, &:focus {
            color: #fff;
            background-color: #080808;
          }
        }
      }

      > a {
        border-bottom: 1px solid darken($body-bg, 50%);
        color: $text-color;
        display: block;
        font-size: 10px;
        min-height: 60px;
        padding-top: 12px;
        text-align: center;
        width: $sidebar-size-collapsed;
        > img {
          min-width: 32px;
        }

      }
      //> a {
      //  width: $sidebar-size;
      //}
    }*/
  }

  /* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */

  /*.navbar-inverse .navbar-nav > li > a {
    &:hover, &:focus {
      background-color: #080808;
    }
  }*/

  .modal-dialog {
    /* new custom width */
    width: 60%;
  }
}


/* theme */

@import "_theme";
@import "_widgets";
@import "_buttons";
//@import "_data-tables";
@import "_tables";