github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/bootstrap-datepicker/less/datepicker.less (about)

     1  /*!
     2   * Datepicker for Bootstrap
     3   *
     4   * Copyright 2012 Stefan Petre
     5   * Improvements by Andrew Rowls
     6   * Licensed under the Apache License v2.0
     7   * http://www.apache.org/licenses/LICENSE-2.0
     8   *
     9   */
    10  
    11  .datepicker {
    12  	padding: 4px;
    13  	.border-radius(4px);
    14  	&-inline {
    15  		width: 220px;
    16  	}
    17  	direction: ltr;
    18  	&&-rtl {
    19  		direction: rtl;
    20  		table tr td span {
    21  			float: right;
    22  		}
    23  	}
    24  	&-dropdown {
    25  		top: 0;
    26  		left: 0;
    27  		&:before {
    28  			content: '';
    29  			display: inline-block;
    30  			border-left:   7px solid transparent;
    31  			border-right:  7px solid transparent;
    32  			border-bottom: 7px solid #ccc;
    33  			border-top:    0;
    34  			border-bottom-color: rgba(0,0,0,.2);
    35  			position: absolute;
    36  		}
    37  		&:after {
    38  			content: '';
    39  			display: inline-block;
    40  			border-left:   6px solid transparent;
    41  			border-right:  6px solid transparent;
    42  			border-bottom: 6px solid @white;
    43  			border-top:    0;
    44  			position: absolute;
    45  		}
    46  		&.datepicker-orient-left:before   { left: 6px; }
    47  		&.datepicker-orient-left:after    { left: 7px; }
    48  		&.datepicker-orient-right:before  { right: 6px; }
    49  		&.datepicker-orient-right:after   { right: 7px; }
    50  		&.datepicker-orient-top:before    { top: -7px; }
    51  		&.datepicker-orient-top:after     { top: -6px; }
    52  		&.datepicker-orient-bottom:before {
    53  			bottom: -7px;
    54  			border-bottom: 0;
    55  			border-top:    7px solid #999;
    56  		}
    57  		&.datepicker-orient-bottom:after {
    58  			bottom: -6px;
    59  			border-bottom: 0;
    60  			border-top:    6px solid @white;
    61  		}
    62  	}
    63  	>div {
    64  		display: none;
    65  	}
    66  	&.days div.datepicker-days {
    67  		display: block;
    68  	}
    69  	&.months div.datepicker-months {
    70  		display: block;
    71  	}
    72  	&.years div.datepicker-years {
    73  		display: block;
    74  	}
    75  	table{
    76  		margin: 0;
    77  		-webkit-touch-callout: none;
    78  		-webkit-user-select: none;
    79  		-khtml-user-select: none;
    80  		-moz-user-select: none;
    81  		-ms-user-select: none;
    82  		user-select: none;
    83  	}
    84  	td,
    85  	th{
    86  		text-align: center;
    87  		width: 20px;
    88  		height: 20px;
    89  		.border-radius(4px);
    90  
    91  		border: none;
    92  	}
    93  	// Inline display inside a table presents some problems with
    94  	// border and background colors.
    95  	.table-striped & table tr {
    96  		td, th {
    97  			background-color:transparent;
    98  		}
    99  	}
   100  	table tr td {
   101  		&.day:hover, &.day.focused {
   102  			background: @grayLighter;
   103  			cursor: pointer;
   104  		}
   105  		&.old,
   106  		&.new {
   107  			color: @grayLight;
   108  		}
   109  		&.disabled,
   110  		&.disabled:hover {
   111  			background: none;
   112  			color: @grayLight;
   113  			cursor: default;
   114  		}
   115  		&.today,
   116  		&.today:hover,
   117  		&.today.disabled,
   118  		&.today.disabled:hover {
   119  			@todayBackground: lighten(@orange, 30%);
   120  			.buttonBackground(@todayBackground, spin(@todayBackground, 20));
   121  			color: #000;
   122  		}
   123  		&.today:hover:hover { // Thank bootstrap 2.0 for this selector...
   124  			// TODO: Bump min BS to 2.1, use @textColor in buttonBackground above
   125  			color: #000;
   126  		}
   127  		&.today.active:hover {
   128  			color: #fff;
   129  		}
   130  		&.range,
   131  		&.range:hover,
   132  		&.range.disabled,
   133  		&.range.disabled:hover {
   134  			background:@grayLighter;
   135  			.border-radius(0);
   136  		}
   137  		&.range.today,
   138  		&.range.today:hover,
   139  		&.range.today.disabled,
   140  		&.range.today.disabled:hover {
   141  			@todayBackground: mix(@orange, @grayLighter, 50%);
   142  			.buttonBackground(@todayBackground, spin(@todayBackground, 20));
   143  			.border-radius(0);
   144  		}
   145  		&.selected,
   146  		&.selected:hover,
   147  		&.selected.disabled,
   148  		&.selected.disabled:hover {
   149  			.buttonBackground(lighten(@grayLight, 10), darken(@grayLight, 10));
   150  			color: #fff;
   151  			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   152  		}
   153  		&.active,
   154  		&.active:hover,
   155  		&.active.disabled,
   156  		&.active.disabled:hover {
   157  			.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
   158  			color: #fff;
   159  			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   160  		}
   161  		span {
   162  			display: block;
   163  			width: 23%;
   164  			height: 54px;
   165  			line-height: 54px;
   166  			float: left;
   167  			margin: 1%;
   168  			cursor: pointer;
   169  			.border-radius(4px);
   170  			&:hover {
   171  				background: @grayLighter;
   172  			}
   173  			&.disabled,
   174  			&.disabled:hover {
   175  				background:none;
   176  				color: @grayLight;
   177  				cursor: default;
   178  			}
   179  			&.active,
   180  			&.active:hover,
   181  			&.active.disabled,
   182  			&.active.disabled:hover {
   183  				.buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20));
   184  				color: #fff;
   185  				text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   186  			}
   187  			&.old,
   188  			&.new {
   189  				color: @grayLight;
   190  			}
   191  		}
   192  	}
   193  
   194  	th.datepicker-switch {
   195  		width: 145px;
   196  	}
   197  
   198  	thead tr:first-child th,
   199  	tfoot tr th {
   200  		cursor: pointer;
   201  		&:hover{
   202  			background: @grayLighter;
   203  		}
   204  	}
   205  	/*.dow {
   206  		border-top: 1px solid #ddd !important;
   207  	}*/
   208  
   209  	// Basic styling for calendar-week cells
   210  	.cw {
   211  		font-size: 10px;
   212  		width: 12px;
   213  		padding: 0 2px 0 5px;
   214  		vertical-align: middle;
   215  	}
   216  	thead tr:first-child th.cw {
   217  		cursor: default;
   218  		background-color: transparent;
   219  	}
   220  }
   221  .input-append,
   222  .input-prepend {
   223  	&.date {
   224  		.add-on i {
   225  			cursor: pointer;
   226  			width: 16px;
   227  			height: 16px;
   228  		}
   229  	}
   230  }
   231  .input-daterange {
   232  	input {
   233  		text-align:center;
   234  	}
   235  	input:first-child {
   236  		.border-radius(3px 0 0 3px);
   237  	}
   238  	input:last-child {
   239  		.border-radius(0 3px 3px 0);
   240  	}
   241  	.add-on {
   242  		display: inline-block;
   243  		width: auto;
   244  		min-width: 16px;
   245  		height: @baseLineHeight;
   246  		padding: 4px 5px;
   247  		font-weight: normal;
   248  		line-height: @baseLineHeight;
   249  		text-align: center;
   250  		text-shadow: 0 1px 0 @white;
   251  		vertical-align: middle;
   252  		background-color: @grayLighter;
   253  		border: 1px solid #ccc;
   254  		margin-left:-5px;
   255  		margin-right:-5px;
   256  	}
   257  }