@muraldevkit/ui-toolkit 4.8.2 → 4.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
overflow: hidden;
|
|
4
4
|
padding: 4px;
|
|
5
5
|
position: relative;
|
|
6
|
-
&::
|
|
6
|
+
&::before {
|
|
7
7
|
background-color: var(--mrl-color-background-decorative);
|
|
8
8
|
bottom: 4px;
|
|
9
9
|
content: '';
|
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
left: -4px;
|
|
12
12
|
position: absolute;
|
|
13
13
|
right: -4px;
|
|
14
|
-
z-index: -1;
|
|
15
14
|
}
|
|
16
15
|
}
|
|
17
16
|
.MrlTabGroup {
|
package/dist/styles.css
CHANGED
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
.MrlTable--Menop{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--EMdMH{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.mrl-u-focus-wrapper--a4h9J{position:relative}.MrlTableRow--vJGYJ{background-color:var(--mrl-table-row-background);border-bottom:var(--mrl-table-row-border-bottom);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);height:var(--mrl-table-row-height);outline:none}.MrlTableRow--vJGYJ:hover:not(.MrlTableRow--selected)>td{background-color:var(--mrl-table-row-background-hover)}.MrlTableRow--vJGYJ:focus-visible{position:relative}.MrlTableRow--vJGYJ:focus-visible:focus-visible{outline:none}.MrlTableRow--vJGYJ:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vE0v9;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--vE0v9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--fLkd9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}
|
|
79
79
|
.MrlTable--SmJkA{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--Ub9_k{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlTableEmptyState--Ub9_k{align-items:center;background-color:var(--mrl-black-opacity-00);color:var(--mrl-color-text-secondary);display:flex;font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);justify-content:center;min-height:var(--mrl-table-empty-state-min-height);padding-block:var(--mrl-table-empty-state-padding-block);padding-inline:var(--mrl-table-empty-state-padding-block)}
|
|
80
80
|
.MrlTable--CMSOc{--mrl-table-default-width: calc(100% - 10px);--mrl-table-max-width: 1280px;--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);--mrl-table-column-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-column-height: 48px;--mrl-table-column-inline-spacing: var(--mrl-spacing-01);--mrl-table-column-svg-color: var(--mrl-color-text-secondary);--mrl-table-disabled-color: rgba(var(--mrl-gray-70), 1);--mrl-table-row-height: 48px;--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);--mrl-table-row-background: var(--mrl-color-background);--mrl-table-row-background-hover: rgba(var(--mrl-gray-10), 1);--mrl-table-row-background-selected: rgba(var(--mrl-blue-10), 1);--mrl-table-cell-height: 48px;--mrl-table-cell-padding-block: 6px;--mrl-table-cell-padding-inline: 6px;--mrl-table-default-padding-inline: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-table-selection-width: 2.75rem;--mrl-table-default-min-width: 198px;--mrl-table-status-width: 192px;--mrl-table-call-to-action-width: 92px;--mrl-table-action-width: 48px}.MrlTableEmptyState--PQ2NS{--mrl-table-empty-state-padding-block: 64px;--mrl-table-empty-state-padding-inline: 48px;--mrl-table-empty-state-min-height: 104px}.MrlSmartTable--accessible-visually-hidden-button--erUml{all:unset;cursor:pointer}.MrlSmartTable--accessible-visually-hidden-button--erUml:focus{outline:revert}.allowsSorting--_DUfv{align-items:center;display:flex;gap:var(--mrl-spacing-01)}.empty-icon-space--gzPV_{height:var(--mrl-spacing-06);width:var(--mrl-spacing-06)}.MrlTableRow--selected--Y0VsA,.MrlTableRow--selected--Y0VsA>.MrlTableCell{background-color:var(--mrl-table-row-background-selected);border-bottom-color:rgba(var(--mrl-blue-20), 1)}.MrlTableRow--disabled--VhrIn,.MrlTableRow--disabled--VhrIn>.MrlTableCell{color:var(--mrl-table-disabled-color)}
|
|
81
|
-
.mrl-u-focus-wrapper--Qlq12{position:relative}.MrlTab-Text--FSRrk{border-bottom:var(--mrl-line-width-control) solid rgba(0,0,0,0);display:block;line-height:var(--mrl-line-height-08);margin:0;padding:var(--mrl-space-stack-related-small) var(--mrl-space-stack-related) var(--mrl-spacing-01);position:relative;text-wrap:nowrap;z-index:5}.MrlTab-icon--NYAn0{display:block;height:var(--mrl-spacing-07);margin:var(--mrl-spacing-01) auto;overflow:hidden;width:var(--mrl-spacing-07)}.MrlTab--or1g5{background-color:rgba(0,0,0,0);border:none;color:var(--mrl-color-text-emph);display:inline-block;font-family:var(--mrl-heading-font);font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-02);letter-spacing:var(--mrl-letter-spacing-04);line-height:var(--mrl-line-height-08);margin-left:var(--mrl-spacing-03);padding:0;position:relative;vertical-align:bottom}.MrlTab--or1g5:first-child{margin-left:0}.MrlTab--or1g5:not(.MrlTab-selected--yG1_K) .MrlTab-icon--NYAn0{opacity:.8}.MrlTab--or1g5:hover{color:var(--mrl-color-text-hover)}.MrlTab--or1g5:hover .MrlTab-icon--NYAn0{opacity:1}.MrlTab--or1g5:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-hover)}.MrlTab--or1g5:active{color:var(--mrl-color-text-active)}.MrlTab--or1g5:active .MrlTab-icon--NYAn0{opacity:1}.MrlTab--or1g5:focus-visible{background-color:var(--mrl-color-background);border-color:rgba(0,0,0,0);outline:none}.MrlTab--or1g5:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--yEmUL;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1;border-radius:var(--mrl-border-radius-content-large)}@keyframes border-animation--yEmUL{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--kUrJ9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlTab--or1g5:focus-visible .MrlTab-Text--FSRrk{border-color:var(--mrl-color-line-emph)}.MrlTab--or1g5:focus-visible:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-hover)}.MrlTab-selected--yG1_K .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected);color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected);color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:focus-visible .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:focus-visible:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected)}.MrlTabs-caps .MrlTab--or1g5{text-transform:capitalize}.MrlTabs-large .MrlTab--or1g5{font-size:var(--mrl-font-size-03);line-height:var(--mrl-line-height-07);padding-top:var(--mrl-spacing-01)}.MrlTabs-large .MrlTab-Text--FSRrk{padding-bottom:var(--mrl-space-stack-related-small)}.MrlTabs-large .MrlTab-icon--NYAn0{margin-bottom:0;margin-top:0}.MrlTabs-evenSpacing .MrlTab--or1g5{flex:1}
|
|
81
|
+
.mrl-u-focus-wrapper--Qlq12{position:relative}.MrlTab-Text--FSRrk{border-bottom:var(--mrl-line-width-control) solid rgba(0,0,0,0);display:block;line-height:var(--mrl-line-height-08);margin:0;padding:var(--mrl-space-stack-related-small) var(--mrl-space-stack-related) var(--mrl-spacing-01);position:relative;text-wrap:nowrap;z-index:5}.MrlTab-icon--NYAn0{display:block;height:var(--mrl-spacing-07);margin:var(--mrl-spacing-01) auto;overflow:hidden;width:var(--mrl-spacing-07)}.MrlTab--or1g5{background-color:rgba(0,0,0,0);border:none;color:var(--mrl-color-text-emph);cursor:pointer;display:inline-block;font-family:var(--mrl-heading-font);font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-02);letter-spacing:var(--mrl-letter-spacing-04);line-height:var(--mrl-line-height-08);margin-left:var(--mrl-spacing-03);padding:0;position:relative;vertical-align:bottom}.MrlTab--or1g5:first-child{margin-left:0}.MrlTab--or1g5:not(.MrlTab-selected--yG1_K) .MrlTab-icon--NYAn0{opacity:.8}.MrlTab--or1g5:hover{color:var(--mrl-color-text-hover)}.MrlTab--or1g5:hover .MrlTab-icon--NYAn0{opacity:1}.MrlTab--or1g5:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-hover)}.MrlTab--or1g5:active{color:var(--mrl-color-text-active)}.MrlTab--or1g5:active .MrlTab-icon--NYAn0{opacity:1}.MrlTab--or1g5:focus-visible{background-color:var(--mrl-color-background);border-color:rgba(0,0,0,0);outline:none}.MrlTab--or1g5:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--yEmUL;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1;border-radius:var(--mrl-border-radius-content-large)}@keyframes border-animation--yEmUL{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--kUrJ9{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlTab--or1g5:focus-visible .MrlTab-Text--FSRrk{border-color:var(--mrl-color-line-emph)}.MrlTab--or1g5:focus-visible:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-hover)}.MrlTab-selected--yG1_K .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected);color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected);color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:focus-visible .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected)}.MrlTab-selected--yG1_K:focus-visible:hover .MrlTab-Text--FSRrk{border-bottom-color:var(--mrl-color-text-emph-selected)}.MrlTabs-caps .MrlTab--or1g5{text-transform:capitalize}.MrlTabs-large .MrlTab--or1g5{font-size:var(--mrl-font-size-03);line-height:var(--mrl-line-height-07);padding-top:var(--mrl-spacing-01)}.MrlTabs-large .MrlTab-Text--FSRrk{padding-bottom:var(--mrl-space-stack-related-small)}.MrlTabs-large .MrlTab-icon--NYAn0{margin-bottom:0;margin-top:0}.MrlTabs-evenSpacing .MrlTab--or1g5{flex:1}
|
|
82
82
|
.MrlTabContent--ns5y2{display:block;padding:var(--mrl-spacing-05) 0 0}.MrlTabContent-hidden--_6_cT{display:none}
|
|
83
|
-
.MrlTabGroup-container--BeqbP{display:flex;overflow:hidden;padding:4px;position:relative}.MrlTabGroup-container--BeqbP::
|
|
83
|
+
.MrlTabGroup-container--BeqbP{display:flex;overflow:hidden;padding:4px;position:relative}.MrlTabGroup-container--BeqbP::before{background-color:var(--mrl-color-background-decorative);bottom:4px;content:"";height:var(--mrl-line-width-control);left:-4px;position:absolute;right:-4px}.MrlTabGroup--RZrXc{display:inline-flex;position:relative;transform:translateX(0);width:100%}@media(prefers-reduced-motion: no-preference){.MrlTabGroup--RZrXc{transition:.3s ease-in-out}}.MrlTabGroup-fade--X9Xlh{bottom:6px;position:absolute;top:0;width:3.4375rem}.MrlTabGroup-fadeNext--r9cuS{background:linear-gradient(to right, rgba(var(--mrl-white), 0) 0%, rgba(var(--mrl-white), 0.4) 20%, rgba(var(--mrl-white), 0.6) 30%, var(--mrl-color-background) 60%);right:0}.MrlTabGroup-fadePrev--eorIU{background:linear-gradient(to left, rgba(var(--mrl-white), 0) 0%, rgba(var(--mrl-white), 0.4) 20%, rgba(var(--mrl-white), 0.6) 30%, rgba(var(--mrl-white), 1) 60%);left:0}.MrlTabGroup-nav--dDS_a{align-items:center;bottom:0;display:flex;position:absolute;top:0;z-index:1}.MrlTabGroup-next--I8q2G{bottom:var(--mrl-spacing-02);right:0}.MrlTabGroup-prev--wEM7T{bottom:var(--mrl-spacing-02);left:0}
|
|
84
84
|
.MrlSidebarNavGroup--k2AnI{margin-bottom:var(--mrl-spacing-07)}.MrlSidebarNavGroup-heading--e4Arl{color:var(--mrl-color-text-secondary);margin-bottom:var(--mrl-spacing-03)}
|
|
85
85
|
.mrl-u-focus-wrapper--mPi0P{position:relative}.MrlSidebarNavItem--QDN9P{height:var(--mrl-spacing-08);margin-bottom:var(--mrl-spacing-01)}.MrlSidebarNavItem--QDN9P>a{align-items:center;border-radius:var(--mrl-border-radius-content-large);color:var(--mrl-color-text-heading);display:inline-flex;height:100%;outline:none;padding:var(--mrl-spacing-03) var(--mrl-spacing-04);position:relative;text-decoration:none;width:100%;font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}.MrlSidebarNavItem--QDN9P>a:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--KKhVy;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--KKhVy{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--Qez0e{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlSidebarNavItem--QDN9P>a:hover{background-color:rgba(var(--mrl-gray-20), 1)}.MrlSidebarNavItem--QDN9P>a:active{background-color:rgba(var(--mrl-gray-30), 1)}.MrlSidebarNavItem--QDN9P.hasIcon--TUNgW>a{padding:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) calc(var(--mrl-spacing-01) + var(--mrl-spacing-03))}.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a,.MrlSidebarNavItem--QDN9P.MrlSidebarNavItem-selected--vA8rc a:hover{background-color:var(--mrl-color-background-highlight-active);color:var(--mrl-color-text-inverse-active)}.MrlSidebarNavItem-icon--VIvzN{height:var(--mrl-spacing-06);margin-right:calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));width:var(--mrl-spacing-06)}
|
|
86
86
|
@keyframes shimmer--eczHY{0%{background-position:right}100%{background-position:left}}.MrlSkeleton--L9ZOR{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeleton--L9ZOR::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--eczHY;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeleton--L9ZOR::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeleton-circle--V35an{border-radius:50%}
|