superdesk-ui-framework 3.1.5 → 3.1.6
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/app/styles/_helpers.scss +317 -151
- package/app/styles/design-tokens/_design-tokens-general.scss +18 -7
- package/app/styles/design-tokens/_new-colors.scss +6 -1
- package/app/styles/grids/_grid-layout.scss +1 -0
- package/app/styles/interface-elements/_side-panel.scss +4 -0
- package/app-typescript/components/IconPicker.tsx +1 -1
- package/{examples/pages/react → dist/components}/Index.tsx +81 -63
- package/dist/components/utilities/SpacingUtilities.tsx +774 -0
- package/dist/components/utilities/TextUtilities.tsx +428 -0
- package/dist/components.html +6 -27
- package/dist/{components → components_deprecated}/text.html +7 -7
- package/dist/components_deprecated.html +38 -0
- package/dist/design/buttons.html +1 -11
- package/dist/design/checkbox-and-radio.html +3 -3
- package/dist/design/layout-principles.html +0 -1
- package/dist/design/switch.html +0 -10
- package/dist/design-patterns/Index.tsx +86 -0
- package/dist/design-patterns/ThreePaneLayoutPattern.tsx +362 -0
- package/{examples/pages/react.html → dist/design-patterns.html} +3 -4
- package/dist/design.html +4 -4
- package/dist/examples.bundle.css +106 -20
- package/dist/examples.bundle.js +3195 -1443
- package/dist/main.html +17 -15
- package/dist/playgrounds/boxed-list.html +7 -7
- package/dist/playgrounds/master-desk.html +4 -4
- package/dist/playgrounds/photo-snippets/edit-photo-metadata.html +1 -1
- package/dist/playgrounds/planning-snippets/edit-planning.html +1 -1
- package/dist/playgrounds/planning.html +1 -1
- package/dist/playgrounds/publisher-content-analytics.html +25 -25
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +3 -3
- package/dist/playgrounds/video-editor.html +1 -1
- package/dist/playgrounds.html +3 -6
- package/dist/superdesk-ui.bundle.css +314 -119
- package/dist/superdesk-ui.bundle.js +105 -101
- package/examples/css/docs-page.css +106 -20
- package/examples/index.js +89 -89
- package/examples/js/doc.js +16 -2
- package/examples/js/react.js +122 -19
- package/{dist/react → examples/pages/components}/Index.tsx +81 -63
- package/examples/pages/components/utilities/SpacingUtilities.tsx +774 -0
- package/examples/pages/components/utilities/TextUtilities.tsx +428 -0
- package/examples/pages/components.html +6 -27
- package/examples/pages/{components → components_deprecated}/text.html +7 -7
- package/examples/pages/components_deprecated.html +38 -0
- package/examples/pages/design/buttons.html +1 -11
- package/examples/pages/design/checkbox-and-radio.html +3 -3
- package/examples/pages/design/layout-principles.html +0 -1
- package/examples/pages/design/switch.html +0 -10
- package/examples/pages/design-patterns/Index.tsx +86 -0
- package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +362 -0
- package/{dist/react.html → examples/pages/design-patterns.html} +3 -4
- package/examples/pages/design.html +4 -4
- package/examples/pages/main.html +17 -15
- package/examples/pages/playgrounds/boxed-list.html +7 -7
- package/examples/pages/playgrounds/master-desk.html +4 -4
- package/examples/pages/playgrounds/photo-snippets/edit-photo-metadata.html +1 -1
- package/examples/pages/playgrounds/planning-snippets/edit-planning.html +1 -1
- package/examples/pages/playgrounds/planning.html +1 -1
- package/examples/pages/playgrounds/publisher-content-analytics.html +25 -25
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +3 -3
- package/examples/pages/playgrounds/video-editor.html +1 -1
- package/examples/pages/playgrounds.html +3 -6
- package/package.json +1 -1
- package/react/components/IconPicker.js +1 -1
- /package/dist/{react → components}/Alerts.tsx +0 -0
- /package/dist/{react → components}/Autocomplete.tsx +0 -0
- /package/dist/{react → components}/Avatar.tsx +0 -0
- /package/dist/{react → components}/Badges.tsx +0 -0
- /package/dist/{react → components}/BigIconFont.tsx +0 -0
- /package/dist/{react → components}/BoxedList.tsx +0 -0
- /package/dist/{react → components}/ButtonGroups.tsx +0 -0
- /package/dist/{react → components}/Buttons.tsx +0 -0
- /package/dist/{react → components}/Carousel.tsx +0 -0
- /package/dist/{react → components}/Checkboxs.tsx +0 -0
- /package/dist/{react → components}/Container.tsx +0 -0
- /package/dist/{react → components}/ContentDivider.tsx +0 -0
- /package/dist/{react → components}/ContentList.tsx +0 -0
- /package/dist/{react → components}/CreateButton.tsx +0 -0
- /package/dist/{react → components}/DatePicker.tsx +0 -0
- /package/dist/{react → components}/DragHandleDocs.tsx +0 -0
- /package/dist/{react → components}/DropZone.tsx +0 -0
- /package/dist/{react → components}/Dropdowns.tsx +0 -0
- /package/dist/{react → components}/DurationInput.tsx +0 -0
- /package/dist/{react → components}/EmptyStates.tsx +0 -0
- /package/dist/{react → components}/GridItem.tsx +0 -0
- /package/dist/{react → components}/GridList.tsx +0 -0
- /package/dist/{react → components}/Heading.tsx +0 -0
- /package/dist/{react → components}/IconButtons.tsx +0 -0
- /package/dist/{react → components}/IconFont.tsx +0 -0
- /package/dist/{react → components}/IconLabels.tsx +0 -0
- /package/dist/{react → components}/IconPicker.tsx +0 -0
- /package/dist/{react → components}/IllustrationButton.tsx +0 -0
- /package/dist/{react → components}/Inputs.tsx +0 -0
- /package/dist/{react → components}/Labels.tsx +0 -0
- /package/dist/{react → components}/LeftNavigations.tsx +0 -0
- /package/dist/{react → components}/ListItems.tsx +0 -0
- /package/dist/{react → components}/Menu.tsx +0 -0
- /package/dist/{react → components}/Modal.tsx +0 -0
- /package/dist/{react → components}/MultiSelect.tsx +0 -0
- /package/dist/{react → components}/NavButtons.tsx +0 -0
- /package/dist/{react → components}/Panel.tsx +0 -0
- /package/dist/{react → components}/Popover.tsx +0 -0
- /package/dist/{react → components}/QuickNavigationBar.tsx +0 -0
- /package/dist/{react → components}/RadioGroup.tsx +0 -0
- /package/dist/{react → components}/ResizablePanels.tsx +0 -0
- /package/dist/{react → components}/SelectGrid.tsx +0 -0
- /package/dist/{react → components}/SelectWithTemplate.tsx +0 -0
- /package/dist/{react → components}/Selects.tsx +0 -0
- /package/dist/{react → components}/SimpleList.tsx +0 -0
- /package/dist/{react → components}/SubNav.tsx +0 -0
- /package/dist/{react → components}/Switch.tsx +0 -0
- /package/dist/{react → components}/TableList.tsx +0 -0
- /package/dist/{react → components}/Tabs.tsx +0 -0
- /package/dist/{react → components}/TagInputDocs.tsx +0 -0
- /package/dist/{react → components}/Tags.tsx +0 -0
- /package/dist/{react → components}/Text.tsx +0 -0
- /package/dist/{react → components}/TimePicker.tsx +0 -0
- /package/dist/{react → components}/Toasts.tsx +0 -0
- /package/dist/{react → components}/Togglebox.tsx +0 -0
- /package/dist/{react → components}/Tooltips.tsx +0 -0
- /package/dist/{react → components}/TreeMenu.tsx +0 -0
- /package/dist/{react → components}/TreeSelect.tsx +0 -0
- /package/dist/{react → components}/WithPaginationDocs.tsx +0 -0
- /package/dist/{react → components}/WithSizeObserver.tsx +0 -0
- /package/dist/{react → components}/tree-select/TreeSelect.tsx +0 -0
- /package/dist/{react → components}/tree-select/example-1.tsx +0 -0
- /package/dist/{react → components}/tree-select/example-2.tsx +0 -0
- /package/dist/{components → components_deprecated}/alerts.html +0 -0
- /package/dist/{components → components_deprecated}/badge.html +0 -0
- /package/dist/{components → components_deprecated}/basic-grid.html +0 -0
- /package/dist/{components → components_deprecated}/big-icons.html +0 -0
- /package/dist/{components → components_deprecated}/buttons.html +0 -0
- /package/dist/{components → components_deprecated}/carousel.html +0 -0
- /package/dist/{components → components_deprecated}/checkbox.html +0 -0
- /package/dist/{components → components_deprecated}/colors.html +0 -0
- /package/dist/{components → components_deprecated}/dropdown.html +0 -0
- /package/dist/{components → components_deprecated}/form-layout.html +0 -0
- /package/dist/{components → components_deprecated}/icon-labels.html +0 -0
- /package/dist/{components → components_deprecated}/icons.html +0 -0
- /package/dist/{components → components_deprecated}/input.html +0 -0
- /package/dist/{components → components_deprecated}/labels.html +0 -0
- /package/dist/{components → components_deprecated}/layout-grid.html +0 -0
- /package/dist/{components → components_deprecated}/left-nav.html +0 -0
- /package/dist/{components → components_deprecated}/list-item.html +0 -0
- /package/dist/{components → components_deprecated}/loader.html +0 -0
- /package/dist/{components → components_deprecated}/modal-template.html +0 -0
- /package/dist/{components → components_deprecated}/modals.html +0 -0
- /package/dist/{components → components_deprecated}/other-elements.html +0 -0
- /package/dist/{components → components_deprecated}/panel-info.html +0 -0
- /package/dist/{components → components_deprecated}/radio.html +0 -0
- /package/dist/{components → components_deprecated}/select.html +0 -0
- /package/dist/{components → components_deprecated}/shadows.html +0 -0
- /package/dist/{components → components_deprecated}/sidebar-menu.html +0 -0
- /package/dist/{components → components_deprecated}/simple-list.html +0 -0
- /package/dist/{components → components_deprecated}/slider.html +0 -0
- /package/dist/{components → components_deprecated}/spacing.html +0 -0
- /package/dist/{components → components_deprecated}/switch.html +0 -0
- /package/dist/{components → components_deprecated}/tables.html +0 -0
- /package/dist/{components → components_deprecated}/tabs.html +0 -0
- /package/dist/{components → components_deprecated}/tag-input.html +0 -0
- /package/dist/{components → components_deprecated}/tag-labels.html +0 -0
- /package/dist/{components → components_deprecated}/toggle.html +0 -0
- /package/dist/{components → components_deprecated}/tooltips.html +0 -0
- /package/dist/{components → components_deprecated}/vertical-tabs.html +0 -0
- /package/dist/{components → components_deprecated}/wizard.html +0 -0
- /package/examples/pages/{react → components}/Alerts.tsx +0 -0
- /package/examples/pages/{react → components}/Autocomplete.tsx +0 -0
- /package/examples/pages/{react → components}/Avatar.tsx +0 -0
- /package/examples/pages/{react → components}/Badges.tsx +0 -0
- /package/examples/pages/{react → components}/BigIconFont.tsx +0 -0
- /package/examples/pages/{react → components}/BoxedList.tsx +0 -0
- /package/examples/pages/{react → components}/ButtonGroups.tsx +0 -0
- /package/examples/pages/{react → components}/Buttons.tsx +0 -0
- /package/examples/pages/{react → components}/Carousel.tsx +0 -0
- /package/examples/pages/{react → components}/Checkboxs.tsx +0 -0
- /package/examples/pages/{react → components}/Container.tsx +0 -0
- /package/examples/pages/{react → components}/ContentDivider.tsx +0 -0
- /package/examples/pages/{react → components}/ContentList.tsx +0 -0
- /package/examples/pages/{react → components}/CreateButton.tsx +0 -0
- /package/examples/pages/{react → components}/DatePicker.tsx +0 -0
- /package/examples/pages/{react → components}/DragHandleDocs.tsx +0 -0
- /package/examples/pages/{react → components}/DropZone.tsx +0 -0
- /package/examples/pages/{react → components}/Dropdowns.tsx +0 -0
- /package/examples/pages/{react → components}/DurationInput.tsx +0 -0
- /package/examples/pages/{react → components}/EmptyStates.tsx +0 -0
- /package/examples/pages/{react → components}/GridItem.tsx +0 -0
- /package/examples/pages/{react → components}/GridList.tsx +0 -0
- /package/examples/pages/{react → components}/Heading.tsx +0 -0
- /package/examples/pages/{react → components}/IconButtons.tsx +0 -0
- /package/examples/pages/{react → components}/IconFont.tsx +0 -0
- /package/examples/pages/{react → components}/IconLabels.tsx +0 -0
- /package/examples/pages/{react → components}/IconPicker.tsx +0 -0
- /package/examples/pages/{react → components}/IllustrationButton.tsx +0 -0
- /package/examples/pages/{react → components}/Inputs.tsx +0 -0
- /package/examples/pages/{react → components}/Labels.tsx +0 -0
- /package/examples/pages/{react → components}/LeftNavigations.tsx +0 -0
- /package/examples/pages/{react → components}/ListItems.tsx +0 -0
- /package/examples/pages/{react → components}/Menu.tsx +0 -0
- /package/examples/pages/{react → components}/Modal.tsx +0 -0
- /package/examples/pages/{react → components}/MultiSelect.tsx +0 -0
- /package/examples/pages/{react → components}/NavButtons.tsx +0 -0
- /package/examples/pages/{react → components}/Panel.tsx +0 -0
- /package/examples/pages/{react → components}/Popover.tsx +0 -0
- /package/examples/pages/{react → components}/QuickNavigationBar.tsx +0 -0
- /package/examples/pages/{react → components}/RadioGroup.tsx +0 -0
- /package/examples/pages/{react → components}/ResizablePanels.tsx +0 -0
- /package/examples/pages/{react → components}/SelectGrid.tsx +0 -0
- /package/examples/pages/{react → components}/SelectWithTemplate.tsx +0 -0
- /package/examples/pages/{react → components}/Selects.tsx +0 -0
- /package/examples/pages/{react → components}/SimpleList.tsx +0 -0
- /package/examples/pages/{react → components}/SubNav.tsx +0 -0
- /package/examples/pages/{react → components}/Switch.tsx +0 -0
- /package/examples/pages/{react → components}/TableList.tsx +0 -0
- /package/examples/pages/{react → components}/Tabs.tsx +0 -0
- /package/examples/pages/{react → components}/TagInputDocs.tsx +0 -0
- /package/examples/pages/{react → components}/Tags.tsx +0 -0
- /package/examples/pages/{react → components}/Text.tsx +0 -0
- /package/examples/pages/{react → components}/TimePicker.tsx +0 -0
- /package/examples/pages/{react → components}/Toasts.tsx +0 -0
- /package/examples/pages/{react → components}/Togglebox.tsx +0 -0
- /package/examples/pages/{react → components}/Tooltips.tsx +0 -0
- /package/examples/pages/{react → components}/TreeMenu.tsx +0 -0
- /package/examples/pages/{react → components}/TreeSelect.tsx +0 -0
- /package/examples/pages/{react → components}/WithPaginationDocs.tsx +0 -0
- /package/examples/pages/{react → components}/WithSizeObserver.tsx +0 -0
- /package/examples/pages/{react → components}/tree-select/TreeSelect.tsx +0 -0
- /package/examples/pages/{react → components}/tree-select/example-1.tsx +0 -0
- /package/examples/pages/{react → components}/tree-select/example-2.tsx +0 -0
- /package/examples/pages/{components → components_deprecated}/alerts.html +0 -0
- /package/examples/pages/{components → components_deprecated}/badge.html +0 -0
- /package/examples/pages/{components → components_deprecated}/basic-grid.html +0 -0
- /package/examples/pages/{components → components_deprecated}/big-icons.html +0 -0
- /package/examples/pages/{components → components_deprecated}/buttons.html +0 -0
- /package/examples/pages/{components → components_deprecated}/carousel.html +0 -0
- /package/examples/pages/{components → components_deprecated}/checkbox.html +0 -0
- /package/examples/pages/{components → components_deprecated}/colors.html +0 -0
- /package/examples/pages/{components → components_deprecated}/dropdown.html +0 -0
- /package/examples/pages/{components → components_deprecated}/form-layout.html +0 -0
- /package/examples/pages/{components → components_deprecated}/icon-labels.html +0 -0
- /package/examples/pages/{components → components_deprecated}/icons.html +0 -0
- /package/examples/pages/{components → components_deprecated}/input.html +0 -0
- /package/examples/pages/{components → components_deprecated}/labels.html +0 -0
- /package/examples/pages/{components → components_deprecated}/layout-grid.html +0 -0
- /package/examples/pages/{components → components_deprecated}/left-nav.html +0 -0
- /package/examples/pages/{components → components_deprecated}/list-item.html +0 -0
- /package/examples/pages/{components → components_deprecated}/loader.html +0 -0
- /package/examples/pages/{components → components_deprecated}/modal-template.html +0 -0
- /package/examples/pages/{components → components_deprecated}/modals.html +0 -0
- /package/examples/pages/{components → components_deprecated}/other-elements.html +0 -0
- /package/examples/pages/{components → components_deprecated}/panel-info.html +0 -0
- /package/examples/pages/{components → components_deprecated}/radio.html +0 -0
- /package/examples/pages/{components → components_deprecated}/select.html +0 -0
- /package/examples/pages/{components → components_deprecated}/shadows.html +0 -0
- /package/examples/pages/{components → components_deprecated}/sidebar-menu.html +0 -0
- /package/examples/pages/{components → components_deprecated}/simple-list.html +0 -0
- /package/examples/pages/{components → components_deprecated}/slider.html +0 -0
- /package/examples/pages/{components → components_deprecated}/spacing.html +0 -0
- /package/examples/pages/{components → components_deprecated}/switch.html +0 -0
- /package/examples/pages/{components → components_deprecated}/tables.html +0 -0
- /package/examples/pages/{components → components_deprecated}/tabs.html +0 -0
- /package/examples/pages/{components → components_deprecated}/tag-input.html +0 -0
- /package/examples/pages/{components → components_deprecated}/tag-labels.html +0 -0
- /package/examples/pages/{components → components_deprecated}/toggle.html +0 -0
- /package/examples/pages/{components → components_deprecated}/tooltips.html +0 -0
- /package/examples/pages/{components → components_deprecated}/vertical-tabs.html +0 -0
- /package/examples/pages/{components → components_deprecated}/wizard.html +0 -0
package/app/styles/_helpers.scss
CHANGED
@@ -288,7 +288,7 @@
|
|
288
288
|
overflow-y: scroll !important;
|
289
289
|
}
|
290
290
|
|
291
|
-
//
|
291
|
+
// TEXT OVERFLOW
|
292
292
|
.sd-overflow-ellipsis,
|
293
293
|
.sd-overflow--ellipsis {
|
294
294
|
text-overflow: ellipsis;
|
@@ -512,140 +512,8 @@ h6 {
|
|
512
512
|
letter-spacing: 0.025em;
|
513
513
|
}
|
514
514
|
|
515
|
-
// Font weights
|
516
515
|
|
517
|
-
.sd-text__light,
|
518
|
-
.sd-text--light {
|
519
|
-
font-weight: 300;
|
520
|
-
}
|
521
|
-
|
522
|
-
.sd-text__normal,
|
523
|
-
.sd-text--normal {
|
524
|
-
font-weight: 400;
|
525
|
-
}
|
526
|
-
|
527
|
-
.sd-text--medium {
|
528
|
-
font-weight: 500;
|
529
|
-
}
|
530
|
-
|
531
|
-
.sd-text__strong,
|
532
|
-
.sd-text--strong {
|
533
|
-
font-weight: 700;
|
534
|
-
}
|
535
|
-
|
536
|
-
.sd-text--bold {
|
537
|
-
font-weight: 700;
|
538
|
-
}
|
539
516
|
|
540
|
-
// Font style
|
541
|
-
.sd-text__italic,
|
542
|
-
.sd-text--italic {
|
543
|
-
font-style: italic;
|
544
|
-
}
|
545
|
-
|
546
|
-
.sd-text--non-italic {
|
547
|
-
font-style: normal;
|
548
|
-
}
|
549
|
-
|
550
|
-
// Text alignment
|
551
|
-
.sd-text-align--left,
|
552
|
-
.sd-text-align--start {
|
553
|
-
text-align: start;
|
554
|
-
}
|
555
|
-
|
556
|
-
.sd-text__center,
|
557
|
-
.sd-text-align--center {
|
558
|
-
text-align: center;
|
559
|
-
}
|
560
|
-
|
561
|
-
.sd-text__right,
|
562
|
-
.sd-text-align--right,
|
563
|
-
.sd-text-align--end {
|
564
|
-
text-align: end;
|
565
|
-
}
|
566
|
-
|
567
|
-
.sd-text-align--justify {
|
568
|
-
text-align: justify;
|
569
|
-
}
|
570
|
-
|
571
|
-
// Font family
|
572
|
-
.sd-text__serif,
|
573
|
-
.sd-text--serif {
|
574
|
-
font-family: $baseFontFamilySerif;
|
575
|
-
}
|
576
|
-
|
577
|
-
.sd-text--sans {
|
578
|
-
font-family: $baseFontFamily;
|
579
|
-
}
|
580
|
-
|
581
|
-
.sd-text--mono {
|
582
|
-
font-family: $baseFontFamilyMono;
|
583
|
-
}
|
584
|
-
|
585
|
-
// Word Break
|
586
|
-
.sd-word-break--normal {
|
587
|
-
overflow-wrap: normal;
|
588
|
-
word-break: normal;
|
589
|
-
}
|
590
|
-
|
591
|
-
.sd-word-break--words {
|
592
|
-
overflow-wrap: break-word;
|
593
|
-
}
|
594
|
-
|
595
|
-
.sd-word-break--all {
|
596
|
-
word-break: break-all;
|
597
|
-
}
|
598
|
-
|
599
|
-
// Whitespace
|
600
|
-
.sd-whitespace--normal {
|
601
|
-
white-space: normal;
|
602
|
-
}
|
603
|
-
|
604
|
-
.sd-whitespace--nowrap {
|
605
|
-
white-space: nowrap;
|
606
|
-
}
|
607
|
-
|
608
|
-
.sd-whitespace--pre {
|
609
|
-
white-space: pre;
|
610
|
-
}
|
611
|
-
|
612
|
-
.sd-whitespace--pre-line {
|
613
|
-
white-space: pre-line;
|
614
|
-
}
|
615
|
-
|
616
|
-
.sd-whitespace--pre-wrap {
|
617
|
-
white-space: pre-wrap;
|
618
|
-
}
|
619
|
-
|
620
|
-
// Text Transform
|
621
|
-
.sd-txt-transform--uppercase {
|
622
|
-
text-transform: uppercase;
|
623
|
-
}
|
624
|
-
|
625
|
-
.sd-txt-transform--lowercase {
|
626
|
-
text-transform: lowercase;
|
627
|
-
}
|
628
|
-
|
629
|
-
.sd-txt-transform--capitalize {
|
630
|
-
text-transform: capitalize;
|
631
|
-
}
|
632
|
-
|
633
|
-
.sd-txt-transform--none {
|
634
|
-
text-transform: none;
|
635
|
-
}
|
636
|
-
|
637
|
-
// Text Decoration
|
638
|
-
.sd-txt-decoration--underline {
|
639
|
-
text-decoration: underline;
|
640
|
-
}
|
641
|
-
|
642
|
-
.sd-txt-decoration--line-through {
|
643
|
-
text-decoration: line-through;
|
644
|
-
}
|
645
|
-
|
646
|
-
.sd-txt-decoration--none {
|
647
|
-
text-decoration: none;
|
648
|
-
}
|
649
517
|
|
650
518
|
// Line Clamp
|
651
519
|
// limit the number of horizontal lines in an elemnt (e.g. <p>)
|
@@ -777,13 +645,21 @@ h6 {
|
|
777
645
|
|
778
646
|
|
779
647
|
// Margin auto
|
648
|
+
|
649
|
+
.m-auto,
|
650
|
+
.sd-margin--auto {
|
651
|
+
margin: auto !important;
|
652
|
+
}
|
653
|
+
|
780
654
|
.ml-auto,
|
655
|
+
.ms-auto,
|
781
656
|
.sd-margin-l--auto,
|
782
657
|
.sd-margin-s--auto {
|
783
658
|
margin-inline-start: auto !important;
|
784
659
|
}
|
785
660
|
|
786
661
|
.mr-auto,
|
662
|
+
.me-auto,
|
787
663
|
.sd-margin-r--auto,
|
788
664
|
.sd-margin-e--auto {
|
789
665
|
margin-inline-end: auto !important;
|
@@ -800,19 +676,18 @@ h6 {
|
|
800
676
|
}
|
801
677
|
|
802
678
|
.mlr-auto,
|
679
|
+
.mx-auto,
|
803
680
|
.sd-margin-x--auto {
|
804
681
|
margin-inline-start: auto !important;
|
805
682
|
margin-inline-end: auto !important;
|
806
683
|
}
|
807
684
|
|
685
|
+
.my-auto,
|
808
686
|
.sd-margin-y--auto {
|
809
687
|
margin-block-start: auto !important;
|
810
688
|
margin-block-end: auto !important;
|
811
689
|
}
|
812
690
|
|
813
|
-
.sd-margin--auto {
|
814
|
-
margin: auto !important;
|
815
|
-
}
|
816
691
|
|
817
692
|
// MARGINS ---------------------------------------------- //
|
818
693
|
// MARGIN (all sides)
|
@@ -1237,7 +1112,7 @@ h6 {
|
|
1237
1112
|
padding-block-start: calc(5 * var(--base-increment)) !important;
|
1238
1113
|
}
|
1239
1114
|
// PADDING BLOCK END (bottom)
|
1240
|
-
.pb
|
1115
|
+
.pb-0,
|
1241
1116
|
.sd-padding-b--0 {
|
1242
1117
|
padding-block-end: 0 !important;
|
1243
1118
|
}
|
@@ -1524,36 +1399,274 @@ h6 {
|
|
1524
1399
|
border-width: 3px;
|
1525
1400
|
}
|
1526
1401
|
|
1527
|
-
//
|
1528
|
-
|
1402
|
+
// ==================== TYPOGRAPHY =================== //
|
1403
|
+
|
1404
|
+
// FONT SIZE
|
1405
|
+
.sd-font-size--x-small,
|
1406
|
+
.text-xs {
|
1529
1407
|
font-size: calc(var(--text-size--base) * 1.2); // 12px;
|
1530
1408
|
}
|
1531
|
-
|
1532
|
-
.
|
1409
|
+
.sd-font-size--small,
|
1410
|
+
.text-sm {
|
1533
1411
|
font-size: calc(var(--text-size--base) * 1.4); // 14px;
|
1534
1412
|
}
|
1535
|
-
|
1536
|
-
.
|
1413
|
+
.sd-font-size--medium ,
|
1414
|
+
.text-md {
|
1537
1415
|
font-size: calc(var(--text-size--base) * 1.6); // 16px;
|
1538
1416
|
}
|
1539
|
-
|
1540
|
-
.
|
1417
|
+
.sd-font-size--large,
|
1418
|
+
.text-lg {
|
1541
1419
|
font-size: calc(var(--text-size--base) * 2); // 20px;
|
1542
1420
|
}
|
1421
|
+
.sd-font-size--x-large,
|
1422
|
+
.text-xl {
|
1423
|
+
font-size: calc(var(--text-size--base) * 2.4); // 24px;
|
1424
|
+
}
|
1425
|
+
.sd-font-size--x-large,
|
1426
|
+
.text-2xl {
|
1427
|
+
font-size: calc(var(--text-size--base) * 3.2); // 32px;
|
1428
|
+
}
|
1543
1429
|
|
1544
|
-
//
|
1545
|
-
.sd-text-color--
|
1430
|
+
// TEXT COLOR
|
1431
|
+
.sd-text-color--normal,
|
1432
|
+
.text-color-normal {
|
1433
|
+
color: var(--color-text) !important;
|
1434
|
+
}
|
1435
|
+
.sd-text-color--light,
|
1436
|
+
.text-color-muted {
|
1437
|
+
color: var(--color-text-light) !important;
|
1438
|
+
}
|
1439
|
+
.sd-text-color--lighter,
|
1440
|
+
.text-color-subdued {
|
1546
1441
|
color: var(--color-text-lighter) !important;
|
1547
1442
|
}
|
1443
|
+
.sd-text-color--inverse,
|
1444
|
+
.text-color-inverse {
|
1445
|
+
color: var(--color-text--inverse) !important;
|
1446
|
+
}
|
1548
1447
|
|
1549
|
-
|
1550
|
-
|
1448
|
+
// FONT WEIGHTS
|
1449
|
+
.sd-text__light,
|
1450
|
+
.sd-text--light,
|
1451
|
+
.font-light {
|
1452
|
+
font-weight: 300;
|
1453
|
+
}
|
1454
|
+
.sd-text__normal,
|
1455
|
+
.sd-text--normal,
|
1456
|
+
.font-normal {
|
1457
|
+
font-weight: 400;
|
1458
|
+
}
|
1459
|
+
.sd-text--medium,
|
1460
|
+
.font-medium {
|
1461
|
+
font-weight: 500;
|
1462
|
+
}
|
1463
|
+
.sd-text--medium,
|
1464
|
+
.font-semibold {
|
1465
|
+
font-weight: 500;
|
1466
|
+
}
|
1467
|
+
.sd-text__strong,
|
1468
|
+
.sd-text--strong,
|
1469
|
+
.sd-text--bold,
|
1470
|
+
.font-bold {
|
1471
|
+
font-weight: 700;
|
1472
|
+
}
|
1473
|
+
.font-black {
|
1474
|
+
font-weight: 900;
|
1551
1475
|
}
|
1552
1476
|
|
1553
|
-
|
1554
|
-
|
1477
|
+
// FONT STYLE
|
1478
|
+
.sd-text__italic,
|
1479
|
+
.sd-text--italic,
|
1480
|
+
.italic {
|
1481
|
+
font-style: italic;
|
1555
1482
|
}
|
1556
1483
|
|
1484
|
+
.sd-text--non-italic,
|
1485
|
+
.non-italic {
|
1486
|
+
font-style: normal;
|
1487
|
+
}
|
1488
|
+
|
1489
|
+
// TEXT ALIGN
|
1490
|
+
.sd-text-align--left,
|
1491
|
+
.sd-text-align--start,
|
1492
|
+
.text-start,
|
1493
|
+
.text-left {
|
1494
|
+
text-align: start;
|
1495
|
+
}
|
1496
|
+
.sd-text__center,
|
1497
|
+
.sd-text-align--center,
|
1498
|
+
.text-center {
|
1499
|
+
text-align: center;
|
1500
|
+
}
|
1501
|
+
.sd-text__right,
|
1502
|
+
.sd-text-align--right,
|
1503
|
+
.sd-text-align--end,
|
1504
|
+
.text-end {
|
1505
|
+
text-align: end;
|
1506
|
+
}
|
1507
|
+
.sd-text-align--justify,
|
1508
|
+
.text-justify {
|
1509
|
+
text-align: justify;
|
1510
|
+
}
|
1511
|
+
|
1512
|
+
// FONT FAMILY
|
1513
|
+
.sd-text__serif,
|
1514
|
+
.sd-text--serif {
|
1515
|
+
font-family: $baseFontFamilySerif;
|
1516
|
+
}
|
1517
|
+
.sd-text--sans {
|
1518
|
+
font-family: $baseFontFamily;
|
1519
|
+
}
|
1520
|
+
.sd-text--mono {
|
1521
|
+
font-family: $baseFontFamilyMono;
|
1522
|
+
}
|
1523
|
+
|
1524
|
+
// WHITESPACE
|
1525
|
+
.sd-whitespace--normal,
|
1526
|
+
.whitespace-normal {
|
1527
|
+
white-space: normal;
|
1528
|
+
}
|
1529
|
+
.sd-whitespace--nowrap,
|
1530
|
+
.whitespace-nowrap {
|
1531
|
+
white-space: nowrap;
|
1532
|
+
}
|
1533
|
+
.sd-whitespace--pre,
|
1534
|
+
.whitespace-pre {
|
1535
|
+
white-space: pre;
|
1536
|
+
}
|
1537
|
+
.sd-whitespace--pre-line,
|
1538
|
+
.whitespace-pre-line {
|
1539
|
+
white-space: pre-line;
|
1540
|
+
}
|
1541
|
+
.sd-whitespace--pre-wrap,
|
1542
|
+
.whitespace-pre-wrap {
|
1543
|
+
white-space: pre-wrap;
|
1544
|
+
}
|
1545
|
+
.whitespace-break-spaces {
|
1546
|
+
white-space: break-spaces;
|
1547
|
+
}
|
1548
|
+
|
1549
|
+
// TEXT TRANSFORM
|
1550
|
+
.sd-txt-transform--uppercase,
|
1551
|
+
.text-uppercase {
|
1552
|
+
text-transform: uppercase;
|
1553
|
+
}
|
1554
|
+
|
1555
|
+
.sd-txt-transform--lowercase,
|
1556
|
+
.text-lowercase {
|
1557
|
+
text-transform: lowercase;
|
1558
|
+
}
|
1559
|
+
|
1560
|
+
.sd-txt-transform--capitalize,
|
1561
|
+
.text-capitalize {
|
1562
|
+
text-transform: capitalize;
|
1563
|
+
}
|
1564
|
+
|
1565
|
+
.sd-txt-transform--none,
|
1566
|
+
.text-normal-case {
|
1567
|
+
text-transform: none;
|
1568
|
+
}
|
1569
|
+
|
1570
|
+
// TEXT DECORATION
|
1571
|
+
.sd-txt-decoration--underline,
|
1572
|
+
.text-underline {
|
1573
|
+
text-decoration: underline;
|
1574
|
+
}
|
1575
|
+
.sd-txt-decoration--line-through,
|
1576
|
+
.text-line-through {
|
1577
|
+
text-decoration: line-through;
|
1578
|
+
}
|
1579
|
+
.sd-txt-decoration--none,
|
1580
|
+
.text-no-underline {
|
1581
|
+
text-decoration: none;
|
1582
|
+
}
|
1583
|
+
|
1584
|
+
// TEXT OVERFLOW
|
1585
|
+
.sd-overflow-ellipsis,
|
1586
|
+
.sd-overflow--ellipsis,
|
1587
|
+
.text-ellipsis {
|
1588
|
+
overflow: hidden;
|
1589
|
+
text-overflow: ellipsis;
|
1590
|
+
white-space: nowrap;
|
1591
|
+
}
|
1592
|
+
.text-clip {
|
1593
|
+
text-overflow: clip;
|
1594
|
+
}
|
1595
|
+
|
1596
|
+
// TEXT WRAP
|
1597
|
+
.text-wrap {
|
1598
|
+
text-wrap: wrap;
|
1599
|
+
}
|
1600
|
+
.text-nowrap {
|
1601
|
+
text-wrap: clip;
|
1602
|
+
}
|
1603
|
+
.text-balance {
|
1604
|
+
text-wrap: balance;
|
1605
|
+
}
|
1606
|
+
.text-pretty {
|
1607
|
+
text-wrap: pretty;
|
1608
|
+
}
|
1609
|
+
|
1610
|
+
// WORD BREAK
|
1611
|
+
.sd-word-break--normal,
|
1612
|
+
.break-normal {
|
1613
|
+
overflow-wrap: normal;
|
1614
|
+
word-break: normal;
|
1615
|
+
}
|
1616
|
+
.sd-word-break--words,
|
1617
|
+
.break-words {
|
1618
|
+
overflow-wrap: break-word;
|
1619
|
+
}
|
1620
|
+
.sd-word-break--all,
|
1621
|
+
.break-all {
|
1622
|
+
word-break: break-all;
|
1623
|
+
}
|
1624
|
+
|
1625
|
+
// LINE CLAMP
|
1626
|
+
// limit the number of horizontal lines in an elemnt (e.g. <p>)
|
1627
|
+
// it doesn't work if the element has set flex-grow: 1;
|
1628
|
+
@mixin line-clamp-base {
|
1629
|
+
overflow: hidden;
|
1630
|
+
display: -webkit-box;
|
1631
|
+
-webkit-box-orient: vertical;
|
1632
|
+
}
|
1633
|
+
.sd-line-clamp--1,
|
1634
|
+
.line-clamp-1 {
|
1635
|
+
@include line-clamp-base;
|
1636
|
+
-webkit-line-clamp: 1;
|
1637
|
+
}
|
1638
|
+
.sd-line-clamp--2,
|
1639
|
+
.line-clamp-2 {
|
1640
|
+
@include line-clamp-base;
|
1641
|
+
-webkit-line-clamp: 2;
|
1642
|
+
}
|
1643
|
+
.sd-line-clamp--3,
|
1644
|
+
.line-clamp-3 {
|
1645
|
+
@include line-clamp-base;
|
1646
|
+
-webkit-line-clamp: 3;
|
1647
|
+
}
|
1648
|
+
.sd-line-clamp--4,
|
1649
|
+
.line-clamp-4 {
|
1650
|
+
@include line-clamp-base;
|
1651
|
+
-webkit-line-clamp: 4;
|
1652
|
+
}
|
1653
|
+
.sd-line-clamp--5,
|
1654
|
+
.line-clamp-5 {
|
1655
|
+
@include line-clamp-base;
|
1656
|
+
-webkit-line-clamp: 5;
|
1657
|
+
}
|
1658
|
+
.sd-line-clamp--6,
|
1659
|
+
.line-clamp-6 {
|
1660
|
+
@include line-clamp-base;
|
1661
|
+
-webkit-line-clamp: 6;
|
1662
|
+
}
|
1663
|
+
.sd-line-clamp--none,
|
1664
|
+
.line-clamp-none {
|
1665
|
+
-webkit-line-clamp: none;
|
1666
|
+
}
|
1667
|
+
|
1668
|
+
// ==================================================== //
|
1669
|
+
|
1557
1670
|
// Background colours
|
1558
1671
|
.sd-panel-bg--100 {
|
1559
1672
|
background-color: var(--sd-colour-panel-bg--100);
|
@@ -1644,6 +1757,59 @@ h6 {
|
|
1644
1757
|
|
1645
1758
|
// MAX-HEIGHT:
|
1646
1759
|
|
1760
|
+
.max-h-5 {
|
1761
|
+
max-height: calc(5 * var(--base-increment)) !important;
|
1762
|
+
}
|
1763
|
+
.max-h-6 {
|
1764
|
+
max-height: calc(6 * var(--base-increment)) !important;
|
1765
|
+
}
|
1766
|
+
.max-h-8 {
|
1767
|
+
max-height: calc(8 * var(--base-increment)) !important;
|
1768
|
+
}
|
1769
|
+
.max-h-10 {
|
1770
|
+
max-height: calc(10 * var(--base-increment)) !important;
|
1771
|
+
}
|
1772
|
+
.max-h-15 {
|
1773
|
+
max-height: calc(15 * var(--base-increment)) !important;
|
1774
|
+
}
|
1775
|
+
.max-h-20 {
|
1776
|
+
max-height: calc(20 * var(--base-increment)) !important;
|
1777
|
+
}
|
1778
|
+
.max-h-25 {
|
1779
|
+
max-height: calc(25 * var(--base-increment)) !important;
|
1780
|
+
}
|
1781
|
+
.max-h-30 {
|
1782
|
+
max-height: calc(30 * var(--base-increment)) !important;
|
1783
|
+
}
|
1784
|
+
|
1647
1785
|
.max-h-full {
|
1648
1786
|
max-height: 100%;
|
1649
1787
|
}
|
1788
|
+
.max-h-screen {
|
1789
|
+
max-height: 100svh;
|
1790
|
+
}
|
1791
|
+
|
1792
|
+
.gap-0 {
|
1793
|
+
gap: var(--gap-0); // 0px
|
1794
|
+
}
|
1795
|
+
.gap-0-5 {
|
1796
|
+
gap: var(--gap-0-5); // 4px
|
1797
|
+
}
|
1798
|
+
.gap-1 {
|
1799
|
+
gap: var(--gap-1); // 8px
|
1800
|
+
}
|
1801
|
+
.gap-1-5 {
|
1802
|
+
gap: var(--gap-1-5); // 12px
|
1803
|
+
}
|
1804
|
+
.gap-2 {
|
1805
|
+
gap: var(--gap-2); // 16px
|
1806
|
+
}
|
1807
|
+
.gap-3 {
|
1808
|
+
gap: var(--gap-3); // 24px
|
1809
|
+
}
|
1810
|
+
.gap-4 {
|
1811
|
+
gap: var(--gap-4); // 32px
|
1812
|
+
}
|
1813
|
+
.gap-5 {
|
1814
|
+
gap: var(--gap-5); // 40px
|
1815
|
+
}
|
@@ -16,13 +16,22 @@
|
|
16
16
|
--space--8: calc(8 * var(--base-increment)); // 64px;
|
17
17
|
|
18
18
|
--gap--none: 0; // 0px
|
19
|
-
--gap
|
20
|
-
--gap--small: 0.
|
21
|
-
--gap
|
22
|
-
--gap--
|
23
|
-
--gap
|
24
|
-
--gap--
|
25
|
-
--gap
|
19
|
+
--gap-0: 0;
|
20
|
+
--gap--x-small: calc(0.5 * var(--base-increment)); // 4px
|
21
|
+
--gap-0-5: calc(0.5 * var(--base-increment)); // 4px
|
22
|
+
--gap--small: calc(1 * var(--base-increment)); // 8px
|
23
|
+
--gap-1: calc(1 * var(--base-increment)); // 8px
|
24
|
+
--gap--medium-small: calc(1.5 * var(--base-increment)); // 12px
|
25
|
+
--gap-1-5: calc(1.5 * var(--base-increment)); // 12px
|
26
|
+
--gap--medium: calc(2 * var(--base-increment)); // 16px
|
27
|
+
--gap-2: calc(2 * var(--base-increment)); // 16px
|
28
|
+
--gap--large: calc(3 * var(--base-increment)); // 24px;
|
29
|
+
--gap-3: calc(3 * var(--base-increment)); // 24px;
|
30
|
+
--gap--x-large: calc(4 * var(--base-increment)); // 32px;
|
31
|
+
--gap-4: calc(4 * var(--base-increment)); // 32px;
|
32
|
+
--gap--xx-large: calc(5 * var(--base-increment)); // 40px;
|
33
|
+
--gap-5: calc(5 * var(--base-increment)); // 40px;
|
34
|
+
|
26
35
|
--gap--auto: auto;
|
27
36
|
|
28
37
|
// BORDER RADIUS
|
@@ -57,6 +66,8 @@
|
|
57
66
|
--text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
|
58
67
|
--text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
|
59
68
|
--text-size-large: calc(var(--text-size--base) * 2); // 20px;
|
69
|
+
--text-size-x-large: calc(var(--text-size--base) * 2.4); // 24px;
|
70
|
+
--text-size-xx-large: calc(var(--text-size--base) * 3.2); // 32px;
|
60
71
|
|
61
72
|
|
62
73
|
// SHADOW
|
@@ -604,9 +604,11 @@
|
|
604
604
|
--sd-colour-background__base--30: hsla(0, 0%, 70%, 1);
|
605
605
|
|
606
606
|
--color-text: hsla(214, 13%, 20%, 1);
|
607
|
-
--color-text--inverse: hsla(214, 13%, 98%, 1);
|
608
607
|
--color-text-light: hsla(214, 13%, 40%, 1);
|
608
|
+
--color-text-muted: hsla(214, 13%, 40%, 1);
|
609
609
|
--color-text-lighter: hsla(214, 13%, 60%, 1);
|
610
|
+
--color-text-subdued: hsla(214, 13%, 60%, 1);
|
611
|
+
--color-text--inverse: hsla(214, 13%, 98%, 1);
|
610
612
|
--color-icon-default: hsla(214, 13%, 30%, 1);
|
611
613
|
--sd-slugline-color: hsla(197, 100%, 15%, 1) !important;
|
612
614
|
--sd-time-schedule-color: hsla(268, 100%, 25%, 1);
|
@@ -687,7 +689,10 @@
|
|
687
689
|
//color: hsla(0, 0%, 100%, 1);
|
688
690
|
--color-text: hsla(0, 0%, 96%, 1);
|
689
691
|
--color-text-light: hsla(214, 13%, 76%, 1);
|
692
|
+
--color-text-muted: hsla(214, 13%, 76%, 1);
|
690
693
|
--color-text-lighter: hsla(214, 13%, 56%, 1);
|
694
|
+
--color-text-subdued: hsla(214, 13%, 56%, 1);
|
695
|
+
--color-text--inverse: hsla(214, 13%, 20%, 1);
|
691
696
|
--color-icon-default: hsla(214, 13%, 90%, 1);
|
692
697
|
--sd-slugline-color: hsla(197, 60%, 75%, 1) !important;
|
693
698
|
--sd-time-schedule-color: hsla(268, 60%, 65%, 1);
|
@@ -700,6 +700,7 @@ $planningEditor-width: 53rem;
|
|
700
700
|
grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
|
701
701
|
grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
|
702
702
|
overflow: auto;
|
703
|
+
height: 100%;
|
703
704
|
}
|
704
705
|
|
705
706
|
.sd-main-content-grid__header {
|
@@ -40,6 +40,10 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
|
|
40
40
|
color: $white;
|
41
41
|
}
|
42
42
|
|
43
|
+
.side-panel__header--light {
|
44
|
+
background-color: var(--sd-colour-panel-bg--000);
|
45
|
+
}
|
46
|
+
|
43
47
|
.side-panel__header--darker {
|
44
48
|
background-color: var(--sd-colour-panel-bg--100);
|
45
49
|
}
|
@@ -61,7 +61,7 @@ export class IconPicker extends React.PureComponent<IProps, IState> {
|
|
61
61
|
itemTemplate = ({ item }: { item: IItem | null }) => item ?
|
62
62
|
(<>
|
63
63
|
<Icon name={item.value} />
|
64
|
-
<span className="sd-
|
64
|
+
<span className="sd-text--normal sd-padding-t--1">
|
65
65
|
{item.label}
|
66
66
|
</span>
|
67
67
|
</>) : null
|