@use "sass:map"; @use "sass:list"; @use "./functions.scss" as *; [data-div-type="element"] { &[data-element-type="login"], &[data-element-type="resetPassword"], &[data-element-type="forgotPassword"] { width: var( --_sf-el-wh-st-mx, calc( 1% * var( --_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))) ) ) ); margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn))); // aspect-ratio: 1 / var(--_sf-aspect-ratio); position: relative; & > .wrapper { // display: flex; // align-items: center; // justify-content: center; width: 100%; // height: 100%; min-height: prepareMediaVariable(--_ctm-lt-ht); } // & form { // width: 100%; // height: 100%; // } &[data-widget-border="true"] { .search-wrapper { border-color: var(--_ctm-dn-sh-br-br-cr, var(--_tst-dn-sh-br-br-cr)); border-style: var(--_ctm-dn-sh-br-br-se, var(--_tst-dn-sh-br-br-se)); border-width: var(--_ctm-dn-sh-br-br-wh, var(--_tst-dn-sh-br-br-wh)); } } &[data-widget-shadow="false"] { --_show-shadow: none; } &[data-show-shadow="false"] { --_show-shadow: none; } // Form > Icons > show/hide. Scoped to the fields' leading icons: the password // field's eye is a control, not a designed icon, so it stays visible and keeps // its own styling. A dedicated variable (not `--_show-icon`) keeps this clear of // the Login button's icon, which reads that one. &[data-field-icon="false"] { --_field-icon-display: none; } .auth-container { .logn__main__div { height: var(--_height-100-dvh); max-height: var(--_height-100-dvh); overflow: clip; width: 100%; position: var(--_p-relative); & > div { &.loader { position: var(--_p-absolute); z-index: var(--_higher-zIndex); background: var(--_base-white); border-radius: 50%; display: var(--_d-flex); align-items: center; justify-content: center; --_sf-in-sz: 1.2; width: calc(var(--_sf-img-sz) * var(--_sf-in-sz)); height: calc(var(--_sf-img-sz) * var(--_sf-in-sz)); --_sf-img-sz: 80px; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: clip; &::before { animation: shine 1.5s infinite; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100% ); content: ""; display: block; height: 90px; left: -80%; position: absolute; top: 0px; transform: skewX(-45deg); width: 70%; z-index: 2; } & > img { // z-index: 3; width: var(--_sf-img-sz); height: var(--_sf-img-sz); } } &.wrapper { display: var(--_d-grid); --_col-count: 2; --_col-gap: 0px; grid-template-columns: getRepeatColWidth(--_col-count, --_col-gap); & > div { width: 100%; &.left__div { display: var(--_d-flex); background: var(--_sf-bg-img) no-repeat 0 0 / cover var(--_gray-900); background-size: 75%; height: 100%; align-items: center; img { width: 100%; object-fit: cover; } & > div { &.left__box__parent { max-width: 65%; margin-inline: auto; display: var(--_d-flex); flex-direction: column; --_sf-gp: var(--_gap-24); gap: calc(var(--_sf-gp) * 1.25); & > div { &.box { display: var(--_d-flex); color: var(--_base-white); --_sf-img-size: 50px; // --_sf-gp: var(--_gap-24); gap: var(--_sf-gp); &::before { content: ""; background: var(--_sf-img) no-repeat center center / cover; width: var(--_sf-img-size); height: var(--_sf-img-size); } & > div { display: var(--_d-flex); flex-direction: column; row-gap: calc(var(--_sf-gp) * 0.5); align-items: flex-start; flex: 0 0 calc(100% - var(--_sf-img-size) - var(--_sf-gp)); & > p { color: var(--_base-white); margin: 0; &.title { font-weight: var(--_fw-400); font-size: var(--_fs-24); } &.desc { font-size: var(--_fs-16); line-height: 1.6; } } } } } } } } } } } } // General Container Styles .loginContainer { display: flex; justify-content: center; align-items: center; // margin: var(--_ctm-lt-mn); padding: prepareMediaVariable(--_ctm-lt-pg); background-color: prepareMediaVariable( --_ctm-dn-ln-wt-bd-cr, prepareMediaVariable(--_ctm-dn-wt-bd-cr, transparent) ); border-color: prepareMediaVariable( --_ctm-dn-ln-wt-br-cr, prepareMediaVariable(--_ctm-dn-wt-br-cr, transparent) ); border-style: prepareMediaVariable( --_ctm-dn-ln-wt-br-se, prepareMediaVariable(--_ctm-dn-wt-br-se, none) ); border-width: prepareMediaVariable( --_ctm-dn-ln-wt-br-wh, prepareMediaVariable(--_ctm-dn-wt-br-wh, 0px) ); border-radius: prepareMediaVariable( --_ctm-dn-ln-wt-br-rs, prepareMediaVariable(--_ctm-dn-wt-br-rs, 0px) ); box-shadow: var( --_show-shadow, prepareMediaVariable( --_ctm-dn-ln-wt-sw-ae, prepareMediaVariable(--_ctm-dn-wt-sw-ae, 0px 0px) ) prepareMediaVariable( --_ctm-dn-ln-wt-sw-br, prepareMediaVariable(--_ctm-dn-wt-sw-br, 0px) ) prepareMediaVariable( --_ctm-dn-ln-wt-sw-sd, prepareMediaVariable(--_ctm-dn-wt-sw-sd, 0px) ) prepareMediaVariable( --_ctm-dn-ln-wt-sw-cr, prepareMediaVariable(--_ctm-dn-wt-sw-cr, transparent) ) ); } // Login Box .loginBox { width: 100%; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; gap: prepareMediaVariable( --_ctm-dn-ln-wt-im-gp, prepareMediaVariable(--_ctm-dn-wt-im-gp, 0px) ); padding: prepareMediaVariable( --_ctm-dn-ln-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pg, 0px) ); } .login_box_header { display: flex; flex-direction: column; padding: var(--_ctm-mob-dn-wt-ds-pg, var(--_ctm-tab-dn-wt-ds-pg, var(--_ctm-dn-wt-ds-pg))); gap: var( --_ctm-mob-dn-wt-ds-im-gp, var(--_ctm-tab-dn-wt-ds-im-gp, var(--_ctm-dn-wt-ds-im-gp)) ); .rounded__fill { width: 60px; height: 60px; background-color: var(--_success-50); border-radius: 50%; // margin-bottom: 24px; display: flex; align-items: center; justify-content: center; svg { width: 26px; height: 26px; path { stroke: var(--_success-600); } } &.remove__bg { background-color: transparent; } } .rounded_icon { width: 40px; height: 40px; background-color: var(--_gray-200); border-radius: 50%; margin-bottom: 24px; } & > div:has(.log_in_title) { display: flex; flex-direction: column; gap: 4px; } // Title Styles .log_in_title { font-family: var( --_ctm-mob-dn-te-ft-fy, var(--_ctm-tab-dn-te-ft-fy, var(--_ctm-dn-te-ft-fy)) ); text-transform: var( --_ctm-mob-dn-te-tt-tm, var(--_ctm-tab-dn-te-tt-tm, var(--_ctm-dn-te-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-te-wd-wp, var(--_ctm-tab-dn-te-wd-wp, var(--_ctm-dn-te-wd-wp)) ); word-break: var( --_ctm-mob-dn-te-wd-bk, var(--_ctm-tab-dn-te-wd-bk, var(--_ctm-dn-te-wd-bk)) ); color: var(--_ctm-mob-dn-te-cr, var(--_ctm-tab-dn-te-cr, var(--_ctm-dn-te-cr))); font-weight: var( --_ctm-mob-dn-te-ft-wt, var(--_ctm-tab-dn-te-ft-wt, var(--_ctm-dn-te-ft-wt)) ); font-size: var( --_ctm-mob-dn-te-ft-se, var(--_ctm-tab-dn-te-ft-se, var(--_ctm-dn-te-ft-se)) ); text-decoration: var( --_ctm-mob-dn-te-ue, var(--_ctm-tab-dn-te-ue, var(--_ctm-dn-te-ue,)) ); letter-spacing: var( --_ctm-mob-dn-te-lr-sg, var(--_ctm-tab-dn-te-lr-sg, var(--_ctm-dn-te-lr-sg)) ); line-height: var( --_ctm-mob-dn-te-le-ht, var(--_ctm-tab-dn-te-le-ht, var(--_ctm-dn-te-le-ht)) ); font-style: var( --_ctm-mob-dn-te-ft-se-ic, var(--_ctm-tab-dn-te-ft-se-ic, var(--_ctm-dn-te-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-te-tt-an, var(--_ctm-tab-dn-te-tt-an, var(--_ctm-dn-te-tt-an)) ); } .desc { word-break: break-word; font-family: var( --_ctm-mob-dn-dn-ft-fy, var(--_ctm-tab-dn-dn-ft-fy, var(--_ctm-dn-dn-ft-fy)) ); text-transform: var( --_ctm-mob-dn-dn-tt-tm, var(--_ctm-tab-dn-dn-tt-tm, var(--_ctm-dn-dn-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-dn-wd-wp, var(--_ctm-tab-dn-dn-wd-wp, var(--_ctm-dn-dn-wd-wp)) ); color: var(--_ctm-mob-dn-dn-cr, var(--_ctm-tab-dn-dn-cr, var(--_ctm-dn-dn-cr))); font-weight: var( --_ctm-mob-dn-dn-ft-wt, var(--_ctm-tab-dn-dn-ft-wt, var(--_ctm-dn-dn-ft-wt)) ); font-size: var( --_ctm-mob-dn-dn-ft-se, var(--_ctm-tab-dn-dn-ft-se, var(--_ctm-dn-dn-ft-se)) ); text-decoration: var( --_ctm-mob-dn-dn-ue, var(--_ctm-tab-dn-dn-ue, var(--_ctm-dn-dn-ue,)) ); letter-spacing: var( --_ctm-mob-dn-dn-lr-sg, var(--_ctm-tab-dn-dn-lr-sg, var(--_ctm-dn-dn-lr-sg)) ); line-height: var( --_ctm-mob-dn-dn-le-ht, var(--_ctm-tab-dn-dn-le-ht, var(--_ctm-dn-dn-le-ht)) ); font-style: var( --_ctm-mob-dn-dn-ft-se-ic, var(--_ctm-tab-dn-dn-ft-se-ic, var(--_ctm-dn-dn-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-dn-tt-an, var(--_ctm-tab-dn-dn-tt-an, var(--_ctm-dn-dn-tt-an)) ); } } .sso_verify { border: 1px solid red; } .form_fields { // margin-top: 36px; gap: var( --_ctm-mob-dn-ln-wt-im-gp, var(--_ctm-tab-dn-ln-wt-im-gp, var(--_ctm-dn-ln-wt-im-gp)) ); display: flex; flex-direction: column; .btn__with__text[data-btn-name="resetButton"] { width: 100%; margin-top: 10px; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-rt-bn-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-le-ht)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-hr-se-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-gp)); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-rs) ); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-cr)); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-fy) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-tm) ); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-wp)); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se)); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-le-ht) ); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-se)); path { stroke: var( --_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-in-c1) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-rt-bn-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } } // Form Group (For Email and Password) .field__group { // margin-bottom: 16px; position: relative; gap: var( --_ctm-mob-dn-fm-fd-is-im-gp, var(--_ctm-tab-dn-fm-fd-is-im-gp, var(--_ctm-dn-fm-fd-is-im-gp)) ); display: flex; flex-direction: column; .input__label { // display: flex; // align-items: center; font-family: var( --_ctm-mob-dn-fm-ll-ft-fy, var(--_ctm-tab-dn-fm-ll-ft-fy, var(--_ctm-dn-fm-ll-ft-fy)) ); text-transform: var( --_ctm-mob-dn-fm-ll-tt-tm, var(--_ctm-tab-dn-fm-ll-tt-tm, var(--_ctm-dn-fm-ll-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-fm-ll-wd-wp, var(--_ctm-tab-dn-fm-ll-wd-wp, var(--_ctm-dn-fm-ll-wd-wp)) ); word-break: var( --_ctm-mob-dn-fm-ll-wd-bk, var(--_ctm-tab-dn-fm-ll-wd-bk, var(--_ctm-dn-fm-ll-wd-bk)) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } color: var(--_ctm-mob-dn-fm-ll-cr, var(--_ctm-tab-dn-fm-ll-cr, var(--_ctm-dn-fm-ll-cr))); font-weight: var( --_ctm-mob-dn-fm-ll-ft-wt, var(--_ctm-tab-dn-fm-ll-ft-wt, var(--_ctm-dn-fm-ll-ft-wt)) ); font-size: var( --_ctm-mob-dn-fm-ll-ft-se, var(--_ctm-tab-dn-fm-ll-ft-se, var(--_ctm-dn-fm-ll-ft-se)) ); text-decoration: var( --_ctm-mob-dn-fm-ll-ue, var(--_ctm-tab-dn-fm-ll-ue, var(--_ctm-dn-fm-ll-ue)) ); letter-spacing: var( --_ctm-mob-dn-fm-ll-lr-sg, var(--_ctm-tab-dn-fm-ll-lr-sg, var(--_ctm-dn-fm-ll-lr-sg)) ); line-height: var( --_ctm-mob-dn-fm-ll-le-ht, var(--_ctm-tab-dn-fm-ll-le-ht, var(--_ctm-dn-fm-ll-le-ht)) ); font-style: var( --_ctm-mob-dn-fm-ll-ft-se-ic, var(--_ctm-tab-dn-fm-ll-ft-se-ic, var(--_ctm-dn-fm-ll-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-fm-ll-tt-an, var(--_ctm-tab-dn-fm-ll-tt-an, var(--_ctm-dn-fm-ll-tt-an)) ); // gap: 4px; // margin-bottom: 4px; // font-size: 16px; // font-weight: 500; } .input__field { display: flex; align-items: center; border-radius: prepareMediaVariable(--_ctm-dn-fm-it-br-rs); border-color: var( --_ctm-mob-dn-fm-it-br-cr, var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr)) ); border-radius: var( --_ctm-mob-dn-fm-it-br-rs, var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs)) ); border-style: var( --_ctm-mob-dn-fm-it-br-se, var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se)) ); border-width: var( --_ctm-mob-dn-fm-it-br-wh, var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh)) ); box-shadow: var( --_ctm-mob-dn-fm-it-sw-ae, var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae)) ) var( --_ctm-mob-dn-fm-it-sw-br, var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br)) ) var( --_ctm-mob-dn-fm-it-sw-sd, var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd)) ) var( --_ctm-mob-dn-fm-it-sw-cr, var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr)) ); background-color: var( --_ctm-mob-dn-fm-it-bd-cr, var(--_ctm-tab-dn-fm-it-bd-cr, var(--_ctm-dn-fm-it-bd-cr)) ); padding: var( --_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg)) ); gap: prepareMediaVariable(--_ctm-dn-fm-it-im-gp); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; &:focus-within { outline: 0 none; outline-offset: 0; box-shadow: 0px 0px 1px rgba(16, 24, 40, 0.05), 0px 0px 0px 1px var(--_primary-100) !important; border: 1px solid var(--_primary-300); } // Invalid Input Field &.invalid { border-color: var(--_error-300) !important; outline: 2px solid var(--_error-50); &:focus { outline: 0 none; outline-offset: 0; box-shadow: 0px 0px 1px rgba(16, 24, 40, 0.05), 0px 0px 0px 1px var(--_error-100) !important; border: 1px solid var(--_error-300); } } // position: relative; // Deliberately no blanket `svg` rule here. It also matched the password // field's eye button, so Icons > Size / Color / Stroke Width restyled a // control that section does not own. The icons Icons DOES own carry the // vars on their own classes below. .placeholder_icon_start_login { // position: absolute; z-index: 10; // top: 12px; // left: 10px; display: var(--_field-icon-display, flex); align-items: center; svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25); } } } @media (min-width: 768px) and (max-width: 1023px) { .placeholder_icon_start_login { top: 10px; } } @media (max-width: 767px) { .placeholder_icon_start_login { top: 8px; } } .placeholder_icon_start { // position: absolute; z-index: 10; display: var(--_field-icon-display, flex); align-items: center; // top: 11px; // left: 10px; svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-is-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-fm-is-se-wh, 1.25); } } } @media (min-width: 768px) and (max-width: 1023px) { .placeholder_icon_start { top: 10px; } } @media (max-width: 767px) { .placeholder_icon_start { top: 8px; } } .placeholder_icon_end { position: absolute; right: 10px; z-index: 10; top: 50%; transform: translateY(-50%); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px prepareMediaVariable(--_ctm-dn-fm-it-bd-cr) inset; -webkit-text-fill-color: var( --_ctm-mob-dn-fm-it-cr, var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr)) ); } input { // padding-left: 38px; font-family: var( --_ctm-mob-dn-fm-it-ft-fy, var(--_ctm-tab-dn-fm-it-ft-fy, var(--_ctm-dn-fm-it-ft-fy)) ); text-transform: var( --_ctm-mob-dn-fm-it-tt-tm, var(--_ctm-tab-dn-fm-it-tt-tm, var(--_ctm-dn-fm-it-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-fm-it-wd-wp, var(--_ctm-tab-dn-fm-it-wd-wp, var(--_ctm-dn-fm-it-wd-wp)) ); word-break: var( --_ctm-mob-dn-fm-it-wd-bk, var(--_ctm-tab-dn-fm-it-wd-bk, var(--_ctm-dn-fm-it-wd-bk)) ); color: var( --_ctm-mob-dn-fm-it-cr, var(--_ctm-tab-dn-fm-it-cr, var(--_ctm-dn-fm-it-cr)) ); font-weight: var( --_ctm-mob-dn-fm-it-ft-wt, var(--_ctm-tab-dn-fm-it-ft-wt, var(--_ctm-dn-fm-it-ft-wt)) ); font-size: var( --_ctm-mob-dn-fm-it-ft-se, var(--_ctm-tab-dn-fm-it-ft-se, var(--_ctm-dn-fm-it-ft-se)) ); text-decoration: var( --_ctm-mob-dn-fm-it-ue, var(--_ctm-tab-dn-fm-it-ue, var(--_ctm-dn-fm-it-ue)) ); letter-spacing: var( --_ctm-mob-dn-fm-it-lr-sg, var(--_ctm-tab-dn-fm-it-lr-sg, var(--_ctm-dn-fm-it-lr-sg)) ); line-height: var( --_ctm-mob-dn-fm-it-le-ht, var(--_ctm-tab-dn-fm-it-le-ht, var(--_ctm-dn-fm-it-le-ht)) ); font-style: var( --_ctm-mob-dn-fm-it-ft-se-ic, var(--_ctm-tab-dn-fm-it-ft-se-ic, var(--_ctm-dn-fm-it-ft-se-ic)) ); // Always left, never the Input section's Text Align. What the shopper is // typing has to sit where the caret starts and next to the field's leading // icon; centred or right-aligned entry reads as broken, and the alignment // control is there for the label and button text, not for live input. text-align: left; // border-color: var(--_ctm-mob-dn-fm-it-br-cr, // var(--_ctm-tab-dn-fm-it-br-cr, var(--_ctm-dn-fm-it-br-cr))); // border-radius: var(--_ctm-mob-dn-fm-it-br-rs, // var(--_ctm-tab-dn-fm-it-br-rs, var(--_ctm-dn-fm-it-br-rs))); // border-style: var(--_ctm-mob-dn-fm-it-br-se, // var(--_ctm-tab-dn-fm-it-br-se, var(--_ctm-dn-fm-it-br-se))); // border-width: var(--_ctm-mob-dn-fm-it-br-wh, // var(--_ctm-tab-dn-fm-it-br-wh, var(--_ctm-dn-fm-it-br-wh))); // box-shadow: var(--_ctm-mob-dn-fm-it-sw-ae, // var(--_ctm-tab-dn-fm-it-sw-ae, var(--_ctm-dn-fm-it-sw-ae))) var(--_ctm-mob-dn-fm-it-sw-br, // var(--_ctm-tab-dn-fm-it-sw-br, var(--_ctm-dn-fm-it-sw-br))) var(--_ctm-mob-dn-fm-it-sw-sd, // var(--_ctm-tab-dn-fm-it-sw-sd, var(--_ctm-dn-fm-it-sw-sd))) var(--_ctm-mob-dn-fm-it-sw-cr, // var(--_ctm-tab-dn-fm-it-sw-cr, var(--_ctm-dn-fm-it-sw-cr))); &::placeholder { background-color: transparent; } } } // Show/hide password. A control rather than a designed icon, so it is fixed at // a readable size and the Show Icon toggle leaves it alone — hiding it would // strand anyone who needs to check what they typed. Color is the exception: it // follows the field glyph beside it, so an editor recoloring the form's icons // does not leave this one stranded in gray. .view__icon { // position: absolute; z-index: 10; // top: 39px; // right: 10px; display: flex; align-items: center; svg { width: 20px; height: 20px; path { stroke: prepareMediaVariable(--_ctm-dn-fm-is-in-c1, var(--_gray-500)); stroke-width: 1.25; } } } @media (min-width: 768px) and (max-width: 1023px) { .view__icon { top: 34px; } } @media (max-width: 767px) { .view__icon { top: 35px; } } } // Input Field Styles .inputField { width: 100%; // padding: var(--_ctm-mob-dn-fm-it-pg, var(--_ctm-tab-dn-fm-it-pg, var(--_ctm-dn-fm-it-pg))); // padding: 10px; // border-radius: 6px; // border: 1px solid var(--_gray-300) !important; font-size: 14px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; // &:focus { // outline: 0 none; // outline-offset: 0; // box-shadow: // 0px 0px 1px rgba(16, 24, 40, 0.05), // 0px 0px 0px 1px var(--_primary-100) !important; // border: 1px solid var(--_primary-300); // } ::placeholder { color: var(--_thm-ty-h2-tt-cr); } } // Invalid Input Field // .invalid { // border-color: var(--_error-300) !important; // outline: 2px solid var(--_error-50); // &:focus { // outline: 0 none; // outline-offset: 0; // box-shadow: // 0px 0px 1px rgba(16, 24, 40, 0.05), // 0px 0px 0px 1px var(--_error-100) !important; // border: 1px solid var(--_error-300); // } // } // Error Text Styles .errorText { display: flex; align-items: center; gap: 4px; font-size: 12px; color: red; svg { display: flex; width: 13px; height: 13px; path { stroke: var(--_error-500); } } } // Submit Button .btn__with__text[data-btn-name="Login"] { margin-top: 10px; width: 100%; --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr))}; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-bn-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-le-ht)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-bn-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-bd-cr)); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-at)); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-gp)); border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-rs)); box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-cr)); border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-se)); border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-br-wh)); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-cr)); font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-fy)); text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-tm)); word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-wp)); word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-wd-bk)); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se)); font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-wt)); font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-ft-se-ic)); text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-tt-an)); letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-lr-sg)); line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-le-ht)); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se)); height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-se)); path { stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-in-c1)); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-fm-bn-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } // .submitButton { // width: 100%; // // padding: 12px; // // background-color: var(--_primary-500); // // color: #fff; // // color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr))); // // border-radius: 6px; // // border: none; // // margin-top: 16px; // cursor: pointer; // display: flex; // align-items: center; // justify-content: center; // background-color: var( // --_ctm-mob-dn-fm-bn-dt-se-bd-cr, // var(--_ctm-tab-dn-fm-bn-dt-se-bd-cr, var(--_ctm-dn-fm-bn-dt-se-bd-cr)) // ); // border-color: var( // --_ctm-mob-dn-fm-bn-dt-se-br-cr, // var(--_ctm-tab-dn-fm-bn-dt-se-br-cr, var(--_ctm-dn-fm-bn-dt-se-br-cr)) // ); // border-radius: var( // --_ctm-mob-dn-fm-bn-dt-se-br-rs, // var(--_ctm-tab-dn-fm-bn-dt-se-br-rs, var(--_ctm-dn-fm-bn-dt-se-br-rs)) // ); // border-style: var( // --_ctm-mob-dn-fm-bn-dt-se-br-se, // var(--_ctm-tab-dn-fm-bn-dt-se-br-se, var(--_ctm-dn-fm-bn-dt-se-br-se)) // ); // border-width: var( // --_ctm-mob-dn-fm-bn-dt-se-br-wh, // var(--_ctm-tab-dn-fm-bn-dt-se-br-wh, var(--_ctm-dn-fm-bn-dt-se-br-wh)) // ); // color: var( // --_ctm-mob-dn-fm-bn-dt-se-cr, // var(--_ctm-tab-dn-fm-bn-dt-se-cr, var(--_ctm-dn-fm-bn-dt-se-cr)) // ); // font-family: var( // --_ctm-mob-dn-fm-bn-dt-se-ft-fy, // var(--_ctm-tab-dn-fm-bn-dt-se-ft-fy, var(--_ctm-dn-fm-bn-dt-se-ft-fy)) // ); // font-size: var( // --_ctm-mob-dn-fm-bn-dt-se-ft-se, // var(--_ctm-tab-dn-fm-bn-dt-se-ft-se, var(--_ctm-dn-fm-bn-dt-se-ft-se)) // ); // font-style: var( // --_ctm-mob-dn-fm-bn-dt-se-ft-se-ic, // var(--_ctm-tab-dn-fm-bn-dt-se-ft-se-ic, var(--_ctm-dn-fm-bn-dt-se-ft-se-ic)) // ); // font-weight: var( // --_ctm-mob-dn-fm-bn-dt-se-ft-wt, // var(--_ctm-tab-dn-fm-bn-dt-se-ft-wt, var(--_ctm-dn-fm-bn-dt-se-ft-wt)) // ); // line-height: var( // --_ctm-mob-dn-fm-bn-dt-se-le-ht, // var(--_ctm-tab-dn-fm-bn-dt-se-le-ht, var(--_ctm-dn-fm-bn-dt-se-le-ht)) // ); // letter-spacing: var( // --_ctm-mob-dn-fm-bn-dt-se-lr-sg, // var(--_ctm-tab-dn-fm-bn-dt-se-lr-sg, var(--_ctm-dn-fm-bn-dt-se-lr-sg)) // ); // box-shadow: var( // --_ctm-mob-dn-fm-bn-dt-se-sw-ae, // var(--_ctm-tab-dn-fm-bn-dt-se-sw-ae, var(--_ctm-dn-fm-bn-dt-se-sw-ae)) // ) // var( // --_ctm-mob-dn-fm-bn-dt-se-sw-br, // var(--_ctm-tab-dn-fm-bn-dt-se-sw-br, var(--_ctm-dn-fm-bn-dt-se-sw-br)) // ) // var( // --_ctm-mob-dn-fm-bn-dt-se-sw-sd, // var(--_ctm-tab-dn-fm-bn-dt-se-sw-sd, var(--_ctm-dn-fm-bn-dt-se-sw-sd)) // ) // var( // --_ctm-mob-dn-fm-bn-dt-se-sw-cr, // var(--_ctm-tab-dn-fm-bn-dt-se-sw-cr, var(--_ctm-dn-fm-bn-dt-se-sw-cr)) // ); // text-decoration: var( // --_ctm-mob-dn-fm-bn-dt-se-ue, // var(--_ctm-tab-dn-fm-bn-dt-se-ue, var(--_ctm-dn-fm-bn-dt-se-ue)) // ); // padding: var( // --_ctm-mob-dn-fm-bn-dt-se-pg, // var(--_ctm-tab-dn-fm-bn-dt-se-pg, var(--_ctm-dn-fm-bn-dt-se-pg)) // ); // text-align: var( // --_ctm-mob-dn-fm-bn-dt-se-tt-an, // var(--_ctm-tab-dn-fm-bn-dt-se-tt-an, var(--_ctm-dn-fm-bn-dt-se-tt-an)) // ); // &:hover { // background-color: var( // --_ctm-mob-dn-fm-bn-hr-se-bd-cr, // var(--_ctm-tab-dn-fm-bn-hr-se-bd-cr, var(--_ctm-dn-fm-bn-hr-se-bd-cr)) // ); // border-color: var( // --_ctm-mob-dn-fm-bn-hr-se-br-cr, // var(--_ctm-tab-dn-fm-bn-hr-se-br-cr, var(--_ctm-dn-fm-bn-hr-se-br-cr)) // ); // border-radius: var( // --_ctm-mob-dn-fm-bn-hr-se-br-rs, // var(--_ctm-tab-dn-fm-bn-hr-se-br-rs, var(--_ctm-dn-fm-bn-hr-se-br-rs)) // ); // border-style: var( // --_ctm-mob-dn-fm-bn-hr-se-br-se, // var(--_ctm-tab-dn-fm-bn-hr-se-br-se, var(--_ctm-dn-fm-bn-hr-se-br-se)) // ); // border-width: var( // --_ctm-mob-dn-fm-bn-hr-se-br-wh, // var(--_ctm-tab-dn-fm-bn-hr-se-br-wh, var(--_ctm-dn-fm-bn-hr-se-br-wh)) // ); // color: var( // --_ctm-mob-dn-fm-bn-hr-se-cr, // var(--_ctm-tab-dn-fm-bn-hr-se-cr, var(--_ctm-dn-fm-bn-hr-se-cr)) // ); // font-family: var( // --_ctm-mob-dn-fm-bn-hr-se-ft-fy, // var(--_ctm-tab-dn-fm-bn-hr-se-ft-fy, var(--_ctm-dn-fm-bn-hr-se-ft-fy)) // ); // font-size: var( // --_ctm-mob-dn-fm-bn-hr-se-ft-se, // var(--_ctm-tab-dn-fm-bn-hr-se-ft-se, var(--_ctm-dn-fm-bn-hr-se-ft-se)) // ); // font-style: var( // --_ctm-mob-dn-fm-bn-hr-se-ft-se-ic, // var(--_ctm-tab-dn-fm-bn-hr-se-ft-se-ic, var(--_ctm-dn-fm-bn-hr-se-ft-se-ic)) // ); // font-weight: var( // --_ctm-mob-dn-fm-bn-hr-se-ft-wt, // var(--_ctm-tab-dn-fm-bn-hr-se-ft-wt, var(--_ctm-dn-fm-bn-hr-se-ft-wt)) // ); // line-height: var( // --_ctm-mob-dn-fm-bn-hr-se-le-ht, // var(--_ctm-tab-dn-fm-bn-hr-se-le-ht, var(--_ctm-dn-fm-bn-hr-se-le-ht)) // ); // letter-spacing: var( // --_ctm-mob-dn-fm-bn-hr-se-lr-sg, // var(--_ctm-tab-dn-fm-bn-hr-se-lr-sg, var(--_ctm-dn-fm-bn-hr-se-lr-sg)) // ); // box-shadow: var( // --_ctm-mob-dn-fm-bn-hr-se-sw-ae, // var(--_ctm-tab-dn-fm-bn-hr-se-sw-ae, var(--_ctm-dn-fm-bn-hr-se-sw-ae)) // ) // var( // --_ctm-mob-dn-fm-bn-hr-se-sw-br, // var(--_ctm-tab-dn-fm-bn-hr-se-sw-br, var(--_ctm-dn-fm-bn-hr-se-sw-br)) // ) // var( // --_ctm-mob-dn-fm-bn-hr-se-sw-sd, // var(--_ctm-tab-dn-fm-bn-hr-se-sw-sd, var(--_ctm-dn-fm-bn-hr-se-sw-sd)) // ) // var( // --_ctm-mob-dn-fm-bn-hr-se-sw-cr, // var(--_ctm-tab-dn-fm-bn-hr-se-sw-cr, var(--_ctm-dn-fm-bn-hr-se-sw-cr)) // ); // text-decoration: var( // --_ctm-mob-dn-fm-bn-hr-se-ue, // var(--_ctm-tab-dn-fm-bn-hr-se-ue, var(--_ctm-dn-fm-bn-hr-se-ue)) // ); // padding: var( // --_ctm-mob-dn-fm-bn-hr-se-pg, // var(--_ctm-tab-dn-fm-bn-hr-se-pg, var(--_ctm-dn-fm-bn-hr-se-pg)) // ); // text-align: var( // --_ctm-mob-dn-fm-bn-hr-se-tt-an, // var(--_ctm-tab-dn-fm-bn-hr-se-tt-an, var(--_ctm-dn-fm-bn-hr-se-tt-an)) // ); // } // &:has(svg) { // gap: 8px; // } // svg { // display: flex; // path { // stroke: var(--_base-white); // } // } // &:disabled { // background-color: var(--_primary-100); // cursor: not-allowed; // } // } .mt__32 { margin-top: 32px !important; } .mt__48 { margin-top: 48px !important; } // Loading Icon .loadingIcon { margin-left: 8px; } // Forgot Password Section .forgotPassword { display: flex; align-items: center; justify-content: space-between; padding: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-pg, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-pg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-pg)) ); &:hover { padding: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-pg, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-pg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-pg)) ); } // margin-top: 20px; .remember_block { display: flex; align-items: center; gap: 6px; } } // .flex_center { // display: flex; // justify-content: center; // align-items: center; // gap: 8px; // font-weight: 600; // margin-top: 20px; // width: 100%; // color: var(--_thm-cs-tt-ls-as); // svg { // display: flex; // path { // stroke: var(--_thm-cs-tt-ls-as); // } // } // } .btn__with__text[data-btn-name="goBackToLogin"] { width: 100%; &[data-show-shadow="false"] { --_show-shadow: none; } &[data-icon-position="left"] { --_sf-fd-bn: row; } &[data-icon-position="right"] { --_sf-fd-bn: row-reverse; } &[data-icon-position="center"] { --_sf-fd-bn: row; } &:hover { --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-bd-cr)}; --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-br-cr)}; --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-br-se)}; --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-br-wh)}; --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-br-rs)}; --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-at)}; --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-gp)}; // for shadow --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-sw-ae)}; --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-sw-br)}; --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-sw-hr)}; --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-fm-as-go-bk-to-ln-hr-se-sw-cr)}; // for font --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-cr)}; --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-ft-fy)}; --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-ft-se)}; --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-ft-wt)}; --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-ft-se-ic)}; --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-tt-an)}; --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-lr-sg)}; --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-le-ht)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-in-se)}; --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-in-se)}; --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-in-c1)}; --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-ue)}; // for pading and width --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-pg)}; --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-hr-se-wh)}; &[data-hover-show-shadow="false"] { --_hover-show-shadow: none; } &[data-hover-show-icon="false"] { --_hover-show-icon: none; } } background-color: var( --_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-bd-cr) ); padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-pg)); width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wh)); display: flex; flex-direction: var(--_sf-fd-bn); align-items: center; justify-content: var( --_sf-hr-at, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-at) ); gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-gp)); border-radius: var( --_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-rs) ); box-shadow: var( --_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-ae) ) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-sw-cr)); &[data-show-border="true"] { width: 100%; border-color: var( --_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-cr) ); border-style: var( --_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-se) ); border-width: var( --_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-br-wh) ); } .txt { display: flex; color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-cr)); font-family: var( --_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-fy) ); text-transform: var( --_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-tm) ); word-wrap: var( --_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-wp) ); word-break: var( --_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-wd-bk) ); &.flex__overflow { white-space: normal; @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)}); } font-size: var( --_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se) ); font-weight: var( --_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-wt) ); font-style: var( --_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-ft-se-ic) ); text-align: var( --_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-tt-an) ); letter-spacing: var( --_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-lr-sg) ); line-height: var( --_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-le-ht) ); text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue)); } .icon { display: var(--_hover-show-icon, var(--_show-icon, flex)); svg { width: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se) ); height: var( --_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-se) ); path { stroke: var( --_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-in-c1) ); // Overrides the stroke-width presentation attribute baked into the icon markup. stroke-width: prepareMediaVariable(--_ctm-dn-fm-as-go-bk-to-ln-dt-se-se-wh, 1.25); } } } [data-element-style="Text"] { display: inline-block; width: 100%; } .icon--hover { // position: absolute; // inset: 0; // opacity: 0; display: none; transition: opacity 0.2s ease; } &:hover .icon--hover { // opacity: 1; display: flex; } &:hover .icon--default { // opacity: 0; display: none; } } .psw__contain { margin-bottom: 24px; margin-top: 8px; .psw_status { display: flex; align-items: center; justify-content: space-between; gap: 10px; .step { // width: 20%;1 height: 3px; border-radius: 4px; background-color: var(--_gray-300); flex-grow: 1; &.active { background-color: var(--_success-600); } } } .psw_content { background-color: var(--_gray-50); padding: 16px; border-radius: 6px !important; // height: 100px; max-height: 160px; overflow-y: auto; // margin-top: 20px; margin-top: 5px; .title { font-size: 14px; font-weight: 600; color: var(--_thm-ty-p1-tt-cr); line-height: 150%; font-family: var(--_thm-ty-p1-ft-fy); margin-bottom: 16px; } ul { list-style: none; li { color: var(--_thm-ty-p2-tt-cr); line-height: 150%; font-family: var(--_thm-ty-p2-ft-fy); font-size: 14px; display: flex; align-items: center; gap: 8px; &.valid_input { svg path { stroke: var(--_success-700); } } & > span { display: inline-flex; } &:not(:last-child) { margin-bottom: 8px; } } } } } // password reset successfully .reset_password_success { display: flex; justify-content: center; flex-direction: column; align-items: center; // .rounded_icon { // @extend .element__center; // width: 40px; // height: 40px; // background-color: var(--_gray-200); // border-radius: 50%; // margin-bottom: 24px; // } } // Forgot Password Button .forgotPasswordButton { background-color: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-bd-cr, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-bd-cr)) ); // border: none; cursor: pointer; font-family: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-fy, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-tm, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-wp, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-wd-bk, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-dt-se-wd-bk)) ); color: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-cr, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-cr, var(--_ctm-dn-fm-ft-pd-ll-dt-se-cr)) ); font-weight: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-wt, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-wt)) ); font-size: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se)) ); text-decoration: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ue, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ue, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-lr-sg, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-dt-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-le-ht, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-dt-se-le-ht)) ); font-style: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-ft-se-ic, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-dt-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-fm-ft-pd-ll-dt-se-tt-an, var(--_ctm-tab-dn-fm-ft-pd-ll-dt-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-dt-se-tt-an)) ); // color: var(--_thm-cs-tt-ls-as); // font-weight: 600; // font-size: 14px; // padding: 8px 0px; // border-radius: 6px; // &:hover { // background-color: var(--_primary-25); // color: var(--_thm-cs-tt-ls-as); // } &:hover { background: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-bd-cr, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-bd-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-bd-cr)) ); font-family: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-fy, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-fy, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-fy)) ); text-transform: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-tm, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-tm, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-tm)) ); word-wrap: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-wp, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-wp, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-wp)) ); word-break: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-wd-bk, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-wd-bk, var(--_ctm-dn-fm-ft-pd-ll-hr-se-wd-bk)) ); color: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-cr, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-cr, var(--_ctm-dn-fm-ft-pd-ll-hr-se-cr)) ); font-weight: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-wt, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-wt, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-wt)) ); font-size: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se)) ); text-decoration: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ue, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ue, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ue)) ); letter-spacing: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-lr-sg, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-lr-sg, var(--_ctm-dn-fm-ft-pd-ll-hr-se-lr-sg)) ); line-height: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-le-ht, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-le-ht, var(--_ctm-dn-fm-ft-pd-ll-hr-se-le-ht)) ); font-style: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-ft-se-ic, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-ft-se-ic, var(--_ctm-dn-fm-ft-pd-ll-hr-se-ft-se-ic)) ); text-align: var( --_ctm-mob-dn-fm-ft-pd-ll-hr-se-tt-an, var(--_ctm-tab-dn-fm-ft-pd-ll-hr-se-tt-an, var(--_ctm-dn-fm-ft-pd-ll-hr-se-tt-an)) ); } } @keyframes shine { 100% { left: 125%; } } .reset_password { form { label { display: block; margin-bottom: 4px; } .formGroup { &:not(:last-child) { margin-bottom: 16px; } } .to_be_filled { display: grid; grid-template-columns: 50% 50%; gap: 4px; margin-top: 10px; margin-bottom: 16px; li { padding: 4px 10px; background-color: var(--_gray-100); color: var(--_gray-700); border-radius: 40px; display: flex; align-items: center; gap: 5px; font-size: 12px; &.active { background-color: var(--_success-50); color: var(--_success-700); svg { path { stroke: var(--_success-700); } } } button { svg { path { stroke: var(--_gray-500); } } } } } } .to_be_filled { display: flex; } .error { color: var(--_error-500); &::first-letter { text-transform: uppercase; } } } // common styles .btn__primary { border-radius: 6px; width: 100%; height: 48px; font-weight: 600; color: var(--_base-white); background-color: var(--_primary-500); margin-top: 48px; font-size: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; & > span { display: flex; svg { path { stroke: var(--_base-white); } } } } .section__title { font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--_gray-900); } .section__desc { font-size: 14px; color: var(--_gray-500); } .text__center { text-align: center; } } } }