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

test_rendering page customized

parent 419b57da
//*// MIXIN BUTTONS //*//
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active,
.open > .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open > .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
\ No newline at end of file
//*// MIXIN CLEARFIX //*//
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
\ No newline at end of file
//*// MIXIN FONT FACE //*//
.font-face(@font-path; @file-name; @font-family; @font-weight; @font-style; @svg-id; @local, ~'';) {
@font-face {
font-family: @font-family;
src: url('@{font-path}@{file-name}.eot');
src: @local
url('@{font-path}@{file-name}.eot?#iefix') format('embedded-opentype'),
url('@{font-path}@{file-name}.woff') format('woff'),
url('@{font-path}@{file-name}.ttf') format('truetype'),
url('@{font-path}@{file-name}.svg#@{svg-id}') format('svg');
font-weight: @font-weight;
font-style: @font-style;
}
}
//*// MIXIN FORMS //*//
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@plone-text-color: #555; @plone-border-color: #ccc; @plone-background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @plone-text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @plone-border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@plone-border-color, 10%);
@plone-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@plone-border-color, 20%);
.box-shadow(@plone-shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @plone-text-color;
border-color: @plone-border-color;
background-color: @plone-background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @plone-text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@plone-color: @plone-input-border-focus) {
@plone-color-rgba: rgba(red(@plone-color), green(@plone-color), blue(@plone-color), .6);
&:focus {
border-color: @plone-color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{plone-color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@plone-input-height; @plone-padding-vertical; @plone-padding-horizontal; @plone-font-size; @plone-line-height; @plone-border-radius) {
height: @plone-input-height;
padding: @plone-padding-vertical @plone-padding-horizontal;
font-size: @plone-font-size;
line-height: @plone-line-height;
border-radius: @plone-border-radius;
select& {
height: @plone-input-height;
line-height: @plone-input-height;
}
textarea&,
select[multiple]& {
height: auto;
}
}
\ No newline at end of file
//*// BOOTSTRAP GRID MIXIN //*//
//*// This is exactly BOOTSTRAP GRID, replace it for your system
// Grid system
//
// Generate semantic grid columns with these mixins.
// Centered container element
.container-fixed(@gutter: @plone-grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @plone-grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @plone-grid-gutter-width) {
position: relative;
float: left;
width: percentage((@columns / @plone-grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @plone-grid-columns));
}
.make-xs-column-push(@columns) {
left: percentage((@columns / @plone-grid-columns));
}
.make-xs-column-pull(@columns) {
right: percentage((@columns / @plone-grid-columns));
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @plone-grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @plone-screen-sm-min) {
float: left;
width: percentage((@columns / @plone-grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @plone-screen-sm-min) {
margin-left: percentage((@columns / @plone-grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @plone-screen-sm-min) {
left: percentage((@columns / @plone-grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @plone-screen-sm-min) {
right: percentage((@columns / @plone-grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @plone-grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @plone-screen-md-min) {
float: left;
width: percentage((@columns / @plone-grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @plone-screen-md-min) {
margin-left: percentage((@columns / @plone-grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @plone-screen-md-min) {
left: percentage((@columns / @plone-grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @plone-screen-md-min) {
right: percentage((@columns / @plone-grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @plone-grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @plone-screen-lg-min) {
float: left;
width: percentage((@columns / @plone-grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @plone-screen-lg-min) {
margin-left: percentage((@columns / @plone-grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @plone-screen-lg-min) {
left: percentage((@columns / @plone-grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @plone-screen-lg-min) {
right: percentage((@columns / @plone-grid-columns));
}
}
\ No newline at end of file
//*// BOOTSTRAP GRID MIXIN FRAMEWORK //*//
//*// This is exactly BOOTSTRAP GRID, replace it for your system
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @plone-grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @plone-grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@plone-grid-gutter-width / 2);
padding-right: (@plone-grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @plone-grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @plone-grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @plone-grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @plone-grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @plone-grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @plone-grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@plone-grid-columns, @class, width);
.loop-grid-columns(@plone-grid-columns, @class, pull);
.loop-grid-columns(@plone-grid-columns, @class, push);
.loop-grid-columns(@plone-grid-columns, @class, offset);
}
//*// MIXIN IMAGE RESPONSIVE //*//
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
\ No newline at end of file
//*// MIXIN PREFIXES //*//
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
.transition(@transition) {
-webkit-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}
\ No newline at end of file
//*// MIXIN TAB FOCUS //*//
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.placeholder(@plone-color: @plone-input-color-placeholder) {
&::-moz-placeholder { color: @plone-color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: @plone-color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @plone-color; } // Safari and Chrome
}
\ No newline at end of file
//*// MODAL //*//
.plone-modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
z-index: 1040;
background: rgba(255,255,255,.5);
.plone-modal-dialog {
width: 100%;
position: relative;
.plone-modal-header {
min-height: 25px;
padding: @plone-padding-base-horizontal;
h3 {font-size: @plone-font-size-large; margin:0;}
.plone-modal-close {
margin-top: -12px;
float: right;
font-size: @plone-font-size-large*2;
font-weight: 100;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2;
&:hover, &:focus {
text-decoration: none;
cursor: pointer;
opacity: .5;
}
}
}
.plone-modal-body {
padding: @plone-padding-base-horizontal;
.modal-image {
text-align: center;
}
}
.plone-modal-footer {
.formControls;
padding: @plone-padding-base-horizontal;
text-align: right;
.pattern-modal-buttons input + input {margin-left: @plone-padding-base-horizontal;}
}
}
.plone-modal-content {
position: relative;
background: rgba(255,255,255,.9);
border:0;
border-radius: @plone-border-radius-base;
outline: none;
background-clip: padding-box;
box-shadow: 0 0 25px rgba(0,0,0,.15);
.container();
padding-left: 0;
padding-right: 0;
}
&.fade {
opacity: 0;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
&.in {
opacity: 1;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease;
}
& .plone-modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.25s ease-out;
-moz-transition: -moz-transform 0.25s ease-out;
-o-transition: -o-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
}
&.in .plone-modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
}
&.in {display: block !important;}
}
.plone-modal-loading{float:left;width:0%;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;transition:width .6s ease;-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-size:40px 40px;border-radius:0.5em;width:40em;height:40px}
.plone-modal-open {padding-right:0; }
.plone-modal-open > *:not(.plone-modal-wrapper,.select2-drop, .mce-floatpanel) {-webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px);}
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
// Correct `block` display not defined for `main` in IE 11.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
//
// 1. Correct `inline-block` display not defined in IE 8/9.
// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
//