salesagility_SuiteCRM/themes/SuiteP/css/suitep-base/email.scss

/**** Emails ***/

@mixin panel-email-compose-button-margin {
  margin: 6px 6px;
}

@mixin panel-email-compose-button-padding {
  padding: 4px;
}

@mixin panel-email-compose-buttons() {
  background-color: transparent;
  border: none;
  border-image-width: 0;
  border-color: transparent;
  color: $email-panel-color;
  @include panel-email-compose-button-margin();
  @include panel-email-compose-button-padding();
  line-height: 18px;
  min-height:  18px;
  outline: none;
}

@mixin panel-email-compose-custom-buttons() {
  background-color: transparent;
  border: none;
  border-image-width: 0;
  color: $email-panel-color;
  border-color: transparent;
  margin: 0;
  outline: none;
  padding: 0;
}

.email-indicator {
  text-align: center;
  float: right;
}

.email-indicator > span,
.email-indicator > div {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  height: 24px;
  width: 24px;
  line-height: 24px;
  margin-left: 10px;
}

.email-indicator .email-flagged {
  background-color: $danger-btn-bg;
  border-radius: 28px;
  color: $default-btn-color;
  font-size: 18px;
}

.email-indicator .email-new {
  height: 0;
  width: 0;
}

.email-indicator .email-imported {
  background-color: $info-btn-bg;
  color: $default-btn-color;
  border-radius: $border-radius-base;
}

.email-new-record.oddListRowS1:hover td {
  background-color: $table-focus-bg;
}

.email-new-record.evenListRowS1:hover td {
  background-color: $table-focus-bg;
}

.email-new-record.oddListRowS1 td {
  background-color: $email-new-record-bg-odd;
  font-weight: 900;
}

.email-new-record.evenListRowS1 td {
  background-color: $email-new-record-bg-even;
  font-weight: 900;
}

.panel-email-compose {
  margin: 5px 0 0 0;
  background-color: $email-panel-bg;
  color: $email-panel-color;
  line-height: 24px;

  .panel-body {

    :focus {
      border: none;
      border-image-width: 0;
      border-color: transparent;
      outline: none;
      outline-width: 0;
    }

    button {
      @include panel-email-compose-buttons();
    }

    .btn {
      @include panel-email-compose-buttons();
    }

    .btn:hover {
      @include panel-email-compose-buttons();
    }

    .btn:visited {
      @include panel-email-compose-buttons();
    }

    .btn:link {
      @include panel-email-compose-buttons();
    }

    .btn:active {
      @include panel-email-compose-buttons();
    }

    .btn:focus {
      @include panel-email-compose-buttons();
    }

    input[type=reset] {
      @include panel-email-compose-custom-buttons();
    }

    input[type=submit] {
      @include panel-email-compose-custom-buttons();
    }

    input[type=button] {
      @include panel-email-compose-custom-buttons();
    }

    .btn.btn-image {
        height: 18px;
        font-size: 18px;
        padding-top: 0;
        padding-bottom: 0;
        img {
          display: inline-block;
          width: 18px;
          height: 18px;
        }
    }

    .glyphicon {
      font-size: $email-panel-font-size;
    }

    .glyphicon:focus {
      border: none;
      border-image-width: 0;
      border-color: transparent;
      outline: none;
    }

    .vertical-seperator {
      background-color: transparent;
      border-bottom: none;
      border-left: 1px solid $email-panel-color;
      border-right: none;
      border-top: none;
      color: $email-panel-color;
      cursor: default;
      font-size: $email-panel-font-size;
      @include panel-email-compose-button-margin();
      @include panel-email-compose-button-padding();
      outline: none;
      height: $email-panel-font-size;
    }

    .vertical-separator {
      background-color: transparent;
      border-bottom: none;
      border-left: 1px solid $email-panel-color;
      border-right: none;
      border-top: none;
      color: $email-panel-color;
      cursor: default;
      font-size: $email-panel-font-size;
      @include panel-email-compose-button-margin();
      @include panel-email-compose-button-padding();
      outline: none;
      height: $email-panel-font-size;
    }

    .custom-buttons {
      display: inline-block;
    }
  }
}

.compose-view {
  .panel {

    .col-sm-6 [type].col-sm-8.edit-view-field input[type=text]#emails_email_templates_name {
      width: 72.25%;
    }

    .col-sm-6 [type].col-sm-8.edit-view-field input[type=text]#parent_name {
      width: 45%;
    }

    .col-sm-12 [type].col-sm-8.edit-view-field input[type=text] {
      width: 100%;
    }

    .col-sm-12 .col-sm-8.edit-view-field textarea#description {
      width: 100%;
    }

    .col-sm-8[type=parent] {
      width: 100%;
    }

    .col-sm-8 {
      width: 83.33%;
    }

    .edit-view-row-item.empty {
      display: none;
      height: 0;
      margin: 0 0 0 0;
      min-height: 0;
      min-width: 0;
      visibility: collapse;
    }


    .compose-from-email-account {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;

      .compose-from-email-address-name {
        margin-right: 0.5rem;
      }
      .compose-from-email-address-from {
        color: $gray;
      }
    }

    .ui-selectmenu-button.ui-button {
      width: auto;
      min-width: 50%;
      background: inherit;
    }

    .ui-selectmenu-button.ui-button:hover {
      background: inherit;
    }

    .ui-selectmenu-menu.ui-front.ui-selectmenu-open {
      .ui-menu-item-wrapper.ui-state-active {
        border: 1px solid transparent;
        background: $gray-lighter
        50% 50% repeat-x;
      }
    }
  }

  .btn-send-email .send-email-label {
    float: right;
    padding-left: 5px;
  }
}

.email-in-progress {
  text-align: center;
}

.emails-qtip {
  z-index: 32000!important;
}

.file-attachments:empty {
  display: none;
}

.file-attachments {

  background: $main-alternate-bg;
  border: 1px solid $email-attachment-container-border;
  border-radius: $border-radius-base;
  line-height: $email-attachment-height + ($email-attachment-padding * 2);
  margin: 5px 0;
  min-height: $email-attachment-height + ($email-attachment-padding * 2);

  label {
    border-radius: $border-radius-base;
    color: $email-attachment-color;
    cursor: pointer;
    display: inline-block;
    font-size: $page-font-size;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin-bottom: 0;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
  }

  label * {
    pointer-events: none;
  }

  input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
  }

  .attachment-group-container {
    background-color: $email-attachment-group-bg;
    border-radius: $border-radius-base;
    display: inline-block;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;
  }

  .attachment-file-container {
    background-color: $email-attachment-bg;
    border-radius: $border-radius-base;
    color: $email-attachment-color;
    font-size: $email-attachment-font-size;
    display: inline-block;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;
  }

  .attachment-type {
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-name {
    font-weight: normal;
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-size {
    font-weight: normal;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-remove {
    background-color: $email-attachment-remove-bg;
    border-radius: $border-radius-base;
    cursor: pointer;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;

    .glyphicon {
      cursor: pointer;
    }
  }

  a.attachment-remove {
    color: $email-panel-color
  }

  .attachment-blank {
    background-color: $email-attachment-bg;
    padding: $email-attachment-padding ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);

    .glyphicon {
      top: 0;
      bottom: 0;
      cursor: pointer;
    }
  }

}


.bean-attachments:empty {
  display: none;
}

.bean-attachments {

  background: $main-alternate-bg;
  border: 1px solid $email-attachment-container-border;
  border-radius: 4px;
  line-height: $email-attachment-height + ($email-attachment-padding * 2);
  margin: 5px 0;
  min-height: $email-attachment-height + ($email-attachment-padding * 2);

  label {
    border-radius: 4px;
    color: $email-attachment-color;
    cursor: pointer;
    display: inline-block;
    font-size: $page-font-size;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin-bottom: 0;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
  }

  label * {
    pointer-events: none;
  }

  input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
  }

  .bean-attachment-group-container {
    background-color: $email-attachment-group-bg;
    border-radius: 4px;
    display: inline-block;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;
  }

  .bean-attachment-file-container {
    background-color: $email-attachment-bg;
    border-radius: 4px;
    color: $email-attachment-color;
    font-size: $email-attachment-font-size;
    display: inline-block;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;
  }

  .bean-attachment-type {
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .bean-attachment-name {
    font-weight: normal;
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .bean-attachment-size {
    font-weight: normal;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;
  }

  .bean-attachment-remove {
    background-color: $email-attachment-remove-bg;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;

    .glyphicon {
      cursor: pointer;
    }
  }

  a.bean-attachment-remove {
    color: $email-panel-color
  }

  .bean-attachment-blank {
    background-color: $email-attachment-bg;
    padding: $email-attachment-padding ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);

    .glyphicon {
      top: 0;
      bottom: 0;
      cursor: pointer;
    }
  }

}


.document-attachments:empty {
  display: none;
}

.document-attachments {

  background: $main-alternate-bg;
  border: 1px solid $email-attachment-container-border;
  border-radius: $border-radius-base;
  line-height: $email-attachment-height + ($email-attachment-padding * 2);
  margin: 5px 0;
  min-height: $email-attachment-height + ($email-attachment-padding * 2);

  label {
    border-radius: $border-radius-base;
    color: $email-attachment-color;
    cursor: pointer;
    display: inline-block;
    font-size: $page-font-size;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin-bottom: 0;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
  }

  label * {
    pointer-events: none;
  }

  input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
  }

  .attachment-group-container {
    background-color: $email-attachment-group-bg;
    border-radius: $border-radius-base;
    display: inline-block;
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;

    img {
      height: auto;
      width: $email-attachment-font-size;
    }
  }

  .attachment-file-container {
    background-color: $email-attachment-bg;
    border-radius: $border-radius-base;
    color: $email-attachment-color;
    font-size: $email-attachment-font-size;
    display: inline-block;
    min-height: $email-attachment-height + ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);
    margin: 5px;
  }

  .attachment-type {
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-name {
    font-weight: normal;
    margin: 0 2px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-size {
    font-weight: normal;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;
  }

  .attachment-remove {
    background-color: $email-attachment-remove-bg;
    border-radius: $border-radius-base;
    cursor: pointer;
    margin: 0 5px 0 0;
    padding: $email-attachment-padding;

    .glyphicon {
      cursor: pointer;
    }
  }

  a.attachment-remove {
    color: $email-panel-color
  }

  .attachment-blank {
    background-color: $email-attachment-bg;
    padding: $email-attachment-padding ($email-attachment-padding * 2);
    line-height: $email-attachment-height + ($email-attachment-padding * 2);

    .glyphicon {
      top: 0;
      bottom: 0;
      cursor: pointer;
    }
  }

}


#settingsDialog #userFolders {
  width: 100%;
  min-height: 200px;
}

.emails-list-view-toolbar-header {
  text-align: right;
}

.btn-emails-current-folder {

}


@media (max-width: $sm-breakpoint) {
  .compose-view {
    .panel {
      .col-sm-12 [type].col-sm-8.edit-view-field input[type=text] {
        width: 100%;
      }
      .col-sm-8 {
        width: 100%;
      }

      .ui-selectmenu-button.ui-button {
        width: 100%;
      }

    }
  }

}

@media (min-width: $md-breakpoint) {
  .compose-view {
    .panel {
      .col-sm-12 [type].col-sm-8.edit-view-field input[type=text] {
        width: 100%;
      }
      .col-sm-8 {
        width: 83.33%;
      }
    }
  }
  .modal {
    compose-vew {
      .panel {
        .panel-heading a div {
          width: 96.66%;
        }
      }
    }
  }
}


@media (min-width: $sm-breakpoint) {
  .modal {
    .compose-view {
      // dual column
      .col-sm-6 {
        [field="emails_email_templates_name"] input[type=text].sqsEnabled {
          margin-top: 0;
        }
      }
    }
  }

  .compose-view {
    // Single column
    .col-sm-12 {
      [type].col-sm-8.edit-view-field input[type=text].sqsEnabled {
        width: calc(100% - 96px);
      }
    }
    // dual column
    .col-sm-6 {
      [type].col-sm-8.edit-view-field input[type=text].sqsEnabled {
        width: calc(100%);
      }
    }
  }
}