screen-onboarding.scss
170 lines
| 1 | @config "../../../tailwind.config.onboarding.js"; |
| 2 | @import "../bootstrap/tailwind"; |
| 3 | @import "../bootstrap/variables"; |
| 4 | |
| 5 | .#{$namespace}-onboarding-frame { |
| 6 | @apply fixed inset-0 z-[99999] bg-gray-100 flex justify-center items-center h-screen w-screen overflow-y-auto; |
| 7 | } |
| 8 | |
| 9 | body.advanced-ads_page_advanced-ads-onboarding { |
| 10 | @apply absolute -left-[100%]; |
| 11 | |
| 12 | #adminmenumain { |
| 13 | @apply hidden; |
| 14 | } |
| 15 | } |
| 16 | |
| 17 | .#{$namespace}-onboarding { |
| 18 | a, |
| 19 | p, |
| 20 | label, |
| 21 | button { |
| 22 | @apply text-base tracking-wide; |
| 23 | } |
| 24 | |
| 25 | h1, |
| 26 | h2, |
| 27 | h3 { |
| 28 | @apply tracking-wide my-8; |
| 29 | } |
| 30 | |
| 31 | h1, |
| 32 | h2 { |
| 33 | @apply font-medium; |
| 34 | } |
| 35 | |
| 36 | h2 { |
| 37 | @apply text-2xl mb-3; |
| 38 | } |
| 39 | |
| 40 | h3 { |
| 41 | @apply mb-3 font-normal; |
| 42 | } |
| 43 | |
| 44 | select { |
| 45 | @apply w-full max-w-none px-2 py-0.5; |
| 46 | } |
| 47 | |
| 48 | .button-link { |
| 49 | @apply no-underline text-black tracking-wide text-sm; |
| 50 | |
| 51 | span { |
| 52 | @apply border-0 border-b border-solid border-black; |
| 53 | } |
| 54 | } |
| 55 | |
| 56 | .button-onboarding { |
| 57 | @apply py-3 px-5 text-base border border-solid border-primary rounded text-white bg-primary text-base cursor-pointer no-underline font-medium; |
| 58 | |
| 59 | &:disabled, |
| 60 | &.disabled { |
| 61 | @apply bg-gray-100 text-gray-600 border border-gray-100 cursor-not-allowed pointer-events-none; |
| 62 | } |
| 63 | |
| 64 | &--gray { |
| 65 | @apply bg-gray-100 text-primary border border-solid border-primary whitespace-nowrap; |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | .file-name-rtl { |
| 70 | @apply max-w-72 whitespace-nowrap overflow-hidden relative; |
| 71 | direction: rtl; |
| 72 | |
| 73 | &.truncate::before { |
| 74 | @apply w-10 h-full absolute left-0 top-0 z-10; |
| 75 | content: ""; |
| 76 | background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); |
| 77 | } |
| 78 | } |
| 79 | |
| 80 | .congrats-flex { |
| 81 | @apply flex gap-7 items-center; |
| 82 | |
| 83 | & > *:first-child { |
| 84 | min-width: 65%; |
| 85 | max-width: 65%; |
| 86 | } |
| 87 | |
| 88 | & > *:nth-child(2) { |
| 89 | min-width: 25%; |
| 90 | } |
| 91 | } |
| 92 | } |
| 93 | |
| 94 | .#{$namespace}-input { |
| 95 | &-radio { |
| 96 | @apply flex gap-x-4; |
| 97 | |
| 98 | input { |
| 99 | @apply block mt-2 #{!important}; |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | &-text { |
| 104 | @apply px-5 py-3 w-full text-base tracking-wide #{!important}; |
| 105 | } |
| 106 | } |
| 107 | |
| 108 | .#{$namespace}-radio-list { |
| 109 | @apply space-y-2 my-8; |
| 110 | |
| 111 | &:not(.is-button) &--item { |
| 112 | @apply flex gap-x-4; |
| 113 | |
| 114 | input { |
| 115 | @apply block mt-1.5 #{!important}; |
| 116 | } |
| 117 | } |
| 118 | |
| 119 | &.is-button { |
| 120 | @apply space-y-5; |
| 121 | } |
| 122 | |
| 123 | &.is-button &--item { |
| 124 | input { |
| 125 | @apply hidden; |
| 126 | } |
| 127 | |
| 128 | label { |
| 129 | @apply bg-gray-100/50 border border-solid border-primary border-opacity-70 py-1 px-4 text-primary rounded block font-medium cursor-pointer; |
| 130 | |
| 131 | > span { |
| 132 | @apply flex items-center gap-x-4; |
| 133 | } |
| 134 | } |
| 135 | |
| 136 | input:checked ~ label { |
| 137 | @apply bg-primary/80 text-white; |
| 138 | } |
| 139 | } |
| 140 | } |
| 141 | |
| 142 | .#{$namespace}-wizard-progress { |
| 143 | @apply flex justify-center py-4 gap-x-8; |
| 144 | |
| 145 | &--item { |
| 146 | @apply relative rounded-full bg-white border-solid border border-gray-300 min-h-8 min-w-8 flex justify-center items-center text-lg text-gray-500 font-medium; |
| 147 | |
| 148 | &.is-active { |
| 149 | @apply min-w-16 px-1 bg-primary text-white border-primary z-10; |
| 150 | } |
| 151 | |
| 152 | &.is-done { |
| 153 | @apply bg-primary text-white border-primary; |
| 154 | |
| 155 | &::after, |
| 156 | & + &::after { |
| 157 | @apply border-solid border border-x-0 border-y border-primary bg-primary -z-10; |
| 158 | @apply content-[""] absolute left-0 top-1/2 h-1 w-[110%]; |
| 159 | transform: translate(90%, -50%); |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | &:not(.is-done) + &::after { |
| 164 | @apply border-solid border border-x-0 border-y border-gray-300 bg-white -z-10; |
| 165 | @apply content-[""] absolute left-0 top-1/2 h-1 w-[110%]; |
| 166 | transform: translate(-100%, -50%); |
| 167 | } |
| 168 | } |
| 169 | } |
| 170 |