ms-design-system 0.0.15 → 0.0.17
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.
|
@@ -117,11 +117,11 @@ class MsButton {
|
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
121
121
|
}
|
|
122
122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
123
123
|
type: Component,
|
|
124
|
-
args: [{ selector: 'ms-button', imports: [CommonModule], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-pt-0{padding-top:0!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"] }]
|
|
124
|
+
args: [{ selector: 'ms-button', imports: [CommonModule], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [":root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #CCCCCC!important}.ms-border-left{border-left:1px solid #CCCCCC!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-col-1{flex:0 0 auto!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 auto!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 auto!important;max-width:24.8%!important}.ms-col-4{flex:0 0 auto!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 auto!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 auto!important;max-width:50%!important}.ms-col-7{flex:0 0 auto!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 auto!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 auto!important;max-width:75%!important}.ms-col-10{flex:0 0 auto!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 auto!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 auto!important;max-width:100%!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}.ms-form-control{height:12px!important;gap:6!important;opacity:1!important;border-width:1px!important;padding:12px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-row{display:flex!important;flex-wrap:wrap!important}.ms-col-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-5{flex:0 0 41.6667%!important;max-width:41.6667%!important}.ms-col-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-7{flex:0 0 58.3333%!important;max-width:58.3333%!important}.ms-col-8{flex:0 0 66.6667%!important;max-width:66.6667%!important}.ms-col-9{flex:0 0 75%!important;max-width:75%!important}.ms-col-10{flex:0 0 83.3333%!important;max-width:83.3333%!important}.ms-col-11{flex:0 0 91.6667%!important;max-width:91.6667%!important}.ms-col-12{flex:0 0 100%!important;max-width:100%!important}@media(min-width:576px){.ms-col-sm-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-sm-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-sm-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-sm-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-sm-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-sm-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:768px){.ms-col-md-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-md-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-md-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-md-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-md-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-md-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:992px){.ms-col-lg-1{flex:0 0 8.3333%!important;max-width:8.3333%!important}.ms-col-lg-2{flex:0 0 16.6667%!important;max-width:16.6667%!important}.ms-col-lg-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-lg-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-lg-6{flex:0 0 50%!important;max-width:50%!important}.ms-col-lg-12{flex:0 0 100%!important;max-width:100%!important}}@media(min-width:1200px){.ms-col-xl-3{flex:0 0 25%!important;max-width:25%!important}.ms-col-xl-4{flex:0 0 33.3333%!important;max-width:33.3333%!important}.ms-col-xl-6{flex:0 0 50%!important;max-width:50%!important}}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}\n"] }]
|
|
125
125
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
126
126
|
type: Input
|
|
127
127
|
}], variant: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/lib/components/button/ms-button.component.ts","../../../projects/ui-library/src/lib/components/button/ms-button.component.html","../../../projects/ui-library/src/lib/components/dropdown/dropdown.ts","../../../projects/ui-library/src/lib/components/dropdown/dropdown.html","../../../projects/ui-library/src/lib/ms-design-system.module.ts","../../../projects/ui-library/src/lib/providers/ms-design-system.ts","../../../projects/ui-library/src/lib/index.ts","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\n\n\ntype IconPosition = 'prefix' | 'suffix';\n\n@Component({\n selector: 'ms-button',\n imports: [CommonModule],\n templateUrl: './ms-button.component.html',\n styleUrls: ['./ms-button.component.scss']\n})\nexport class MsButton implements OnChanges, OnInit {\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\n @Input() variant: string = '';\n @Input() size: string = '';\n @Input() radiussize: string = '';\n @Input() block: boolean = false;\n @Input() disabled: boolean = false;\n @Input() isBorder: boolean = false;\n @Input() textSrc: string = '';\n\n // Icon support\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\n\n @Input() class: string = '';\n @Input() buttonType: string = '';\n @Output() htmlChange = new EventEmitter<string>();\n @Output() click = new EventEmitter<Event>();\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\n /** Dynamic class computation */\n get classes(): string {\n const radiusClass = this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '';\n const variant = this.variant !== 'default' ? `ms-btn-${this.variant}` : '';\n const link = this.variant !== 'link' ? `ms-btn` : '';\n const size = this.size !== '' ? `ms-btn-${this.size}` : '';\n const isBorder = this.isBorder ? `ms-border` : '';\n return [\n link,\n variant,\n size,\n radiusClass,\n this.block ? 'block' : '',\n isBorder,\n this.iconOnly ? 'icon-only' : ''\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n get userClass() {\n return this.class;\n }\n\n /** Generate HTML string */\n getHtmlString(): string {\n const disabledAttr = this.disabled ? ' disabled' : '';\n const iconHtml = this.icon\n ? `<i class=\"${this.icon}\"></i>`\n : '';\n\n let innerHtml = '';\n\n if (this.iconOnly) {\n // Icon-only → just icon, centered\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\n }\n else if (this.icon && this.iconPosition === 'prefix') {\n // Prefix → icon before text\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\n }\n else if (this.icon && this.iconPosition === 'suffix') {\n // Suffix → icon after text\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\n }\n else {\n // Text only\n innerHtml = this.textSrc;\n }\n \n\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\n }\n\n\n constructor(private el: ElementRef) { }\n\n\n ngOnChanges(changes: SimpleChanges): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngOnInit(): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngAfterContentInit() {\n const inner = this.el.nativeElement.innerText.trim();\n if (inner && !this.textSrc) {\n this.textSrc = inner;\n }\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n onClick(event: Event) {\n if (!this.disabled) {\n this.click.emit(event);\n } else {\n event.preventDefault();\n }\n }\n\n}\n\n","@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'ms-dropdown',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './dropdown.html',\n styleUrls: ['./dropdown.scss']\n})\nexport class MsDropdown {\n\n}\n","<p>dropdown works!</p>\n","import { NgModule } from '@angular/core';\nimport { MsButton } from './components/button/ms-button.component';\nimport { MsDropdown } from './components/dropdown/dropdown';\n\n@NgModule({\n imports: [MsButton, MsDropdown], // standalone components can be imported\n exports: [MsButton, MsDropdown]\n})\nexport class MsDesignSystemModule {}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nexport function provideMsDesignSystem(): EnvironmentProviders {\n return makeEnvironmentProviders([]);\n}\n","// Components\nexport * from './components/button/ms-button.component';\nexport * from './components/dropdown/dropdown';\n\n// NgModule\nexport * from './ms-design-system.module';\n\n// Providers\nexport * from './providers/ms-design-system';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ms-design-system.mjs","sources":["../../../projects/ui-library/src/lib/components/button/ms-button.component.ts","../../../projects/ui-library/src/lib/components/button/ms-button.component.html","../../../projects/ui-library/src/lib/components/dropdown/dropdown.ts","../../../projects/ui-library/src/lib/components/dropdown/dropdown.html","../../../projects/ui-library/src/lib/ms-design-system.module.ts","../../../projects/ui-library/src/lib/providers/ms-design-system.ts","../../../projects/ui-library/src/lib/index.ts","../../../projects/ui-library/src/ms-design-system.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ContentChild, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\n\n\ntype IconPosition = 'prefix' | 'suffix';\n\n@Component({\n selector: 'ms-button',\n imports: [CommonModule],\n templateUrl: './ms-button.component.html',\n styleUrls: ['./ms-button.component.scss']\n})\nexport class MsButton implements OnChanges, OnInit {\n @Input() type: 'button' | 'submit' | 'reset' = 'button';\n @Input() variant: string = '';\n @Input() size: string = '';\n @Input() radiussize: string = '';\n @Input() block: boolean = false;\n @Input() disabled: boolean = false;\n @Input() isBorder: boolean = false;\n @Input() textSrc: string = '';\n\n // Icon support\n @Input() icon: string | null = null; // e.g. 'fa fa-plus' or 'bi bi-search'\n @Input() iconPosition: IconPosition = 'prefix'; // 'prefix' or 'suffix'\n @Input() iconOnly: boolean = false; // icon-only mode (no text)\n\n @Input() class: string = '';\n @Input() buttonType: string = '';\n @Output() htmlChange = new EventEmitter<string>();\n @Output() click = new EventEmitter<Event>();\n @ContentChild('projectedContent', { static: false }) projectedContent: any;\n /** Dynamic class computation */\n get classes(): string {\n const radiusClass = this.radiussize !== 'none' ? `ms-rounded-${this.radiussize}` : '';\n const variant = this.variant !== 'default' ? `ms-btn-${this.variant}` : '';\n const link = this.variant !== 'link' ? `ms-btn` : '';\n const size = this.size !== '' ? `ms-btn-${this.size}` : '';\n const isBorder = this.isBorder ? `ms-border` : '';\n return [\n link,\n variant,\n size,\n radiusClass,\n this.block ? 'block' : '',\n isBorder,\n this.iconOnly ? 'icon-only' : ''\n ]\n .filter(Boolean)\n .join(' ')\n .trim();\n }\n\n get userClass() {\n return this.class;\n }\n\n /** Generate HTML string */\n getHtmlString(): string {\n const disabledAttr = this.disabled ? ' disabled' : '';\n const iconHtml = this.icon\n ? `<i class=\"${this.icon}\"></i>`\n : '';\n\n let innerHtml = '';\n\n if (this.iconOnly) {\n // Icon-only → just icon, centered\n innerHtml = `<i class=\"${this.icon} btn-icon\"></i>`;\n }\n else if (this.icon && this.iconPosition === 'prefix') {\n // Prefix → icon before text\n innerHtml = `<i class=\"${this.icon} btn-icon prefix\"></i> ${this.textSrc}`;\n }\n else if (this.icon && this.iconPosition === 'suffix') {\n // Suffix → icon after text\n innerHtml = `${this.textSrc} <i class=\"${this.icon} btn-icon suffix\"></i>`;\n }\n else {\n // Text only\n innerHtml = this.textSrc;\n }\n \n\n return `<ms-button type=\"${this.type}\" class=\"${this.classes}\"${disabledAttr}>${innerHtml}</ms-button>`;\n }\n\n\n constructor(private el: ElementRef) { }\n\n\n ngOnChanges(changes: SimpleChanges): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngOnInit(): void {\n this.htmlChange.emit(this.getHtmlString());\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n ngAfterContentInit() {\n const inner = this.el.nativeElement.innerText.trim();\n if (inner && !this.textSrc) {\n this.textSrc = inner;\n }\n // if(this.radiussize === 'none' || this.radiussize === 'xs' || this.radiussize === 'default'){\n // this.radiussize = ''\n // }\n // if(this.variant === 'default'){\n // this.variant = ''\n // }else{\n // this.variant = `-${this.variant}`\n // }\n }\n\n onClick(event: Event) {\n if (!this.disabled) {\n this.click.emit(event);\n } else {\n event.preventDefault();\n }\n }\n\n}\n\n","@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- 👇 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}","import { CommonModule } from '@angular/common';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'ms-dropdown',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './dropdown.html',\n styleUrls: ['./dropdown.scss']\n})\nexport class MsDropdown {\n\n}\n","<p>dropdown works!</p>\n","import { NgModule } from '@angular/core';\nimport { MsButton } from './components/button/ms-button.component';\nimport { MsDropdown } from './components/dropdown/dropdown';\n\n@NgModule({\n imports: [MsButton, MsDropdown], // standalone components can be imported\n exports: [MsButton, MsDropdown]\n})\nexport class MsDesignSystemModule {}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\nexport function provideMsDesignSystem(): EnvironmentProviders {\n return makeEnvironmentProviders([]);\n}\n","// Components\nexport * from './components/button/ms-button.component';\nexport * from './components/dropdown/dropdown';\n\n// NgModule\nexport * from './ms-design-system.module';\n\n// Providers\nexport * from './providers/ms-design-system';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/styles.scss
CHANGED
|
@@ -844,10 +844,6 @@ ms-button {
|
|
|
844
844
|
padding: 3rem !important;
|
|
845
845
|
}
|
|
846
846
|
|
|
847
|
-
.ms-pt-0 {
|
|
848
|
-
padding-top: 0 !important;
|
|
849
|
-
}
|
|
850
|
-
|
|
851
847
|
.ms-mt-1 {
|
|
852
848
|
margin-top: 0.25rem !important;
|
|
853
849
|
}
|
|
@@ -1071,9 +1067,22 @@ ms-button .ms-btn-default {
|
|
|
1071
1067
|
padding: 3rem !important;
|
|
1072
1068
|
}
|
|
1073
1069
|
|
|
1070
|
+
.ms-pt-0 {
|
|
1071
|
+
padding-top: 0 !important;
|
|
1072
|
+
}
|
|
1073
|
+
.ms-pt-1 {
|
|
1074
|
+
padding-top: .25rem !important;
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1074
1077
|
.ms-pt-3 {
|
|
1075
1078
|
padding-top: 1rem !important;
|
|
1076
1079
|
}
|
|
1080
|
+
.ms-pt-4 {
|
|
1081
|
+
padding-top: 1.5rem !important;
|
|
1082
|
+
}
|
|
1083
|
+
.ms-pt-5 {
|
|
1084
|
+
padding-top: 3rem !important;
|
|
1085
|
+
}
|
|
1077
1086
|
|
|
1078
1087
|
.ms-pt-2 {
|
|
1079
1088
|
padding-top: .5rem !important;
|