Rodrigo Antinarelli
813ee5ed4d
* improvement: Date Picker * remove unused values * fix: search results w/ valid date returning empty * translations from locize * styling select * revert studyListDateFilterNumDays
239 lines
5.1 KiB
Stylus
239 lines
5.1 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;
|
|
$body-cell-top-bottom-padding = 16px;
|
|
|
|
$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
|
|
|
|
.study-list-header
|
|
.addNewStudy
|
|
margin: 0 10px
|
|
|
|
label
|
|
font-weight: 400
|
|
cursor: pointer
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
margin-bottom: 5px;
|
|
|
|
input
|
|
width: 0.1px;
|
|
height: 0.1px
|
|
opacity: 0
|
|
overflow: hidden
|
|
position: absolute
|
|
z-index: -1
|
|
|
|
color: var(--text-secondary-color)
|
|
|
|
&:hover
|
|
color: var(--hover-color)
|
|
|
|
&:active
|
|
color: var(--active-color)
|
|
|
|
.study-list-header
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--ui-gray-darker)
|
|
height: $study-list-toolbar-height
|
|
margin-bottom: 2px
|
|
padding: 0 $study-list-padding
|
|
line-height: $study-list-toolbar-height
|
|
|
|
.header
|
|
font-size: 22px
|
|
font-weight: 300
|
|
color: var(--table-text-secondary-color)
|
|
line-height: $study-list-toolbar-height
|
|
|
|
.actions
|
|
display: flex;
|
|
|
|
.study-count
|
|
color: var(--large-numbers-color)
|
|
font-size: 40px
|
|
font-weight: 100
|
|
line-height: $study-list-toolbar-height
|
|
|
|
/*
|
|
* Dark gray background with blue border
|
|
* Spans width of page to create a distinct area for table filters
|
|
*/
|
|
.table-head-background
|
|
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
|
|
|
|
|
|
.study-list-container
|
|
width: 100%
|
|
padding: 0 $study-list-padding
|
|
position: absolute
|
|
z-index: 2
|
|
|
|
table.table
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
color: var(--table-text-primary-color)
|
|
font-weight: 300
|
|
|
|
> tbody tr
|
|
padding: 5px
|
|
background-color: black
|
|
|
|
> tbody td
|
|
padding: $body-cell-top-bottom-padding 8px;
|
|
height: $body-cell-height
|
|
word-wrap: break-word;
|
|
|
|
/* Striped Variant */
|
|
&.table--striped > tbody tr:nth-child(even)
|
|
background-color: var(--ui-gray-darker)
|
|
|
|
/* Hover Variant */
|
|
&.table--hoverable > tbody tr
|
|
&:hover, &:active, &.active
|
|
background-color: var(--table-hover-color)
|
|
&.no-hover
|
|
&:hover, &:active, &.active
|
|
background-color: var(--ui-gray-darker)
|
|
|
|
.empty-value
|
|
color: var(--ui-gray-light)
|
|
|
|
.study-list-container > table.table > tr
|
|
height: 20px
|
|
|
|
.study-list-container > table.table > thead
|
|
::-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
|
|
|
|
.study-list-container > table.table > thead > tr > th
|
|
padding: 0;
|
|
border-bottom: 1px solid var(--ui-border-color-active);
|
|
width: 100%;
|
|
text-align: left;
|
|
border-top: 0;
|
|
|
|
.study-list-container > table.table > thead > tr > th.studyDate
|
|
min-width: 230px
|
|
.study-list-container > table.table .modalities
|
|
font-weight: 500;
|
|
min-height: 20px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
.study-list-container
|
|
.filters
|
|
label
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
min-width: 95px;
|
|
margin: 0 auto;
|
|
color: var(--table-text-primary-color);
|
|
font-weight: 400;
|
|
padding: 20px 8px;
|
|
user-select: none;
|
|
font-size: 15px;
|
|
|
|
&:hover
|
|
color: var(--active-color);
|
|
|
|
&.active, &:active
|
|
color: var(--active-color);
|
|
i
|
|
margin: 0 5px;
|
|
|
|
input
|
|
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
|
|
border-radius: 4px
|
|
width: calc(100% - 10px); /* Just use padding? */
|
|
transition(all 0.15s ease)
|
|
placeholder-color(var(--input-placeholder-color))
|
|
|
|
&:active, &:hover
|
|
background-color: var(--input-background-color)
|
|
|
|
.loading-text
|
|
color: var(--table-text-secondary-color)
|
|
text-align: center;
|
|
font-size: 30px
|
|
|
|
.notFound
|
|
color: var(--table-text-secondary-color)
|
|
font-size: 30px
|
|
font-weight: 200
|
|
text-align: center
|
|
|
|
@media only screen and (max-width: 768px)
|
|
.study-list-header
|
|
padding: 0 16px;
|
|
|
|
.study-list-container
|
|
padding: 0;
|
|
|
|
.study-list-container > table.table > thead > tr > th
|
|
padding: 0 13px;
|
|
|
|
.study-list-container > table.table > tbody > tr > td
|
|
padding: 8px;
|
|
|
|
.study-list-container .filters label
|
|
padding: 8px;
|
|
|
|
@media only screen and (max-width: 500px)
|
|
.hide-xs
|
|
display: none;
|