39 lines
		
	
	
	
		
			1.2 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			39 lines
		
	
	
	
		
			1.2 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| @import "@vuepic/vue-datepicker/dist/main.css";
 | |
| @import "vars.scss";
 | |
| 
 | |
| // Must use #{ }
 | |
| // Remark: https://stackoverflow.com/questions/50202991/unable-to-set-scss-variable-to-css-variable
 | |
| .dp__theme_dark {
 | |
|     --dp-background-color: #{$dark-bg2};
 | |
|     --dp-text-color: #{$dark-font-color};
 | |
|     --dp-hover-color: #484848;
 | |
|     --dp-hover-text-color: #ffffff;
 | |
|     --dp-hover-icon-color: #959595;
 | |
|     --dp-primary-color: #{#5cdd8b};
 | |
|     --dp-primary-text-color: #ffffff;
 | |
|     --dp-secondary-color: #494949;
 | |
|     --dp-border-color: #{$dark-border-color};
 | |
|     --dp-menu-border-color: #2d2d2d;
 | |
|     --dp-border-color-hover: #{$dark-border-color};
 | |
|     --dp-disabled-color: #212121;
 | |
|     --dp-scroll-bar-background: #212121;
 | |
|     --dp-scroll-bar-color: #484848;
 | |
|     --dp-success-color: #{$primary};
 | |
|     --dp-success-color-disabled: #428f59;
 | |
|     --dp-icon-color: #959595;
 | |
|     --dp-danger-color: #e53935;
 | |
|     --dp-highlight-color: rgba(0, 92, 178, 0.2);
 | |
| }
 | |
| 
 | |
| .dp__input {
 | |
|     border-radius: $border-radius;
 | |
| }
 | |
| 
 | |
| // Fix: Full width of text input when using "inline textInput inlineWithInput" mode
 | |
| .dp__main > div[aria-label="Datepicker input"] {
 | |
|     width: 100%;
 | |
| }
 | |
| 
 | |
| .dp__main > div[aria-label="Datepicker menu"]:nth-child(2) {
 | |
|     margin-top: 20px;
 | |
| }
 |