client/src/sass/application.scss

   1 @import '~primeng/resources/themes/bootstrap/theme.css';
   2 @import '~primeng/resources/primeng.css';
   3 @import '~video.js/dist/video-js.css';
   4 @import './video-js-custom.scss';
   5
   6 [hidden] {
   7   display: none !important;
   8 }
   9
  10 input.readonly {
  11   /* Force blank on readonly inputs */
  12   background-color: #fff !important;
  13 }
  14
  15 .form-control, .btn {
  16   border-radius: 0;
  17 }
  18
  19 .dropdown-menu {
  20   border-radius: 0;
  21 }
  22
  23 .glyphicon-black {
  24   color: black;
  25 }
  26
  27 .main-col {
  28   .content-padding {
  29     padding: 15px 30px;
  30
  31     @media screen and (max-width: 800px) {
  32       padding: 15px 10px;
  33     }
  34
  35     @media screen and (min-width: 1400px) {
  36       padding: 15px 40px;
  37     }
  38
  39     @media screen and (min-width: 1600px) {
  40       padding: 15px 50px;
  41     }
  42
  43     @media screen and (min-width: 1800px) {
  44       padding: 15px 60px;
  45     }
  46   }
  47 }
  48
  49 // On small screen, menu is absolute and displayed over the page
  50 @media screen and (max-width: 500px) {
  51   .title-menu-left {
  52     width: 120px;
  53     position: absolute !important;
  54     z-index: 10000;
  55   }
  56
  57   .main-col {
  58     width: 100% !important;
  59   }
  60
  61   .fake-menu {
  62     display: none;
  63   }
  64 }
  65
  66 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
  67 .glyphicon-refresh-animate {
  68   -animation: spin .7s infinite linear;
  69   -ms-animation: spin .7s infinite linear;
  70   -webkit-animation: spinw .7s infinite linear;
  71   -moz-animation: spinm .7s infinite linear;
  72 }
  73
  74 @keyframes spin {
  75   from { transform: scale(1) rotate(0deg);}
  76   to { transform: scale(1) rotate(360deg);}
  77 }
  78
  79 @-webkit-keyframes spinw {
  80   from { -webkit-transform: rotate(0deg);}
  81   to { -webkit-transform: rotate(360deg);}
  82 }
  83
  84 @-moz-keyframes spinm {
  85   from { -moz-transform: rotate(0deg);}
  86   to { -moz-transform: rotate(360deg);}
  87 }
  88
  89 /* ngprime data table customizations */
  90 p-datatable {
  91   .action-cell {
  92     text-align: center;
  93
  94     .glyphicon {
  95       cursor: pointer;
  96     }
  97   }
  98 }