yunser-ui-vue/less/theme.less

material design ui for vue2

.mu-appbar{
  background-color: @appbarColor;
  color: @appbarTextColor;
}

.mu-avatar {
  color: @avatarColor;
  background-color: @avatarBackgroundColor;
}

.mu-badge {
  background-color: @badgeColor;
  color: @badgeTextColor;
}

.mu-badge-primary {
  background-color: @badgePrimaryColor;
  color: @badgePrimaryTextColor;
}

.mu-badge-secondary {
  background-color: @badgeSecondaryColor;
  color: @badgeSecondaryTextColor;
}

body {
  background-color: @baseBackgroundColor;
  color: @baseTextColor;
  font-family: @baseFontFamily;
}

a {
  color: @baseLinkColor;
}

.mu-bottom-nav {
  background-color: @bottomNavBackgroundColor;
}

.mu-bottom-nav-shift{
  background-color: @bottomNavShiftBackgroundColor;
}

.mu-buttom-item {
  color: @bottomNavUnselectedColor;
  .mu-bottom-nav-shift & {
    color: @bottomNavShiftUnselectedColor;
  }
}

.mu-bottom-item-active{
  .mu-bottom-item-text {
    color: @bottomNavSelectedColor;
    .mu-bottom-nav-shift & {
      color: @bottomNavShiftSelectedColor;
    }
  }
  .mu-bottom-item-icon {
    color: @bottomNavSelectedColor;
    .mu-bottom-nav-shift & {
      color: @bottomNavShiftSelectedColor;
    }
  }
}

.mu-bottom-sheet {
  background-color: @bottomSheetColor;
}

.mu-card {
  background-color: @cardBackgroudColor;
}

.mu-card-header-title{
  .mu-card-title{
    color: @cardTitleColor;
  }
  .mu-card-sub-title{
    color: @cardSubtitleColor;
  }
}


.mu-card-media-title {
  background-color: @cardMediaOverlayContentBackground;
  .mu-card-title {
    color: @cardMediaTitleColor;
  }
  .mu-card-sub-title {
    color: @cardMediaSubtitleColor;
  }
}

.mu-card-title-container{
  .mu-card-title{
    color: @cardTitleColor;
  }
  .mu-card-sub-title{
    color: @cardSubtitleColor;
  }
}

.mu-card-text{
  color: @cardTextColor;
}

.mu-checkbox {
  input[type="checkbox"] {
    &:checked {
      + .mu-checkbox-wrapper {
        .mu-checkbox-icon-uncheck{
          color: @checkboxCheckedColor;
        }
        .mu-checkbox-ripple-wrapper{
          color: @checkboxCheckedColor;
        }
      }

    }
  }
}

.mu-checkbox-label {
  color: @checkboxTextColor;
  .mu-checkbox.disabled & {
    color: @checkboxDisabledColor;
  }
}

.mu-checkbox-icon-uncheck {
  color: @checkboxColor;
  .mu-checkbox.disabled & {
    color: @checkboxDisabledColor;
  }
}

.mu-checkbox-icon-checked {
  color: @checkboxCheckedColor;
  .mu-checkbox.disabled & {
    color: @checkboxDisabledColor;
  }
}

.mu-chip {
  background-color: @chipColor;
  color: @chipTextColor;
  &.hover{
    .mu-chip-delete-icon{
      color: @chipHoverDeleteColor;
    }
    background-color: @chipHoverColor;
    cursor: pointer;
  }
}

.mu-chip-delete-icon{
  color: @chipDeleteColor;
}

.mu-circular-progress-determinate-path{
  stroke: @circularProgressColor;
}

.mu-calendar {
  color: @datePickerCalendarTextColor;
}

.mu-calendar-year {
  background-color: @datePickerCalendarYearBackgroundColor;
}


.mu-date-display{
  background-color: @datePickerHeaderColor;
  color: @datePickerTextColor;
}


.mu-day-button-bg {
  background-color: @datePickerSelectColor;
}

.mu-day-button-text{
  font-weight: 400;
  position: relative;
  color: @datePickerCalendarTextColor;
  .mu-day-button.now & {
    color: @datePickerSelectColor;
  }
  .mu-day-button.hover &,
  .mu-day-button.selected &{
    color: @datePickerSelectTextColor;
  }
}

.mu-year-button-text {
  color: @datePickerCalendarTextColor;
  .mu-year-button.selected &{
    color: @datePickerSelectColor;
  }
  .mu-year-button.hover &{
    color: @datePickerSelectColor;
  }
}

.mu-dialog {
  background-color: @dialogColor;
}

.mu-dialog-footer,
.mu-dialog-header {
  &.scrollable{
    border-bottom-color: @dialogBorderColor;
  }
}

.mu-dialog-title{
  color: @dialogTitleColor;
}

.mu-dialog-body {
  color: @dialogBodyColor
}

.mu-dropDown-menu-text {
  color: @dropDownMenuTextColor;
}

.mu-dropDown-menu-icon {
  color: @dropDownMenuIconColor;
}

.mu-dropDown-menu-line {
  background-color: @dropDownMenuLineColor;
}

// flatbutton
.mu-flat-button {
  color: @flatButtonTextColor;
  background-color: @flatButtonColor;
  .mu-circle-ripple {
    color: @flatButtonTextColor;
  }
}

.mu-flat-button-primary{
  color: @flatButtonPrimaryTextColor;
}

.mu-flat-button-secondary{
  color: @flatButtonSecondaryTextColor;
}

.mu-float-button {
  background-color: @floatButtonColor;
  color: @floatButtonIconColor;
  &.disabled{
    color: @floatButtonDisabledIconColor;
    cursor: default;
    background-color: @floatButtonDisabledColor;
  }
  &.hover,
  &:active{
    .mu-float-button-wrapper {
      background-color: fade(@floatButtonIconColor, 30%);
    }
  }
}

.mu-float-button-secondary {
  background-color: @floatButtonSecondaryColor;
  color: @floatButtonSecondaryIconColor;
}

.mu-grid-tile-titlebar{
  background-color: @gridListTitlebarColor;
}

.mu-grid-tile-title-container{
  color: @gridListTextColor;
}

.mu-grid-tile-action {
  .mu-icon {
    color: @gridListTextColor;
  }
}

.mu-icon-button-primary{
  color: @iconButtonPrimaryColor;
}

.mu-icon-button-secondary{
  color: @iconButtonSecondaryColor;
}

// circle
.mu-circle-spinner{
  border-color: @circleColor;
}

.mu-circle-secondary {
  border-color: @circleSecondaryColor;
}

.mu-linear-progress{
  background-color: @linearProgressColor;
}

.mu-linear-progress-indeterminate{
  background-color: @linearProgressFillColor;
}

.mu-linear-progress-determinate{
  background-color: @linearProgressFillColor;
}


// list
.mu-item-wrapper{
  &.hover {
    background-color: @listHoverColor;
  }
}
.mu-item {
  color: @listTextColor;
  &.selected {
    color: @listSelectedColor;
  }
}

.mu-item-link-icon{
  color: @listRightIconColor;
}

.mu-item-left{
  color: @listLeftIconColor;
}

.mu-item-right{
  color: @listRightIconColor;
}

.mu-item-after{
  color: @listSecondaryTextColor;
}

.mu-item-text{
  color: @listSecondaryTextColor;
}

.mu-menu-item-wrapper{
  color: @menuTextColor;
  &.active {
    color: @menuSelectColor;
  }
  &.hover {
    background-color: @menuHoverColor;
  }
  &.disabled {
    color: @menuDisabledColor;
  }
}

.mu-menu-item-left-icon{
  color: @menuLeftIconColor;
}

.mu-menu-item-right-icon {
  color: @menuRightIconColor;
}

.mu-pagination-item{
  color: @paginationTextColor;
  &.hover {
    background-color: @paginationHoverBackgroundColor;
  }
  &.active {
    color: @paginationActiveColor;
    background-color: @paginationActiveBackgroundColor;
  }
  &.disabled {
    color: @paginationDisabledColor;
  }
}

.mu-paper {
  background-color: @paperBackgroundColor;
  color: @paperColor;
}

.mu-picker{
  background-color: @pickerColor;
}

.mu-picker-center-highlight {
  &::before,
  &::after {
    background-color: @pickerBorderColor;
  }
}


.mu-picker-slot.mu-picker-slot-divider {
  color: @pickerSelectedTextColor;
}

.mu-picker-item{
  color: @pickerTextColor;
  &.selected {
    color: @pickerSelectedTextColor;
  }
}

.mu-popover {
  background-color: @popoverColor;
}

.mu-popup {
  background-color: @popupColor;
}

.mu-radio {
  input[type="radio"] {
    &:checked {
      + .mu-radio-wrapper {
        .mu-radio-icon-uncheck{
          color: @radioCheckedColor;
        }
        .mu-radio-ripple-wrapper{
          color: @radioCheckedColor;
        }
      }

    }
  }
}

.mu-radio-label {
  color: @radioTextColor;
  .mu-radio.disabled & {
    color: @radioDisabledColor;
  }
}

.mu-radio-icon-uncheck {
  color: @radioColor;
  .mu-radio.disabled & {
    color: @radioDisabledColor;
  }
}

.mu-radio-icon-checked {
  color: @radioCheckedColor;
  .mu-radio.disabled & {
     color: @radioDisabledColor;
   }
}



// raisedButton
.mu-raised-button{
  background-color: @raisedButtonColor;
  color: @raisedButtonTextColor;
  &.hover {
    .mu-raised-button-wrapper {
      background-color: fade(@raisedButtonTextColor, 10%);
    }
  }
  &.disabled{
    color: @raisedButtonDisabledTextColor;
    background-color: @raisedButtonDisabledColor;
  }
}

.mu-raised-button-primary{
  background-color: @raisedButtonPrimaryColor;
}

.mu-raised-button-secondary{
  background-color: @raisedButtonSecondaryColor;
}

.mu-refresh-control {
  color: @refreshControlColor;
}

.mu-slider-track {
  background-color: @sliderTrackColor;
}


.mu-slider-fill{
  background-color: @sliderSelectionColor;
  &.disabled {
    background-color: @sliderDisabledColor;
  }
}

.mu-slider-thumb{
  background-color: @sliderSelectionColor;
  color: @sliderSelectionColor;
  .mu-slider.zero &,
  .mu-slider.disabled &{
    border-color: @sliderDisabledColor;
    color: @sliderDisabledColor;
    background-color: @sliderZeroColor;
  }
}

.mu-snackbar {
  color: @snackbarTextColor;
  background-color: @snackbarColor;
}

.mu-step-button {
  background-color: @stepperBackgroundColor;
  &.hover {
    background-color: @stepperHoverBackgroundColor
  }
}

.mu-step-connector-line {
  border-color: @stepperConnectorLineColor;
}

.mu-step-content{
  .mu-stepper-vertical & {
    border-left: 1px solid @stepperConnectorLineColor;
  }
}


.mu-step-label{
  color: @stepperTextColor;
  &.disabled {
    color: @stepperDisabledTextColor;
  }
}


.mu-step-label-icon {
  color: @stepperInactiveIconColor;
  .mu-step-label.disabled &{
    color: @stepperInactiveIconColor;
  }
  .mu-step-label.completed &,
  .mu-step-label.active & {
    color: @stepperIconColor;
  }
}

.mu-step-label-circle{
  background-color: @stepperInactiveIconColor;
  color: @stepperNumTextColor;
  .mu-step-label.disabled &{
    background-color: @stepperInactiveIconColor;
  }
  .mu-step-label.completed &,
  .mu-step-label.active & {
    background-color: @stepperIconColor;
  }
}

// subheader
.mu-sub-header{
  color: @subHeaderColor;
}

.mu-switch {
  input[type="checkbox"] {
    &:checked {
      + .mu-switch-wrapper {
        .mu-switch-track{
          background-color: @switchTrackOnColor;
        }
        .mu-switch-thumb{
          background-color: @switchThumbOnColor;
          color: @switchThumbOnColor;
        }
      }

    }
  }
  &.disabled {
    input[type="checkbox"]:checked{
      + .mu-switch-wrapper {
        .mu-switch-track{
          background-color: @switchTrackDisabledColor;
        }
        .mu-switch-thumb{
          background-color: @switchThumbDisabledColor;
        }
      }
    }
  }
}


.mu-switch-label {
  color: @switchTextColor;
  .mu-switch.disabled & {
    color: @switchTextDisabledColor;
  }
}

.mu-switch-track {
  background-color: @switchTrackOffColor;
  .mu-switch.disabled & {
    background-color: @switchTrackDisabledColor;
  }
}

.mu-switch-thumb {
  color: @switchTextColor;
  background-color: @switchThumbOffColor;
  .mu-switch.disabled & {
    background-color: @switchThumbDisabledColor;
  }
}

.mu-table {
  background-color: @tableBackgroundColor;
}

.mu-thead {
  border-bottom-color: @tableBorderColor;
}

.mu-th {
  color: @tableTheadTextColor;
}

.mu-tr {
  border-bottom-color: @tableBorderColor;
  color: @tableTextColor;
  &.selected {
    background-color: @tableRowSelectedBackgroundColor;
  }
  &.hover {
    background-color: @tableRowHoverBackgroundColor;
  }
  &.stripe {
    background-color: @tableRowStripeBackgroundColor;
  }

  .mu-tfoot & {
    border-top-color: @tableBorderColor;
  }
}

.mu-tabs{
  background-color: @tabsBackgroundColor;
}
.mu-tab-link-highlight {
  background-color: @tabsLineColor;
}
.mu-tab-link{
  color: @tabsTextColor;
}
.mu-tab-active {
  color: @tabsSelectedTextColor;
}

.mu-text-field{
  color: @textFieldTextColor;
  &.focus-state {
    color: @textFieldFocusTextColor;
    &.error{
      color: @textFieldErrorTextColor;
    }
  }
  &.disabled {
    color: @textFieldDisabledTextColor;
  }
}

.mu-text-field-input {
  color: @textFieldInputColor;
}


.mu-text-field-help {
  .mu-text-field.error &{
    color: @textFieldErrorTextColor;
  }
}

.mu-text-field-line {
  background-color: @textFieldLineColor;
  &.disabled {
    border-color: @textFieldDisabledLineColor;
  }
}

.mu-text-field-focus-line{
  background-color: @textFieldFocusLineColor;
  &.error {
    background-color: @textFieldErrorLineColor;
  }
}


.mu-text-field-hint {
  color: @textFieldHintColor;
}
.mu-text-field-label {
  .mu-text-field.has-label &.float {
    color: @textFieldHintColor
  }
}

.mu-clock-circle {
  background-color: @timePickerClockCircleColor;
}

.mu-time-display {
  background-color: @timePickerHeaderColor;
  color: @timePickerColor;
}

.mu-clock-number{
  &.selected {
    background-color: @timePickerSelectColor;
    color: @timePickerSelectTextColor;
  }
}

.mu-clock-pointer {
  background-color: @timePickerSelectColor;

}

.mu-clock-pointer-mark {
  background-color: @timePickerSelectTextColor;
  border-color:  @timePickerSelectColor;
}

.mu-toast {
  background-color: @toastColor;
  color: @toastTextColor;
}

.mu-tooltip{
  color: @tooltipTextColor;
}

.mu-tooltip-ripple.when-shown {
  background-color: @tooltipRippleColor;
}