first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,466 @@
|
||||
/**
|
||||
* @file styles/components.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 Reusable components
|
||||
*/
|
||||
|
||||
// Simple clearfix wrapper
|
||||
.row {
|
||||
.pkp_helpers_clear;
|
||||
}
|
||||
|
||||
// Button
|
||||
.cmp_button {
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
background: #eee;
|
||||
border: @form-border;
|
||||
border-top-color: #bbb;
|
||||
border-radius: @radius;
|
||||
box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.1);
|
||||
font-size: @font-sml;
|
||||
line-height: calc(~"@{triple} - 2px"); // account for border
|
||||
font-weight: @bold;
|
||||
color: @primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Wire button
|
||||
.cmp_button_wire {
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
background: #fff;
|
||||
border: 1px solid @primary;
|
||||
border-radius: @radius;
|
||||
font-size: @font-sml;
|
||||
line-height: calc(~"@{triple} - 2px"); // account for border
|
||||
color: @primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: @primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Add an icon to the button
|
||||
.cmp_button_icon( @icon ) {
|
||||
position: relative;
|
||||
padding-right: @triple + (@triple / 2);
|
||||
border-right: none;
|
||||
|
||||
&:after {
|
||||
.fa();
|
||||
content: @icon;
|
||||
position: absolute;
|
||||
top: -1px; // border;
|
||||
right: 0;
|
||||
width: @triple;
|
||||
height: @triple;
|
||||
border-top-right-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
line-height: @triple;
|
||||
text-align: center;
|
||||
background: @primary;
|
||||
box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:focus:after {
|
||||
box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.2);
|
||||
background: @primary-lift;
|
||||
}
|
||||
}
|
||||
|
||||
.cmp_button_icon_left( @icon ) {
|
||||
padding-right: 1em;
|
||||
padding-left: @triple + (@triple / 2);
|
||||
border-right: @form-border;
|
||||
border-left: none;
|
||||
|
||||
&:after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-left-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Text button with an icon
|
||||
.cmp_button_text( @icon ) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-right: @triple;
|
||||
font-size: @font-sml;
|
||||
font-weight: @bold;
|
||||
line-height: @triple;
|
||||
color: @primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:after {
|
||||
.fa();
|
||||
content: @icon;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
width: @triple;
|
||||
height: @triple;
|
||||
line-height: @triple;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @primary-lift;
|
||||
}
|
||||
}
|
||||
|
||||
// List of articles
|
||||
.cmp_article_list {
|
||||
&:extend(.pkp_unstyled_list);
|
||||
|
||||
> li {
|
||||
.pkp_helpers_clear();
|
||||
margin-bottom: @triple;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
// These don't yet follow the component pattern on the frontend, but should
|
||||
// eventually once the login/registration templates are incorporated into the
|
||||
// frontend template structure.
|
||||
.cmp_form {
|
||||
|
||||
fieldset {
|
||||
margin: 0 0 @double;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin-bottom: @base;
|
||||
font-size: @font-bump;
|
||||
font-weight: @bold;
|
||||
line-height: @double;
|
||||
}
|
||||
|
||||
.fields {
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
padding-bottom: @triple; // Contain errors
|
||||
|
||||
// Nest so we don't grab .error class attached to li
|
||||
.error {
|
||||
position: absolute;
|
||||
left: 0.5em; // Sit off the rounded edge of input fields
|
||||
bottom: 11px; // Sit on the bottom line of the input field above
|
||||
padding: 0 0.5em; // Keep it tight so it doesn't bleed into next field
|
||||
background: @no;
|
||||
border-bottom-left-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
font-size: @font-sml;
|
||||
line-height: @double;
|
||||
font-weight: @bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: @font-sml;
|
||||
font-weight: @normal;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
select,
|
||||
textarea {
|
||||
padding: 0 0.5em;
|
||||
width: 100%;
|
||||
height: calc(~"@{triple} - 2px"); // account for border
|
||||
background: #fff;
|
||||
border: @form-border;
|
||||
border-radius: @radius;
|
||||
font-size: @font-sml;
|
||||
line-height: calc(~"@{triple} - 2px"); // account for border
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
.pkp_form_error {
|
||||
margin-bottom: @base;
|
||||
border-radius: @radius;
|
||||
padding: 0 0.5em;
|
||||
font-weight: @bold;
|
||||
font-size: @font-sml;
|
||||
background: @no;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
label > input[type="checkbox"],
|
||||
label > input[type="radio"] {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.pkp_helpers_clear;
|
||||
|
||||
button {
|
||||
&:extend(.cmp_button);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: @font-sml;
|
||||
line-height: @triple;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 0;
|
||||
font-size: @font-sml;
|
||||
line-height: 1.5em;
|
||||
color: @text-light;
|
||||
|
||||
}
|
||||
|
||||
@media(min-width: @screen-phone) {
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
select {
|
||||
max-width: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.cmp_pagination {
|
||||
.pkp_helpers_clear;
|
||||
text-align: right;
|
||||
|
||||
.prev {
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
.fa;
|
||||
content: @fa-var-long-arrow-left;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.next {
|
||||
margin-left: 0.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&:after {
|
||||
.fa;
|
||||
content: @fa-var-long-arrow-right;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Edit link to jump from frontend section to backend editing location
|
||||
// It usually appears within a heading element <h*>
|
||||
.cmp_edit_link {
|
||||
display: inline-block;
|
||||
margin-left: 1em;
|
||||
font-size: @font-sml;
|
||||
font-weight: @normal;
|
||||
line-height: 1; // Try not to disrupt parent line height
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
.fa();
|
||||
content: @fa-var-pencil;
|
||||
}
|
||||
}
|
||||
|
||||
// Search result filter
|
||||
.cmp_search_filter {
|
||||
margin-bottom: @base;
|
||||
font-size: @font-sml;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: @no;
|
||||
}
|
||||
}
|
||||
|
||||
// Notification
|
||||
.cmp_notification {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: @double;
|
||||
margin-bottom: @quadruple;
|
||||
background: @bg-shade;
|
||||
border-left: @half solid @primary;
|
||||
font-size: @font-base;
|
||||
line-height: @line-base;
|
||||
|
||||
.success {
|
||||
border-color: @yes;
|
||||
}
|
||||
|
||||
.no {
|
||||
border-color: @no;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
.cmp_breadcrumbs {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
ol {
|
||||
&:extend(.pkp_unstyled_list);
|
||||
margin-bottom: @triple;
|
||||
padding: @half 0;
|
||||
line-height: @double;
|
||||
font-size: @font-sml;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: @text-light;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: @text-light;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: @font;
|
||||
font-size: @font-sml;
|
||||
font-weight: @normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Backlink used on error.tpl and message.tpl
|
||||
.cmp_back_link {
|
||||
margin-top: @double;
|
||||
}
|
||||
|
||||
// Announcements
|
||||
// Double class rule overrides .pkp_structure_main ul
|
||||
.cmp_announcements.cmp_announcements {
|
||||
&:extend(.pkp_unstyled_list);
|
||||
margin-left: -@base;
|
||||
margin-right: -@base;
|
||||
|
||||
> li {
|
||||
padding: @triple @base;
|
||||
border-bottom: @bg-border;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: @screen-phone) {
|
||||
margin-left: -@double;
|
||||
margin-right: -@double;
|
||||
|
||||
> li {
|
||||
padding-left: @double;
|
||||
padding-right: @double;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: @screen-desktop) {
|
||||
margin-left: -@triple;
|
||||
margin-right: -@triple;
|
||||
|
||||
> li {
|
||||
padding-left: @triple;
|
||||
padding-right: @triple;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Skip-to navigation links
|
||||
.cmp_skip_to_content a {
|
||||
&:extend(.pkp_screen_reader);
|
||||
display: block;
|
||||
padding: 1em;
|
||||
z-index: 99999;
|
||||
background: @bg;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:focus {
|
||||
clip: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.cmp_table {
|
||||
width: 100%;
|
||||
border: @bg-border;
|
||||
border-bottom: none;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5em;
|
||||
text-align: left;
|
||||
border-bottom: @bg-border;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: @bold;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user