client/src/sass/application.scss

   1 $FontPathSourceSansPro: "../fonts/source-sans-pro";
   2 @import '~source-sans-pro/source-sans-pro';
   3 @import '~primeng/resources/themes/bootstrap/theme.css';
   4 @import '~primeng/resources/primeng.css';
   5 @import '~video.js/dist/video-js.css';
   6 @import './video-js-custom.scss';
   7
   8 [hidden] {
   9   display: none !important;
  10 }
  11
  12 body {
  13   font-family: 'Source Sans Pro';
  14   font-weight: $font-regular;
  15   color: #000;
  16 }
  17
  18 input.readonly {
  19   /* Force blank on readonly inputs */
  20   background-color: #fff !important;
  21 }
  22
  23 label {
  24   font-weight: $font-bold;
  25   font-size: 15px;
  26 }
  27
  28 .glyphicon-black {
  29   color: black;
  30 }
  31
  32 .main-col {
  33   margin-left: $menu-width;
  34
  35   .title-page {
  36     color: #000;
  37     font-size: 16px;
  38     display: inline-block;
  39     margin-right: 55px;
  40     font-weight: $font-semibold;
  41     @include disable-default-a-behaviour;
  42
  43     &.active, &.title-page-single {
  44       border-bottom: 2px solid $orange-color;
  45       font-weight: $font-bold;
  46       margin-top: 30px;
  47       margin-bottom: 25px;
  48     }
  49   }
  50
  51   .margin-content {
  52     margin-left: $not-expanded-horizontal-margins;
  53     margin-right: $not-expanded-horizontal-margins;
  54   }
  55
  56   .sub-menu {
  57     background-color: #F7F7F7;
  58     width: 100%;
  59     height: 81px;
  60     margin-bottom: 30px;
  61     display: flex;
  62     align-items: center;
  63     padding-left: $not-expanded-horizontal-margins;
  64   }
  65
  66   // Override some properties if the main content is expanded (no menu on the left)
  67   &.expanded {
  68     margin-left: 0;
  69
  70     .margin-content {
  71       margin-left: $expanded-horizontal-margins;
  72       margin-right: $expanded-horizontal-margins;
  73     }
  74
  75     .sub-menu {
  76       padding-left: $expanded-horizontal-margins;
  77     }
  78   }
  79 }
  80
  81 // On small screen, menu is absolute and displayed over the page
  82 @media screen and (max-width: 500px) {
  83   .title-menu-left {
  84     width: 120px;
  85     position: absolute !important;
  86     z-index: 10000;
  87   }
  88
  89   .main-col {
  90     width: 100% !important;
  91   }
  92
  93   .fake-menu {
  94     display: none;
  95   }
  96 }
  97
  98 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
  99 .glyphicon-refresh-animate {
 100   -animation: spin .7s infinite linear;
 101   -ms-animation: spin .7s infinite linear;
 102   -webkit-animation: spinw .7s infinite linear;
 103   -moz-animation: spinm .7s infinite linear;
 104 }
 105
 106 @keyframes spin {
 107   from { transform: scale(1) rotate(0deg);}
 108   to { transform: scale(1) rotate(360deg);}
 109 }
 110
 111 @-webkit-keyframes spinw {
 112   from { -webkit-transform: rotate(0deg);}
 113   to { -webkit-transform: rotate(360deg);}
 114 }
 115
 116 @-moz-keyframes spinm {
 117   from { -moz-transform: rotate(0deg);}
 118   to { -moz-transform: rotate(360deg);}
 119 }
 120
 121 /* ngprime data table customizations */
 122 p-datatable {
 123   .action-cell {
 124     text-align: center;
 125
 126     .glyphicon {
 127       cursor: pointer;
 128     }
 129   }
 130 }