vault/ui/app/styles/components/action-block.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

@mixin stacked-grid {
  grid-template-columns: 1fr;
  grid-row: 1/1;
}
@mixin stacked-content {
  margin-bottom: $spacing-24;
}

.action-block-width {
  width: 100%;
}

.action-block {
  grid-template-columns: 2fr 1fr;
  display: grid;
  padding: $spacing-16 $spacing-24;
  line-height: inherit;
  grid-gap: $spacing-16;

  @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-16 0;
  @include until($mobile) {
    display: block;
  }
}

.replication-actions-grid-item {
  flex-basis: 50%;
  padding: $spacing-12;
  display: flex;
  width: 100%;
}

.replication-actions-grid-item .action-block {
  width: 100%;
  @include until($mobile) {
    height: inherit;
  }
}