Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $color: (
- 'primary': #F1592A,
- 'gray-200': #edf2f7,
- 'gray-400': #cbd5e0,
- );
- $timing-next: 800ms;
- $timing-back: 600ms;
- $easing: cubic-bezier(.2, 0, .2, 1);
- $button: (
- 'border-width': 2px,
- 'border-radius': 4px,
- 'font-weight': 500,
- 'shadow': unquote('0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'),
- 'theme': (
- 'primary': map-get($color, 'primary'),
- ),
- );
- @mixin button-theme($background, $foreground) {
- $theme-base: $background;
- $theme-hover-color: darken($background, 6%);
- $theme-active-color: darken($background, 12%);
- $disabled-color: #dbdbdb;
- color: $foreground;
- background-color: $theme-base;
- border-color: $theme-base;
- &:focus {
- background-color: $theme-hover-color;
- border-color: $theme-hover-color;
- }
- &:hover {
- background-color: $theme-hover-color;
- border-color: $theme-hover-color;
- }
- &:active {
- background-color: $theme-active-color;
- border-color: $theme-active-color;
- }
- &.button-outlined {
- color: $theme-base;
- border-color: currentColor;
- &,
- &:hover,
- &:active {
- color: $theme-base;
- background-color: rgba(0, 0, 0, 0);
- }
- &:hover,
- &:focus {
- background-color: rgba($theme-base, .15);
- }
- &:active {
- color: white;
- background-color: $theme-base;
- border-color: $theme-base;
- }
- }
- &:disabled,
- &.disabled {
- &,
- &:hover,
- &:active,
- &:focus {
- border-color: $disabled-color;
- background-color: $disabled-color;
- }
- }
- }
- html {
- color: #343a4a;
- }
- .container {
- max-width: 1024px;
- }
- .main {
- position: relative;
- height: 400px;
- }
- .file-drop {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-direction: column;
- width: 100%;
- height: 100%;
- min-height: 180px;
- border-width: 3px;
- border-style: dashed;
- border-color: map-get($color, 'gray-400');
- background-color: map-get($color, 'gray-200');
- transition: background-color 160ms ease, border-color 400ms ease;
- &.dragover {
- background-color: lighten(map-get($color, 'primary'), 40%);
- }
- }
- svg,
- .svg {
- height: 100%;
- width: 100%;
- }
- .svg-index {
- position: relative;
- z-index: -2;
- }
- .svg-success {
- display: flex;
- flex-direction: column;
- svg {
- flex-grow: 1;
- flex-basis: 0;
- }
- }
- .button {
- min-width: 170px;
- min-height: 42px;
- padding: 0 14px;
- font-size: 1rem;
- @include button-theme(map-get(map-get($button, 'theme'), 'primary'), white);
- position: relative;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- flex: 0 0 auto;
- border-radius: map-get($button, 'border-radius');
- border: map-get($button, 'border-width') solid;
- border-color: transparent;
- font-weight: map-get($button, 'font-weight');
- line-height: 1;
- user-select: none;
- touch-action: manipulation;
- box-shadow: map-get($button, 'shadow');
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: background-color 160ms,
- color 160ms,
- box-shadow 160ms,
- border 160ms;
- &:disabled {
- box-shadow: none;
- }
- &:focus {
- outline: none;
- }
- }
- .button-iconed-left {
- i,
- span {
- margin-right: .6em;
- }
- }
- .spinner {
- display: inline-block;
- margin: 0 8px;
- border-radius: 50%;
- width: 1.5em;
- height: 1.5em;
- border: .215em solid transparent;
- font-size: 16px;
- border-top-color: white;
- animation-name: spin;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- animation-timing-function: cubic-bezier(.55, .15, .45, .85);
- }
- .index,
- .success,
- .title,
- .svg {
- opacity: 1;
- transition: opacity $timing-next $easing;
- }
- .view-bg {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- z-index: -1;
- background-color: map-get($color, 'gray-200');
- transform-origin: left center;
- transition-property: transform;
- transition-timing-function: $easing;
- }
- .index-bg {
- transform: scale(.5, 1);
- }
- .v-view-next-leave-active {
- .title {
- animation: fade-in $timing-next $easing reverse;
- }
- .index-bg {
- transform: scale(1, 1);
- transition-duration: $timing-next;
- }
- .file-drop {
- border-color: map-get($color, 'gray-200');
- }
- .index,
- .svg-index {
- animation: fade-in $timing-next $easing reverse;
- }
- }
- .v-view-next-enter-active {
- .title {
- animation: fade-in $timing-next $easing;
- }
- .success {
- animation: fade-in $timing-next $easing;
- }
- }
- .v-view-back-enter-active {
- .title {
- animation: fade-in $timing-back $easing;
- }
- .index,
- .svg-index {
- animation: fade-in $timing-back $easing;
- }
- }
- .v-view-back-leave-active {
- .title {
- animation: fade-in $timing-back $easing reverse;
- }
- .success {
- animation: fade-in $timing-back $easing reverse;
- }
- .success-bg {
- transform: scale(.5, 1);
- transition-duration: $timing-back;
- }
- }
- .v-view-next-enter-active {
- animation: no-animation $timing-next $easing;
- }
- .v-view-next-leave-active {
- animation: no-animation $timing-next $easing;
- }
- .v-view-back-enter-active {
- animation: no-animation $timing-back $easing;
- }
- .v-view-back-leave-active {
- animation: no-animation $timing-back $easing;
- }
- @keyframes no-animation {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement