X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_bootstrap-variables.scss;h=41a1448c40324c4bc75fe8e8381609e2ace75e52;hb=d91b23b11ca46debfee320ce5c5dfaeae5811bb7;hp=ce2532af509e5329e910967967ccf179cbf9d2ff;hpb=19f22055162185d5f46d5916c82de3639de209a1;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index ce2532af5..41a1448c4 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -1,10 +1,10 @@
 $dropdown-link-active-bg: inherit;
 
-$zindex-modal: 10005;
 $modal-footer-border-width: 0;
 $modal-md: 600px;
 
 $grid-breakpoints: (
+  // CLASSIC BREAKPOINTS GROUP
   // Extra small screen / phone
   xs: 0,
   // Small screen / phone
@@ -13,10 +13,20 @@ $grid-breakpoints: (
   md: 768px,
   // Large screen / desktop
   lg: 900px,
-  // Extra large screen / wide desktop
-  xl: 1200px
+  // Extra large screens / wide desktops
+  xl: 1200px,
+  xxl: 1600px,
+
+  // SCREEN GROUP
+  fhd: 1800px,
+  qhd: 2560px,
+  uhd: 3840px
 );
 
+@function breakpoint($label) {
+  @return map-get($grid-breakpoints, $label);
+}
+
 $container-max-widths: (
   sm: 420px,
   md: 720px,
@@ -29,4 +39,4 @@ $input-btn-focus-color: inherit;
 $input-focus-border-color: #ced4da;
 
 $nav-pills-link-active-bg: #F0F0F0;
-$nav-pills-link-active-color: #000;
\ No newline at end of file
+$nav-pills-link-active-color: #000;