// @type: "fullscreen-form"; // @layout: "fullscreen"; // @pageLayout: "no-image"; // @position: "center"; // @offset: null; // @fontUrl: "https://fonts.googleapis.com/css?family=Sora:400,700,900&display=swap"; // @fontFamily: "Sora, \"Helvetica Neue\", Helvetica, Arial, sans-serif"; // @breakpoint: "960px"; // @theme: "bold"; // @colorMode: "light"; // @standalone: true; // @version: "2.7.0"; @import (css) url('https://fonts.googleapis.com/css?family=Sora:400,700,900&display=swap'); @breakpoint: 960px; @fontFamily: Sora, "Helvetica Neue", Helvetica, Arial, sans-serif; @desktopOffsetX: undefined; @desktopOffsetY: undefined; @mobileOffsetY: undefined; .buttons { flex-flow: column; } .back { right: 0; padding-right: 20px; } .close { display: none; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .tooltip { @ttBackground: @text; @ttText: @background; @ttOffset: calc(100% + 10px); display: block; position: absolute; width: max-content; max-width: 250px; white-space: normal; pointer-events: none; animation: fade-in 250ms linear both; padding: 4px 8px; line-height: (24 / 14); font-size: 14px; font-weight: normal; background: @ttBackground; color: @ttText; &:after { position: absolute; width: 0; height: 0; border: 4px solid transparent; content: ''; } &-top { bottom: @ttOffset; &, &:after { left: 50%; transform: translate3d(-50%, 0, 0); } &:after { top: 100%; border-top-color: @ttBackground; } } &-bottom { top: @ttOffset; &, &:after { left: 50%; transform: translate3d(-50%, 0, 0); } &:after { bottom: 100%; border-bottom-color: @ttBackground; } } &-left { right: @ttOffset; &, &:after { top: 50%; transform: translate3d(0, -50%, 0); } &:after { left: 100%; border-left-color: @ttBackground; } } &-right { left: @ttOffset; &, &:after { top: 50%; transform: translate3d(0, -50%, 0); } &:after { right: 100%; border-right-color: @ttBackground; } } } .notification { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; font-size: 18px; background-color: fade(@background, 70%); color: @text; animation: fade-in 250ms linear both; } #vars() { @shadowColor: rgba(54, 61, 77, 0.15); @inputBorder: contrast(@background, fade(@text, 10%), fade(@text, 30%)); @inputBorderActive: fade(@inputBorder, 90%); } .container { font-family: @fontFamily; font-size: 18px; line-height: (28 / 18); border-radius: 0; } .close, .back, .caret { &:before { opacity: .3; width: 24px; height: 24px; } &:hover:before { opacity: 1; } } .close { @close: escape(''); @closeHover: escape(''); &:before { background-image: url('data:image/svg+xml;utf8,@{close}'); } &:hover:before { transform: none; background-image: url('data:image/svg+xml;utf8,@{closeHover}'); } } .back { @back: escape(''); @backHover: escape(''); &:before { background-image: url('data:image/svg+xml;utf8,@{back}'); } &:hover:before { background-image: url('data:image/svg+xml;utf8,@{backHover}'); } } .caret { @caret: escape(''); @caretHover: escape(''); padding-right: 16px; &:before { transition: opacity 200ms; background-image: url('data:image/svg+xml;utf8,@{caret}'); } &:hover:before { transform: none; background-image: url('data:image/svg+xml;utf8,@{caretHover}'); } &.collapsed:hover:before { transform: rotate(180deg); } } .title { font-weight: 900; font-size: 24px; line-height: (32 / 24); margin-bottom: 24px; @media (min-width: @breakpoint) { font-size: 32px; line-height: (40 / 32); } } .description { line-height: inherit; margin: 0 0 24px; } .form { .no-fields & { margin-top: 8px; } } .fields { margin-bottom: 32px; } .field + .field { margin: 24px 0 0 0; } .field-title { margin: 0 0 12px; .radio &, .checkbox & { margin: 0 0 16px; } } .field-title { line-height: inherit; } .buttons { @gap: 8px; margin: -@gap; .button { margin: @gap; padding: 11px 32px; font-weight: 900; line-height: (28 / 18); border-radius: 0; border: none; } } .button.primary, .button.primary.icon { border: 3px solid @button; background-color: transparent; &:hover, &:focus { background-color: @button; color: @background; } } .button.normal, .button.normal.icon { border: 3px solid fade(@text, 30%); background-color: transparent; color: fade(@text, 30%); &:hover, &:focus { color: @text; border-color: @text; } } .button.primary.icon, .button.normal.icon { svg { width: 24px; height: 28px; } } .button.secondary, .button.secondary.icon { padding: 0; background-color: transparent; color: fade(@text, 30%); &:hover, &:focus { background-color: transparent; color: @text; } } .input-text, .input-textarea, .input-select { border: none; border-bottom: solid 3px #vars[@inputBorder]; border-radius: 0; background-color: transparent; font-size: 18px; line-height: (28 / 18); &::placeholder { color: fade(@text, 30%); } &:hover, &:focus { border-color: #vars[@inputBorderActive]; } } .input-text, .input-textarea { &.filled { border-color: #vars[@inputBorderActive]; } } .input-text { padding: 0 0 11px 0; } .input-textarea { padding: 0; height: 99px; } .input-select { @caret: escape(''); select { padding: 0 24px 11px 0; line-height: inherit; } &:after { top: 10px; transform: none; right: 0; background-image: url('data:image/svg+xml;utf8,@{caret}'); } &:focus-within, &.selected { border-color: #vars[@inputBorderActive]; &:after { opacity: 1; } } } .flag, .radio, .checkbox { } .input-check label { margin-bottom: 20px; span { padding-left: 38px; &:before { width: 24px; height: 24px; top: 0; } } input[type='radio'], input[type='checkbox'] { + span:before { background-color: transparent; border: 3px solid #vars[@inputBorder]; } + span:after { left: 4px; } &:checked { + span:before { border-color: #vars[@inputBorderActive]; } + span:after { left: 4px; } } } input[type='checkbox'] + span:before { border-radius: 0; } &:hover, &:focus { input[type='radio'], input[type='checkbox'] { + span:before { border-color: #vars[@inputBorderActive]; } } } } .input-rating label { width: 38px; height: 32px; padding: 0 8px 0 2px; svg { stroke-width: 3; overflow: visible; } } .note { font-size: 14px; line-height: (22 / 14); margin: 32px 0 0; color: fade(@text, 30%); } @amplitude: 10px; @keyframes shake { 100% { transform: none; } 0%, 99% { transform: translate(0, 0); } 20% { transform: translateX(-@amplitude); } 60% { transform: translateX( (-@amplitude/2) ); } 40% { transform: translateX(@amplitude); } 80% { transform: translateX( (@amplitude/2) ); } } @animationValidate: shake 600ms; .form.submit .invalid { animation: @animationValidate; } #vars() { @circle-radius: 24; @circle-length: 2 * 3.14 * @circle-radius; @check-length: 36; } @keyframes sent-backdrop { 0%, 100% { opacity: 0; background-color: rgba(@background, 0); } 50%, 75% { opacity: 0.6; background-color: rgba(@background, 1); } } @keyframes success-icon-scale { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } } @keyframes success-icon-show-path { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes success-icon-draw-circle { 0% { opacity: 1; stroke-dashoffset: #vars[@circle-length]; } 25% { opacity: 1; stroke-dashoffset: #vars[@circle-length] * 0.5; } 50% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } @keyframes success-icon-draw-check { 0% { opacity: 1; stroke-dashoffset: #vars[@check-length]; } 25% { opacity: 1; stroke-dashoffset: #vars[@check-length] * 0.5; } 50% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } } .root.form-sending { .content { &:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; animation: sent-backdrop 2s both; } .success-icon { display: block; width: 100%; height: 100%; animation: success-icon-scale 1.8s linear both; path { animation: success-icon-show-path 1.2s linear both; } circle { animation: success-icon-draw-circle 1.2s linear both; } polyline { animation: success-icon-draw-check 1.2s linear both; } } } }