client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @use '_variables' as *;
   4 @use '_mixins' as *;
   5
   6 @import './_bootstrap-variables';
   7
   8 @import '~bootstrap/scss/functions';
   9 @import '~bootstrap/scss/variables';
  10
  11 @import '~bootstrap/scss/mixins';
  12 @import '~bootstrap/scss/root';
  13 @import '~bootstrap/scss/reboot';
  14 @import '~bootstrap/scss/type';
  15 @import '~bootstrap/scss/grid';
  16 @import '~bootstrap/scss/tables';
  17 @import '~bootstrap/scss/forms';
  18 @import '~bootstrap/scss/buttons';
  19 @import '~bootstrap/scss/dropdown';
  20 @import '~bootstrap/scss/button-group';
  21 @import '~bootstrap/scss/input-group';
  22 @import '~bootstrap/scss/nav';
  23 @import '~bootstrap/scss/card';
  24 @import '~bootstrap/scss/badge';
  25 @import '~bootstrap/scss/alert';
  26 @import '~bootstrap/scss/close';
  27 @import '~bootstrap/scss/modal';
  28 @import '~bootstrap/scss/tooltip';
  29 @import '~bootstrap/scss/popover';
  30 @import '~bootstrap/scss/utilities';
  31
  32 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
  33
  34 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
  35 .glyphicon-refresh-animate {
  36   animation: spin 0.7s infinite linear;
  37 }
  38
  39 .glyphicon-duplicate {
  40   font-size: 70%;
  41 }
  42
  43 .flex-auto {
  44   flex: auto;
  45 }
  46
  47 .c-hand {
  48   cursor: pointer;
  49 }
  50
  51 @keyframes spin {
  52   from {
  53     transform: scale(1) rotate(0deg);
  54   }
  55
  56   to {
  57     transform: scale(1) rotate(360deg);
  58   }
  59 }
  60
  61 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
  62 .dropdown,
  63 .dropup {
  64   z-index: z(dropdown) !important;
  65 }
  66
  67 .list-overflow-menu,
  68 .parent-entry {
  69   z-index: z(menu) - 1 !important;
  70 }
  71
  72 .btn-group,
  73 .dropdown-root,
  74 .action-dropdown,
  75 .input-group-prepend,
  76 .column-toggle {
  77   z-index: inherit !important;
  78 }
  79
  80 .btn-group > .btn:not(:first-child) {
  81   border-top-left-radius: 0 !important;
  82   border-bottom-left-radius: 0 !important;
  83 }
  84
  85 .dropdown-menu {
  86   z-index: z(dropdown) + 1 !important;
  87
  88   border-radius: 3px;
  89   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  90   font-size: 15px;
  91
  92   .dropdown-header {
  93     @include padding-left(1rem);
  94   }
  95
  96   .dropdown-item {
  97     padding: 3px 15px;
  98
  99     &.active {
 100       color: pvar(--mainBackgroundColor) !important;
 101       background-color: pvar(--mainHoverColor);
 102       opacity: 0.9;
 103     }
 104
 105     &:active {
 106       color: pvar(--mainForegroundColor) !important;
 107     }
 108
 109     &::after {
 110       display: none;
 111     }
 112   }
 113
 114   button {
 115     @include disable-default-a-behaviour;
 116   }
 117
 118   a {
 119     @include disable-default-a-behaviour;
 120     color: #000 !important;
 121   }
 122 }
 123
 124 .badge {
 125   line-height: 1.1;
 126 }
 127
 128 @media screen and (min-width: #{breakpoint(md)}) {
 129   .modal::before {
 130     vertical-align: middle;
 131     content: ' ';
 132     height: 100%;
 133   }
 134
 135   .modal-dialog {
 136     text-align: start;
 137
 138     &:not(.modal-lg):not(.modal-xl) {
 139       min-width: 500px;
 140       width: 40vw;
 141       max-width: 900px;
 142     }
 143   }
 144 }
 145
 146 .modal {
 147   text-align: center;
 148
 149   .modal-content {
 150     background-color: pvar(--mainBackgroundColor);
 151     word-break: break-word;
 152   }
 153
 154   .modal-header {
 155     border-bottom: 0;
 156     margin-bottom: 5px;
 157
 158     .modal-title {
 159       font-size: 20px;
 160       font-weight: $font-semibold;
 161     }
 162
 163     my-global-icon {
 164       @include icon(22px);
 165
 166       position: relative;
 167       top: 5px;
 168       float: right;
 169
 170       margin: 0;
 171       padding: 0;
 172       opacity: 0.5;
 173
 174       &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
 175         @include icon(16px);
 176
 177         top: -3px;
 178       }
 179     }
 180   }
 181
 182   .inputs {
 183     margin-bottom: 0;
 184     text-align: end;
 185
 186     > .peertube-button:not(:first-child) {
 187       @include margin-left(10px);
 188     }
 189   }
 190 }
 191
 192
 193 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 194 .modal-open {
 195   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 196   width: 100vw; // Make sure the content fits all the available width
 197 }
 198
 199 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 200 @media (hover: none) and (pointer: coarse) {
 201   .modal-open,
 202   .menu-open {
 203     overflow: hidden !important;
 204   }
 205
 206   // On touchscreen devices display content overlay when opened menu
 207   .menu-open {
 208     .main-col {
 209       &::before {
 210         background-color: #000;
 211         width: 100vw;
 212         height: 100vh;
 213         opacity: 0.75;
 214         content: '';
 215         display: block;
 216         position: fixed;
 217         z-index: z(overlay);
 218       }
 219     }
 220   }
 221 }
 222
 223 // Nav customizations
 224 .nav .nav-link {
 225   display: flex !important;
 226   align-items: center;
 227   height: 30px !important;
 228   padding: 10px 15px !important;
 229 }
 230
 231 .nav.nav-pills {
 232   font-size: 16px !important;
 233   font-weight: $font-semibold !important;
 234
 235   .nav-link {
 236     opacity: 0.6 !important;
 237
 238     &.active,
 239     &:hover,
 240     &:active,
 241     &:focus {
 242       opacity: 1 !important;
 243     }
 244   }
 245
 246   a {
 247     @include disable-default-a-behaviour;
 248
 249     color: pvar(--mainForegroundColor);
 250   }
 251 }
 252
 253 .nav-tabs .nav-link {
 254   @include disable-default-a-behaviour;
 255
 256   color: pvar(--mainForegroundColor);
 257   font-weight: $font-semibold;
 258   border: 0;
 259   border-bottom: 2px solid transparent;
 260   opacity: 0.6;
 261
 262   &.active {
 263     color: pvar(--mainForegroundColor);
 264     background-color: pvar(--mainBackgroundColor) !important;
 265     border-bottom-color: pvar(--mainColor);
 266   }
 267
 268   &.active,
 269   &:hover,
 270   &:active,
 271   &:focus {
 272     opacity: 1;
 273   }
 274 }
 275
 276 .card {
 277   background-color: pvar(--mainBackgroundColor);
 278   border-color: #dee2e6;
 279 }
 280
 281 .collapse-transition {
 282   // Animation when we show/hide the filters
 283   transition: max-height 0.3s;
 284   display: block !important;
 285   overflow: hidden !important;
 286   max-height: 0;
 287
 288   &.show {
 289     max-height: 1500px;
 290     overflow: inherit !important;
 291   }
 292 }
 293
 294 .dropdown-divider {
 295   margin: 0.3rem 0;
 296 }
 297
 298 ngb-modal-backdrop {
 299   z-index: z(modal) - 1 !important;
 300 }
 301
 302 ngb-modal-window {
 303   z-index: z(modal) !important;
 304 }
 305
 306 ngb-popover-window {
 307   z-index: z(popover) !important;
 308 }
 309
 310 ngb-tooltip-window {
 311   z-index: z(tooltip) !important;
 312 }
 313
 314 .btn-outline-secondary {
 315   border-color: $input-border-color;
 316
 317   &:focus-within,
 318   &:focus,
 319   &:hover {
 320     color: #fff;
 321     background-color: #6c757d;
 322   }
 323 }
 324
 325 .btn-outline-tertiary {
 326   color: pvar(--secondaryColor);
 327   border-color: pvar(--secondaryColor);
 328
 329   &:focus-within,
 330   &:focus,
 331   &:hover {
 332     color: pvar(--mainBackgroundColor);
 333     background-color: pvar(--secondaryColor);
 334   }
 335 }
 336
 337 // input box-shadow on focus
 338 .form-control {
 339   font-size: 15px;
 340   color: pvar(--mainForegroundColor);
 341   background-color: pvar(--inputBackgroundColor);
 342   outline: none;
 343
 344   &:focus-within,
 345   &:focus {
 346     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 347
 348     &.input-error {
 349       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 350     }
 351   }
 352 }
 353
 354 .input-group {
 355   > .form-control {
 356     flex: initial;
 357   }
 358
 359   input.form-control {
 360     width: unset !important;
 361     flex-grow: 1;
 362   }
 363
 364   .input-group-prepend + input {
 365     border-top-left-radius: 0 !important;
 366     border-bottom-left-radius: 0 !important;
 367   }
 368 }
 369
 370 .has-feedback.has-clear {
 371   position: relative;
 372
 373   input {
 374     @include padding-right(1.5rem !important);
 375   }
 376
 377   .form-control-clear {
 378     color: rgba(0, 0, 0, 0.4);
 379     /*
 380      * Enable pointer events as they have been disabled since Bootstrap 3.3
 381      * See https://github.com/twbs/bootstrap/pull/14104
 382      */
 383     pointer-events: all;
 384     display: flex;
 385     justify-content: center;
 386     align-items: center;
 387     position: absolute;
 388     right: .5rem;
 389     height: 95%;
 390     font-size: 14px;
 391
 392     &:hover {
 393       color: rgba(0, 0, 0, 0.7);
 394       cursor: pointer;
 395     }
 396   }
 397
 398   input:placeholder-shown + .form-control-clear {
 399     display: none;
 400   }
 401 }
 402
 403 .callout {
 404   padding: 1.25rem;
 405   border: 1px solid #eee;
 406   border-radius: .25rem;
 407
 408   > label {
 409     position: relative;
 410     top: -5px;
 411     left: -10px;
 412     color: #6c757d !important;
 413   }
 414
 415   &:not(.callout-light) {
 416     border-left-width: .25rem;
 417   }
 418
 419   &.callout-info {
 420     border-color: pvar(--mainColorLightest);
 421     border-left-color: pvar(--mainColor);
 422   }
 423 }
 424
 425 // Override these properties for Bidi support
 426 @each $size, $length in $spacers {
 427   .ml-#{$size} {
 428     @include margin-left($length);
 429   }
 430
 431   .mr-#{$size} {
 432     @include margin-right($length);
 433   }
 434
 435   .pl-#{$size} {
 436     @include padding-left($length);
 437   }
 438
 439   .pr-#{$size} {
 440     @include padding-right($length);
 441   }
 442 }