CHIEFSOFT\ameye
450 lines
6.8 KiB
Plaintext
450 lines
6.8 KiB
Plaintext
/**
|
|
* @file styles/helpers.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.
|
|
*
|
|
* @brief Helper classes
|
|
*
|
|
*/
|
|
|
|
// Buttons
|
|
.pkp_button {
|
|
display: inline-block;
|
|
padding: 0 0.5em;
|
|
background: #fff;
|
|
border: @bg-border-light;
|
|
border-radius: @radius;
|
|
font-size: @font-sml;
|
|
line-height: 2rem;
|
|
font-weight: @bold;
|
|
color: @primary;
|
|
text-decoration: none;
|
|
box-shadow: 0 1px 0 @bg-border-color-light;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: @primary;
|
|
border-color: @primary;
|
|
outline: 0;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 2px;
|
|
}
|
|
|
|
&:disabled {
|
|
color: @text-disabled;
|
|
|
|
&:hover {
|
|
color: @text-disabled;
|
|
border-color: @bg-border-color-light;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pkp_button_primary {
|
|
&:extend(.pkp_button all);
|
|
color: #fff;
|
|
background: @primary;
|
|
border-color: @primary;
|
|
box-shadow: 0 1px 0 @primary;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: @primary-lift;
|
|
color: #fff;
|
|
}
|
|
|
|
&:disabled,
|
|
&:disabled:hover {
|
|
&:extend(.pkp_button[disabled] all);
|
|
color: #fff;
|
|
background: @bg-dark;
|
|
border-color: @bg-dark;
|
|
box-shadow: 0 1px 0 @shade;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.pkp_button_offset {
|
|
&:extend(.pkp_button all);
|
|
color: @no;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: @no;
|
|
color: @no;
|
|
}
|
|
|
|
&:disabled,
|
|
&:disabled:hover {
|
|
&:extend(.pkp_button[disabled] all);
|
|
color: #fff;
|
|
background: @bg-dark;
|
|
border-color: @bg-dark;
|
|
box-shadow: 0 1px 0 @shade;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.pkp_button_link {
|
|
&:extend(.pkp_button all);
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
|
|
&:disabled:hover {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Spinner
|
|
.pkp_spinner {
|
|
|
|
&:after {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
vertical-align: middle;
|
|
.animation( pkp_spin .6s linear infinite );
|
|
border-radius: 100%;
|
|
border-top: 1px solid @shade;
|
|
border-bottom: 1px solid transparent;
|
|
border-left: 1px solid @shade;
|
|
border-right: 1px solid transparent;
|
|
border-top-color: rgba(0,0,0,0.5);
|
|
border-left-color: rgba(0,0,0,0.5);
|
|
content: '';
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Loading component
|
|
.pkp_loading {
|
|
font-size: @font-sml;
|
|
line-height: @line-sml;
|
|
|
|
.pkp_spinner {
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
// An unstyled list with default margins, padding and list-style remove
|
|
.pkp_unstyled_list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
// CSS triangle
|
|
// To use, extend .pkp_caret and a direction, like .pkp_caret_down
|
|
.pkp_caret {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border: 0.25rem solid transparent;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.pkp_caret_down {
|
|
border-top: 0.375rem solid;
|
|
}
|
|
|
|
.pkp_caret_right {
|
|
border-left: 0.375rem solid;
|
|
}
|
|
|
|
// Screen-reader text
|
|
.pkp_screen_reader {
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
position: absolute !important;
|
|
left: -2000px;
|
|
|
|
&:focus {
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
|
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
|
clip: auto !important;
|
|
color: #000;
|
|
display: block;
|
|
font-size: @font-base;
|
|
height: auto;
|
|
line-height: normal;
|
|
padding: 1rem;
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: 0.5rem;
|
|
text-decoration: none;
|
|
width: auto;
|
|
z-index: 100000;
|
|
}
|
|
}
|
|
|
|
// @todo Set this to .pkp_helpers_clear() with parentheses once the class is no
|
|
// longer used anywhere in the markup, so it doesn't print into the rendered
|
|
// stylesheet.
|
|
.pkp_helpers_clear {
|
|
&:before,
|
|
&:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
// A help link
|
|
.pkp_help_link {
|
|
display: inline-block;
|
|
padding: 0.25rem 0;
|
|
font-size: @font-tiny;
|
|
line-height: @line-tiny;
|
|
font-weight: @bold;
|
|
text-decoration: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: @primary;
|
|
z-index: 3;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: @primary-lift;
|
|
}
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: 0 0 0 @radius @primary;
|
|
border-radius: @radius;
|
|
}
|
|
}
|
|
|
|
// A small help link that attaches to a tab
|
|
.pkp_help_tab {
|
|
position: absolute;
|
|
top: -2rem;
|
|
right: 2rem;
|
|
padding: 0.5rem 1em;
|
|
background: @lift;
|
|
border-top-left-radius: @radius;
|
|
border-top-right-radius: @radius;
|
|
}
|
|
|
|
.pkp_help_modal {
|
|
&:extend(.pkp_help_tab);
|
|
top: 0.5rem;
|
|
padding: 0.5rem;
|
|
right: 3rem;
|
|
border: none;
|
|
}
|
|
|
|
// Summary of an uploaded file
|
|
.pkp_uploadedFile_summary {
|
|
font-size: @font-sml;
|
|
line-height: @line-sml;
|
|
|
|
.filename {
|
|
&:extend(.pkp_form .section > .label);
|
|
|
|
.display {
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.edit {
|
|
line-height: @line-sml;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
margin-top: 0.5rem;
|
|
color: @text-light;
|
|
|
|
> span {
|
|
margin-left: 2rem;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:before {
|
|
.fa();
|
|
padding-right: 0.25em;
|
|
color: #aaa;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pixels:before {
|
|
content: @fa-var-desktop;
|
|
}
|
|
|
|
.print {
|
|
margin-left: 2rem;
|
|
|
|
&:before {
|
|
.fa();
|
|
padding-right: 0.25em;
|
|
color: #aaa;
|
|
content: @fa-var-print;
|
|
}
|
|
}
|
|
|
|
.type:before {
|
|
content: @fa-var-file-o;
|
|
}
|
|
|
|
.type.pdf:before {
|
|
content: @fa-var-file-pdf-o;
|
|
}
|
|
|
|
.type.doc:before,
|
|
.type.docx:before {
|
|
content: @fa-var-file-word-o;
|
|
}
|
|
|
|
.type.xls:before,
|
|
.type.xlsx:before {
|
|
content: @fa-var-file-excel-o;
|
|
}
|
|
|
|
.file_size:before {
|
|
content: @fa-var-hdd-o;
|
|
}
|
|
}
|
|
|
|
// @todo from here on down needs to be evaluated and removed if not useful
|
|
.pkp_helpers_invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.pkp_helpers_display_none {
|
|
display: none !important;
|
|
}
|
|
|
|
.pkp_helpers_align_left {
|
|
float: left;
|
|
}
|
|
|
|
.pkp_helpers_align_right {
|
|
float: right;
|
|
}
|
|
|
|
.pkp_helpers_text_left {
|
|
text-align: left;
|
|
}
|
|
|
|
.pkp_helpers_text_right {
|
|
text-align: right;
|
|
}
|
|
|
|
.pkp_helpers_text_center {
|
|
text-align: center;
|
|
}
|
|
|
|
.pkp_helpers_text_justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
.pkp_helpers_title_padding {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.pkp_helpers_image_left {
|
|
float: left;
|
|
margin: 4px 10px 4px 0;
|
|
}
|
|
|
|
.pkp_helpers_image_right {
|
|
float: right;
|
|
margin: 4px 0 4px 10px;
|
|
}
|
|
|
|
.pkp_helpers_container_center {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.pkp_helpers_debug, .pkp_helpers_debug div {
|
|
border: 1px dashed red;
|
|
padding: 2px;
|
|
}
|
|
|
|
.pkp_helpers_flatlist {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.pkp_helpers_bulletlist {
|
|
li {
|
|
list-style: disc;
|
|
}
|
|
}
|
|
|
|
.pkp_helpers_icon_link_valign {
|
|
line-height:24px;
|
|
}
|
|
|
|
.pkp_helpers_moveicon {
|
|
cursor: move;
|
|
}
|
|
|
|
.pkp_helpers_full {
|
|
width: 100%;
|
|
}
|
|
|
|
.pkp_helpers_half {
|
|
width: 50%;
|
|
}
|
|
|
|
.pkp_helpers_third {
|
|
width: 33%;
|
|
}
|
|
|
|
.pkp_helpers_quarter {
|
|
width: 25%;
|
|
}
|
|
|
|
.pkp_helpers_fifth {
|
|
width: 20%;
|
|
}
|
|
|
|
.pkp_helpers_threeQuarter {
|
|
width: 75%;
|
|
}
|
|
|
|
.pkp_helpers_underline:after {
|
|
border-bottom: 2px solid white;
|
|
content: " ";
|
|
display: block;
|
|
}
|
|
|
|
.pkp_helpers_dotted_underline {
|
|
border-bottom: 1px dotted #999;
|
|
}
|
|
|
|
.pkp_helpers_black_bg {
|
|
background-color: black;
|
|
}
|
|
|
|
.pkp_helpers_text_warn { color: @warn; }
|
|
.pkp_helpers_text_primary { color: black; }
|
|
|
|
.NMI_TYPE_CUSTOM_EDIT {
|
|
display: none;
|
|
}
|
|
|
|
.pkp_helpers_form_input_title_text {
|
|
font-weight: bold;
|
|
color: #777777;
|
|
}
|