framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 20.5 kB
CSS
:root{--f7-input-bg-color:#0000;--f7-label-font-weight:400;--f7-label-height:16px;--f7-label-font-size:12px;--f7-floating-label-scale:1.33333;--f7-input-padding-left:0px;--f7-input-padding-right:0px;--f7-input-error-text-color:#ff3b30;--f7-input-error-font-size:12px;--f7-input-error-line-height:1.4;--f7-input-error-font-weight:400;--f7-input-info-font-size:12px;--f7-input-info-line-height:1.4;--f7-textarea-height:100px}.ios{--f7-input-item-bg-color:#0000;--f7-input-item-border-radius:0px;--f7-input-height:40px;--f7-input-font-size:16px;--f7-input-placeholder-color:#a9a9a9;--f7-textarea-padding-vertical:8px;--f7-label-text-color:inherit;--f7-input-clear-button-size:14px;--f7-input-outline-border-radius:8px;--f7-input-text-color:#000;--f7-input-info-text-color:#00000073;--f7-input-clear-button-color:#00000073;--f7-input-outline-border-color:#bbb}.ios .dark,.ios.dark{--f7-input-text-color:#fff;--f7-input-info-text-color:#ffffff8c;--f7-input-clear-button-color:#ffffff80;--f7-input-outline-border-color:#444}.md{--f7-input-item-border-radius:4px 4px 0 0;--f7-input-height:24px;--f7-input-font-size:16px;--f7-textarea-padding-vertical:0px;--f7-input-outline-border-radius:4px;--f7-floating-label-scale:1.33333;--f7-input-clear-button-size:24px;--f7-input-info-text-color:#00000073}.md .dark,.md.dark{--f7-input-info-text-color:#ffffff73}.md,.md .dark,.md [class*=color-]{--f7-input-placeholder-color:var(--f7-md-on-surface-variant);--f7-input-item-bg-color:var(--f7-md-surface-variant);--f7-input-border-color:var(--f7-md-outline);--f7-input-clear-button-color:var(--f7-md-on-surface-variant);--f7-input-outline-border-color:var(--f7-md-outline);--f7-input-text-color:var(--f7-md-on-surface);--f7-label-text-color:var(--f7-md-on-surface-variant)}input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{appearance:none;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:inherit;display:block;font-family:inherit;font-size:inherit;margin:0;outline:0;padding:0;resize:none}input[type=date]:-internal-autofill-selected,input[type=datetime-local]:-internal-autofill-selected,input[type=email]:-internal-autofill-selected,input[type=month]:-internal-autofill-selected,input[type=number]:-internal-autofill-selected,input[type=password]:-internal-autofill-selected,input[type=search]:-internal-autofill-selected,input[type=tel]:-internal-autofill-selected,input[type=text]:-internal-autofill-selected,input[type=time]:-internal-autofill-selected,input[type=url]:-internal-autofill-selected,select:-internal-autofill-selected,textarea:-internal-autofill-selected{background-color:initial;transition:background-color 5000s ease-in-out 0s}input[type=date]:-webkit-autofill-and-obscured,input[type=date]:autofill,input[type=datetime-local]:-webkit-autofill-and-obscured,input[type=datetime-local]:autofill,input[type=email]:-webkit-autofill-and-obscured,input[type=email]:autofill,input[type=month]:-webkit-autofill-and-obscured,input[type=month]:autofill,input[type=number]:-webkit-autofill-and-obscured,input[type=number]:autofill,input[type=password]:-webkit-autofill-and-obscured,input[type=password]:autofill,input[type=search]:-webkit-autofill-and-obscured,input[type=search]:autofill,input[type=tel]:-webkit-autofill-and-obscured,input[type=tel]:autofill,input[type=text]:-webkit-autofill-and-obscured,input[type=text]:autofill,input[type=time]:-webkit-autofill-and-obscured,input[type=time]:autofill,input[type=url]:-webkit-autofill-and-obscured,input[type=url]:autofill,select:-webkit-autofill-and-obscured,select:autofill,textarea:-webkit-autofill-and-obscured,textarea:autofill{background-color:initial;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.textarea-resizable-shadow{left:-1000px;opacity:0;pointer-events:none;position:absolute;top:-1000px;visibility:hidden;z-index:-1000}.list input[type=date],.list input[type=datetime-local],.list input[type=email],.list input[type=month],.list input[type=number],.list input[type=password],.list input[type=search],.list input[type=tel],.list input[type=text],.list input[type=time],.list input[type=url],.list select{background-color:var(--f7-input-bg-color,#0000);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);height:var(--f7-input-height);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right);width:100%}.list input[type=date]::placeholder,.list input[type=datetime-local]::placeholder,.list input[type=email]::placeholder,.list input[type=month]::placeholder,.list input[type=number]::placeholder,.list input[type=password]::placeholder,.list input[type=search]::placeholder,.list input[type=tel]::placeholder,.list input[type=text]::placeholder,.list input[type=time]::placeholder,.list input[type=url]::placeholder,.list select::placeholder{color:var(--f7-input-placeholder-color)}.list textarea{background-color:var(--f7-input-bg-color,#0000);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size);height:var(--f7-textarea-height);line-height:1.4;padding:var(--f7-textarea-padding-vertical) var(--f7-input-padding-right) var(--f7-textarea-padding-vertical) var(--f7-input-padding-left);resize:none;width:100%}.list textarea::placeholder{color:var(--f7-input-placeholder-color)}.list textarea.resizable{height:calc(var(--f7-input-height) + var(--f7-textarea-padding-vertical)*2)}.list input[type=date],.list input[type=datetime-local],.list input[type=month],.list input[type=time]{line-height:var(--f7-input-height)}.list input[type=date],.list input[type=datetime-local],.list input[type=month]{flex-direction:row-reverse;text-align:right;width:auto}.list .item-floating-label,.list .item-label{color:var(--f7-label-text-color);flex-shrink:0;font-size:var(--f7-label-font-size);font-weight:var(--f7-label-font-weight);line-height:var(--f7-label-height);transition-duration:.2s;transition-property:transform,color;vertical-align:top;width:auto}.list .item-floating-label{color:var(--f7-input-placeholder-color);max-width:calc(100%/var(--f7-floating-label-scale));pointer-events:none;right:var(--f7-input-padding-right);transform-origin:right center}.list .item-floating-label~.item-input-wrap input::placeholder,.list .item-floating-label~.item-input-wrap textarea::placeholder{opacity:0;transition-duration:.1s}.list .item-floating-label~.item-input-wrap input.input-focused::placeholder,.list .item-floating-label~.item-input-wrap textarea.input-focused::placeholder{opacity:1;transition-duration:.3s}.list .item-input-with-value .item-floating-label{color:var(--f7-label-text-color)}.list .item-input-focused .item-floating-label,.list .item-input-with-value .item-floating-label{transform:scale(1) translateY(0)}.list .item-input-wrap{flex-shrink:1;position:relative;width:100%}.input,.item-input{position:relative}.item-input .item-inner{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.input-error-message,.item-input-error-message{box-sizing:border-box;color:var(--f7-input-error-text-color);display:none;font-size:var(--f7-input-error-font-size);font-weight:var(--f7-input-error-font-weight);line-height:var(--f7-input-error-line-height)}.input-info,.item-input-info{color:var(--f7-input-info-text-color);font-size:var(--f7-input-info-font-size);line-height:var(--f7-input-info-line-height)}.input-invalid .input-error-message,.input-invalid .item-input-error-message,.item-input-invalid .input-error-message,.item-input-invalid .item-input-error-message{display:block}.input-invalid .input-info,.input-invalid .item-input-info,.item-input-invalid .input-info,.item-input-invalid .item-input-info{display:none}.input{position:relative}.input input,.input select,.input textarea{width:100%}.input-clear-button{background:none;border:none;color:var(--f7-input-clear-button-color);cursor:pointer;height:var(--f7-input-clear-button-size);left:0;margin:0;margin-top:calc(var(--f7-input-clear-button-size)*-1/2);opacity:0;outline:0;padding:0;pointer-events:none;position:absolute;top:50%;transition-duration:.1s;visibility:hidden;width:var(--f7-input-clear-button-size);z-index:1}.input-clear-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;text-align:center;width:100%}.input-clear-button:before{content:"";left:50%;position:absolute;top:50%}.item-input-wrap .input-clear-button{top:calc(var(--f7-input-height)/2)}.input-clear-button.active-state{opacity:.75}.input-with-value .input-clear-button,.input-with-value~.input-clear-button,.item-input-with-value .input-clear-button{opacity:1;pointer-events:auto;visibility:visible}.input-dropdown,.input-dropdown-wrap{position:relative}.input-dropdown-wrap:before,.input-dropdown:before{border-left:4px solid #0000;border-right:4px solid #0000;border-top:5px solid #727272;content:"";height:0;left:6px;margin-top:-2px;pointer-events:none;position:absolute;top:50%;width:0}.input-dropdown input,.input-dropdown select,.input-dropdown textarea,.input-dropdown-wrap input,.input-dropdown-wrap select,.input-dropdown-wrap textarea{padding-left:calc(20px + var(--f7-input-padding-left))}.input-outline:after,.item-input-outline .item-content:after,.item-input-outline.item-content:after{border:1px solid var(--f7-input-outline-border-color);border-radius:var(--f7-input-outline-border-radius);bottom:8px;box-sizing:border-box;content:"";left:0;pointer-events:none;position:absolute;right:0;top:8px;transition-duration:.2s}.input-outline .item-floating-label,.input-outline .item-label,.item-input-outline .item-content .item-floating-label,.item-input-outline .item-content .item-label,.item-input-outline.item-content .item-floating-label,.item-input-outline.item-content .item-label{background:var(--f7-page-bg-color);padding:4px;pointer-events:none;z-index:1}.input-outline.input-focused:after,.input-outline.item-input-focused:after,.item-input-outline .item-content.input-focused:after,.item-input-outline .item-content.item-input-focused:after,.item-input-outline.item-content.input-focused:after,.item-input-outline.item-content.item-input-focused:after{border-color:var(--f7-input-outline-invalid-border-color,var(--f7-theme-color));border-width:2px}.input-outline.input-invalid:after,.input-outline.item-input-invalid:after,.item-input-outline .item-content.input-invalid:after,.item-input-outline .item-content.item-input-invalid:after,.item-input-outline.item-content.input-invalid:after,.item-input-outline.item-content.item-input-invalid:after{border-color:var(--f7-input-outline-invalid-border-color,var(--f7-input-error-text-color));border-width:2px}.block-strong .item-input-outline .item-floating-label,.block-strong .item-input-outline .item-label,.ios .block-strong-ios .item-input-outline .item-floating-label,.ios .block-strong-ios .item-input-outline .item-label,.md .block-strong-md .item-input-outline .item-floating-label,.md .block-strong-md .item-input-outline .item-label{background:var(--f7-block-strong-bg-color)}.ios .list-strong-ios .item-input-outline .item-floating-label,.ios .list-strong-ios .item-input-outline .item-label,.list-strong .item-input-outline .item-floating-label,.list-strong .item-input-outline .item-label,.md .list-strong-md .item-input-outline .item-floating-label,.md .list-strong-md .item-input-outline .item-label{background:var(--f7-list-strong-bg-color)}.dark option{background-color:var(--f7-page-bg-color)}.ios .item-floating-label+.item-input-wrap,.ios .item-label+.item-input-wrap{margin-top:0}.ios .item-floating-label{transform:scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height) + 25%))}.ios .item-input-focused .item-floating-label{color:var(--f7-label-text-color)}.ios .item-input .item-media{align-self:flex-start}.ios .item-input-wrap{margin-bottom:calc(var(--f7-list-item-padding-vertical)*-1);margin-top:calc(var(--f7-list-item-padding-vertical)*-1)}.ios .item-input:not(.item-input-outline) .item-content,.ios .item-input:not(.item-input-outline).item-content{background:var(--f7-input-item-bg-color)}.ios .input-error-message,.ios .input-info,.ios .item-input-error-message,.ios .item-input-info{margin-bottom:6px;margin-top:-8px;position:relative}.ios .item-input-focused .item-floating-label,.ios .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-label-text-color))}.ios .item-input-focused .item-inner:after{background:var(--f7-input-focused-border-color,var(--f7-list-item-border-color))}.ios .item-input-invalid .item-floating-label,.ios .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-label-text-color))}.ios .item-input-invalid .item-inner:after{background:var(--f7-input-invalid-border-color,var(--f7-list-item-border-color))}.ios .input-invalid input,.ios .input-invalid select,.ios .input-invalid textarea,.ios .item-input-invalid input,.ios .item-input-invalid select,.ios .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-error-text-color))}.ios .input-clear-button:after{content:"delete_round_ios";font-size:calc(var(--f7-input-clear-button-size)/1.4);line-height:1.4}.ios .input-clear-button:before{height:44px;margin-left:-22px;margin-top:-22px;width:44px}.ios .item-input-outline .item-content,.ios .item-input-outline.item-content{margin-left:16px;margin-right:16px;padding-bottom:8px;padding-top:8px}.ios li.item-input-outline:first-child,.ios li:first-child>.item-input-outline{padding-top:16px}.ios li.item-input-outline:first-child:after,.ios li:first-child>.item-input-outline:after{top:16px}.ios li.item-input-outline:last-child,.ios li:last-child>.item-input-outline{padding-bottom:16px}.ios li.item-input-outline:last-child:after,.ios li:last-child>.item-input-outline:after{bottom:16px}.ios .input-outline .item-inner,.ios .item-input-outline .item-content .item-inner,.ios .item-input-outline.item-content .item-inner{display:block;padding-bottom:0;padding-top:0}.ios .input-outline .item-input-wrap,.ios .item-input-outline .item-content .item-input-wrap,.ios .item-input-outline.item-content .item-input-wrap{margin-top:2px}.ios .input-outline .item-title+.item-input-wrap,.ios .item-input-outline .item-content .item-title+.item-input-wrap,.ios .item-input-outline.item-content .item-title+.item-input-wrap{margin-top:-18px}.ios .input-outline .item-floating-label,.ios .input-outline .item-label,.ios .item-input-outline .item-content .item-floating-label,.ios .item-input-outline .item-content .item-label,.ios .item-input-outline.item-content .item-floating-label,.ios .item-input-outline.item-content .item-label{display:inline-flex;margin:-8px -4px -4px;top:-4px}.ios .input-outline .item-floating-label,.ios .item-input-outline .item-content .item-floating-label,.ios .item-input-outline.item-content .item-floating-label{transform:scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height) + 4px))}.md .item-input-wrap{min-height:var(--f7-input-height)}.md .item-floating-label{transform:scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height)/2)/var(--f7-floating-label-scale)))}.md .item-input .item-inner:after{display:none}.md .item-input .item-content,.md .item-input.item-content{margin-left:16px;margin-right:16px;padding-bottom:8px;padding-top:8px}.md .input:after{background-color:var(--f7-input-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform:scaleY(1);transform-origin:50% 100%;transition-duration:.2s;width:100%;z-index:15}.md .input.input-focused:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color));transform:scaleY(2)}.md .input.input-invalid:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color));transform:scaleY(2)}.md .item-input:not(.item-input-outline) .item-content:after,.md .item-input:not(.item-input-outline).item-content:after{background-color:var(--f7-input-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.md .item-input:not(.item-input-outline) .item-content:before,.md .item-input:not(.item-input-outline).item-content:before{background:var(--f7-input-item-bg-color);border-radius:var(--f7-input-item-border-radius);bottom:8px;content:"";left:0;pointer-events:none;position:absolute;right:0;top:8px}.md .item-input:not(.item-input-outline) .item-content:after,.md .item-input:not(.item-input-outline).item-content:after{bottom:8px;transform:scaleY(1);transition-duration:.2s}.md .item-input:not(.item-input-outline) .item-content.item-input-focused:after,.md .item-input:not(.item-input-outline).item-content.item-input-focused:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color));transform:scaleY(2)}.md .item-input:not(.item-input-outline) .item-content.input-invalid:after,.md .item-input:not(.item-input-outline) .item-content.item-input-invalid:after,.md .item-input:not(.item-input-outline).item-content.input-invalid:after,.md .item-input:not(.item-input-outline).item-content.item-input-invalid:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color));transform:scaleY(2)}.md .input-outline .item-inner,.md .item-input-outline .item-content .item-inner,.md .item-input-outline.item-content .item-inner{padding-bottom:16px;padding-top:16px}.md .input-outline .item-floating-label,.md .input-outline .item-label,.md .item-input-outline .item-content .item-floating-label,.md .item-input-outline .item-content .item-label,.md .item-input-outline.item-content .item-floating-label,.md .item-input-outline.item-content .item-label{--label-height:calc(var(--f7-label-height) + 8px);margin:calc(-16px - var(--label-height)/2) -4px 4px}.md .input-outline .item-floating-label,.md .item-input-outline .item-content .item-floating-label,.md .item-input-outline.item-content .item-floating-label{transform:scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-input-height)/2 + 8px))}.md .input-with-error-message,.md .input-with-info,.md .item-input-with-error-message,.md .item-input-with-info{padding-bottom:24px}.md .input-error-message,.md .input-info,.md .item-input-error-message,.md .item-input-info{overflow:hidden;position:absolute;right:0;text-overflow:ellipsis;top:100%;white-space:nowrap;width:100%}.md .item-input-focused .item-floating-label,.md .item-input-focused .item-label{color:var(--f7-label-focused-text-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-focused-border-color,var(--f7-theme-color))}.md .input-focused:not(.input-outline):after,.md .input-invalid:not(.input-outline):after,.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{transform:scaleY(2)}.md .input-invalid:not(.input-outline):after,.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after{background:var(--f7-input-invalid-border-color,var(--f7-input-error-text-color))}.md .item-input-invalid .item-floating-label,.md .item-input-invalid .item-label{color:var(--f7-label-invalid-text-color,var(--f7-input-error-text-color))}.md .input-invalid input,.md .input-invalid select,.md .input-invalid textarea,.md .item-input-invalid input,.md .item-input-invalid select,.md .item-input-invalid textarea{color:var(--f7-input-invalid-text-color,var(--f7-input-text-color))}.md .input-clear-button:after{content:"delete_round_md";font-size:var(--f7-input-clear-button-size);line-height:1}.md .input-clear-button:before{height:48px;margin-left:-24px;margin-top:-24px;width:48px}