Untitled
unknown
plain_text
2 years ago
3.1 kB
5
Indexable
@import '@btgclient-web/orquestra/sass/tokens-typography'; @import '@btgclient-web/orquestra/sass/tokens-spacing'; .invest-flex { display: flex; flex-direction: column; width: 100%; gap: 16px; &__title { color: var(--emphasis-base-high); font-size: $fontsize-18; font-weight: $fontweight-regular; line-height: $lineheight-medium; margin-bottom: 8px; &--size18 { font-size: $fontsize-18; } &--size14 { color: var(--emphasis-base-medium); font-size: $fontsize-14; } } &__text { color: var(--emphasis-base-medium); font-size: $fontsize-16; font-weight: $fontweight-regular; line-height: $lineheight-medium; text-align: justify; &--emphasis { color: var(--emphasis-base-high); } &--margin-botton-24 { margin-bottom: 24px; } } &__content-detail { display: flex; z-index: 1; flex-direction: column; align-items: flex-start; width: 100%; margin-top: -32px; padding: 24px; border: 1px solid var(--outline); border-radius: 4px; background: var(--neutral-state-enabled); &-item { display: flex; flex-flow: row wrap; gap: 56px; align-items: flex-start; justify-content: flex-start; width: 100%; @media screen and (max-width: 840px) { gap: 16px; } } .item-direction-colunm { flex-direction: column; gap: 24px; } &-group { display: flex; flex-direction: column; gap: 8px; max-width: 344px; } &-base { display: flex; align-items: baseline; gap: 8px; min-width: 200px; white-space: nowrap; } } &__content-info { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 24px; border: 1px solid var(--outline); border-radius: 4px; background: var(--neutral-state-enabled); &-item { display: grid; grid-template-columns: 33% 33%; gap: 8px; align-items: baseline; width: 100%; list-style-type: '• '; @media screen and (max-width: 700px) { grid-template-columns: 100%; } @media screen and (max-width: 900px) and (min-width: 701px) { grid-template-columns: 50% 50%; } } &-group { display: flex; flex-flow: row wrap; gap: 48px; &-item { display: flex; flex: 0 0 47%; flex-direction: column; gap: 8px; @media screen and (max-width: 680px) { flex: 100%; } } } } &__divider { width: 100%; margin-bottom: 32px; margin-top: 32px; &-vertical { width: 10px; } } &__actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 48px; } }
Editor is loading...