Refactoring class helpers + add bootstrap mixins

[github/Chocobozzz/PeerTube.git] / client / src / sass / primeng-custom.scss

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 37e7a4275bfef9be2e7021f6a33db2523d48142b..18a5bb1b69c2286008f0b7c42c3e1e9606e37026 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -450,12 +450,16 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 // ---------------------------------------------------------------------------
 
 p-table {
+  table {
+    table-layout: fixed;
+  }
+
   .p-datatable-header {
     border: none !important;
     background-color: pvar(--mainBackgroundColor) !important;
 
     .caption {
-      height: 40px;
+      min-height: 40px;
       width: 100%;
       display: inline-flex;
       align-items: center;
@@ -623,11 +627,22 @@ p-table {
         }
       }
 
+      .p-dropdown,
+      .p-dropdown-trigger {
+        color: pvar(--mainForegroundColor);
+        background-color: pvar(--mainBackgroundColor);
+      }
+
       .p-paginator-current {
         position: absolute;
         right: 0;
         color: pvar(--inputPlaceholderColor);
         overflow: visible;
+
+        @media screen and (max-width: $small-view) {
+          left: 0;
+          top: 40px;
+        }
       }
 
       .p-paginator-first,
@@ -661,7 +676,7 @@ p-table {
           @include margin-right(10px);
 
           .p-paginator-icon {
-            @extend .chevron-left !optional;
+            @include chevron-left-default;
           }
         }
 
@@ -669,7 +684,7 @@ p-table {
           @include margin-left(10px);
 
           .p-paginator-icon {
-            @extend .chevron-right !optional;
+            @include chevron-right-default;
           }
         }
 
@@ -763,7 +778,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .chevron-right !optional;
+      @include chevron-right-default;
 
       color: #000 !important;
       text-align: end;
@@ -774,7 +789,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .chevron-left !optional;
+      @include chevron-left-default;
 
       color: #000 !important;
       text-align: start;
@@ -788,13 +803,13 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .chevron-up !optional;
+      @include chevron-up-default;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .chevron-down !optional;
+      @include chevron-down-default;
 
       color: #000 !important;
     }