/* ====================================================== color-primary [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-primary-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-grey [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-error [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-warning [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-success [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-information [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-mortgage [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-mortgage-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-investments [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-investments-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-credit-cards [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-credit-cards-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-student [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-student-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-savings [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-savings-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-purple [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-purple-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== type-header-1 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-header-2 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-header-3 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-1 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-2 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-3 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-text [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-medium [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-bold [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-italic [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-uppercase [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== effect-shadow [EFFECT_TOKEN] ====================================================== */ /* ====================================================== effect-shadow-dark [EFFECT_TOKEN] ====================================================== */ /* ====================================================== effect-focus [EFFECT_TOKEN] ====================================================== */ /* ====================================================== icon-placeholder [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-summit-central-logo [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-dashboard [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-member-banking [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-search [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-profile [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-insights [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-comment [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-accounts [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-appointment [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-relationship [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-deposit [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-withdrawl [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-transfer [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-edit [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-show-password [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-pin-verification [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-correct [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== graphic-scu-logo [GRAPHIC_TOKEN] ====================================================== */ /* ====================================================== comp-card [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-card-title [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-card-description [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-card-content [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-tile [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-tile-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-tile-member-info [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-tile-member-info-member [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-tile-member-info-account-number [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-v-item [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-v-item-accounts [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-v-item-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-v-item-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-v-item-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== flex [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-fill [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-fill-container [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-align-self [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-space [FLEX_TOKENS] ====================================================== */ /* ====================================================== spacing [SPACING_TOKENS] ====================================================== */ /* ====================================================== col [COLUMN_TOKENS] ====================================================== */ /* ====================================================== colvw [COLUMN_TOKENS] ====================================================== */ :host { display: inline-block; } .comp-scu-tile { position: relative; background-color: var(--comp-scu-tile-background-color, white); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-tile-padding-left, 8px); padding-right: var(--comp-scu-tile-padding-right, 8px); padding-top: var(--comp-scu-tile-padding-top, 8px); padding-bottom: var(--comp-scu-tile-padding-bottom, 8px); } .comp-scu-tile > *:not(:last-child) { margin-right: var(--comp-scu-tile-item-spacing, 8px); } .comp-scu-tile .icon { position: relative; background-color: var(--comp-scu-tile-icon-background-color, #dbdbdb); width: 30px; height: 30px; } .comp-scu-tile .member-info { position: relative; display: flex; flex-flow: column nowrap; padding-left: var(--comp-scu-tile-member-info-padding-left, 0px); padding-right: var(--comp-scu-tile-member-info-padding-right, 0px); padding-top: var(--comp-scu-tile-member-info-padding-top, 0px); padding-bottom: var(--comp-scu-tile-member-info-padding-bottom, 0px); flex: var(--flex-fill, 1); } .comp-scu-tile .member-info > *:not(:last-child) { margin-bottom: var(--comp-scu-tile-member-info-item-spacing, 2px); } .comp-scu-tile .member-info .member { position: relative; font-size: var(--comp-scu-tile-member-info-member-font-size, 16px); text-align: var(--comp-scu-tile-member-info-member-text-align-horizontal, LEFT); color: var(--comp-scu-tile-member-info-member-color, #320127); font-family: var(--comp-scu-tile-member-info-member-font-family, "Proxima Nova"); font-weight: var(--comp-scu-tile-member-info-member-font-weight, 400); line-height: var(--comp-scu-tile-member-info-member-line-height, 18.75px); letter-spacing: var(--comp-scu-tile-member-info-member-letter-spacing, 0px); } .comp-scu-tile .member-info .account-number { position: relative; font-size: var(--comp-scu-tile-member-info-account-number-font-size, 9px); text-align: var(--comp-scu-tile-member-info-account-number-text-align-horizontal, LEFT); color: var(--comp-scu-tile-member-info-account-number-color, #6b0153); font-family: var(--comp-scu-tile-member-info-account-number-font-family, "Proxima Nova"); font-weight: var(--comp-scu-tile-member-info-account-number-font-weight, 400); line-height: var(--comp-scu-tile-member-info-account-number-line-height, 10.55px); letter-spacing: var(--comp-scu-tile-member-info-account-number-letter-spacing, 0px); }