@font-face { font-family: fw-iconFont; src: url(fonts/fw-iconfont.woff2?v=5) format('woff2'); font-display: swap; font-weight: normal; font-style: normal; } .fw-primaryText { color: rgba(0, 0, 0, 0.87); } .fw-secondaryText { color: rgba(0, 0, 0, 0.54); } .fw-disableText { color: rgba(0, 0, 0, 0.38); } .fw-strongText { font-weight: bold; } .fw-divider { background-color: rgba(0, 0, 0, 0.54); } .fw-noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /* class for describe the device is mobile */ .fw-mobile { } /* class for describe the device has touchable functions */ .fw-touch { } .hide { display: none; }@charset "utf-8"; body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, hr, tt, em, sup, sub, fieldset, legend, label, input, select, button, textarea, p, span, small, blockquote, table, tbody, th, td, img, a, ins, del, u, i, main, header, hgroup, nav, section, aside, article, figure, figcaption, footer { padding: 0; margin: 0; outline: 0; } header, hgroup, menu, main, nav, section, aside, article, details, figure, figcaption, footer { display: block; } ins, em, del, u, i { text-decoration: none; font-style: normal; } sup, sub { font-size: 0.6em; } sup { vertical-align: top; } fieldset, img, legend { border: 0; } ul { list-style-type: none; } hr { color: #808080; margin: 5px 0; border: none; background-color: #808080; height: 1px; } .hidden { display: none; } .hidden-important { display: none !important; } /** * Created by IntelliJ IDEA. * User: nehxby * Date: 02.03.18 * Time: 13:00 */ .fw-button { cursor: pointer; position: relative; /*--- reset ---*/ outline: none; border: none; background: none; } .fw-button:focus, .fw-button:active { outline: none; border: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-button::-moz-focus-inner { border: 0; } .fw-button_icon { /*width, height, position - Configure in the project*/ } a.fw-button_icon, a.fw-button_icon:visited { text-decoration: none; color: currentColor; } .fw-button_flat, .fw-button_raised { display: inline-block; height: 36px; min-width: 88px; border-radius: 2px; overflow: hidden; } .fw-button_flat ins:before, .fw-button_raised ins:before { font-size: 1.5em; margin-right: 3px; } .fw-button_flat { color: rgba(0, 0, 0, 0.87); } .fw-button_raised { background-color: #004892; /*project*/ color: #fafafa; /*project*/ transition: box-shadow 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-button_raised:not([disabled]) { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12); } /*====================================== BODY =================================*/ .fw-button-body { position: relative; display: block; } .fw-button_flat .fw-button-body, .fw-button_raised .fw-button-body { height: 100%; padding: 0 8px; } .fw-button_icon .fw-button-body { border-radius: 50%; overflow: hidden; height: inherit; width: inherit; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fw-button-body::before { content: ""; display: block; position: absolute; width: 0; height: 0; top: 50%; left: 50%; padding: 0; /*fucking new google chrome bug in scale on animation*/ border-radius: 50%; background-color: rgba(153, 153, 153, 0.38); transform: translate(-50%, -50%) scale(0); pointer-events: none; /*delete this string cause bug onclick in firefox*/ } /*============================= BEHAVIOR ====================================*/ .fw-button:hover:not([disabled]) .fw-button-body, .fw-button:focus .fw-button-body { background-color: rgba(0, 0, 0, 0.12); } .fw-button_ripple .fw-button-body::before { padding: 60%; pointer-events: none; /*im fix click on element, dont remove me plz*/ transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; transform: translate(-50%, -50%) scale(1); } .fw-button_rippleHide .fw-button-body::before { padding: 60%; transform: translate(-50%, -50%) scale(1); transition: opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; opacity: 0; } .fw-button_raised:active:not([disabled]) { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .fw-button[disabled] { color: rgba(0, 0, 0, 0.38); cursor: default; } .fw-button_raised[disabled] { background-color: rgba(0, 0, 0, 0.12); } .fw-button_icon[disabled] .fw-button-body { background-color: rgba(0, 0, 0, 0.12); } /*================================ CONTENT ===================================*/ .fw-button ins { display: flex; justify-content: center; align-items: center; height: 100%; overflow: hidden; white-space: nowrap; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 0; } .fw-button_flat ins, .fw-button_raised ins { text-transform: uppercase; font-family: Roboto, sans-serif; font-size: 14px; } .fw-button_icon ins { font-size: 24px; /*project*/ } .fw-checkbox { border-color: #4285f4; /*Google color*/ display: inline-block; padding: 5px; } .fw-checkbox-body { display: flex; flex-basis: 100%; align-items: center; border-color: inherit; } .fw-checkbox input { display: none; } .fw-checkbox-icon { cursor: pointer; flex-shrink: 0; border-color: inherit; position: relative; width: 20px; height: 20px; } .fw-checkbox-icon span { display: flex; justify-content: center; align-items: center; border-width: 2px; border-style: solid; border-color: inherit; border-radius: 3px; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-sizing: border-box; } .fw-checkbox-icon span:before { content: ''; height: 0; width: 0; border-radius: 50%; background-color: rgba(153, 153, 153, 0.38); transform: scale(0); flex-shrink: 0; } .fw-checkbox-icon span:after { content: '\e803'; font-family: fw-iconFont, sans-serif; background-color: transparent; color: transparent; position: absolute; font-size: 16px; width: inherit; height: inherit; border-radius: inherit; line-height: 20px; text-align: center; transition: background-color 200ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } /*For google chrome ver.49 support display flex with position absolute */ .fw-checkbox-icon span:after { top: 50%; left: 50%; transform: translate(-50%, -50%); } .fw-checkbox_ripple .fw-checkbox-icon span:before { height: 48px; width: 48px; pointer-events: none; /*im fix click on element, dont remove me plz*/ transform: scale(1); transition: transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-checkbox :indeterminate + .fw-checkbox-icon span:after { content: '\e80f'; background-color: #4285f4; color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 1); } .fw-checkbox :checked + .fw-checkbox-icon span:after { background-color: #4285f4; color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 1); } .fw-checkbox :disabled { pointer-events: none !important; } .fw-checkbox :disabled + .fw-checkbox-icon span { border-color: rgba(0, 0, 0, 0.38); } .fw-checkbox :disabled + .fw-checkbox-icon, .fw-checkbox :disabled ~ .fw-checkbox-text { cursor: default; } .fw-checkbox :disabled + .fw-checkbox-icon span:before { display: none; } .fw-checkbox :checked:disabled + .fw-checkbox-icon span:after { background-color: rgba(0, 0, 0, 0.38); } .fw-checkbox :disabled ~ .fw-checkbox-text { color: rgba(0, 0, 0, 0.38); } .fw-checkbox-icon + .fw-checkbox-text { padding-left: 8px; } .fw-checkbox-text { cursor: pointer; } .fw-checkbox_reverse .fw-checkbox-body { flex-direction: row-reverse; } .fw-checkbox_reverse .fw-checkbox-icon + .fw-checkbox-text { padding: 0 8px 0 0; } /*====================== not highlight element at touch on mobile */ .fw-checkbox-icon { -moz-user-select: none; -ms-user-select: none; user-select: none; } .fw-checkbox-icon, .fw-checkbox-text { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-dialog { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; /* see fw-waiting, fw-flyBox, fw-select-box*/ display: flex; justify-content: center; align-items: center; background-color: transparent; transition: background-color 375ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; } .fw-dialog_aboveAll { z-index: 25000; /* see fw-waiting, fw-flyBox, fw-select-box*/ } .fw-dialog-fogging { position: fixed; display: none; background-color: rgba(0, 0, 0, 0.38); height: 100%; width: 100%; transition: opacity 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; opacity: 0; } /*For google chrome ver.49 support display flex with position absolute */ .fw-dialog-fogging { top: 50%; left: 50%; transform: translate(-50%, -50%); } .fw-dialog-cont { display: flex; flex-direction: column; background-color: #ffffff; border-radius: 2px; transform: scale(0); transform-origin: center bottom; transition: transform 375ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; opacity: 0; max-height: 90%; max-width: 95%; min-width: 300px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); } .fw-dialog-header { display: flex; flex-direction: column; flex-shrink: 0; padding: 24px 24px 20px; min-height: 56px; box-sizing: border-box; z-index: 100; } .fw-dialog-title { display: flex; justify-content: space-between; align-items: center; flex-grow: 1; } .fw-dialog-title > h1 { font-size: 1.8em; line-height: 1.2em; font-weight: normal; } .fw-dialog-subTitle { position: relative; margin-top: 16px; } .fw-dialog-subTitle h2 { font-size: 1.3em; line-height: 1.2em; font-weight: normal; } .fw-dialog-cancel { flex-shrink: 0; margin-left: 24px; width: 24px; height: 24px; position: relative; } .fw-dialog-cancel .fw-button { width: 48px; height: 48px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .fw-dialog-header + .fw-dialog-body { padding-top: 0; } .fw-dialog-body { padding: 24px; overflow-y: auto; } .fw-dialog-message { font-size: 1.2em; } .fw-dialog-cont_topShadow > .fw-dialog-header { box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .fw-dialog-cont_bottomShadow > .fw-dialog-actions { box-shadow: 0 -2px 5px rgba(0,0,0,0.2); } .fw-dialog-actions { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-shrink: 0; padding: 8px 8px 8px 24px; z-index: 100; } .fw-dialog-actions .fw-button + .fw-button { margin-left: 8px; } .fw-dialog-actions .fw-chip + .fw-chip { margin-left: 8px; } @media screen and (max-width: 846px) { /*телефон + планшет*/ .fw-dialog.fw-dialog_fullScreen > .fw-dialog-cont { border-radius: 0; box-shadow: none; width: 100%; height: 100%; max-height: 100%; max-width: initial; top: 0; left: 0; transform: initial; } .fw-dialog.fw-dialog_fullScreen > .fw-dialog-cont .fw-dialog-cancel { margin: 0 24px 0 0; } .fw-dialog.fw-dialog_fullScreen > .fw-dialog-cont .fw-dialog-header { padding-top: 20px; } .fw-dialog.fw-dialog_fullScreen > .fw-dialog-cont .fw-dialog-title { flex-direction: row-reverse; justify-content: flex-end; } .fw-dialog.fw-dialog_fullScreen > .fw-dialog-cont .fw-dialog-body { padding-top: 20px; flex-grow: 1; } } .fw-flyBox { background-color: #ffffff; border-radius: 2px; position: absolute; z-index: 15000; /* fw-dialog has 10000 and can contain flyBoxes*/ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); overflow: hidden; transition: transform 375ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 375ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; opacity: 0; transform-origin: left top; transform: scale(0); } /* fly box that shown over anchors */ .fw-flyBox_over { } .fw-flyBox_opened { transform: scale(1); opacity: 1; } .fw-flyBox-body { position: relative; overflow-x: hidden; overflow-y: auto; max-height: 600px; max-width: 95vw; } @media screen and (max-width: 667px) { .fw-flyBox_over { max-width: 90%; max-height: 90%; transform: translate(-50%,-50%) scale(0); position: fixed; left: 50% !important; top: 50% !important; } .fw-flyBox_over.fw-flyBox_opened { transform: translate(-50%,-50%) scale(1); } .fw-flyBox_over .fw-flyBox-body { max-height: 100%; } } .fw-hiddenInput { cursor: pointer; display: inline-block; padding: 8px; max-width: 100%; box-sizing: border-box; } .fw-hiddenInput-caption { display: block; position: relative; padding-right: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fw-hiddenInput-caption:after { content: '\e807'; font-family: fw-iconFont, sans-serif; color: rgba(0, 0, 0, 0.54); font-size: 1.3em; opacity: 0; transition: opacity 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } .fw-hiddenInput-caption_empty { } .fw-hiddenInput:hover .fw-hiddenInput-caption:after { opacity: 1; } .fw-hiddenInput-storage { display: none; } .fw-hiddenInput-cont { min-width: 300px; } .fw-hiddenInput-cont .fw-scrolledBox-body { padding: 16px; } .fw-hiddenInput-cont .fw-scrolledBox-actions ~ .fw-scrolledBox-body { padding-bottom: 0; } /*====================== not highlight element at touch on mobile */ .fw-hiddenInput { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } @media screen and (max-width: 667px) { .fw-hiddenInput-caption:after { opacity: 1; } } .fw-input_withHidden { max-width: 100%; } .fw-input_withHidden .fw-input-content, .fw-input_withHidden .fw-input-label, .fw-input_withHidden .fw-input-label > span { max-width: inherit; } .fw-input .fw-hiddenInput { padding: 1px; width: 100%; } .fw-input .fw-hiddenInput .fw-hiddenInput-caption { min-height: 26px; line-height: 26px; font-size: 1em; } /* Maybe this css must use in project context */ /*.fw-hiddenInput-cont .fw-input { font-size: 13px; } .fw-hiddenInput-cont .fw-input-caption, .fw-hiddenInput-cont .fw-input input { line-height: 20px; } .fw-hiddenInput-cont .fw-input_focused .fw-input-caption, .fw-hiddenInput-cont .fw-input_hasValue .fw-input-caption { transform: translate3d(0, -18px, 0) scale(.9); }*/ [class^='fw-icon-'], [class*= ' fw-icon-'] { display: inline-flex; justify-content: center; align-items: center; } [class^='fw-icon-']:before, [class*= ' fw-icon-']:before { font-family: fw-iconFont, fantasy; font-style: normal; font-weight: normal; } .fw-icon-cross:before { content: '\e800'; } .fw-icon-action:before { content: '\e80f'; } .fw-icon-actionVertical:before { content: '\e810'; } .fw-icon-ok:before { content: '\e803'; } .fw-icon-downOpen:before { content: '\e804'; } .fw-icon-search:before { content: '\e805'; } .fw-icon-plus:before { content: '\e806'; } .fw-icon-edit:before { content: '\e807'; } .fw-icon-angleLeft:before { content: '\f104'; } .fw-icon-angleRight:before { content: '\f105'; } .fw-icon-viber:before { content: '\e80c'; color: #7d539f; } .fw-icon-whatsapp:before { content: '\f232'; color: #2db233; } .fw-icon-telegram:before { content: '\f2c6'; color: #289bd4; } .fw-icon-facebook:before { content: '\e801'; color: #4267b2; } .fw-icon-messenger:before { content: '\e811'; color: #0083ff; } .fw-icon-email:before { content: '\f233'; } .fw-icon-drag:before { content: '\e80d'; } .fw-icon-share:before { content: '\e80e'; } .fw-icon-calendar:before { content: '\e812'; } .fw-icon-trash:before { content: '\e813'; } .fw-icon-arrowUp:before { content: '\e814'; } .fw-icon-arrowDown:before { content: '\e815'; } .fw-icon-move:before { content: '\e816'; } .fw-imgUploader { border: 2px dashed transparent; position: relative; z-index: 0; } .fw-imgUploader-description { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.54); font-size: 2rem; z-index: -1; background-color: rgba(0, 0, 0, 0.08); /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.54);*/ } .fw-imgUploader-box { min-height: 110px; min-width: 220px; } .fw-imgUploader-box::after { content: ''; display: block; clear: both; } .fw-imgUploader_draggedFile { border-color: #808080; /*pointer-events: none;*/ } .fw-imgUploader_draggedFile .fw-imgUploader-description { display: flex; } .fw-imgUploader_draggedFile .fw-imgUploader-item { display: none; } .fw-imgUploader-item { position: relative; display: flex; float: left; align-items: center; justify-content: center; width: 90px; height: 90px; border: 1px dashed #808080; box-sizing: border-box; background-color: #f5f5f5; margin: 8px; padding: 4px; /*cursor: pointer;*/ } .fw-imgUploader-item_failed { box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.38); } .fw-imgUploader-item_img { border-style: solid; cursor: move; } .fw-imgUploader-item_img img { max-height: 100%; max-width: 100%; display: block; } .fw-imgUploader-item_img:hover, .fw-imgUploader-item_img:active { background-color: #E2E2E2; } .fw-imgUploader-item_img i, .fw-imgUploader-item_img del, .fw-imgUploader-item_img > ins { position: absolute; align-items: center; justify-content: center; display: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.38); top: -10px; font-size: 18px; color: #fafafa; cursor: pointer; } .fw-imgUploader-item_img > ins { color: rgba(0, 0, 0, 0.72); } .fw-imgUploader-item_img > ins:after { content: ''; display: block; position: absolute; width: 80px; height: 60px; transform: translateY(8px); } .fw-imgUploader-item_img > ins:before { font-size: 1.3em; } .fw-imgUploader-item_img:hover i, .fw-imgUploader-item_img:active i { display: flex; background-color: #004892; left: -10px; } .fw-imgUploader-item_img:hover del, .fw-imgUploader-item_img img:active + del { display: flex; background-color: #770000; right: -10px; } .fw-imgUploader-item_dragged > ins, .fw-imgUploader-item_img:hover > ins, .fw-imgUploader-item_img img:active + ins { cursor: move; display: flex; background-color: #ffffff; left: 50%; top: 50%; transform: translate(-50%, -50%); } .fw-imgUploader-item_dragged { background-color: #E2E2E2; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); transform: rotate(2deg); } .fw-imgUploader-item_add { overflow: hidden; } .fw-imgUploader-item_add > label, .fw-imgUploader-item_addLink > label { width: inherit; height: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; } .fw-imgUploader-item_add > label > input { display: none; } .fw-imgUploader-item_add > label > ins { width: 36px; height: 36px; display: flex; /*border-radius: 50%;*/ align-items: center; justify-content: center; background-color: #004892; font-size: 24px; color: #fafafa; } .fw-imgUploader-item_addLink > label > ins { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 36px solid red; /*width: 36px; height: 36px;*/ display: flex; /*border-radius: 50%;*/ align-items: center; justify-content: flex-start; font-size: 24px; color: #fafafa; } .fw-imgUploader-item_addLink > label > ins:before { transform: translateX(-36px); } .fw-imgUploader-item_dragged.fw-imgUploader-item_img i, .fw-imgUploader-item_dragged.fw-imgUploader-item_img del { display: none !important; } .fw-imgUploader-item .fw-waiting { position: absolute; z-index: 100; } .fw-imgUploader-item .fw-waiting ins { width: 24px; height: 24px; } .fw-imgUploader-item-error { position: absolute; color: red; z-index: 200; font-size: 1.3em; text-shadow: 0 0 3px rgba(255, 255, 255, 0.96); } .fw-imgUploader-item-caption { position: absolute; bottom: -8px; font-size: 0.8em; color: white; background-color: rgba(0, 0, 0, 0.54); text-align: center; padding: 3px 5px; pointer-events: none; display: none; } .fw-imgUploader-item_img:hover .fw-imgUploader-item-caption { display: block; } .fw-imgUploader-item_dragged:hover .fw-imgUploader-item-caption { display: none; } .fw-input { display: flex; gap: 0 8px; font-family: Roboto, sans-serif; font-size: 16px; padding-top: 14px; position: relative; } .fw-input-content { flex: 1; } .fw-input-beforeContent, .fw-input-afterContent { display: flex; height: 30px; align-items: center; } .fw-input.fw-input_disabled .fw-input-label-insideContent { filter: grayscale(1); opacity: 0.54; } .fw-input-label { position: relative; display: flex; gap: 0 8px; align-items: center; border: 0 solid rgba(0, 0, 0, 0.2); border-bottom-width: 1px; box-sizing: border-box; padding: 2px 8px 1px; } .fw-input-label:after { content: ''; display: block; background-color: rgba(60, 60, 60, .05); transition: background-color 100ms cubic-bezier(0.4, 0.0, 0.2, 1); border-radius: 4px 4px 0 0; position: absolute; left: 0; top: -14px; right: 0; bottom: 0; z-index: 0; } /*todo before unmark you must resolve problem with disabled inputs*/ /*.fw-input:not(.fw-input_focused) .fw-input-label:hover:after { opacity: 0.08; }*/ .fw-input_focused .fw-input-label { border-bottom-width: 2px; border-color: #106cc8; padding-bottom: 0; } .fw-input_focused .fw-input-label:after { background-color: rgba(60, 60, 60, .12); } .fw-input_invalid .fw-input-label { border-color: #dd2c00; } .fw-input_valid .fw-input-label { border-color: #008000; } .fw-input-label > span { flex: 1; position: relative; z-index: 1; } .fw-input input, .fw-input select, .fw-input textarea, .fw-input .fw-select-input { background: none; box-sizing: border-box; border: 0; border-radius: 0; width: 100%; font-size: 1em; font-family: inherit; line-height: 26px; } .fw-input input { } .fw-input input::placeholder { color: transparent; } .fw-input input::-webkit-input-placeholder { color: transparent; } .fw-input input:-moz-placeholder { color: transparent; } /* FF 4-18 */ .fw-input input::-moz-placeholder { color: transparent; } /* FF 19+ */ .fw-input input:-ms-input-placeholder { color: transparent; } /* IE 10+ */ .fw-input textarea:focus::placeholder, .fw-input input:focus::placeholder { color: rgba(0, 0, 0, 0.54); transition: color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-input textarea:focus::-webkit-input-placeholder, .fw-input input:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.54); transition: color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } /* FF 4-18 */ .fw-input textarea:focus:-moz-placeholder, .fw-input input:focus:-moz-placeholder { color: rgba(0, 0, 0, 0.54); transition: color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } /* FF 19+ */ .fw-input textarea:focus::-moz-placeholder, .fw-input input:focus::-moz-placeholder { color: rgba(0, 0, 0, 0.54); transition: color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } /* IE 10+ */ .fw-input textarea:focus:-ms-input-placeholder, .fw-input input:focus:-ms-input-placeholder { color: rgba(0, 0, 0, 0.54); transition: color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-input-caption { box-sizing: border-box; color: rgba(0, 0, 0, 0.54); font-size: 1em; font-family: inherit; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; position: absolute; pointer-events: none; top: -6px; left: 8px; transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; transform-origin: left top; transform: translate3d(0, 0, 0) scale(1); } .fw-input_focused .fw-input-caption, .fw-input_hasValue .fw-input-caption { transform: translate3d(-8px, -10px, 0) scale(.9); } /* fucking google chrome autofill */ .fw-input input:-webkit-autofill + .fw-input-caption { transform: translate3d(-8px, -10px, 0) scale(.9); } .fw-input.fw-input_invalid .fw-input-beforeContent, .fw-input.fw-input_invalid .fw-input-afterContent, .fw-input.fw-input_focused .fw-input-caption { color: #106cc8; } .fw-input input:required + .fw-input-caption:after, .fw-input textarea:required + .fw-input-caption:after, .fw-input .fw-select_required + .fw-input-caption:after { content: ' *'; font-size: .8em; vertical-align: top; } .fw-input-label-insideContent { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -10px; z-index: 1; } .fw-input-label .fw-button_icon { font-size: 10px; width: inherit; height: inherit; } /*========================== DISABLED ===========================*/ .fw-input :disabled { color: rgba(0, 0, 0, 0.32); } .fw-input :disabled + .fw-input-caption { color: rgba(0, 0, 0, 0.32); } .fw-input :disabled + .fw-input-caption:after { filter: grayscale(1); } /*========================== TEXT AREA ===========================*/ .fw-input textarea { resize: vertical; /*overflow: hidden;*/ padding-top: 4px; } .fw-input textarea::placeholder { color: transparent; } .fw-input textarea::-webkit-input-placeholder { color: transparent; } .fw-input textarea:-moz-placeholder { color: transparent; } /* FF 4-18 */ .fw-input textarea::-moz-placeholder { color: transparent; } /* FF 19+ */ .fw-input textarea:-ms-input-placeholder { color: transparent; } /* IE 10+ */ /*====================== messages ====================*/ .fw-input-messages { font-size: .8em; overflow: hidden; } .fw-input-messages p { padding: 3px 4px 0; box-sizing: border-box; overflow: hidden; margin-top: 0; opacity: 1; } .fw-input.fw-input_invalid .fw-input-beforeContent, .fw-input.fw-input_invalid .fw-input-afterContent, .fw-input.fw-input_invalid .fw-input-caption { color: #dd2c00; } .fw-input.fw-input_valid .fw-input-beforeContent, .fw-input.fw-input_valid .fw-input-afterContent, .fw-input.fw-input_valid .fw-input-caption { color: #008000; } p.fw-input-help { color: rgba(0, 0, 0, 0.54); } p.fw-input-error { color: #dd2c00; } /*========================== INPUT SELECT ===========================*/ .fw-input .fw-select + .fw-input-caption { padding-right: 20px; } .fw-input.fw-input_focused .fw-select-icon { border-color: #106cc8 transparent; } .fw-input.fw-input_invalid .fw-select-icon { border-color: #dd2c00 transparent; } .fw-input.fw-input_valid .fw-select-icon { border-color: #008000 transparent; } /*================================= SEARCH INPUT (fw-input_search + fw-input_searchMain) ============================*/ .fw-input_searchMain { align-items: center; background-color: rgba(0, 0, 0, 0.38); border-radius: 3px; color: #ffffff; padding-top: 0; } .fw-input_search { gap: 0; } .fw-input_search .fw-input-beforeContent, .fw-input_search .fw-input-afterContent { height: auto; } .fw-input_search .fw-input-beforeContent .fw-icon-search, .fw-input_search .fw-input-afterContent .fw-icon-search, .fw-input_search .fw-input-label-insideContent .fw-icon-search { font-size: 20px; width: 24px; height: 24px; cursor: pointer; } .fw-input_search .fw-input-beforeContent .fw-icon-search, .fw-input_search .fw-input-afterContent .fw-icon-search { padding: 3px 8px; } .fw-input_searchMain .fw-input-label:after { display: none; } .fw-input_searchMain .fw-input-label-insideContent { margin-top: 0; } .fw-input_searchMain .fw-input-beforeContent .fw-icon-search, .fw-input_searchMain .fw-input-afterContent .fw-icon-search { color: #ffffff; padding: 8px; } .fw-input_searchMain .fw-input-caption { display: none; } .fw-input_searchMain .fw-input-label { border: none; padding: 8px; } .fw-input_searchMain input { color: inherit; line-height: 24px; } .fw-input_searchMain input::placeholder, .fw-input_searchMain input:focus::placeholder { color: inherit; } .fw-input_searchMain input::-webkit-input-placeholder, .fw-input_searchMain input:focus::-webkit-input-placeholder { color: inherit; } /* FF 4-18 */ .fw-input_searchMain input:-moz-placeholder, .fw-input_searchMain input:focus:-moz-placeholder { color: inherit; } /* FF 19+ */ .fw-input_searchMain input::-moz-placeholder, .fw-input_searchMain input:focus::-moz-placeholder { color: inherit; } /* IE 10+ */ .fw-input_searchMain input::-ms-input-placeholder, .fw-input_searchMain input:focus:-ms-input-placeholder { color: inherit; } .fw-input_search .fw-input-label-insideContent .fw-icon-cross { background-color: #ffffff; color: rgba(0, 0, 0, 0.87); font-size: 18px; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; } .fw-inputRange { } .fw-inputRange-inputs { display: flex; justify-content: space-between; gap: 24px; /*--gap: 24px;*/ /*margin: 0 calc(-0.5 * var(--gap));*/ } .fw-inputRange-inputs .fw-input { /*width: 50%;*/ flex-basis: 50%; flex-grow: 1; /*margin: 0 calc(0.5 * var(--gap));*/ } .fw-inputRange_60_40 .fw-input { /*width: 60%;*/ flex-basis: 60%; /*box-sizing: border-box;*/ } .fw-inputRange_60_40 .fw-input + .fw-input { /*width: 40%;*/ flex-basis: 40%; } .fw-inputRange_40_60 .fw-input { /*width: 40%;*/ flex-basis: 40%; /*box-sizing: border-box;*/ } .fw-inputRange_40_60 .fw-input + .fw-input { /*width: 60%;*/ flex-basis: 60%; } .fw-inputRange-hints { /*display: flex; justify-content: space-between;*/ } .fw-inputRange-hints-list { display: none; width: 100%; } .fw-inputRange-hints-list_min { text-align: left; } .fw-inputRange-hints-list_max { text-align: right; } .fw-inputRange-hints-item { line-height: 36px; cursor: pointer; } .fw-inputRange-inputs, .fw-inputRange-hints-item { padding: 0 8px; } .fw-inputRange-hints-item:hover { background-color: #9e9e9e; color: #ffffff; } .fw-list { padding: 8px 0; } .fw-list_2line { } .fw-list_multiLine { } .fw-list > li { padding: 0 16px; min-height: 48px; transition: background-color 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; display: flex; justify-content: space-between; align-items: center; } .fw-list > li.fw-list-item_separator { border-top: 1px solid rgba(0, 0, 0, 0.24); box-sizing: border-box; } .fw-list > li.fw-list-item_selected { background-color: rgba(0, 0, 0, 0.06); } .fw-list > li.fw-list-item_highlighted .fw-list-content-head { /*font-weight: bold;*/ font-weight: 500; } .fw-list > li:disabled, .fw-list > li[disabled] { filter: grayscale(1); cursor: default; opacity: 0.5; /*pointer-events: none;*/ /* если да, то не показываются хинты. это хуево. подсветка фона на ховере пусть остается */ } .fw-list-first { margin-right: 16px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; } .fw-list-content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Roboto, sans-serif; } .fw-list-content-head { color: rgba(0, 0, 0, 0.87); font-size: 16px; font-weight: normal; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .fw-list-content-desc { font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: rgba(0, 0, 0, 0.54); } .fw-list-last { margin-left: 16px; flex: 0 0 auto; } /*============== 2 line list ===================*/ .fw-list_2line > li + li, .fw-list_multiLine > li + li { border-top: 1px solid rgba(0, 0, 0, 0.12); box-sizing: border-box; } .fw-list_2line > li { min-height: 72px; } /*============== Multi line list ===================*/ .fw-list_multiLine > li { min-height: 88px; align-items: flex-start; } .fw-list_multiLine .fw-list-first, .fw-list_multiLine .fw-list-last { margin-top: 16px; } .fw-list_multiLine .fw-list-content { white-space: normal; margin: 16px 0; } .fw-list_multiLine .fw-list-content-desc { white-space: normal; overflow: visible; } /*li.fw-list_clickable - this for fw-listEdit not clickable type but with button add new item*/ .fw-list_clickable > li, li.fw-list_clickable { /*for ripple*/ overflow: hidden; position: relative; cursor: pointer; } /*============================= BEHAVIOR ====================================*/ .fw-list_clickable > li::before, li.fw-list_clickable::before { content: ""; display: block; position: absolute; width: 0; height: 0; top: 50%; left: 50%; padding: 0; /*fucking new google chrome bug in scale on animation*/ border-radius: 50%; background-color: rgba(153, 153, 153, 0.38); transform: translate(-50%, -50%) scale(0); } li.fw-list_ripple::before { padding: 60%; /*fucking new google chrome bug in scale on animation*/ pointer-events: none; /*im fix click on element, dont remove me plz*/ transition: transform 350ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; transform: translate(-50%, -50%) scale(1); } li.fw-list_rippleHide::before { padding: 60%; transform: translate(-50%, -50%) scale(1); transition: opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; opacity: 0; } .fw-list_clickable > li:hover, li.fw-list_clickable:hover { background-color: rgba(0, 0, 0, 0.12); } .fw-list_clickable .fw-button-body::before, .fw-list_clickable .fw-checkbox-icon span:before, .fw-list_clickable .fw-radio-icon span:before { display: none; } .fw-list_clickable .fw-button:hover:not([disabled]) .fw-button-body, .fw-list_clickable .fw-button:focus .fw-button-body { background-color: initial; } .fw-list li { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-radio { border-color: #4285f4; /*Google color*/ display: inline-block; padding: 5px; } .fw-radio-body { display: flex; flex-basis: 100%; align-items: center; border-color: inherit; } .fw-radio input { display: none; } .fw-radio-icon { cursor: pointer; flex-shrink: 0; position: relative; width: 20px; height: 20px; border-width: 2px; border-style: solid; border-color: inherit; border-radius: 50%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .fw-radio-icon span { display: flex; justify-content: center; align-items: center; width: 10px; height: 10px; border-radius: 50%; transition: background-color 200ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; background-color: transparent; } .fw-radio-icon span:before { content: ''; position: absolute; height: 0; width: 0; border-radius: 50%; background-color: rgba(153, 153, 153, 0.38); transform: scale(0); flex-shrink: 0; } .fw-radio_ripple .fw-radio-icon span:before { height: 48px; width: 48px; pointer-events: none; /*im fix click on element, dont remove me plz*/ transform: scale(1); transition: transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-radio :checked + .fw-radio-icon span { background-color: #4285f4; } .fw-radio :disabled { pointer-events: none !important; } .fw-radio :disabled + .fw-radio-icon { border-color: rgba(0, 0, 0, 0.38); } .fw-radio :checked:disabled + .fw-radio-icon span { background-color: rgba(0, 0, 0, 0.38); } .fw-radio :disabled + .fw-radio-icon, .fw-radio :disabled ~ .fw-radio-text { cursor: default; } .fw-radio :disabled + .fw-radio-icon span:before { display: none; } .fw-radio :disabled ~ .fw-radio-text { color: rgba(0, 0, 0, 0.38); } .fw-radio-icon + .fw-radio-text { padding-left: 8px; } .fw-radio-text { cursor:pointer; } .fw-radio_reverse .fw-radio-body { flex-direction: row-reverse; } .fw-radio_reverse .fw-radio-icon + .fw-radio-text { padding: 0 8px 0 0; } /*====================== not highlight element at touch on mobile */ .fw-radio-icon { -moz-user-select: none; -ms-user-select: none; user-select: none; } .fw-radio-icon, .fw-radio-text { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-searchField { } .fw-searchField-container { min-height: 64px; max-width: 350px; padding: 8px; box-sizing: border-box; } .fw-searchField-message { display: flex; justify-content: center; align-items: center; height: 64px; font-size: 1.2em; } .fw-searchField-container > .fw-waiting ins { width: 36px; height: 36px; } .fw-searchField-icon { font-size: 1.5em; } /** * Created by IntelliJ IDEA. * User: nehxby * Date: 07.03.18 * Time: 12:58 */ .fw-select { overflow: hidden; font-family: Roboto, sans-serif; font-size: 16px; position: relative; } .fw-select select { display: none; } .fw-select-box { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); font-size: 16px; font-family: Roboto, sans-serif; position: absolute; z-index: 15000; /* fw-dialog has 10000 and can contain selects*/ transform: scale(1); } .fw-select-input { box-sizing: border-box; cursor: pointer; font-size: inherit; line-height: 26px; padding-right: 24px; position: relative; width: 100%; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-select-input:disabled { cursor: default; } .fw-select-icon { width: 0; height: 0; position: absolute; border-width: 5px 5px 0 5px; border-color: #757575 transparent; border-style: solid; top: 50%; transform: translateY(-50%); right: 5px; z-index: 80; pointer-events: none; } .fw-select-list { background-color: #ffffff; max-height: 272px; overflow-y: auto; } .fw-select .fw-select-list { display: none; } .fw-select-listItem { display: flex; background-color: #ffffff; cursor: pointer; min-height: 48px; transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .fw-select-listItem:hover { background-color: rgba(0, 0, 0, 0.12); } .fw-select-listItem_selected { background-color: #f5f5f5; color: rgba(16, 108, 200, 0.87); } .fw-select-listGroupTitle + ul li{ padding-left: 16px; } .fw-select-listItemGroup { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .fw-select-listGroupTitle { position: sticky; top: 0; padding: 16px; background: #ffffff; text-transform: uppercase; color: rgba(0, 0, 0, .54); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 100; /*Потому что чеки и радио залазят на верх*/ } /*.fw-select-listItemGroup + .fw-select-listItem { border-top: 1px solid rgba(0, 0, 0, 0.12); }*/ .fw-select-listItem .fw-radio, .fw-select-listItem .fw-checkbox { display: flex; flex-basis: 100%; min-height: 48px; padding: 4px 16px; box-sizing: border-box; } .fw-select-listItem .fw-radio, .fw-select-listItem .fw-radio-body, .fw-select-listItem .fw-radio-icon, .fw-select-listItem .fw-radio-text, .fw-select-listItem .fw-checkbox, .fw-select-listItem .fw-checkbox-body, .fw-select-listItem .fw-checkbox-icon, .fw-select-listItem .fw-checkbox-text { cursor: inherit; } .fw-select-list .fw-radio-body { flex-direction: row-reverse; } .fw-select-list .fw-radio-text { flex: 1; } .fw-select-list:not(.fw-select-list_multiple) .fw-radio-icon + .fw-radio-text { padding: 0 8px 0 0; } .fw-select-list_multiple .fw-radio-body { flex-direction: row; } .fw-select-listItem_disabled { cursor: default; } .fw-select-listItem_disabled:not(.fw-select-listItem_selected):hover { background: none; } @media screen and (min-width: 668px) { .fw-select-list:not(.fw-select-list_multiple) .fw-radio-icon { display: none; } } .fw-selectSimple { display: inline-flex; align-items: center; vertical-align: middle; /*for correct empty caption*/ max-width: 100%; color: rgba(0, 0, 0, 0.87); cursor: pointer; } .fw-selectSimple_disabled { cursor: default; opacity: 0.5; pointer-events: none; } .fw-selectSimple-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fw-selectSimple > ins { font-size: 1.5em; transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1) 0s; } .fw-selectSimple.fw-selectSimple_opened > ins { transform: rotate(180deg); } .fw-selectSimple-select { display: none; } .fw-selectSimple-selected { background-color: #f5f5f5; } .fw-selectSimple-selected .fw-list-content-head { color: rgba(16, 108, 200, 0.87); }.fw-waiting { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 20000; /* see all z-index and make its higher */ } .fw-waiting-fogging { background-color: rgba(255, 255, 255, 0.38); height: 100%; width: 100%; } .fw-waiting_circle ins { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px;/*set in project*/ height: 64px;/*set in project*/ } .fw-waiting_circle svg { animation: 1600ms rotate 0s infinite linear; fill: #106cc8;/*set in project*/ } .fw-waiting_liner ins { position: absolute; display: block; left: 0; right: 0; top: 0; height: 4px; background-color: #106cc8; transform-origin: left top; transform: scaleX(0.95); animation: 10s line 0s 1 cubic-bezier(0.01, 0.36, 0.61, 0.98); } .fw-waiting_liner .fw-waiting-fogging { background-color: transparent; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes line { 0% { transform: scaleX(0); } 100% { transform: scaleX(0.95); } }