Skip to content
Snippets Groups Projects
Select Git revision
  • d5eb2a6d4646800c7cc7753d7ee8549cedfde5fd
  • master default
  • dja
  • dja_fix_animations
  • dja_various_fixes
  • dja_differentiate_same_user_connections
  • dja_fix_bugs
  • dja_guest
  • dja_guests
  • dja_sign_out_without_race_conditions
  • dja_subgroups
  • dua_subgroups
  • dja_groups_2
  • dja_groups
  • dja_heroku_11_7_2024
  • dja_share_files
  • dja_execute_files_aux_2
  • dja_execute_files_aux
  • dja_execute_files
  • dja_files_page
  • dja-create-main-button
  • v2.0
  • v1.0
23 results

_modal.scss

Blame
  • _modal.scss 3.71 KiB
    // .modal-open      - body class for killing the scroll
    // .modal           - container to scroll within
    // .modal-dialog    - positioning shell for the actual modal
    // .modal-content   - actual modal w/ bg and corners and stuff
    
    
    // Kill the scroll on the body
    .modal-open {
      overflow: hidden;
    }
    
    // Container that the modal scrolls within
    .modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $zindex-modal;
      display: none;
      overflow: hidden;
      // Prevent Chrome on Windows from adding a focus outline. For details, see
      // https://github.com/twbs/bootstrap/pull/10951.
      outline: 0;
      // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
      // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
      // See also https://github.com/twbs/bootstrap/issues/17695
    
      // When fading in the modal, animate it to slide down
      &.fade .modal-dialog {
        @include transition($modal-transition);
        transform: translate(0, -25%);
      }
      &.show .modal-dialog { transform: translate(0, 0); }
    }
    .modal-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    // Shell div to position the modal with bottom padding
    .modal-dialog {
      position: relative;
      width: auto;
      margin: $modal-dialog-margin;
    }
    
    // Actual modal
    .modal-content {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: $modal-content-bg;
      background-clip: padding-box;
      border: $modal-content-border-width solid $modal-content-border-color;
      @include border-radius($border-radius-lg);
      @include box-shadow($modal-content-xs-box-shadow);
      // Remove focus outline from opened modal
      outline: 0;
    }
    
    // Modal background
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $zindex-modal-backdrop;
      background-color: $modal-backdrop-bg;