151946552SMichael Davis 251946552SMichael Davis// Table Header 351946552SMichael Davis.table-header { 451946552SMichael Davis width: 100%; 56f7ec80eSYoshie Muranaka color: $primary-dark; 651946552SMichael Davis line-height: 30px; 79486f54aSMichael Davis padding: .8em 0 0; 89486f54aSMichael Davis margin-bottom: .8em; 96f7ec80eSYoshie Muranaka border-bottom: 1px solid $border-color-01; 109486f54aSMichael Davis font-size: 1.25em; 1151946552SMichael Davis @include mediaQuery(medium) { 129486f54aSMichael Davis margin: 1.8em 0; 1351946552SMichael Davis } 1451946552SMichael Davis} 1551946552SMichael Davis 1651946552SMichael Davis// Table 1751946552SMichael Davis.table { 1851946552SMichael Davis width: 100%; 1951946552SMichael Davis} 2051946552SMichael Davis 2184e114a4SGunnar Mills.table__body { 2284e114a4SGunnar Mills width: 100%; 2384e114a4SGunnar Mills} 2484e114a4SGunnar Mills 2551946552SMichael Davis.table__row { 2651946552SMichael Davis display: flex; 2751946552SMichael Davis width: 100%; 289486f54aSMichael Davis max-width: calc(100vw - 10px); 2951946552SMichael Davis flex-wrap: wrap; 309486f54aSMichael Davis font-weight: 400; 319486f54aSMichael Davis position: relative; 329486f54aSMichael Davis &.disabled { 336f7ec80eSYoshie Muranaka background-color: $background-03; 346f7ec80eSYoshie Muranaka color: $text-02; 3551946552SMichael Davis } 3651946552SMichael Davis} 3751946552SMichael Davis 389486f54aSMichael Davis.table__row-save { 399486f54aSMichael Davis position: absolute; 409486f54aSMichael Davis top: 0; 419486f54aSMichael Davis left: 0; 429486f54aSMichael Davis width: 100%; 439486f54aSMichael Davis height:100%; 446f7ec80eSYoshie Muranaka background: $background-04; 459486f54aSMichael Davis z-index:200; 466f7ec80eSYoshie Muranaka color: $primary-light; 479486f54aSMichael Davis padding: .8em 1em; 489486f54aSMichael Davis text-align: center; 499486f54aSMichael Davis font-size: 1.5em; 509486f54aSMichael Davis font-weight: bold; 519486f54aSMichael Davis} 529486f54aSMichael Davis 5351946552SMichael Davis.table__cell { 5451946552SMichael Davis flex: 0 0 100%; 559486f54aSMichael Davis line-height: 2.8em; 569486f54aSMichael Davis padding: .5em 1em; 5751946552SMichael Davis white-space: nowrap; 5851946552SMichael Davis overflow: hidden; 5951946552SMichael Davis text-overflow: ellipsis; 606f7ec80eSYoshie Muranaka border-bottom: 1px solid $border-color-01; 6151946552SMichael Davis @include mediaQuery(small) { 6251946552SMichael Davis flex: 1; 6351946552SMichael Davis } 649486f54aSMichael Davis // 659486f54aSMichael Davis //@include mediaQuery(large) { 669486f54aSMichael Davis // padding: 15px 30px; 679486f54aSMichael Davis //} 6851946552SMichael Davis} 6951946552SMichael Davis 7051946552SMichael Davis.table__cell-label { 7151946552SMichael Davis display: inline-block; 7251946552SMichael Davis font-weight: 700; 7351946552SMichael Davis min-width: 50%; 7451946552SMichael Davis padding-right: 15px; 7551946552SMichael Davis 7651946552SMichael Davis @include mediaQuery(small) { 7751946552SMichael Davis display: none; 7851946552SMichael Davis } 7951946552SMichael Davis} 8051946552SMichael Davis 8151946552SMichael Davis// Table Head 8251946552SMichael Davis.table__head { 8384e114a4SGunnar Mills width: 100%; 8451946552SMichael Davis .table__row { 8551946552SMichael Davis display: none; 8651946552SMichael Davis font-weight: 700; 876f7ec80eSYoshie Muranaka border-bottom: 1px solid $border-color-01; 886f7ec80eSYoshie Muranaka background-color: $background-05; 896f7ec80eSYoshie Muranaka color: $primary-light; 9051946552SMichael Davis 9151946552SMichael Davis @include mediaQuery(small) { 9251946552SMichael Davis display: flex; 9351946552SMichael Davis } 9451946552SMichael Davis 9551946552SMichael Davis .table__cell { 9651946552SMichael Davis @include fastTransition-all(); 9751946552SMichael Davis position: relative; 989486f54aSMichael Davis border: 0; 9951946552SMichael Davis &:last-child { 10051946552SMichael Davis border: 0; 10151946552SMichael Davis } 10251946552SMichael Davis } 10351946552SMichael Davis } 10451946552SMichael Davis} 10551946552SMichael Davis 1069486f54aSMichael Davis.table__row-uploading { 1076f7ec80eSYoshie Muranaka color: $text-02; 1089486f54aSMichael Davis font-weight: 700; 1099486f54aSMichael Davis @include indeterminate-bar; 1109486f54aSMichael Davis} 1119486f54aSMichael Davis 11297280b3eSIftekharul Islam// sensor fixed table header on scroll 11397280b3eSIftekharul Islam.fixed-table-header{ 11497280b3eSIftekharul Islam position: sticky; 11597280b3eSIftekharul Islam top: 130px; 11697280b3eSIftekharul Islam z-index: 1; 11797280b3eSIftekharul Islam} 11897280b3eSIftekharul Islam 119e1ae08c1SMichael Davis//sortable heading 1206dc5f181SMichael Davis.sort-heading { 121e1ae08c1SMichael Davis position: relative; 1226f7ec80eSYoshie Muranaka color: $text-03; 123e1ae08c1SMichael Davis &::after { 124e1ae08c1SMichael Davis content: '\025be'; 125e1ae08c1SMichael Davis position: absolute; 126e1ae08c1SMichael Davis right: -20px; 127e1ae08c1SMichael Davis top: -1px; 128e1ae08c1SMichael Davis font-size: 1.3em; 129e1ae08c1SMichael Davis } 130e1ae08c1SMichael Davis &::before { 131e1ae08c1SMichael Davis content: '\025be'; 132e1ae08c1SMichael Davis position: absolute; 133e1ae08c1SMichael Davis right: -20px; 134e1ae08c1SMichael Davis top: -10px; 135e1ae08c1SMichael Davis font-size: 1.3em; 136e1ae08c1SMichael Davis transform: rotate(180deg); 137e1ae08c1SMichael Davis } 138e1ae08c1SMichael Davis &.sort-up { 139e1ae08c1SMichael Davis &::before { 1406f7ec80eSYoshie Muranaka color: $primary-accent; 141e1ae08c1SMichael Davis } 142e1ae08c1SMichael Davis } 143e1ae08c1SMichael Davis &.sort-down { 144e1ae08c1SMichael Davis &::after { 1456f7ec80eSYoshie Muranaka color: $primary-accent; 146e1ae08c1SMichael Davis } 147e1ae08c1SMichael Davis } 1486dc5f181SMichael Davis} 149fa56273dSYoshie Muranaka 150*5b8cef81SYoshie Muranaka.bmc-table__container { 151*5b8cef81SYoshie Muranaka position: relative; 152*5b8cef81SYoshie Muranaka} 153*5b8cef81SYoshie Muranaka 154fa56273dSYoshie Muranaka.bmc-table { 155fa56273dSYoshie Muranaka width: 100%; 1568c80dbd9SYoshie Muranaka &.small { 1578c80dbd9SYoshie Muranaka font-size: 90%; 1588c80dbd9SYoshie Muranaka } 159fa56273dSYoshie Muranaka} 160fa56273dSYoshie Muranaka 161b1f64248SYoshie Muranaka.bmc-table__head { 162b1f64248SYoshie Muranaka .sort-icon { 163b1f64248SYoshie Muranaka padding: 0; 164b1f64248SYoshie Muranaka position: absolute; 165b1f64248SYoshie Muranaka .icon { 166b1f64248SYoshie Muranaka margin: 0; 167b1f64248SYoshie Muranaka & + .icon { 168b1f64248SYoshie Muranaka margin-left: -18px; 169b1f64248SYoshie Muranaka } 170b1f64248SYoshie Muranaka svg { 171b1f64248SYoshie Muranaka height: 1em; 172b1f64248SYoshie Muranaka } 173b1f64248SYoshie Muranaka } 174b1f64248SYoshie Muranaka } 175b1f64248SYoshie Muranaka .sort-icon--descending { 176b1f64248SYoshie Muranaka transform: rotate(180deg); 177b1f64248SYoshie Muranaka } 178b1f64248SYoshie Muranaka .sort-icon--inactive { 179b1f64248SYoshie Muranaka opacity: 0.5; 180b1f64248SYoshie Muranaka } 181b1f64248SYoshie Muranaka} 182b1f64248SYoshie Muranaka 183fa56273dSYoshie Muranaka.bmc-table__row { 184fa56273dSYoshie Muranaka border-bottom: 1px solid $border-color-01; 1851d83af07SYoshie Muranaka .btn { 1861d83af07SYoshie Muranaka padding-top: 0; 1871d83af07SYoshie Muranaka padding-bottom: 0; 1881d83af07SYoshie Muranaka .icon { 1891d83af07SYoshie Muranaka margin: 0; 1901d83af07SYoshie Muranaka } 1911d83af07SYoshie Muranaka } 1921d83af07SYoshie Muranaka .btn--expand { 1931d83af07SYoshie Muranaka padding: 0; 1941d83af07SYoshie Muranaka .icon { 1951d83af07SYoshie Muranaka transition: transform $duration--moderate-01; 1961d83af07SYoshie Muranaka transform: rotate(90deg); 1971d83af07SYoshie Muranaka } 1981d83af07SYoshie Muranaka } 1991d83af07SYoshie Muranaka} 2001d83af07SYoshie Muranaka 2011d83af07SYoshie Muranaka.bmc-table__row--expanded { 2021d83af07SYoshie Muranaka border-style: none; 2031d83af07SYoshie Muranaka .btn--expand .icon { 2041d83af07SYoshie Muranaka transform: rotate(0deg); 2051d83af07SYoshie Muranaka } 2061d83af07SYoshie Muranaka} 2071d83af07SYoshie Muranaka 2081d83af07SYoshie Muranaka.bmc-table__expansion-row { 2091d83af07SYoshie Muranaka border-bottom: 1px solid $border-color-01; 210fa56273dSYoshie Muranaka} 211fa56273dSYoshie Muranaka 212fa56273dSYoshie Muranaka.bmc-table__column-header { 213fa56273dSYoshie Muranaka padding: 10px 16px; 214fa56273dSYoshie Muranaka background-color: $background-03; 215b1f64248SYoshie Muranaka position: relative; 216b1f64248SYoshie Muranaka} 217b1f64248SYoshie Muranaka 218b1f64248SYoshie Muranaka.bmc-table__column-header--sortable { 219b1f64248SYoshie Muranaka cursor: pointer; 220b1f64248SYoshie Muranaka user-select: none; 221fa56273dSYoshie Muranaka} 222fa56273dSYoshie Muranaka 223fa56273dSYoshie Muranaka.bmc-table__cell { 224bb688795SYoshie Muranaka padding: 10px 16px; 225fa56273dSYoshie Muranaka background-color: $base-02--07; 226fa56273dSYoshie Muranaka} 227fa56273dSYoshie Muranaka 228fa56273dSYoshie Muranaka.bmc-table__row-actions { 229fa56273dSYoshie Muranaka text-align: right; 230fa56273dSYoshie Muranaka} 231*5b8cef81SYoshie Muranaka 232*5b8cef81SYoshie Muranaka.bmc-table__checkbox-container { 233*5b8cef81SYoshie Muranaka position: relative; 234*5b8cef81SYoshie Muranaka display: inline-block; 235*5b8cef81SYoshie Muranaka width: 1rem; 236*5b8cef81SYoshie Muranaka height: 1rem; 237*5b8cef81SYoshie Muranaka} 238*5b8cef81SYoshie Muranaka 239*5b8cef81SYoshie Muranaka.bmc-table__checkbox { 240*5b8cef81SYoshie Muranaka margin: 0; 241*5b8cef81SYoshie Muranaka line-height: 1; 242*5b8cef81SYoshie Muranaka position: absolute; 243*5b8cef81SYoshie Muranaka width: 1rem; 244*5b8cef81SYoshie Muranaka height: 1rem; 245*5b8cef81SYoshie Muranaka top: 0; 246*5b8cef81SYoshie Muranaka right: 0; 247*5b8cef81SYoshie Muranaka cursor: pointer; 248*5b8cef81SYoshie Muranaka &::before { 249*5b8cef81SYoshie Muranaka // checkbox border 250*5b8cef81SYoshie Muranaka box-sizing: border-box; 251*5b8cef81SYoshie Muranaka content: ""; 252*5b8cef81SYoshie Muranaka width: 1rem; 253*5b8cef81SYoshie Muranaka height: 1rem; 254*5b8cef81SYoshie Muranaka position: absolute; 255*5b8cef81SYoshie Muranaka left: 0; 256*5b8cef81SYoshie Muranaka top: 0.15rem; 257*5b8cef81SYoshie Muranaka background-color: transparent; 258*5b8cef81SYoshie Muranaka border: 2px solid $border-color-02; 259*5b8cef81SYoshie Muranaka border-radius: 1px; 260*5b8cef81SYoshie Muranaka } 261*5b8cef81SYoshie Muranaka &::after { 262*5b8cef81SYoshie Muranaka // checkbox check mark 263*5b8cef81SYoshie Muranaka content: ""; 264*5b8cef81SYoshie Muranaka position: absolute; 265*5b8cef81SYoshie Muranaka left: 0.2rem; 266*5b8cef81SYoshie Muranaka top: 0.15rem; 267*5b8cef81SYoshie Muranaka width: 0.6rem; 268*5b8cef81SYoshie Muranaka height: 0.3rem; 269*5b8cef81SYoshie Muranaka background: none; 270*5b8cef81SYoshie Muranaka border-left: 2px solid $primary-light; 271*5b8cef81SYoshie Muranaka border-bottom: 2px solid $primary-light; 272*5b8cef81SYoshie Muranaka transform: scale(0) rotate(-45deg); 273*5b8cef81SYoshie Muranaka transform-origin: bottom right; 274*5b8cef81SYoshie Muranaka } 275*5b8cef81SYoshie Muranaka &.checked::before , 276*5b8cef81SYoshie Muranaka &.indeterminate::before { 277*5b8cef81SYoshie Muranaka background: $primary-accent; 278*5b8cef81SYoshie Muranaka border-color: $primary-accent; 279*5b8cef81SYoshie Muranaka } 280*5b8cef81SYoshie Muranaka &.checked::after { 281*5b8cef81SYoshie Muranaka transform: scale(1) rotate(-45deg); 282*5b8cef81SYoshie Muranaka } 283*5b8cef81SYoshie Muranaka &.indeterminate::after { 284*5b8cef81SYoshie Muranaka transform: scale(1) rotate(0deg); 285*5b8cef81SYoshie Muranaka border-left: 0 solid $primary-light; 286*5b8cef81SYoshie Muranaka border-bottom: 2px solid $primary-light; 287*5b8cef81SYoshie Muranaka top: 0.4rem; 288*5b8cef81SYoshie Muranaka } 289*5b8cef81SYoshie Muranaka} 290*5b8cef81SYoshie Muranaka 291*5b8cef81SYoshie Muranaka.bmc-table__checkbox-input { 292*5b8cef81SYoshie Muranaka position: absolute; 293*5b8cef81SYoshie Muranaka opacity: 0; 294*5b8cef81SYoshie Muranaka height: 0; 295*5b8cef81SYoshie Muranaka width: 0; 296*5b8cef81SYoshie Muranaka margin: 0; 297*5b8cef81SYoshie Muranaka} 298*5b8cef81SYoshie Muranaka 299*5b8cef81SYoshie Muranaka.bmc-table__toolbar { 300*5b8cef81SYoshie Muranaka position: absolute; 301*5b8cef81SYoshie Muranaka left: 0; 302*5b8cef81SYoshie Muranaka right: 1px; 303*5b8cef81SYoshie Muranaka display: flex; 304*5b8cef81SYoshie Muranaka flex-direction: row; 305*5b8cef81SYoshie Muranaka justify-content: space-between; 306*5b8cef81SYoshie Muranaka color: $text-03; 307*5b8cef81SYoshie Muranaka background-color: $primary-accent; 308*5b8cef81SYoshie Muranaka max-height: 40px; 309*5b8cef81SYoshie Muranaka padding-left: 1em; 310*5b8cef81SYoshie Muranaka padding-top: 0.5em; 311*5b8cef81SYoshie Muranaka padding-right: 0; 312*5b8cef81SYoshie Muranaka padding-bottom: 0.5em; 313*5b8cef81SYoshie Muranaka transform: translateY(-40px); 314*5b8cef81SYoshie Muranaka &.ng-animate { 315*5b8cef81SYoshie Muranaka transition: transform $duration--moderate-02 $standard-easing--productive; 316*5b8cef81SYoshie Muranaka } 317*5b8cef81SYoshie Muranaka &.ng-enter { 318*5b8cef81SYoshie Muranaka transform: translateY(0); 319*5b8cef81SYoshie Muranaka } 320*5b8cef81SYoshie Muranaka &.ng-enter.ng-enter-active { 321*5b8cef81SYoshie Muranaka transform: translateY(-40px); 322*5b8cef81SYoshie Muranaka } 323*5b8cef81SYoshie Muranaka &.ng-leave { 324*5b8cef81SYoshie Muranaka transform: translateY(-40px); 325*5b8cef81SYoshie Muranaka } 326*5b8cef81SYoshie Muranaka &.ng-leave.ng-leave-active { 327*5b8cef81SYoshie Muranaka transform: translateY(0); 328*5b8cef81SYoshie Muranaka } 329*5b8cef81SYoshie Muranaka .btn-tertiary { 330*5b8cef81SYoshie Muranaka color: $text-03; 331*5b8cef81SYoshie Muranaka padding-top:0; 332*5b8cef81SYoshie Muranaka padding-bottom:0; 333*5b8cef81SYoshie Muranaka position: relative; 334*5b8cef81SYoshie Muranaka .icon { 335*5b8cef81SYoshie Muranaka fill: $text-03; 336*5b8cef81SYoshie Muranaka margin: 0; 337*5b8cef81SYoshie Muranaka } 338*5b8cef81SYoshie Muranaka } 339*5b8cef81SYoshie Muranaka} 340*5b8cef81SYoshie Muranaka 341*5b8cef81SYoshie Muranaka.toolbar__batch-actions { 342*5b8cef81SYoshie Muranaka .btn-close { 343*5b8cef81SYoshie Muranaka border-top: none; 344*5b8cef81SYoshie Muranaka border-bottom: none; 345*5b8cef81SYoshie Muranaka border-left: 2px solid $primary-light; 346*5b8cef81SYoshie Muranaka margin-left: 0.5em; 347*5b8cef81SYoshie Muranaka } 348*5b8cef81SYoshie Muranaka} 349*5b8cef81SYoshie Muranaka 350*5b8cef81SYoshie Muranaka.toolbar__selection-count { 351*5b8cef81SYoshie Muranaka margin: 0; 352*5b8cef81SYoshie Muranaka}