X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fbootstrap.scss;h=432e23e92fdf181ab7567c37acefc5e3dc67db33;hb=3e6193313b1c082b68177c056121b733f9e7d31a;hp=e11603e4df6eead87da44e0cf6b5fce916d94efe;hpb=266947e5efc7ff30b0020beb5a74e4d4fc696fa5;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index e11603e4d..432e23e92 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,12 +1,39 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@import '_bootstrap';
 
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import './_bootstrap-variables';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/utilities';
+
+@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
 
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
-  animation: spin .7s infinite linear;
+  animation: spin 0.7s infinite linear;
 }
 
 .glyphicon-duplicate {
@@ -25,19 +52,21 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   from {
     transform: scale(1) rotate(0deg);
   }
+
   to {
     transform: scale(1) rotate(360deg);
   }
 }
 
 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
-.dropdown {
+.dropdown,
+.dropup {
   z-index: z(dropdown) !important;
 }
 
 .list-overflow-menu,
 .parent-entry {
-  z-index: z(header) - 1 !important;
+  z-index: z(menu) - 1 !important;
 }
 
 .btn-group,
@@ -61,7 +90,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   font-size: 15px;
 
   .dropdown-header {
-    padding-left: 1rem;
+    @include padding-left(1rem);
   }
 
   .dropdown-item {
@@ -70,7 +99,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     &.active {
       color: pvar(--mainBackgroundColor) !important;
       background-color: pvar(--mainHoverColor);
-      opacity: .9;
+      opacity: 0.9;
     }
 
     &:active {
@@ -97,14 +126,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 @media screen and (min-width: #{breakpoint(md)}) {
-  .modal:before {
+  .modal::before {
     vertical-align: middle;
-    content: " ";
+    content: ' ';
     height: 100%;
   }
 
   .modal-dialog {
-    text-align: left;
+    text-align: start;
 
     &:not(.modal-lg):not(.modal-xl) {
       min-width: 500px;
@@ -119,11 +148,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .modal-content {
     background-color: pvar(--mainBackgroundColor);
-    word-break: break-all;
+    word-break: break-word;
   }
 
   .modal-header {
-    border-bottom: none;
+    border-bottom: 0;
     margin-bottom: 5px;
 
     .modal-title {
@@ -140,10 +169,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
       margin: 0;
       padding: 0;
-      opacity: .5;
+      opacity: 0.5;
 
-      &[iconName="cross"] {
+      &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
         @include icon(16px);
+
         top: -3px;
       }
     }
@@ -151,10 +181,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .inputs {
     margin-bottom: 0;
-    text-align: right;
+    text-align: end;
 
     > .peertube-button:not(:first-child) {
-      margin-left: 10px
+      @include margin-left(10px);
     }
   }
 }
@@ -168,7 +198,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 @media (hover: none) and (pointer: coarse) {
-  .modal-open, .menu-open {
+  .modal-open,
+  .menu-open {
     overflow: hidden !important;
   }
 
@@ -176,14 +207,14 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   .menu-open {
     .main-col {
       &::before {
-        background-color: black;
+        background-color: #000;
         width: 100vw;
         height: 100vh;
         opacity: 0.75;
         content: '';
         display: block;
         position: fixed;
-        z-index: z('menu') - 1;
+        z-index: z(overlay);
       }
     }
   }
@@ -204,7 +235,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   .nav-link {
     opacity: 0.6 !important;
 
-    &.active, &:hover, &:active, &:focus {
+    &.active,
+    &:hover,
+    &:active,
+    &:focus {
       opacity: 1 !important;
     }
   }
@@ -221,7 +255,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   color: pvar(--mainForegroundColor);
   font-weight: $font-semibold;
-  border: none;
+  border: 0;
   border-bottom: 2px solid transparent;
   opacity: 0.6;
 
@@ -231,7 +265,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     border-bottom-color: pvar(--mainColor);
   }
 
-  &.active, &:hover, &:active, &:focus {
+  &.active,
+  &:hover,
+  &:active,
+  &:focus {
     opacity: 1;
   }
 }
@@ -250,6 +287,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   &.show {
     max-height: 1500px;
+    overflow: inherit !important;
   }
 }
 
@@ -296,6 +334,34 @@ ngb-tooltip-window {
   }
 }
 
+.btn-group.select-button {
+  font-weight: $font-semibold;
+
+  .active {
+    @include orange-button;
+  }
+
+  :not(.active) {
+    @include grey-button;
+  }
+
+  > * {
+    @include peertube-button-link;
+
+    box-shadow: none !important;
+
+    &:not(:first-child) {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+  }
+}
+
 // input box-shadow on focus
 .form-control {
   font-size: 15px;
@@ -314,9 +380,10 @@ ngb-tooltip-window {
 }
 
 .input-group {
-  & > .form-control {
+  > .form-control {
     flex: initial;
   }
+
   input.form-control {
     width: unset !important;
     flex-grow: 1;
@@ -332,7 +399,7 @@ ngb-tooltip-window {
   position: relative;
 
   input {
-    padding-right: 1.5rem !important;
+    @include padding-right(1.5rem !important);
   }
 
   .form-control-clear {
@@ -366,7 +433,7 @@ ngb-tooltip-window {
   border: 1px solid #eee;
   border-radius: .25rem;
 
-  & > label {
+  > label {
     position: relative;
     top: -5px;
     left: -10px;
@@ -382,3 +449,22 @@ ngb-tooltip-window {
     border-left-color: pvar(--mainColor);
   }
 }
+
+// Override these properties for Bidi support
+@each $size, $length in $spacers {
+  .ml-#{$size} {
+    @include margin-left($length);
+  }
+
+  .mr-#{$size} {
+    @include margin-right($length);
+  }
+
+  .pl-#{$size} {
+    @include padding-left($length);
+  }
+
+  .pr-#{$size} {
+    @include padding-right($length);
+  }
+}