@c8y/style/styles/_c8y-user-roles.less

Styles for Cumulocity IoT applications

.user-dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 30px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: @brand-10;
  vertical-align: middle;
  text-align: center;
  text-transform: capitalize;
  font-size: 16px;
  line-height: 1;
  background-color: @brand-60;
  .owned &,
  .list-group-item & {
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 32px;
  }
  &.user-disabled {
    background-color: @gray-80;
  }
}

.user-list-row {
  display: flex;
  flex-flow: row wrap;
  margin-top: calc(@margin-base * 2);
  padding: @margin-16;
  border-radius: @component-border-radius-base;
  background-color: @component-background-default;

  .boxShadowHelper(sm);
  @media (max-width: @screen-sm-max) {
    box-shadow: var(--c8y-elevation-sm);
  }
  &:first-child {
    margin-top: 0;
  }
  .col-actions .c8y-dropdown {
    color: @component-color-actions;
    opacity: @component-actions-opacity;
    &:hover,
    .open.dropdown & {
      opacity: 1;
    }
  }
  &.user-list-header {
    display: none;
    padding: 0;
    min-height: 24px;
    background-color: transparent;
  }
  .col-expand {
    order: 100;
    width: 30px;
    @media (max-width: @screen-sm-max) {
      width: 100% !important;
      text-align: center;
    }
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      .transition(transform 0.25s ease); //float: right;
      &.open {
        color: @brand-primary;

        .rotate(180deg);
      }
    }
  }
  .col-subaccounts {
    display: none;
  }
  .col-selector {
    display: none;
    font-size: 20px;
  }
  .col-globalroles {
    order: 10;
    margin: @margin-base 0;
    padding: @margin-4 0;
    width: 100%;
    .c8y-child-assets-selector .dropdown-menu.multiselect-container {
      max-width: 100%;
      width: 100%;
    }
  }
  .col-passwordstrength,
  .col-twofactorauth {
    display: none;
  }
  .col-username {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    order: 1;
    margin-bottom: 10px;
    @media (max-width: @screen-md-min) {
      width: calc(~'100% - 24px') !important;
    }
    .h4 {
      margin: 0;
    }
  }
  .col-actions {
    order: 2;
    margin: calc(@margin-16 * -1) calc(@margin-16 * -1) 0 0;
    margin-left: auto;
  }
  .col-fullname {
    order: 4;
  }
  &.owned {
    margin-top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  .disabled {
    padding-right: 5px;
    color: @state-danger-text;
    font-style: italic;
  }
}

@media (min-width: @screen-md-min) {
  .user-list-row.user-list-header {
    display: flex;
    padding-right: 40px;
    box-shadow: none;
  }
  .user-list-row {
    position: relative;
    align-items: center;
    flex-flow: row wrap;
    margin-top: @margin-base;
    padding: 6px 40px 10px 0;
    min-height: calc(@margin-base * 7);
    &.page-sticky-header {
      padding-top: 0;
      padding-bottom: 0;
      min-height: calc(@margin-base * 6);
    }

    .col-expand {
      order: 0;
      text-align: center;
      [class^='dlt-c8y-icon-'],
      [class*=' dlt-c8y-icon-'] {
        .rotate(-90deg);
        &.open {
          .rotate(0deg);
        }
      }
    }
    .col-selector {
      display: block;
      flex: 0 0 50px;
    }
    .col-username {
      flex: 0 0 auto;
      margin: 0;
      padding-right: 10px;
      width: 250px;
      .h4 {
        font-size: 100%;
      }
    }
    .col-subaccounts {
      display: block;
      flex: 0 0 30px;
      order: 2;
    }
    .col-fullname {
      flex: 0 0 auto;
      order: 5;
      margin: 0;
      padding-right: 10px;
      width: 230px;
    }
    .col-globalroles {
      flex: 0 0 240px;
      order: 7;
      margin: 0;
      padding: 0;
      max-width: 240px;
      border: 0;
      .c8y-child-assets-selector {
        display: block;
      }
    }
    .col-passwordstrength {
      display: block;
      flex: 0 0 72px;
      order: 10;
      margin-left: auto;
    }
    .col-twofactorauth {
      display: block;
      flex: 0 0 20px;
      order: 10;
    }
    .col-actions {
      position: absolute;
      top: @margin-4;
      right: 0;
      flex: 0 0 40px;
      order: 100;
      margin: 0 0 0 auto;
      width: 40px;
    }
    &.owns {
      margin-bottom: calc(@margin-base * 2);
      .tip {
        position: relative;
        flex: 0 0 100%;
        order: 900;
        height: 0;
      }
      .tip:not(.expanded):after {
        position: absolute;
        top: 5px;
        right: -35px;
        left: 5px;
        z-index: -1;
        height: 10px;
        background-color: @component-background-default;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
        content: '';
      }
      + .owned {
        margin-top: calc(@margin-base * -2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
    &.owned {
      margin-top: 1px;
    }
  }
}

.list-group-item.user {
  .col-expand {
    display: inline-block;
    padding-right: 5px;
    width: 20px;
    text-align: center;
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      .rotate(-90deg);
      &.open {
        color: @brand-primary;

        .rotate(0deg);
      }
    }
  }
  .selection-icon {
    display: none;
    margin-left: auto;
    font-size: 20px;
  }
  input[type='checkbox'] {
    width: 0;
    opacity: 0;
  }
  input[type='checkbox']:checked ~ .selection-icon {
    display: block;
  }
  &.selected {
    background-color: @status-success!important;
    color: @component-background-default;
    .col-expand,
    .col-expand .open[class^='dlt-c8y-icon-'],
    .col-expand .open[class*=' dlt-c8y-icon-'] {
      color: @component-background-default;
    }

    .text-muted {
      color: rgba(@component-background-default, 0.5);
    }
    .user-dot:not(.user-disabled) {
      background-color: @component-background-default;
      color: @brand-primary;
    }
  }
}

.item-list-row,
.list-group-item.item-list-row {
  display: flex;
  align-items: center;
  &:first-child {
    border-top: 0;
  }
  c8y-app-icon {
    font-size: 30px;
    line-height: 30px;
    .app-noicon {
      margin-bottom: -7px;
      width: 30px;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
    }
  }
  > label:not(.c8y-checkbox) {
    flex: 1 1 100%;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 100%;
    line-height: 1;
    cursor: pointer;

    overflow-wrap: break-word;
  }
}

.user-picker-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  max-height: 190px;

  .list-group {
    margin-bottom: 0;
  }
}