/* * tables */ .pm-simple-table { @extend .border-collapse; @extend .noborder; @extend .w100; caption { transform: scale(0); } td, th { padding: em(9); border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); } th:not(#{&}-row-th) { @extend .uppercase; @extend .alignleft; &.aligncenter { @extend .aligncenter; } &.alignright { @extend .alignright; } @include respond-to($breakpoint-small) { &.onmobile-aligncenter { @extend .onmobile-aligncenter; } } } // no style for this case &-row-th { font-weight: normal; } /* alternate bg for rows */ &--alternate-bg-row tbody tr:nth-child(odd){ background-color: var(--bgcolor-input, $pm-global-light); } &--isHoverable tbody tr { @media (hover: hover) { &:hover, &:focus-within { background-color: var(--bgcolor-input, $pm-global-light); } } } tr#{&}-stickyRow { td, th { position: sticky; top: 0; background: var(--bgcolor-main-area, $white); z-index: 1; &::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; z-index: -1; height: 1rem; background: linear-gradient(to bottom, rgba(black, .1) 0%, transparent 100%); pointer-events: none; transition: opacity .125s ease-out; } } } tr#{&}-stickyRow#{&}-stickyRow--isOnTop { td, th { &::after { opacity: 0; } } } /* bordered-table */ &--bordered { &, th, td { border: 1px solid var(--bordercolor-input, $pm-global-border); } } &--has-actions { td, th { &:last-child { text-align: right; } } } /* simple dirty fix */ a svg { @extend .relative; top: -0.15em; } } /* * specifics case */ .pm-plans-table-row--highlighted { background-color: var(--bgcolor-input, $pm-global-light); }