GetJobber/recurring_select

@import "utilities.scss";

/* -------- resets ---------------*/

.rs_dialog_holder {
  font-size:14px;
  color:black;
  a {color:black;}
  input[type=button] {
    font: small/normal Arial,sans-serif;
    background: #F5F5F5; color: #444; border: 1px solid #ccc;
    font-size: 11px; font-weight: bold; height: 27px; line-height: 27px; outline: none; padding: 0 8px; text-align: center;

    @include rounded_corners(2px);
    @include gradiant(#f5f5f5, #f1f1f1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');

    &:hover {border-color:#aaa; color:#222; background-color:#f9f9f9; @include shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); }
    &:focus {border-color:#1E90FF;}
    &:active {border-color:#1E90FF;}
  }
}

/*------- defaults ------------ */
.rs_dialog_holder { font-family:helvetica, arial, 'san-serif'; color:#222; font-size:12px;}

/*------- specifics ------------ */

select {
  option.bold {font-weight:bold; color:red;}
}

.rs_dialog_holder {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left:0px;
  right:0px;
  top:0px;
  bottom:0px;
  background-color:rgba(255,255,255,0.2);
  z-index:50;

  .rs_dialog {
    background-color:#f6f6f6;
    border:1px solid #acacac;
    @include shadows(1px, 3px, 8px, rgba(0,0,0,0.25));
    @include rounded_corners(7px);
    min-width:200px;
    overflow:hidden;

    .rs_dialog_content {
      padding:10px;

      h1 { font-size:16px; padding:0px; margin:0 0 10px 0;
        a {float:right; display:inline-block; height:16px; width:16px; background-image:image-url("recurring_select/cancel.png"); background-position:center; background-repeat:no-repeat;}
      }

      p { padding:5px 0; margin:0; line-height: 14px;
        label {margin-right:10px;}
      }

      a { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

      .freq_option_section {
        display:none;
        label { font-weight: bold; }
        .rs_interval {width:30px; text-align:center; display: inline-block;}

        .day_holder { border-left:1px solid #ccc; position:relative; margin-top:5px; height:26px;
          a {display:block; padding:5px 7px; font-size:14px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 0px; float:left; text-decoration:none; font-weight:bold; @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.1)); background-color:#fff;;
            &.selected {background-color:#89a; color:#fff; @include inset_shadows(1px, 1px, 2px, rgba(0,0,0,0.2));  @include gradiant(#9ab, #789); }
            &:hover { cursor:pointer; background-color:#dde;}
          }
        }

        .rs_calendar_day, .rs_calendar_week {
          width:155px;
          a {display:inline-block; text-align:center; width:15px; padding:5px 3px; font-size:12px; border-style:solid; border-color:#ccc; border-width:1px 1px 1px 1px; margin:-1px 0 0 -1px; line-height:10px; background-color:#fff; font-weight:bold;
            &.selected {background-color:#89a; color:#fff; @include gradiant(#9ab, #789); @include inset_shadows(0px, 1px, 2px, rgba(0,0,0,0.2)); text-shadow:0 1px 1px #333;}
            &:hover { cursor:pointer; background-color:#dde;}
          }
          a.end_of_month { width: 81px; }
        }
        .rs_calendar_week {
          width: 191px;
          span {
            display: inline-block;
            width: 35px;
          }
        }

        .monthly_rule_type {
          span {
            margin-right: 15px;
          }
        }
      }


      .rs_summary {
        padding: 0px;
        margin-top: 15px;
        border-top: 1px solid #ccc;
        span {font-weight:bold; border-top:1px solid #fff; display:block; padding:10px 0 5px 0;}
        &.fetching {color:#999;
          span {background-image:image-url("recurring_select/throbber_13x13.gif"); background-position:center; background-repeat:no-repeat; display:inline-block; height:13px; width:13px; margin-top:-4px; padding-right:5px;}
        }
        label {font-weight:normal;}
      }

      .controls {
        padding:10px 0px 5px 0px;
        min-width:170px;
        text-align:center;
        input[type=button] { margin:0px 5px;
          &.rs_save {color:#333; }
          &.rs_cancel {color:#666;}
          &.disabled {color:#aaa; }
        }
      }
    }

    &.animated {
      .controls {position:absolute; bottom:10px; left:10px;}
      .rs_summary, .freq_option_section {display:none;}
    }

  }
}