%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* everest-forms.scss
* Governs the general look and feel of EverestForms sections of sites using themes that do not
* integrate with EverestForms specifically.
*/
/**
* Imports
*/
@import 'mixins/mixins';
@import 'variables/variables';
@import 'animation';
@import 'fonts';
@import 'clearings';
/**
* Global styles
*/
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/**
* Utility classes
*/
.clear {
clear: both;
}
/**
* Main EverestForms styles
*/
.everest-forms {
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
ul {
margin-left: 0;
}
.blockUI.blockOverlay {
position: relative;
@include loader();
}
.clear {
height: auto;
width: auto;
visibility: visible;
}
.loader {
@include loader();
}
.evf-container {
margin-bottom: 30px;
}
.everest-forms-progress-bar {
background: $color_gray-lighten;
border-radius: 2px;
.everest-forms-progress-bar-indicator {
height: 4px;
background: $green;
border-radius: 2px;
}
}
label {
display: block;
line-height: 1.7;
margin: 0 0 10px 0;
color: $color_gray-base;
font-size: $font_size-label;
.required {
color: $red;
font-weight: 700;
border: 0 !important;
text-decoration: none;
}
&.evf-field-label {
font-weight: 600;
}
&.evf-error {
color: $red;
font-weight: 400;
}
&.everest-forms-field-sublabel {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px 0;
}
&.evf-privacy-policy-consent-message {
display: inline;
margin-bottom: 0;
}
}
input[type='text'],
input[type='date'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='file'],
input[type='image'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='range'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea,
.StripeElement,
canvas.evf-signature-canvas {
width: 100%;
height: auto;
font-size: 14px;
outline: none;
box-shadow: none;
margin-bottom: 10px;
padding: 6px 12px;
color: $color_gray-base;
border: 1px solid $color_gray-light;
margin-left: 0;
margin-right: 0;
}
input[type='checkbox'],
input[type='radio'] {
&::after,
&::before {
display: none;
}
&:checked::before {
display: none;
}
}
select {
background-image: none;
}
.select2-container {
margin-bottom: 10px;
.select2-selection {
&.select2-selection--single {
height: auto;
}
&.select2-selection--multiple {
.select2-selection__rendered {
display: block;
li {
margin: 4px 0;
.select2-search__field {
padding-left: 4px;
}
}
.select2-selection__choice {
margin-right: 4px;
}
}
}
}
}
input,
textarea {
&:focus {
outline: none;
border: 1px solid $blue;
}
}
.everest-form {
&::after {
content: '';
clear: both;
display: table;
}
}
.everest-forms-field-row {
&::before,
&::after {
content: '';
clear: both;
display: table;
}
&:last-child {
.everest-forms-field-sublabel {
margin-bottom: 0;
}
}
}
.evf-title-container {
.everest-forms--title {
font-size: 26px;
margin: 0 0 10px 0;
}
.everest-forms--description {
margin: 0 0 10px 0;
}
}
.evf-field-container,
.evf-honeypot-container,
.evf-submit-container {
padding-left: 15px;
padding-right: 15px;
}
.evf-field-container {
.evf-frontend-row {
// Prevents style conflict on entries list-table.
&:not(.wp-list-table) {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
select {
appearance: menulist;
}
}
.everest-forms-one-half {
width: 48%;
float: left;
margin-left: 4%;
&:first-child {
margin-left: 0;
}
}
.everest-forms-first {
margin-left: 0;
}
.evf-frontend-grid {
width: 100%;
padding-left: 15px;
padding-right: 15px;
.evf-field {
display: block;
margin-bottom: 10px;
&.evf-field-hidden {
display: none;
}
.evf-label-hide,
.everest-forms-sublabel-hide {
display: none;
}
.validate-required {
canvas {
&.evf-signature-canvas {
border-color: $red;
}
}
}
ul:not(.select2-selection__rendered) {
margin-bottom: 10px;
padding: 0;
list-style: none;
li {
margin: 0;
display: block;
label,
input {
margin: 0;
}
input[type='checkbox'],
input[type='radio'] {
padding: 0;
margin-top: 4px;
margin-right: 8px;
width: 20px;
}
}
}
&.evf-field-title {
h3 {
margin: 25px 0;
font-size: 16px;
line-height: 1.5;
}
}
&.everest-forms-invalid {
> label {
color: $red;
}
.select2-container,
input.evf-error,
select.evf-error,
textarea,
.evf-signature-canvas {
border-color: $red;
}
input {
&.evf-error {
border-color: $red;
~ .everest-forms-field-sublabel {
color: $red;
}
}
}
}
&.everest-forms-validated {
select,
textarea,
input.input-text,
.select2-container,
.evf-signature-canvas {
border-color: $green;
}
}
::-webkit-input-placeholder {
line-height: normal;
}
:-moz-placeholder {
line-height: normal;
}
:-ms-input-placeholder {
line-height: normal;
}
&.evf-field-radio,
&.evf-field-checkbox,
&.evf-field-payment-multiple,
&.evf-field-payment-checkbox {
ul {
li {
display: flex;
margin-bottom: 5px;
flex-wrap: wrap;
&.everest-forms-image-choices-item {
input {
margin-top: 0;
}
}
.everest-forms-field-label-inline {
width: calc(100% - 28px);
}
&.everest-forms-image-choices-item .everest-forms-field-label-inline {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.everest-forms-image-choices-image {
margin-right: 10px;
}
}
&.everest-forms-image-choices label {
cursor: pointer;
}
}
&.everest-forms-list-inline ul li {
vertical-align: top;
display: inline-flex;
margin-right: 20px;
}
&.everest-forms-list-2-columns,
&.everest-forms-list-3-columns {
ul {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
li {
width: 100%;
padding-left: 15px;
padding-right: 15px;
.everest-forms-image-choices-image {
margin-bottom: 10px;
}
}
}
}
&.everest-forms-list-2-columns {
@media (min-width: 768px) {
li {
flex: 0 0 50%;
max-width: 50%;
&:nth-child(1n + 3) {
margin-top: 10px;
@media screen and (max-width: 768px) {
margin-top: 0;
}
}
}
}
}
&.everest-forms-list-3-columns {
@media (min-width: 768px) {
li {
flex: 0 0 33.33333%;
max-width: 33.33333%;
&:nth-child(1n + 4) {
margin-top: 10px;
}
}
}
}
}
&.evf-field-captcha {
.everest-forms-captcha-equation {
font-size: 16px;
}
.everest-forms-captcha-question {
margin: 0 0 4px 0;
}
.everest-forms-captcha-math input {
width: 70px;
margin: 0 0 0 5px;
display: inline-block;
vertical-align: inherit;
}
}
.iti {
&.iti--allow-dropdown {
& + .evf-error {
margin-top: 10px;
}
}
}
}
}
input {
&[type='checkbox'],
&[type='radio'] {
box-shadow: none;
}
&[type='checkbox'] {
appearance: checkbox;
}
&[type='radio'] {
appearance: radio;
}
&[type='checkbox']:checked {
background-color: $blue;
&::before {
color: $color-white;
background-color: transparent;
}
}
&[type='radio']:checked {
&::before {
background-color: $blue;
}
}
&::placeholder {
color: $color_gray-light;
}
}
textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
height: 120px;
&::placeholder {
color: $color_gray-light;
}
}
.evf-field-description,
.everest-forms-field-limit-text {
line-height: 1.7;
margin-bottom: 10px;
font-size: $font_size-label;
}
}
}
input[type='submit'],
button[type='submit'],
a.button:not(.button-large),
button.button:not(.button-large),
.everest-forms-part-button {
color: #555;
height: auto;
cursor: pointer;
background: none;
box-shadow: none;
font-size: inherit;
font-weight: 400;
line-height: 1.5;
padding: 10px 15px;
border-radius: 3px;
border: 1px solid #ccc;
background-color: #f7f7f7;
&:hover,
&:active {
outline: none;
color: #23282d;
background-color: #eee;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
&:hover {
color: #555;
background-color: #f7f7f7;
}
}
}
.layout-two {
label {
margin-bottom: 0;
}
.evf-field-checkbox,
.evf-field-radio {
label {
margin-bottom: 20px;
}
}
input,
select,
textarea,
canvas.evf-signature-canvas {
border-radius: 0;
border-top: none transparent;
border-right: none transparent;
border-left: none transparent;
border-bottom: 1px solid $color_gray-light;
padding: 10px 0;
&:focus {
outline: none;
border-top: none transparent;
border-right: none transparent;
border-left: none transparent;
}
}
textarea {
height: 100px;
}
}
/**
* Notices.
*/
.everest-forms-notice {
padding: 1em 3em;
margin: 0 0 2em;
position: relative;
background-color: $blue;
color: $color-white;
border-radius: 5px;
@include clearfix();
&::before {
font-family: dashicons;
content: '\f348';
position: absolute;
top: 1em;
left: 1.5em;
color: inherit;
}
.button {
float: right;
}
p {
margin-bottom: 0;
}
a {
color: $color-white;
}
li {
list-style: none outside !important; // Required for default theme compatibility
padding-left: 0 !important; // Required for default theme compatibility
margin-left: 0 !important; // Required for default theme compatibility
}
&.everst-forms-form-disable-notice {
color: $color_gray-base;
background: lighten($orange, 47%);
border: 1px solid adjust-color($orange, $saturation: -15%, $lightness: +20%);
}
}
.everest-forms-notice--info {
padding: 1em 1.6em;
color: $color_gray-base;
background: lighten($blue, 47%);
border: 1px solid adjust-color($blue, $saturation: -15%, $lightness: +20%);
&::before {
visibility: hidden;
}
.everest-forms-notice--actions {
margin-top: 10px;
a.button {
float: left;
line-height: 1;
cursor: pointer;
margin-right: 7px;
padding: 0.618em 1em;
box-shadow: none;
text-shadow: none;
text-decoration: none;
background-image: none;
color: $color_gray-base;
background-color: $color_gray-light-skin;
&:focus {
outline: none;
}
}
}
}
.everest-forms-notice--success {
background-color: $green;
&::before {
content: '\f147';
}
}
.everest-forms-notice--warning {
background-color: $orange;
}
.everest-forms-notice--error {
background-color: $red;
&::before {
content: '\f534';
color: inherit;
}
.everest-forms-notice-list {
margin: 0;
list-style: none outside;
.everest-forms-notice-list__item {
margin-bottom: 0.5em;
}
.everest-forms-notice-list__item:last-child {
margin-bottom: 0;
}
}
}
}
/**
* Gutenberg Block
*/
.edit-post-visual-editor {
.everest-form-gutenberg-form-selector-wrap {
align-items: center;
.components-placeholder__label {
margin-bottom: 0;
svg {
width: 75px;
height: 75px;
color: #7e3bd0;
}
}
.components-placeholder__instructions {
color: #23282d;
font-size: 1.3em;
font-weight: 600;
}
.components-placeholder__fieldset {
.components-base-control {
width: 100%;
text-align: center;
}
}
}
}
div.evf-gutenberg-form-selector .evf-frontend-row input:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row textarea:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row select:disabled,
div.evf-gutenberg-form-selector .evf-frontend-row button[type='submit']:disabled {
cursor: not-allowed;
}
/**
* Anti-spam Honeypot and reCAPTCHA Area
*/
.evf-honeypot-container {
display: none !important;
position: absolute !important;
left: -9000px !important;
}
.evf-recaptcha-container {
clear: both;
margin-bottom: 30px;
.evf-error {
margin-top: 15px;
margin-bottom: 0;
font-weight: 300;
line-height: 1.7;
padding: 7px 10px;
border-radius: 3px;
display: inline-block;
color: darken($red, 10%);
border: 1px solid $red;
background-color: lighten($red, 35%);
}
&.recaptcha-hidden {
margin: 0;
}
}
/**
* Date time design
*/
.evf-field-date-time {
.date-time-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
input.date-dropdown-field {
width: 100%;
margin: 0 5px;
}
.date-time-space-filler {
width: 20px;
@media (max-width: 767px) {
width: 100%;
}
}
select {
width: calc(20% - 14px);
padding: 10px;
margin: 10px 5px 0 5px;
@media (max-width: 767px) {
width: calc(33.33% - 10px);
}
}
}
}
/* Small devices */
@media only screen and (max-width: 600px) {
.evf-container {
.evf-field {
> * {
max-width: 100%;
}
&:not(.evf-field-phone) {
overflow-x: hidden;
}
&.evf-field,
&.evf-field-likert {
overflow: auto;
}
}
}
}
@media screen and (min-width: 768px) {
.everest-forms {
.evf-field-container {
.evf-frontend-row {
.evf-frontend-grid {
&.evf-grid-2 {
flex: 0 0 50%;
max-width: 50%;
}
}
}
}
}
}
@media screen and (max-width: 768px) {
.everest-forms {
.evf-field-container {
.evf-frontend-row {
flex-direction: column;
margin: 0;
.evf-frontend-grid {
padding: 0;
&:last-child {
margin-bottom: 0;
}
&.evf-grid-2,
&.evf-grid-3 {
width: 100%;
max-width: 100%;
}
}
}
}
.evf-recaptcha-container {
margin: 25px 0;
}
}
}
.wp-admin {
.evf-field-repeater-fields {
display: block !important;
}
}
Zerion Mini Shell 1.0