@moodlehq/design-system 2.1.0 → 2.1.1
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.
- package/dist/components/button/Button.d.ts +1 -4
- package/dist/components/index.d.ts +0 -4
- package/dist/index.css +0 -128
- package/dist/index.js +3 -3234
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/alert/Alert.d.ts +0 -14
- package/dist/components/alert/index.d.ts +0 -2
- package/dist/components/icon/Icon.d.ts +0 -7
- package/dist/components/icon/index.d.ts +0 -1
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
|
2
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
2
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
3
|
label: string;
|
|
5
4
|
variant?: string;
|
|
6
5
|
size?: 'sm' | 'lg';
|
|
7
|
-
iconOnly?: boolean;
|
|
8
|
-
icon?: IconProp;
|
|
9
6
|
}
|
|
10
|
-
export declare const Button: ({ label, variant, size,
|
|
7
|
+
export declare const Button: ({ label, variant, size, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/index.css
CHANGED
|
@@ -486,131 +486,3 @@
|
|
|
486
486
|
font-size: var(--mds-font-size-paragraph-lead);
|
|
487
487
|
line-height: var(--mds-line-height-paragraph-default);
|
|
488
488
|
}
|
|
489
|
-
/**
|
|
490
|
-
* Icon-only variant
|
|
491
|
-
*/
|
|
492
|
-
.mds-btn.btn.mds-btn-icon-only {
|
|
493
|
-
align-items: center;
|
|
494
|
-
display: inline-flex;
|
|
495
|
-
justify-content: center;
|
|
496
|
-
min-height: var(--mds-scale-1000);
|
|
497
|
-
min-width: var(--mds-scale-1000);
|
|
498
|
-
padding: var(--mds-spacing-sm);
|
|
499
|
-
}
|
|
500
|
-
.mds-btn.btn.btn-sm.mds-btn-icon-only {
|
|
501
|
-
min-height: var(--mds-scale-800);
|
|
502
|
-
min-width: var(--mds-scale-800);
|
|
503
|
-
padding: var(--mds-spacing-xs);
|
|
504
|
-
}
|
|
505
|
-
.mds-btn.btn.btn-lg.mds-btn-icon-only {
|
|
506
|
-
min-height: var(--mds-scale-1200);
|
|
507
|
-
min-width: var(--mds-scale-1200);
|
|
508
|
-
padding: var(--mds-spacing-md);
|
|
509
|
-
}
|
|
510
|
-
.mds-btn .mds-btn-icon-only-icon {
|
|
511
|
-
font-size: var(--mds-icons-md);
|
|
512
|
-
}
|
|
513
|
-
.mds-btn.btn.btn-sm .mds-btn-icon-only-icon {
|
|
514
|
-
font-size: var(--mds-icons-sm);
|
|
515
|
-
}
|
|
516
|
-
.mds-btn.btn.btn-lg .mds-btn-icon-only-icon {
|
|
517
|
-
font-size: var(--mds-icons-lg);
|
|
518
|
-
}
|
|
519
|
-
.mds-alert.alert {
|
|
520
|
-
--mds-alert-bg: var(--mds-bg-feedback-success-subtle);
|
|
521
|
-
--mds-alert-border: var(--mds-border-feedback-success);
|
|
522
|
-
--mds-alert-text: var(--mds-text-feedback-success);
|
|
523
|
-
|
|
524
|
-
align-items: flex-start;
|
|
525
|
-
background-color: var(--mds-alert-bg);
|
|
526
|
-
border: var(--mds-stroke-weight-sm) solid var(--mds-alert-border);
|
|
527
|
-
border-radius: var(--mds-border-radius-lg);
|
|
528
|
-
color: var(--mds-alert-text);
|
|
529
|
-
display: flex;
|
|
530
|
-
font-family: var(--mds-font-family-base);
|
|
531
|
-
font-size: var(--mds-font-size-paragraph-default);
|
|
532
|
-
gap: var(--mds-spacing-xxs);
|
|
533
|
-
line-height: var(--mds-line-height-paragraph-default);
|
|
534
|
-
margin-bottom: 0;
|
|
535
|
-
padding: var(--mds-spacing-sm);
|
|
536
|
-
}
|
|
537
|
-
.mds-alert.alert.alert-info {
|
|
538
|
-
--mds-alert-bg: var(--mds-bg-feedback-info-subtle);
|
|
539
|
-
--mds-alert-border: var(--mds-border-feedback-info);
|
|
540
|
-
--mds-alert-text: var(--mds-text-feedback-info);
|
|
541
|
-
}
|
|
542
|
-
.mds-alert.alert.alert-warning {
|
|
543
|
-
--mds-alert-bg: var(--mds-bg-feedback-warning-subtle);
|
|
544
|
-
--mds-alert-border: var(--mds-border-feedback-warning);
|
|
545
|
-
--mds-alert-text: var(--mds-text-feedback-warning);
|
|
546
|
-
}
|
|
547
|
-
.mds-alert.alert.alert-danger {
|
|
548
|
-
--mds-alert-bg: var(--mds-bg-feedback-danger-subtle);
|
|
549
|
-
--mds-alert-border: var(--mds-border-feedback-danger);
|
|
550
|
-
--mds-alert-text: var(--mds-text-feedback-danger);
|
|
551
|
-
}
|
|
552
|
-
.mds-alert .mds-alert-icon-wrapper {
|
|
553
|
-
align-items: center;
|
|
554
|
-
display: inline-flex;
|
|
555
|
-
flex: 0 0 auto;
|
|
556
|
-
justify-content: center;
|
|
557
|
-
padding-top: var(--mds-spacing-xxs);
|
|
558
|
-
width: var(--mds-icons-md);
|
|
559
|
-
}
|
|
560
|
-
.mds-alert .mds-alert-icon {
|
|
561
|
-
color: var(--mds-alert-text);
|
|
562
|
-
font-size: var(--mds-icons-sm);
|
|
563
|
-
}
|
|
564
|
-
.mds-alert .mds-alert-content {
|
|
565
|
-
flex: 1 1 auto;
|
|
566
|
-
min-width: 0;
|
|
567
|
-
}
|
|
568
|
-
.mds-alert .mds-alert-heading {
|
|
569
|
-
color: var(--mds-alert-text);
|
|
570
|
-
font-size: var(--mds-font-size-paragraph-lead);
|
|
571
|
-
font-weight: var(--mds-font-weight-regular);
|
|
572
|
-
line-height: var(--mds-line-height-paragraph-default);
|
|
573
|
-
margin: 0 0 var(--mds-spacing-xxs);
|
|
574
|
-
}
|
|
575
|
-
.mds-alert .mds-alert-body {
|
|
576
|
-
color: var(--mds-alert-text);
|
|
577
|
-
}
|
|
578
|
-
.mds-alert .mds-alert-body > :last-child {
|
|
579
|
-
margin-bottom: 0;
|
|
580
|
-
}
|
|
581
|
-
.mds-alert .mds-alert-body a,
|
|
582
|
-
.mds-alert .mds-alert-body .alert-link {
|
|
583
|
-
color: inherit;
|
|
584
|
-
font-weight: var(--mds-font-weight-regular);
|
|
585
|
-
text-decoration: underline;
|
|
586
|
-
}
|
|
587
|
-
.mds-alert .mds-alert-body .btn,
|
|
588
|
-
.mds-alert .mds-alert-body button {
|
|
589
|
-
color: inherit;
|
|
590
|
-
}
|
|
591
|
-
.mds-alert.alert-dismissible {
|
|
592
|
-
padding-right: var(--mds-spacing-sm);
|
|
593
|
-
}
|
|
594
|
-
.mds-alert .mds-alert-close.btn-close {
|
|
595
|
-
color: var(--mds-alert-text);
|
|
596
|
-
margin: 0;
|
|
597
|
-
opacity: 1;
|
|
598
|
-
padding: var(--mds-spacing-xxs);
|
|
599
|
-
}
|
|
600
|
-
.mds-alert .mds-alert-close.btn-close:hover {
|
|
601
|
-
opacity: 0.7;
|
|
602
|
-
}
|
|
603
|
-
.mds-alert .mds-alert-close.btn-close:focus {
|
|
604
|
-
box-shadow: 0 0 0 var(--mds-stroke-weight-md) var(--mds-focus-default);
|
|
605
|
-
}
|
|
606
|
-
.mds-alert .mds-alert-close.btn-close:focus:not(:focus-visible) {
|
|
607
|
-
box-shadow: none;
|
|
608
|
-
}
|
|
609
|
-
.mds-alert .mds-alert-close.btn-close:focus-visible {
|
|
610
|
-
box-shadow: 0 0 0 var(--mds-stroke-weight-md) var(--mds-focus-default);
|
|
611
|
-
}
|
|
612
|
-
.mds-icon {
|
|
613
|
-
display: inline-block;
|
|
614
|
-
line-height: 1;
|
|
615
|
-
vertical-align: middle;
|
|
616
|
-
}
|