[feature] Add a SCSS to the project

[robvaneck]

hi, thanks for this library.

It would be nice to add a *.scss to the library, so people can easily style the dialog.

For anyone looking I made a simple attempt using Bootstrap 4 for my use case: https://ibb.co/moeqww

body{
  .owl-global-overlay-wrapper,
  .owl-overlay-container {
  }

  .owl-overlay-container {
    z-index: $zindex-modal-backdrop !important;
  }

  .owl-overlay-dialog-container{
    max-width: 390px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 1px -3px rgba(0,0,0,0.2);
    @include border-radius($modal-border-radius);
    border: $modal-content-border-width-fat solid $modal-content-border-color;
  }

  .owl-dt-dialog-container{
    .owl-dt-calendar,
    .owl-dt-timer {
      min-width: inherit;
      min-height: inherit;
      max-width: inherit;
      max-height: inherit;      
      height: 100%;
      width: 100%;
    }
  }

  .owl-dt-calendar-control {
    padding: 14px;
    font-size: 16px;
    font-family: $font-family-sans-serif;
  }

  .owl-dt-calendar-main {
    padding: 0 10px 0px;
  }

  .owl-dt-calendar-table {  
    .owl-dt-calendar-header {
      .owl-dt-calendar-table-divider {
        &:after{
          left: -10px;
          right: -10px;
        }
      }
    }
    .owl-dt-calendar-cell-selected {
      color: white;
      font-weight: 900;
      background-color: theme-color("primary");

      &.owl-dt-calendar-cell-today {
        box-shadow: none;
      }
    }
  }

  .owl-dt-dialog-container {
    max-height: 85vh
  }

  .owl-dt-container-buttons {
    padding: 10px;
    height: auto;

    .owl-dt-control-button {
      @extend .btn;

      &:first-child{
        @extend .btn-secondary;
        margin-right: 3px;
      }
      &:last-child{
        @extend .btn-primary;
        margin-left: 3px;
      }

      &:hover,
      &:focus{
        .owl-dt-control-button-content {
          background: none;
        }  
      }
    }
  }
}

[robvaneck]

I did a code update since library updated recently.. which will look like this: https://ibb.co/kNW8b6

body{
  .cdk-overlay-container{
    z-index: $zindex-modal-backdrop !important;
  }

  .cdk-overlay-backdrop{
  }
  .cdk-global-overlay-wrapper{
  }

  .cdk-overlay-pane{
    width: 100%;
    max-width: 290px !important;
    min-width: 280px;

    @include media-breakpoint-up(sm){
      max-width: 330px !important;
    }

    .owl-dialog-container{
      background: none;
      border-radius: 7px;
      box-shadow: 0 0 0 $modal-content-border-width-fat rgba(0,0,0,.2);

      .owl-dt-dialog-container{
        .owl-dt-container-inner{
          background: #FFF;

          .owl-dt-calendar{
            .owl-dt-calendar-control {
              padding: 14px;
              font-size: 16px;
              font-family: $font-family-sans-serif;
            }
            .owl-dt-calendar-main{
              .owl-dt-calendar-table {  
                //   .owl-dt-calendar-header {
                //     .owl-dt-calendar-table-divider {
                //       &:after{
                //         left: -10px;
                //         right: -10px;
                //       }
                //     }
                //   }
                  .owl-dt-calendar-cell-selected {
                    color: white;
                    font-weight: 900;
                    background-color: theme-color("primary");

                    &.owl-dt-calendar-cell-today {
                      box-shadow: none;
                      background-color: theme-color("primary");
                    }
                  }
                  .owl-dt-calendar-cell-today{
                    box-shadow: inset 0 0 0 2px #999;
                    font-weight: 900;
                    border: none;
                  }
                }
            }
          }

          .owl-dt-calendar,
          .owl-dt-timer {
            min-width: inherit;
            min-height: inherit;
            max-width: inherit;
            max-height: inherit;      
            height: 100%;
            width: 100%;
          }

          .owl-dt-container-buttons {
            padding: 10px;
            height: auto;

            .owl-dt-control-button {
              @extend .btn;

              &:first-child{
                @extend .btn-secondary;
                margin-right: 3px;
              }
              &:last-child{
                @extend .btn-primary;
                margin-left: 3px;
              }

              &:hover,
              &:focus{
                .owl-dt-control-button-content {
                  background: none;
                }  
              }
            }
          }
        }
      }    
    }
  }
}

[paesku]

@DanielYKPan first of all thank you for this awesome module. To have full control over styles it would be super if you could provide the scss files so that they can be imported and overwritten if necessary.

[nikunjkonduru]

Hi. Thanks for the really useful library. It would be awesome if you can expose the scss files to overwrite the styles in a easy and cleaner way. :)