283 lines
6.3 KiB
Stylus
283 lines
6.3 KiB
Stylus
|
@import './../../design/styles/common/form.styl'
|
||
|
|
@import './../../design/styles/common/global.styl'
|
||
|
|
|
||
|
|
$study-list-padding = 8%;
|
||
|
|
$study-list-toolbar-height = 75px;
|
||
|
|
$body-cell-height = 40px;
|
||
|
|
|
||
|
|
$tablePaddingMediumScreen = 5px
|
||
|
|
$tablePaddingBigScreen = 3%
|
||
|
|
$tablePaddingLargeScreen = 5%
|
||
|
|
|
||
|
|
// TODO: move this to a common mixin files
|
||
|
|
placeholder-color(c)
|
||
|
|
&::-webkit-input-placeholder
|
||
|
|
color: c
|
||
|
|
&:-moz-placeholder
|
||
|
|
color: c
|
||
|
|
&::-moz-placeholder
|
||
|
|
color: c
|
||
|
|
&:-ms-input-placeholder
|
||
|
|
color: c
|
||
|
|
|
||
|
|
.DateRangePicker
|
||
|
|
height: 40px
|
||
|
|
margin: 0 5px 20px 5px
|
||
|
|
cursor: pointer
|
||
|
|
border: none
|
||
|
|
position: block
|
||
|
|
|
||
|
|
.studyListToolbar
|
||
|
|
background-color: var(--ui-gray-darker)
|
||
|
|
height: $study-list-toolbar-height
|
||
|
|
margin-bottom: 2px
|
||
|
|
padding: 0 $study-list-padding
|
||
|
|
|
||
|
|
&>div
|
||
|
|
display: inline-block
|
||
|
|
|
||
|
|
.header
|
||
|
|
font-size: 22px
|
||
|
|
font-weight: 300
|
||
|
|
color: var(--table-text-secondary-color)
|
||
|
|
line-height: $study-list-toolbar-height
|
||
|
|
|
||
|
|
.studylistToolbar
|
||
|
|
height: $study-list-toolbar-height
|
||
|
|
line-height: $study-list-toolbar-height
|
||
|
|
|
||
|
|
.studyCount
|
||
|
|
color: var(--large-numbers-color)
|
||
|
|
font-size: 40px
|
||
|
|
font-weight: 100
|
||
|
|
line-height: $study-list-toolbar-height
|
||
|
|
|
||
|
|
.theadBackground
|
||
|
|
height: 121px
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
&:before, &:after
|
||
|
|
content: ''
|
||
|
|
display: block
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
|
||
|
|
&:before
|
||
|
|
background-color: var(--ui-gray-darker)
|
||
|
|
height: 100%
|
||
|
|
top: 0
|
||
|
|
z-index: 1
|
||
|
|
|
||
|
|
&:after
|
||
|
|
background-color: var(--ui-border-color-active)
|
||
|
|
bottom: -1px
|
||
|
|
height: 1px
|
||
|
|
z-index: 2
|
||
|
|
|
||
|
|
#studyListContainer
|
||
|
|
width: 100%
|
||
|
|
padding: 0 $study-list-padding
|
||
|
|
position: absolute
|
||
|
|
z-index: 2
|
||
|
|
|
||
|
|
.loading-text
|
||
|
|
color: var(--table-text-secondary-color)
|
||
|
|
font-size: 30px
|
||
|
|
|
||
|
|
.notFound
|
||
|
|
color: var(--table-text-secondary-color)
|
||
|
|
font-size: 30px
|
||
|
|
font-weight: 200
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
table#tblStudyList
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-spacing: 0;
|
||
|
|
border-collapse: collapse;
|
||
|
|
|
||
|
|
> tr
|
||
|
|
height: 20px
|
||
|
|
|
||
|
|
> thead
|
||
|
|
white-space: nowrap
|
||
|
|
|
||
|
|
tr
|
||
|
|
th
|
||
|
|
padding: 0
|
||
|
|
border-bottom: 1px solid var(--ui-border-color-active);
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
border-top: 0;
|
||
|
|
|
||
|
|
&.studyDate
|
||
|
|
min-width: 230px
|
||
|
|
|
||
|
|
.display-text
|
||
|
|
display: inline-block
|
||
|
|
cursor: pointer
|
||
|
|
width: 100%
|
||
|
|
min-width: 95px
|
||
|
|
margin: 0 auto
|
||
|
|
color: var(--table-text-primary-color)
|
||
|
|
font-weight: 400
|
||
|
|
padding: 20px
|
||
|
|
-webkit-user-select: none
|
||
|
|
-moz-user-select: none
|
||
|
|
-ms-user-select: none
|
||
|
|
user-select: none
|
||
|
|
|
||
|
|
span
|
||
|
|
font-size: 15px
|
||
|
|
float: left
|
||
|
|
|
||
|
|
i
|
||
|
|
margin: 0 5px
|
||
|
|
|
||
|
|
&:hover
|
||
|
|
color: var(--active-color)
|
||
|
|
|
||
|
|
&.active, &:active
|
||
|
|
color: var(--active-color)
|
||
|
|
|
||
|
|
input.studylist-search
|
||
|
|
height: 40px
|
||
|
|
margin: 0 5px 20px 5px
|
||
|
|
padding: 0 20px
|
||
|
|
cursor: pointer
|
||
|
|
border: none
|
||
|
|
background-color: var(--input-background-color)
|
||
|
|
color: var(--input-placeholder-color)
|
||
|
|
font-size: 10pt
|
||
|
|
font-weight: normal
|
||
|
|
width: calc(100% - 10px)
|
||
|
|
border-radius: 4px
|
||
|
|
|
||
|
|
transition(all 0.15s ease)
|
||
|
|
placeholder-color(var(--input-placeholder-color))
|
||
|
|
|
||
|
|
&.invisible
|
||
|
|
visibility: hidden
|
||
|
|
|
||
|
|
&:active, &:hover
|
||
|
|
background-color: var(--input-background-color)
|
||
|
|
|
||
|
|
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||
|
|
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||
|
|
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||
|
|
color: transparent
|
||
|
|
|
||
|
|
> tbody
|
||
|
|
tr
|
||
|
|
padding: 5px
|
||
|
|
background-color: black
|
||
|
|
|
||
|
|
&:nth-child(even)
|
||
|
|
background-color: var(--ui-gray-darker)
|
||
|
|
|
||
|
|
td
|
||
|
|
padding: 8px;
|
||
|
|
height: $body-cell-height
|
||
|
|
line-height: $body-cell-height
|
||
|
|
color: var(--table-text-primary-color)
|
||
|
|
font-weight: 300
|
||
|
|
border-top: 1px solid var(--ui-gray-lighter)
|
||
|
|
border-bottom: 1px solid var(--ui-gray-lighter)
|
||
|
|
white-space: nowrap
|
||
|
|
transition(all 0.1s ease)
|
||
|
|
|
||
|
|
&.emptyCell
|
||
|
|
color: #516873
|
||
|
|
|
||
|
|
&.emptyValue
|
||
|
|
color: var(--ui-gray-light)
|
||
|
|
|
||
|
|
&:hover, &:active, &.active
|
||
|
|
background-color: var(--table-hover-color)
|
||
|
|
color: var(--text-primary-color)
|
||
|
|
|
||
|
|
td
|
||
|
|
// This selector is necessary to override bootstrap's 'table' class
|
||
|
|
border-top: 1px solid var(--ui-gray-lighter)
|
||
|
|
border-bottom: 1px solid var(--ui-gray-lighter)
|
||
|
|
background-color: var(--table-hover-color)
|
||
|
|
|
||
|
|
@media only screen and (max-width: 1362px)
|
||
|
|
#studyListContainer
|
||
|
|
padding: 0 $tablePaddingLargeScreen
|
||
|
|
|
||
|
|
table#tblStudyList
|
||
|
|
thead,
|
||
|
|
tbody
|
||
|
|
tr
|
||
|
|
th,
|
||
|
|
td
|
||
|
|
&:first-child
|
||
|
|
padding-left: $tablePaddingLargeScreen
|
||
|
|
|
||
|
|
&:last-child
|
||
|
|
padding-right: $tablePaddingLargeScreen
|
||
|
|
|
||
|
|
@media only screen and (max-width: 1161px)
|
||
|
|
#studyListContainer
|
||
|
|
padding: 0 $tablePaddingBigWidth
|
||
|
|
|
||
|
|
table#tblStudyList
|
||
|
|
thead,
|
||
|
|
tbody
|
||
|
|
tr
|
||
|
|
th,
|
||
|
|
td
|
||
|
|
&:first-child
|
||
|
|
padding-left: $tablePaddingBigScreen
|
||
|
|
|
||
|
|
&:last-child
|
||
|
|
padding-right: $tablePaddingBigScreen
|
||
|
|
|
||
|
|
@media only screen and (max-width: 1069px)
|
||
|
|
.theadBackground
|
||
|
|
height: 101px
|
||
|
|
|
||
|
|
.studylist-pagination > .row
|
||
|
|
margin-right: 0;
|
||
|
|
|
||
|
|
.studyListToolbar
|
||
|
|
padding: 0 $tablePaddingMediumScreen
|
||
|
|
|
||
|
|
#studyListContainer
|
||
|
|
padding: 0
|
||
|
|
|
||
|
|
table#tblStudyList
|
||
|
|
thead > tr > th
|
||
|
|
|
||
|
|
&:first-child
|
||
|
|
padding-left: $tablePaddingMediumScreen
|
||
|
|
|
||
|
|
&:last-child
|
||
|
|
padding-right: $tablePaddingMediumScreen
|
||
|
|
|
||
|
|
input.worklist-search
|
||
|
|
padding: 10px
|
||
|
|
|
||
|
|
.display-text
|
||
|
|
padding: 10px 5px
|
||
|
|
|
||
|
|
i
|
||
|
|
width: auto
|
||
|
|
|
||
|
|
tbody > tr > td
|
||
|
|
|
||
|
|
&:first-child
|
||
|
|
padding-left: $tablePaddingMediumScreen
|
||
|
|
|
||
|
|
&:last-child
|
||
|
|
padding-right: $tablePaddingMediumScreen
|
||
|
|
|
||
|
|
.worklistPagination
|
||
|
|
.row
|
||
|
|
margin-left: 0
|
||
|
|
margin-right: 0
|