Commit ccbdf9f8 authored by vikas-parashar's avatar vikas-parashar
Browse files

test_rendering page customized

parent 419b57da
//*// BEHAVIORS //*//
.newsImageContainer {
float:right;
margin: 0 0 @plone-padding-base-vertical @plone-padding-base-vertical;
border-radius: @plone-border-radius-base;
box-shadow: 0 1px 2px rgba(0,0,0,.17);
overflow: hidden;
a {
display: table;
background-color: @plone-body-bg;
}
a img { display: block; }
figcaption {
display: table-caption;
caption-side: bottom;
font-size: @plone-font-size-small;
background: @plone-portlet-footer-bg;
}
}
//*// BREADCRUMBS //*//
.plone-breadcrumb {
clear: left;
background-color: @plone-breadcrumb-bg;
margin-bottom: @plone-line-height-computed;
margin-top: -@plone-line-height-computed;
> * > span { //you are here
display: inline-block;
color: @plone-gray-light;
padding: @plone-breadcrumb-padding-vertical 0;
font-weight: @plone-font-weight-regular;
@media (max-width: @plone-screen-sm-min) {
display: none;
}
}
ol {
display: inline-block;
padding: @plone-breadcrumb-padding-vertical 0;
list-style: none;
margin: 0;
> li {
font-weight: @plone-font-weight-regular;
display: inline-block;
line-height: 0; // match ol & span height
position: relative;
padding: 0 @plone-breadcrumb-padding-horizontal*2 0 0;
+ li:after {
content: "";
position: absolute;
padding: 0 5px;
color: @plone-breadcrumb-bg;
border-left: 5px solid;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
left: -21px;
top: -15px;
padding: 0 !important;
}
+ li:before {
content: "";
position: absolute;
padding: 0 5px;
color: @plone-breadcrumb-color;
border-left: 5px solid;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
left: -20px;
top: -15px;
padding: 0 !important;
}
}
a {
color: @plone-link-color-on-grey;
}
> #breadcrumbs-current {
color: @plone-breadcrumb-active-color;
}
}
/* uncomment to hide breadcrumbs on home
body.section-front-page & {display: none;} //not breadcrumbs on homepage
*/
}
\ No newline at end of file
//*// BUTTONS //*//
.standalone, .context, .destructive, [type="submit"], button {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @plone-font-weight-bold;
text-align: center;
text-shadow: 0 1px rgba(0,0,0,.25);
vertical-align: middle;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
white-space: nowrap;
.button-size(@plone-padding-base-vertical; @plone-padding-base-horizontal; @plone-font-size-base; @plone-line-height-base; @plone-border-radius-small);
.user-select(none);
&,
&:active,
&.active {
&:focus {
.tab-focus();
}
}
&:hover,
&:focus {
color: @plone-btn-standalone-color;
text-decoration: none;
.box-shadow(0 1px 2px rgba(0,0,0,.25));
}
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.5);
.box-shadow(none);
}
}
.standalone, [type="submit"], button { //gray
.button-variant(@plone-btn-standalone-color; @plone-btn-standalone-bg; @plone-btn-standalone-border);
}
.context { //blue
.button-variant(@plone-btn-context-color; @plone-btn-context-bg; @plone-btn-context-border);
}
.destructive { //red
.button-variant(@plone-btn-destructive-color; @plone-btn-destructive-bg; @plone-btn-destructive-border);
}
.link-parent {
.standalone; margin-bottom: @plone-padding-base-horizontal;
&:before {content: "↩ ";top: 3px;position: relative;}
}
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.form-control {
// Ensure that the input is always above the *appended* addon button for
// proper border colors.
position: relative;
z-index: 2;
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input. Details:
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
float: left;
width: 100%;
margin-bottom: 0;
}
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
// Jankily prevent input button groups from wrapping with `white-space` and
// `font-size` in combination with `inline-block` on buttons.
font-size: 0;
white-space: nowrap;
// Negative margin for spacing, position for bringing hovered/focused/actived
// element above the siblings.
> .btn {
position: relative;
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}
}
// Negative margin to only have a 1px border between the two
&:first-child {
> .btn,
> .btn-group {
margin-right: -1px;
}
}
&:last-child {
> .btn,
> .btn-group {
margin-left: -1px;
}
}
}
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @plone-caret-width-base dashed;
border-right: @plone-caret-width-base solid transparent;
border-left: @plone-caret-width-base solid transparent;
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @plone-caret-width-large @plone-caret-width-large 0;
border-bottom-width: 0;
}
//*// CODE //*//
//*// Inline codes
code,
kbd,
pre,
samp {
font-family: @plone-font-family-monospace;
}
code {
padding: 2px 4px;
font-size: 90%;
color: @plone-code-color;
background-color: @plone-code-bg;
border-radius: @plone-border-radius-base;
}
kbd {
padding: 2px 4px;
font-size: 90%;
color: @plone-kbd-color;
background-color: @plone-kbd-bg;
border-radius: @plone-border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
//*// Block code
pre {
display: block;
padding: round((@plone-line-height-computed - 1) / 2);
margin: 0 0 (@plone-line-height-computed / 2);
font-size: (@plone-font-size-base - 1); // 14px to 13px
line-height: @plone-line-height-base;
word-break: break-all;
word-wrap: break-word;
color: @plone-pre-color;
background-color: @plone-pre-bg;
border: 1px solid @plone-pre-border-color;
border-radius: @plone-border-radius-base;
// Account for some code outputs that place code tags in pre tags, not used in Plone as default
code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
}
\ No newline at end of file
//*// CONTENTS //*//
body#visual-portal-wrapper.pat-plone .outer-wrapper {
[class*="contenttype-"]:before {
font-family:"Fontello"; font-size: 100%;
padding: 0; margin:0; position: relative; left: inherit; display: inline-block; color: inherit;
width: 20px; height: 20px; text-align: center; margin-right: @plone-padding-base-vertical;
}
.contenttype-folder:before { content: '\e801';}
.contenttype-document:before { content: '\e80e';}
.contenttype-file:before { content: '\e811';}
.contenttype-link:before { content: '\e806';}
.contenttype-image:before { content: '\e810';}
.contenttype-collection:before {content: '\e808';}
.contenttype-event:before { content: '\e809';}
.contenttype-news-item:before { content: '\e80f';}
}
//*// on right on toolbar
body#visual-portal-wrapper.pat-plone #edit-zone {
[class*="contenttype-"] {padding: 5px 15px 5px 50px;}
a {color: @plone-btn-context-color;}
[class*="contenttype-"]:after {
font-family:"Fontello"; font-size: 100%;
padding: 0; margin:0; position: relative; left: 25px; display: inline-block; color: inherit;
width: 20px; height: 20px; text-align: center; margin-right: @plone-padding-base-vertical;
position:absolute;
}
.contenttype-folder:after { content: '\e801';}
.contenttype-document:after { content: '\e80e';}
.contenttype-file:after { content: '\e811';}
.contenttype-link:after { content: '\e806';}
.contenttype-image:after { content: '\e810';}
.contenttype-collection:after { content: '\e808';}
.contenttype-event:after { content: '\e809';}
.contenttype-news-item:after { content: '\e80f';}
}
//*// thumbnails for images, leadimages in listings and portlets
.image-icon, .image-tile {
float:right;
}
//*// Site Setup
.portlet.portletSiteSetup .portletContent > ul > li a:before {content:"";}
.portlet.portletSiteSetup .portletContent > ul li:hover {background: #edecec;}
.portletNavigationTree {
// nav.portletContent > ul > li a {border:none; padding:0px;}
&.portletSiteSetup {
nav.portletContent > ul > li a {border:none; padding:0px;color: #4D4D4D;
&:hover {
text-decoration: none;
}
}
a {
// padding-left: 30px; //adjust icons of products
border: none;
text-align: center;
height: 100%;
padding: 0;
// img {
// position: absolute;
// margin-left: -22px;
// margin-top: 2px;
// display:none; //remove to show images
// }
span {font-size: 50px; text-align: center; display: block; color: #4d4d4d;}
}
ul {background: #edecec; padding-bottom: 20px;}
li {vertical-align: top;}
ul > li > a:hover:after {content:""}
.inner-configlet {
margin-top: 10px; padding-bottom: 10px;
&:hover {
background: rgba(255,255,255,.67);
border-radius: 5px;
box-shadow: inset 1px 1px 3px #bbbbbb;
span {
color: #333;
}
}
}
}
}
.template-overview-controlpanel .portlet.portletSiteSetup .portletContent > ul > li {height: 120px;}
#portlet-prefs ul ul {
padding-top: 10px;
li {
padding-top: 10px;
a {
text-align: inherit;
padding-left: 40px;
&:before {
content:"•"; position: absolute; font-size: @plone-font-size-h3+1; margin-top: -9px; left: 15px;
color: lighten(@plone-portlet-list-bullet, 15%);
}
}
}
}
.template-usergroup-groupprefs,
.template-usergroup-userprefs,
.template-usergroup-controlpanel,
.template-member-registration {
.field { margin-top: 2em;}
.formControls { border-top: 0; box-shadow: none; margin-bottom: 1em; }
table.listing { margin-bottom: 0.5em; }
input.quickSearch { margin-bottom: 0.5em; }
.listingCheckbox { vertical-align: middle; text-align: center; }
}
.template-usergroup-groupprefs,
.template-usergroup-userprefs {
form { overflow: scroll; }
}
.template-actions-controlpanel #content-core {
.addAction {
height: 2em;
}
section.portlet {
clear: both;
}
ol.configlets li {
margin: 1.2em;
}
}
//*// DECO //*//
//*// /!\ IMPORTANT
//*// This is not the original deco.gs
//*// This not uses the position, so elements need to be on the correct order.
//*// Original deco here: https://github.com/limi/deco.gs
//*// Adapted deco
@media (min-width: @plone-grid-float-breakpoint) {
div.row {
position: relative;
}
div.cell {
float: left;
top: 0;
}
div.width-1 { width: 8.33333% }
div.width-2 { width: 16.66667% }
div.width-3, div.width-1\3a 4 { width: 25% } //¼
div.width-4, div.width-1\3a 3 { width: 33.33333% } //⅓
div.width-5 { width: 41.66667% }
div.width-6, div.width-1\3a 2 { width: 50% } //½
div.width-7 { width: 58.33333% }
div.width-8, div.width-2\3a 3 { width: 66.66667% } //⅔
div.width-9, div.width-3\3a 4 { width: 75% } //¾
div.width-10 { width: 83.33333% }
div.width-11 { width: 91.66667% }
div.width-12 { width: 100% }
}
div.row {padding-bottom: 1px;} //hack
//Everything 100% for mobile
//*// Dashboard
@media (min-width: @plone-grid-float-breakpoint) {
#dashboard {
margin-left: -15px;
margin-right: -15px;
position: relative;
.clearfix;
}
#dashboard-portlets1, #dashboard-portlets2, #dashboard-portlets3, #dashboard-portlets4 {
float: left;
padding-left: 15px;
padding-right: 15px;
top: 0;
width: 25%;
}
}
//*// DISCUSSION //*//
#commenting {
.clearfix();
}
#commenting legend,
.discussion legend {
padding: 0.5em 0.5em 0.5em 0;
font-weight: normal;
}
.discussion {
.clearfix();
.comment {
margin-bottom: 12px;
padding-left: 40px;
}
.commentImage {
.pull-left();
border-radius: 50px;
overflow: hidden;
position: absolute;
margin-left: -40px;
margin-top: 3px;
}
.documentByLine {
font-weight: normal;
}
.commentDate {
.pull-right();
display: inline;
font-size: @plone-font-size-small;
color: #76797C;
}
.commentBody {
margin: 1em 0;
padding: 1em;
overflow: auto;
border: 1px solid #ccc;
p {
float: left;
margin-bottom: 0;
}
}
.commentactionsform {
display: inline;
margin-left: 6px;
}
.commentActions {
float: right;
text-align: right;
}
.reply {
border-bottom: @plone-portlet-border;
}
}
//*// Reply Form
.cancelreplytocomment {
/* Hide the cancel button in the comment form, show it only in the reply form
* in order to close it.
*/
display: none;
}
.replyTreeLevel0 { margin-left: 0; }
.replyTreeLevel1 { margin-left: @plone-padding-base-horizontal*2;}
.replyTreeLevel2 { margin-left: @plone-padding-base-horizontal*4;}
.replyTreeLevel3 { margin-left: @plone-padding-base-horizontal*6;}
.replyTreeLevel4 { margin-left: @plone-padding-base-horizontal*8;}
.replyTreeLevel5 { margin-left: @plone-padding-base-horizontal*10;}
.replyTreeLevel6 { margin-left: @plone-padding-base-horizontal*12;}
.replyTreeLevel7 { margin-left: @plone-padding-base-horizontal*14;}
.replyTreeLevel8 { margin-left: @plone-padding-base-horizontal*16;}
.replyTreeLevel9 { margin-left: @plone-padding-base-horizontal*18;}
.replyTreeLevel10{ margin-left: @plone-padding-base-horizontal*20;}
//*// Button to login
#viewlet-below-content .loginbutton {margin: @plone-padding-base-horizontal 0;}
//first button login out
#viewlet-below-content .reply .loginbutton {display: none;}
#viewlet-below-content .reply ~ .reply .loginbutton {display: inline-block;}
//*// Moderation View
#dobulkaction {
margin: 0.3em 0;
}
//*// Discussion Control Panel