.form { box-sizing: border-box; margin-top: 80px; margin-bottom: auto; width: 100%; @media (min-width: 800px) { width: 100%; } @media (min-width: 1200px) { width: 90%; } } .autoCompletes { width: 100%; justify-content: center; align-items: center; } .asap { flex: 0 0 5em; width: 80%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .searchNode { width: 70%; } .listContainer { text-align:center; } .listItem { text-align:center; } .favoriteLoadersWrapper { width: 100%; display: flex; // justify-content: flex-start; margin: 1.5rem 0 3rem 0; text-align: center; @media (max-width: 614px) { width: 100%; } } .selectTargetMode { flex: 0 1 10rem; max-width: 70%; @media (max-width: 800px) { //see below, flex becomes vertical flex: 0 1 auto; } } .selectTime { width: 100%; // justify-content: space-between; align-items: center; display: flex; flex-direction: row; padding: 1rem 0 0 0; //flex: 1 1 3rem; @media (max-width: 800px) { flex-direction: column; flex: 0 0 8rem; align-items: flex-start; } } .timePicker { width:'9rem' } .swapIcon { margin-left: 1rem; margin-top: 2rem; } .passengersCounterWrapper { flex: 1 0 auto; display: flex; flex-direction: row; justify-content: flex-end; padding:0.5rem; } .passengersCounterLabel { display: flex; flex-direction: column; justify-content: center; margin-right: 10px; font-weight: 600; } .counter { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; background: #f2f2f2; max-width: 110px; } .counterDecrement, .counterIncrement, .counterValue { padding: 10px 15px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .counterIncrement { &:hover { cursor: pointer; } } .counterDecrement { &:hover { cursor: pointer; } } .submitForm { padding: 0.5rem; } div[class^="input-cssmodule-day"]:focus { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1); } div[class^="input-cssmodule-wrapper"]:hover, div[class^="input-cssmodule-wrapper"]:focus { box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1); } .passengersLabel { color: black !important; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter