pip-webui/pip-webui-controls/src/date_range/date_range.less

HTML5 UI for LOB applications

// @file CSS styles for date range controls
// @copyright Digital Living Software Corp. 2014-2016

pip-date-range {

  max-width: 300px !important;
  margin-top: -5px;

  &.pip-select-flex {
    md-select {
      flex: 1;
    }

    md-select-label {
      .flex();
      flex: 1;
    }
  }

  & > div {
    display: flex;
  }

  md-select {
    display: inline-block;
    height: 30px;

    .md-select-value {
      height: 26px;

      span.md-select-icon {
        width: 12px !important;
      }

      .md-text {
        font-size: 16px;

        @media (max-width: 768px) {
            font-size: 12px;
        }
      }
    }

    margin-top: 10px !important;
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  pip-date-range {
    .pip-day {
      min-width: 102px;
    }
  }
}

@media (max-width: 768px) {

  pip-date-range {
    .md-select-value {
        min-width: 2.6em !important;

      span {
        min-width: 2.4em !important;
        flex: 1 1 auto !important;

        .md-text {
          padding-right: 0 !important;
          flex: 1 1 auto;
        }
      }

      span.md-select-icon {
        width: 12px !important;
        min-width: 12px !important;
      }
    }

    .select-day {
      min-width: 1.6em !important;

      .md-select-value {
        min-width: 1.6em !important;

        span {
          min-width: ~"calc(100% - 7px)" !important;
        }

        span.md-select-icon {
          width: 12px !important;
          min-width: 12px !important;
          margin-left: -3px;
        }
      }
    }

    .select-year {
      min-width: 2.6em !important;

      .md-select-value {
        min-width: 2.6em !important;

        span {
          min-width: ~"calc(100% - 7px)" !important;
        }
        span.md-select-icon {
          width: 12px !important;
          min-width: 12px !important;
          margin-left: -3px;
        }
      }
    }

    .select-week {
      min-width: 2.6em !important;

      .md-select-value {
        min-width: 2.6em !important;

        span {
          min-width: ~"calc(100% - 7px)" !important;
        }
        span.md-select-icon {
          width: 12px !important;
          min-width: 12px !important;
          margin-left: -3px;
        }
      }
    }

    .select-month {
      min-width: 2.7em !important;

      .md-select-value {
        min-width: 2.7em !important;

        span {
          min-width: ~"calc(100% - 7px)" !important;
        }
        span.md-select-icon {
          width: 12px !important;
          min-width: 12px !important;
          margin-left: -3px;
        }
      }
    }
  }
}