Responsive Forms

Developer
AntonioVasilev
Size
18,083 Kb
Views
14,168
  1. Responsive Forms Previews
  2. Responsive Forms HTML Codes
  3. Responsive Forms CSS Codes
  4. Responsive Forms JS Codes

How do I make an responsive forms?

What is a responsive forms? How do you make a responsive forms? This script and codes were developed by AntonioVasilev on 30 October 2022, Sunday.

Responsive Forms Previews
IQ Test

Responsive Forms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Forms</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { content: "../content/jcr_root/apps/bookingflow/components/booking/global/headerbooking/header";
}
.is-mobile-only { display: block;
}
@media only screen and (min-width: 780px) { .is-mobile-only { display: none; }
}
.is-mobile-only h5 { display: inline-block;
}
.go-left { float: none;
}
@media only screen and (min-width: 780px) { .go-left { float: left; }
}
.go-right { float: none;
}
@media only screen and (min-width: 780px) { .go-right { float: right; }
}
/** * Add/remove margins */
.push { margin: 20px !important;
}
.push--top { margin-top: 20px !important;
}
.push--right { margin-right: 20px !important;
}
.push--bottom { margin-bottom: 20px !important;
}
.push--left { margin-left: 20px !important;
}
.push--ends { margin-top: 20px !important; margin-bottom: 20px !important;
}
.push--sides { margin-right: 20px !important; margin-left: 20px !important;
}
.push-half { margin: 10px !important;
}
.push-half--top { margin-top: 10px !important;
}
.push-half--right { margin-right: 10px !important;
}
.push-half--bottom, .pi-filter-facilities__title { margin-bottom: 10px !important;
}
.push-half--left { margin-left: 10px !important;
}
.push-half--ends { margin-top: 10px !important; margin-bottom: 10px !important;
}
.push-half--sides { margin-right: 10px !important; margin-left: 10px !important;
}
.flush { margin: 0 !important;
}
.flush--top { margin-top: 0 !important;
}
.flush--right { margin-right: 0 !important;
}
.flush--bottom, .pi-booking .pi-booking-details li:last-child { margin-bottom: 0 !important;
}
.flush--left { margin-left: 0 !important;
}
.flush--ends { margin-top: 0 !important; margin-bottom: 0 !important;
}
.flush--sides { margin-right: 0 !important; margin-left: 0 !important;
}
/** * Add/remove paddings */
.soft { padding: 20px !important;
}
@media only screen and (min-width: 780px) { .soft--top { padding-top: 20px !important; }
}
@media only screen and (min-width: 780px) { .soft--right { padding-right: 20px !important; }
}
@media only screen and (min-width: 780px) { .soft--bottom { padding-bottom: 20px !important; }
}
.soft--left, .pi-booking-summary-panel .message-content { padding-left: 20px !important;
}
.soft--ends { padding-top: 20px !important; padding-bottom: 20px !important;
}
.soft--sides { padding-right: 20px !important; padding-left: 20px !important;
}
.soft-half { padding: 10px !important;
}
.soft-half--top { padding-top: 10px !important;
}
.soft-half--right { padding-right: 10px !important;
}
.soft-half--bottom { padding-bottom: 10px !important;
}
.soft-half--left { padding-left: 10px !important;
}
.soft-half--ends { padding-top: 10px !important; padding-bottom: 10px !important;
}
.soft-half--sides { padding-right: 10px !important; padding-left: 10px !important;
}
.hard { padding: 0 !important;
}
.hard--top { padding-top: 0 !important;
}
.hard--right { padding-right: 0 !important;
}
.hard--bottom, .pi-booking .pi-booking-details-room:last-child { padding-bottom: 0 !important;
}
.hard--left { padding-left: 0 !important;
}
.hard--ends { padding-top: 0 !important; padding-bottom: 0 !important;
}
.hard--sides, .pi-message__full-booked { padding-right: 0 !important; padding-left: 0 !important;
}
.grid { margin-left: -20px; list-style: none; margin-bottom: 0;
}
/** * Very infrequently occuring grid wrappers as children of grid wrappers. */
.grid > .grid { margin-left: 0;
}
/** * Grid */
.grid__item { margin: auto;
}
@media only screen and (min-width: 780px) and (min-width: 780px) { .grid__item { display: block; }
}
.one-whole { width: 100%;
}
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths, .tabset__nav--top-block.tabset--size2 li, .tabset__nav--bottom-block.tabset--size2 li, .tabset__nav--top-bar.tabset--size2 li, .tabset__nav--bottom-bar.tabset--size2 li { width: 50%;
}
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths, .tabset__nav--top-block.tabset--size3 li, .tabset__nav--bottom-block.tabset--size3 li, .tabset__nav--top-bar.tabset--size3 li, .tabset__nav--bottom-bar.tabset--size3 li { width: 33.333%;
}
.two-thirds, .four-sixths, .eight-twelfths { width: 66.666%;
}
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths, .tabset__nav--top-block.tabset--size4 li, .tabset__nav--bottom-block.tabset--size4 li, .tabset__nav--top-bar.tabset--size4 li, .tabset__nav--bottom-bar.tabset--size4 li { width: 25%;
}
.three-quarters, .six-eighths, .nine-twelfths { width: 75%;
}
/**
* Fifths
*/
.one-fifth, .two-tenths, .tabset__nav--top-block.tabset--size5 li, .tabset__nav--bottom-block.tabset--size5 li, .tabset__nav--top-bar.tabset--size5 li, .tabset__nav--bottom-bar.tabset--size5 li { width: 20%;
}
.two-fifths, .four-tenths { width: 40%;
}
.three-fifths, .six-tenths { width: 60%;
}
.four-fifths, .eight-tenths { width: 80%;
}
/**
* Sixths
*/
.one-sixth, .two-twelfths { width: 16.666%;
}
.five-sixths, .ten-twelfths { width: 83.333%;
}
/**
* Eighths
*/
.one-eighth { width: 12.5%;
}
.three-eighths { width: 37.5%;
}
.five-eighths { width: 62.5%;
}
.seven-eighths { width: 87.5%;
}
/**
* Tenths
*/
.one-tenth { width: 10%;
}
@media only screen and (min-width: 780px) { .three-tenths { width: 30%; }
}
.seven-tenths { width: 68%;
}
.nine-tenths { width: 90%;
}
/**
* Twelfths
*/
.one-twelfth { width: 8.333%;
}
.five-twelfths { width: 41.666%;
}
.seven-twelfths { width: 58.333%;
}
.eleven-twelfths { width: 91.666%;
}
.btn { -webkit-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; font-size: 18px; font-size: 1.28571rem; line-height: 1.16667; line-height: 28px; display: inline-block; padding: 5px 20px; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; text-decoration: none; color: #511e62; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; outline: none; box-shadow: 0 3px 1px -2px #e0e0e0;
}
.no-touch .btn:hover, .btn.is-hover { text-decoration: none; background-color: #ccd6d3; border-color: #b6c4c1; box-shadow: 0 3px 1px -2px #ccc;
}
.btn.is-selected { background-color: #ccd6d3; border-color: #b6c4c1; box-shadow: 0 3px 1px -2px #ccc;
}
.btn-group { position: relative; display: inline-block; vertical-align: middle;
}
.btn-group .btn { position: relative; float: left; border-radius: 0;
}
.btn-group .btn:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.btn-group .btn:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
.btn-group .btn + .btn { margin-left: -1px; border-left-color: #b6c4c1;
}
.pi-header__main { background-color: #5f316d;
}
@media only screen and (min-width: 780px) { .pi-header__logo { display: inline-block; width: 70%; }
}
.pi-header__logo img { display: block; margin: auto; margin: 20px auto 20px auto;
}
@media only screen and (min-width: 780px) { .pi-header__logo img { display: inline-block; }
}
.pi-header .pi-booking-nav { text-align: center;
}
@media only screen and (min-width: 780px) { .pi-header .pi-booking-nav { display: inline-block; }
}
.pi-header .pi-booking-nav ul { text-align: center; margin-bottom: 20px;
}
.pi-header .pi-booking-nav ul li { display: inline-block; margin-left: 20px;
}
.pi-booking-nav li .pi-booking-nav__step-indicator { color: #511e62; background-color: #cabbd0; border-radius: 50%; width: 29px; height: 29px; display: block; font-size: 17px; font-size: 1.21429rem; line-height: 2.5; margin-left: auto; margin-right: auto; margin-bottom: 5px;
}
.pi-primary-nav li a { vertical-align: middle; text-align: center;
}
.pi-signin__formitem .btn { display: block; margin-bottom: 20px;
}
@media only screen and (min-width: 780px) { .pi-signin__formitem .btn { display: inline-block; }
}
.pi-signin__header span { font-size: 19px; font-size: 1.35714rem;
}
.pi-signin__greeting { background-color: #e8ebea; padding: 10px;
}
.pi-signin__formitem { margin-bottom: 25px;
}
.pi-signin__submit { margin-bottom: 30px;
}
.pi-signin .btn { box-shadow: none;
}
.pi-signin .btn:hover, .pi-signin .btn.is-active { background-color: #dae1e0; border: 1px solid #b6c4c1; box-shadow: none;
}
.pi-signin .btn .icon--arrow-up, .pi-signin .btn .pi-dropdown.is-open .pi-dropdown__button, .pi-dropdown.is-open .pi-signin .btn .pi-dropdown__button { color: #b597b8;
}
.pi-booking-details-info--title { color: #3c868b;
}
.pi-booking-summary-panel { background-color: #f3f2f0; padding: 0px;
}
.pi-booking-summary-panel .pi-booking-header { margin-bottom: 5px; background: none;
}
.pi-booking-summary-panel .pi-total__price { color: #333;
}
.pi-booking-summary-panel .message__booking { background-color: #ffffff; padding: 20px 20px 20px 10px;
}
.pi-booking-summary-panel .message__booking p { margin-bottom: 0;
}
.pi-booking-summary-panel .message-content { font-size: 12px; line-height: 16px;
}
.pi-booking-summary-panel .pi-complete-booking { background: url(../../../content/dam/global/booking/dot_dash_d2c6d6_h.png) repeat-x bottom;
}
.pi-booking-summary-panel .pi-complete-booking-tariff { color: #333;
}
.pi-booking-summary-panel .pi-complete-booking-tariff--title { color: #511e62;
}
.pi-booking-summary-panel .pi-complete-booking-rooms { color: #333; font-size: 14px; font-size: 1rem;
}
.pi-booking-summary-panel .pi-booking-details-info, .pi-booking-summary-panel .pi-booking-details .btn { border-radius: 0 0 3px 3px;
}
.pi-booking-summary-panel .legal-address { font-size: 12px; font-size: 0.85714rem; color: #511e62; white-space: pre-wrap;
}
.pi-booking-summary-panel .include-vat { font-size: 12px; font-size: 0.85714rem;
}
.pi-booking-summary-panel__amend-cost { color: #333; font-size: 12px; font-size: 0.85714rem; line-height: 16px;
}
.pi-booking-summary-panel .btn--primary, .pi-booking-summary-panel .btn--secondary, .btn--block { display: none;
}
@media only screen and (min-width: 780px) { .pi-booking-summary-panel .btn--primary, .pi-booking-summary-panel .btn--secondary, .btn--block { display: block; width: 100%; }
}
.pi-booking-summary-panel .btn--search-room { font-size: 16px;
}
.pi-booking-summary-panel .room-label { font-size: 13px;
}
.pi-booking-summary-panel .btn--primary { width: 100%;
}
.form-item { /* set text style inputs */
}
.form-item input[type="text"],
.form-item input[type="search"],
.form-item input[type="tel"],
.form-item input[type="password"],
.form-item input[type="url"],
.form-item input[type="email"],
.form-item input[type="datetime"],
.form-item input[type="date"],
.form-item input[type="month"],
.form-item input[type="week"],
.form-item input[type="time"],
.form-item input[type="datetime-local"],
.form-item input[type="number"],
.form-item input[type="file"],
.form-item textarea { color: #333; background-color: #f1f0ed; border: 1px solid #ddd; outline-offset: -2px;
}
.form-item input[type="text"]:focus,
.form-item input[type="search"]:focus,
.form-item input[type="tel"]:focus,
.form-item input[type="password"]:focus,
.form-item input[type="url"]:focus,
.form-item input[type="email"]:focus,
.form-item input[type="datetime"]:focus,
.form-item input[type="date"]:focus,
.form-item input[type="month"]:focus,
.form-item input[type="week"]:focus,
.form-item input[type="time"]:focus,
.form-item input[type="datetime-local"]:focus,
.form-item input[type="number"]:focus,
.form-item input[type="file"]:focus,
.form-item textarea:focus { outline: 2px solid #b6c4c1;
}
.form-item input[type="text"] { font-size: 16px; font-size: 1.14286rem;
}
.form-item__label { font-size: 14px; font-size: 1rem; line-height: 1.5; color: #333; margin-bottom: 13px; line-height: 10px;
}
.form-item__label--small { font-size: 13px; font-size: 0.92857rem; line-height: 1.61538;
}
.form-item__label .dropdown-label2 { font-weight: normal;
}
.form-item__field { font-family: "PI Sans Regular", sans-serif; position: relative;
}
.form-item.is-disabled .form-item__label, .form-item.is-disabled .form-item__field { color: #ccc !important;
}
.form-item.is-disabled .form-item__label label,
.form-item.is-disabled .form-item__label button,
.form-item.is-disabled .form-item__label input[type="button"],
.form-item.is-disabled .form-item__label input[type="reset"],
.form-item.is-disabled .form-item__label input[type="submit"], .form-item.is-disabled .form-item__field label,
.form-item.is-disabled .form-item__field button,
.form-item.is-disabled .form-item__field input[type="button"],
.form-item.is-disabled .form-item__field input[type="reset"],
.form-item.is-disabled .form-item__field input[type="submit"] { cursor: default;
}
.is-disabled { opacity: 0.4; filter: alpha(opacity=40);
}
.form-item input[type=checkbox] + span { line-height: 1.5;
}
.pi-booking-meals .form-item input[type=checkbox] + span,
.pi-results-toolbar .form-item input[type=checkbox] + span { background-image: url("../../../content/dam/pi/websites/desktop/common/checkbox_sprite_21X21px_white.png"); background-position: 0 -1px;
}
.pi-booking-meals .form-item input[type=checkbox].is-checked + span,
.pi-results-toolbar .form-item input[type=checkbox].is-checked + span { background-position: 0 -140px;
}
.pi-booking-meals .form-item input[type=checkbox]:checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:checked + span { background-position: 0 -140px;
}
.pi-booking-meals .form-item input[type=checkbox]:focus.is-checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:focus.is-checked + span { background-position: 0 -420px;
}
.pi-booking-meals .form-item input[type=checkbox]:focus:checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:focus:checked + span { background-position: 0 -419px;
}
.form-item--checkbox .form-item__field, .form-item--checkbox .form-item__label { display: inline-block;
}
.form-item input[type=checkbox] { opacity: 0; filter: alpha(opacity=0); position: absolute; width: 18px; height: 18px; outline: none !important; /* the styles below have had to be separated because IE8 refuse to work if I put them together. */
}
.form-item input[type=checkbox] + span { display: inline-block; margin: 0; padding-left: 32px; min-height: 21px; background-image: url("../../../content/dam/pi/websites/desktop/common/checkbox_sprite_de.png"); background-position: 0 0; background-repeat: no-repeat; color: #333; font-size: 14px; font-size: 1rem;
}
.form-item input[type=checkbox]:focus + span { background-position: 0 -280px;
}
.form-item input[type=checkbox].is-checked + span { background-position: 0 -141px;
}
.form-item input[type=checkbox]:checked + span { background-position: 0 -139px;
}
.form-item input[type=checkbox]:focus.is-checked + span { background-position: 0 -419px;
}
.form-item input[type=checkbox]:focus:checked + span { background-position: 0 -419px;
}
.pi-dropdown { background-color: #f1f0ed; border: 1px solid #ddd; /* no required for dropdown */
}
.pi-dropdown input { color: #333; background-color: transparent; border: 0; height: auto; outline-offset: -2px; font-family: "PI Sans Regular", sans-serif; z-index: 1; position: relative;
}
.pi-dropdown input.bg-img { padding-left: 43px; background-repeat: no-repeat; background-position: 11px center;
}
.pi-dropdown input.creditcardlist { padding-left: 60px !important;
}
.pi-dropdown__list { max-height: 150px; overflow-x: hidden; border-bottom: 2px solid #b8c8c7;
}
.pi-dropdown__list.bg-img { width: auto;
}
.pi-dropdown__list.bg-img li { padding-left: 43px; background-repeat: no-repeat; background-position: 11px 2px; white-space: nowrap;
}
.pi-dropdown__list.creditcardlist li { padding-left: 60px !important;
}
.pi-dropdown__list::-webkit-scrollbar { width: 7px;
}
.pi-dropdown__list::-webkit-scrollbar-track { background-color: white; border: 1px solid #ddd;
}
.pi-dropdown__list::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #e2d8ec;
}
.pi-dropdown .icon-disc-cross-filled,
.pi-dropdown .icon-disc-checked-fill,
.pi-dropdown .icon-disc-info-filled { display: none !important;
}
.pi-dropdown__placeholder { position: absolute; color: #58595b; font-style: italic; font-family: "PI Sans Regular", sans-serif; top: 12px; left: 13px;
}
.pi-native-dropdown { position: relative;
}
.pi-native-dropdown--native-dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 40px; padding-left: 40px; color: #333; border-radius: 0px; border: 1px solid #ddd; font-size: 15.2px; font-size: 1.08571rem; line-height: 1.38158; background: url("../../../content/dam/global/booking/dropdown.png") no-repeat 355px 5px; background-color: #f1f0ed; max-width: 395px; width: 395px;
}
.pi-native-dropdown--native-dropdown::-ms-expand { display: none;
}
.pi-native-dropdown--flag { width: 24px; height: 24px; position: absolute; top: 8px; left: 10px;
}
.html-ie9 .pi-native-dropdown--native-dropdown { background-image: none;
}
.pi-dropdown { position: relative;
}
.pi-dropdown__handle { width: 100%; height: 30px; padding: 4px 30px 4px 10px; text-align: left; color: #4b145f; background-color: #fff; border: 1px solid #cdcccc; border-radius: 0;
}
.pi-dropdown__handle:focus { outline: 2px solid #b6c4c1;
}
.pi-dropdown .bf { font-size: 16px; font-size: 1.14286rem;
}
.pi-dropdown__button { position: absolute; top: 5px; right: 5px; margin-top: 0; width: 20px; height: 20px; cursor: pointer; box-shadow: 0 3px 1px -2px #e0e0e0;
}
.pi-dropdown__button:hover { box-shadow: 0 3px 1px -2px #ccc;
}
.pi-dropdown__button:before { display: block; width: 20px; height: 20px; font-size: 13px; font-size: 0.92857rem; line-height: 23px; text-align: center; color: #511e62; border-radius: 3px; background-color: #ffffff; font-weight: bold;
}
.pi-dropdown:hover .pi-dropdown__button:before { color: #511e62;
}
.pi-dropdown.is-open { z-index: inherit;
}
.pi-dropdown.is-open .pi-dropdown__button:before { color: #b597b8;
}
.lt-ie9 .pi-dropdown:hover .pi-dropdown__button:before { content: '\e600 ';
}
.lt-ie9 .pi-dropdown.is-open .pi-dropdown__button:before { content: '\e603 ';
}
.pi-dropdown__list { position: absolute; left: 0; top: 107%; margin: 0; width: 100%; list-style: none; background-color: #f1f0ed; color: #58595b; z-index: 2;
}
.pi-dropdown__list li { width: 100%; padding: 5px 20px 5px 13px; cursor: pointer;
}
.pi-dropdown__list li:hover { background-color: #ccd6d3;
}
.is-disabled .pi-dropdown__handle { color: #ccc !important; border-color: #ccc !important;
}
.is-disabled .pi-dropdown__button { cursor: default;
}
.is-disabled .pi-dropdown__button:before { color: #ccc !important;
}
.is-mobile-only-trigger { display: block;
}
@media only screen and (min-width: 780px) { .is-mobile-only-trigger { display: none; }
}
.hidden { display: none;
}
@media only screen and (min-width: 780px) { .hidden { display: block !important; }
}
@media screen and (max-width: 800px) { .btn--primary { position: fixed; bottom: 0px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body data-ng-app="sampleApp"> <header class="pi-header clearfix" role="banner"> <div class="pi-header__main"> <div class="container"> <div class="pi-header__main pi-header__main--booking ng-scope" data-ng-controller="HeaderCtrl as header"> <div class="inner container"> <div class="pi-header__logo pi-header__logo--booking"> <img data-ng-click="goToHome()" src="https://secure2.premierinn.com/content/dam/pi/websites/desktop/header/pi-logo.png" alt="Company Logo" width="" height=""> </div> <nav class="pi-booking-nav" role="navigation"> <ul class="pi-booking-nav__multi-steps clearfix"> <li data-ng-class="{'is-active' : header.current=='1', 'is-completed': header.current!='1' &amp;&amp; header.complete[1]}" data-pi-track-click="" class="is-active"> <span class="pi-booking-nav__step-indicator"> <span class="pi-hidden-when-complete bold">1</span> </span> </li> <li data-ng-class="{'is-active' : header.current=='2', 'is-completed': header.current!='2' &amp;&amp; header.complete[2]}" data-pi-track-click=""> <span class="pi-booking-nav__step-indicator"> <span class="pi-hidden-when-complete bold">2</span> </span> </li> <li data-ng-class="{'is-active' : header.current=='3', 'is-completed': header.current!='3' &amp;&amp; header.complete[3]}" data-pi-track-click=""> <span class="pi-booking-nav__step-indicator"> <span class="pi-hidden-when-complete bold">3</span> </span> </li> <li data-ng-class="{'is-active' : header.current=='4', 'is-completed': header.current!='4' &amp;&amp; header.complete[4]}" data-pi-track-click=""> <span class="pi-booking-nav__step-indicator"> <span class="pi-hidden-when-complete bold">4</span> </span> </li> </ul> </nav> </div> </div> </div> </div>
</header>
<main role="main"> <div class="container"> <div class="grid"> <section class="sidebar grid__item three-tenths ng-scope go-right"> <div> <div class=" "> <div class="pi-booking-summary-panel soft push--left"> <div class="is-mobile-only-trigger"> <h5 class="pi-booking-details-info--title">1 Room, 1 Night</h5> <h5 class="pi-booking-details-info--title">19 Jan - 20 Jan</h5> </div> <div ng-controller="submitDetailsCtrl as submitDetailsCtrl" class="soft--bottom ng-scope"> <button class="btn btn btn--primary" href="" type="submit" data-ng-click="submitDetailsCtrl.next()" data-ng-hide="submitDetailsCtrl.isLastStep"> Continue </button> <a class="btn btn--brand btn--secondary btn--block push--bottom ng-hide" href="" type="button" title="" data-ng-click="goToHome()" data-ng-show="submitDetailsCtrl.isLastStep"> Continue to homepage </a> </div> <div data-ng-controller="BookingOverviewCtrl as BookingOverviewCtrl" class="ng-scope is-desktop-only hidden"> <h3 class="pi-booking-header delta ng-binding" data-ng-bind="bookingPanel.hotelName">Frankfurt Messe</h3> <div class="pi-complete-booking soft--bottom push--bottom"> <p class="pi-booking-subheader pi-booking-subheader__beta" data-pi-address-format=""></p> <h4 class="pi-total__price push-half--ends zeta">Total:</h4> <h6 class="price-rate price-rate--xlarge push-half--bottom ng-isolate-scope ng-binding" data-pi-currency="bookingPanel.totalCost">€52.<span class="price-rate__decimal ng-binding">50</span> </h6> <div data-ng-show="cardFees.showMessage" class="ng-hide"> <span class="fee-notifier__copy ng-binding" data-ng-bind="'includes [currencyPrefix][feeAmount][currencySuffix] processing fee' | md:options">includes €0 processing fee</span> </div> <div class="pi-complete-booking-tariff"><span class="pi-complete-booking-tariff--title">Rate: </span><span data-ng-bind="bookingPanel.ratePlanDescription" class="ng-binding">Saver</span></div> <h5 class="pi-complete-booking-rooms flush--bottom">Based on <span data-ng-bind="'room|rooms' | pluralize:bookingPanel.staySummary.rooms" class="ng-binding">1 room</span> <span>for</span> <span data-ng-bind="'night|nights' | pluralize:bookingPanel.staySummary.nights" class="ng-binding">1 night</span> </h5> </div> </div> <div class="is-desktop-only hidden" data-ng-controller="BookingDetailsCtrl as bookingDetailsCtrl" data-ng-init="bookingDetailsCtrl.display.bookingDetailsOpen = false" class="pi-booking-details push--top ng-scope" data-ng-class="{ 'pi-booking-details--open': bookingDetailsCtrl.display.bookingDetailsOpen }"> <button class="btn btn--block btn--icon-right" data-ng-click="bookingDetailsCtrl.display.bookingDetailsOpen = !bookingDetailsCtrl.display.bookingDetailsOpen" data-pi-track-click="BOOKING_DETAILS_DROPDOWN"> <span class="dropdown-text-header">Booking details</span> <span class="icon icon--arrow-down" data-ng-class="{ 'icon--arrow-up': bookingDetailsCtrl.display.bookingDetailsOpen }"></span> </button> <div class="pi-booking-details-info soft soft-half--top"> <ul class="flush--left push-half--bottom"> <li class="push-half--bottom"> <div class="pi-booking-details-info--title">Checking in</div> <div class="pi-booking-details-info--content bold ng-binding" data-ng-bind="'[day] [date] [shortMonth] [year]' | md:bookingPanel.arrival">Friday 20 Jan 2017</div> </li> <li class="push-half--bottom"> <div class="pi-booking-details-info--title">Leaving</div> <div class="pi-booking-details-info--content bold ng-binding" data-ng-bind="'[day] [date] [shortMonth] [year]' | md:bookingPanel.departure">Saturday 21 Jan 2017</div> </li> <li class="push-half--bottom"> <div class="pi-booking-details-info--title">Stay</div> <div class="pi-booking-details-info--content bold ng-binding" data-ng-bind-html="'night | Nights' | pluralize:bookingPanel.totalNights">1 night </div> </li> </ul> <!-- ngRepeat: room in bookingPanel.rooms track by room.roomNumber --> <div class="pi-booking-details-room soft--ends ng-scope" data-ng-repeat="room in bookingPanel.rooms track by room.roomNumber"> <h4 class="bold"> <span data-ng-bind="'Room [roomNumber]' | md:{ roomNumber: room.roomNumber }" class="ng-binding">Room 1</span> <span class="light room-label ng-binding" data-ng-bind="'('+room.label+')'">(Double)</span> </h4> <ul class="pi-booking-details-family flush push-half--bottom"> <li data-ng-bind-html="'**[adults]** Adult|**[adults]** Adults' | pluralize:room" class="ng-binding"><strong>1</strong> Adult</li> <li data-ng-show="room.children" data-ng-bind-html="'**[children]** Child|**[children]** Children' | pluralize:room" class="ng-binding ng-hide"><strong>0</strong> Child</li> <li data-ng-show="room.cotRequired" class="ng-hide"> <strong>1</strong> Cot </li> </ul> <ul class="pi-booking-details-room flush--left flush--bottom push-half--top soft-half--top"> <!-- ngRepeat: roomOptions in selectedFoodOptions.options | filter:{roomNumber:room.roomNumber} --> <!-- ngIf: selectedFoodOptions.options === null || ((selectedFoodOptions.options|filter:{roomNumber:room.roomNumber}).length === 0) --> <li class="animate-repeat ng-scope" data-ng-if="selectedFoodOptions.options === null || ((selectedFoodOptions.options|filter:{roomNumber:room.roomNumber}).length === 0)">No Meals selected</li> <!-- end ngIf: selectedFoodOptions.options === null || ((selectedFoodOptions.options|filter:{roomNumber:room.roomNumber}).length === 0) --> </ul> </div> <!-- end ngRepeat: room in bookingPanel.rooms track by room.roomNumber --> </div> </div> <div data-ng-controller="InfoTextCtrl as infoTextCtrl" class="ng-scope"> <div class="ng-hide" data-ng-show="(stayDetails.ratePlan.classification === 'A' || false) &amp;&amp; (stayDetails.hotelBrand === 'PID' || false) &amp;&amp; (paymentOption === '' || false)"> </div> </div> <div data-ng-controller="InfoTextCtrl as infoTextCtrl" class="ng-scope"> <div class="" data-ng-show="(stayDetails.ratePlan.classification === 'F' || false) &amp;&amp; (stayDetails.hotelBrand === 'PID' || false) &amp;&amp; (paymentOption === '' || false)"> </div> </div> <div ng-controller="submitDetailsCtrl as submitDetailsCtrl" class="soft--top ng-scope"> <button class="btn btn btn--primary" href="" type="submit" data-ng-click="submitDetailsCtrl.next()" data-ng-hide="submitDetailsCtrl.isLastStep"> Continue </button> <a class="btn btn--brand btn--secondary btn--block push--bottom ng-hide" href="" type="button" title="" data-ng-click="goToHome()" data-ng-show="submitDetailsCtrl.isLastStep"> Continue to homepage
</a> </div> </div> </div> </div> </section> <section class="main grid__item seven-tenths soft--right ng-scope go-left"> <div data-ng-controller="LoginRegisterCtrl as loginRegisterCtrl" class="ng-scope"> <!-- ngIf: loginRegisterCtrl.loginSuccessful --> <!-- ngIf: isLoggedIn --> <!-- ngIf: !isLoggedIn --> <div class="pi-signin ng-scope" data-ng-if="!isLoggedIn"> <h1 class="pi-booking-header pi-signin__header gamma bold">Sign in or register <span>(this is optional)</span></h1> <p class="pi-signin__text">Not registered? Registering is easy - you just need to provide us with a password during your booking.</p> <div class="pi-signin__formitem"> <a class="btn btn--icon-right push-half--right" href="" type="button" autofocus="" data-ng-click="loginRegisterCtrl.changeSignInMethod(loginRegisterCtrl.signInMethod==='tina'?'tina':'login'); loginRegisterCtrl.checkStatus(); loginRegisterCtrl.loginTracking()" data-ng-class="{'is-active': (loginRegisterCtrl.signInMethod==='tina' || loginRegisterCtrl.signInMethod==='login')}"> I have an account <span class="icon icon--arrow-down" data-ng-class="{'icon--arrow-up': (loginRegisterCtrl.signInMethod==='login' || loginRegisterCtrl.signInMethod==='tina')}"></span>
</a> <a class="btn btn--icon-right" href="" type="button" data-ng-click="loginRegisterCtrl.changeSignInMethod('register'); loginRegisterCtrl.checkStatus(); loginRegisterCtrl.registerTracking()" data-ng-class="{'is-active': loginRegisterCtrl.signInMethod==='register'}"> I'd like to register <span class="icon icon--arrow-down" data-ng-class="{'icon--arrow-up': loginRegisterCtrl.signInMethod==='register'}"></span>
</a> </div> <!-- ngIf: loginRegisterCtrl.signInMethod --> </div> <!-- end ngIf: !isLoggedIn --> </div> <div data-ng-controller="ReasonForStayCtrl as ReasonForStayCtrl" data-ng-init="ReasonForStayCtrl.trackingName = 'reasonforstay'" data-component-completion="" data-ng-class="ReasonForStayCtrl.checkValidity()" class="soft--bottom ng-scope"> <h3 class="pi-booking-header bold"> Reason for stay
</h3> <ul class="pi-radio pi-title flush--left one-tenth reset-margin" data-validation-group="businessTrip"> <li class="soft-half--bottom"> <div class="flexbox"> <span class="flexbox one-tenth"> <input type="radio" name="isBusinessTrip" data-ng-model="ReasonForStayCtrl.isBusinessTrip" data-ng-value="false" data-ng-click="booker.address.type='HOME'" data-validation="businessTrip" data-radio="true" class="ng-isolate-scope ng-pristine ng-valid" data-id="c1484934726678" value="false"> </span> <span class="flexbox__item "> Leisure </span> </div> </li> <li> <div class="flexbox"> <span class="flexbox one-tenth"> <input type="radio" name="isBusinessTrip" data-ng-model="ReasonForStayCtrl.isBusinessTrip" data-ng-value="true" data-ng-click="booker.address.type='BUSINESS'" data-validation="businessTrip" data-radio="true" class="ng-isolate-scope ng-pristine ng-valid" data-id="c1484934726678" value="true"> </span> <span class="flexbox__item nine-tenths soft--right"> Business </span> </div> </li> </ul> </div> <div data-ng-init="ContactDetailsCtrl.trackingName = 'contactdetails'" data-ng-class="ContactDetailsCtrl.checkValidity()" data-component-completion="" data-ng-controller="ContactDetailsCtrl as ContactDetailsCtrl" class="ng-scope"> <h3 class="pi-booking-header bold"> Your personal information
</h3> <div class="five-eighths"> <div class="form-item__field push--bottom one-third"> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="firstName" type="text" placeholder="First name" data-ng-model="booker.firstName" data-validation="firstName" data-ng-blur="checkRadio()" data-id="c14849347266854"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="lastName" type="text" placeholder="Last name" data-ng-model="booker.lastName" data-validation="lastName" data-ng-blur="checkRadio()" data-id="c14849347266875"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="emailAddress" type="text" placeholder="Email" data-ng-model="booker.emailAddress" data-validation="emailAddress" data-ng-blur="checkRadio()" data-id="c14849347266886"> </div> </div> <div class="grid push--bottom"> <div class="grid__item one-third"> <div class="form-item__field "> </div> </div> <!-- --> <div class="grid__item two-thirds"> <div class="form-item "> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="mobileNumber" type="text" placeholder="Mobile" data-ng-model="booker.mobileNumber" data-validation="mobileNumber" data-haslandline="false" data-countrycode="GB" data-ng-blur="ContactDetailsCtrl.blurMobilePhone();checkRadio()" data-id="c14849347266897"> <div class="message message-conceptual ng-hide ng-isolate-scope" data-contextual-help="Please enter a mobile or landline number in case we need to contact you."> <div class="grid flush--left"> <span class="icon icon--disc-info-new grid__item one-twelfth hard--left"></span> <!-- --><span class="grid__item eleven-twelfths hard--left message-content"> <p class="flush--bottom ng-binding">Please enter a mobile or landline number in case we need to contact you.</p> </span> </div> </div> </div> </div> </div> </div> <div class="form-item push--bottom one-whole"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="telephoneNumber" type="text" placeholder="Landline" data-ng-model="booker.telephoneNumber" data-validation="telephoneNumber" data-hasmobile="false" data-ng-blur="checkRadio();checkMobile()" data-id="c14849347266918"> <div class="message message-conceptual ng-hide ng-isolate-scope" data-contextual-help="Please enter a mobile or landline number in case we need to contact you."> <div class="grid flush--left"> <span class="icon icon--disc-info-new grid__item one-twelfth hard--left"></span> <!-- --><span class="grid__item eleven-twelfths hard--left message-content"> <p class="flush--bottom ng-binding">Please enter a mobile or landline number in case we need to contact you.</p> </span> </div> </div> </div> </div> </div> <!-- ngIf: ContactDetailsCtrl.guests.length>1 --> <!-- ngIf: ContactDetailsCtrl.showBookingForSomeoneElse --> <div data-ng-if="ContactDetailsCtrl.showBookingForSomeoneElse " class="ng-scope"> <div class="form-item form-item--checkbox push--bottom soft-half--bottom"> <div class="form-item__field"> <label> <input class="ng-pristine ng-valid" type="checkbox" name="bookingForSomeoneElse" data-ng-class="{}" data-ng-model="ContactDetailsCtrl.bookingForSomeoneElse" data-ng-change="ContactDetailsCtrl.toggleBookingForSomeoneElse()"> <span class="">I am booking for someone else.</span> </label> </div> </div> <!-- ngIf: ContactDetailsCtrl.bookingForSomeoneElse --> </div> <!-- end ngIf: ContactDetailsCtrl.showBookingForSomeoneElse --> </div> <div data-ng-init="AddressLookupCtrl.trackingName = 'addressLookup'" data-ng-class="AddressLookupCtrl.checkValidity()" data-component-completion="" data-ng-controller="AddressLookupCtrl as AddressLookupCtrl" class="ng-scope"> <!-- ngIf: !hideAddress --> <div class="pi-booking-findyour-address ng-scope" data-ng-if="!hideAddress" data-pi-address-lookup=""> <h3 class="pi-booking-header pi-booking-header__line-height bold"> Your address
</h3> <div class="push--bottom five-eighths"> <div class="form-item__field push--bottom one-whole"> <!-- ngIf: addressLookupValid.error --> </div> <div class="pi-booking-address-lookup"> <a class="btn btn--brand btn--secondary float--left" href="" type="button" data-ng-click="addressLookup($parent.booker.address.postcodeLookup)"> Find address
</a> <p class="" data-ng-click="enterManualAddress = true">Or enter your address manually</p> </div> </div> <div class="five-eighths ng-hide" data-ng-show="enterManualAddress"> <ul class="pi-radio pi-title flush--left five-eighths" data-validation-group="businessAddress"> <li class="soft-half--bottom"> <div class="flexbox"> <span class="flexbox one-tenth"> <input type="radio" name="addressType" data-ng-model="$parent.booker.address.type" data-ng-value="'HOME'" data-validation="businessAddress" data-radio="true" class="ng-isolate-scope ng-pristine ng-valid" data-id="c1484935493372" value="HOME"> </span> <span class="flexbox__item nine-tenths soft--right"> Home address </span> </div> </li> <li> <div class="flexbox"> <span class="flexbox one-tenth"> <input type="radio" name="addressType" data-ng-model="$parent.booker.address.type" data-ng-value="'BUSINESS'" data-validation="businessAddress" data-radio="true" class="ng-isolate-scope ng-pristine ng-valid" data-id="c1484935493372" value="BUSINESS"> </span> <span class="flexbox__item nine-tenths soft--right"> Business address </span> </div> </li> </ul> <div class="form-item push--bottom ng-hide" data-ng-show="$parent.booker.address.type=='BUSINESS'"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="companyName" type="text" placeholder="Company name" data-ng-model="$parent.booker.address.companyName" data-validation="companyName" data-address-type="" data-ng-blur="checkRadio()" data-id="c148493549337711"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="addressOne" type="text" placeholder="Address Line 1" data-ng-model="$parent.booker.address.line1" data-validation="{type:'address', index:0, required:true}" data-ng-blur="checkRadio()" autocomplete="shipping street-address" data-id="c148493549337812"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="addressTwo" type="text" placeholder="Address Line 2 (optional)" data-ng-model="$parent.booker.address.line2" data-validation="{type:'address', index:1, required:false}" data-ng-blur="checkRadio()" autocomplete="off" data-id="c148493549338413"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="addressThree" type="text" placeholder="Address Line 3 (optional)" data-ng-model="$parent.booker.address.line3" data-validation="{type:'address', index:2, required:false}" data-ng-blur="checkRadio()" autocomplete="off" data-id="c148493549338514"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="addressCity" type="text" placeholder="Address Line 4 (optional)" data-ng-model="$parent.booker.address.line4" data-validation="{type:'address', index:3, required:false}" data-ng-blur="checkRadio()" autocomplete="shipping locality" data-id="c148493549338715"> </div> </div> <div class="form-item push--bottom"> <div class="form-item__field"> <input class="one-whole ng-isolate-scope ng-pristine ng-valid" name="addressPostcode" type="text" placeholder="Post code (for UK address)" data-ng-model="$parent.booker.address.postcode" data-validation="postcode" data-countrycode="GB" data-ng-blur="checkRadio()" autocomplete="shipping postal-code" data-id="c148493549338816"> </div> </div> <div class="form-item__field one-whole"> </div> </div> </div> <!-- end ngIf: !hideAddress --> </div> </section> </div> </div>
</main>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Forms - Script Codes CSS Codes

body { content: "../content/jcr_root/apps/bookingflow/components/booking/global/headerbooking/header";
}
.is-mobile-only { display: block;
}
@media only screen and (min-width: 780px) { .is-mobile-only { display: none; }
}
.is-mobile-only h5 { display: inline-block;
}
.go-left { float: none;
}
@media only screen and (min-width: 780px) { .go-left { float: left; }
}
.go-right { float: none;
}
@media only screen and (min-width: 780px) { .go-right { float: right; }
}
/** * Add/remove margins */
.push { margin: 20px !important;
}
.push--top { margin-top: 20px !important;
}
.push--right { margin-right: 20px !important;
}
.push--bottom { margin-bottom: 20px !important;
}
.push--left { margin-left: 20px !important;
}
.push--ends { margin-top: 20px !important; margin-bottom: 20px !important;
}
.push--sides { margin-right: 20px !important; margin-left: 20px !important;
}
.push-half { margin: 10px !important;
}
.push-half--top { margin-top: 10px !important;
}
.push-half--right { margin-right: 10px !important;
}
.push-half--bottom, .pi-filter-facilities__title { margin-bottom: 10px !important;
}
.push-half--left { margin-left: 10px !important;
}
.push-half--ends { margin-top: 10px !important; margin-bottom: 10px !important;
}
.push-half--sides { margin-right: 10px !important; margin-left: 10px !important;
}
.flush { margin: 0 !important;
}
.flush--top { margin-top: 0 !important;
}
.flush--right { margin-right: 0 !important;
}
.flush--bottom, .pi-booking .pi-booking-details li:last-child { margin-bottom: 0 !important;
}
.flush--left { margin-left: 0 !important;
}
.flush--ends { margin-top: 0 !important; margin-bottom: 0 !important;
}
.flush--sides { margin-right: 0 !important; margin-left: 0 !important;
}
/** * Add/remove paddings */
.soft { padding: 20px !important;
}
@media only screen and (min-width: 780px) { .soft--top { padding-top: 20px !important; }
}
@media only screen and (min-width: 780px) { .soft--right { padding-right: 20px !important; }
}
@media only screen and (min-width: 780px) { .soft--bottom { padding-bottom: 20px !important; }
}
.soft--left, .pi-booking-summary-panel .message-content { padding-left: 20px !important;
}
.soft--ends { padding-top: 20px !important; padding-bottom: 20px !important;
}
.soft--sides { padding-right: 20px !important; padding-left: 20px !important;
}
.soft-half { padding: 10px !important;
}
.soft-half--top { padding-top: 10px !important;
}
.soft-half--right { padding-right: 10px !important;
}
.soft-half--bottom { padding-bottom: 10px !important;
}
.soft-half--left { padding-left: 10px !important;
}
.soft-half--ends { padding-top: 10px !important; padding-bottom: 10px !important;
}
.soft-half--sides { padding-right: 10px !important; padding-left: 10px !important;
}
.hard { padding: 0 !important;
}
.hard--top { padding-top: 0 !important;
}
.hard--right { padding-right: 0 !important;
}
.hard--bottom, .pi-booking .pi-booking-details-room:last-child { padding-bottom: 0 !important;
}
.hard--left { padding-left: 0 !important;
}
.hard--ends { padding-top: 0 !important; padding-bottom: 0 !important;
}
.hard--sides, .pi-message__full-booked { padding-right: 0 !important; padding-left: 0 !important;
}
.grid { margin-left: -20px; list-style: none; margin-bottom: 0;
}
/** * Very infrequently occuring grid wrappers as children of grid wrappers. */
.grid > .grid { margin-left: 0;
}
/** * Grid */
.grid__item { margin: auto;
}
@media only screen and (min-width: 780px) and (min-width: 780px) { .grid__item { display: block; }
}
.one-whole { width: 100%;
}
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths, .tabset__nav--top-block.tabset--size2 li, .tabset__nav--bottom-block.tabset--size2 li, .tabset__nav--top-bar.tabset--size2 li, .tabset__nav--bottom-bar.tabset--size2 li { width: 50%;
}
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths, .tabset__nav--top-block.tabset--size3 li, .tabset__nav--bottom-block.tabset--size3 li, .tabset__nav--top-bar.tabset--size3 li, .tabset__nav--bottom-bar.tabset--size3 li { width: 33.333%;
}
.two-thirds, .four-sixths, .eight-twelfths { width: 66.666%;
}
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths, .tabset__nav--top-block.tabset--size4 li, .tabset__nav--bottom-block.tabset--size4 li, .tabset__nav--top-bar.tabset--size4 li, .tabset__nav--bottom-bar.tabset--size4 li { width: 25%;
}
.three-quarters, .six-eighths, .nine-twelfths { width: 75%;
}
/**
* Fifths
*/
.one-fifth, .two-tenths, .tabset__nav--top-block.tabset--size5 li, .tabset__nav--bottom-block.tabset--size5 li, .tabset__nav--top-bar.tabset--size5 li, .tabset__nav--bottom-bar.tabset--size5 li { width: 20%;
}
.two-fifths, .four-tenths { width: 40%;
}
.three-fifths, .six-tenths { width: 60%;
}
.four-fifths, .eight-tenths { width: 80%;
}
/**
* Sixths
*/
.one-sixth, .two-twelfths { width: 16.666%;
}
.five-sixths, .ten-twelfths { width: 83.333%;
}
/**
* Eighths
*/
.one-eighth { width: 12.5%;
}
.three-eighths { width: 37.5%;
}
.five-eighths { width: 62.5%;
}
.seven-eighths { width: 87.5%;
}
/**
* Tenths
*/
.one-tenth { width: 10%;
}
@media only screen and (min-width: 780px) { .three-tenths { width: 30%; }
}
.seven-tenths { width: 68%;
}
.nine-tenths { width: 90%;
}
/**
* Twelfths
*/
.one-twelfth { width: 8.333%;
}
.five-twelfths { width: 41.666%;
}
.seven-twelfths { width: 58.333%;
}
.eleven-twelfths { width: 91.666%;
}
.btn { -webkit-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -moz-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -ms-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; -o-transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; font-size: 18px; font-size: 1.28571rem; line-height: 1.16667; line-height: 28px; display: inline-block; padding: 5px 20px; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; text-decoration: none; color: #511e62; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; outline: none; box-shadow: 0 3px 1px -2px #e0e0e0;
}
.no-touch .btn:hover, .btn.is-hover { text-decoration: none; background-color: #ccd6d3; border-color: #b6c4c1; box-shadow: 0 3px 1px -2px #ccc;
}
.btn.is-selected { background-color: #ccd6d3; border-color: #b6c4c1; box-shadow: 0 3px 1px -2px #ccc;
}
.btn-group { position: relative; display: inline-block; vertical-align: middle;
}
.btn-group .btn { position: relative; float: left; border-radius: 0;
}
.btn-group .btn:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.btn-group .btn:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
.btn-group .btn + .btn { margin-left: -1px; border-left-color: #b6c4c1;
}
.pi-header__main { background-color: #5f316d;
}
@media only screen and (min-width: 780px) { .pi-header__logo { display: inline-block; width: 70%; }
}
.pi-header__logo img { display: block; margin: auto; margin: 20px auto 20px auto;
}
@media only screen and (min-width: 780px) { .pi-header__logo img { display: inline-block; }
}
.pi-header .pi-booking-nav { text-align: center;
}
@media only screen and (min-width: 780px) { .pi-header .pi-booking-nav { display: inline-block; }
}
.pi-header .pi-booking-nav ul { text-align: center; margin-bottom: 20px;
}
.pi-header .pi-booking-nav ul li { display: inline-block; margin-left: 20px;
}
.pi-booking-nav li .pi-booking-nav__step-indicator { color: #511e62; background-color: #cabbd0; border-radius: 50%; width: 29px; height: 29px; display: block; font-size: 17px; font-size: 1.21429rem; line-height: 2.5; margin-left: auto; margin-right: auto; margin-bottom: 5px;
}
.pi-primary-nav li a { vertical-align: middle; text-align: center;
}
.pi-signin__formitem .btn { display: block; margin-bottom: 20px;
}
@media only screen and (min-width: 780px) { .pi-signin__formitem .btn { display: inline-block; }
}
.pi-signin__header span { font-size: 19px; font-size: 1.35714rem;
}
.pi-signin__greeting { background-color: #e8ebea; padding: 10px;
}
.pi-signin__formitem { margin-bottom: 25px;
}
.pi-signin__submit { margin-bottom: 30px;
}
.pi-signin .btn { box-shadow: none;
}
.pi-signin .btn:hover, .pi-signin .btn.is-active { background-color: #dae1e0; border: 1px solid #b6c4c1; box-shadow: none;
}
.pi-signin .btn .icon--arrow-up, .pi-signin .btn .pi-dropdown.is-open .pi-dropdown__button, .pi-dropdown.is-open .pi-signin .btn .pi-dropdown__button { color: #b597b8;
}
.pi-booking-details-info--title { color: #3c868b;
}
.pi-booking-summary-panel { background-color: #f3f2f0; padding: 0px;
}
.pi-booking-summary-panel .pi-booking-header { margin-bottom: 5px; background: none;
}
.pi-booking-summary-panel .pi-total__price { color: #333;
}
.pi-booking-summary-panel .message__booking { background-color: #ffffff; padding: 20px 20px 20px 10px;
}
.pi-booking-summary-panel .message__booking p { margin-bottom: 0;
}
.pi-booking-summary-panel .message-content { font-size: 12px; line-height: 16px;
}
.pi-booking-summary-panel .pi-complete-booking { background: url(../../../content/dam/global/booking/dot_dash_d2c6d6_h.png) repeat-x bottom;
}
.pi-booking-summary-panel .pi-complete-booking-tariff { color: #333;
}
.pi-booking-summary-panel .pi-complete-booking-tariff--title { color: #511e62;
}
.pi-booking-summary-panel .pi-complete-booking-rooms { color: #333; font-size: 14px; font-size: 1rem;
}
.pi-booking-summary-panel .pi-booking-details-info, .pi-booking-summary-panel .pi-booking-details .btn { border-radius: 0 0 3px 3px;
}
.pi-booking-summary-panel .legal-address { font-size: 12px; font-size: 0.85714rem; color: #511e62; white-space: pre-wrap;
}
.pi-booking-summary-panel .include-vat { font-size: 12px; font-size: 0.85714rem;
}
.pi-booking-summary-panel__amend-cost { color: #333; font-size: 12px; font-size: 0.85714rem; line-height: 16px;
}
.pi-booking-summary-panel .btn--primary, .pi-booking-summary-panel .btn--secondary, .btn--block { display: none;
}
@media only screen and (min-width: 780px) { .pi-booking-summary-panel .btn--primary, .pi-booking-summary-panel .btn--secondary, .btn--block { display: block; width: 100%; }
}
.pi-booking-summary-panel .btn--search-room { font-size: 16px;
}
.pi-booking-summary-panel .room-label { font-size: 13px;
}
.pi-booking-summary-panel .btn--primary { width: 100%;
}
.form-item { /* set text style inputs */
}
.form-item input[type="text"],
.form-item input[type="search"],
.form-item input[type="tel"],
.form-item input[type="password"],
.form-item input[type="url"],
.form-item input[type="email"],
.form-item input[type="datetime"],
.form-item input[type="date"],
.form-item input[type="month"],
.form-item input[type="week"],
.form-item input[type="time"],
.form-item input[type="datetime-local"],
.form-item input[type="number"],
.form-item input[type="file"],
.form-item textarea { color: #333; background-color: #f1f0ed; border: 1px solid #ddd; outline-offset: -2px;
}
.form-item input[type="text"]:focus,
.form-item input[type="search"]:focus,
.form-item input[type="tel"]:focus,
.form-item input[type="password"]:focus,
.form-item input[type="url"]:focus,
.form-item input[type="email"]:focus,
.form-item input[type="datetime"]:focus,
.form-item input[type="date"]:focus,
.form-item input[type="month"]:focus,
.form-item input[type="week"]:focus,
.form-item input[type="time"]:focus,
.form-item input[type="datetime-local"]:focus,
.form-item input[type="number"]:focus,
.form-item input[type="file"]:focus,
.form-item textarea:focus { outline: 2px solid #b6c4c1;
}
.form-item input[type="text"] { font-size: 16px; font-size: 1.14286rem;
}
.form-item__label { font-size: 14px; font-size: 1rem; line-height: 1.5; color: #333; margin-bottom: 13px; line-height: 10px;
}
.form-item__label--small { font-size: 13px; font-size: 0.92857rem; line-height: 1.61538;
}
.form-item__label .dropdown-label2 { font-weight: normal;
}
.form-item__field { font-family: "PI Sans Regular", sans-serif; position: relative;
}
.form-item.is-disabled .form-item__label, .form-item.is-disabled .form-item__field { color: #ccc !important;
}
.form-item.is-disabled .form-item__label label,
.form-item.is-disabled .form-item__label button,
.form-item.is-disabled .form-item__label input[type="button"],
.form-item.is-disabled .form-item__label input[type="reset"],
.form-item.is-disabled .form-item__label input[type="submit"], .form-item.is-disabled .form-item__field label,
.form-item.is-disabled .form-item__field button,
.form-item.is-disabled .form-item__field input[type="button"],
.form-item.is-disabled .form-item__field input[type="reset"],
.form-item.is-disabled .form-item__field input[type="submit"] { cursor: default;
}
.is-disabled { opacity: 0.4; filter: alpha(opacity=40);
}
.form-item input[type=checkbox] + span { line-height: 1.5;
}
.pi-booking-meals .form-item input[type=checkbox] + span,
.pi-results-toolbar .form-item input[type=checkbox] + span { background-image: url("../../../content/dam/pi/websites/desktop/common/checkbox_sprite_21X21px_white.png"); background-position: 0 -1px;
}
.pi-booking-meals .form-item input[type=checkbox].is-checked + span,
.pi-results-toolbar .form-item input[type=checkbox].is-checked + span { background-position: 0 -140px;
}
.pi-booking-meals .form-item input[type=checkbox]:checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:checked + span { background-position: 0 -140px;
}
.pi-booking-meals .form-item input[type=checkbox]:focus.is-checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:focus.is-checked + span { background-position: 0 -420px;
}
.pi-booking-meals .form-item input[type=checkbox]:focus:checked + span,
.pi-results-toolbar .form-item input[type=checkbox]:focus:checked + span { background-position: 0 -419px;
}
.form-item--checkbox .form-item__field, .form-item--checkbox .form-item__label { display: inline-block;
}
.form-item input[type=checkbox] { opacity: 0; filter: alpha(opacity=0); position: absolute; width: 18px; height: 18px; outline: none !important; /* the styles below have had to be separated because IE8 refuse to work if I put them together. */
}
.form-item input[type=checkbox] + span { display: inline-block; margin: 0; padding-left: 32px; min-height: 21px; background-image: url("../../../content/dam/pi/websites/desktop/common/checkbox_sprite_de.png"); background-position: 0 0; background-repeat: no-repeat; color: #333; font-size: 14px; font-size: 1rem;
}
.form-item input[type=checkbox]:focus + span { background-position: 0 -280px;
}
.form-item input[type=checkbox].is-checked + span { background-position: 0 -141px;
}
.form-item input[type=checkbox]:checked + span { background-position: 0 -139px;
}
.form-item input[type=checkbox]:focus.is-checked + span { background-position: 0 -419px;
}
.form-item input[type=checkbox]:focus:checked + span { background-position: 0 -419px;
}
.pi-dropdown { background-color: #f1f0ed; border: 1px solid #ddd; /* no required for dropdown */
}
.pi-dropdown input { color: #333; background-color: transparent; border: 0; height: auto; outline-offset: -2px; font-family: "PI Sans Regular", sans-serif; z-index: 1; position: relative;
}
.pi-dropdown input.bg-img { padding-left: 43px; background-repeat: no-repeat; background-position: 11px center;
}
.pi-dropdown input.creditcardlist { padding-left: 60px !important;
}
.pi-dropdown__list { max-height: 150px; overflow-x: hidden; border-bottom: 2px solid #b8c8c7;
}
.pi-dropdown__list.bg-img { width: auto;
}
.pi-dropdown__list.bg-img li { padding-left: 43px; background-repeat: no-repeat; background-position: 11px 2px; white-space: nowrap;
}
.pi-dropdown__list.creditcardlist li { padding-left: 60px !important;
}
.pi-dropdown__list::-webkit-scrollbar { width: 7px;
}
.pi-dropdown__list::-webkit-scrollbar-track { background-color: white; border: 1px solid #ddd;
}
.pi-dropdown__list::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #e2d8ec;
}
.pi-dropdown .icon-disc-cross-filled,
.pi-dropdown .icon-disc-checked-fill,
.pi-dropdown .icon-disc-info-filled { display: none !important;
}
.pi-dropdown__placeholder { position: absolute; color: #58595b; font-style: italic; font-family: "PI Sans Regular", sans-serif; top: 12px; left: 13px;
}
.pi-native-dropdown { position: relative;
}
.pi-native-dropdown--native-dropdown { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 40px; padding-left: 40px; color: #333; border-radius: 0px; border: 1px solid #ddd; font-size: 15.2px; font-size: 1.08571rem; line-height: 1.38158; background: url("../../../content/dam/global/booking/dropdown.png") no-repeat 355px 5px; background-color: #f1f0ed; max-width: 395px; width: 395px;
}
.pi-native-dropdown--native-dropdown::-ms-expand { display: none;
}
.pi-native-dropdown--flag { width: 24px; height: 24px; position: absolute; top: 8px; left: 10px;
}
.html-ie9 .pi-native-dropdown--native-dropdown { background-image: none;
}
.pi-dropdown { position: relative;
}
.pi-dropdown__handle { width: 100%; height: 30px; padding: 4px 30px 4px 10px; text-align: left; color: #4b145f; background-color: #fff; border: 1px solid #cdcccc; border-radius: 0;
}
.pi-dropdown__handle:focus { outline: 2px solid #b6c4c1;
}
.pi-dropdown .bf { font-size: 16px; font-size: 1.14286rem;
}
.pi-dropdown__button { position: absolute; top: 5px; right: 5px; margin-top: 0; width: 20px; height: 20px; cursor: pointer; box-shadow: 0 3px 1px -2px #e0e0e0;
}
.pi-dropdown__button:hover { box-shadow: 0 3px 1px -2px #ccc;
}
.pi-dropdown__button:before { display: block; width: 20px; height: 20px; font-size: 13px; font-size: 0.92857rem; line-height: 23px; text-align: center; color: #511e62; border-radius: 3px; background-color: #ffffff; font-weight: bold;
}
.pi-dropdown:hover .pi-dropdown__button:before { color: #511e62;
}
.pi-dropdown.is-open { z-index: inherit;
}
.pi-dropdown.is-open .pi-dropdown__button:before { color: #b597b8;
}
.lt-ie9 .pi-dropdown:hover .pi-dropdown__button:before { content: '\e600 ';
}
.lt-ie9 .pi-dropdown.is-open .pi-dropdown__button:before { content: '\e603 ';
}
.pi-dropdown__list { position: absolute; left: 0; top: 107%; margin: 0; width: 100%; list-style: none; background-color: #f1f0ed; color: #58595b; z-index: 2;
}
.pi-dropdown__list li { width: 100%; padding: 5px 20px 5px 13px; cursor: pointer;
}
.pi-dropdown__list li:hover { background-color: #ccd6d3;
}
.is-disabled .pi-dropdown__handle { color: #ccc !important; border-color: #ccc !important;
}
.is-disabled .pi-dropdown__button { cursor: default;
}
.is-disabled .pi-dropdown__button:before { color: #ccc !important;
}
.is-mobile-only-trigger { display: block;
}
@media only screen and (min-width: 780px) { .is-mobile-only-trigger { display: none; }
}
.hidden { display: none;
}
@media only screen and (min-width: 780px) { .hidden { display: block !important; }
}
@media screen and (max-width: 800px) { .btn--primary { position: fixed; bottom: 0px; }
}

Responsive Forms - Script Codes JS Codes

$(document).ready(function(){ $('.is-mobile-only-trigger').click(function(){ $('.is-desktop-only').toggleClass('hidden'); })
})
Responsive Forms - Script Codes
Responsive Forms - Script Codes
Home Page Home
Developer AntonioVasilev
Username AntonioVassilev
Uploaded October 30, 2022
Rating 3
Size 18,083 Kb
Views 14,168
Do you need developer help for Responsive Forms?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AntonioVasilev (AntonioVassilev) Script Codes
Name
A Pen by AntonioVasilev
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!