CHIEFSOFT\ameye
648 lines
10 KiB
Plaintext
648 lines
10 KiB
Plaintext
/**
|
|
* @file styles/controllers/grid/grid.less
|
|
*
|
|
* Copyright (c) 2014-2021 Simon Fraser University
|
|
* Copyright (c) 2003-2021 John Willinsky
|
|
* Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
|
|
*
|
|
* @ingroup pkp_controllers_grid
|
|
*
|
|
* @brief Classes for grid structure
|
|
*/
|
|
|
|
.pkp_controllers_grid {
|
|
position: relative;
|
|
font-size: @font-sml;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
border-radius: @radius;
|
|
background: @lift;
|
|
|
|
.header,
|
|
.footer {
|
|
.pkp_helpers_clear;
|
|
}
|
|
|
|
// Header
|
|
.header {
|
|
position: relative;
|
|
padding: 0 0.5rem 0 1rem;
|
|
border-bottom: @grid-border;
|
|
border-top-left-radius: @radius;
|
|
border-top-right-radius: @radius;
|
|
|
|
h4 {
|
|
display: inline-block;
|
|
font-size: @font-base;
|
|
margin: 0;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
.footer {
|
|
border-top: @grid-border;
|
|
padding: 0rem 0.5rem 0.5rem 1rem;
|
|
}
|
|
|
|
// Actions (header + footer )
|
|
.actions {
|
|
display: inline-block;
|
|
float: right;
|
|
margin: 0;
|
|
padding: 7px 0;
|
|
list-style: none;
|
|
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
|
|
a {
|
|
&:extend(.pkp_button);
|
|
}
|
|
}
|
|
|
|
// Search filter
|
|
.pkp_linkaction_search {
|
|
padding: 0 1px; // 1px prevents aliased icon from getting clipped at the edge
|
|
|
|
&:before {
|
|
.fa();
|
|
content: @fa-var-search;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
&.is_open {
|
|
background: @lift;
|
|
border-color: @primary;
|
|
|
|
&:before {
|
|
content: @fa-var-caret-up;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search filter
|
|
.filter {
|
|
padding: 1rem;
|
|
font-size: @font-sml;
|
|
|
|
label {
|
|
font-size: @font-sml;
|
|
font-weight: @normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.pkp_controllers_extrasOnDemand {
|
|
|
|
> a {
|
|
line-height: 2rem;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
> a .fa {
|
|
line-height: 2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
|
|
.pkp_spinner {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
// Grid rows
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tr {
|
|
position: static;
|
|
|
|
}
|
|
|
|
// Content rows only
|
|
.gridRow:not(:first-child) {
|
|
border-top: @grid-border;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
thead {
|
|
font-size: @font-tiny;
|
|
line-height: 16px;
|
|
color: @text-light-rgba;
|
|
|
|
th {
|
|
box-shadow: inset 0 -1px 0 @grid-border-color;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
font-weight: @normal;
|
|
}
|
|
|
|
// Go ahead and remove header columns when there's only one column
|
|
// per header
|
|
th:first-child:last-child {
|
|
&:extend(.pkp_screen_reader all);
|
|
}
|
|
}
|
|
|
|
td {
|
|
position: relative;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: calc(~"0.5rem - 1px");
|
|
line-height: @line-base;
|
|
}
|
|
|
|
// Empty row
|
|
.empty td {
|
|
padding: 0.5rem 0;
|
|
font-size: @font-sml;
|
|
font-style: italic;
|
|
line-height: @line-base;
|
|
color: @text-light;
|
|
color: @text-light-rgba;
|
|
text-align: center;
|
|
}
|
|
|
|
// Expand/collapse row actions
|
|
.has_extras td:first-child,
|
|
.row_controls td:first-child {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.show_extras,
|
|
.hide_extras {
|
|
position: absolute;
|
|
top: 0.5rem; // matches td padding
|
|
left: 0;
|
|
width: 2rem;
|
|
height: @line-base; // matches td line-height
|
|
line-height: @line-base;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.show_extras:before {
|
|
&:extend(.pkp_caret);
|
|
&:extend(.pkp_caret_right);
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.hide_extras:before {
|
|
&:extend(.pkp_caret);
|
|
&:extend(.pkp_caret_down);
|
|
}
|
|
|
|
// Ordering items
|
|
.pkp_linkaction_moveItem {
|
|
.fa();
|
|
|
|
&:before {
|
|
content: @fa-var-sort;
|
|
}
|
|
}
|
|
|
|
.ordering {
|
|
|
|
&.gridRow {
|
|
border-top: 1px dashed #ddd;
|
|
}
|
|
|
|
&:hover {
|
|
background: @grid-border-color;
|
|
}
|
|
|
|
.show_extras,
|
|
.hide_extras {
|
|
display: none;
|
|
}
|
|
|
|
.row_actions {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.order_finish_controls {
|
|
padding: 0.5rem;
|
|
text-align: right;
|
|
|
|
.saveButton {
|
|
&:extend(.pkp_button all);
|
|
}
|
|
|
|
.cancelFormButton {
|
|
&:extend(.pkp_button_offset all);
|
|
}
|
|
}
|
|
|
|
.order_message {
|
|
position: absolute;
|
|
background-color: lightGrey;
|
|
padding: 0.5em 0.5em;
|
|
display: inline-table;
|
|
top: 2em;
|
|
width: 15em;
|
|
z-index: 2;
|
|
}
|
|
|
|
// Labels within a grid cell which appear before a link action in the cell
|
|
// This is designed for submission and file IDs.
|
|
[id^="component-grid-submissions"] .first_column .label,
|
|
[id^="component-grid-pubids"] .first_column + .pkp_helpers_text_left .label,
|
|
.gridCellContainer .label.before_actions {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
padding: 0 0.5em;
|
|
border: @bg-border-light;
|
|
border-radius: @radius;
|
|
font-size: @font-tiny; // extra small
|
|
}
|
|
|
|
// Additional handling of file ID labels to display file type icons
|
|
.gridCellContainer > .label .file_extension {
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 -0.5em;
|
|
padding: 0 0.5em 0 2rem;
|
|
line-height: @line-sml;
|
|
|
|
&:before {
|
|
.fa();
|
|
content: @fa-var-file-o;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
width: @line-sml;
|
|
height: @line-sml;
|
|
border-right: @bg-border-light;
|
|
line-height: @line-sml;
|
|
text-align: center;
|
|
color: @text-light;
|
|
}
|
|
|
|
&.doc:before,
|
|
&.docm:before,
|
|
&.docx:before,
|
|
&.dot:before,
|
|
&.dotm:before,
|
|
&.dotx:before {
|
|
content: @fa-var-file-word-o;
|
|
}
|
|
|
|
&.rtf:before,
|
|
&.txt:before,
|
|
&.odt:before {
|
|
content: @fa-var-file-text-o;
|
|
}
|
|
|
|
&.gif:before,
|
|
&.jpg:before,
|
|
&.jpeg:before,
|
|
&.png:before {
|
|
content: @fa-var-file-image-o;
|
|
}
|
|
|
|
&.xml:before,
|
|
&.htm:before,
|
|
&.html:before,
|
|
&.shtml:before {
|
|
content: @fa-var-file-code-o;
|
|
}
|
|
|
|
&.pdf:before {
|
|
content: @fa-var-file-pdf-o;
|
|
}
|
|
|
|
&.avi:before,
|
|
&.mov:before,
|
|
&.mkv:before {
|
|
content: @fa-var-file-video-o;
|
|
}
|
|
|
|
&.odp:before,
|
|
&.pot:before,
|
|
&.potm:before,
|
|
&.potx:before,
|
|
&.ppa:before,
|
|
&.ppam:before,
|
|
&.pps:before,
|
|
&.ppsm:before,
|
|
&.ppsmx:before,
|
|
&.ppt:before,
|
|
&.pptm:before,
|
|
&.pptx:before {
|
|
content: @fa-var-file-powerpoint-o;
|
|
}
|
|
|
|
&.mp3:before,
|
|
&.mp4:before,
|
|
&.ogg:before,
|
|
&.wma:before {
|
|
content: @fa-var-file-audio-o;
|
|
}
|
|
|
|
&.csv:before,
|
|
&.xls:before,
|
|
&.ods:before,
|
|
&.xlsb:before,
|
|
&.xlsm:before,
|
|
&.xlsx:before,
|
|
&.xlt:before,
|
|
&.xltm:before,
|
|
&.xltx:before {
|
|
content: @fa-var-file-excel-o;
|
|
}
|
|
|
|
&.zip:before {
|
|
content: @fa-var-file-archive-o;
|
|
}
|
|
}
|
|
|
|
// Infinite scroll
|
|
.scrollable {
|
|
position: relative;
|
|
max-height: 150px;
|
|
overflow: auto;
|
|
}
|
|
|
|
// Actions inline with the row
|
|
.row_actions {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0;
|
|
|
|
> a {
|
|
.fa();
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Secondary row of actions
|
|
.row_controls {
|
|
display: none;
|
|
|
|
td {
|
|
line-height: @line-base;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
margin-right: 1em;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
font-size: @font-tiny;
|
|
font-weight: @bold;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.pkp_linkaction_disable,
|
|
.pkp_linkaction_delete,
|
|
.pkp_linkaction_remove_item ,
|
|
.pkp_linkaction_deleteFile,
|
|
.pkp_linkaction_remove,
|
|
.pkp_linkaction_deleteSection,
|
|
.pkp_linkaction_deleteGenre,
|
|
.pkp_linkaction_deleteSubmissionChecklist,
|
|
.pkp_linkaction_resetAll,
|
|
.pkp_linkaction_resetEmail,
|
|
.pkp_linkaction_removeUserGroup,
|
|
.pkp_linkaction_deleteAuthor,
|
|
.pkp_linkaction_deleteQuery,
|
|
.pkp_linkaction_deleteNote,
|
|
.pkp_linkaction_deleteGalley {
|
|
color: @no;
|
|
}
|
|
|
|
// Icons
|
|
.checked,
|
|
.notChecked {
|
|
.fa();
|
|
}
|
|
|
|
.checked:after {
|
|
content: @fa-var-check-square-o;
|
|
color: @yes;
|
|
}
|
|
|
|
.notChecked:after {
|
|
content: @fa-var-ban;
|
|
color: @no;
|
|
}
|
|
|
|
// Pagination
|
|
.gridPaging {
|
|
.pkp_helpers_clear;
|
|
padding: 0.5rem 1rem;
|
|
color: @text-light-rgba;
|
|
border-top: @grid-border;
|
|
|
|
.gridItemsPerPage {
|
|
float: left;
|
|
|
|
select {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: @line-sml;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.gridPages {
|
|
float: right;
|
|
|
|
a {
|
|
&:extend(.pkp_button all);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Items shown for infinite scrolling
|
|
.gridPagingScrolling {
|
|
position: relative;
|
|
color: @text-light-rgba;
|
|
text-align: center;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
background: @grid-border-color;
|
|
border-bottom-right-radius: @radius;
|
|
border-bottom-left-radius: @radius;
|
|
|
|
.item_count {
|
|
position: absolute;
|
|
right: 1rem;
|
|
}
|
|
|
|
.pkp_linkaction_icon_more_items {
|
|
&:extend(.pkp_button_link all);
|
|
|
|
&:before {
|
|
&:extend(.pkp_caret);
|
|
&:extend(.pkp_caret_down);
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 50%;
|
|
margin-left: -2px;
|
|
border-top-width: 4px;
|
|
}
|
|
}
|
|
|
|
.pkp_loading {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
background: @grid-border-color;
|
|
line-height: 3rem;
|
|
opacity: 0;
|
|
transition: 0.3s opacity, 0.3s visibility;
|
|
}
|
|
}
|
|
|
|
&.loading {
|
|
|
|
.gridPagingScrolling {
|
|
|
|
.pkp_loading {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Categorized grids
|
|
.pkp_grid_category {
|
|
|
|
.gridRow:not(:first-child) {
|
|
border-top: none;
|
|
}
|
|
|
|
.gridRow.category,
|
|
.category_controls {
|
|
|
|
.label {
|
|
font-weight: @bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Listbuilder grids
|
|
.pkp_controllers_listbuilder {
|
|
|
|
.gridRow {
|
|
|
|
.pkp_linkaction_delete {
|
|
|
|
&:before {
|
|
.fa();
|
|
content: @fa-var-times;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// File grids
|
|
[id^="component-grid-files"] {
|
|
|
|
// Headers aren't needed in file grids
|
|
thead {
|
|
&:extend(.pkp_screen_reader all);
|
|
}
|
|
|
|
.pkp_linkaction_downloadFile {
|
|
text-decoration: none;
|
|
}
|
|
|
|
[id^="component-grid-files"] td:not(.first_column),
|
|
[id^="component-grid-files"] th:not(.first_column) {
|
|
color: @text-light-rgba;
|
|
width: 50px;
|
|
}
|
|
}
|
|
|
|
// Grids without titles
|
|
.pkp_grid_no_title {
|
|
box-shadow: none;
|
|
border-bottom: @grid-border;
|
|
|
|
.header {
|
|
background: transparent;
|
|
}
|
|
|
|
thead {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// Make emails wrap rather than overflow table column in the users grid
|
|
[id^="component-grid-settings-user-usergrid-"] .gridRow td:last-child .label {
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Fix strange grid float issue when placed inside subtabs */
|
|
.pkpTabs--side .pkpTab .pkp_controllers_grid .header {
|
|
max-height: 3rem;
|
|
}
|
|
|
|
// TODO check if these styles can be removed
|
|
.pkp_controllers_grid {
|
|
|
|
// See TODO at lib/pkp/templates/controllers/grid.tpl:54
|
|
.options {
|
|
float: right;
|
|
line-height: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.options a {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.options a:before {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
// See TODO at /var/www/html/ojs/lib/pkp/templates/controllers/grid/common/cell/statusCell.tpl
|
|
a.task {
|
|
width: 100%;
|
|
text-indent: -1500px;
|
|
overflow: hidden;
|
|
display: block;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
margin: 0;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
// Space between two grids
|
|
div:not(:last-child) > .pkp_controllers_grid {
|
|
margin-bottom: 1rem;
|
|
} |