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 }