/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ @mixin stacked-grid { grid-template-columns: 1fr; grid-row: 1/1; } @mixin stacked-content { margin-bottom: $spacing-l; } .action-block { @extend .selectable-card; grid-template-columns: 2fr 1fr; display: grid; padding: $spacing-m $spacing-l; line-height: inherit; grid-gap: $spacing-m; @include until($mobile) { @include stacked-grid(); } } .action-block-info { @include until($mobile) { @include stacked-content(); } } .action-block.stacked { @include stacked-grid(); } .stacked > .action-block-info { @include stacked-content(); } .action-block-title { font-size: $size-5; font-weight: $font-weight-bold; } .action-block-action { text-align: right; @include until($mobile) { text-align: left; } } /* Action Block Grid */ .replication-actions-grid-layout { display: flex; flex-wrap: wrap; margin: $spacing-m 0; @include until($mobile) { display: block; } } .replication-actions-grid-item { flex-basis: 50%; padding: $spacing-s; display: flex; width: 100%; } .replication-actions-grid-item .action-block { width: 100%; @include until($mobile) { height: inherit; } }