plugins/custom_forms/public/style/form_blocks.scss
.custom-forms-plugin_survey-block, .custom-forms-plugin_polls-block {
position: relative;
.view-all {
position: absolute;
top: 0px;
right: 3px;
}
}
.box-1 .block .form-list .form-item {
width: calc(50% - 6px);
@media screen and (max-width: 850px) {
width: 100%;
}
@media screen and (min-width: 1000px) {
width: calc(33% - 6px);
}
}
.block .form-list, .block .detailed-form {
display: flex;
flex-wrap: wrap;
> a, > a:hover, > a:visited {
color: initial;
text-decoration: none;
}
> a {
display: inline-flex;
flex-direction: column;
}
.form-item {
display: inline-flex;
flex-direction: column;
width: 100%;
margin: 3px;
box-shadow: 0px 0px 3px 1px #ddd;
position: relative;
z-index: 1;
min-height: 150px;
.chart-wrapper {
h6 {
text-align: center;
}
> div {
line-height: 0 !important;
height: 150px !important;
}
}
.form-item-img {
background-color: #ccc;
overflow: hidden;
position: relative;
width: 100%;
img {
width: 100%;
min-height: 100%;
}
}
a.form-link {
color: initial;
text-decoration: none;
}
&.survey .form-item-img {
height: 100px;
}
&.poll .form-item-img {
height: 65px;
}
.form-item-info {
.form-name {
font-weight: bolder;
color: #555;
.box-1 & {
font-size: 14px;
}
}
.form-status {
float: right;
font-style: italic;
font-size: 10px;
padding: 2px 3px;
border-radius: 3px;
color: white;
margin-right: 5px;
&.closed {
background-color: #ad0d0d;
}
&.closing-soon {
background-color: #ec7800;
}
&.open {
background-color: #188018;
}
&.not-open-yet {
background-color: #0087d6;
}
}
}
&.survey .form-item-info {
border-top: 1px #aaa solid;
}
&.poll .form-item-info {
position: absolute;
top: 0;
background-color: rgba(0,0,0,0.3);
width: calc(100% - 10px);
height: 100%;
color: white;
.form-name {
color: white;;
}
}
&.poll .poll-content {
padding: 5px;
height: 100%;
display:flex;
flex-direction: column;
justify-content: space-between;
.partial-results-link {
margin: 0;
}
.form-submission {
margin-top: 5px;
overflow-y: auto;
text-align: justify;
}
.query-form {
display:flex;
flex-direction: column;
height: 100%;
div.notify {
text-align: center;
margin-top: 20px;
color: rgba(0, 0, 0, 0.6);
}
}
.no-results {
display: flex;
align-items: center;
justify-content: center;
font-style: italic;
height: 100%;
text-align: center;
}
.formlabel {
font-size: 14px;
margin-bottom: 3px;
}
.formfield {
overflow: scroll;
padding: 10px 10px 3px 0px;
max-height: 120px;
white-space: pre-wrap;
}
.required-field {
.formlabel {
font-size: 12px;
margin-bottom: 0;
}
.formfield.type-text {
padding: 0;
}
}
.button-bar {
padding-top: 0;
margin-bottom: 0;
flex-grow: 1;
align-items: flex-end;
display: flex;
a.icon-back, br {
display: none;
}
input.button {
margin: 0;
background-image: none;
width: 100%;
padding: 2px;
height: auto;
max-height: none;
}
}
}
&::after {
content: ' ';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: 0px 0px 10px 3px #ddd;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
&:hover::after {
opacity: 1;
}
}
}
.block .form-list .form-item {
.form-item-info {
padding: 5px;
}
}
.block .detailed-form .form-item {
.form-item-info {
padding: 10px;
}
.form-description {
padding: 0 10px;
max-height: 200px;
overflow: hidden;
position: relative;
&.overflown:after {
display: block;
position: absolute;
bottom: 0;
content: '...';
width: calc(100% - 20px);
border-bottom: 1px solid black;
text-align: right;
font-size: 14px;
}
}
}
.reply-message {
text-align: center;
font-style: italic;
margin-top: 15px;
}
.queries-block-edition {
.queries-filter {
margin: 15px 0;
p {
margin: 0;
}
ul.token-input-list {
margin-top: 5px;
}
}
}