File: /mnt/drbd/www/edenhouse/wp-content/plugins/essential-blocks/blocks/form/src/style.scss
/**
* The following styles get applied both on the front of your site
* and in the editor.
*/
.eb-form-wrapper {
position: relative;
padding: 0px 15px 15px;
box-sizing: border-box;
* {
box-sizing: border-box;
}
.eb-form {
&.form-layout-inline {
display: flex;
>div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
.eb-field-wrapper {
position: relative;
.eb-form-validation {
position: absolute;
margin-top: 5px;
}
}
.eb-form-submit {
margin-top: 0;
}
}
&.form-layout-inline~.eb_form_submit_response {
margin-top: 40px;
}
&.form-style-modern {
// label {
// position: absolute;
// top: 50%;
// // left: 0;
// padding: 0;
// margin: 0;
// pointer-events: none;
// transform: translateY(-50%);
// transition: 0.5s;
// }
// .eb-field-wrapper ~ label {
// position: unset;
// }
input:not([type="radio"]):not([type="checkbox"]) {
outline: none;
&~label {
position: absolute;
top: 50%;
// left: 0;
padding: 0;
margin: 0;
pointer-events: none;
transform: translateY(-50%);
transition: ease-in-out 0.2s;
}
&:focus~label,
&~label.active {
top: 15px;
// left: 0;
font-size: 12px;
}
&::placeholder {
color: transparent !important;
opacity: 0 !important;
}
}
textarea {
outline: none;
&~label {
position: absolute;
top: 50%;
// left: 0;
padding: 0;
margin: 0;
pointer-events: none;
transform: translateY(-50%);
transition: 0.5s;
}
&:focus~label,
&~label.active {
top: 15px !important;
font-size: 12px;
}
&::placeholder {
color: transparent !important;
opacity: 0 !important;
}
}
select {
outline: none;
&~label {
position: absolute;
top: 15px;
// left: 0;
padding: 0;
margin: 0;
pointer-events: none;
transform: translateY(-50%);
transition: 0.5s;
font-size: 12px;
}
// &:focus ~ label,
// & ~ label.active {
// }
&::placeholder {
color: transparent !important;
opacity: 0 !important;
}
}
.eb-datetime-field-wrapper .eb-field-input-wrap {
// .eb-field-input {
// }
label {
position: absolute;
top: 50%;
// left: 0;
padding: 0;
margin: 0;
pointer-events: none;
transform: translateY(-50%);
transition: ease-in-out 0.2s;
&.active {
top: 15px;
// left: 0;
font-size: 12px;
}
}
}
}
}
.eb-form .block-editor-inner-blocks .wp-block {
margin: 0;
}
.eb-form-editor-formtype-select {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
padding: 20px 0 30px;
border: 1px solid #d5d5db;
h2 {
width: 100%;
text-align: center;
font-size: 16px;
color: #4b4b4b;
font-weight: 600;
}
.eb-form-editor-formtype-item {
display: flex;
flex-flow: column;
align-items: center;
.eb-form-editor-formtype-icon {
padding: 5px;
background-color: #fff;
height: 110px;
display: flex;
align-items: center;
border: 1px solid #eaeaee;
border-radius: 6px;
box-sizing: border-box;
}
span {
font-size: 12px;
color: #aaa;
line-height: 1.4;
margin-top: 10px;
}
&:hover {
cursor: pointer;
.eb-form-editor-formtype-icon {
border-color: #bebebe;
}
span {
color: #888;
}
}
}
}
.eb-form-fields {
display: flex;
flex-direction: column;
.alignfull {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 100%;
}
.eb-form-field {
display: flex;
flex-direction: column;
margin: 0;
}
}
.eb-field-wrapper {
.eb-field-input {
font-family: inherit;
&:hover,
&:focus-visible {
border-color: #000;
}
::placeholder {
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
}
label {
font-size: 15px;
line-height: 1.2em;
display: block;
margin-bottom: 5px;
// width: 100%;
}
input:not([type="radio"]):not([type="checkbox"]) {
// font-size: 14px;
line-height: 1.2em;
min-height: 40px;
height: auto;
display: block;
// width: 100%;
// padding: 15px;
max-width: 100%;
}
// Textarea
textarea {
line-height: 1.2rem;
font-size: 14px;
min-height: 40px;
padding: 15px;
border-radius: 4px;
resize: vertical;
}
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
// background-color: transparent;
// border-radius: 4px;
// border: 1px solid #98a2b3;
box-shadow: 0 0 transparent;
// color: #495057;
min-height: 40px;
&:hover,
&:focus-visible {
// border-color: #9b8afb;
outline: none;
}
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
border: 1px solid #8c8f94;
background: transparent;
color: #50575e;
clear: none;
cursor: pointer;
display: inline-block;
min-width: auto;
height: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
transition: 0.05s border-color ease-in-out;
appearance: none;
&:checked::before {
display: inline-block;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
input[type="radio"] {
border-radius: 50%;
position: relative;
&::before {
content: "";
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
background-color: #3582c4;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 0.5ms all ease-in-out;
}
&:checked::before {
transform: translate(-50%, -50%) scale(1);
margin: 0;
}
}
.eb-radio-inputarea {
margin-bottom: 5px;
label {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: auto;
}
}
// checkbox
input[type="checkbox"] {
border-radius: 2px;
position: relative;
overflow: hidden;
&::before {
position: absolute;
display: block;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 12px;
margin: 0;
height: auto;
width: auto;
}
&:checked::before {
content: "\f00c";
font-weight: 700;
font-family: "Font Awesome 5 Free";
}
}
.eb-checkbox-inputarea {
margin-bottom: 5px;
label {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: auto;
margin-bottom: 0;
}
}
// select
select {
font-size: 14px;
line-height: 1.5em;
width: 100%;
min-height: 40px;
max-width: 100%;
display: block;
background-color: transparent;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cpath fill='%23000' d='M293.751,455.868c-20.181,20.179-53.165,19.913-73.673-0.595l0,0c-20.508-20.508-20.773-53.493-0.594-73.672 l189.999-190c20.178-20.178,53.164-19.913,73.672,0.595l0,0c20.508,20.509,20.772,53.492,0.595,73.671L293.751,455.868z'/%3E%3Cpath fill='%23000' d='M220.249,455.868c20.18,20.179,53.164,19.913,73.672-0.595l0,0c20.509-20.508,20.774-53.493,0.596-73.672 l-190-190c-20.178-20.178-53.164-19.913-73.671,0.595l0,0c-20.508,20.509-20.772,53.492-0.595,73.671L220.249,455.868z'/%3E%3C/svg%3E");
background-position: right 13px center;
background-repeat: no-repeat;
background-size: auto 13px;
color: #404246;
padding: 13px 30px 13px 15px;
outline: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
}
@-moz-document url-prefix() {
select {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #ffffff;
}
}
&.eb-validation-error {
.eb-field-input {
border-color: #dc072f;
}
.eb-form-validation {
display: block;
color: #ca3521;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-top: 10px;
padding: 0;
}
}
}
.eb-form-submit {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.eb-form-submit-button {
font-size: 1em;
padding: 15px 30px;
transition: ease-in-out 0.3s;
cursor: pointer;
// for Shapely theme
line-height: normal;
.eb-form-submit-loader {
display: none;
height: 1.4em;
width: auto;
margin-left: 15px;
}
&.loading {
.eb-form-submit-loader {
display: inline-block;
}
}
// &.success:after {
// content: "\f15e";
// font-family: "dashicons";
// color: greenyellow;
// }
}
.eb-button-icon {
display: inline;
}
}
.block-editor-default-block-appender .block-editor-inserter {
top: calc(100% + 10px);
}
.block-list-appender {
width: 100%;
button {
box-shadow: none;
border: 1px solid rgb(195 195 195);
background: #cccccc47;
border-radius: 5px;
/* color: white; */
&:hover {
border-color: #000;
color: #000;
}
}
}
}
.eb_form_submit_response {
font-size: 1em;
padding: 8px 15px;
margin-top: 25px;
border-radius: 4px;
}
.wp-admin .eb-form-wrapper .block-editor-block-list__layout {
display: flex;
flex-direction: column;
}
.is-selected.wp-block-essential-blocks-form {
.eb-form-editor-formtype-select {
border: 1px solid transparent;
}
}