SuiteCRM-Core/themes/suite8/css/suitep-base/aow.scss

/**
 * SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
 * Copyright (C) 2021 SalesAgility Ltd.
 *
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
 * WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see http://www.gnu.org/licenses.
 *
 * In accordance with Section 7(b) of the GNU Affero General Public License
 * version 3, these Appropriate Legal Notices must retain the display of the
 * "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
 * feasible for technical reasons, the Appropriate Legal Notices must display
 * the words "Supercharged by SuiteCRM".
 */

 #condition_lines_span {
  display: block;
}

#aow_conditionLines {
  display: block;
  .suitepicon-action-minus {
    font-size: 15px;
  }
}

#aow_conditionLines > thead {
  display: block;
}

#aow_conditionLines > thead td {
  background-color: $list-view-header-bg;
  padding: 8px 3px 8px 2px;
  color: $list-view-header-color;
  font-weight: bold;
  font-size: $page-font-size;
}

.detail-view-field #aow_conditionLines thead td:first-of-type {
  border-top-left-radius: 4px;
  height: 32px;
}

.edit-view-field #aow_conditionLines thead td:first-of-type {
  border-top-left-radius: 4px;
  height: 34px;
  width: 42px;
}

#aow_conditionLines thead td:last-of-type {
  border-top-right-radius: 4px;
  padding-left: 8px;
  width: 26%;
}

#aow_conditionLines > thead > tr {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: $list-view-header-bg;
  display: block;
}

#aow_conditionLines > tbody {
  display: block;
}

#aow_conditionLines > tbody > tr {
  display: block;
  border-bottom: 1px $main-alternate-bg solid;
}

#aow_conditionLines > tbody > tr > td {
  vertical-align: top;
}

#aow_conditionLines td:first-of-type {
  display: inline-block;
}

#aow_conditionLines td:not(:first-of-type) {
  display: inline-block;
  width: 16.67%; // 100 / 6 columns
}

#aow_conditionLines tbody td {
  margin-top: 2px;
  margin-bottom: 2px;
  min-height: 32px;
}

#aow_conditionLines tbody td:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#aow_conditionLines tbody td:last-of-type {
  padding-left: 8px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 26%;
}

#aow_conditionLines td:first-of-type button {
  margin-top: 6px;
  line-height: 30px;  
}

#aow_conditionLines input {
  margin-top: 8px;
}

#aow_conditionLines input.sqsEnabled {
  width: 62.5%;
}

#aow_conditionLines input[type=checkbox] {
  margin-top: 14px;
}

#aow_conditionLines textarea {
  margin-top: 8px;
  width: 95%;
}

#aow_conditionLines select {
  width: 95%;
  margin-top: 8px;
}

/** fix datetimes **/
#aow_conditionLines > tbody > tr > td > table.dateTime {
  display: inline-block;

  .dateTimeComboColumn {
    display: inline-block;
    .calendarstart {
      border: none;
      background: transparent;
      position: relative;
      bottom: 0.4em;
      opacity: 0.3;
    }
  }
  .dateTimeSection {
    margin-left: 2em;
  }
}

@media (max-width: 1800px) {
  // Date type
  #aow_conditionLines select[id$="][0]"] {
    width: 45%;
    margin-bottom: 4px;
  }

  #aow_conditionLines select[id$="][1]"] {
    width: 45%;
    margin-bottom: 4px;
  }

  #aow_conditionLines input[id$="][2]"] {
    width: 45%;
    margin-bottom: 4px;
  }

  #aow_conditionLines select[id$="][3]"] {
    width: 45%;
    margin-bottom: 4px;
  }

}

@media (min-width: 1800px) {
  // Date type
  #aow_conditionLines select[id$="][0]"] {
    width: 24%;
  }

  #aow_conditionLines select[id$="][1]"] {
    width: 24%;
  }

  #aow_conditionLines input[id$="][2]"] {
    width: 24%;
  }

  #aow_conditionLines select[id$="][3]"] {
    width: 24%;
  }
}

[field="action_lines"] {
  display: block;
  width: 100%;
}

#actionLines [type="button"] {
  background-color: $danger-btn-bg;
  padding: 0;
  margin-right: 4px;
  border-radius: $border-radius-base;
}

#actionLines {
  display: block;
}

#actionLines > tr {
  display: block;
}

#actionLines > tr > td {
  display: block;
}

#actionLines td[field] label {
  margin-right: 8px;
}

#actionLines > tr > td {
  border: 1px solid $workflow-action-bg;
  border-radius: $border-radius-base;
  margin-bottom: 4px;
}

#actionLines .action-table {
  display: block;
  width: 100%;
  fieldset {
    margin-top: 10px;
  }
}

#actionLines .action-table tbody {
  display: block;
  width: 100%;
}

#actionLines .action-table tr {
  display: block;
  width: 100%;
}

[data-workflow-action-parameter] input.sqsEnabled {
  margin-top: 0px;
  width: 50%;
}

.col-sm-12 .col-sm-8.edit-view-field [data-workflow-action-parameter] [data-workflow-action="create-record"] input.sqsEnabled {
  width: 65%;
}

.col-sm-12 .col-sm-8.edit-view-field [data-workflow-action-parameter] [data-workflow-action="modify-record"] input.sqsEnabled {
  width: 65%;
}

.col-sm-12 .col-sm-8.edit-view-field [data-workflow-action-parameter] [data-workflow-action="send-email"] input.sqsEnabled {
  width: 10%;
}

.col-sm-12 .col-sm-8.edit-view-field [data-workflow-action-parameter] [data-workflow-action="send-email"] .id-ff.multiple > button{
  margin-left: 0;
}

#actionLines .action-table td {
  display: inline-block;
}

#actionLines .action-table > tbody > tr:first-of-type > td:first-of-type {
  padding-left: 8px;
}

#actionLines .action-table > tbody > tr:first-of-type > td {
  border-bottom: 1px solid $workflow-action-bg;
  padding-top: 4px;
}

#actionLines td[field=action] {
  width: 65%;
  height: 64px;
}

#actionLines td[field=action] select {
  margin-left: 20px;
}

#actionLines td[field=name] {
  width: 30%;
  height: 64px;
}

#actionLines td[field=name] input[type=text] {
  width: 80%;
}

#actionLines td[field=delete] {
  width: 5%;
  height: 64px;
}

#actionLines td[field=delete] .delete-btn {
  float: right;
  margin-right: 2em;
}

#actionLines td[field=delete] .delete-btn .btn {
  background: transparent;
  border: none;
  color: grey;
  vertical-align: middle;
  position: relative;
  top: 0.5em;
  font-size: 16px;
}

.edit tr td [data-workflow-action] td {
  vertical-align: middle;
}

[data-workflow-action-line] {
  vertical-align: top;
}

[data-workflow-action-line] td:nth-of-type(3) select {
  width: auto;
}

[data-workflow-action-line] select[id$="][0]"] {
  width: 45%;
  margin-bottom: 4px;
}

[data-workflow-action-line] select[id$="][1]"] {
  width: 45%;
  margin-bottom: 4px;
}

.col-sm-12 .edit-view-field [data-workflow-action-line] input[id$="][2]"] {
  width: 45%;
  margin-bottom: 4px;
}

.col-sm-12 .edit-view-field [data-workflow-action-line] input[id$="][2]"][type=checkbox] {
  width: 16px;
}

[data-workflow-action-line] select[id$="][3]"] {
  width: 45%;
  margin-bottom: 4px;
}

[data-workflow-action="send-email"] > tbody > tr > td {
  line-height: $input-line-height;
}

[data-workflow-action="send-email"] > tbody > tr:nth-of-type(1) > td {
  width: 20%;
}

[data-workflow-action="send-email"] > tbody > tr:nth-of-type(2) > td:nth-of-type(2) {
  width: 100%;
}

[data-workflow-action="send-email"] > tbody > tr:nth-of-type(2) > td:nth-of-type(2) td:nth-of-type(1) {
  padding-left: 4px;
}

[data-workflow-action="send-email"] > tbody > tr:nth-of-type(2) > td:nth-of-type(2) td {
  padding-bottom: 8px;
  padding-top: 8px;
  width: 100%;
}

[data-workflow-action="send-email"] > tbody > tr:nth-of-type(2) > td:nth-of-type(2) td input[type=text] {
  width: auto;
}

#relate_label {
  line-height: $input-line-height;
  margin-right: 2em;
}

.relate_label {
  input[type=checkbox] {
    margin-left: 0.6em;
  }
}

#deleteGroup img {
  background-color: $danger-btn-bg;
  padding: 0;
  margin-right: 4px;
  border: 1px solid $danger-btn-bg;
  border-radius: $border-radius-base;
}

.btn-danger {
  background-color: $danger-btn-bg;
}

.btn-danger:hover {
  background-color: $danger-btn-bg-hover;
}

.btn-danger:active {
  background-color: $danger-btn-bg;
}

.btn-danger:focus {
  background-color: $danger-btn-bg;
}

[data-workflow-action] .lines tbody > tr > td {
  margin-bottom: 4px;
  min-height: 64px;
  padding-left: 8px;
  padding-right: 8px;
}

[data-workflow-action] .relationship tbody > tr > td {
  padding-left: 8px;
  padding-right: 8px;
  min-height: 64px;
}

[data-workflow-action] .email-line tbody > tr > td {
  padding-left: 8px;
  padding-right: 8px;
}

[data-workflow-action] .email-line tbody > tr > td select {
  margin-left: 8px;
  margin-right: 8px;
}

[data-workflow-action] .email-line tbody > tr > td button {
  margin-left: 8px;
  margin-right: 8px;
}

[data-workflow-action] .email-line tbody > tr > td input {
  margin-left: 8px;
  margin-right: 8px;
}

[data-workflow-action] .name_label {
  width: 70%;
}

[data-workflow-action] .name_label {
  width: 30%;
}

[data-workflow-action] .lines tbody > tr > td {
  margin-bottom: 4px;
  min-height: 64px;
}

[data-workflow-action] .lines tbody > tr > td:first-of-type button {
  margin-top: 8px;
  line-height: 30px;
}

[data-workflow-action] .lines select {
  margin-top: 8px;
}

[data-workflow-action] .lines tbody > tr > td input {
  margin-top: 8px;
}

[data-workflow-action] .lines tbody > tr > td input.sqsEnabled {
  width: 62.5%;
}

[data-workflow-action] .lines tbody > tr > td input[type=checkbox] {
  margin-top: 13px;
}

[data-workflow-action] .lines tbody > tr > td textarea {
  margin-top: 8px;
  width: 95%;
}

[data-workflow-action-parameter] [colspan="4"] {
  display: block;
  width: 100%;
}

[data-workflow-action-parameter] > td {
  display: block;
  width: 100%;
}

#aow_conditionLines {
  .selectcrossbtn {
    button {
      border: none!important;
      padding: 0!important;
      vertical-align: middle;
    }
  }  
}

table.lines {
  button {
    background: transparent !important;
    border: 1px solid $shell-grey;
    height: 28px!important;
    color: $black;
    padding: 7px!important;
  }
}

#actionLines {
  .relationship {
    tbody {
      tr {
        td {
          min-height: auto;
        }
      }
    }
    select {
      width: 100%;
    }
  }
  .lines {
    tbody tr td {
      min-height: auto;
      width: auto;
      input[type=checkbox] {
        margin-top: 15.4px;
      }
      input[type="text"] {
        width: auto;
      }
    }
    select {
      width: 100%;
    }
    .calendarstart {
      top: -0.4em;
    }
  }
}

table.relationship {
  button {
    background: transparent !important;
    border: 1px solid $shell-grey;
    height: 28px!important;
    color: $black;
    padding: 7px!important;
  }  
}

table.email-line {
  button {
    background: transparent !important;
    border: 1px solid $shell-grey;
    height: 28px!important;
    color: $black;
    padding: 7px!important;
    top: 0.7em;
    position: relative;
  }
}

.computeFieldParametersContainer ,.computeFieldRelationParametersContainer ,.computeFieldFormulaContainer {
  button {
    background: transparent !important;
    border: 1px solid $shell-grey;
    height: 28px!important;
    color: $black;
    padding: 7px!important;
    top: 0.7em;
    position: relative;
  }
}

.datecalendar {
  .btn {
    background: $white;
    border: none;
    box-shadow: none;
    opacity: 0.2;
    position: relative;
    top: 0.3em;
  }
}

.view-module-AOW_WorkFlow {
  .action-buttons {
    margin-top: -1.5em;
    top: -2em;
  }
  #plus-icon {
    background: $white;
    border: 1px solid $panel-border-bg;
    border-radius: $border-radius-base;
    padding: 0.5em 0.4em 0.2em 0.6em;
    font-size: 16px;
    line-height: 0;
    font-weight: bold;
  }
  #aow_conditionLines [type="button"] {
    background-color: $white;
    padding: 7px;
    margin-right: 10px;
    border: 1px solid #93a4b3;
    border-radius: 4px;
    color: #000;
    height: 29px;
    width: 2.4em;
  }
  #aow_conditionLines input {
    margin-top: 5px;
    line-height: 17px;
  }
  #aow_conditionLines > tbody > tr > td > table.dateTime .dateTimeComboColumn .calendarstart {
    top: -6px;
  }
  #aow_conditionLines > tbody > tr > td > table.dateTime .dateTimeSection {
    margin-top: -8px;
  }
}