Created
December 26, 2017 02:48
-
-
Save gusmantap/4087a0e2e42bc4b6cde9ac4a28dffd3b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin importfont($name, $url) { | |
| @font-face { | |
| font-family: $name; | |
| src: url($url) format('truetype'); | |
| /* Safari, Android, iOS */ | |
| } | |
| } | |
| @mixin objectInOut { | |
| opacity: 1; | |
| transform: scale(1); | |
| &.out { | |
| transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| opacity: 0; | |
| transform: scale(0); | |
| } | |
| } | |
| @include importfont('Allura-Regular', "../fonts/Allura-Regular.ttf"); | |
| .resize-logo { | |
| z-index: 600; | |
| position: absolute; | |
| bottom: 10px; | |
| left: -10px; | |
| transition: all .2s ease-in-out; | |
| transform: scale(0); | |
| &.active { | |
| transform: scale(1); | |
| } | |
| .logo-resize { | |
| cursor: move; | |
| text-align: center; | |
| top: 0; | |
| background: #000; | |
| color: #fff; | |
| padding: 0px 5px; | |
| font-size: 18px; | |
| display: block; | |
| line-height: 28px; | |
| height: 27px; | |
| width: 27px; | |
| border-radius: 100%; | |
| position: absolute; | |
| transform: scale(0) translate(0%, 0%); | |
| transition: all .2s ease-out; | |
| transform: rotate(0deg); | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836; | |
| } | |
| } | |
| } | |
| .button-color { | |
| width: 0px; | |
| height: 0px; | |
| background: #111; | |
| position: absolute; | |
| z-index: 1000; | |
| .wrapper-color { | |
| overflow: visible; | |
| .random-lock, | |
| .select-lock { | |
| text-align: center; | |
| text-align: center; | |
| top: 0; | |
| right: -50px; | |
| color: #949993; | |
| padding: 0 5px; | |
| font-size: 21px; | |
| display: block; | |
| line-height: 35px; | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 100%; | |
| position: absolute; | |
| display: none; | |
| .logo-random-lock { | |
| svg { | |
| width: 17px; | |
| height: 17px; | |
| fill: #949993; | |
| } | |
| } | |
| } | |
| .random-lock { | |
| z-index: 1000; | |
| transform: scale(1) translate(255%, 350%); | |
| } | |
| .select-lock { | |
| z-index: 900; | |
| transform: scale(1) translate(110%, 350%); | |
| } | |
| a { | |
| text-align: center; | |
| text-align: center; | |
| top: 0; | |
| right: -50px; | |
| color: #607D8B; | |
| padding: 0 5px; | |
| font-size: 21px; | |
| display: block; | |
| line-height: 35px; | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 100%; | |
| position: absolute; | |
| &:hover, | |
| &:focus { | |
| color: #419BF9; | |
| transition: all .2s ease; | |
| } | |
| &.logo-random { | |
| svg { | |
| width: 17px; | |
| height: 17px; | |
| fill: #607D8B; | |
| &.rotate { | |
| animation: rotateDice 1s linear infinite; | |
| } | |
| &:hover { | |
| fill: #419BF9; | |
| transition: all .2s ease; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .wrapper-color { | |
| a { | |
| // transform:scale(1); | |
| &.logo-lock { | |
| z-index: 1000; // transition: all .2s ease-out; | |
| transform: scale(1) translate(400%, 350%); | |
| span { | |
| &.unlock-logo { | |
| display: block; | |
| } | |
| &.lock-logo { | |
| display: none; | |
| } | |
| } | |
| } | |
| &.logo-random { | |
| z-index: 900; // transition: all .2s ease-out .1s; | |
| transform: scale(1) translate(255%, 350%); | |
| } | |
| &.logo-select { | |
| z-index: 800; // transition: all .2s ease-out .12s; | |
| transform: scale(1) translate(110%, 350%); | |
| } | |
| } | |
| } | |
| } | |
| .button-illustration { | |
| width: 0px; | |
| height: 0px; | |
| background: #111; | |
| position: absolute; | |
| z-index: 1000; | |
| margin-top: 45px; | |
| .wrapper-illustration { | |
| overflow: visible; | |
| .random-lock, | |
| .select-lock { | |
| text-align: center; | |
| text-align: center; | |
| top: 0; | |
| right: -50px; | |
| color: #949993; | |
| padding: 0 5px; | |
| font-size: 21px; | |
| display: block; | |
| line-height: 35px; | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 100%; | |
| position: absolute; | |
| display: none; | |
| .logo-random-lock { | |
| svg { | |
| width: 17px; | |
| height: 17px; | |
| fill: #949993; | |
| } | |
| } | |
| } | |
| .random-lock { | |
| z-index: 1500; | |
| transform: scale(1) translate(255%, -255%); | |
| } | |
| .select-lock { | |
| z-index: 1600; | |
| transform: scale(1) translate(110%, -255%); | |
| } | |
| a { | |
| text-align: center; | |
| text-align: center; | |
| top: 0; | |
| right: -50px; | |
| color: #607D8B; | |
| padding: 0 5px; | |
| font-size: 21px; | |
| display: block; | |
| line-height: 35px; | |
| height: 35px; | |
| width: 35px; | |
| border-radius: 100%; | |
| position: absolute; | |
| &:hover, | |
| &:focus { | |
| color: #419BF9; | |
| transition: all .2s ease; | |
| } | |
| &.logo-random { | |
| svg { | |
| width: 17px; | |
| height: 17px; | |
| fill: #607D8B; | |
| &.rotate { | |
| animation: rotateDice 1s linear infinite; | |
| } | |
| &:hover { | |
| fill: #419BF9; | |
| transition: all .2s ease; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .wrapper-illustration { | |
| a { | |
| // transform:scale(1); | |
| &.logo-lock { | |
| z-index: 1000; // transition: all .2s ease-out; | |
| transform: scale(1) translate(400%, -255%); | |
| span { | |
| &.unlock-logo { | |
| display: block; | |
| } | |
| &.lock-logo { | |
| display: none; | |
| } | |
| } | |
| } | |
| &.logo-random { | |
| z-index: 900; // transition: all .2s ease-out .1s; | |
| transform: scale(1) translate(255%, -255%); | |
| } | |
| &.logo-select { | |
| z-index: 800; // transition: all .2s ease-out .12s; | |
| transform: scale(1) translate(110%, -255%); | |
| } | |
| } | |
| } | |
| &.locked { | |
| .wrapper-illustration { | |
| a { | |
| &.logo-lock { | |
| // background: #60D836!important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .button-option { | |
| width: 0px; | |
| height: 0px; | |
| background: #111; | |
| position: absolute; | |
| z-index: 1000; | |
| &.background { | |
| top: -40px; | |
| left: 19px; | |
| &.open { | |
| .wrapper { | |
| a { | |
| &.logo-random { | |
| transform: scale(1) translate(-14%, -106%); | |
| } | |
| &.logo-setting { | |
| transform: scale(1) translate(120%, -72%); | |
| } | |
| &.logo-select { | |
| transform: scale(1) translate(89%, -67%); | |
| } | |
| &.logo-hide { | |
| transform: scale(1) translate(114%, 33%); | |
| transform: scale(1) translate(104%, 39%); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.color { | |
| top: 82px; | |
| right: 0px; | |
| a { | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836!important; | |
| } | |
| i { | |
| color: #fff!important; | |
| } | |
| } | |
| } | |
| &.logo { | |
| top: -16px; | |
| right: 27px; | |
| } | |
| &.text-business-name { | |
| top: -30px; | |
| right: 20px; | |
| } | |
| &.text-business-tagline { | |
| top: -30px; | |
| right: 20px; | |
| } | |
| &.open { | |
| &.locked { | |
| .wrapper { | |
| a { | |
| transition: all .2s ease-out!important; | |
| transform: scale(0.1) translate(0%, 0%)!important; | |
| &.logo-lock { | |
| transform: scale(1) translate(0%, 0%)!important; | |
| background: #60D836!important; | |
| } | |
| } | |
| } | |
| } | |
| .wrapper { | |
| a { | |
| // transform:scale(1); | |
| &.logo-lock { | |
| z-index: 1000; | |
| transition: all .2s ease-out; | |
| transform: scale(1) translate(0%, 0%); | |
| span { | |
| &.unlock-logo { | |
| display: block; | |
| } | |
| &.lock-logo { | |
| display: none; | |
| } | |
| } | |
| } | |
| &.logo-random { | |
| z-index: 900; | |
| transition: all .2s ease-out .1s; | |
| transform: scale(1) translate(96%, -55%); | |
| } | |
| &.logo-setting { | |
| z-index: 800; | |
| transition: all .2s ease-out .12s; | |
| transform: scale(1) translate(155%, 0%); | |
| } | |
| &.logo-select { | |
| z-index: 700; | |
| transition: all .2s ease-out .13s; | |
| transform: scale(1) translate(100%, 62%); | |
| } | |
| &.logo-hide { | |
| transition: all .2s ease-out .14s; | |
| } | |
| &.logo-resize { | |
| z-index: 600; | |
| margin-top: 200px; | |
| transition: all .2s ease-out .12s; | |
| transform: scale(1) translate(155%, 0%); | |
| } | |
| } | |
| } | |
| } | |
| .wrapper { | |
| overflow: visible; | |
| a { | |
| text-align: center; | |
| top: 0; | |
| right: -50px; | |
| background: #419BF9; | |
| color: #fff; | |
| padding: 0 10px; | |
| font-size: 25px; | |
| display: block; | |
| line-height: 45px; | |
| height: 45px; | |
| width: 45px; | |
| border-radius: 100%; | |
| position: absolute; | |
| transform: scale(0) translate(0%, 0%); | |
| transition: all .2s ease-out; | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836; | |
| } | |
| &.logo-random { | |
| svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: #fff; | |
| &.rotate { | |
| animation: rotateDice 1s linear infinite; | |
| } | |
| } | |
| } | |
| &.logo-lock { | |
| svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: #fff; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @mixin edit-mode { | |
| border: 1px dashed transparent; | |
| &>* { | |
| user-select: none; | |
| } | |
| &:hover { | |
| border: 1px dashed #ccc!important; | |
| } | |
| &.edit { | |
| border: 1px dashed #238EF8!important; | |
| } | |
| } | |
| // .logo-section, | |
| .business-name-section, | |
| .business-tagline-section { | |
| @include edit-mode; | |
| } | |
| #mon-logo { | |
| font-family: 'Roboto', sans-serif; | |
| .box { | |
| border: none; | |
| .box-header { | |
| padding: 28px 40px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid #eee; | |
| h3.title-header { | |
| font-size: 18px; | |
| margin: 0; | |
| font-weight: bold; | |
| img.icon { | |
| width: 18px; | |
| position: relative; | |
| top: -2px; | |
| margin-right: 16px; | |
| } | |
| } | |
| } | |
| .box-body { | |
| padding: 0; | |
| #welcome { | |
| // position: absolute; | |
| // top: 0; | |
| // left: 0; | |
| // bottom: 0; | |
| // right: 0; | |
| text-align: left; | |
| display: block; | |
| z-index: 60; | |
| overflow: hidden; | |
| background-image: url("../assets/background/intro.gif"); | |
| background-color: #F9FAFB; | |
| box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, 0.1); | |
| background-position: center bottom; | |
| background-repeat: no-repeat; | |
| background-size: 100% auto; | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| .wrap { | |
| width: 40%; | |
| margin: auto; | |
| margin-top: 5%; | |
| margin-bottom: 12%; | |
| @include big-desktop-up { | |
| // margin-top:60px; | |
| } | |
| .close { | |
| text-align: right; | |
| i { | |
| position: relative; | |
| right: 18px; | |
| top: 13px; | |
| font-size: 20px; | |
| color: #a4a4a4; | |
| } | |
| } | |
| .wrap-logo { | |
| img { | |
| margin: auto; | |
| display: block; | |
| position: relative; | |
| width: 22%; | |
| } | |
| } | |
| .wrap-text { | |
| .text { | |
| padding: 25px 75px; | |
| font-family: 'Roboto', sans-serif; | |
| color: #4a4a4a; | |
| @include desktop-up { | |
| padding: 22px 57px; | |
| } | |
| @include medium-desktop-up { | |
| padding: 30px 90px; | |
| } | |
| @include big-desktop-up { | |
| padding: 55px 140px; | |
| } | |
| h2 { | |
| font-size: 16px; | |
| font-weight: 700; | |
| @include desktop-up { | |
| font-size: 20px; | |
| } | |
| @include big-desktop-up { | |
| font-size: 25px; | |
| } | |
| } | |
| #btn-popup-import { | |
| display: block; | |
| width: 77%; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| margin: 15px auto; | |
| background: #09d56f; | |
| color: #fff; | |
| font-weight: 600; | |
| } | |
| p { | |
| font-size: 12px; | |
| line-height: 150%; | |
| @include desktop-up { | |
| font-size: 14px; | |
| } | |
| @include big-desktop-up { | |
| font-size: 16px; | |
| line-height: 160%; | |
| } | |
| } | |
| .random { | |
| cursor: pointer; | |
| &.animate { | |
| a { | |
| svg { | |
| animation: rotateDice 2s; | |
| } | |
| } | |
| } | |
| a { | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 10%; | |
| border-radius: 100%; | |
| height: 70px; | |
| width: 70px; | |
| display: block; | |
| display: flex; | |
| border-radius: 100%; | |
| align-items: center; | |
| background: #fff; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| color: #2689EA; | |
| transition: all .1s ease-out; | |
| border: 3px solid #fff; | |
| svg { | |
| display: block; | |
| width: 53%; | |
| height: 53%; | |
| margin: auto; | |
| fill: #2689EA; | |
| } | |
| &:hover { | |
| background: #2689EA; | |
| svg { | |
| fill: #fff; | |
| transform: scale(1.2); | |
| transition: .4s ease-in-out; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #logo-editor { | |
| padding: 0; | |
| z-index: 50; | |
| .row { | |
| margin: 0; | |
| position: relative; | |
| &#editor-section { | |
| .btn-change-position, | |
| #license, | |
| #main-color { | |
| opacity: 0; | |
| transition: all .2s ease; | |
| } | |
| } | |
| .illustration-section { | |
| position: absolute; | |
| z-index: 0; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-position: center bottom!important; | |
| background-size: 100% auto!important; | |
| background-repeat: no-repeat!important; | |
| opacity: 1; | |
| transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| overflow: hidden; // border-bottom: 1px solid #eee; | |
| &.out { | |
| opacity: 0; | |
| } | |
| } | |
| } // padding: 0 42px; | |
| } | |
| } | |
| } | |
| #side-left { | |
| position: relative; | |
| #confirm-premium { | |
| // margin-bottom: 80px; | |
| &:hover { | |
| span.title { | |
| font-size: 11px; | |
| color: #666; | |
| transition: all .3s ease-out; | |
| } | |
| } | |
| &:after { | |
| display: none; | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(255, 255, 255, 0.6); | |
| } | |
| .wrap-contours { | |
| border-bottom: solid 2px #F4F4F4; | |
| margin-top: 10px; | |
| } | |
| .wrap-defond { | |
| border-bottom: solid 2px #F4F4F4; | |
| } | |
| .wrap-style { | |
| .wrap-icon-style { | |
| ul { | |
| text-align: center; | |
| padding: 0; | |
| li { | |
| list-style: none; | |
| display: inline-block; | |
| width: 100% / 3; | |
| text-align: center; | |
| &.clear-style { | |
| &.active { | |
| svg { | |
| .cls-2 { | |
| fill: #03a9f4; | |
| } | |
| } | |
| } | |
| a { | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| .cls-1 { | |
| fill: transparent; | |
| } | |
| .cls-2 { | |
| fill: #607D8B; | |
| &:hover { | |
| fill: #03a9f4; | |
| transition: all .2s ease; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.box-style { | |
| &.active { | |
| svg { | |
| fill: #03a9f4; | |
| } | |
| } | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| fill: #607D8B; | |
| &:hover { | |
| fill: #03a9f4; | |
| transition: all .2s ease; | |
| } | |
| .cls-2 { | |
| fill: #fff; | |
| } | |
| } | |
| } | |
| &.round-style { | |
| &.active { | |
| svg { | |
| fill: #03a9f4; | |
| } | |
| } | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| fill: #607D8B; | |
| &:hover { | |
| fill: #03a9f4; | |
| transition: all .2s ease; | |
| } | |
| .cls-2 { | |
| fill: #fff; | |
| } | |
| } | |
| } | |
| a { | |
| display: block; | |
| margin: 0 12px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| span.title { | |
| font-size: 11px; | |
| color: #a8a8a8; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| label.input-check { | |
| input { | |
| display: none; | |
| &:checked+span:before { | |
| content: '\f374'; | |
| } | |
| &+span:before { | |
| cursor: pointer; | |
| color: #419BF9; | |
| font-size: 24px; | |
| font-family: 'Ionicons'; | |
| content: "\f371"; | |
| float: left; | |
| display: inline-block; | |
| } | |
| } | |
| span.text { | |
| display: inline-block; | |
| float: left; | |
| font-weight: 400; | |
| user-select: none; | |
| margin-left: 10px; | |
| font-size: 11px; | |
| color: #a8a8a8; | |
| } | |
| } | |
| } | |
| #logo-type { | |
| opacity: 0; | |
| width: 240px; | |
| height: 53%; | |
| position: absolute; | |
| top: 45px; | |
| left: 50px; | |
| border-radius: 3px; | |
| background-color: white; | |
| box-shadow: 0px 0px 30px -8px rgba(0, 0, 0, 0.75); | |
| .header-logo-type { | |
| border-bottom: solid 2px #F4F4F4; | |
| width: 100%; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0px 25px; | |
| i { | |
| width: 30px; | |
| height: 30px; | |
| margin-right: 12px; | |
| } | |
| span { | |
| font-weight: 800; | |
| } | |
| } | |
| .body-logo-type { | |
| display: block; | |
| a { | |
| display: flex; | |
| align-items: center; | |
| width: 70%; | |
| height: 40px; | |
| background-color: #fff; | |
| border-radius: 5px; | |
| margin: auto; | |
| margin-top: 17px; | |
| box-shadow: 0px 0px 30px -8px rgba(0, 0, 0, 0.75); | |
| &:hover { | |
| color: #1F8EFA; | |
| border: 2px solid #1F8EFA; | |
| fill: #1F8EFA; | |
| &svg { | |
| &.st0 { | |
| fill: #1F8EFA; | |
| } | |
| } | |
| } | |
| i { | |
| width: 35px; | |
| height: 100%; | |
| margin-left: 5px; | |
| margin-right: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-right: solid 2px #F4F4F4; | |
| svg { | |
| width: 25px; | |
| height: 25px; | |
| fill: #1F8EFA; | |
| margin-right: 5px; | |
| .st0 { | |
| fill: #607D8B; | |
| } | |
| } | |
| } | |
| } | |
| .logo-sample-icon { | |
| color: #1F8EFA; | |
| border: 2px solid #1F8EFA; | |
| } | |
| } | |
| .main-color-body { | |
| padding: 0px 0; | |
| width: $widthMainColor; | |
| position: relative; | |
| top: 10px; | |
| height: 160px; | |
| border-bottom: solid 2px #F4F4F4; | |
| @include clearfix; | |
| ul.color-group { | |
| list-style: none; | |
| padding: 0; | |
| &#color-scheme { | |
| width: 59%; | |
| display: block; | |
| float: right; | |
| .logo-color { | |
| height: 37px; | |
| li { | |
| display: inline-block; | |
| } | |
| } | |
| .text-color { | |
| width: auto; | |
| } | |
| li.color-item { | |
| // width: 58px; | |
| margin: 10px 0; | |
| margin-right: 0; | |
| transition: all .3s ease; | |
| border: 1px dashed transparent; | |
| @include clearfix; | |
| &:hover { | |
| .handle { | |
| opacity: 1; | |
| } | |
| } | |
| &.sortable-chosen { | |
| border: 1px dashed #ccc; | |
| &.ghost { | |
| opacity: 0.5; | |
| background: #efefef; | |
| border: 1px dashed #D49D0A!important; | |
| } | |
| } | |
| .color-preview { | |
| float: left; | |
| width: 23px; | |
| margin-right: 2px; | |
| .preview-color-show { | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| border: 1.5px solid #fff; | |
| width: 25px; | |
| height: 25px; | |
| display: block; | |
| background: #ccc; | |
| border-radius: 100%; | |
| } | |
| } | |
| ul { | |
| padding: 0; | |
| list-style: none; | |
| user-select: none; | |
| li { | |
| margin: 10px 0; | |
| display: block; | |
| .text-title { | |
| display: block; | |
| font-size: 11px; | |
| color: #a8a8a8; | |
| } | |
| .text-description, | |
| .text-credits { | |
| margin-top: -3px; | |
| display: block; | |
| font-size: 12px; | |
| color: #555; | |
| font-weight: 500; | |
| } | |
| .text-link { | |
| a { | |
| display: block; | |
| font-size: 11px; | |
| color: #a8a8a8; | |
| margin-bottom: 14px; | |
| &:hover { | |
| color: #333; | |
| } | |
| } | |
| } | |
| } | |
| .credits { | |
| padding: 5px 25px; | |
| border-bottom: solid 2px #F4F4F4; | |
| display: flex; | |
| margin-bottom: 20px; | |
| i { | |
| font-size: 23px; | |
| color: #148BF6; | |
| } | |
| .text-title { | |
| display: inline-block; | |
| font-weight: 800; | |
| font-size: 13px; | |
| line-height: 34px; | |
| margin-left: 12px; | |
| color: #000; | |
| } | |
| } | |
| .text-icon-by, | |
| .text-illustration-by, | |
| .text-typografi-by { | |
| padding: 0px 25px; | |
| } | |
| .contact { | |
| display: inline-block; | |
| padding: 5px 25px; | |
| border-top: solid 2px #F4F4F4; | |
| display: flex; | |
| margin-top: 20px; | |
| i { | |
| font-size: 23px; | |
| color: #148BF6; | |
| } | |
| .text-title { | |
| color: #148BF6; | |
| line-height: 35px; | |
| margin-left: 12px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #canvas-editor { | |
| position: relative; | |
| padding-left: 0; | |
| padding-right: 0; | |
| overflow: hidden; | |
| margin-bottom: 5%; | |
| .wrap-disposition { | |
| width: 100%; | |
| margin-top: 8%; | |
| opacity: 0; | |
| transition: all .2s ease; | |
| .disposition { | |
| width: 40%; | |
| height: 45px; | |
| margin: auto; | |
| background-color: transparent; | |
| box-shadow: 0px 0px 30px -8px rgba(0, 0, 0, 0.75); | |
| display: flex; | |
| justify-content: center; | |
| .logo { | |
| height: 100%; | |
| width: 25%; | |
| padding: 6% 8%; | |
| display: inline-block; | |
| background-color: white; | |
| svg { | |
| fill: #03a9f4; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| } | |
| .logo-onleft, | |
| .logo-onright { | |
| padding: 1% 3%; | |
| svg { | |
| fill: #03a9f4; | |
| width: 40px; | |
| height: 40px; | |
| } | |
| } | |
| .logo-onleft { | |
| border-right: solid 2px #F4F4F4; | |
| border-left: solid 2px #F4F4F4; | |
| } | |
| .logo-onright { | |
| border-right: solid 2px #F4F4F4; | |
| } | |
| } | |
| } | |
| .preview { | |
| position: relative; | |
| text-align: center; | |
| @include clearfix; | |
| .item { | |
| position: relative; | |
| line-height: 1; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .btn-change-position { | |
| z-index: 4; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| opacity: 0; | |
| .btn-change-background { | |
| padding: 0; | |
| display: block; | |
| position: relative; | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| &:hover { | |
| // box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); | |
| span.icon { | |
| border: 1px solid #fff; | |
| border-right: none; | |
| background: rgba(#111, 0.8); | |
| transition: all .1s ease-out; | |
| i { | |
| transition: all .1s ease-out; | |
| color: #fff; | |
| } | |
| } | |
| } | |
| span.icon { | |
| border: 1px solid #ccc; | |
| background: rgba(#fff, 0.6); | |
| height: 25px; | |
| width: 30px; | |
| float: left; | |
| line-height: 25px; | |
| border-radius: 3px; | |
| transition: all .1s ease-out; | |
| i { | |
| transition: all .1s ease-out; | |
| display: block; | |
| font-size: 15px; | |
| color: #666; | |
| padding-left: 5px; | |
| padding-right: 5px; | |
| } | |
| } | |
| } | |
| } | |
| #checkIllustration { | |
| display: inline-block; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 46px; | |
| z-index: 99; | |
| input[type='checkbox'] { | |
| &+span:after { | |
| content: "\f371"; | |
| font-family: "Ionicons"; | |
| } | |
| &+span:checked:after { | |
| content: '\f373'; | |
| } | |
| } | |
| } | |
| .ads-section { | |
| background: rgba(#fff, 0.9); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| text-align: center; | |
| display: none; | |
| z-index: 10; | |
| overflow: hidden; | |
| a { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| span.text { | |
| bottom: 15%; | |
| position: absolute; | |
| display: block; | |
| width: 100%; | |
| font-size: 12px; | |
| text-align: center; | |
| color: #999; | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 300; | |
| } | |
| img { | |
| max-width: 500px; | |
| margin: auto; | |
| display: block; | |
| } | |
| } | |
| &.show { | |
| display: block!important; | |
| } | |
| } | |
| .animatedInOut { | |
| transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| } | |
| .logo-section { | |
| display: inline-block; | |
| position: relative; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| z-index: 6; | |
| .static { | |
| width: 100%; | |
| height: 100%; | |
| @include edit-mode; | |
| .logo.svg-wrapper { | |
| align-items: center; | |
| display: flex; | |
| @include objectInOut; | |
| svg { | |
| display: block; | |
| width: auto; | |
| height: 100%; | |
| margin: auto; | |
| } | |
| .rotate-logo { | |
| z-index: 600; | |
| position: absolute; | |
| top: -15px; | |
| left: -15px; | |
| transition: all .2s ease-in-out; | |
| transform: scale(0); | |
| &.active { | |
| transform: scale(1); | |
| } | |
| a { | |
| cursor: move; | |
| text-align: center; | |
| background: #000; | |
| color: #fff; | |
| padding: 0px 5px; | |
| font-size: 18px; | |
| display: block; | |
| line-height: 28px; | |
| height: 27px; | |
| width: 27px; | |
| border-radius: 100%; | |
| position: absolute; | |
| transform: scale(0) translate(0%, 0%); | |
| transition: all .2s ease-out; | |
| transform: rotate(0deg); | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836; | |
| } | |
| img { | |
| position: relative; | |
| top: -2px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .business-name-section { | |
| position: relative; | |
| display: inline-block; | |
| z-index: 5; | |
| max-width: 70%; // .resize-business-name { | |
| // z-index: 600; | |
| // position: absolute; | |
| // transition: all .2s ease-in-out; | |
| // left: -36px; | |
| // top: -2px; | |
| // transform: scale(0); | |
| // &.active { | |
| // transform: scale(1); | |
| // } | |
| // .add, | |
| // .min { | |
| // position: relative; | |
| // margin: 2px 0; | |
| // a { | |
| // cursor:pointer; | |
| // text-align: center; | |
| // background: #419BF9; | |
| // color: #fff; | |
| // padding: 1px 6px; | |
| // font-size: 15px; | |
| // display: block; | |
| // line-height: 25px; | |
| // width: 25px; | |
| // height: 25px; | |
| // border-radius: 100%; | |
| // } | |
| // } | |
| // } | |
| .business-name { | |
| font-family: 'Roboto'; | |
| font-size: 26px; | |
| color: #ebc859; | |
| cursor: pointer; | |
| display: inline-block; | |
| @include objectInOut; | |
| &.animatedInOut { | |
| span { | |
| transition: all .8s ease; | |
| } | |
| } | |
| .resize-business-name { | |
| position: absolute; | |
| bottom: 15px; | |
| left: -15px; | |
| transform: scale(0); | |
| transition: all .2s ease-in-out; | |
| z-index: 10; | |
| &.active { | |
| transform: scale(1); | |
| } | |
| a { | |
| cursor: move; | |
| text-align: center; | |
| z-index: 1; | |
| background: #000; | |
| color: #fff; | |
| padding: 0px 5px; | |
| font-size: 18px; | |
| display: block; | |
| line-height: 28px; | |
| height: 27px; | |
| width: 27px; | |
| border-radius: 100%; | |
| position: absolute; | |
| transform: scale(0) translate(0%, 0%); | |
| transition: all .2s ease-out; | |
| transform: rotate(0deg); | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836; | |
| } | |
| } | |
| } | |
| span { | |
| display: block; | |
| transform: translateX(0%); | |
| opacity: 1; | |
| font-family: inherit!important; | |
| } | |
| &.beforeOut { | |
| span { | |
| &.line-1 { | |
| transform: translateX(-40%); | |
| opacity: 0; | |
| } | |
| &.line-2 { | |
| transform: translateX(40%); | |
| opacity: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .business-category { | |
| margin: 8px 0; | |
| display: inline-block; | |
| font-weight: 500; | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| .business-tagline-section { | |
| position: relative; | |
| display: inline-block; | |
| bottom: -3%; | |
| z-index: 5; | |
| max-width: 70%; | |
| .resize-tagline { | |
| position: absolute; | |
| bottom: 15px; | |
| left: -15px; | |
| transform: scale(0); | |
| transition: all .2s ease-in-out; | |
| z-index: 10; | |
| &.active { | |
| transform: scale(1); | |
| } | |
| a { | |
| cursor: move; | |
| text-align: center; | |
| z-index: 1; | |
| background: #000; | |
| color: #fff; | |
| padding: 0px 5px; | |
| font-size: 18px; | |
| display: block; | |
| line-height: 28px; | |
| height: 27px; | |
| width: 27px; | |
| border-radius: 100%; | |
| position: absolute; | |
| transform: scale(0) translate(0%, 0%); | |
| transition: all .2s ease-out; | |
| transform: rotate(0deg); | |
| &:hover { | |
| transition: all .1s ease-out; | |
| background: #60D836; | |
| } | |
| } | |
| } // .resize-tagline { | |
| // z-index: 600; | |
| // position: absolute; | |
| // transition: all .4s ease-in-out; | |
| // top: -13px; | |
| // left: -30px; | |
| // transform: scale(0); | |
| // &.active { | |
| // transform: scale(1); | |
| // } | |
| // .add, | |
| // .min { | |
| // position: relative; | |
| // margin: 2px 0; | |
| // a { | |
| // text-align: center; | |
| // background: #419BF9; | |
| // color: #fff; | |
| // padding: 1px 6px; | |
| // font-size: 15px; | |
| // display: block; | |
| // line-height: 25px; | |
| // width: 25px; | |
| // height: 25px; | |
| // border-radius: 100%; | |
| // } | |
| // } | |
| // } | |
| .business-tagline { | |
| display: inline-block; | |
| font-size: 16px; | |
| font-weight: 700; | |
| font-style: italic; | |
| cursor: pointer; | |
| @include objectInOut; | |
| @keyframes revolveScale { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(-150px, -50px) rotate(-180deg) scale(3); | |
| } | |
| 60% { | |
| transform: translate(20px, 20px) rotate(30deg) scale(.3); | |
| } | |
| 100% { | |
| transform: translate(0) rotate(0) scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .add, | |
| .min { | |
| position: relative; | |
| margin: 2px 0; | |
| a { | |
| cursor: pointer; | |
| text-align: center; | |
| background: #419BF9; | |
| color: #fff; | |
| padding: 1px 6px; | |
| font-size: 15px; | |
| display: block; | |
| line-height: 25px; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 100%; | |
| } | |
| } | |
| span { | |
| display: inline-block; | |
| opacity: 1; | |
| transform: translate(0) rotate(0) scale(1); | |
| font-family: inherit !important; | |
| &.animate { | |
| animation: revolveScale .4s forwards; | |
| } | |
| } | |
| } | |
| } | |
| @keyframes rotateDice { | |
| 0% { | |
| transform: rotate(0deg) | |
| } | |
| 100% { | |
| transform: rotate(720deg) | |
| } | |
| } | |
| @keyframes rotateGear { | |
| 0% { | |
| transform: rotate(0deg) scale(1.2); | |
| } | |
| 100% { | |
| transform: rotate(360deg) scale(1.2); | |
| } | |
| } | |
| @keyframes beat { | |
| 0% { | |
| transform: scale(1) | |
| } | |
| 25% { | |
| transform: scale(1.2) | |
| } | |
| 50% { | |
| transform: scale(1) | |
| } | |
| 75% { | |
| transform: scale(1.2) | |
| } | |
| 100% { | |
| transform: scale(1) | |
| } | |
| } | |
| } | |
| #option-general { | |
| margin: auto; | |
| margin-top: 25px; | |
| width: 100%; | |
| text-align: center; | |
| position: relative; | |
| div.next, | |
| div.prev { | |
| top: 10px; | |
| position: absolute; | |
| display: block; | |
| width: (20% / 2); | |
| a { | |
| cursor: pointer; | |
| display: none; | |
| i { | |
| font-size: 22px; | |
| display: inline-block; | |
| transform: translate(0%); | |
| transition: all .3s ease-out; | |
| } | |
| } | |
| &.prev { | |
| left: 0; | |
| a { | |
| &:hover { | |
| i { | |
| transform: translate(-80%); | |
| } | |
| } | |
| } | |
| } | |
| &.next { | |
| right: 0; | |
| a { | |
| &:hover { | |
| i { | |
| transform: translate(80%); | |
| } | |
| } | |
| } | |
| } | |
| a { | |
| border: none; | |
| background: none; | |
| box-shadow: none; | |
| transform: scale(1); | |
| &:hover { | |
| color: #238EF8!important; | |
| background: transparent!important; | |
| } | |
| i { | |
| position: relative; | |
| } | |
| } | |
| } | |
| div.general-button { | |
| width: 80%; | |
| margin: auto; | |
| } | |
| ul { | |
| padding: 0; | |
| list-style: none; | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| li { | |
| display: inline-block; | |
| margin: 0 15px; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| &:first-child { | |
| margin-left: 0; | |
| } | |
| &.favorite { | |
| a { | |
| i { | |
| color: #aaa; | |
| &:before { | |
| font-weight: 600; | |
| } | |
| } | |
| &:hover { | |
| i { | |
| transform: scale(1.2); | |
| transition: .4s ease-in-out; | |
| color: #fff; | |
| } | |
| } | |
| } | |
| &.active { | |
| a { | |
| i.ion-ios-heart { | |
| display: block; | |
| color: #D0021B; | |
| } | |
| &:hover { | |
| i.ion-ios-heart { | |
| animation: beat 1s; | |
| color: #fff; | |
| } | |
| } | |
| i.ion-ios-heart-outline { | |
| display: none; | |
| } | |
| } | |
| } | |
| a { | |
| color: #444; | |
| transform: scale(1.5); | |
| i { | |
| display: block; | |
| } | |
| i.ion-ios-heart { | |
| display: none; | |
| } | |
| i.ion-ios-heart-outline { | |
| display: block; | |
| } | |
| } | |
| } | |
| &.random { | |
| &.animate { | |
| a { | |
| svg { | |
| animation: rotateDice 2s; | |
| } | |
| } | |
| } | |
| a { | |
| svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: #2689EA; | |
| } | |
| &:hover { | |
| svg { | |
| fill: #fff; | |
| transform: scale(1.2); | |
| transition: .4s ease-in-out; | |
| } | |
| } | |
| } | |
| } | |
| &.setting { | |
| a { | |
| transform: scale(1.5); | |
| top: 12px; | |
| position: relative; | |
| svg { | |
| fill: #555; | |
| width: 18px; | |
| height: 18px; | |
| display: block; | |
| left: 4px; | |
| top: 4px; | |
| position: relative; | |
| } // i { | |
| // display: block; | |
| // height: 25px; | |
| // width: 25px; | |
| // line-height: 28px; | |
| // } | |
| } | |
| &:hover { | |
| svg { | |
| transform: scale(1.2); | |
| transition: .4s ease-in-out; | |
| fill: #fff; // i { | |
| // display: block; | |
| animation: rotateGear 1s ease; // } | |
| } | |
| } | |
| } | |
| a { | |
| border-radius: 100%; | |
| display: block; | |
| background: #fff; | |
| width: 40px; | |
| height: 40px; | |
| font-size: 20px; | |
| padding: 5px; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| color: #2689EA; | |
| transition: all .1s ease-out; | |
| border: 2px solid #fff; | |
| transform: scale(1.6); | |
| &:hover { | |
| cursor: pointer; | |
| color: #fff !important; | |
| background: #2689EA !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| button#btn-validate.btn.btn-round { | |
| background: #60D836; | |
| color: #fff; | |
| width: 50%; | |
| margin: 20px 25%; | |
| margin-bottom: 66px; | |
| &:focus { | |
| outline: none; | |
| background: lighten(#60D836, 20); | |
| } | |
| span { | |
| font-size: 16px; | |
| padding: 3px 0; | |
| display: block; | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 300; | |
| &:after { | |
| font-family: 'Ionicons'; | |
| content: "\f3fd"; | |
| margin-left: 10px; | |
| transform: scale(2); | |
| display: inline-block; | |
| } | |
| } | |
| } | |
| #side-right { | |
| padding-top: 22px; // padding-left: 50px; | |
| position: relative; | |
| #main-color { | |
| width: $widthMainColor; | |
| margin: auto; | |
| position: absolute; | |
| text-align: left; | |
| height: 115%; | |
| margin-top: 23px; | |
| margin-right: 30px; | |
| background-color: #fff; | |
| border-radius: 3px; | |
| box-shadow: 0px 0px 30px -8px rgba(0, 0, 0, 0.75); | |
| &:hover { | |
| &:after { | |
| display: none; | |
| } | |
| } | |
| &:after { | |
| display: none; | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(255, 255, 255, 0.6); | |
| } | |
| .wrap-couleurs { | |
| .info-couleurs { | |
| padding: 10px 25px; | |
| font-size: 13px; | |
| color: #111; | |
| font-weight: 400; | |
| text-align: left; | |
| } | |
| } | |
| .wrap-contours { | |
| border-bottom: solid 2px #F4F4F4; | |
| margin-top: 10px; | |
| } | |
| .wrap-defond { | |
| border-bottom: solid 2px #F4F4F4; | |
| } | |
| .wrap-style { | |
| .wrap-icon-style { | |
| a { | |
| &.clear-style { | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| transform: translate(145%, 0%); | |
| .cls-1 { | |
| fill: transparent; | |
| } | |
| .cls-2 { | |
| fill: #1F8EFA; | |
| &:hover { | |
| fill: #1F8EFA; | |
| transition: all .2s ease; | |
| } | |
| } | |
| } | |
| } | |
| &.box-style { | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| fill: #607D8B; | |
| transform: translate(225%, 0%); | |
| &:hover { | |
| fill: #1F8EFA; | |
| transition: all .2s ease; | |
| } | |
| .cls-2 { | |
| fill: #fff; | |
| } | |
| } | |
| } | |
| &.round-style { | |
| svg { | |
| width: 30px; | |
| height: 30px; | |
| fill: #607D8B; | |
| transform: translate(305%, 0%); | |
| &:hover { | |
| fill: #1F8EFA; | |
| transition: all .2s ease; | |
| } | |
| .cls-2 { | |
| fill: #fff; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .wrap-contours, | |
| .wrap-defond, | |
| .wrap-style { | |
| display: block; | |
| width: 100%; | |
| height: 90px; | |
| .defond-title { | |
| padding: 0px 25px; | |
| } | |
| .contours-title, | |
| .defond-title, | |
| .style-title { | |
| padding: 10px 25px; | |
| .lbl { | |
| position: relative; | |
| display: block; | |
| height: 20px; | |
| width: 44px; | |
| background: #c6c4c5; | |
| border-radius: 100px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| &:after { | |
| position: absolute; | |
| left: -2px; | |
| top: -3px; | |
| display: block; | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 100px; | |
| background: #fff; | |
| box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05); | |
| content: ''; | |
| transition: all 0.3s ease; | |
| } | |
| &:active:after { | |
| transform: scale(1.15, 0.85); | |
| } | |
| } | |
| .cbx { | |
| &:checked~label { | |
| background: #8dc6fc; | |
| &:after { | |
| left: 20px; | |
| background: #1d8efd; | |
| } | |
| } | |
| &:disabled~label { | |
| background: #d5d5d5; | |
| pointer-events: none; | |
| &:after { | |
| background: #bcbdbc; | |
| } | |
| } | |
| } | |
| .cntr { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .press { | |
| // margin-bottom: 40px; | |
| display: inline-block; | |
| float: right; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .info-contours, | |
| .info-defond, | |
| .info-style { | |
| font-size: 13px; | |
| color: #111; | |
| font-weight: 400; | |
| text-align: left; | |
| } | |
| } | |
| .wrap-slider { | |
| display: flex; | |
| padding: 2px 20px; | |
| .cirlce-little { | |
| i { | |
| color: #8F8F8F; | |
| line-height: 35px; | |
| } | |
| } | |
| .cirlce-big { | |
| i { | |
| font-size: 20px; | |
| color: #8F8F8F; | |
| line-height: 35px; | |
| } | |
| } | |
| .holder { | |
| width: 70%; | |
| margin: auto; | |
| margin-top: 15px; | |
| $lightBlue: #03a9f4; | |
| .rkmd-slider { | |
| display: block; | |
| position: relative; | |
| font-size: 16px; | |
| font-family: 'Roboto', sans-serif; | |
| input[type="range"] { | |
| overflow: hidden; | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| &+.slider { | |
| display: block; | |
| position: relative; | |
| width: 100%; | |
| height: 4px; | |
| background-color: #bebebe; | |
| .slider-fill { | |
| display: block; | |
| position: absolute; | |
| width: 0%; | |
| height: 100%; | |
| user-select: none; | |
| z-index: 1; | |
| } | |
| .slider-handle { | |
| cursor: pointer; | |
| position: absolute; | |
| top: -5.5px; | |
| left: 0%; | |
| width: 15px; | |
| height: 15px; | |
| margin-left: -8px; | |
| border-radius: 50%; | |
| transition: all .2s ease; | |
| user-select: none; | |
| z-index: 2; | |
| } | |
| } | |
| } | |
| } | |
| .rkmd-slider { | |
| &.slider-continuous { | |
| &.slider-shadow { | |
| &.slider-lightBlue { | |
| .slider-handle:active { | |
| box-shadow: 0 0 0 10px rgba($lightBlue, .26); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .rkmd-slider { | |
| &.slider-lightBlue { | |
| .slider-fill, | |
| .slider-handle { | |
| background-color: $lightBlue; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| span.text-info { | |
| display: block; | |
| .info-title { | |
| display: block; | |
| font-size: 12px; | |
| color: #BBACB0; | |
| } | |
| .info-description { | |
| margin-bottom: 32px; | |
| display: block; | |
| font-size: 15px; | |
| color: #111; | |
| font-weight: 800; | |
| text-align: left; | |
| position: relative; | |
| left: 10px; | |
| } | |
| .info-illustration { | |
| margin-bottom: 40px; | |
| display: block; | |
| font-size: 15px; | |
| color: #111; | |
| font-weight: 800; | |
| text-align: left; | |
| position: relative; | |
| left: 10px; | |
| top: -15px; | |
| } | |
| } | |
| .main-color-header { | |
| width: $widthMainColor; | |
| height: 45px; | |
| line-height: 45px; | |
| border-bottom: solid 2px #F4F4F4; | |
| .parameter-title { | |
| display: flex; | |
| padding: 0px 25px; | |
| align-items: center; | |
| .parameter-icon { | |
| line-height: 20px; | |
| svg { | |
| width: 20px; | |
| height: 20px; | |
| .cls-1 { | |
| fill: #e6e7e8; | |
| } | |
| .cls-2 { | |
| fill: #a6a8ab; | |
| } | |
| .cls-3 { | |
| fill: #303f9f; | |
| } | |
| .cls-4 { | |
| fill: #5c6bc0; | |
| } | |
| .cls-5 { | |
| fill: #8c9eff; | |
| } | |
| .cls-6 { | |
| fill: #2e7d32; | |
| } | |
| .cls-7 { | |
| fill: #43a047; | |
| } | |
| .cls-8 { | |
| fill: #81c784; | |
| } | |
| .cls-9 { | |
| fill: #ff9800; | |
| } | |
| .cls-10 { | |
| fill: #ffc400; | |
| } | |
| .cls-11 { | |
| fill: #ffd740; | |
| } | |
| .cls-12 { | |
| fill: #d50000; | |
| } | |
| .cls-13 { | |
| fill: #ff5252; | |
| } | |
| } | |
| } | |
| .parameter-description { | |
| font-size: 14px; | |
| font-weight: 800; | |
| margin-left: 15px; | |
| } | |
| } | |
| .info-description { | |
| a { | |
| color: #111; | |
| } | |
| } | |
| } | |
| .main-color-body { | |
| padding: 0px 0; | |
| width: $widthMainColor; | |
| position: relative; | |
| top: 10px; | |
| height: 190px; | |
| border-bottom: solid 2px #F4F4F4; | |
| @include clearfix; | |
| ul.color-group { | |
| list-style: none; | |
| padding: 0; | |
| &#color-scheme { | |
| width: 59%; | |
| display: block; | |
| float: right; | |
| .logo-color { | |
| width: 150px; | |
| height: 37px; | |
| li { | |
| display: inline-block; | |
| } | |
| } | |
| .text-color { | |
| width: auto; | |
| } | |
| li.color-item { | |
| // width: 58px; | |
| margin: 10px 0; | |
| margin-right: 0; | |
| transition: all .3s ease; | |
| border: 1px dashed transparent; | |
| @include clearfix; | |
| &:hover { | |
| .handle { | |
| opacity: 1; | |
| } | |
| } | |
| &.sortable-chosen { | |
| border: 1px dashed #ccc; | |
| &.ghost { | |
| opacity: 0.5; | |
| background: #efefef; | |
| border: 1px dashed #D49D0A!important; | |
| } | |
| } | |
| .color-preview { | |
| float: left; | |
| width: 23px; | |
| margin-right: 2px; | |
| .preview-color-show { | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| border: 1.5px solid #fff; | |
| width: 25px; | |
| height: 25px; | |
| display: block; | |
| background: #ccc; | |
| border-radius: 100%; | |
| } | |
| } | |
| .handle { | |
| cursor: move; | |
| width: 25px; | |
| float: left; | |
| line-height: 25px; | |
| text-align: center; | |
| opacity: 0; | |
| transition: all .1s ease-out; | |
| } | |
| } | |
| } | |
| &#color-description { | |
| width: 77px; | |
| float: left; | |
| margin-left: 15px; | |
| li { | |
| list-style: none; | |
| display: block; | |
| margin: 8px 0; | |
| @include clearfix; | |
| } | |
| .color-hex-code { | |
| float: left; | |
| padding-left: 10px; | |
| height: 30px; | |
| cursor: default; | |
| line-height: 30px; | |
| .text-display { | |
| font-size: 13px; // text-transform: uppercase; | |
| font-weight: 500; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .main-color-footer { | |
| .color-option-wrapper { | |
| position: relative; | |
| display: inline-block; | |
| &>a { | |
| // padding: 2px 30px; | |
| padding: 0; | |
| color: #999; | |
| display: inline-block; | |
| font-size: 16px!important; | |
| font-weight: 300; | |
| &:hover { | |
| color: #111; // background:#eee; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ul.grid-icon { | |
| padding: 0; | |
| margin: auto; | |
| &.favorite { | |
| li { | |
| width: (98% / 6); | |
| } | |
| } | |
| li { | |
| box-sizing: border-box; | |
| display: block; | |
| float: left; | |
| width: (98% / 3); | |
| text-align: center; | |
| padding: 10px; | |
| &:hover { | |
| .wrap { | |
| transition: all .3s ease; | |
| border: 2px solid #419BF9; | |
| } | |
| } | |
| .wrap { | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| padding: 10px 0; | |
| border-radius: 10px; | |
| background: #fff; | |
| display: flex; | |
| align-items: center; | |
| .image-preview { | |
| margin: auto; | |
| h2 { | |
| margin: 0; | |
| span { | |
| font-family: inherit; | |
| } | |
| } | |
| img { | |
| width: auto; | |
| height: 100%; | |
| } | |
| svg { | |
| display: block; | |
| width: auto; | |
| height: 100%; | |
| margin: auto; | |
| } | |
| } | |
| span.close { | |
| position: absolute; | |
| top: 5px; | |
| right: 10px; | |
| color: #111; | |
| } | |
| span.label { | |
| padding: 6px 0px; | |
| font-size: 11px; | |
| font-weight: 300; | |
| text-align: center; | |
| border-radius: 100%; | |
| top: -12.5px; | |
| left: -12.5px; | |
| position: absolute; | |
| height: 25px; | |
| width: 25px; | |
| border: 1px solid #fff; | |
| background: #419BF9; | |
| } | |
| } | |
| } | |
| } | |
| #share-review { | |
| .header-share { | |
| background: #4B75C0; | |
| color: #fff; | |
| padding: 21px 19px; | |
| text-align: center; | |
| h2 { | |
| margin: 0; | |
| font-family: 'Roboto', sans-serif !important; | |
| font-weight: 500; | |
| font-size: 13px; | |
| margin-top: -14px; | |
| &:before { | |
| font-size: 27px; | |
| margin-right: 10px; | |
| font-family: 'Ionicons'; | |
| content: "\f35d"; | |
| width: 24px; | |
| height: 24px; | |
| display: inline-block; | |
| color: #FFF; | |
| border-radius: 3px; | |
| position: relative; | |
| top: 9px; | |
| } | |
| &:after { | |
| font-size: 27px; | |
| margin-left: 10px; | |
| font-family: 'Ionicons'; | |
| content: "\f35d"; | |
| width: 24px; | |
| height: 24px; | |
| display: inline-block; | |
| color: #FFF; | |
| border-radius: 3px; | |
| position: relative; | |
| top: 9px; | |
| } | |
| } | |
| } | |
| .body-share { | |
| background: #3B5998; | |
| padding: 27px 0; | |
| ul.grid-icon { | |
| width: 90%; | |
| @include clearfix; | |
| li { | |
| padding: 9px 4%; | |
| } | |
| } | |
| } | |
| .footer-share { | |
| padding-top: 30px; | |
| background: #3B5998; | |
| padding-bottom: 34px; | |
| ul { | |
| box-sizing: border-box; | |
| list-style: none; | |
| padding: 0; | |
| width: 63%; | |
| margin: auto; | |
| text-align: center; | |
| li { | |
| display: inline-block; | |
| padding: 10px; | |
| @include clearfix; | |
| } | |
| } | |
| .btn.btn-round { | |
| width: 100%; | |
| background: #4B74BF; | |
| color: #fff; | |
| display: block; | |
| padding: 8px 50px; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| i { | |
| margin-right: 10px; | |
| } | |
| } | |
| } | |
| } | |
| #logos { | |
| background: #F5F5F5; | |
| #logo-favorite, | |
| #logo-history { | |
| padding: 42px; | |
| &#logo-history { | |
| display: none; | |
| } | |
| h2.title { | |
| margin-bottom: 23px; | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: #65738B; | |
| } | |
| } | |
| #logo-favorite { | |
| h2.title i.ion-heart { | |
| color: #e31b23; | |
| } | |
| } | |
| } | |
| #support-communication { | |
| display: none; | |
| h2.title { | |
| font-size: 18px; | |
| font-family: 'Roboto', sans-serif; | |
| color: #54617A; | |
| margin-top: 42px; | |
| margin-bottom: 42px; | |
| } | |
| #support-filter { | |
| margin-bottom: 0; | |
| @include clearfix; | |
| .item { | |
| width: (100% / 3); | |
| float: left; | |
| position: relative; | |
| text-align: center; | |
| &:hover { | |
| a:after { | |
| background: rgba(#009DF3, 0.7); | |
| } | |
| .text { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| } | |
| } | |
| a { | |
| width: 100%; | |
| position: relative; | |
| display: block; | |
| img { | |
| width: 100%; | |
| } | |
| &:after { | |
| transition: all .2s ease; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| content: ""; | |
| position: absolute; | |
| background: transparent; | |
| } | |
| } | |
| span.text { | |
| color: #fff; | |
| top: 100px; | |
| position: absolute; | |
| left: 0; | |
| opacity: 0; | |
| right: 0; | |
| font-weight: 500; | |
| font-size: 16px; | |
| transform: translateY(100%); | |
| transition: all .2s ease-out .1s; | |
| cursor: pointer; | |
| } | |
| } | |
| } | |
| } | |
| #ads { | |
| .img-responsive { | |
| width: 100% !important; | |
| } | |
| } | |
| #choose-font-title { | |
| .wrapper { | |
| padding: 10px; | |
| } | |
| h3 { | |
| font-size: 25px; | |
| } | |
| } | |
| .modal-choose { | |
| .modal-dialog { | |
| margin-top: 8%; | |
| width: 80%; | |
| margin: 4% 14%; | |
| } | |
| .modal-content { | |
| width: 100%; | |
| border-radius: 6px; | |
| background: #FFFFFF; | |
| .modal-header { | |
| border-bottom: none; | |
| padding-top: 25px; | |
| padding-bottom: 17px; | |
| padding-left: 110px; | |
| padding-right: 110px; | |
| h2 { | |
| color: rgb(12, 180, 224); | |
| text-align: left; | |
| font-size: 19px; | |
| font-weight: 500; | |
| font-family: 'Roboto', sans-serif; | |
| display: inline-block; | |
| letter-spacing: 1.5px; | |
| padding-bottom: 10px; | |
| } | |
| form { | |
| display: none; | |
| } | |
| #btn-import-logo { | |
| margin-top: 10px; | |
| border: 1px solid #eee; | |
| color: #555; | |
| &:hover { | |
| color: #111; | |
| background: #f8f8f8; | |
| } | |
| } | |
| .checkbox { | |
| display: inline-block; | |
| text-align: right; | |
| margin-left: 50px; | |
| } | |
| label { | |
| color: #00a7d0; | |
| input[type="checkbox"] { | |
| &+span:before { | |
| content: "\f372"; | |
| font-family: "Ionicons"; | |
| font-size: 20px; | |
| margin-right: 7px; | |
| position: relative; | |
| top: 3px; | |
| } | |
| &:checked+span:before { | |
| content: "\f373"; | |
| } | |
| } | |
| } | |
| input[type="checkbox"] { | |
| display: none; | |
| } | |
| } | |
| .modal-body { | |
| padding: 0 110px; | |
| .prev, | |
| .next { | |
| position: absolute; | |
| font-size: 29px; | |
| padding: 10px; | |
| &.remove { | |
| display: none!important; | |
| } | |
| i { | |
| transition: all .2s ease-out; | |
| } | |
| &:hover { | |
| &.prev { | |
| i { | |
| display: block; | |
| transform: translateX(-50%); | |
| } | |
| } | |
| &.next { | |
| i { | |
| display: block; | |
| transform: translateX(50%); | |
| } | |
| } | |
| } | |
| &.prev { | |
| top: 30%; | |
| left: 43px; | |
| transform: translateX(0%); | |
| } | |
| &.next { | |
| top: 30%; | |
| right: 43px; | |
| } | |
| } | |
| div.selection { | |
| overflow: hidden; | |
| list-style: none; | |
| padding: 0; | |
| @include clearfix; | |
| div.owl-stage-outer { | |
| @include clearfix; | |
| div.owl-stage { | |
| @include clearfix; | |
| } | |
| } | |
| div.owl-item { | |
| float: left; | |
| } | |
| div.item { | |
| @include clearfix; | |
| .wrapper { | |
| padding: (16px / 2); | |
| float: left; | |
| box-sizing: border-box; | |
| width: (100% / 3); | |
| &.item-font-tagline { | |
| width: (100% / 2); | |
| h3 { | |
| font-style: italic; | |
| } | |
| } | |
| a { | |
| box-shadow: 0 1px 24px 0px rgba(0, 0, 0, 0.1); | |
| display: block; | |
| text-align: center; | |
| padding: 20px; | |
| border-radius: 6px; | |
| border: 1.4px solid transparent; | |
| &:hover { | |
| border: 1.4px solid #0090F3; | |
| box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.2); | |
| transition: all .1s ease; | |
| } | |
| img, | |
| svg { | |
| max-width: 100%; | |
| height: 140px; | |
| } | |
| } | |
| &.item-icon {} | |
| &.item-font { | |
| a { | |
| transition: all .1s ease; | |
| h3 { | |
| font-size: 20px; | |
| margin-bottom: 15px; | |
| color: #111; | |
| } | |
| p { | |
| margin-top: 0; | |
| font-size: 9px; | |
| color: #ddd; | |
| } | |
| } | |
| } | |
| &.item-color { | |
| a { | |
| padding: 0; // box-shadow:none; | |
| // border:2px solid #1A8BEE; | |
| ul { | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| @include clearfix; | |
| li { | |
| list-style-type: none; | |
| width: (100% / 6); | |
| height: 80px; | |
| float: left; | |
| &:nth-of-type(1) { | |
| background: #111; | |
| } | |
| &:nth-of-type(2) { | |
| background: #555; | |
| } | |
| &:nth-of-type(3) { | |
| background: #888; | |
| } | |
| &:nth-of-type(4) { | |
| background: #ccc; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| &.item-illustration { | |
| width: 50%; | |
| a { | |
| height: 210px; | |
| padding: 0; | |
| position: relative; | |
| background-size: 100% auto !important; | |
| background-position: center bottom !important; | |
| img { | |
| width: 100%; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| div.owl-nav { | |
| display: none; | |
| } | |
| div.owl-dots { | |
| margin: 40px 0; | |
| text-align: center; | |
| div.owl-dot { | |
| margin: 5px 2px; | |
| display: inline-block; | |
| &.active { | |
| span { | |
| border: 1px solid #419BF9!important; | |
| background: #419BF9!important; | |
| } | |
| } | |
| span { | |
| display: block; | |
| border-radius: 100%; | |
| width: 12px; | |
| height: 12px; | |
| background: #E7E7E7; | |
| border: 1px solid #ccc; | |
| &:hover { | |
| background: darken(#E7E7E7, 4%); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #choose-general-setting { | |
| .modal-content { | |
| width: 100%; | |
| .modal-header { | |
| padding-left: 0px; | |
| padding-right: 0px; | |
| padding-top: 0px; | |
| .general-wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-around; | |
| width: 100%; | |
| .title { | |
| width: 80%; | |
| text-align: center; | |
| padding-top: 15px; | |
| } | |
| } | |
| .save { | |
| margin-top: -20px; | |
| } | |
| .close { | |
| margin-top: -20px; | |
| } | |
| } | |
| .modal-body { | |
| padding: 0 40px; | |
| padding-bottom: 40px; | |
| .caption-type { | |
| font-weight: 500; | |
| } | |
| .section1 { | |
| width: 100%; | |
| height: auto; | |
| display: flex; | |
| .logo-type { | |
| margin-top: 5px; | |
| width: 58%; | |
| display: inline-block; | |
| ul { | |
| padding: 0; | |
| list-style-type: none; | |
| @include clearfix; | |
| li { | |
| width: 32%; | |
| float: left; | |
| padding: 0 3px; | |
| } | |
| } | |
| } | |
| .logo-option { | |
| margin-top: 5px; | |
| width: 42%; | |
| display: inline-block; | |
| ul { | |
| list-style-type: none; | |
| padding: 0; | |
| li { | |
| float: left; | |
| width: 45%; | |
| .box-logo { | |
| margin-right: 5px; | |
| #normal { | |
| font-size: 20px; | |
| display: block; | |
| text-align: center; | |
| margin-top: 65px; | |
| letter-spacing: 3px; | |
| } | |
| .round { | |
| // width: 90%; | |
| // height: 500px; | |
| #background { | |
| font-size: 20px; | |
| display: block; | |
| text-align: center; | |
| margin-top: 65px; | |
| letter-spacing: 3px; | |
| font-weight: 600; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .section2 { | |
| width: 100%; | |
| height: auto; | |
| display: flex; | |
| .disposition { | |
| margin-top: 35px; | |
| width: 58%; | |
| display: inline-block; | |
| ul { | |
| padding: 0; | |
| list-style-type: none; | |
| @include clearfix; | |
| li { | |
| padding: 0 3px; | |
| width: 24%; | |
| float: left; | |
| } | |
| } | |
| } | |
| .style { | |
| margin-top: 35px; | |
| display: inline-block; | |
| width: 42%; | |
| ul { | |
| padding: 0; | |
| list-style-type: none; | |
| li { | |
| width: 29%; | |
| float: left; | |
| margin-right: 5px; | |
| } | |
| .box-logo { | |
| height: 140px; | |
| } | |
| #normal { | |
| font-size: 12px; | |
| font-weight: 200; | |
| display: block; | |
| text-align: center; | |
| margin-top: 60px; | |
| letter-spacing: 2px; | |
| } | |
| #modern { | |
| font-size: 12px; | |
| font-weight: 400; | |
| display: block; | |
| text-align: center; | |
| margin-top: 60px; | |
| letter-spacing: 2px; | |
| } | |
| #abstract { | |
| font-size: 12px; | |
| font-weight: 600; | |
| display: block; | |
| text-align: center; | |
| margin-top: 60px; | |
| letter-spacing: 2px; | |
| } | |
| } | |
| } | |
| } | |
| .box-logo-wrapper { | |
| margin-top: 15px; | |
| .box-logo { | |
| height: 180px; | |
| box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2); | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| &:hover { | |
| transition: all .1s ease-out; | |
| border: 2px solid #0cb4e0; | |
| } | |
| img { | |
| height: 100%; | |
| display: block; | |
| margin: auto; | |
| } | |
| } | |
| .font { | |
| height: 140px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .logo-position { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| &.banner { | |
| width: 20%; | |
| transform: translate(200%, 20%) scale(1.2) rotateX(5deg); | |
| } | |
| &.stiky-note { | |
| width: 20%; | |
| transform: translate(142%, 10%) scale(0.6) rotate(-2deg) rotateX(31deg); | |
| } | |
| &.sticker { | |
| width: 20%; | |
| transform: translate(62%, 74%) skew(-191deg, 180deg) scale(2.1) rotate(7deg) rotateX(27deg); | |
| } | |
| &.notepad { | |
| width: 20%; | |
| transform: translate(181%, 14%) scale(1) rotate(0deg) rotateX(26deg); | |
| } | |
| &.notebook { | |
| width: 20%; | |
| transform: translate(97%, 22%) scale(1.2) rotate(-4deg) rotateX(26deg); | |
| } | |
| &.folder { | |
| width: 20%; | |
| transform: translate(-104%, 52%) skew(-213deg, 188deg) scale(2.2) rotate(29deg) rotateX(37deg); | |
| } | |
| &.calendar { | |
| width: 20%; | |
| transform: translate(200%, 6%) scale(1) rotateX(37deg); | |
| } | |
| &.poster { | |
| width: 20%; | |
| transform: translate(208%, 75%) scale(2.1) rotateX(20deg); | |
| } | |
| &.sarung { | |
| width: 20%; | |
| transform: translate(177%, 55%) scale(1) rotateX(0deg) rotate(-22deg) skew(-7deg, 7deg); | |
| h2 span, | |
| p { | |
| display: none; | |
| } | |
| } | |
| &.shirt { | |
| width: 20%; | |
| transform: translate(232%, 16%) scale(0.8); | |
| h2 span, | |
| p { | |
| display: none; | |
| } | |
| } | |
| &.football { | |
| width: 20%; | |
| transform: translate(197%, 82%) scale(2) rotateX(15deg); | |
| h2 span, | |
| p { | |
| display: none; | |
| } | |
| } | |
| &.bag { | |
| width: 20%; | |
| transform: translate(197%, 82%) scale(2) rotateX(15deg); | |
| h2 span, | |
| p { | |
| display: none; | |
| } | |
| } | |
| &.bottle { | |
| width: 20%; | |
| transform: translate(205%, 46%) scale(1.1) rotateX(15deg); | |
| } | |
| &.parent-hat { | |
| perspective: 1000px; | |
| &.hat { | |
| width: 20%; | |
| transform: translate(209%, 16%) scale(0.97) skew(-177deg, 181deg) rotateX(24deg); | |
| transform-origin: bottom; | |
| } | |
| } | |
| &.sangles { | |
| width: 45%; // transform: translate(157%, 17.7%) scale(0.3) skew(-177deg, 180deg) rotateX(25deg); | |
| transform: translate(122%, 3.4%) scale(0.24); | |
| } | |
| &.pige { | |
| width: 20%; | |
| transform: translate(253%, 6.6%) scale(0.2) skew(-174deg, 166deg) rotateX(-10deg); | |
| } | |
| &.business-card { | |
| &.business-card-1 { | |
| width: 20%; | |
| transform: translate(182%, 16%) rotate(-24deg) rotateX(15deg); | |
| } | |
| &.business-card-2 { | |
| width: 20%; | |
| transform: translate(313%, 48%) rotate(-24deg) rotateX(15deg); | |
| } | |
| } | |
| &.envelope { | |
| &.envelope-1 { | |
| width: 20%; | |
| transform: translate(185%, 40%) rotate(-29deg); | |
| } | |
| &.envelope-2 { | |
| width: 10%; | |
| transform: translate(663%, 28%) rotate(-29deg); | |
| } | |
| } | |
| &.invoices { | |
| width: 10%; | |
| transform: translate(500%, 7%); | |
| } | |
| &.facebook { | |
| &.facebook-1 { | |
| width: 8%; | |
| transform: translate(390%, 50%); | |
| } | |
| &.facebook-2 { | |
| width: 14%; | |
| transform: translate(292%, 41%); | |
| svg { | |
| .color_1, | |
| .color_2, | |
| .color_3, | |
| .color_4 { | |
| fill: #fff!important; | |
| } | |
| } | |
| h2 { | |
| color: #fff!important; | |
| } | |
| } | |
| } | |
| &.letterhead { | |
| width: 6%; | |
| transform: translate(512%, 37%) rotate(16deg); | |
| } | |
| &.tshirt { | |
| width: 40%; | |
| transform: translate(69%, 29%); | |
| } | |
| &.cartes-de-correpondance { | |
| width: 15%; | |
| transform: translate(165%, 44%) rotate(0deg) rotateX(-13deg) skew(6deg, 0deg); | |
| } | |
| &.car { | |
| width: 24%; | |
| transform: translate(316%, 13%) rotate(-34deg) skew(18deg, 11deg) rotateX(30deg); | |
| } | |
| &.mug { | |
| width: 25%; | |
| transform: translate(148%, 38%); | |
| } | |
| &.horaire { | |
| width: 12%; | |
| transform: translate(280%, 1.5%) scale(0.7); | |
| } | |
| &.syal { | |
| width: 20%; | |
| transform: translate(142%, 37%) rotate(14deg); | |
| h2 span, | |
| p { | |
| color: #fff; | |
| } | |
| } | |
| &.jacket { | |
| width: 18%; | |
| transform: translate(296%, 24%); | |
| h2 span, | |
| p { | |
| display: none; | |
| } | |
| } | |
| &.flag { | |
| width: 25%; | |
| transform: translate(166%, 30%) rotate(-9deg); | |
| opacity: 0.9; | |
| } | |
| } | |
| .popup-import { | |
| width: 100%; | |
| position: fixed; | |
| height: 70%; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: #FFF; | |
| z-index: 99999; | |
| box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| user-select: none; | |
| transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86); | |
| transform-origin: top; | |
| transform: rotateX(-20deg) scale(1.2); | |
| opacity: 0; | |
| &.open { | |
| transform: rotateX(0deg) scale(1); | |
| opacity: 1; | |
| .menu-bar { | |
| ul.info { | |
| li:nth-of-type(1) { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| transition-delay: .1s; | |
| } | |
| li:nth-of-type(2) { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| transition-delay: .1s * 2; | |
| } | |
| li:nth-of-type(3) { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| transition-delay: .1s * 3; | |
| } | |
| li:nth-of-type(4) { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| transition-delay: .1s * 4; | |
| } | |
| li:nth-of-type(5) { | |
| opacity: 1; | |
| transform: translateY(0%); | |
| transition-delay: .1s * 5; | |
| } | |
| } | |
| button.btn-close-popup { | |
| transform: translateX(0%); | |
| transition-delay: .2s; | |
| } | |
| } | |
| .body { | |
| .upload-area .icon { | |
| i { | |
| opacity: 1; | |
| transform: translateY(0) rotateX(0deg); | |
| } | |
| h2 { | |
| opacity: 1; | |
| transform: translateY(0) rotateX(0deg); | |
| } | |
| p { | |
| opacity: 1; | |
| transform: translateY(0) rotateX(0deg); | |
| } | |
| } | |
| } | |
| } | |
| a { | |
| color: $blue; | |
| } | |
| .menu-bar { | |
| padding: 14px 10px; | |
| box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2); | |
| @include clearfix; | |
| ul.info { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| width: 50%; | |
| float: left; | |
| @include clearfix; | |
| li { | |
| opacity: 0; | |
| transform: translateY(-100%); | |
| transition: all .2s ease; | |
| margin-right: 10px; | |
| float: left; | |
| color: #6e6868; | |
| font-weight: 300; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| } | |
| button.btn-close-popup { | |
| float: right; | |
| display: block; | |
| background: transparent; | |
| border: none; | |
| font-size: 15px; | |
| transition: all .1s ease-out; | |
| transform: translateX(100%); | |
| font-family: 'Roboto', sans-serif; | |
| &:focus { | |
| outline: none; | |
| } | |
| } | |
| } | |
| .body { | |
| .upload-area { | |
| overflow: hidden; | |
| .icon { | |
| perspective: 1000px; | |
| margin-top: 60px; | |
| text-align: center; | |
| i { | |
| line-height: 150px; | |
| font-size: 150px; | |
| color: #999; | |
| display: block; | |
| transform: translateY(100%) rotateX(-90deg); | |
| transition: all .6s ease; | |
| transition-delay: .5s; | |
| opacity: 0; | |
| } | |
| h2 { | |
| font-size: 27px; | |
| line-height: normal; | |
| margin: 0; | |
| margin-bottom: 5px; | |
| font-weight: 300; | |
| color: #888; | |
| transform: translateY(100%) rotateX(-90deg); | |
| transition: all .6s ease; | |
| transition-delay: 1s; | |
| opacity: 0; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| p { | |
| font-weight: 300; | |
| transform: translateY(100%) rotateX(-90deg); | |
| transition: all .6s ease; | |
| transition-delay: 1.5s; | |
| opacity: 0; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| } | |
| } | |
| button#import-submit { | |
| background: #60D836; | |
| color: #fff; | |
| width: 50%; | |
| margin: 20px 25%; | |
| margin-bottom: 66px; | |
| } | |
| } | |
| } | |
| .overlay-import { | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| z-index: 88888; | |
| position: fixed; | |
| } | |
| .dz-clickable .dz-message { | |
| display: none; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment