@c8y/style/styles/components/data-input/_measurements-time-control.less

Styles for Cumulocity IoT applications

@import "../../mixins/_clearfix.less";


/**
 * measurements time control - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
c8y-measurements-icon-bar {
  display: flex;
  align-items: center;
  min-height: 28px;
}

// Removed unused deprecated component class from selector - verified 0 usages: .c8y-datetime-picker
.measurements-time-control {
   .clearfix();
  .form-group {
    margin: 0;
    padding: 0;
    height: auto;
    &.input-sm {
      padding: 0;
      input {
        // Inline .input-sm styles (was @extend .input-sm)
        &:not(.c8y-radio):not(.c8y-checkbox) {
          padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
          height: @form-control-height-sm !important;
          font-size: @font-size-small;
          line-height: @line-height-small;
        }
      }
    }
  }
  .uib-time {
    .form-control {
      width: 50px;
    }
  }
 .input-sm {
    .uib-time .form-control {
      padding: 5px !important;
      width: 30px;

      // Inline .input-sm styles (was @extend .input-sm)
      &:not(.c8y-radio):not(.c8y-checkbox) {
        padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
        height: @form-control-height-sm !important;
        font-size: @font-size-small;
        line-height: @line-height-small;
      }
    }
  }
  .measurements-date-to {
    margin-left: @size-10;
  }
  @media (max-width: 550px) {
    width: 100%;
    .measurements-date-from,
    .measurements-date-to {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      width: 100%;
      .date-time-picker {
        margin-left: auto;
      }
    }
    .measurements-date-to {
      margin-top: 5px;
    }
  }
}

.measurements-time-control {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  .measurements-date-from,
  .measurements-date-to {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    .date-time-picker {
      margin-left: auto;
    }
    .uib-datepicker-popup {
      z-index: 1036;
    }
  }
}

.card-dashboard {
  .measurements-time-control {
    width: 100%;
    .measurements-date-from,
    .measurements-date-to {
      padding-top: @size-4;
    }
    .measurements-date-to {
      margin-left: auto;
    }
  }
}

[data-gs-width] {
  .card-dashboard {
    .measurements-time-control {
      .measurements-date-from,
      .measurements-date-to {
        width: 100%;
      }
    }
    // Removed unused logic: .top-chart-bar
  }
}

@media (min-width: 460px) and (max-width: @screen-sm-min) {
  [data-gs-width] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}

@media (min-width: @screen-sm) {
  [data-gs-width] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
  [data-gs-width='12'],
  [data-gs-width='11'],
  [data-gs-width='10'],
  [data-gs-width='9'],
  [data-gs-width='8'],
  [data-gs-width='7'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}

@media (min-width: @screen-md-min) {
  [data-gs-width='6'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}

@media (min-width: @grid-float-breakpoint) and (max-width: 1350px) {
  [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
  .open [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}

@media (min-width: 1351px) {
  [data-gs-width='4'],
  [data-gs-width='5'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
  .open [data-gs-width='4'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: 100%;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}

@media (min-width: 1620px) {
  [data-gs-width='4'],
  .open [data-gs-width='4'] {
    .card-dashboard {
      .measurements-time-control {
        .measurements-date-from,
        .measurements-date-to {
          width: auto;
        }
      }
      // Removed unused logic: .top-chart-bar
    }
  }
}