MAINHACK

Viewing / Editing File: formcraft-common.less

/*
Common FormCraft CSS elements
*/

@import "less-variables.less";
@keyframes checkbox-check {
	0% {
		width: 0;
  }
  100%{
  	width: 100%;
  }
}
@-webkit-keyframes loadAnimate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loadAnimate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.width-100 {
	width: 100%;
}
.width-50 {
	width: 50%;
}
.formcraft-shadow {
	background-color: white;
	box-shadow: 0 0 0 0.5px rgba(0,20,40,.11), 0 2px 8px 0 rgba(50,55,90,.2);
}
.smoothing {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;	
}
.noSmoothing {
	-webkit-font-smoothing: initial;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: initial;	
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../lib/material-icons/MaterialIcons-Regular.eot');
	src: local('Material Icons'),
	local('MaterialIcons-Regular'),
	url('../lib/material-icons/MaterialIcons-Regular.woff') format('woff'),
	url('../lib/material-icons/MaterialIcons-Regular.ttf') format('truetype');
}

.formcraft-loader,
.formcraft-loader:after {
  border-radius: 100%;
  width: 18px;
  height: 18px;
  display: inline-block;
}
.formcraft-loader {
  margin: 0;
  font-size: 12px;
  position: relative;
  text-indent: -9999em;
  border-top: 2px solid @themeColor;
  border-right: 2px solid @themeColor;
  border-bottom: 2px solid @themeColor;
  border-left: 2px solid transparent;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loadAnimate 1.1s infinite linear;
  animation: loadAnimate 1.1s infinite linear;
}

.formcraft-css .formcraft-icon {
	font-family: 'Material Icons' !important; 
	font-weight: normal; 
	font-style: normal; 
	font-size: 110%; 
	line-height: 1; 
	display: inline-block; 
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	vertical-align: text-bottom;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
}

body.ReactModal__Body--open {
  overflow: hidden;
}

.FormCraftModalOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0,0,0,.3);
  opacity: 0;
  transition: opacity .5s;
  .CloseIcon {
  	position: absolute;
  	top: 0;
  	right: 0;
  	font-size: 1.4em;
  	padding: .75em;
  	color: inherit;
  	opacity: .5;
  	cursor: pointer;
  	z-index: 99999;
  	&:hover {
  		opacity: .75;
  	}
  }
  .FormCraftModal {
    border-radius: @borderRadius;
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    transform: scale(.98) translateY(-48%) translateX(-50%);
    opacity: 0;
    transition: transform .25s, opacity .25s, height .5s, width .5s;
    box-shadow: 0 5px 25px 0 rgba(0,0,0,.4);
    transform-origin: 0 0;
    overflow: hidden;
  }
  &.ShowingModal {
    opacity: 1;
    .FormCraftModal {
      opacity: 1;
      transform: scale(1) translateY(-50%) translateX(-50%);
    }    
  }
  &.HidingModal {
    opacity: 0;
    .FormCraftModal {
      opacity: 0;
      transform: scale(.98) translateY(-48%) translateX(-50%);
    }
  }  
}

.formcraft-css {
	line-height: 1.35;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	.IsRed {
		color: #e86464;
	}
	.IsGreen {
		color: #1d8e56;
		border-color: #1d8e56;
	}
	.IsRedBorder {
		border-color: #e86464 !important;		
	}
	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: inherit;
		font-size: inherit;
		line-height: 1.3;
		text-transform: none;
		font-weight: normal;
		margin: 0;
		outline: none;
	}
	::-webkit-input-placeholder {
		color: #bbb;
	}
	::-moz-placeholder {
		color: #bbb;
	}
	:-ms-input-placeholder {
		color: #bbb;
	}
	:-moz-placeholder {
		color: #bbb;
	}  
	select {
		height: auto;
		color: inherit;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		box-shadow: none;
		border: 0px;
		margin: 0px;
		-webkit-appearance: none;
		-moz-appearance: none;
		text-indent: 0.01px;
		text-overflow: '';
		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDYgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPnNlbGVjdC0tYXJyb3dzPC90aXRsZT48cGF0aCBkPSJNMS4xNDIgOC42ODNMMi4zMSA5Ljc1cy4zNS4zOC42OS4zOGMuMzQgMCAuNjg5LS4zNzkuNjg5LS4zNzlsMS4xNjktMS4wNjhhLjY5LjY5IDAgMCAxIC45NDMuMDA2LjYyLjYyIDAgMCAxIC4wMDYuOTA1TDMuNDcgMTEuODE3QS42NzEuNjcxIDAgMCAxIDMgMTJhLjY3MS42NzEgMCAwIDEtLjQ2OS0uMTgzTC4xOTMgOS41OTRhLjYyLjYyIDAgMCAxIC4wMDYtLjkwNS42OS42OSAwIDAgMSAuOTQzLS4wMDZ6bTAtNS4zNjZBLjY5LjY5IDAgMCAxIC4yIDMuMzExYS42Mi42MiAwIDAgMS0uMDA2LS45MDVMMi41My4xODNBLjY3MS42NzEgMCAwIDEgMyAwYy4xNzEgMCAuMzQxLjA2LjQ2OS4xODNsMi4zMzggMi4yMjNhLjYyLjYyIDAgMCAxLS4wMDYuOTA1LjY5LjY5IDAgMCAxLS45NDMuMDA2TDMuNjg4IDIuMjVTMy4zNCAxLjg3IDMgMS44N2MtLjM0IDAtLjY5LjM4LS42OS4zOEwxLjE0MiAzLjMxN3oiIGZpbGw9IiM1MjVGN0YiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
		background-repeat: no-repeat;
		background-size: 6px;
		background-position: 92% 54%;	
		background-position: right 1.2em top 55%;
		background-color: transparent;	
	}
	button::-moz-focus-inner,
	[type="button"]::-moz-focus-inner,
	[type="reset"]::-moz-focus-inner,
	[type="submit"]::-moz-focus-inner {
		border-style: none;
		padding: 0;
	}
	input[type="checkbox"],
	input[type="radio"] {
		position: relative;
		box-sizing: border-box;
		border: 1px solid darken(#d6d8d9, 4%);
		background-color: #fafafa;
		box-shadow: none;
		border-radius: 100%;
		width: 18px;
		height: 18px;
		vertical-align: bottom;
		-webkit-appearance: none;
		text-align: center;
		cursor: pointer;
		display: inline-block;
		padding: 0;
		-moz-appearance: none;
		&:focus {
			border: 1px solid darken(#d6d8d9, 4%);
			outline: 2px solid rgba(51, 51, 51, 0.2);
		}
		&:hover {
			border: 1px solid darken(#d6d8d9, 12%);
			background-color: darken(#fafafa, 2%);
		}
		&:before {
			background: none;
			vertical-align: middle;
			box-sizing: border-box;
			.noSmoothing();
			margin: 0;
			position: absolute;
			color: white;
			display: none;
		  transform-origin: 0% 100%;
	    content: "";
			left: 6px;
			top: 8px;	    
	    height: 5px;
	    width: 10px;
	    border-left: 2px solid white;
	    border-bottom: 2px solid white;
	    transform: rotate(-45deg);
	    border-radius: 0px;
		}		
		&:checked:before {
			display: inline-block;
		}
	}
	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		border-color: darken(#4cb787, 6%);
		background: #4cb787;
		&:before {
			display: inline-block;
		}
	}

input[type="checkbox"] {
		border-radius: 2px;
	}

/* ColorPicker */
	.wp-picker-holder {
		position: absolute;
		z-index: 999;
		margin-top: 0px;
	}
	.wp-picker-active {
		box-shadow: @boxShadowDarkOne;
	}
	.wp-picker-active .wp-picker-holder {
		box-shadow: @boxShadowDarkOne;
	}
	.wp-picker-container .iris-picker {
		margin-top: 0;
		border: 0;
	}

/* textAngular */
	.textangular {
		display: block;
		border: 0;
		margin-top: 2px;
		background-color: white;
		transition: box-shadow .4s;
		position: relative;
		padding-top: 4px;
		box-shadow: 0 0 0 1px rgba(0,20,40,.08);
		&:before {
			height: 4px;
			top: 0;
			left: -1px;
			right: -1px;
			position: absolute;
			content: '';
			background-color: #777;
		}
		&.focussed {
			box-shadow: 0 0 0 0.5px rgba(0,20,40,.08), 0 2px 12px rgba(0,10,20,.16);
			&:before {
				background-color: @themeColor;
			}
		}
		.ta-toolbar {
			border-bottom: 1px solid @borderColorDarkOne;
			background-color: @backgroundGreyOne;
			padding-bottom: .45em;
			padding-top: .35em;
			.btn-group {
				display: inline-block;
				border: 0;
				margin: .35em 0 0 .65em;
				box-shadow: 0 0 0 0.5px rgba(0,0,0,.22);
				border-radius: 2px;
				background-color: white;
				overflow: hidden;
				button {
					cursor: pointer;
					background: none;
					box-shadow: none;
					border: 0px;
					padding: .52em .55em .47em;
					display: inline-block;
					margin: 0;
					margin-bottom: -1px;
					outline: none;
					.formcraft-icon {
						font-size: 1.2em;
					}
					&.active {
						color: @themeColor;
					}
					&:hover {
						background-color: #f0f1f2;
					}
				}
			}
		}
		.ta-editor {
			textarea {
				outline: none;
				background: inherit;
			}
		}

.ta-hidden-input {
			width: 1px;
			height: 1px;
			border: none;
			margin: 0;
			padding: 0;
			position: absolute;
			top: -10000px;
			left: -10000px;
			opacity: 0;
			overflow: hidden;
		}

/* add generic styling for the editor */
		.ta-root.focussed > .ta-scroll-window.form-control {
			outline: 0;
		}

.ta-editor.ta-html,
		.ta-scroll-window.form-control {
			height: auto;
			overflow: auto;
			font-family: inherit;
			font-size: 100%;
			width: 100%;
			box-shadow: none;
			outline: none;
			border: 0px;
			margin: 0;
			vertical-align: top;
		}

.ta-scroll-window.form-control {
			position: relative;
			padding: 0;
		}

.ta-scroll-window > .ta-bind {
			height: auto;
			padding: 0 1em;
		}

.ta-bind,
		textarea {
			min-height: 200px;
		}

textarea,
		textarea:focus,
		textarea:hover {
			box-shadow: none !important;
			border: 0px !important;
			border-radius: 0 !important;
		}

.ta-editor:focus {
			user-select: text;
		}

/* add the styling for the awesomness of the resizer */
		.ta-resizer-handle-overlay {
			z-index: 100;
			position: absolute;
			display: none;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-info {
			position: absolute;
			bottom: 16px;
			right: 16px;
			border: 1px solid black;
			background-color: #FFF;
			padding: 0 4px;
			opacity: 0.7;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-background {
			position: absolute;
			bottom: 5px;
			right: 5px;
			left: 5px;
			top: 5px;
			border: 1px solid black;
			background-color: rgba(0, 0, 0, 0.2);
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-corner {
			width: 10px;
			height: 10px;
			position: absolute;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-corner-tl{
			top: 0;
			left: 0;
			border-left: 1px solid black;
			border-top: 1px solid black;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-corner-tr{
			top: 0;
			right: 0;
			border-right: 1px solid black;
			border-top: 1px solid black;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-corner-bl{
			bottom: 0;
			left: 0;
			border-left: 1px solid black;
			border-bottom: 1px solid black;
		}

.ta-resizer-handle-overlay > .ta-resizer-handle-corner-br{
			bottom: 0;
			right: 0;
			border: 1px solid black;
			cursor: se-resize;
			background-color: white;
		}

.popover {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1060;
			display: none;
			max-width: 230px !important;
			padding: 0;
			font-size: 1em;
			font-weight: normal;
			line-height: 1.42857143;
			text-align: left;
			white-space: normal;
			background-color: #fff;
			border-radius: 0;
			box-shadow: @boxShadowDarkOne;
			.arrow {
				display: none !important;
			}
		}
		.popover.top {
			margin-top: -10px;
		}
		.popover.bottom {
			margin-top: 10px;
		}
		.popover-title {
			padding: 8px 14px;
			margin: 0;
			font-size: 14px;
			background-color: #f7f7f7;
			border-bottom: 1px solid #ebebeb;
			border-radius: 5px 5px 0 0;
		}
		.popover-content {
			padding: 0;
			white-space: nowrap;
			.btn-group {
				display: inline-block;
				padding-right: 0 !important;
			}
			button {
				cursor: pointer;
				background: none;
				box-shadow: none;
				border: 0px;
				padding: .65em;
				display: inline-block;
				margin: 0;
				outline: none;
				.formcraft-icon {
					font-size: 1.25em;
				}
				&:hover {
					color: @themeColor;
				}
			}
		}	
	}

/* Tooltips */
	.tooltip {
		position: absolute;
		z-index: 99999;
		display: block;
		visibility: visible;
		font-size: 12px;
		font-weight: normal;
		line-height: 1.4;
		margin-top: -4px;
		opacity: 0;
		filter: alpha(opacity=0);
		letter-spacing: 0;
		text-transform: none;
	}
	.tooltip.right.in {
		margin-top: 0px;
		padding: 0 5px;
		margin-left: 3px;
	}
	.tooltip-cover {
		position: relative;
	}
	.tooltip.in {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	.tooltip.top {
		margin-top: -10px;
		padding: 0;
	}
	.tooltip.right {
		margin-left: 3px;
		margin-top: 0px;
		padding: 0 5px;
	}
	.tooltip.bottom {
		margin-top: 3px;
		padding: 5px 0;
	}
	.tooltip.left {
		margin-right: 22px;
		margin-left: 0;
		padding: 0 5px;
		margin-top: 1px;
	}
	.tooltip-inner {
		max-width: 400px;
		min-width: 40px;
		padding: 8px 10px;
		color: #656565;
		text-align: left;
		text-decoration: none;
		background-color: #fff;
		box-shadow: 0 0 0 0.5px rgba(0,20,40,.14), 0 2px 12px 0 rgba(20,40,80,.4);
		border-radius: 2px;
		br {
			line-height: 1.8em;
		}
	}
	.tooltip.top .tooltip-arrow:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent;
		bottom: -1px;
		left: 50%;
		margin-left: -7px;
		border-width: 7px 7px 0;
		border-top-color: #ddd;
		border-style: solid;
		z-index: -1;
	}
	.tooltip.right .tooltip-arrow:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent;
		bottom: -7px;
		left: 14px;
		margin-left: -15px;
		border-width: 7px 7px 7px 0;
		border-right-color: #ddd;
		border-style: solid;
		z-index: -1;
	}
	.tooltip.left .tooltip-arrow:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent;
		bottom: -7px;
		right: 14px;
		margin-right: -15px;
		border-width: 7px 0 7px 7px;
		border-left-color: #ddd;
		border-style: solid;
		z-index: -1;
	}
	.tooltip-arrow {
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
	}
	.tooltip.top .tooltip-arrow {
		bottom: -6px;
		left: 50%;
		margin-left: -7px;
		border-width: 7px 7px 0;
		border-top-color: #fff;
	}
	.tooltip.top-left .tooltip-arrow {
		bottom: 0;
		right: 7px;
		margin-bottom: -7px;
		border-width: 7px 7px 0;
		border-top-color: #fff;
	}
	.tooltip.top-right .tooltip-arrow {
		bottom: 0;
		left: 7px;
		margin-bottom: -7px;
		border-width: 7px 7px 0;
		border-top-color: #fff;
	}
	.tooltip.right .tooltip-arrow {
		top: 50%;
		left: 0;
		margin-top: -7px;
		border-width: 7px 7px 7px 0;
		border-right-color: #fff;
	}
	.tooltip.left .tooltip-arrow {
		top: 50%;
		right: 0;
		margin-top: -7px;
		border-width: 7px 0 7px 7px;
		border-left-color: #fff;
	}
	.tooltip.bottom .tooltip-arrow {
		top: 0;
		left: 50%;
		margin-left: -7px;
		border-width: 0 7px 7px;
		border-bottom-color: #fff;
	}
	.tooltip.bottom-left .tooltip-arrow {
		top: 0;
		right: 7px;
		margin-top: -7px;
		border-width: 0 7px 7px;
		border-bottom-color: #fff;
	}
	.tooltip.bottom-right .tooltip-arrow {
		top: 0;
		left: 7px;
		margin-top: -7px;
		border-width: 0 7px 7px;
		border-bottom-color: #fff;
	}	
	.formcraft-button {
	  .smoothing();
	  display: inline-block;
		text-decoration: none;
	  background-color: @themeColor;
	  box-shadow: none;
	  border: 0px;
	  color: white;
	  padding: 1em 1.3em 1em 1.3em;
	  border-radius: 4px;
	  cursor: pointer;
	  text-transform: uppercase;
	  font-weight: 700;
	  letter-spacing: .1px;
	  font-size: .85em;
	  box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 4px rgba(0,20,40,.18);
	  transition: box-shadow .1s, padding .2s;
	  line-height: inherit;
	  position: relative;
	  .formcraft-loader {
		  border-top-color: #fff;
		  border-right-color: #fff;
		  border-bottom-color: #fff;
		  border-left-color: transparent;
	  	width: 9px;
	    height: 9px;
			top: 50%;
	    margin-top: -.45em;
	    right: .75em;
	    display: inline-block;
	    position: absolute;
	    transition: right .25s, opacity .25s;
	    opacity: 0;
	  }
	  &.loading .formcraft-loader {
	  	opacity: 1;
	  }
	  &:hover {
	  	box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 5px rgba(0,20,40,.32);
	  }
	  &.isEnabled {
	  	box-shadow: 0px 1px 4px rgba(0,20,40,.45) inset;
	  	background-color: darken(@themeColor, 2%);
	  }
	  &:active {
	  	box-shadow: 0 0 0 0.5px rgba(0,20,40,.15), 0 2px 5px rgba(0,20,40,.32);
	  }
	  .formcraft-icon {
	  	font-weight: 700;
			font-size: 1.25em;
	    vertical-align: sub;
	    margin: -.24em .35em -.24em -.22em;
	  }
	  .loader {
	    margin-bottom: -2px;
	    margin-left: -1px;
	    margin-right: 3px;
	  }
	  &.small {
	    padding: .79em 1.3em .71em 1.3em;
	    font-size: .78em;
	    border-radius: 3px;
	    &.loading {
	    	padding-left: 0.5em;
	    }
	    .formcraft-loader {
		  	width: 7px;
		    height: 7px;
		    margin-bottom: -3px;
	    }    
	  }
	  &.large {
	    padding: 1.4em 1.85em 1.18em 1.85em;
	    font-size: .95em;
	    letter-spacing: .1px;
	    font-weight: 700;
	    .loader {
	      margin-bottom: -3px;
	    }
	  }
	  &.white {
	  	text-transform: none;
	  	display: inline-block;
		  outline: none;
		  background-color: @backgroundGreyOne;
		  box-shadow: none;
		  border: 0px;
		  color: lighten(@fontColor, 2%);
		  padding: .86em 1.5em .83em 1.6em;
		  border-radius: 4px;
		  font-weight: 400;
		  font-size: 1em;
		  box-shadow: 0 0 0 0.5px rgba(0,0,0,.10), 0 1px 4px rgba(0,20,40,.12);
		  transition: box-shadow .1s;
		  border: 0px;
		  &.small {
		  	padding: .53em 1em .51em 1em;
		  	font-size: .9em;
		  }
		  &:hover,
		  &:focus {
		  	color: @fontColor;
		  	border: 0px;
		  	background-color: white;
			  box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 2px 6px rgba(0,20,40,.16);
		  }		  
	  }	  
	  &.red {
	    background-color: #f56969;
	    box-shadow: 0 0 0 .5px rgba(100,0,0,.7), 0 2px 4px rgba(0,20,40,.18);
	    &:hover {
	      background-color: darken(#f56969, 6%);
	      box-shadow: 0 0 0 .5px rgba(100,0,0,1), 0 2px 5px rgba(0,20,40,.32);
	    }
	    &:disabled {
	      background-color: lighten(#f56969, 10%);
	      cursor: default;
	    }
	  }
	  &.green {
	    background-color: #4cb787;
	    box-shadow: 0 0 0 .5px rgba(0,100,0,.65), 0 2px 4px rgba(0,20,40,.18);
	    &:hover {
	      background-color: darken(#4cb787, 4%);
	      box-shadow: 0 0 0 .5px rgba(0,100,0,1), 0 2px 5px rgba(0,20,40,.32);
	    }
	    &:disabled {
	      background-color: lighten(#4cb787, 10%);
	      cursor: default;
	    }
	  }
	  &:hover {
	    background-color: darken(@themeColor, 4%);
	  }
	  &:disabled,
	  &.disabled {
	    opacity: .5;
	    cursor: default;
	    &:hover {
	    	background-color: @themeColor;
	    	box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 4px rgba(0,20,40,.18);
	    }
	  }
	}
	.formcraft-input-button {
		padding: 0;
		display: inline-block;
		position: relative;
		&.type-search:after {
			font-family: 'Material Icons';
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
			-moz-osx-font-smoothing: grayscale;
			font-feature-settings: 'liga';
			content: 'search';
			position: absolute;
			left: .6em;
			margin-top: -.7em;
			top: 50%;
			font-size: 105%;
			font-weight: 500;
			color: darken(@borderColor, 20%);
		}
		&.small {
			padding: 0;
		}
	  &.small input {
	    padding: .53em 1em .51em 2.2em;
	    font-size: .9em;
	    max-width: 70px;
	  }	
	  &.large input {
	    padding: .94em 1.2em .92em 1.2em;
	    font-size: 1.2em;
	    max-width: 300px;
	  }	
		input {
			max-width: 180px;
		  outline: none;
		  background-color: @backgroundGreyOne;
		  box-shadow: none;
		  border: 1px solid darken(@borderColor, 5%);
		  border: 0;
		  box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 1px 2px rgba(0,20,40,.12);
		  color: lighten(@fontColor, 2%);
		  padding: .86em 1.5em .83em 1.6em;
		  border-radius: 4px;
		  font-weight: 400;
		  font-size: 1em;
		  text-shadow: none;
		  transition: box-shadow .1s;
		  .noSmoothing();
		  &:hover,
		  &:focus {
		  	background-color: white;
		  	color: @fontColor;
		  	box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 2px 4px rgba(0,20,40,.16);
		  }
		}
	}
}

.formcraft-datepicker {
	width: 224px;
	position: absolute;
	display: none;
	padding: 0;
	font-size: 90%;
	background: @backgroundGreyTwo;
	border: none;
	margin: 0;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	background-color: white;
	border: 0;
	border-radius: 0 0 2px 2px;
	box-shadow: 0 0 0 0.5px rgba(0,10,20,.1), 15px 0 15px -15px rgba(0,10,20,.12), 15px 15px 15px -15px rgba(0,10,20,.12), -15px 15px 15px -15px rgba(0,10,20,.12);
	z-index: 9999999 !important;
	color: #666;
	* {
		box-sizing: border-box;
	}
}

.formcraft-datepicker .ui-datepicker-header {
	border: none;
	background: transparent;
	font-weight: normal;
	font-size: 15px;
	margin-top: -1px;
}

.formcraft-datepicker .ui-datepicker-header .ui-state-hover {
	background: transparent;
	border-color: transparent;
	cursor: pointer;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}

.formcraft-datepicker .ui-datepicker-title {
	margin: 0;
	background-color: @themeColor;
	color: white;
	text-align: center;
	line-height: 2.9em;
	height: 2.90em;
	white-space: nowrap;
}

.formcraft-datepicker .ui-datepicker-title select {
	color: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';	
	box-shadow: none;
	padding: 0em .5em !important;
	height: 2.90em;
	vertical-align: top;
	margin: 0;
	border: 0px;
	background: transparent;
	cursor: pointer;
	width: auto;
	display: inline-block;
	font-size: inherit;
	border-radius: 0;
	&:hover {
		background-color: darken(@themeColor, 5%);
	}
}

.formcraft-datepicker .ui-datepicker-prev {
	position: absolute;
	padding: 0 1em;
	color: white;
	top: 0;
	line-height: 2.90em;
	cursor: pointer;
	left: 0;
	font-size: inherit;
	margin-top: -1px;
}

.formcraft-datepicker .ui-datepicker-next {
	position: absolute;
	padding: 0 1em;
	color: white;
	top: 0;
	line-height: 2.90em;
	cursor: pointer;
	right: 0;
	font-size: inherit;
	margin-top: -1px;
}

.formcraft-datepicker .ui-datepicker-prev:hover,
.formcraft-datepicker .ui-datepicker-next:hover {
	background-color: darken(@themeColor, 5%);
}

.formcraft-datepicker .ui-datepicker-prev-hover,
.formcraft-datepicker .ui-datepicker-next-hover,
.formcraft-datepicker .ui-datepicker-next,
.formcraft-datepicker .ui-datepicker-prev {
	border: none;
}

.formcraft-datepicker .ui-datepicker-next span,
.formcraft-datepicker .ui-datepicker-prev span {
	background-position: -32px 0;
	margin-top: 0;
	top: 0;
	font-weight: normal;
}

.formcraft-datepicker .ui-datepicker-prev span {
	background-position: -96px 0;
}

.formcraft-datepicker table {
	margin: 0;
	margin-bottom: -1px;
	border-collapse: collapse;
	border-radius: 0 0 2px 2px;
	overflow: hidden;
}

.formcraft-datepicker th {
	padding: 1em 0;
	font-size: 13px;
	font-weight: normal;
	border: none;
	color: @themeColor;
	text-align: center;
}

.formcraft-datepicker td {
	border: none;
	padding: 0;
}

.formcraft-datepicker td .ui-state-default {
	background: transparent;
	border: none;
	text-align: center;
	padding: .61em .7em;
	margin: 0;
	font-weight: normal;
	text-decoration: none;
	color: inherit;
	font-size: 12px;
	display: block;
}

.formcraft-datepicker td.ui-datepicker-today .ui-state-default {
	color: red;
}

.formcraft-datepicker td.ui-datepicker-today .ui-state-active,
.formcraft-datepicker td.ui-datepicker-today .ui-state-hover {
	color: white !important;
}

.formcraft-datepicker .ui-state-disabled  {
	opacity: .25;
}

.formcraft-datepicker td .ui-state-active,
.formcraft-datepicker td .ui-state-hover {
	background: @themeColor;
	color: white;
}

.fc-form-modal .fc_modal-content
{
	background-color: transparent;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background-clip: padding-box;
	outline: none;  
}
.fc-form-modal .fc_modal-body
{
	background-color: transparent;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: 0px;
	padding: 0px;
}

.fc_modal-open {
	overflow: hidden !important;
	width: 100%;
}

.fc_modal {
	display: none;
	overflow: auto;
	overflow-y: scroll;
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 50px;
	z-index: 9999998;
	transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
	-moz-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
	-webkit-transition: -webkit-transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
	-ms-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
	-o-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear; 
}
.fc_modal.fc_fade
{
	opacity: 0.0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(.99) translate3d(0, -2px, 0);
	-moz-transform: scale(.99) translate3d(0, -2px, 0);
	-o-transform: scale(.99) translate3d(0, -2px, 0);
	-ms-transform: scale(.99) translate3d(0, -2px, 0);
	transform: scale(.99) translate3d(0, -2px, 0);
}
.fc_modal.fc_fade.fc_in
{
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1) translate3d(0, 0, 0);
	-moz-transform: scale(1) translate3d(0, 0, 0);
	-o-transform: scale(1) translate3d(0, 0, 0);
	-ms-transform: scale(1) translate3d(0, 0, 0);
	transform: scale(1) translate3d(0, 0, 0);
}

.fc_modal.animate-right,
.fc_modal.animate-left
{
	transition: transform .35s ease-out, opacity .2s linear;
	-moz-transition: transform .35s ease-out, opacity .2s linear;
	-webkit-transition: -webkit-transform .35s ease-out, opacity .2s linear;
	-ms-transition: transform .35s ease-out, opacity .2s linear;
	-o-transition: transform .35s ease-out, opacity .2s linear;  
}

.fc_modal.fc_fade.animate-right
{
	opacity: 0;
	-webkit-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
	-moz-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
	-o-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
	-ms-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
	transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
}
.fc_modal.fc_fade.animate-right.fc_in
{
	opacity: 1;
	-webkit-transform: scale(1) translate3d(0, 0, 0);
	-moz-transform: scale(1) translate3d(0, 0, 0);
	-o-transform: scale(1) translate3d(0, 0, 0);
	-ms-transform: scale(1) translate3d(0, 0, 0);
	transform: scale(1) translate3d(0, 0, 0);
}
.fc_modal.fc_fade.animate-left
{
	opacity: 0;
	-webkit-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
	-moz-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
	-o-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
	-ms-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
	transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
}
.fc_modal.fc_fade.animate-left.fc_in
{
	opacity: 1;
	-webkit-transform: scale(1) translate3d(0, 0, 0);
	-moz-transform: scale(1) translate3d(0, 0, 0);
	-o-transform: scale(1) translate3d(0, 0, 0);
	-ms-transform: scale(1) translate3d(0, 0, 0);
	transform: scale(1) translate3d(0, 0, 0);
}

.fc_modal-dialog {
	margin-left: auto;
	margin-right: auto;
	width: auto;
	padding: 10px;
	z-index: 99999;
}
.fc_modal-content {
	position: relative;
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 0 0 0 0.5px rgba(0,20,40,.5), 0 2px 25px 0 rgba(50,55,90,.75);
	background-clip: padding-box;
	outline: none;
}
.fc_modal-backdrop {
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999997;
	transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-webkit-transition: opacity .2s linear;
	-ms-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	background: rgb(50,50,50);
	background: rgba(50,50,50,.3);
}
.fc_modal-backdrop.fc_fade {
	opacity: 0;
	filter: alpha(opacity=0);
}
.fc_modal-backdrop.fc_fade.fc_in
{
	opacity: 1;
	filter: alpha(opacity=100);  
}

.fc_modal-backdrop:before
{
	content: 'press ESC';
	font-size: 14px;
	color: #000;
	position: absolute;
	top: 10px;
	left: 10px;
}

.fc_modal-header {
	padding: 16px 20px;
	background-color: #f4f4f4;
	border-bottom: 1px solid #ddd;
	font-size: 20px;
	font-weight: normal;
	color: #666;
	border-radius: 3px 3px 0 0 ;
}
.fc_modal-header h3
{
	font-size: 18px;
	margin: 0;
	color: inherit;
}
body .fc_modal .fc_close,
body .fc-trigger-close
{
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 0;
	border: none;
	font-size: 160%;
	z-index: 9000;
	color: #666;
	cursor: pointer;
	font-weight: bold;
	background: transparent;
	width: 30px;
	height: 30px;
	line-height: 30px;
	outline: none;
	box-shadow: none;
	margin: 0;
}
body .fc_modal .fc_close:hover
{
	color: #666;
	box-shadow: none;
}

.fc_modal-title {
	margin: 0;
	font-size: 22px;
	font-weight: normal;
	line-height: 1.428571429;
}
.fc_modal-body {
	position: relative;
	padding: 20px;
	margin-bottom: 0px;
}
.fc_modal-footer {
	padding: 19px 20px 20px;
	background-color: #f4f4f4;
	text-align: right;
	border-top: 1px solid #e5e5e5;
	border-radius: 0 0 3px 3px;
}
.fc_modal-footer:before,
.fc_modal-footer:after {
	content: " ";
	/* 1 */

display: table;
	/* 2 */

}
.fc_modal-footer:after {
	clear: both;
}
.fc_modal-footer .btn + .btn {
	margin-left: 5px;
	margin-bottom: 0;
}
.fc_modal-footer .btn-group .btn + .btn {
	margin-left: -1px;
}
.fc_modal-footer .btn-block + .btn-block {
	margin-left: 0;
}
@media screen and (min-width: 768px) {
	.fc_modal-dialog {
		left: 50%;
		right: auto;
		width: 600px;
		padding-top: 40px;
		padding-bottom: 40px;
	} 
}

@media screen and (max-width: 768px) {
	.fc_modal-backdrop:before
	{
		content: '';
	}  
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: formcraft-common.less

Server Info

System Features

User Info