1.table { 2 margin-bottom: 5px; 3 border-spacing: 0 2px 0 0; 4 border-collapse: separate; 5 6 thead { 7 > tr > th { 8 font-weight: 500; 9 vertical-align: top; 10 border: none; 11 border-bottom: solid 1px darken(#cae5f4, 10%); 12 13 span.title_box { 14 display: block; 15 color: #656565; 16 word-wrap: nowrap; 17 white-space: nowrap; 18 19 &.active { 20 font-weight: 700; 21 } 22 23 a { 24 text-decoration: none; 25 } 26 27 a.active { 28 color: #000; 29 } 30 31 .label-tooltip { 32 padding: 0 5px; 33 color: #3586ae; 34 background-color: lighten(#d8edf7, 5%); 35 border: none; 36 border-bottom: solid 1px #d8edf7; 37 } 38 } 39 } 40 41 > tr.filter > th { 42 background-color: lighten(#cae5f4, 8%); 43 44 input[type="text"].filter, 45 input[type="password"].filter, 46 select.filter { 47 padding: 4px; 48 font-size: 11px; 49 border-color: darken(#cae5f4, 10%); 50 } 51 } 52 } 53 54 input, 55 select { 56 margin: 0; 57 58 &.center { 59 margin: 0 auto; 60 } 61 } 62 63 tbody { 64 > tr > td { 65 padding: 3px 7px; 66 font-size: 12px; 67 color: lighten(#000, 40%); 68 word-wrap: nowrap; 69 vertical-align: middle; 70 background-color: #fff; 71 border-top: none; 72 border-bottom: solid 1px #eaedef; 73 } 74 75 > tr.odd > td { 76 background-color: #fcfdfe; 77 } 78 79 > tr:hover > td { 80 background-color: darken(#fcfdfe, 2%); 81 } 82 } 83 84 td.center, 85 th.center { 86 text-align: center; 87 } 88 89 td.pointer { 90 cursor: pointer; 91 } 92 93 td.dragHandle { 94 .dragGroup { 95 position: relative; 96 width: 80px; 97 font-size: $icon-size-base; 98 text-align: center; 99 cursor: move; 100 @include padding(4px, 4px, 4px, 20px); 101 @include border-radius(5px); 102 103 &:hover { 104 color: #fff; 105 background-color: $brand-primary; 106 } 107 108 &::before { 109 @extend .icon; 110 @extend .icon-arrows; 111 position: absolute; 112 top: 8px; 113 display: block; 114 width: 16px; 115 height: 16px; 116 @include left(6px); 117 } 118 119 .positions { 120 display: inline-block; 121 width: 43px; 122 padding: 0 5px; 123 color: #aaa; 124 text-shadow: #fff 1px 1px; 125 background-color: #eee; 126 border: solid 1px #ccc; 127 @include border-radius(3px); 128 @include box-shadow(rgba(0,0,0,0.2) 0 1px 3px inset); 129 } 130 } 131 } 132 133 tr.actions { 134 @include text-align(right); 135 } 136 137 td.actions { 138 @include text-align(right); 139 @include padding-right(5px); 140 } 141 142 th.actions .btn { 143 margin-bottom: 4px !important; 144 } 145 146 tr.myDragClass { 147 padding: 10px; 148 background-color: #eee; 149 150 td { 151 color: #fff; 152 background-color: $brand-primary !important; 153 @include transform(translate(5px,10px)); 154 } 155 } 156 157 &.tableDnD td { 158 @include transition-property(all); 159 @include transition-duration(0.2s); 160 @include transition-timing-function(ease-out); 161 } 162 163 .btn-group-action, 164 .btn-group { 165 a, 166 button { 167 @extend .btn-default; 168 // stylelint-disable-next-line 169 display: inline-flex !important; 170 align-items: center; 171 172 i { 173 // stylelint-disable-next-line 174 height: 17px !important; 175 } 176 } 177 178 .dropdown-menu { 179 padding: 0; 180 181 a { 182 width: 100%; 183 padding: 0.5rem 1rem; 184 } 185 186 .divider { 187 margin: 0; 188 } 189 } 190 191 a { 192 i { 193 margin-right: 3px; 194 } 195 } 196 } 197} 198 199tr.highlighted td { 200 color: #fff; 201 background-color: $brand-primary !important; 202} 203 204.bulk-actions { 205 @include margin(17px, 0, 0, 0); 206 207 ul i { 208 font-size: 14px; 209 } 210} 211 212.list-action-enable { 213 display: inline-block; 214 width: 30px; 215 font-size: 1.3em; 216 color: rgba(#fff, 0.8); 217 text-align: center; 218 @include border-radius(3px); 219 220 &.action-enabled { 221 color: $brand-success; 222 } 223 224 &.action-disabled { 225 color: $brand-danger; 226 } 227 228 &:hover { 229 color: #25b9d7; 230 } 231} 232 233.list-empty { 234 background-color: #fcfdfe !important; 235 236 .list-empty-msg { 237 display: block; 238 width: 50%; 239 margin: 20px auto; 240 font-family: $headings-font-family; 241 font-size: 1.4em; 242 color: #999; 243 text-align: center; 244 } 245 246 .list-empty-icon { 247 display: block; 248 clear: both; 249 font-size: $icon-size-base * 6; 250 color: #dedede; 251 text-shadow: #fff 1px 1px 0; 252 } 253} 254 255.date_range .input-group:first-child { 256 margin-bottom: 5px; 257} 258@media (max-width: $screen-sm-max) { 259 .table-responsive-row { 260 overflow: visible; 261 262 table, 263 thead, 264 tbody, 265 th, 266 td, 267 tr { 268 display: block; 269 } 270 271 thead tr { 272 display: block; 273 float: left; 274 width: 70%; 275 276 &:first-child { 277 width: 30%; 278 279 th { 280 width: 100% !important; 281 } 282 } 283 284 &:first-child:last-child { 285 display: none; 286 } 287 } 288 289 th { 290 height: 48px; 291 text-align: center; 292 } 293 294 th .fixed-width-md { 295 float: left; 296 } 297 298 th .fixed-width-sm { 299 width: 100% !important; 300 } 301 302 tr { 303 width: 100%; 304 margin-bottom: 6px; 305 border: 1px solid #ccc; 306 @include box-shadow(#EAEDEF 0 2px 0 0 ); 307 308 &:last-child { 309 border-bottom: 1px solid #ccc; 310 } 311 } 312 313 td { 314 position: relative; 315 width: 100% !important; 316 padding-left: 35% !important; 317 overflow: hidden; 318 font-size: 1.15em !important; 319 line-height: 2em !important; 320 text-align: left !important; 321 text-overflow: ellipsis; 322 white-space: nowrap; 323 324 &:last-child { 325 padding: 0 !important; 326 text-align: right !important; 327 border: none; 328 329 &::before { 330 content: none !important; 331 } 332 } 333 334 .btn-group-action { 335 .dropdown-toggle { 336 display: none !important; 337 } 338 339 ul.dropdown-menu, 340 .dropdown-menu li { 341 position: relative; 342 z-index: 13; 343 display: inline-block; 344 float: right; 345 padding: 0; 346 margin: 0; 347 background: transparent; 348 border: none; 349 @include box-shadow(none); 350 } 351 } 352 353 .dropdown-menu li a, 354 a.btn, 355 button.btn { 356 z-index: 13; 357 display: inline-block; 358 float: right; 359 padding: 12px 10px !important; 360 margin: 0 !important; 361 margin-right: 5px; 362 font-weight: 700; 363 color: $brand-primary; 364 background-color: #fff; 365 border: none; 366 border-left: 1px solid #eaedef; 367 @include box-shadow(none); 368 @include border-radius(0); 369 370 i { 371 color: $brand-primary; 372 } 373 374 &:hover { 375 color: #fff; 376 background-color: $brand-primary; 377 378 i { 379 color: #fff; 380 } 381 } 382 } 383 } 384 385 .odd td { 386 background-color: #fcfdfe !important; 387 } 388 389 td.row-selector { 390 display: none; 391 } 392 393 td::before { 394 position: absolute; 395 top: 4px; 396 left: 12px; 397 width: 30%; 398 padding-right: 10px; 399 font-size: 0.9em; 400 font-style: italic; 401 color: #aaa; 402 text-align: right; 403 white-space: nowrap; 404 border-right: 1px solid #eaedef; 405 } 406 407 .btn-group { 408 float: none !important; 409 } 410 } 411 412 .table-responsive { 413 width: 100%; 414 margin-bottom: ($line-height-computed * 0.75); 415 overflow-x: auto; 416 overflow-y: hidden; 417 border: 1px solid $table-border-color; 418 -ms-overflow-style: -ms-autohiding-scrollbar; 419 -webkit-overflow-scrolling: touch; 420 421 > .table { 422 margin-bottom: 0; 423 424 > thead, 425 > tbody, 426 > tfoot { 427 > tr { 428 > th, 429 > td { 430 white-space: nowrap; 431 } 432 } 433 } 434 } 435 436 > .table-bordered { 437 border: 0; 438 439 > thead, 440 > tbody, 441 > tfoot { 442 > tr { 443 > th:first-child, 444 > td:first-child { 445 @include border-left(0); 446 } 447 448 > th:last-child, 449 > td:last-child { 450 @include border-right(0); 451 } 452 } 453 } 454 455 > tbody, 456 > tfoot { 457 > tr:last-child { 458 > th, 459 > td { 460 border-bottom: 0; 461 } 462 } 463 } 464 } 465 } 466} 467