/* === Actions === */ .actions-backdrop { .modal-backdrop(); } .actions-modal { position: absolute; left: 0; bottom: 0; z-index: 13500; width: 100%; transform: translate3d(0, 100%, 0); display: none; max-height: 100%; .scrollable(); transition-property: transform; &.modal-in, &.modal-out { transition-duration: 300ms; } &.not-animated { transition-duration: 0ms; } &.modal-in { transform: translate3d(0, 0, 0); } &.modal-out { z-index: 13500 - 1; transform: translate3d(0, 100%, 0); } @media (min-width: 496px) { width: 480px; left: 50%; margin-left: -240px; } } .actions-group { position: relative; } .actions-button, .actions-label { width: 100%; font-weight: normal; margin: 0; box-sizing: border-box; display: block; position: relative; a { text-decoration: none; color: inherit; display: block; } b, &.actions-button-bold { font-weight: 500; } } .actions-button { cursor: pointer; display: flex; } .actions-button-media { flex-shrink: 0; display: flex; align-items: center; } .actions-button-text { width: 100%; flex-shrink: 1; } .actions-label { line-height: 1.3; display: flex; align-items: center; } .actions-grid { .actions-group { display: flex; flex-wrap: wrap; justify-content: flex-start; } .actions-button { width: 100% / 3; display: block; } .actions-button-media { margin-left: auto; margin-right: auto; } .actions-button-text { margin-left: 0 !important; text-align: center; } } & when (@includeIosTheme) { @import url('./actions-ios.less'); } & when (@includeMdTheme) { @import url('./actions-md.less'); }