//------------------------------------------------------
//
// TABLE OF CONTENTS
//
// 1 - Font Family
//
// 2 - Form Width
//
// 3 - Label Width
//
// 4 - Label Alignment
//
// 5 - Font Size
//
// 6 - Label Style
//
// 7 - Color Scheme
// 2.7.1 - Background color mixin
// 2.7.2 - Frame bg color
// 2.7.3 - Text color
// 2.7.4 - Input background color
// 2.7.5 - Focus state color
// 2.7.6 - Error state color
//
// 8 - Form Controls (input styles)
// 2.8.1 - Mixin for creating custom radio buttons & checkboxes
// 2.8.2 - Create form control styles ( Add new input styles here )
//
// 9 - Background Images
//
// 10 - Line Spacing
//
// 11 - Line Padding
//
// 12 - Rounded Inputs
//
// 13 - Button Size
//
// 14 - Header Size
//
// 15 - Header Text Align
//
// 16 - Header BG Url
//
// 17 - Input Widths
//
// 18 - Input Padding
//
// 19 - Header Font Family
//
// 20 - Form Padding
//
// 21 - Header Margin
//
// 22 - Header Padding
//
// 23 - Header Color
//
// 24 - Text Inputs
//
// 25 - Dropdowns
//
// 26 - Button Alignment
//
// 27 - Header Bottom Border
//
// 28 - Image Styles
//
// 31 - Form Cover
//
// ------------------------------------------------------
@import "global";
// -----------------
// 0 - CLEARFIX
// -----------------
.form-all {
&:after {
content: "";
display: table;
clear: both;
}
}
// -----------------
// 1 - FONT FAMILY
// -----------------
@fontFamily: Lucida Grande;
.form-all {
font-family: "@{fontFamily}", sans-serif;
& when ( "@{fontFamily}" = "Libre Baskerville"), ("@{fontFamily}" = "Merriweather"), ("@{fontFamily}" = "Vollkorn"), ("@{fontFamily}" = "Times New Roman") {
font-family: "@{fontFamily}", serif;
}
}
// ----------------
// 2 - FORM WIDTH
// ----------------
@formWidth: 720px;
@formResponsive: false;
.form-all {
width: unit(@formWidth, px);
& when ( @formResponsive = true ) {
width: 100%;
max-width: unit(@formWidth, px);
}
}
// -----------------
// 3 - LABEL WIDTH
// -----------------
@labelWidth: 150;
.form-label-left,
.form-label-right {
width: unit(@labelWidth, px);
}
// ---------------------
// 4 - LABEL ALIGNMENT
// ---------------------
@labelAlign: none;
.form-label {
white-space: normal;
&.form-label-auto {
& when ( @labelAlign = Left ) {
display: inline-block;
float: left;
text-align: left;
word-break: break-word;
width: unit(@labelWidth, px);
}
& when (@labelAlign = Right ) {
display: inline-block;
float: left;
text-align: right;
word-break: break-word;
width: unit(@labelWidth, px);
}
& when (@labelAlign = Top ) {
display: block;
float: none;
word-break: break-word;
text-align: left;
}
}
}
.form-label-left {
display: inline-block;
white-space: normal;
float: left;
text-align: left;
}
.form-label-right {
display: inline-block;
white-space: normal;
float: left;
text-align: right;
}
.form-label-top {
white-space: normal;
display: block;
float: none;
text-align: left;
}
.form-radio-item {
label:before {
top: 0;
}
}
// ---------------
// 5 - FONT SIZE
// ---------------
@fontSize: 16;
.form-all {
font-size: unit(@fontSize, px);
}
// -----------------
// 6 - LABEL STYLE
// -----------------
@labelStyle: boldLabel;
& when (@labelStyle = boldLabel) {
.form-label {
font-weight: bold;
}
.form-checkbox-item label,
.form-radio-item label {
font-weight: normal;
}
}
& when (@labelStyle = boldValue) {
.form-label {
font-weight: normal;
font-size:0.95em;
}
}
& when ( @labelStyle = noLabel) {
.form-label {
position: relative;
&:after {
content:'This label will not be seen on the form.';
background: #FFFFE0;
position: absolute;
left: 0;
top: 110%;
width: 90px;
opacity: 0;
padding: 6px 9px 8px;
.rounded(3px);
font-size: 10px;
font-weight: normal;
border:1px solid fade(black, 20%);
}
&:hover {
&:after {
opacity: 0.8;
}
}
}
.supernova .form-label:after {
display: none;
}
.jotform-form {
.form-line[data-type="control_textbox"],
.form-line[data-type="control_textarea"],
.form-line[data-type="control_fullname"],
.form-line[data-type="control_email"],
.form-line[data-type="control_address"],
.form-line[data-type="control_phone"] {
.form-label {
display: none;
}
}
}
}
// ------------------
// 7 - COLOR SCHEME
// ------------------
// 7.1 - Background color mixin
@clrBg: #fff;
@clrFrame: none;
.supernova {
background-color: @clrFrame;
background-color: @clrBg;
body { background-color: transparent; }
}
@width30: 480px;
@width60: 768px;
@width90: 1024px;
@fw: unit((@formWidth - 1), px);
@media screen and (min-width: @width30) {
.supernova {
& when not (@clrFrame = none) {
.form-all {
border:1px solid darken(@clrBg, 10%);
.box-shadow(0 3px 9px fade(black, 10%));
}
}
}
}
/* | */
/* | */
@media screen and (max-width: @width30) {
.jotform-form .form-all {
width: 100%;
}
}
/* | */
/* | */
@media screen and (min-width: @width30) and (max-width: unit((@width60 - 1), px)) {
.jotform-form .form-all {
width: 100%;
}
}
/* | */
/* | */
@media screen and (min-width: @width30) and (max-width: @fw) {
.jotform-form .form-all {
width: 100%;
}
}
/* | */
/* | */
@media screen and (min-width: @width60) {
.jotform-form { padding: 60px 0; }
}
/* | */
/* | */
@media screen and (max-width: @fw) {
.jotform-form .form-all {
width: 100%;
}
}
/* | */
// 7.2 - Frame bg color
@clrFrame: none;
.supernova .form-all, .form-all {
background-color: @clrFrame;
border: 1px solid transparent;
}
& when not (@clrFrame = none) {
.form-header-group {
border-color: darken(@clrFrame, 10%);
}
.form-matrix-table {
tr {
border-color: darken(@clrFrame, 10%);
&:nth-child(2n) {
background-color: darken(@clrFrame, 5%);
}
}
}
}
// 7.3 - Text color
@clrText: #555;
@clrLabel: @clrText;
.form-all {
color: @clrText;
}
.form-header-group {
.form-header{ color: @clrText; }
& when (iscolor(@clrText)) {
.form-subHeader{ color: lighten(@clrText, 10%); }
}
}
& when (iscolor(@clrText)) {
.form-sub-label {
color: lighten(@clrText, 10%);
}
}
& when ( @labelStyle = boldLabel) {
.form-label-top,
.form-label-left,
.form-label-right,
.form-html {
color: @clrLabel;
}
.form-checkbox-item label,
.form-radio-item label {
& when (iscolor(@clrText)) {
color: lighten(@clrLabel, 10%);
}
}
}
& when ( @labelStyle = boldValue) {
.form-label-top,
.form-label-left,
.form-label-right,
.form-html {
& when (iscolor(@clrText)) {
color: lighten(@clrLabel, 10%);
}
}
.form-checkbox-item label,
.form-radio-item label {
color: @clrLabel;
}
}
// 7.5 - Focus state color
@clrActive: #FFFFE0;
.form-line.form-line-active {
.transition(all; 0.3s; ease;);
background-color: @clrActive;
}
/* omer */
@radioVerticalPadding: 0;
.form-radio-item, .form-checkbox-item {
padding-bottom: unit(@radioVerticalPadding, px)!important;
&:last-child {
padding-bottom: 0;
}
}
/* omer */
// -------------------
// 8 - FORM CONTROLS
// -------------------
// 8.1 - Mixin for creating custom radio buttons & checkboxes
@radioHorizontalPadding: 15px;
@radioWidth: @inputWidth;
& when ( @radioWidth > -1 ) {
[data-type="control_radio"],
[data-type="control_checkbox"] {
.form-input,
.form-input-wide {
width:100%;
max-width: unit(@radioWidth, px);
}
}
// Radio & checboxes
.form-radio-item,
.form-checkbox-item {
width: 100%;
max-width: unit(@radioWidth, px);
.border-box();
}
// Radio & Checkbox other inputs
.form-textbox.form-radio-other-input,
.form-textbox.form-checkbox-other-input {
width:80%;
margin-left: 3%;
.border-box;
}
// Radio & Checkbox Columns
.radio-cols-width(@cols) when (@cols < 10) {
&[data-columncount="@{cols}"] {
.form-radio-item,
.form-checkbox-item {
width:(100/@cols) * 1%;
}
}
.radio-cols-width(@cols+1);
}
.form-multiple-column {
width: 100%;
.form-radio-item,
.form-checkbox-item {
width : 10%;
}
.radio-cols-width(1);
}
}
.ctrl-custom-size(@bgSize, @tickSize, @tickOffsetTop, @tickOffsetLeft, @radius) {
input[type="checkbox"], input[type="radio"] {
opacity: 0;
width: 0;
margin: 0;
padding: 0;
}
.form-radio-other, .form-checkbox-other {
display: inline-block!important;
margin-left: unit(@radioHorizontalPadding + 2, px);
margin-right: unit(@radioHorizontalPadding - 2, px);
margin-top: unit(@radioVerticalPadding, px);
}
.form-checkbox-other-input, .form-radio-other-input {
margin: 0;
}
label {
line-height: @bgSize;
float: left;
margin-left: @bgSize + 4px + unit(@radioHorizontalPadding, px);
outline: none !important;
}
label:before {
content: '';
position: absolute;
display: inline-block;
vertical-align: baseline;
margin-right: 4px;
.border-box();
.rounded(@radius);
left: 4px;
width: @bgSize;
height: @bgSize;
cursor: pointer;
}
label:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
opacity: 0;
top:@tickOffsetTop;
left:@tickOffsetLeft;
width: @tickSize;
height: @tickSize;
}
input:checked + label:after {
opacity: 1;
}
}
.ctrl-custom-size-ios(@bgSize, @col, @bWidth) {
input[type="checkbox"], input[type="radio"] {
opacity: 0;
width: 0;
margin: 0;
padding: 0;
}
.form-radio-other, .form-checkbox-other { display: inline-block!important; }
.form-checkbox-other-input, .form-radio-other-input {
margin: 0;
}
label {
line-height: @bgSize;
float: left;
margin-left: (@bgSize*2) + unit(@radioHorizontalPadding, px);
}
label:before {
content: '';
position: absolute;
display: inline-block;
vertical-align: baseline;
margin-right: 4px;
.border-box();
.rounded(@bgSize/2);
left: 4px;
width: @bgSize*1.8;
height: @bgSize;
cursor: pointer;
background: #f3f3f3;
border: @bWidth solid #dedede;
}
label:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
top: 0px;
left: 4px;
width: @bgSize;
height: @bgSize;
.rounded(@bgSize/2);
border: @bWidth solid #dedede;
background: #fff;
.transition(all;0.2s;ease);
.border-box();
}
input:checked + label:before {
background: lighten(@col, 5%);
border-color: @col;
}
input:checked + label:after {
border-color: @col;
left: @bgSize*0.8 + @bWidth;
}
}
// 8.2 - Create form control style here
@formControlStyle: "ctrl-default";
@formControlSize: small;
@okColor: green;
.form-single-column .form-checkbox-item, .form-single-column .form-radio-item {
width: 100%;
}
.form-checkbox-item .editor-container div, .form-radio-item .editor-container div{
position: relative;
&:before {
display: inline-block;
vertical-align: middle;
.border-box();
left: 0;
& when ( @formControlSize = small ) {
width: 18px;
height: 18px;
}
& when ( @formControlSize = big ) {
width: 24px;
height: 24px;
}
}
}
& when ( @formControlStyle = ctrl-default ) {
.form-checkbox-item,
.form-radio-item {
padding-left: 2px;
input {
margin-top:2px;
}
}
}
// First Type
& when ( @formControlStyle = ctrl-1 ) {
.form-radio-item:not(#foo) { position: relative;
.form-radio-other-input , .form-checkbox-item:not(#foo) .form-checkbox-other-input{ margin-left: 0; }
.form-radio-other.form-radio{display:none !important}
.ctrl-custom-size(18px, 8px, 5px, 9px, 50%); // 18px radio
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 10px, 7px, 11px, 50%); // 24px radio
}
label:before {
border: 2px solid @okColor;
}
label:after {
background-color: @okColor;
.rounded(50%);
cursor: pointer;
}
.editor-container div {
&:before {
content: '';
border: 2px solid @okColor;
border-radius: 50%;
margin: 0 4px 0 -6px;
}
}
}
.form-checkbox-item:not(#foo) { position: relative;
label{display:block}
.form-radio-other-input , .form-checkbox-item:not(#foo) .form-checkbox-other-input{ margin-left: 0; }
.form-checkbox-other.form-checkbox{display:none !important}
.ctrl-custom-size(18px, 3px, 8px, 9px, 50%); // 18px
label:before {
border: 2px solid @okColor;
}
label:after {
background-color: @okColor;
box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
transform: rotate(-45deg);
}
.editor-container div {
&:before {
content: '';
border: 2px solid @okColor;
border-radius: 50%;
margin: 0 4px 0 -6px;
}
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 4px, 11px, 10px, 50%); //24px
label:after {
background-color: @okColor;
box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
transform: rotate(-45deg);
}
}
}
}
// Second Type
& when ( @formControlStyle = ctrl-2 ) {
@bgColor: @clrFrame;
.form-radio-item:not(#foo) { position: relative;
.form-radio-other.form-radio{display:none !important}
.ctrl-custom-size(18px, 10px, 4px, 8px, 2px); // 18px radio
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 14px, 5px, 9px, 3px); // 24px radio
}
label:before {
background-color: transparent;
border: 2px solid #828282;
}
label:focus:before {
border-color: #588ee6;
}
.editor-container div:before {
content:'';
background-color: transparent;
border: 2px solid #828282;
margin: 0 4px 0 -6px;
}
label:after {
background-color: @okColor;
cursor: pointer;
}
}
.form-checkbox-item:not(#foo) { position: relative;
.form-checkbox-other.form-checkbox{display:none !important}
.ctrl-custom-size(18px, 4px, 6px, 10px, 2px); // 18px
label:before {
background-color: transparent;
border: 2px solid #828282;
}
label:focus:before {
border-color: #588ee6;
}
.editor-container div:before {
content:'';
background-color: transparent;
border: 2px solid #828282;
margin: 0 4px 0 -6px;
}
label:after {
background-color: @okColor;
box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,9px 3px 0 0 @okColor,8px 6px 0 0 @bgColor,10px 1px 0 0 @bgColor;
transform: rotate(-45deg);
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 6px, 8px, 10px, 3px); //24px
label:after {
background-color: @okColor;
box-shadow: 0 5px 0 0 @okColor,5px 5px 0 0 @okColor,10px 5px 0 0 @okColor,13px 5px 0 0 @okColor,10px 8px 0 0 @bgColor,15px 2px 0 0 @bgColor;
transform: rotate(-45deg);
}
}
}
}
// Third Type
& when ( @formControlStyle = ctrl-3 ) {
.form-radio-item:not(#foo) { position: relative;
.form-radio-other.form-radio{display:none !important}
.ctrl-custom-size(18px, 8px, 5px, 9px, 0%); // 18px radio
label:after {
background-color: #bbb;
.rounded(50%);
cursor: pointer;
opacity: 1;
}
.editor-container div:before {content:''; margin: 0 4px 0 -6px;}
.editor-container div:after {
background-color: #bbb;
.rounded(50%);
cursor: pointer;
opacity: 1;
content:'';
position: absolute;
z-index: 10;
}
input:checked + label:after {
background-color: @okColor;
}
& when ( @formControlSize = small ) {
.editor-container div:after {
width: 8px;
height: 8px;
left: -1px;
top: 5px;
}
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 10px, 7px, 11px, 0%); // 24px radio
label:after {
opacity: 1;
}
.editor-container div:after {
width: 10px;
height: 10px;
left: 0;
top: 7px;
}
}
}
.form-checkbox-item:not(#foo) { position: relative;
.form-checkbox-other.form-checkbox{display:none !important}
.ctrl-custom-size(18px, 3px, 8px, 9px, 0%); // 18px
label:after{
background-color: #bbb;
box-shadow: 0 2px 0 0 #bbb,2px 2px 0 0 #bbb,4px 2px 0 0 #bbb,6px 2px 0 0 #bbb;
transform: rotate(-45deg);
opacity: 1;
}
.editor-container div:before {content:''; margin: 0 4px 0 -6px;}
.editor-container div:after {
background-color: #bbb;
box-shadow: 0 2px 0 0 #bbb,2px 2px 0 0 #bbb,4px 2px 0 0 #bbb,6px 2px 0 0 #bbb;
transform: rotate(-45deg);
content:'';
position: absolute;
z-index: 10;
width:3px;
height:3px;
left:-1px;
top:8px;
}
input:checked + label:after {
background-color: @okColor;
box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 4px, 11px, 10px, 0%); //24px
label:after {
background-color: #bbb;
box-shadow: 0 3px 0 0 #bbb,3px 3px 0 0 #bbb,6px 3px 0 0 #bbb,8px 3px 0 0 #bbb;
transform: rotate(-45deg);
opacity: 1;
}
.editor-container div:after {
background-color: #bbb;
box-shadow: 0 3px 0 0 #bbb,3px 3px 0 0 #bbb,6px 3px 0 0 #bbb,8px 3px 0 0 #bbb;
transform: rotate(-45deg);
width: 4px;
height: 4px;
left: 0;
top: 11px;
}
input:checked + label:after {
background-color: @okColor;
box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
}
}
}
}
// Fourth Type
& when ( @formControlStyle = ctrl-4 ) {
.form-radio-item:not(#foo) { position: relative;
.form-radio-other.form-radio{display:none !important}
.ctrl-custom-size(18px, 8px, 5px, 9px, 50%); // 18px radio
label:before {
background-color: #444;
}
.editor-container div:before {
background-color: #444;
border-radius: 50%;
content:'';
margin: 0 4px 0 -6px;
}
label:after {
background-color: @okColor;
.rounded(50%);
cursor: pointer;
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 10px, 7px, 11px, 50%); // 24px radio
}
}
.form-checkbox-item:not(#foo) { position: relative;
.form-checkbox-other.form-checkbox{display:none !important}
.ctrl-custom-size(18px, 3px, 8px, 9px, 50%); // 18px
label:before {
background-color: #444;
}
.editor-container div:before {
background-color: #444;
border-radius: 50%;
content:'';
margin: 0 4px 0 -6px;
}
label:after {
background-color: @okColor;
box-shadow: 0 2px 0 0 @okColor,2px 2px 0 0 @okColor,4px 2px 0 0 @okColor,6px 2px 0 0 @okColor;
transform: rotate(-45deg);
}
& when ( @formControlSize = big ) {
.ctrl-custom-size(24px, 4px, 11px, 10px, 50%); //24px
label:after {
background-color: @okColor;
box-shadow: 0 3px 0 0 @okColor,3px 3px 0 0 @okColor,6px 3px 0 0 @okColor,8px 3px 0 0 @okColor;
transform: rotate(-45deg);
}
}
}
}
// Fifth Type
& when ( @formControlStyle = ctrl-5 ) {
.form-radio-item:not(#foo) { position: relative;
.form-radio-other.form-radio{display:none !important}
.form-radio-other-input {
width: 70%;
}
.ctrl-custom-size-ios(24px, @okColor, 3px);
.editor-container div:before {
width: 43.2px;
height: 24px;
content:'';
border-radius: 12px;
margin: 0 4px 0 -6px;
.border-box();
left: 4px;
cursor: pointer;
background: #f3f3f3;
border: 3px solid #dedede;
}
.editor-container div:after{
content: '';
position: absolute;
z-index: 10;
display: inline-block;
top: 0px;
left: -6px;
width: 24px;
height: 24px;
.border-box();
.rounded(12px);
border: 3px solid #dedede;
background: #fff;
}
& when ( @formControlSize = big ) {
.ctrl-custom-size-ios(36px, @okColor, 4px);
.form-radio-other-input {
margin: 0 0 0 75px !important;
width: 60%;
}
.editor-container div:before {
width: 64.8px;
height: 36px;
.rounded(18px);
border: 4px solid #dedede;
}
.editor-container div:after {
width: 36px;
height: 36px;
.rounded(50%);
border: 4px solid #dedede;
}
}
}
.form-checkbox-item:not(#foo) { position: relative; max-width:unset;
.form-checkbox-other.form-checkbox{display:none !important}
.form-radio-other-input {
width: 70%;
}
.ctrl-custom-size-ios(24px, spin(@okColor,10%), 3px); // 18px
.editor-container div:before {
width: 43.2px;
height: 24px;
content:'';
border-radius: 12px;
margin: 0 4px 0 -6px;
.border-box();
left: 4px;
cursor: pointer;
background: #f3f3f3;
border: 3px solid #dedede;
}
.editor-container div:after{
content: '';
position: absolute;
z-index: 10;
display: inline-block;
top: 0px;
left: -6px;
width: 24px;
height: 24px;
.border-box();
.rounded(12px);
border: 3px solid #dedede;
background: #fff;
}
& when ( @formControlSize = big ) {
.ctrl-custom-size-ios(36px, spin(@okColor,10%), 4px); //24px
.form-checkbox-other-input {
margin: 0 0 0 75px !important;
width: 60%;
}
.editor-container div:before {
width: 64.8px;
height: 36px;
.rounded(18px);
border: 4px solid #dedede;
}
.editor-container div:after {
width: 36px;
height: 36px;
.rounded(50%);
border: 4px solid #dedede;
}
}
}
}
// Sixth Type
& when ( @formControlStyle = ctrl-6 ) {
.form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {
position: relative;
input[type="checkbox"], input[type="radio"] {
opacity: 0;
width: 0;
margin: 0;
padding: 0;
}
.form-radio-other, .form-checkbox-other { display: none!important; }
.form-checkbox-other-input, .form-radio-other-input {
width: 50%;
}
label {
line-height: 27px;
float: left;
margin-left: 100px + unit(@radioHorizontalPadding, px);
}
label:before {
content: 'OFF';
position: absolute;
text-indent: 0;
text-align: right;
font-size: 10px;
color: #8b8b8b;
padding-right: 10px;
text-shadow: none;
display: inline-block;
vertical-align: baseline;
.border-box();
.rounded(3px);
left: 4px;
width: 96px;
height: 27px;
cursor: pointer;
border: 1px solid #7a7a7a;
background: #8a8a8a;
background: linear-gradient(to bottom, #8a8a8a 0%,#f4f4f4 100%);
}
label:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
top: 0px;
left: 4px;
height: 27px;
width: 48px;
border: 1px solid #a2a2a2;
-webkit-box-shadow: inset 0 0 0 1px #f3f3f4;
box-shadow: inset 0 0 0 1px #f3f3f4;
background: #d7d8d8;
background: linear-gradient(to bottom, #d7d8d8 0%,#f9f9fa 100%);
.transition(all, .15s, ease);
.border-box();
.rounded(3px);
}
.editor-container div:before {
content: 'OFF';
text-indent: 0;
text-align: right;
font-size: 10px;
color: #8b8b8b;
padding-right: 10px;
text-shadow: none;
display: inline-block;
.border-box();
.rounded(3px);
width: 96px;
height: 27px;
cursor: pointer;
border: 1px solid #7a7a7a;
background: #8a8a8a;
background: linear-gradient(to bottom, #8a8a8a 0%,#f4f4f4 100%);
line-height:26px;
margin: 0 4px 0 -6px;
}
.editor-container div:after {
content: '';
position: absolute;
z-index: 10;
display: inline-block;
top: 0px;
left: -6px;
height: 27px;
width: 48px;
border: 1px solid #a2a2a2;
-webkit-box-shadow: inset 0 0 0 1px #f3f3f4;
box-shadow: inset 0 0 0 1px #f3f3f4;
background: #d7d8d8;
background: linear-gradient(to bottom, #d7d8d8 0%,#f9f9fa 100%);
.transition(all, .15s, ease);
.border-box();
.rounded(3px);
}
input:checked + label:before {
content: "ON";
text-align: left;
padding-left: 12px;
text-shadow: 0 0 2px #000;
color: #fff;
border-color: darken(@okColor,13%);
background-color: darken(@okColor,10%);
background-image: linear-gradient(top, darken(@okColor,15%), @okColor);
}
input:checked + label:after {
left: 52px;
}
}
}
& when ( @formControlStyle = ctrl-plain ) {
.form-radio-item {
.ctrl-custom-size(14px, 8px, 5px, 3px, 50%);
label:before {
background-color: #ddd;
border:1px solid #bbb;
}
label:after {
background-color: #555;
}
}
.form-checkbox-item {
.ctrl-custom-size(14px, 8px, 5px, 3px, 20%);
label:before {
background-color: #ddd;
border:1px solid #bbb;
}
label:after {
background-color: #555;
}
}
}
& when ( @formControlStyle = ctrl-green ) {
.form-radio-item {
.ctrl-custom-size(16px, 8px, 4px, 4px, 50%);
label:before {
background-color: fade(white, 50%);
border:1px solid fade(black, 20%);
}
label:after {
background-color: green;
}
}
.form-checkbox-item {
.ctrl-custom-size(16px, 8px, -1px, 2px, 20%);
label:before {
background-color: fade(white, 50%);
border:1px solid fade(black, 20%);
}
label:after {
font-size:14px;
font-weight: bold;
content:'\2714';
color:green;
}
}
}
& when ( @formControlStyle = ctrl-fancy ) {
.form-radio-item {
.ctrl-custom-size(16px, 8px, 6px, 4px, 50%);
label:before {
top:2px;
background-color: transparent;
border:3px solid fade(black, 20%);
}
input:checked + label:hover:before {
border-color:fade(black, 20%);
}
label:after {
background-color: green;
width: 8px;
height: 8px;
position: absolute;
top:6px;
left: 4px;
}
input:checked + label:after {
background-color: green;
}
label:hover:after {
opacity: 0.3;
background-color: green;
}
}
.form-checkbox-item {
.ctrl-custom-size(16px, 8px, -1px, 0, 20%);
label:before {
background-color: transparent;
border:3px solid fade(black, 20%);
opacity: 1;
top: 1px;
margin-right: 6px;
}
input:checked + label:before {
opacity: 0;
}
input:checked + label:hover:before {
opacity: 0.5;
}
label:after {
font-family: FontAwesome;
font-weight: bold;
color:green;
content:'\f00c';
}
label:hover:after {
content:'\f00c';
opacity: 0.2;
}
}
}
// -----------------------
// 9 - BACKGROUND IMAGES
// -----------------------
@bgURL: "";
@bgRepeat: false;
@bgAttach: true;
@bgCover: true;
.supernova {
height: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
& when ( @bgRepeat = true ) {
background-repeat: repeat;
}
& when ( @bgAttach = true ) {
background-attachment: fixed;
background-size: auto;
}
& when ( @bgCover = true ) {
background-size: cover;
}
}
.supernova {
background-image: none;
& when not ( @bgURL = "" ) {
background-image: url("@{bgURL}");
}
}
#stage {
background-image: none;
& when not ( @bgURL = "" ) {
background-image: url("@{bgURL}");
}
}
/* | */
@frameBgURL: "";
@frameBgRepeat: false;
@frameBgAttach: false;
@frameBgCover: true;
.form-all {
& when not ( @frameBgURL = "" ) {
background-image: url("@{frameBgURL}");
}
& when (@frameBgURL = "|nobackground|") {
background-image: none;
}
// background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
& when ( @frameBgRepeat = true ) {
background-repeat: repeat;
}
& when ( @frameBgAttach = true ) {
background-attachment: fixed;
background-size: auto;
}
& when ( @frameBgCover = true ) {
background-size: cover;
}
}
// @headerBgURL: "//cdn.jotfor.ms/themes/img/blank.gif";
@headerBgRepeat: false;
@headerBgAttach: false;
@headerBgCover: false;
.form-header-group {
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center top;
& when ( @headerBgRepeat = true ) {
background-repeat: repeat;
}
& when ( @headerBgAttach = true ) {
background-attachment: fixed;
background-size: auto;
}
& when ( @headerBgCover = true ) {
background-size: cover;
}
}
// -------------------
// 10 - LINE SPACING
// -------------------
@lineSpacing: 12;
.form-line {
margin-top: unit(@lineSpacing, px);
margin-bottom: unit(@lineSpacing, px);
}
// -------------------
// 11 - LINE PADDING
// -------------------
@linePaddingVer:12;
@linePaddingHor:36;
.form-line {
padding: unit(@linePaddingVer, px) unit(@linePaddingHor, px);
}
// ---------------------
// 12 - ROUNDED INPUTS
// ---------------------
@ctrlRound: -1;
& when (@ctrlRound > -1) {
.form-all {
.form-textbox,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input,
.form-pagebreak-back,
.form-pagebreak-next,
.qq-upload-button,
.form-error-message {
.rounded(unit(@ctrlRound, px));
}
& when ( @ctrlRound > 3px) {
.form-sub-label {
margin-left: 3px;
}
}
.form-textarea {
.rounded(unit(@ctrlRound, px));
& when ( @ctrlRound > 6 ) {
padding: 10px;
}
& when ( @ctrlRound > 50 ) {
.rounded(12px);
}
}
}
}
@btnRound: -1;
& when (@btnRound > -1) {
.form-all {
.form-submit-button,
.form-submit-reset,
.form-submit-print {
.rounded(unit(@btnRound, px));
}
& when ( @btnRound > 3px) {
.form-sub-label {
margin-left: 3px;
}
}
}
}
@pageBreakBtnRound: -1;
& when (@pageBreakBtnRound > -1) {
.form-all {
.form-pagebreak-back,
.form-pagebreak-next {
.rounded(unit(@pageBreakBtnRound, px));
}
& when ( @pageBreakBtnRound > 3px) {
.form-sub-label {
margin-left: 3px;
}
}
}
}
@dropdownRound: -1;
& when (@dropdownRound > -1) {
& when not ( @formDdStyle = dd-default ) {
.form-dropdown {
.rounded(unit(@dropdownRound, px));
appearance : none;
margin: 0;
}
}
}
@formRound: -1;
& when (@formRound > -1) {
.form-all {
.rounded(unit(@formRound, px));
}
.form-section{
&:first-child {
.rounded(unit(@formRound, px) unit(@formRound, px) 0 0);
}
&:last-child {
.rounded(0 0 unit(@formRound, px) unit(@formRound, px));
}
}
}
// ------------------
// 13 - BUTTON SIZE
// ------------------
@buttonSize: normal;
@buttonWidth : -1;
@buttonHeight : -1;
@buttonCustomPriority : template;
@buttonFontFamily : @fontFamily;
@clrButton: #555;
@clrButtonBg: -1;
@clrButtonBorder : -1;
@buttonFontSize : @fontSize;
@buttonBorderStyle : solid;
@buttonBorderWidth : -1;
@buttonFontWeight : normal;
.qq-upload-button,
.submit-button,
.form-submit-reset,
.form-submit-print {
& when ( @buttonHeight > -1 ){
height : unit(@buttonHeight, px);
}
& when ( @buttonWidth > -1 ){
width : unit(@buttonWidth, px);
}
& when ( @buttonSize = small ) {
font-size: 0.85em;
padding: 6px 9px;
}
& when ( @buttonSize = normal ) {
font-size: 1em;
padding: 9px 15px;
}
& when ( @buttonSize = large ) {
font-size: 1.15em;
padding: 12px 18px;
}
& when ( @buttonSize = block ) {
font-size: 1.15em;
padding: 12px 18px;
display: block;
width: 100%;
margin:0;
}
font-size : unit(@buttonFontSize, px);
font-weight : @buttonFontWeight;
font-family: inherit;
& when ( @buttonBorderWidth > -1) {
border:none;
border-width : unit(@buttonBorderWidth, px) !important;
border-style : @buttonBorderStyle !important;
}
}
& when not( @buttonFontFamily = -1 ) {
.submit-button {
font-family: "@{buttonFontFamily}", sans-serif;
}
}
& when ( @buttonSize = large ) {
.form-submit-print {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
& when ( @buttonSize = block ) {
.form-buttons-wrapper {
margin-left:0 !important;
}
.form-pagebreak-back-container,
.form-pagebreak-next-container {
width:48% !important;
padding: 24px 0;
}
.form-pagebreak-next-container {
margin-left: 4%;
}
.form-submit-print {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
& when (@buttonCustomPriority = custom) {
& when (iscolor(@clrButton)) {
.qq-upload-button,
.submit-button,
.form-submit-reset,
.form-submit-print {
color : @clrButton;
}
}
& when (iscolor(@clrButtonBg)) {
.qq-upload-button,
.submit-button,
.form-submit-reset,
.form-submit-print {
background-color : @clrButtonBg;
box-shadow : none;
text-shadow : none;
&:hover {
background-color: darken(@clrButtonBg, 20%);
}
}
.form-buttons-wrapper button.jf-form-buttons.form-sacl-button {
color : @clrButtonBg;
border-color : @clrButtonBg;
background-image: none;
background-color: @clrButton;
&:hover {
background-color: darken(@clrButtonBg, 20%);
border-color: darken(@clrButtonBg, 20%);
}
}
}
& when (iscolor(@clrButtonBorder)) {
.qq-upload-button,
.submit-button,
.form-submit-reset,
.form-submit-print,
.form-buttons-wrapper button.jf-form-buttons.form-sacl-button {
border-color : @clrButtonBorder;
}
}
}
// ------------------
// 13 - PAGE BREAK BUTTONS
// ------------------
@pbButtonSize : normal;
@pbButtonWidth : -1;
@pbButtonHeight : -1;
@pbButtonCustomPriority : template;
@pbButtonFontFamily : @fontFamily;
@pbClrButton : @clrText;
@pbClrButtonBg : -1;
@pbClrButtonBorder : -1;
@pbButtonFontSize : @fontSize;
@pbButtonBorderStyle : solid;
@pbButtonBorderWidth : -1;
@pbButtonFontWeight : normal;
.form-pagebreak-back-container,
.form-pagebreak-next-container {
& when ( @pbButtonWidth > -1 ){
width : unit(@pbButtonWidth, px) !important;
}
}
.form-pagebreak-back,
.form-pagebreak-next {
& when ( @pbButtonWidth > -1 ){
width: 100%;
}
& when ( @pbButtonHeight > -1 ){
height : unit(@pbButtonHeight, px);
}
& when ( @pbButtonSize = small ) {
font-size: 0.85em;
padding: 6px 9px;
}
& when ( @pbButtonSize = normal ) {
font-size: 1em;
padding: 9px 15px;
}
& when ( @pbButtonSize = large ) {
font-size: 1.15em;
padding: 12px 18px;
}
& when ( @pbButtonSize = block ) {
font-size: 1.15em;
padding: 12px 18px;
display: block;
width: 100%;
margin:0;
}
font-size : unit(@pbButtonFontSize, px);
font-weight : @pbButtonFontWeight;
& when ( @pbButtonBorderWidth > -1){
border:none;
border-width: unit(@pbButtonBorderWidth, px) !important;
border-style: @pbButtonBorderStyle !important;
}
}
& when ( @pbButtonSize = large ) {
.form-submit-print {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
& when ( @pbButtonSize = block ) {
.form-buttons-wrapper {
margin-left:0 !important;
}
.form-pagebreak-back-container,
.form-pagebreak-next-container {
width:48% !important;
padding: 24px 0;
}
.form-pagebreak-next-container {
margin-left: 4%;
}
.form-submit-print {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
& when (@pbButtonCustomPriority = custom){
& when (iscolor(@pbClrButton)) {
.form-pagebreak-back,
.form-pagebreak-next {
color : @pbClrButton;
}
}
& when (iscolor(@pbClrButtonBg)) {
.form-pagebreak-back,
.form-pagebreak-next {
background-color : @pbClrButtonBg;
box-shadow : none;
text-shadow : none;
&:hover {
background-color: darken(@pbClrButtonBg, 20%);
}
}
.form-pagebreak button.jf-form-buttons.form-sacl-button {
color : @pbClrButtonBg;
border-color : @pbClrButtonBg;
background-image: none;
background-color: @pbClrButton;
&:hover {
background-color: darken(@pbClrButtonBg, 20%);
border-color: darken(@pbClrButtonBg, 20%);
}
}
}
& when (iscolor(@pbClrButtonBorder)) {
.form-pagebreak-back,
.form-pagebreak-next,
.form-pagebreak button.jf-form-buttons.form-sacl-button {
border-color: @pbClrButtonBorder;
}
}
}
// ------------------
// 14 - HEADER SIZE
// ------------------
@headerSize: normal;
h2.form-header {
line-height: 1.618em;
& when ( @headerSize = small ) { font-size: 1.5em; }
& when ( @headerSize = normal ) { font-size: 1.714em; }
& when ( @headerSize = big ) { font-size: 2.143em; }
}
h2 ~ .form-subHeader {
line-height: 1.5em;
& when ( @headerSize = small ) { font-size: 0.9em; }
& when ( @headerSize = normal ) { font-size: 1.071em; }
& when ( @headerSize = big ) { font-size: 1.1em; }
}
// ------------------------
// 15 - HEADER TEXT ALIGN
// ------------------------
@headerTextAlign: Left;
.form-header-group {
& when ( @headerTextAlign = Left ) { text-align: left; }
& when ( @headerTextAlign = Center ) { text-align: center; }
& when ( @headerTextAlign = Right ) { text-align: right; }
}
// --------------------
// 16 - HEADER BG URL
// --------------------
@headerbgURL: '';
.form-header-group {
& when not ( @headerbgURL = "" ) {
background-image: url("@{headerbgURL}");
}
}
// -------------------
// 17 - INPUT WIDTHS
// -------------------
@inputWidth: -1;
& when ( @inputWidth > -1 ) {
.form-line {
.clearfix();
}
.form-captcha input,
.form-spinner input
/*.form-error-message*/ {
width: unit(@inputWidth, px);
}
.form-textbox,
.form-textarea {
width: 100%;
max-width: unit(@inputWidth, px);
.border-box();
}
.form-input,
.form-address-table,
.form-matrix-table {
width: 100%;
max-width: unit(@inputWidth, px);
}
// Radio & checboxes
.form-radio-item,
.form-checkbox-item {
width: 100%;
max-width: unit(@inputWidth, px);
//white-space: nowrap;
.border-box();
}
// Radio & Checkbox other inputs
.form-textbox.form-radio-other-input,
.form-textbox.form-checkbox-other-input {
width:80%;
margin-left: 3%;
.border-box;
}
// Radio & Checkbox Columns
.radio-cols-width(@cols) when (@cols < 10) {
&[data-columncount="@{cols}"] {
.form-radio-item,
.form-checkbox-item {
width:(100/@cols) * 1%;
}
}
.radio-cols-width(@cols+1);
}
.form-multiple-column {
width: 100%;
.form-radio-item,
.form-checkbox-item {
width : 10%;
}
.radio-cols-width(1);
}
// Dropdown
[data-type="control_dropdown"] .form-dropdown {
width: 100% !important;
max-width: unit(@inputWidth, px);
}
// Fullname
[data-type="control_fullname"] .form-sub-label-container {
.border-box();
width: 48%;
&:first-child {
margin-right: 4%;
}
}
// Phone number
[data-type="control_phone"] .form-sub-label-container {
width: 62.5%;
margin-left: 2.5%;
margin-right: 0;
float: left;
position: relative;
&:first-child {
width: 32.5%;
margin-right: 2.5%;
margin-left: 0;
[data-component=areaCode] {
width: 93%;
float: left;
& ~ .form-sub-label {
display: inline-block;
}
}
.phone-separate {
position: absolute;
top: 0;
right: -16%;
width: 24%;
text-align: center;
text-indent: -4px;
}
}
}
// Birthdate
[data-type="control_birthdate"] .form-sub-label-container {
width: 22%;
margin-right: 3%;
&:first-child {
width: 50%;
}
&:last-child {
margin-right: 0;
}
.form-dropdown {
width:100%;
}
}
// Payment Fields
[data-type="control_payment"] .form-sub-label-container {
width: auto;
.form-dropdown {
width:100%;
}
}
// Address field
.form-address-table td {
.form-dropdown {
width: 100%;
}
.form-sub-label-container {
width: 96%;
}
&:last-child .form-sub-label-container {
margin-left:4%;
}
&[colspan="2"] .form-sub-label-container {
width: 100%;
margin: 0;
}
}
}
& when ( @inputWidth > ( unit(@formWidth, px) - ( @linePaddingHor * 2 ))) {
.form-line,
.form-input,
.form-input-wide,
.form-dropdown,
.form-sub-label-container,
.form-address-table,
.form-matrix-table {
.border-box;
width: 100%;
max-width: none;
}
.form-textbox,
.form-textarea,
.form-radio-item,
.form-checkbox-item,
.form-captcha input,
.form-spinner input,
.form-error-message {
width:100%;
max-width: none;
.border-box;
}
}
// -------------------
// 18 - INPUT PADDING
// -------------------
@inputPaddingVer:3;
@inputPaddingHor:3;
.form-captcha input,
.form-spinner input,
.form-error-message {
padding: unit((@inputPaddingVer + 1), px) unit(@inputPaddingHor, px) unit((@inputPaddingVer - 1), px) unit(@inputPaddingHor, px);
}
// -------------------
// 19 - HEADER FONT
// -------------------
@headerFontFamily: false;
& when not(@headerFontFamily = false) {
.form-header-group {
font-family: "@{headerFontFamily}", sans-serif;
}
}
// -------------------
// 20 - FORM PADDING
// -------------------
@formPaddingVer:0;
@formPaddingHor:0;
.form-section {
padding: unit(@formPaddingVer, px) unit(@formPaddingHor, px) unit(@formPaddingVer, px) unit(@formPaddingHor, px);
}
// -------------------
// 21 - HEADER MARGIN
// -------------------
@headerMarginVer:12;
@headerMarginHor:36;
.form-header-group {
margin: unit(@headerMarginVer, px) unit(@headerMarginHor, px) unit(@headerMarginVer, px) unit(@headerMarginHor, px);
}
// -------------------
// 22 - HEADER PADDING
// -------------------
@headerPaddingVer:24;
@headerPaddingHor:0;
.form-header-group {
padding: unit(@headerPaddingVer, px) unit(@headerPaddingHor, px) unit(@headerPaddingVer, px) unit(@headerPaddingHor, px);
}
// -------------------
// 23 - HEADER COLOR OPTIONS
// -------------------
@clrHeader: "";
& when (iscolor(@clrHeader)) {
.form-header-group {
.form-header, .form-subHeader {
color: @clrHeader;
}
}
}
@clrHeaderBg: "";
& when (iscolor(@clrHeaderBg)) {
.form-header-group {
background-color: @clrHeaderBg;
}
}
// -------------------
// 24 - TEXT INPUTS
// -------------------
@textInputBorderWidth: -1;
@textInputBorderStyle: -1;
@clrTextInputBorder: -1;
@clrTextInputBg: -1;
@clrTextInputFont: -1;
@textInputPaddingVer: 3;
@textInputPaddingHor: 3;
@textInputHeight: -1;
@textAreaHeight: -1;
@textInputWidth: @inputWidth;
.form-textbox,
.form-textarea {
& when not ( @textInputBorderWidth = -1 ) {
border-width: unit(@textInputBorderWidth, px);
}
& when not ( @textInputBorderStyle = -1 ) {
border-style: @textInputBorderStyle;
}
& when (iscolor(@clrTextInputBorder)) {
border-color: @clrTextInputBorder;
}
& when (iscolor(@clrTextInputFont)) {
color: @clrTextInputFont;
}
padding: unit((@textInputPaddingVer + 1), px) unit(@textInputPaddingHor, px) unit((@textInputPaddingVer - 1), px) unit(@textInputPaddingHor, px);
}
& when (iscolor(@clrTextInputBg)) {
.form-textbox,
.form-textarea,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
background-color: @clrTextInputBg;
}
}
// Heights
.form-textbox {
& when (@textInputHeight > -1) {
height: unit(@textInputHeight, px);
}
}
.form-textarea {
& when (@textAreaHeight > -1) {
height: unit(@textAreaHeight, px);
}
}
// Width
& when (@textInputWidth > -1) {
.form-textbox,
.form-textarea {
width: 100%;
max-width: unit(@textInputWidth, px);
.border-box();
}
[data-type="control_textbox"],
[data-type="control_textarea"],
[data-type="control_fullname"],
[data-type="control_phone"],
[data-type="control_datetime"],
[data-type="control_address"],
[data-type="control_email"],
[data-type="control_passwordbox"],
[data-type="control_autocomp"] {
.form-input,
.form-input-wide {
width: 100%;
max-width: unit(@textInputWidth, px);
}
}
// Fullname
[data-type="control_fullname"] .form-sub-label-container {
.border-box();
width: 48%;
margin-right: 0;
float:left;
&:first-child {
margin-right: 4%;
}
}
// Phone number
[data-type="control_phone"] .form-sub-label-container {
width: 62.5%;
margin-left: 2.5%;
margin-right: 0;
float: left;
position: relative;
&:first-child {
width: 32.5%;
margin-right: 2.5%;
margin-left: 0;
[data-component=areaCode] {
width: 93%;
float: left;
& ~ .form-sub-label {
display: inline-block;
}
}
.phone-separate {
position: absolute;
top: 0;
right: -16%;
width: 24%;
text-align: center;
text-indent: -4px;
}
}
.date-separate {
visibility: hidden;
}
}
// Matrix
.form-matrix-table {
width: 100%;
max-width: unit(@textInputWidth, px);
}
// Address field
.form-address-table {
width: 100%;
max-width: unit(@textInputWidth, px);
td {
.form-dropdown {
width: 100%;
}
.form-sub-label-container {
width: 96%;
}
&:last-child .form-sub-label-container {
margin-left:4%;
}
&[colspan="2"] .form-sub-label-container {
width: 100%;
margin: 0;
}
}
}
}
.form-matrix-row-headers,
.form-matrix-column-headers,
.form-matrix-values {
padding: 4px;
}
// -------------------
// 25 - DROPDOWN
// -------------------
@dropdownBorderWidth: -1;
@dropdownBorderStyle: -1;
@clrDropdownBorder: -1;
@clrDropdownBg: -1;
@clrDropdownFont: -1;
@dropdownHeight: -1;
@dropdownWidth: @inputWidth;
.form-dropdown {
& when (@dropdownBorderWidth > -1) {
border-width: unit(@dropdownBorderWidth, px);
}
& when not (@dropdownBorderStyle = -1) {
border-style: @dropdownBorderStyle;
}
& when not (@clrDropdownBorder = -1) {
border-color: @clrDropdownBorder;
}
& when not (@clrDropdownFont = -1) {
color: @clrDropdownFont;
}
& when not (@clrDropdownBg = -1) {
background-color: @clrDropdownBg;
}
& when (@dropdownHeight > -1) {
height: unit(@dropdownHeight, px);
}
}
& when not ( @dropdownWidth > -1 ) {
[data-type="control_dropdown"] {
.form-input,
.form-input-wide {
width: 150px;
}
}
}
& when ( @dropdownWidth > -1 ) {
[data-type="control_dropdown"],
[data-type="control_birthdate"],
[data-type="control_time"] {
.form-input,
.form-input-wide {
width: 100%;
max-width: unit(@dropdownWidth, px);
}
}
// Dropdown
[data-type="control_dropdown"] .form-dropdown {
width: 100% !important;
max-width: unit(@dropdownWidth, px);
}
// Birthdate
[data-type="control_birthdate"] .form-sub-label-container {
width: 22%;
margin-right: 3%;
&:first-child {
width: 50%;
}
&:last-child {
margin-right: 0;
}
.form-dropdown {
width:100%;
}
}
}
@formDdStyle: "dd-0";
& when ( @formDdStyle = dd-0 ) {
.form-dropdown {
margin: 0;
border-color: #a6a6a6;
appearance : menulist!important;
border-width: 1px;
}
}
& when ( @formDdStyle = dd-1 ) {
.form-dropdown{
margin: 0;
appearance: none;
padding-left: 5px;
}
li[data-type="control_dropdown"] > div.form-input,
li[data-type="control_dropdown"] > div.form-input-wide,
li[data-type="control_time"] div .form-sub-label-container {
position: relative;
}
li[data-type="control_time"] div .form-sub-label-container {
margin-bottom: 16px;
.form-sub-label {
position: absolute;
}
}
li[data-type="control_dropdown"] > div.form-input:before,
li[data-type="control_dropdown"] > div.form-input-wide:before,
li[data-type="control_time"] div .form-sub-label-container:before {
width: 18px;
content: "";
display: inline-block;
top: 1px;
bottom: 1px;
right: 1px;
border-left: 1px solid #828282;
background-color: #fff;
.rounded(0 4px 4px 0);
& when (@dropdownBorderWidth > -1) {
border-left-width: unit(@dropdownBorderWidth, px);
top: unit(@dropdownBorderWidth, px);
bottom: unit(@dropdownBorderWidth, px);
right: unit(@dropdownBorderWidth, px);
width: 20px + unit(@dropdownBorderWidth, px);
}
& when not (@dropdownBorderStyle = -1) {
border-left-style: @dropdownBorderStyle;
}
& when not (@clrDropdownBorder = -1) {
border-left-color: @clrDropdownBorder;
}
& when not (@clrDropdownBg = -1) {
background-color: @clrDropdownBg;
}
& when (@dropdownRound > -1) {
.rounded(0 unit(@dropdownRound, px) unit(@dropdownRound, px) 0);
}
position: absolute;
pointer-events: none;
cursor: pointer;
}
li[data-type="control_dropdown"] > div.form-input:after,
li[data-type="control_dropdown"] > div.form-input-wide:after,
li[data-type="control_time"] div .form-sub-label-container:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-width: 5px;
border-color: #828282 transparent transparent transparent;
& when not (@clrDropdownBorder = -1) {
border-color: @clrDropdownBorder transparent transparent transparent;
}
position: absolute;
border-style: solid;
top: 44%;
right: 5px;
& when (@dropdownBorderWidth > -1) {
right: unit((@dropdownBorderWidth - 1)/2, px) + 7px;
}
pointer-events: none;
cursor: pointer;
}
}
& when ( @formDdStyle = dd-2 ) {
.form-dropdown{
margin: 0;
appearance: none;
padding-left: 5px;
}
li[data-type="control_time"] div .form-sub-label-container {
margin-bottom: 16px;
.form-sub-label {
position: absolute;
}
}
li[data-type="control_dropdown"] > div.form-input,
li[data-type="control_dropdown"] > div.form-input-wide,
li[data-type="control_time"] div .form-sub-label-container {
position: relative;
}
li[data-type="control_dropdown"] > div.form-input:before,
li[data-type="control_dropdown"] > div.form-input-wide:before,
li[data-type="control_time"] div .form-sub-label-container:before {
width: 18px;
content: "";
display: inline-block;
top: 1px;
bottom: 1px;
right: 1px;
border: 1px solid #828282;
background-color: #fff;
.rounded(4px);
.border-box();
& when (@dropdownBorderWidth > -1) {
border-width: unit(@dropdownBorderWidth, px);
top: unit(@dropdownBorderWidth + 1, px);
bottom: unit(@dropdownBorderWidth + 1, px);
right: unit(@dropdownBorderWidth + 1, px);
width: 20px + unit(2*@dropdownBorderWidth, px);
}
& when not (@dropdownBorderStyle = -1) {
border-style: @dropdownBorderStyle;
}
& when not (@clrDropdownBorder = -1) {
border-color: @clrDropdownBorder;
}
& when not (@clrDropdownBg = -1) {
background-color: @clrDropdownBg;
}
& when (@dropdownRound > -1) {
.rounded(unit(@dropdownRound, px));
}
position: absolute;
pointer-events: none;
cursor: pointer;
}
li[data-type="control_dropdown"] > div.form-input:after,
li[data-type="control_dropdown"] > div.form-input-wide:after,
li[data-type="control_time"] div .form-sub-label-container:after {
content : "";
display : inline-block;
width: 0;
height: 0;
border-width: 5px;
border-color: #828282 transparent transparent transparent;
& when not (@clrDropdownBorder = -1) {
border-color: @clrDropdownBorder transparent transparent transparent;
}
position: absolute;
border-style: solid;
top: 44%;
right: 5px;
& when (@dropdownBorderWidth > -1) {
right: unit(2*@dropdownBorderWidth, px) + 6px;
}
pointer-events: none;
cursor: pointer;
}
}
// -----------------------
// 26 - BUTTON ALIGNMENT
// -----------------------
// To Do: Find a way to remove !important
@btnAlign: -1;
& when not ( @btnAlign = -1 ) {
.form-buttons-wrapper {
margin-left: 0 !important;
& when ( @btnAlign = auto ) {
& when not (@labelAlign = Top) {
margin-left: unit(@labelWidth+6, px) !important;
}
& when (@labelAlign = top) {
margin-left: 0 !important;
}
text-align: left;
}
& when ( @btnAlign = left ) {
text-align: left;
}
& when ( @btnAlign = center ) {
text-align: center;
}
& when ( @btnAlign = right ) {
text-align: right;
}
}
}
// -----------------------
// 26 - PAGE BREAK BUTTON ALIGNMENT
// -----------------------
// To Do: Find a way to remove !important
@pbBtnAlign: -1;
& when not ( @pbBtnAlign = -1 ) {
.form-pagebreak{
& when ( @pbBtnAlign = left ) {
text-align: left !important;
}
& when ( @pbBtnAlign = center ) {
text-align: center !important;
}
& when ( @pbBtnAlign = right ) {
text-align: right !important;
}
}
.form-pagebreak-back-container, .form-pagebreak-next-container {
float: none !important;
display: inline-block !important;
}
}
// --------------------------
// 26 - HEADER BORDER BOTTOM
// --------------------------
@hideHeaderBorder: false;
& when ( @hideHeaderBorder = true ) {
.form-header-group {
border-bottom:none;
}
}
// -------------------
// 26 - LABEL SPACING
// -------------------
@labelSpacing: -1;
& when (@labelSpacing > -1 ) {
.form-label {
& when (@labelAlign = Top) {
margin-bottom: unit(@labelSpacing, px);
margin-right: 0;
}
& when (@labelAlign = Left), (@labelAlign = Right) {
margin-right: unit(@labelSpacing, px);
margin-bottom: 0;
}
}
}
// -------------------
// 28 - IMAGE STYLES
// -------------------
@imageWidth: -1;
@imageHeight: -1;
@imageAlign: left;
@imageBorderStyle: solid;
@imageBorderWidth: 0;
@clrImageBorder : false;
li[data-type="control_image"] div {
text-align: @imageAlign;
}
li[data-type="control_image"] img {
border:none;
border-width : unit(@imageBorderWidth, px) !important;
border-style : @imageBorderStyle !important;
border-color : @clrImageBorder !important;
}
& when (@imageWidth > -1 ) {
.form-image {
width: unit(@imageWidth, px);
height: auto;
}
}
& when (@imageHeight > -1 ) {
.form-image {
height: unit(@imageHeight, px);
width: auto;
}
}
& when (@imageHeight > -1 ) {
& when (@imageWidth > -1 ) {
.form-image {
height: unit(@imageHeight, px);
width: unit(@imageWidth, px);
}
}
}
// -------------------
// 29 - FORM COLUMNS
// -------------------
// Don't move above input, dd, radio or textbox widths
@formCols : -1;
.form-line-column {
width: auto;
& when ( @formCols > 1 ) {
width: (100/@formCols) * 1%;
.border-box();
& when ( @formCols > 2 ) {
padding-right: unit(@linePaddingHor / 2, px);
padding-left: unit(@linePaddingHor / 2, px);
}
.loop(@n) when (@n < 11) {
@startCols: (@formCols * @n) + 1;
@endCols: (@formCols * @n);
&.form-col-@{startCols} {
padding-left:unit(@linePaddingHor, px);
padding-right: unit(@linePaddingHor / 2, px);
}
&.form-col-@{endCols} {
padding-left: unit(@linePaddingHor / 2, px);
padding-right:unit(@linePaddingHor, px);
}
.loop(@n+1);
}
.loop(0);
}
}
// -------------------
// 30 - ERROR STATES
// -------------------
@clrErrorBg: #FFF4F4;
@clrErrorMsg: #FF3200;
@clrNewErrorMsg: #6e6e6e;
@formErrorStateStyle: es-0;
& when ( @formErrorStateStyle = es-0 ) {
.form-line-error {
overflow: hidden;
.transition(none; 0.3s; ease;);
background-color: @clrErrorBg;
.form-error-message {
background-color: @clrErrorMsg;
clear: both;
float: none;
.form-error-arrow {
border-bottom-color: @clrErrorMsg;
}
}
input:not(#coupon-input),
textarea,
.form-validation-error {
border: 1px solid @clrErrorMsg;
.box-shadow(0 0 3px @clrErrorMsg);
}
}
}
& when ( @formErrorStateStyle = es-1 ) {
.form-line-error {
background-color: @clrFrame;
.form-sub-label-container {
margin-bottom: 16px;
position: relative;
.form-sub-label {
position: absolute;
}
}
input:not(#coupon-input),
textarea,
.form-validation-error {
.transition(none; 0.3s; ease;);
border-width: unit(@textInputBorderWidth, px);
border-style: @textInputBorderStyle;
border-color: @clrTextInputBorder;
border-right: 3px solid @clrErrorBg;
box-shadow: none;
padding-right: 1px;
}
.form-error-message {
margin: 0;
position: absolute;
color: #fff;
box-shadow: none;
display: inline-block;
right: 0;
font-size: 10px;
top: unit(@linePaddingVer, px);
color: #FFF;
background: @clrErrorMsg;
padding: 0px 5px;
opacity: 1;
bottom: auto;
min-width: 105px;
line-height: 12px;
.transition(opacity; 0.3s; ease;);
.rounded(0);
img, .form-error-arrow { display: none; }
&:after {
width: 22px;
height: 22px;
content: "!";
color: #FFF;
background: @clrNewErrorMsg;
position: absolute;
text-align: center;
left: -23px;
top: 0;
line-height: 22px;
}
}
}
}
& when ( @formErrorStateStyle = es-2 ) {
.form-line-error {
background-color: @clrFrame;
box-shadow: inset 0px 3px 11px -7px @clrErrorMsg;
input:not(#coupon-input),
textarea,
.form-validation-error {
.transition(none; 0.3s; ease;);
border: 1px solid @clrErrorBg;
box-shadow: 0 0 3px @clrErrorBg;
}
.form-error-message {
margin: 0;
position: absolute;
color: #fff;
box-shadow: none;
display: inline-block;
right: 0;
font-size: 12px;
position: absolute!important;
.rounded(0);
bottom: auto;
box-shadow: none;
top: 0px;
color: #FFF;
background: @clrErrorMsg;
padding: 0px 5px;
bottom: auto;
.rounded(0);
box-shadow: 0px 2px 4px rgba(102, 102, 102, 0.5);
img, .form-error-arrow { display: none; }
}
}
}
& when ( @formErrorStateStyle = es-3 ) {
.form-line-error {
background-color: @clrFrame;
input:not(#coupon-input),
textarea,
.form-validation-error {
.transition(none; 0.3s; ease;);
border: 1px solid @clrErrorBg;
box-shadow: 0 0 3px @clrErrorBg;
}
.form-error-message {
img, .form-error-arrow { display: none; }
position: absolute;
top: 0px;
bottom: auto;
right: 0;
top: unit(@lineSpacing, px);
float: left;
background-color: @clrErrorMsg;
.rounded(0);
}
}
}
// -------------------
// 31 - FORM COLLAPSE
// -------------------
@collapseBgColor: -1;
@collapseTextColor: -1;
@collapsePaddingHor: -1;
@collapsePaddingVer: -1;
@collapseMarginVer: -1;
@collapseMarginHor: -1;
.form-collapse-table {
& when not (@collapseBgColor = -1) {
border: 1px solid rgba(0,0,0,0.2);
.bg-clip(padding);
& when (iscolor(@collapseBgColor)) {
.gradient(lighten(@collapseBgColor, 10%), @collapseBgColor);
}
.box-shadow(0 1px 0 ~"rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2)");
&:hover {
& when (iscolor(@collapseBgColor)) {
.gradient(lighten(@collapseBgColor, 20%), lighten(@collapseBgColor, 10%));
}
}
&:active {
.box-shadow(0 1px 0 ~"rgba(255,255,255,0.5) inset");
& when (iscolor(@collapseBgColor)) {
.gradient(@collapseBgColor, lighten(@collapseBgColor, 10%));
}
}
.form-collapse-mid {
text-shadow:none;
}
}
& when not (@collapseTextColor = -1) {
color: @collapseTextColor;
}
& when ( @collapsePaddingHor > -1 ) {
padding-left: unit(@collapsePaddingHor, px);
padding-right: unit(@collapsePaddingHor, px);
.form-collapse-mid {
margin-right: 0;
margin-left: 0;
}
}
& when ( @collapsePaddingVer > -1 ) {
padding-top:unit(@collapsePaddingVer, px);
padding-bottom:unit(@collapsePaddingVer, px);
.form-collapse-mid {
margin-top:0;
margin-bottom:0;
}
.form-collapse-right {
height:24px;
top:50%;
}
.form-collapse-right-show { margin-top: -15px; }
.form-collapse-right-hide { margin-top: -12px; }
height: auto;
.border-box();
max-height: 60px;
overflow: hidden;
}
& when (@collapseMarginVer > -1) {
margin-top: unit(@collapseMarginVer, px);
margin-bottom: unit(@collapseMarginVer, px);
}
& when (@collapseMarginHor > -1) {
margin-left: unit(@collapseMarginHor, px);
margin-right: unit(@collapseMarginHor, px);
}
}
[data-type="control_clear"] { display: none; }
// mobile compatibility classes
/* | */
@media screen and (max-width: @width30), screen and (max-device-width: unit((@width60 - 1), px)) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
.testOne { letter-spacing: 0; }
.form-all {
border: 0;
// Enables us to show a little of the background.
max-width: initial;
}
.form-sub-label-container {
width: 100%;
margin: 0;
margin-right: 0;
float: left;
.border-box();
}
span.form-sub-label-container + span.form-sub-label-container { margin-right: 0 }
.form-sub-label { white-space: normal }
.form-address-table td,
.form-address-table th { padding: 0 1px 10px }
.form-submit-button,
.form-submit-print,
.form-submit-reset {
width: 100%;
margin-left: 0!important;
}
div[id*=at_] {
font-size: 14px;
font-weight: 700;
height: 8px;
margin-top: 6px;
}
.showAutoCalendar { width: 20px }
img.form-image { max-width: 100%; height: auto }
.form-matrix-row-headers {
width: 100%;
word-break: break-all;
min-width: 80px;
}
.form-collapse-table,
.form-header-group { margin: 0 }
.form-collapse-table { height: 100%; display: inline-block; width: 100% }
.form-collapse-hidden { display: none!important }
.form-input { width: 100% }
.form-label { width: 100%!important }
.form-label-left,
.form-label-right {
display: block;
float: none;
text-align: left;
width: auto!important;
}
.form-line,
.form-line.form-line-column {
padding: 2% 5%;
.border-box();
}
input[type=text],
input[type=email],
input[type=tel],
textarea {
width: 100%;
.border-box();
// Didn't work if input width property was specified. resetting max-width fixes that.
max-width: initial !important;
}
.form-radio-other-input, .form-checkbox-other-input{
max-width: 55% !important;
}
.form-dropdown,
.form-textarea,
.form-textbox {
width: 100%!important;
.border-box();
}
.form-input,
.form-input-wide,
.form-textarea,
.form-textbox,
.form-dropdown {
// 100% width didn't work if input width property was specified. resetting max-width fixes that.
max-width: initial!important;
}
.form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {
width: 100%;
}
.form-address-city,
.form-address-line,
.form-address-postal,
.form-address-state,
.form-address-table,
.form-address-table .form-sub-label-container,
.form-address-table select,
.form-input { width: 100% }
div.form-header-group {
// Initially based on users input, left & right consistent with form-line if horizontal margin = 0
padding: unit(@headerPaddingVer, px) unit(@headerPaddingHor, px) !important;
& when ( @headerMarginHor = 0 ) {
padding-left: 5%!important;
padding-right: 5%!important;
}
// vertical margins made smaller. horizontal initially based on users input, consistent with form-line if horizontal padding = 0
margin: 0 unit(@headerMarginVer, px) 2% !important;
& when ( @headerPaddingHor = 0 ) {
margin-left: 5%!important;
margin-right: 5%!important;
}
.border-box();
&.hasImage img { max-width: 100% }
}
[data-type="control_button"] { margin-bottom: 0 !important }
[data-type=control_fullname] .form-sub-label-container {
width: 48%;
&:first-child { margin-right: 4% }
}
[data-type=control_phone] .form-sub-label-container{
width: 65%;
margin-right: 0;
margin-left: 0;
float: left;
&:first-child { width: 31%; margin-right: 4% }
}
[data-type=control_datetime] .allowTime-container { width: 100% }
[data-type=control_datetime] .allowTime-container .form-sub-label-container { width: 24%!important; margin-left: 6%; margin-right: 0 }
[data-type=control_datetime] .allowTime-container .form-sub-label-container:first-child { margin-left: 0; }
[data-type=control_datetime] span + span + span > span:first-child { display: block; width: 100%!important }
[data-type=control_birthdate] .form-sub-label-container,
[data-type=control_time] .form-sub-label-container { width: 27.3%!important; margin-right: 6%!important }
[data-type=control_time] .form-sub-label-container:last-child { width: 33.3%!important; margin-right: 0!important }
.form-pagebreak-back-container,
.form-pagebreak-next-container {
min-height: 1px;
width: 50%!important
}
.form-pagebreak-back,
.form-pagebreak-next,
.form-product-item.hover-product-item { width: 100% }
.form-pagebreak-back-container { padding: 0; text-align: right }
.form-pagebreak-next-container { padding: 0; text-align: left }
.form-pagebreak { margin: 0 auto }
.form-buttons-wrapper {
margin: 0!important;
margin-left: 0!important;
button { width: 100% }
.form-submit-print { margin: 0 !important }
}
table {
width: 100%!important;
// 100% width didn't work if input width property was specified. resetting max-width fixes that.
max-width: initial!important;
td + td { padding-left: 3%; }
}
.form-checkbox-item,
.form-radio-item {
white-space:normal!important;
input { width: auto; }
}
// Made Form collapse margins consistent with form line.
.form-collapse-table {
margin: 0 5%;
width: auto;
display: block;
.clearfix();
width: auto;
}
.fb-like-box { width: 98%!important }
.form-error-message { clear: both; bottom:-10px }
.date-separate,
.phone-separate { display: none }
.custom-field-frame,
.direct-embed-widgets,
.signature-pad-wrapper { width: 100%!important }
}
/* | */