| | |
|---|
| | | |
|---|
| | | & > .callout-content { |
|---|
| | | display: grid; |
|---|
| | | transition: grid-template-rows 0.3s ease; |
|---|
| | | |
|---|
| | | & > .callout-content-inner { |
|---|
| | | transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1); |
|---|
| | | overflow: hidden; |
|---|
| | | |
|---|
| | | & > :first-child { |
|---|
| | | margin-top: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | --callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>'); |
|---|
| | | --callout-icon-abstract: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg>'); |
|---|
| | |
|---|
| | | --callout-icon: var(--callout-icon-quote); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.is-collapsed > .callout-title > .fold-callout-icon { |
|---|
| | | &.is-collapsed { |
|---|
| | | & > .callout-title > .fold-callout-icon { |
|---|
| | | transform: rotateZ(-90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .callout-content > :first-child { |
|---|
| | | transition: |
|---|
| | | height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1), |
|---|
| | | margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1); |
|---|
| | | overflow-y: clip; |
|---|
| | | height: 0; |
|---|
| | | margin-top: -1rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .callout-title { |
|---|
