search

pluginsGLPI / formcreator

GLPI Plugin Formcreator (DOWNLOAD : https://github.com/pluginsGLPI/formcreator/releases)
http://www.teclib-edition.com
GNU General Public License v3.0
174 stars 125 forks source link

Proposta de alteração do CSS para uma melhor apresentação dos Cartões. #1879

Open glpibr opened 4 years ago

glpibr commented 4 years ago

We started a project for our GLPi clients and heard some complaints about the design of the formcreator cards.

We made some simple changes to the CSS file and got good praise and a better end user experience.

We share with you the changed code in case you want to use it in the project.

We hope it will be useful for you and the community. Hugs from Verdanatech!

Sample result: image

CODE: /**

@-moz-keyframes ripple { 0%, 100% { opacity: 0; } 1% { opacity: 1; } } @-webkit-keyframes ripple { 0%, 100% { opacity: 0; } 1% { opacity: 1; } } @keyframes ripple { 0%, 100% { opacity: 0; } 1% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0 } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 1% { opacity: 0; } 100% { opacity: 0; } }

a.submit_button, input.submit_button { display: inline-block; min-width: 150px !important; height: 21px !important; line-height: 21px !important; margin: 0; padding: 0;

vertical-align: middle; cursor: pointer; height: auto; font: bold 12px Arial, Helvetica; color: #8f5a0a; background-color: #ffb94b; background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b)); background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b); background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b); background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b); background-image: -o-linear-gradient(top, #fddb6f, #ffb94b); background-image: linear-gradient(top, #fddb6f, #ffb94b); white-space: nowrap; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fddb6f, endColorstr=#ffb94b); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fddb6f, endColorstr=#ffb94b)"; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; border-width: 1px; border-style: solid; border-color: #d69e31 #e3a037 #d5982d #e3a037; } input.submit_button { min-width: 152px !important; height: 23px !important; line-height: 23px !important; } input.submit_button[disabled] { color: #AAA; background-color: #EEE; border-color: #AAA; font-weight: normal; background-image: initial; cursor: default; filter: none; ms-filter: none; } input.submit_button:focus { color: #573706; border-color: #a57a26 #a67528 #a67623 #a67528; background-color: #ffaf30; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcd35), to(#ffaf30)); background-image: -webkit-linear-gradient(top, #ffcd35, #ffaf30); background-image: -moz-linear-gradient(top, #ffcd35, #ffaf30); background-image: -ms-linear-gradient(top, #ffcd35, #ffaf30); background-image: -o-linear-gradient(top, #ffcd35, #ffaf30); background-image: linear-gradient(top, #ffcd35, #ffaf30); box-shadow: 0 0 10px rgba(233,175,102,1); }

.line0 { background-color: #F0F0F0; } .line1 { background-color: #E7E7E7; } .line0:hover, .line1:hover { background-color: #FFF; }

form.formcreator_form { max-width: 950px; margin: 10px auto 50px !important; display: block; position: relative; line-height: 1.4em; }

bloc > .formcreator_form {

width: 850px; }

.form_answer h1, .formcreator_form > h1 { text-align: center; font-weight: bold; font-size: 1.8em; margin: 0 0 15px; }

.formcreator_form > .form_header { padding: 10px 15px; } .formcreator_form > .refused_header, .formcreator_form > .accepted_header { padding: 10px 15px; background: #EED0D0; /#EEE;/ border-radius: 4px; box-shadow: 2px 2px 2px #CCC; margin: 0 0 10px; } .formcreator_form > .refused_header > div, .formcreator_form > .accepted_header > div { padding: 3px 10px; border-left: 5px solid #A00; color: #C00; font-style: italic; font-weight: bold; margin: 0 4px; } .formcreator_form > .accepted_header { background: #C0DDC0; /#EEE;/ } .formcreator_form > .accepted_header > div { border-left: 5px solid #060; color: #060; }

.formcreator_form > .form_header, .formcreator_form > .form_section { background: #EEE; /#EEE;/ background: rgba(232, 232, 232, .8); /#EEE;/ box-shadow: 2px 2px 2px #CCC; margin: 0 0 10px; }

.formcreator_form > .form_header > h1 { font-size: 1.2em; margin: 0 0 10px; }

.formcreator_form .form_section > h2 { background: #1B2F62; /#E1D39E;/ color: #FFF; margin: 0 0 10px; padding: 5px 10px; border-bottom: 1px solid #FFF; box-shadow: 2px 2px 2px #CCC; text-align: center; line-height: 24px; }

.formcreator_form .form-group { padding: 5px 15px; }

.formcreator_form .form-group > label { display: block; font-size: 1.2em; line-height: 32px; font-weight: bold; } .formcreator_form .form-group:after { content: ''; display: block; } .formcreator_form .form-group .form_field > input[type="file"] { height: 32px; }

.formcreator_form .form-group .form_field { width: 650px; display: inline-block; text-align: justify; word-wrap: break-word; }

bloc > .formcreator_form .form-group .form_field {

width: 415px; } .formcreator_form .form-group .form_field .select2-container { width: 100% !important; }

.formcreator_form .description_field { border-left: 4px solid #999; margin: 10px 15px; word-wrap: break-word; }

.formcreator_form .form-group .form_field > input, .formcreator_form textarea, .formcreator_form select, .formcreator_form .form-group .form_field input.hasDatepicker { background: #FFF; border-radius: 3px; line-height: 18px; min-height: 24px; height: 32px; padding: 1px 10px; margin: 0; width: 650px; color: #333; font-size: 1.1em; box-sizing: border-box; } .formcreator_form .form-group .form_field input.hasDatepicker { width: 125px; } .formcreator_form .form-group img { vertical-align: middle; margin: 4px; } .formcreator_form .select2-container .select2-choice { height: 24px; line-height: 24px; padding-top: 3px; padding-bottom: 3px; width: 637px; max-width: 637px; }

bloc > .formcreator_form .select2-container .select2-choice {

width: 395px; } .formcreator_form .select2-container .select2-choice > .select2-chosen { margin: 1px 0; line-height: 24px; color: #333; font-size: 1.1em; } .select2-container .select2-choice .select2-arrow b { margin-top: 3px; } .formcreator_form textarea:focus, .formcreator_form select:focus, .formcreator_form .form-group .form_field > input:focus { border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }

.formcreator_form input[type = checkbox]:focus + label, .formcreator_form input[type = radio]:focus + label, .formcreator_form input[type = file]:focus { color: #66afe9; color: rgba(102,175,233, 1); border-bottom: #66afe9 dotted 1px !important; border-bottom: rgba(102,175,233,.8) dotted 1px !important; }

.formcreator_form textarea { min-height: 105px; }

.formcreator_form div.checkbox { padding: 5px 0; } .formcreator_form div.checkbox label { cursor: pointer; } .formcreator_form div.checkbox .form-group-checkbox { margin-right: 4px; } .formcreator_form div.checkbox .label-checkbox .box { background-color: #FFF; border: 2px solid #727272; }

.formcreator_form div.radio { padding: 3.7px 0; } .formcreator_form div.radio label { cursor: pointer; } .radios .form-group-radio { position: relative; display: inline-block; width: 16px; height: 16px; } .radios .form-group-radio + label { margin-left: 7px; } input[type = radio] { display: none; } .label-radio .radio { padding: 2px 0; } input[type = radio] + label.label-radio span { display: inline-block; position: absolute; width: 16px; height: 16px; } input[type = radio] + label.label-radio .box { background-color: #fff; border: 2px solid #727272; border-radius: 50%; } input[type = radio] + label.label-radio .check { left: 4px; top: 4px; width: 0px; height: 0px; opacity: 0; } input[type = radio]:checked + label.label-radio .check { border: 6px solid #727272; border-radius: 50%; transition: opacity 0.3s ease; opacity: 1; }

.formcreator_form .select2-container-multi .select2-choices { width: 650px; min-height: 24px; background: #FFF; background: rgba(255, 255, 255, 0.7); border: 1px solid #999; border-radius: 3px; box-sizing: border-box; } .select2-drop { max-width: 650px; }

bloc > .formcreator_form .select2-container-multi .select2-choices {

width: 415px; } .formcreator_form .form-group option { background: none; border: none; } .formcreator_form .form-group .form_field > input[type = file] { background: none; border: none; box-shadow: none; width: auto; } .formcreator_form .form-group > .help-block { font-size: 0.8em; color: #333; padding: 3px 0; } .formcreator_form .form-group > .help-block p { margin: 0; padding: 3px 0; }

bloc > .formcreator_form .form-group .form_field > input, #bloc > .formcreator_form textarea {

width: 545px; }

bloc > .formcreator_form select {

width: 567px; }

footer-login {

position: relative !important; height: 30px; margin: 0 15px 0 0; }

.formcreator_form .liste input[type = text] { width: 100px; }

.formcreator_form .liste span > select { width: 534px; }

bloc > .formcreator_form .liste input[type = text] {

width: 60px; }

bloc > .formcreator_form .liste select {

width: 330px; }

.form_description { display: none; } .form_description div { padding: 10px; background-color: #FFF; border-left: 5px solid #AAA; color: #333; font-style: italic; margin: 0 4px; } .div_show_condition_field, .div_show_condition_operator, .div_show_condition_value, .div_show_condition_logic, .div_show_condition_add, .div_show_condition_remove { display: inline-block; } .div_show_condition_field .select2-container, .div_show_condition_operator .select2-container, .div_show_condition_logic .select2-container { width: 95% !important; margin: 5px 0 0 !important; }

.div_show_condition_value input { width: 90% !important; margin: 5px 0 0 5px !important; padding: 2px 5px !important; }

.div_show_condition_field { width: 300px !important; } .div_show_condition_operator { width: 70px !important; } .div_show_condition_value { width: 300px !important; } .div_show_condition_logic { width: 70px !important; } .div_show_condition_add img, .div_show_condition_remove img { width: 12px; vertical-align: middle; } / jQuery UI Combobox/ .pq-select-multiple { display: inline-block; width: 85% !important; }

.select2-container + select { display: none !important; }

footer-login{

display: none; }

tag_question_value .select2-container, #tag_specific_value .select2-container {

width: 98%; }

tag_question_title, #tag_specific_title {

line-height: 31px; }

plugin_formcreator_wizard {

position: relative; }

formcreator_servicecatalogue {

position: absolute; width: 100%; margin-top: 10px; }

formcreator_servicecatalogue_ticket_summary {

margin: 5px 60px 0 5px; height: inherit; position: absolute; z-index: 15; left: 150px; width: 260px; top: 10px; transition: .4s; height: 1rem; }

.toggle_menu #formcreator_servicecatalogue_ticket_summary { left: 100px; }

formcreator_servicecatalogue_ticket_summary .status {

min-width: 2.3rem; display: inline-block; margin-right: 5px; margin-top: -5px; padding: 5px; text-align: center; background-color: rgba(0, 0, 0, .15); vertical-align: top; box-sizing: border-box; }

formcreator_servicecatalogue_ticket_summary .status:hover {

background-color: rgba(0, 0, 0, .3); }

formcreator_servicecatalogue_ticket_summary .status_number {

font-size: 2em; }

formcreator_servicecatalogue_ticket_summary .status_label {

font-size: .7em; display: none; }

formcreator_servicecatalogue_ticket_summary .status:hover .status_label {

display: block; line-height: 0; }

formcreator_servicecatalogue_ticket_summary .status_incoming,

formcreator_servicecatalogue_ticket_summary .status_incoming a {

color: #c8ffc8; }

formcreator_servicecatalogue_ticket_summary .status_waiting,

formcreator_servicecatalogue_ticket_summary .status_waiting a {

color: #f7c976; }

formcreator_servicecatalogue_ticket_summary .status_validate,

formcreator_servicecatalogue_ticket_summary .status_validate a {

color: #9B9BE9; }

formcreator_servicecatalogue_ticket_summary .status_solved,

formcreator_servicecatalogue_ticket_summary .status_solved a {

color: #ffffff; }

.plugin_formcreator_page #plugin_formcreator_wizard { height: calc(100vh - 28px - 65px); }

.plugin_formcreator_marginRight { margin-right: 275px; }

plugin_formcreator_wizard_categories {

width: 275px; top: 0; bottom: 0; left: 0; float: left; } .plugin_formcreator_page #plugin_formcreator_wizard_categories { height: calc(100vh - 28px - 65px); background-color: #f8f7f3; border-right: 1px solid #DDD; position: relative; }

.plugin_formcreator_page #plugin_formcreator_wizard_categories .slinky-menu { position: absolute; left: 0; right: -1px; }

/ SLINKY CSS / .slinky-menu { overflow: hidden; transform: translateZ(0); transition: all 300ms ease; -webkit-transform: translateZ(0); -webkit-transition: all 300ms ease; }

.slinky-menu > ul { left: 0; position: relative; transform: translateZ(0); transition: all 300ms ease; -webkit-transform: translateZ(0); -webkit-transition: all 300ms ease; }

.slinky-menu ul, .slinky-menu li { list-style: none; margin: 0; }

.slinky-menu ul { width: 100%; }

.slinky-menu a { display: block; }

.slinky-menu li ul { display: none; left: 100%; position: absolute; top: 0; }

.slinky-menu .header { position: relative; }

.slinky-menu h2 ~ a.back { left: 0; position: absolute; top: 0; }

.slinky-menu h2 { font-size: 1em; margin: 0; text-align: center; }

.slinky-menu .header { background: #AAA; }

.slinky-menu h2 { padding: 1em; }

.slinky-menu a { border: none; padding: 1em; }

.slinky-menu a.next:after { content: '\276f'; margin-left: 1em; float: right; }

.slinky-menu a.back:before { content: '\276e'; margin-right: 1em; float: left; }

plugin_formcreator_wizard_categories a {

background-color: inherit; font-size: 1.2em; }

plugin_formcreator_wizard_categories a[data-category-id]:not([data-parent-category-id="0"]) {

margin-left: 20px; }

plugin_formcreator_wizard_categories .category_active:not(.next),

plugin_formcreator_wizard_categories .category_active ~ul .header {

/ background-color: rgba(0, 0, 0, 0.05); / border-bottom: 1px dashed #DDD; position: relative; }

plugin_formcreator_wizard_categories .category_active:not(.next):after,

plugin_formcreator_wizard_categories .category_active ~ul .header:after {

position: absolute; left: calc(100% - 45px); top: 50%; border: solid transparent; content: " "; height: 0; width: 0; border-right-color: #FFF; border-width: 23px; margin-top: -23px; z-index: 20; }

plugin_formcreator_wizard_categories .category_active:not(.next):before,

plugin_formcreator_wizard_categories .category_active ~ul .header:before {

position: absolute; left: calc(100% - 46px); top: 50%; border: solid transparent; content: " "; height: 0; width: 0; border-right-color: #DDD; border-width: 23px; margin-top: -23px; z-index: 20; }

plugin_formcreator_wizard_categories h2 {

margin: 0; padding: 0.83em 0; border-bottom: 1px solid #DDD; }

plugin_formcreator_wizard_categories a, #plugin_formcreator_wizard_categories h2 {

font-size: 1.2em; }

plugin_formcreator_wizard_categories h2 {

margin: 0; padding: 14px; color: #000; }

plugin_formcreator_wizard_categories .header h2 {

text-align: left; }

plugin_formcreator_wizard_categories .header .back {

right: 20px; color: #000; left: inherit; }

plugin_formcreator_wizard_categories li {

background-color: inherit; }

.plugin_formcreator_card { background: #FFF; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }

.plugin_formcreator_card::after { content: ""; display: block; clear: both; }

plugin_formcreator_formlist {

margin-top: 10px; }

@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

to { opacity: 1; -webkit-transform: none; transform: none; } }

.plugin_formcreator_formTile { margin: 0 3px 6px 3px; width: 300px; display: inline-block; vertical-align: top; text-align: left; overflow: hidden; cursor: pointer; border-radius: 0; box-sizing: border-box; animation-name: fadeInUp ; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 0.3s; transition: box-shadow 0.25s; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);

} .plugin_formcreator_formTile:hover { background-color: #EEEEEE }

.plugin_formcreator_formTile.default_form { background-color: #CCC; }

a.plugin_formcreator_formTile_title { font-size: 1.5em; padding: 10px 40px 15px 10px; display: block; background: transparent no-repeat top 10px right 10px; font-weight: 400; color: #292929; max-width: 23ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plugin_formcreator_formTile:hover a.plugin_formcreator_formTile_title { cursor: pointer; transition: color 0.3s ease; }

.plugin_formcreator_formTile i.fa, .plugin_formcreator_formTile i.fab, .plugin_formcreator_formTile i.fas { font-size: 2.5em; margin-right: 10px; margin-top: 5px; float: right; }

.plugin_formcreator_formTile_description { padding: 12px 12px 24px 12px; border-radius: 0 0 2px 2px; background-color: inherit; border-top: 1px solid rgba(160, 160, 160, 0.2); position: relative; background: #fff; line-height: 1.6; min-height: 33px; height: 33px; overflow: hidden; text-overflow: ellipsis; white-space: inherit; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-weight: normal; color: rgba(0, 0, 0, 0.87); }

.plugin_formcreator_formTile div:first-child { color: #F00; float: right; margin: 0 5px; }

plugin_formcreator_lastForms {

width: 265px; position: absolute; right: 0; top: 0; }

plugin_formcreator_lastForms > div {

margin-bottom: 10px; }

plugin_formcreator_wizard_right {

min-width: 116px; overflow-x: hidden; overflow-y: auto; padding: 10px 0 3px 23px; margin: -10px 0 -3px -23px; background-color: #FFFFFF; margin-left: 300px; }

plugin_formcreator_wizard_forms {

clear: both; }

plugin_formcreator_wizard_forms > div {

text-align: left; }

plugin_formcreator_searchBar {

position: relative; margin: 20px 25px 20px 6px; padding: 10px 0 45px 0; box-sizing: border-box; }

plugin_formcreator_searchBar input {

width: 100%; font-size: 1.4em; padding: 10px 0 10px 10px; box-sizing: border-box; height: 40px; border: 0; border-radius: 0; background-color: inherit; border: 1px solid #C2C2C2; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); background-color: #F8F8F8; }

plugin_formcreator_searchBar input ~ label {

position: absolute; float: left; display: block; top: 23%; text-align: center; width: 100%; font-size: 1.2em; transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s; cursor: text; }

plugin_formcreator_searchBar input:focus ~ label {

color: #3874BC; top: 50%; font-size: 1em; }

formcreator_search_input_bar {

position:relative; display:block; width:100%; }

formcreator_search_input_bar:before,

formcreator_search_input_bar:after {

content:''; position: absolute; width: 0; height: 2px; bottom: 0; transition:0.2s ease all; background-color: #3874BC; }

formcreator_search_input_bar:before {

left:50%; }

formcreator_search_input_bar:after {

right:50%; }

plugin_formcreator_searchBar input:focus ~ #formcreator_search_input_bar:before,

plugin_formcreator_searchBar input:focus ~ #formcreator_search_input_bar:after {

width:50%; }

plugin_formcreator_searchBar input:valid ~ label {

left: -9999px; }

plugin_formcreator_searchBar:after {

width: 16px; height: 16px; content: ''; display: inline-block; background-image: url("../pics/search.png"); position: absolute; top: 23%; right: 10px; }

plugin_formcreator_wizard_categories div > a {

display: inline-block; width: 100%; padding: 14px; box-sizing: border-box; }

plugin_formcreator_lastForms .plugin_formcreator_card .plugin_formcreator_answer {

margin: 3px; list-style: none; padding: 0; text-align: left; border-bottom: 1px solid rgba(0,0,0,.1); }

plugin_formcreator_lastForms .plugin_formcreator_card .plugin_formcreator_answer a {

margin: 3px; background-repeat: no-repeat; background-position: left center; padding: 11px 11px 11px 20px; }

.plugin_formcreator_date { display: block; text-align: right; font-size: .8em; font-style: italic; }

plugin_formcreator_lastForms .plugin_formcreator_card .plugin_formcreator_waiting {

background-image: url("../pics/waiting.png"); }

plugin_formcreator_lastForms .plugin_formcreator_card .plugin_formcreator_refused {

background-image: url("../pics/refused.png"); }

plugin_formcreator_lastForms .plugin_formcreator_card .plugin_formcreator_accepted {

background-image: url("../pics/accepted.png"); }

.plugin_formcreator_heading { font-weight: bold; }

plugin_formcreator_lastForms .plugin_formcreator_card > div {

border-bottom: 1px solid rgba(0,0,0,.1); padding: 11px; }

.plugin_formcreator_sort { float: left; opacity: 0.4; } .plugin_formcreator_sort:hover { opacity: 1; color: #3874BC; } .plugin_formcreator_sort:hover .formcreator_radios input[type = radio] + label:before { background-color: #3874BC; border: 2px solid #3874BC; }

.plugin_formcreator_sort input { display: inline-block; text-align: left; margin: 0 20px; } .plugin_formcreator_sort .formcreator_radios input[type = radio] + label { display: inline-block; margin-right: 10px; } .plugin_formcreator_container .plugin_formcreator_leftHeader#header { float: left; height: 100%; position: relative; }

plugin_formcreator_serviceCatalog #header_top {

height: 45px; line-height: 45px; position: relative; z-index: 10; } .formcreator_header_top#header_top { margin-left: 300px; width: calc(100vw - 300px); text-align: right; color: #FFF; z-index: 50; transition: .3s; }

.formcreator-nav-button { z-index: 1; height: 1.5rem; width: 1.8rem; background-color: transparent; background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(to right, #FFF, #FFF), linear-gradient(to right, #FFF, #FFF); background-position: center top, center, center bottom; background-repeat: no-repeat; background-size: 3.5rem .3rem; padding: 0; outline: 0; border: 0; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); }

formcreator-toggle-nav-desktop ~ .formcreator-nav-button {

margin: 10px 0 0 10px; position: absolute; left: 100px; top: 15px; z-index: 15; transition: .4s; }

.toggle_menu #formcreator-toggle-nav-desktop ~ .formcreator-nav-button { left: 50px; }

formcreator-toggle-nav-desktop,

formcreator-toggle-nav-responsive,

formcreator-toggle-nav-responsive ~ .formcreator-nav-button {

display: none; }

c_menu li label {

display: inline-block; } .toggle_menu #c_menu li span.label { display: none; } .toggle_menu .plugin_formcreator_leftHeader#header .plugin_formcreator_leftMenu { width: 53px; } .toggle_menu #c_menu .plugin_formcreator_selectedMenuItem:after { border: 0; top: 50%; left: initial; right: 0; width: 6px; background-color: rgba(0, 0, 0, .3); height: 48px; } .toggle_menu #page.plugin_formcreator_page { width: calc(100% - 53px); margin-left: 53px; }

.toggle_menu .formcreator_header_top#header_top { margin-left: 53px; width: calc(100vw - 53px); }

plugin_formcreator_serviceCatalog #footer {

clear: both; position: fixed; bottom: 0; width: 100%; padding: 5px 0; }

.plugin_formcreator_leftHeader#header .plugin_formcreator_leftMenu { width: 300px; padding-left: 0; / Overrides CSS from GLPi / padding-top: 20px; height: 100%; position: relative; text-align: left; transition: .3s; }

.plugin_formcreator_services li { padding: 5px 0 5px 13px; width: 100%; line-height: 38px; box-sizing: border-box; clear: left; }

.plugin_formcreator_leftMenu .plugin_formcreator_services li a { font-size: 1.2em; }

.plugin_formcreator_leftMenu .plugin_formcreator_selectedMenuItem { background-repeat: no-repeat; background-position: top right; background-color: rgba(0, 0, 0, 0.2); position: relative; }

.plugin_formcreator_leftMenu .plugin_formcreator_selectedMenuItem:after { position: absolute; left: calc(100% - 48px); top: 50%; border: solid transparent; content: " "; height: 0; width: 0; border-right-color: #f8f7f3; border-width: 24px; margin-top: -24px; z-index: 20; }

.plugin_formcreator_leftHeader a, .plugin_formcreator_myname { color: #FFF; height: 35px; line-height: 35px; }

.plugin_formcreator_threadBrowser { margin: 5px; border-top: 1px dashed #3C5874; }

.plugin_formcreator_threadBrowser > div { text-align: center; }

.plugin_formcreator_first, .plugin_formcreator_left { float: left; width: 16px; margin: 10px 0; }

.plugin_formcreator_right, .plugin_formcreator_last { float: right; width: 16px; margin: 10px 0; }

span.fc_list_icon { width: 42px; height: 48px; vertical-align: middle; font-size: 1.7em; color: #FFFFFF; float: left; padding-top: 5px; box-sizing: border-box; }

.plugin_formcreator_entityProfile { float: right; width: 190px; height: 40px; } .plugin_formcreator_entityProfile > li { line-height: normal; top: 20%; } .plugin_formcreator_entityProfile .select2-container { margin-top: 12px; width: inherit !important; } .plugin_formcreator_entityProfile .select2-container, .plugin_formcreator_entityProfile .entity_select { color: #FFF; margin: 0 10px 0 0; white-space: nowrap; }

.plugin_formcreator_leftMenu .plugin_formcreator_leftMenuItem_separator { margin-bottom: 0; }

.plugin_formcreator_leftMenuEnd { clear: both; }

plugin_formcreator_avatar {

border: 2px inset white; border-radius: 50%; padding: 2px; float: right; width: 40px; height: 40px; }

plugin_formcreator_avatar img {

width: 40px; height: 40px; border-radius: 50%; }

.plugin_formcreator_userMenuCell { display: block; position: absolute; z-index: 1000; right: 5px; }

.plugin_formcreator_userMenu_icons { float: right; margin: 12px 8px 0 8px; }

.plugin_formcreator_userMenu_icons > li { padding: 2px 4px; display: inline-block; font-size: 1.8em; }

.plugin_formcreator_userMenu_icons .button-icon { opacity: .6 }

.plugin_formcreator_userMenu_icons .button-icon:hover { opacity: 1; }

plugin_formcreator_preferences_icon a, #plugin_formcreator_logoutIcon a {

display: inline-block; width: 22px; }

plugin_formcreator_preferences_icon a, #plugin_formcreator_logoutIcon a {

color: white; }

c_menu #myname {

display: inline-block; color: #FFF; margin: 0 !important; height: 40px; }

page.plugin_formcreator_page {

margin: 0 0 0 300px; padding: 0; max-height: 100%; top: 0; overflow-y: auto; height: calc(100% - 28px - 65px); min-height: 0; width: calc(100% - 300px); z-index: 0; position: relative; transition: .3s; }

page.plugin_formcreator_container {

margin-top: -40px; padding-top: 40px; }

.plugin_formcreator_container { vertical-align: top; top: 0; position: fixed; right: 0; left: 0; bottom: 0; }

.plugin_formcreator_page .navigationheader .tab_cadre_pager { width: auto; }

searchcriterias {

padding-top: 5px; }

page .tab_cadre_pager {

width: auto; }

.tab_cadre_pager, .navigationheader { margin-top: 0; padding-top: 15px; }

.section_row, .section_row th { background-color: #CCC; }

.form_control { width: 23px; float: right; min-height: 1px; }

.form_header ul { list-style-type: disc; margin: inherit; padding: inherit; padding-left: 40px; }

.form_section ul { list-style-type: disc; margin: inherit; padding: inherit; padding-left: 40px; }

.form_header ul ul, .form_section ul ul, .form_header ol ul, .form_section ol ul { list-style-type: circle; }

/ Active / inactive light for forms / .plugin-forcreator-active { color: #009933; }

.plugin-forcreator-inactive { color: #a0a0a0; }

.plugin_formcreator_cancel_my_ticket { background: #fec95c; }

/ ################--------------- Responsive ---------------#################### / @media screen and (max-width: 700px) { form.formcreator_form { width: 100%; }

.formcreator_form .form-group > label, .formcreator_form .form-group .form_field, .formcreator_form .form-group .form_field > input, .formcreator_form textarea, .formcreator_form select { width: 100%; } .formcreator_form .form-group .form_field input.hasDatepicker { width: 88%; }

.formcreator_form .select2-container .select2-choice, .formcreator_form .select2-container-multi .select2-choices { width: 96%; }

plugin_formcreator_lastForms {

 position: static;
 width: 100%;

}

.plugin_formcreator_marginRight { margin-right: 0; }

.plugin_formcreator_container .plugin_formcreator_leftHeader#header { width: 100%; height: 70px; position: relative; }

.formcreator_header_top#header_top { display: none; opacity: 0; animation: fadeOut .3s; background-color: transparent; text-align: left; }

header_top .plugin_formcreator_entityProfile .profile-selector {

 max-width: none;
 padding: 0 !important;

}

.toggle_menu #c_menu li label { display: inline-block; }

formcreator_servicecatalogue_ticket_summary {

 width: 100%;
 display: block;

}

.plugin_formcreator_container #footer { display: none; }

formcreator-toggle-nav-desktop ~ .formcreator-nav-button {

 display: none;

}

formcreator-toggle-nav-responsive ~ .formcreator-nav-button {

 display: inline-block;
 position: fixed;
 top: 1.5rem;
 right: 1rem;
 z-index: 2000;

}

formcreator-toggle-nav-responsive:checked ~ #header #c_menu {

 transform: translateY(0);

}

formcreator-toggle-nav-responsive:checked ~ #header .plugin_formcreator_services {

 margin-top: 120px;

}

formcreator-toggle-nav-responsive:checked ~ #header_top.formcreator_header_top {

 display: block;
 position: fixed;
 z-index: 2000;
 width: 100%;
 left: 0;
 top: 70px;
 margin: 0;
 opacity: 1;
 animation: fadeInd .3s;

}

myname.plugin_formcreator_myname {

 margin: 0 85px 0 105px;
 width: calc(100% - 190px);

}

.plugin_formcreator_userMenu_icons li { padding: 0; }

searchcriterias .tab_cadre_fixe td {

 padding: 5px 0;

}

.plugin_formcreator_container .plugin_formcreator_leftHeader#header #c_menu { position: absolute; transform: translateY(-100%) translateZ(0); transition: transform .2s; will-change: transform; width: 100%; height: 90vh; }

page.plugin_formcreator_page {

 margin: 0;
 width: 100%;
 margin-top: 60px;
 min-height: calc(100% - 100px);
 overflow-x: hidden;

}

.toggle_menu #page.plugin_formcreator_page { width: 100%; margin-left: 0; }

.plugin_formcreator_page #formcreator_servicecatalogue { width: 100%; }

formcreator_servicecatalogue_ticket_summary {

 left: 100px;

}

.plugin_formcreator_page #plugin_formcreator_wizard_categories { height: inherit; width: 100%; position: initial; float: none; min-height: initial; }

.plugin_formcreator_page #plugin_formcreator_wizard_categories .slinky-menu { position: static; }

.plugin_formcreator_page #plugin_formcreator_wizard { width: 100%; height: inherit; }

.plugin_formcreator_page #plugin_formcreator_wizard_right { width: 94%; height: inherit; overflow: inherit; margin: 0; }

plugin_formcreator_serviceCatalog #footer {

 display: none;

}

debug-float.plugin_formcreator_debug-float {

 z-index: 1000;

}

}

ftoledo commented 3 years ago

thanks for sharing!

rayfcrols commented 3 years ago

@glpibr Qual a versão do plugin?

glpibr commented 3 years ago

You can get it here: https://github.com/verdanatech/formcreator

fot GLPi 9.4.6 only [https://avatars0.githubusercontent.com/u/25835106?s=400&v=4]https://github.com/verdanatech/formcreator GitHub - verdanatech/formcreatorhttps://github.com/verdanatech/formcreator You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. to refresh your session. github.com

[https://verdanatech.com/wp-content/uploads/2021/02/halex.png] Halexsandro Sales

CTO

Verdanatech Soluções em TI

[https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png] 81 3091-4252<tel:81%203091-4252> | 81 98802-3011<tel:81%2098802-3011> [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png] @.**@.> [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png] www.verdanatech.com www.verdanadesk.comfile://www.verdanatech.com [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png] Empresarial ITBC - PORTO DIGITAL Rua Domingos José Martins, 75 - SL 202, Recife – PE , CEP: 50.030-200 [https://verdanatech.com/wp-content/uploads/2021/02/logos-footer.png] [facebook] https://www.facebook.com/verdanatech [linkedin]https://www.linkedin.com/company/verdanatech/ [instagram]https://www.instagram.com/verdanatech/

De: Raimundo Luiz Oliveira @.> Enviado: sexta-feira, 14 de maio de 2021 17:30 Para: pluginsGLPI/formcreator @.> Cc: Halexsandro Sales @.>; Mention @.> Assunto: Re: [pluginsGLPI/formcreator] Proposta de alteração do CSS para uma melhor apresentação dos Cartões. (#1879)

@glpibrhttps://github.com/glpibr Qual a versão do plugin?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/pluginsGLPI/formcreator/issues/1879#issuecomment-841484764, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFMRGYXKY5MTO74Y3C76CILTNWB5FANCNFSM4O6WHS5A.

ruimvfonseca commented 1 year ago

Hello @glpibr, As the new versions of formcreator uses scss... Could you guys share an "update" of this css code with the community? I would be grateful!! ;)

Thanks Keep the good work! 👍

glpibr commented 1 year ago

Olá Rui,

Em nosso repositório no Github mantemos uma cópia do plugin com nossas alterações (design e correções de BUGs) e de forma aberta para quem quiser usar.

Caso tenha interesse, basta acessar e baixar:

https://github.com/verdanatech/formcreator [https://opengraph.githubassets.com/67a1e7168cf01475b984677213616b14c4d6a363ddfc183ea1920aacf956abb7/verdanatech/formcreator]https://github.com/verdanatech/formcreator GitHub - verdanatech/formcreatorhttps://github.com/verdanatech/formcreator Contribute to verdanatech/formcreator development by creating an account on GitHub. github.com

Assim, colaboramos com a comunidade e mantemos o alinhamento a licença do software que é GPLhttps://www.gnu.org/licenses/gpl-faq.html.

Esperamos que curta e, se curtir, que compartilhe de nosso trabalho com a comunidade.

Grande abraço, paz, sucesso e muito obrigado pelo feedback!

Saudações, [https://verdanatech.com/wp-content/uploads/2021/05/halex.png] Halexsandro Sales

CTO

Verdanatech Soluções em TI

[https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png] 81 3091 42 52<tel:81%203091-4252> | 81 9 8802 30 11<tel:81%2098802-3011> [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png] @.**@.> [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png] www.verdanatech.com www.verdanadesk.comhttp://www.verdanadesk.com [https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png] Rua da Guia, n. 117, Recife – PE , CEP: 50.030-210

[https://verdanatech.com/wp-content/uploads/2021/05/logos-footer.png] [facebook] https://www.facebook.com/verdanatech

[linkedin]https://www.linkedin.com/company/verdanatech/

[instagram]https://www.instagram.com/verdanatech/

De: ruimvfonseca @.> Enviado: sexta-feira, 14 de abril de 2023 07:49 Para: pluginsGLPI/formcreator @.> Cc: Halexsandro de Freitas Sales @.>; Mention @.> Assunto: Re: [pluginsGLPI/formcreator] Proposta de alteração do CSS para uma melhor apresentação dos Cartões. (#1879)

Hello @glpibrhttps://github.com/glpibr, As the new versions of formcreator uses scss... Could you guys share an "update" of this css code with the community? I would be grateful!! ;)

Thanks Keep the good work! 👍

— Reply to this email directly, view it on GitHubhttps://github.com/pluginsGLPI/formcreator/issues/1879#issuecomment-1508319840, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AFMRGYXX43LSG3TMDDS5AWLXBETSHANCNFSM4O6WHS5A. You are receiving this because you were mentioned.Message ID: @.***>