form-interaction-example.css

.form-interaction-example .tips{padding:5px}.form-interaction-example ul.filter{margin-bottom:15px;}.form-interaction-example ul.filter li{min-width:100px;border:1px solid #ccc;float:left;padding:5px;text-align:center;margin-right:10px;cursor:pointer;}@media only screen and (max-width:520px){.form-interaction-example ul.filter li{min-width:80px}}@media only screen and (max-width:400px){.form-interaction-example ul.filter li{min-width:80px}}.form-interaction-example ul.filter li:first-child{border:none;min-width:50px;text-align:left;font-weight:bold;}.form-interaction-example ul.filter li:first-child:hover,.form-interaction-example ul.filter li:first-child.active{background-color:#fff}@media only screen and (max-width:520px){.form-interaction-example ul.filter li:first-child{width:380px;max-width:380px}}@media only screen and (max-width:400px){.form-interaction-example ul.filter li:first-child{width:380px;max-width:380px}}.form-interaction-example ul.filter li:hover,.form-interaction-example ul.filter li.active{background-color:#eee}.form-interaction-example .autosuggest-component{background-color:#eee;padding:15px;border:1px solid #ccc;inputwidth:90%;}.form-interaction-example .autosuggest-component input{width:100%}@media only screen and (max-width:400px){.form-interaction-example .autosuggest-component{background-color:transparent;border:none;padding-left:0;margin-bottom:-20px}}.form-interaction-example .event-input-container{margin-top:15px;padding:10px 15px 10px 10px;border:1px solid #ccc;width:340px;background-color:#eee;}@media only screen and (max-width:800px){.form-interaction-example .event-input-container{max-width:340px;float:left}}@media only screen and (max-width:400px){.form-interaction-example .event-input-container{width:94%}}.form-interaction-example .events .list-enter{opacity:.01;transform:translate(-250px,0);transform:translate3d(-250px,0,0)}.form-interaction-example .events .list-enter-active{opacity:1;transform:translate(0,0);transform:translate3d(0,0,0);transition-property:transform,opacity;transition-duration:300ms;transition-timing-function:cubic-bezier(.175,.665,.32,1),linear}.form-interaction-example .events .list-leave{opacity:1;transform:translate(0,0,0);transform:translate3d(0,0,0);transition-property:transform,opacity;transition-duration:300ms;transition-timing-function:cubic-bezier(.175,.665,.32,1),linear}.form-interaction-example .events .list-leave-active{opacity:.01;transform:translate(250px,0);transform:translate3d(250px,0,0)}.form-interaction-example h3.title{display:inline-block;padding:5px;margin-top:5px}.form-interaction-example .errors{padding-bottom:10px;color:#f00;}.form-interaction-example .errors .error{padding-top:5px;padding-bottom:5px}.form-interaction-example [name="title"],.form-interaction-example [name="description"],.form-interaction-example .submit{display:block;margin-bottom:15px;float:left}.form-interaction-example [name="description"]{height:100px;}.form-interaction-example .in-error{border-color:#ff6347}.form-interaction-example .list .item{margin-bottom:15px;}.form-interaction-example .list .item textarea.content{width:95%;border:none;height:150px;resize:none}.form-interaction-example .list .item .header{margin-bottom:0;padding:5px;border:1px solid #3a5795;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#3a5795;color:#eee}.form-interaction-example .list .item .content-wrapper{border-left:1px solid #ccc;border-right:1px solid #ccc;margin-top:-15px}.form-interaction-example .list .item .content{opacity:.5;padding:5px;}.form-interaction-example .list .item .content.editing{background-color:#fff}.form-interaction-example .list .item .actions{background-color:#ccc;padding:5px;}.form-interaction-example .list .item .actions svg{height:22px;width:22px}