first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,449 @@
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
Reference in New Issue
Block a user