79 lines
1.6 KiB
SCSS
79 lines
1.6 KiB
SCSS
|
@use '.././../partials/flex';
|
||
|
|
@use '.././../partials/dir';
|
||
|
|
|
||
|
|
.info-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
line-height: 0;
|
||
|
|
padding: var(--sp-tight);
|
||
|
|
@include dir.prop(border-left, 4px solid transparent, none);
|
||
|
|
@include dir.prop(border-right, none, 4px solid transparent);
|
||
|
|
|
||
|
|
& > .ic-btn {
|
||
|
|
padding: 0;
|
||
|
|
border-radius: 4;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__content {
|
||
|
|
margin: 0 var(--sp-tight);
|
||
|
|
@extend .cp-fx__item-one;
|
||
|
|
|
||
|
|
& > *:nth-child(2) {
|
||
|
|
margin-top: var(--sp-ultra-tight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&--rounded {
|
||
|
|
@include dir.prop(
|
||
|
|
border-radius,
|
||
|
|
0 var(--bo-radius) var(--bo-radius) 0,
|
||
|
|
var(--bo-radius) 0 0 var(--bo-radius)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--surface {
|
||
|
|
border-color: var(--bg-surface-border);
|
||
|
|
background-color: var(--bg-surface-hover);
|
||
|
|
|
||
|
|
}
|
||
|
|
&--primary {
|
||
|
|
border-color: var(--bg-primary);
|
||
|
|
background-color: var(--bg-primary-hover);
|
||
|
|
& .text {
|
||
|
|
color: var(--tc-primary-high);
|
||
|
|
&-b3 {
|
||
|
|
color: var(--tc-primary-normal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&--positive {
|
||
|
|
border-color: var(--bg-positive-border);
|
||
|
|
background-color: var(--bg-positive-hover);
|
||
|
|
& .text {
|
||
|
|
color: var(--tc-positive-high);
|
||
|
|
&-b3 {
|
||
|
|
color: var(--tc-positive-normal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&--caution {
|
||
|
|
border-color: var(--bg-caution-border);
|
||
|
|
background-color: var(--bg-caution-hover);
|
||
|
|
& .text {
|
||
|
|
color: var(--tc-caution-high);
|
||
|
|
&-b3 {
|
||
|
|
color: var(--tc-caution-normal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&--danger {
|
||
|
|
border-color: var(--bg-danger-border);
|
||
|
|
background-color: var(--bg-danger-hover);
|
||
|
|
& .text {
|
||
|
|
color: var(--tc-danger-high);
|
||
|
|
&-b3 {
|
||
|
|
color: var(--tc-danger-normal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|