ui/src/widgets/card.scss

// Copyright (C) 2025 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "../assets/theme.scss";

$border-radius: $border-radius-large;

@layer pf-widgets {
  .pf-card {
    padding: 12px 16px;
    box-shadow: $box-shadow-1;
    border-radius: $border-radius;
    border: solid 1px var(--pf-color-border);

    &.pf-interactive {
      transition: $anim-timing;
      cursor: pointer;

      &:hover {
        box-shadow: $box-shadow-3;
      }
    }
  }

  .pf-card-stack {
    display: flex;
    flex-direction: column;
    border: solid 1px var(--pf-color-border);
    border-radius: $border-radius;
    box-shadow: $box-shadow-1;
    overflow: hidden;

    > .pf-card:not(:last-child) {
      border-bottom: 1px solid var(--pf-color-border);
    }

    > .pf-card {
      border-radius: unset;
      border: unset;
      box-shadow: unset;
    }

    > .pf-card.pf-interactive:hover {
      background-color: color_hover(transparent);
      box-shadow: unset;
    }

    &--horizontal {
      flex-direction: row;

      > .pf-card:not(:last-child) {
        border-right: 1px solid var(--pf-color-border);
        border-bottom: unset;
      }
    }
  }
}