UNPKG

ten-design-vue

Version:

ten-vue

111 lines (93 loc) 1.74 kB
/* dependencies button */ @import "../vars.less"; .ten-modal { width: 50%; background: #ffffff; margin: 0 auto; position: relative; top: 20vh; border-radius: @modal-border-radius-default; box-shadow: @shadow-level-1; &--center { top: 50%; transform: translateY(-50%); } &__wrapper { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10001; overflow: auto; } &__mask { background: rgba(0, 0, 0, .5); position: fixed; left: 0; top: 0; right: 0; bottom: 0; } &__header { position: relative; display: flex; padding: 20px 24px; &-title { font-size: @title-level-3-size; color: @text-color; font-weight: bold; } &-close { position: absolute; top: 19px; right: 20px; font-size: @text-level-1-size; padding: 5px; color: @text-color-lighter-2; cursor: pointer; } &-icon { font-size: 24px; margin-right: @modal-icon-right; &--error { color: @error-color; } &--warning { color: @warning-color } &--success { color: @success-color } &--info { color: @info-color } } } &__content { padding: 18px 24px 30px; position: relative; color: @text-color-lighter-1; } &__footer { position: relative; padding: 15px 24px; text-align: right; &::before { content: ''; width: 100%; height: 1px; position: absolute; left: 0; right: 0; top: 0; background: #F0F0F0; } &-btn { min-width: auto; } .ten-button + .ten-button { margin-left: 8px; } } }