Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
  • ui-rewrite
2 results

_page_upload.sass

Blame
    • _page_upload.sass 2.77 KiB
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122 
    

    

    

    .page.upload
  flex-grow: 1
  display: flex
  flex-direction: column

  .alert
    padding: 16px
    margin: 16px 0
    box-shadow: 0 2px 4px rgba(33, 33, 33, 0.2)
    text-decoration: none
    border-radius: 2px
    &.success
      background: #DCEDC8
      color: #689F38
      border-color: #689F38
      a
        color: #33691E
    &.error
      background: #FFEBEE
      color: #F44336
      border-color: #F44336
      a
        color: #D32F2F

  form.upload
    padding: 96px 0
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
    text-decoration: none
    border-radius: 2px
    text-align: center
    background: #333333
    .upload-label
      font-size: 18pt
      color: #fff
    label
      position: relative
      display: inline-block
      overflow: hidden
      span.text
        position: relative
        display: inline-block
        background: #FFC107
        padding: 4px 16px
        border-radius: 2px
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
        line-height: 24px
        color: #282828
        cursor: pointer
        z-index: 1
        &:hover, &:focus
          background: #FFD54F
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
      input[type=file]
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0
        opacity: 0
  .uploading.images
    .detail
      .image
        position: relative
        .progress
          position: absolute
          top: -4px
          left: 0
          right: 0
          height: 4px
          display: block
          background-color: rgba(255, 193, 7, 0.2)
          overflow: hidden
          transition: opacity 400ms
          .indeterminate
            background-color: rgba(255, 193, 7, 0.8)
            &::before
              content: ''
              position: absolute
              background-color: inherit
              top: 0
              left: 0
              bottom: 0
              will-change: left, right
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
            &::after
              content: ''
              position: absolute
              background-color: inherit
              top: 0
              left: 0
              bottom: 0
              will-change: left, right
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
              animation-delay: 1.125s
      &:not(.uploading) .progress
        opacity: 0
  &.submitted .container.centered
    display: none
  &:not(.submitted) .uploading.images
    display: none

@keyframes indeterminate
  0%
    left: -35%
    right: 100%
  60%
    left: 100%
    right: -90%
  100%
    left: 100%
    right: -90%

@keyframes indeterminate-short
  0%
    left: -200%
    right: 100%
  60%
    left: 107%
    right: -8%
  100%
    left: 107%
    right: -8%