.modal { position: absolute; top: #{66 / $base-font-size}rem; right: #{400 / $base-font-size}rem; z-index: 100; } .modal-content { @extend %modal; height: #{400 / $base-font-size}rem; width: #{400 / $base-font-size}rem; padding: #{20 / $base-font-size}rem; .modal--reduced & { height: #{150 / $base-font-size}rem; } } .modal-content-folder { @extend .modal-content; height: #{150 / $base-font-size}rem; } .modal__exit-button { @include themify() { @extend %icon; } } .modal__header { display: flex; justify-content: space-between; margin-bottom: #{20 / $base-font-size}rem; } .new-file-form, .new-file-folder { display: flex; flex-wrap: wrap; } .new-file-form__name-label, .new-folder-form__name-label { @extend %hidden-element; } .new-file-form__name-input, .new-folder-form__name-input { margin-right: #{10 / $base-font-size}rem; } .modal__divider { text-align: center; margin: #{20 / $base-font-size}rem 0; } .uploader { height: #{200 / $base-font-size}rem; width: 100%; text-align: center; } .share-modal { @extend %modal; padding: #{20 / $base-font-size}rem; width: #{500 / $base-font-size}rem; } .share-modal__header { display: flex; justify-content: space-between; } .share-modal__section { width: 100%; display: flex; align-items: center; padding: #{10 / $base-font-size}rem 0; } .share-modal__label { width: #{86 / $base-font-size}rem; } .share-modal__input { flex: 1; } .keyboard-shortcuts { @extend %modal; padding: #{20 / $base-font-size}rem; width: #{450 / $base-font-size}rem; } .keyboard-shortcuts__header { display: flex; justify-content: space-between; margin-bottom: #{20 / $base-font-size}rem; } .keyboard-shortcuts__close { @include themify() { @extend %icon; } } .keyboard-shortcut-item { display: flex; & + & { margin-top: #{10 / $base-font-size}rem; } align-items: baseline; } .keyboard-shortcut__command { width: 50%; font-weight: bold; text-align: right; padding-right: #{10 / $base-font-size}rem; }