Skip to content

Instantly share code, notes, and snippets.

@cseelus
Created November 22, 2019 01:17
Show Gist options
  • Save cseelus/d5b6898bf356b56d5c88f6f7de6bd874 to your computer and use it in GitHub Desktop.
Save cseelus/d5b6898bf356b56d5c88f6f7de6bd874 to your computer and use it in GitHub Desktop.

Revisions

  1. cseelus created this gist Nov 22, 2019.
    128 changes: 128 additions & 0 deletions recurring_select.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    @mixin shadows($x_offset: 0px, $y_offset: 1px, $size: 8px, $color: rgba(0, 0, 0, 0.5)) {
    -webkit-box-shadow: $x_offset $y_offset $size $color;
    -moz-box-shadow: $x_offset $y_offset $size $color;
    -ms-box-shadow: $x_offset $y_offset $size $color;
    -o-box-shadow: $x_offset $y_offset $size $color;
    box-shadow: $x_offset $y_offset $size $color;
    }

    @mixin inset_shadows($x_offset: 0px, $y_offset: 1px, $size: 8px, $color: rgba(0, 0, 0, 0.5)) {
    -webkit-box-shadow: $x_offset $y_offset $size $color inset;
    -moz-box-shadow: $x_offset $y_offset $size $color inset;
    -ms-box-shadow: $x_offset $y_offset $size $color inset;
    -o-box-shadow: $x_offset $y_offset $size $color inset;
    box-shadow: $x_offset $y_offset $size $color inset;
    }

    @mixin rounded_corners($radius: 5px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}

    @mixin gradiant ($color_a:#aaa, $color_b:#bbb) {
    position:relative;
    background-image: -webkit-linear-gradient(top, $color_a, $color_b); /* Chrome 10+, Saf5.1+ */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color_a), to($color_b)); /* Saf4+, Chrome */
    background-image: -moz-linear-gradient(top,$color_a,$color_b); /* FF3.6 */
    background-image: -ms-linear-gradient(top, $color_a, $color_b); /* IE10 */
    background-image: -o-linear-gradient(top, $color_a, $color_b); /* Opera 11.10+ */
    }

    /* -------- 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 { position:fixed; left:0px; right:0px; top:0px; bottom:0px; padding-left:50%; 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);
    display:inline-block; min-width:200px; margin-left:-125px; overflow:hidden; position:relative;
    .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; width:70px;
    &.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;}
    }

    }
    }