// iOS Action Menu // -------------------------------------------------- $action-menu-ios-group-margin: 8px !default; $action-menu-ios-background-color: rgba(243,243,243,.95) !default; $action-menu-ios-border-color: #d2d2d6 !default; $action-menu-ios-border-radius: 4px !default; $action-menu-ios-label-color: #8a8a8a !default; $action-menu-ios-label-font-size: 1.3rem !default; $action-menu-ios-button-color: #007aff !default; $action-menu-ios-button-font-size: 2rem !default; $action-menu-ios-icon-font-size: 1.4em !default; .action-menu-ios { text-align: center; .action-menu-container { padding: 0 $action-menu-ios-group-margin; } .action-menu-group { margin-top: $action-menu-ios-group-margin; margin-bottom: $action-menu-ios-group-margin; } .action-menu-label, .action-menu-button { position: relative; display: flex; justify-content: center; align-items: center; margin: 0; border: 0; min-height: 44px; background: $action-menu-ios-background-color; font-weight: 400; @include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border); } .action-menu-label { font-size: $action-menu-ios-label-font-size; color: $action-menu-ios-label-color; border-radius: 0; } .action-menu-button { font-size: $action-menu-ios-button-font-size; color: $action-menu-ios-button-color; border-radius: 0; } .action-menu-label:first-child, .action-menu-button:first-child { border-top-left-radius: $action-menu-ios-border-radius; border-top-right-radius: $action-menu-ios-border-radius; } .action-menu-label:last-child, .action-menu-button:last-child { border-bottom-left-radius: $action-menu-ios-border-radius; border-bottom-right-radius: $action-menu-ios-border-radius; } .action-menu-container icon { display: flex; align-items: center; position: absolute; top: 0; left: 0; height: 100%; padding: 0 10px 2px; font-size: $action-menu-ios-icon-font-size; } }