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 .form-control, .btn {
  24   border-radius: 0;
  25 }
  26
  27 .dropdown-menu {
  28   border-radius: 0;
  29 }
  30
  31 .glyphicon-black {
  32   color: black;
  33 }
  34
  35 .main-col {
  36   .content-padding {
  37     padding: 15px 30px;
  38
  39     @media screen and (max-width: 800px) {
  40       padding: 15px 10px;
  41     }
  42
  43     @media screen and (min-width: 1400px) {
  44       padding: 15px 40px;
  45     }
  46
  47     @media screen and (min-width: 1600px) {
  48       padding: 15px 50px;
  49     }
  50
  51     @media screen and (min-width: 1800px) {
  52       padding: 15px 60px;
  53     }
  54   }
  55 }
  56
  57 // On small screen, menu is absolute and displayed over the page
  58 @media screen and (max-width: 500px) {
  59   .title-menu-left {
  60     width: 120px;
  61     position: absolute !important;
  62     z-index: 10000;
  63   }
  64
  65   .main-col {
  66     width: 100% !important;
  67   }
  68
  69   .fake-menu {
  70     display: none;
  71   }
  72 }
  73
  74 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
  75 .glyphicon-refresh-animate {
  76   -animation: spin .7s infinite linear;
  77   -ms-animation: spin .7s infinite linear;
  78   -webkit-animation: spinw .7s infinite linear;
  79   -moz-animation: spinm .7s infinite linear;
  80 }
  81
  82 @keyframes spin {
  83   from { transform: scale(1) rotate(0deg);}
  84   to { transform: scale(1) rotate(360deg);}
  85 }
  86
  87 @-webkit-keyframes spinw {
  88   from { -webkit-transform: rotate(0deg);}
  89   to { -webkit-transform: rotate(360deg);}
  90 }
  91
  92 @-moz-keyframes spinm {
  93   from { -moz-transform: rotate(0deg);}
  94   to { -moz-transform: rotate(360deg);}
  95 }
  96
  97 /* ngprime data table customizations */
  98 p-datatable {
  99   .action-cell {
 100     text-align: center;
 101
 102     .glyphicon {
 103       cursor: pointer;
 104     }
 105   }
 106 }