u

code/base-project/base-vue/packages/ao-design/src/card/index.scss

@@ -0,0 +1,92 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$card-prefix: '#{$prefix}-card';
+
+.#{$card-prefix} {
+  font: 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  background-color: $bg-color-container;
+  color: $text-color-base;
+
+  &.#{$card-prefix}-hover {
+    cursor: pointer;
+    &:hover {
+      box-shadow: $shadow-surface;
+    }
+
+    .#{$card-prefix}-cover {
+      margin-top: -1px;
+      margin-inline-start: -1px;
+      margin-inline-end: -1px;
+    }
+  }
+
+  &.#{$card-prefix}-border {
+    border: 1px solid $border-color;
+  }
+
+  .#{$card-prefix}-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 16px;
+    position: relative;
+    border-bottom: 1px solid transparent;
+
+    &.#{$card-prefix}-separator {
+      border-color: $separator-color;
+    }
+
+    .#{$card-prefix}-header-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin-right: 16px;
+      .#{$card-prefix}-title {
+        font-size: 16px;
+        color: $text-color-base;
+        font-weight: 600;
+        word-break: break-all;
+      }
+      .#{$card-prefix}-subtitle {
+        font-size: 14px;
+        color: $text-color-secondary;
+        word-break: break-all;
+      }
+    }
+
+    .#{$card-prefix}-actions {
+      float: right;
+    }
+  }
+
+  .#{$card-prefix}-body {
+    display: flow-root;
+    padding: 16px;
+  }
+  .#{$card-prefix}-footer {
+    border-top: 1px solid transparent;
+
+    &.#{$card-prefix}-separator {
+      border-color: $separator-color;
+    }
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+  }
+
+  .#{$card-prefix}-cover {
+    display: flow-root;
+    img {
+      display: flow-root;
+      width: 100%;
+      max-height: 100%;
+    }
+  }
+}