demarches-normaliennes/app/assets/stylesheets/new_design/dossier_edit.scss

@import "colors";
@import "constants";

.dossier-header {
  .container {
    padding-bottom: $default-padding;
  }

  h1 {
    font-size: 22px;

    .icon.folder {
      vertical-align: -3px;
    }
  }

  .dossier-form-actions {
    margin-top: $default-padding;
    margin-bottom: $default-padding;
    text-align: right;
  }
}

.dossier-edit {
  .prologue {
    margin: (1.5 * $default-padding) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    .mandatory-explanation {
      flex-grow: 1;   // Push the "notice" button to the right
      flex-shrink: 1; // Allow the text to shrink
      margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
    }

    .button.notice {
      flex-shrink: 0; // Display the button label on a single line
    }
  }

  .warning {
    margin-bottom: 20px;
    background-color: #f9b91666;
    padding: 20px;
    border-radius: 4px;
  }

  .send-dossier-actions-bar {
    display: flex;
    width: 100%;
    margin-top: $default-padding;
    background: #FFFFFF;
    position: fixed;
    bottom: 0px;
    border: 1px solid #CCCCCC;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
    padding-top: 0px;
    padding-bottom: $default-spacer;
    padding-right: 30px;
    padding-left: 30px;
    margin: 0 auto;
    margin-left: -30px;
    max-width: 1100px;

    .button {
      margin-top: $default-spacer;
    }

    @media(max-width: 1100px) {
      margin-left: -16px;
    }

    // Wide layout: align buttons on a single row
    @media (min-width: 550px) {
      flex-direction: row;

      .button:not(:first-of-type) {
        margin-left: $default-spacer;
      }

      // If there are more than one button, align the "Send" button to the right
      .button:not(:first-of-type).send {
        margin-left: auto;
      }
    }

    // Narrow layout: stack buttons vertically
    @media (max-width: 550px) {
      flex-direction: column-reverse;
      align-items: center;
      margin-left: -16px;

      .button {
        width: 100%;
        max-width: 350px;
        line-height: 30px;
        margin-left: none;
        margin-right: none;
      }
    }
  }
}