| .vm__page-description { |
| margin-top: 1em; |
| margin-bottom: 3em; |
| } |
| |
| .vm__upload { |
| align-items: center; |
| margin-bottom: 2em; |
| } |
| |
| .vm__upload-chooser { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: baseline; |
| margin: 0.7em 0.7em 0.7em 0; |
| } |
| .vm__upload-choose-label { |
| flex-grow: 0; |
| flex-shrink: 0; |
| flex-basis: auto; |
| margin-right: 4px; |
| } |
| |
| .vm__upload-choose-button { |
| padding: 0.5em 0.75em; |
| font-size: 1rem; |
| background-color: $primary-light; |
| min-width: 3em; |
| } |
| |
| .vm__upload-content { |
| flex: 1 0 220px; |
| max-width: 640px; |
| |
| .icon__exit { |
| float: right; |
| cursor: pointer; |
| width: 0.75em; |
| height: 0.75em; |
| margin: 0 1em 0.3em 0.3em; |
| } |
| } |
| |
| .vm__upload-controls { |
| display: flex; |
| align-items: center; |
| } |
| |
| .vm__upload-name { |
| flex: 1 0 220px; |
| background-color: $background-03; |
| padding: 0.5em; |
| } |
| |
| .vm__error-border, |
| .vm__active-border { |
| border-top: 2px solid $status-error; |
| margin-top: 4px; |
| padding-top: 4px; |
| } |
| .vm__active-border { |
| border-color: $status-ok; |
| } |
| |
| .vm__active-text { |
| color: $status-ok; |
| font-size: 0.8rem; |
| margin-top: 4px; |
| } |
| |
| .vm__upload-start { |
| flex-grow: 0; |
| flex-shrink: 0; |
| flex-basis: 100%; |
| margin-top: 1em; |
| |
| @media screen and (min-width: 760px) { |
| flex-basis: auto; |
| margin-top: 0; |
| margin-left: 0.75em; |
| } |
| } |