superdesk-ui-framework 3.0.74 → 3.0.76
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/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
- package/app/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
- package/app/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
- package/app/img/icon_illustrations/IconIllustration__summary.svg +27 -0
- package/app/img/icon_illustrations/IconIllustration__translate.svg +12 -0
- package/app/styles/_buttons.scss +47 -0
- package/app/styles/_simple-list.scss +13 -1
- package/app/styles/components/_list-item.scss +4 -0
- package/app/styles/components/_sd-grid-item.scss +4 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
- package/app/styles/form-elements/_inputs.scss +53 -11
- package/app-typescript/components/FormLabel.tsx +1 -1
- package/app-typescript/components/IllustrationButton.tsx +29 -0
- package/app-typescript/components/Lists/SimpleList.tsx +3 -0
- package/app-typescript/components/Select.tsx +13 -11
- package/app-typescript/components/SvgIconIllustration.tsx +191 -0
- package/app-typescript/index.ts +2 -0
- package/dist/examples.bundle.js +1143 -543
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +462 -2
- package/dist/react/IllustrationButton.tsx +89 -0
- package/dist/react/Index.tsx +6 -1
- package/dist/superdesk-ui.bundle.css +110 -14
- package/dist/superdesk-ui.bundle.js +588 -306
- package/dist/vendor.bundle.js +13 -13
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +462 -2
- package/examples/pages/react/IllustrationButton.tsx +89 -0
- package/examples/pages/react/Index.tsx +6 -1
- package/package.json +1 -4
- package/react/components/FormLabel.js +1 -1
- package/react/components/IllustrationButton.d.ts +11 -0
- package/react/components/IllustrationButton.js +62 -0
- package/react/components/Lists/SimpleList.d.ts +1 -0
- package/react/components/Lists/SimpleList.js +1 -0
- package/react/components/Select.js +2 -1
- package/react/components/SvgIconIllustration.d.ts +9 -0
- package/react/components/SvgIconIllustration.js +199 -0
- package/react/index.d.ts +2 -0
- package/react/index.js +6 -2
@@ -11548,6 +11548,9 @@
|
|
11548
11548
|
--space--3: calc(3 * var(--base-increment));
|
11549
11549
|
--space--4: calc(4 * var(--base-increment));
|
11550
11550
|
--space--5: calc(5 * var(--base-increment));
|
11551
|
+
--space--6: calc(6 * var(--base-increment));
|
11552
|
+
--space--7: calc(7 * var(--base-increment));
|
11553
|
+
--space--8: calc(8 * var(--base-increment));
|
11551
11554
|
--gap--none: 0;
|
11552
11555
|
--gap--x-small: 0.4rem;
|
11553
11556
|
--gap--small: 0.8rem;
|
@@ -11578,6 +11581,10 @@
|
|
11578
11581
|
--width__modal--large: 80rem;
|
11579
11582
|
--width__modal--x-large: 80vw;
|
11580
11583
|
--text-size--base: 1rem;
|
11584
|
+
--text-size-x-small: calc(var(--text-size--base) * 1.2);
|
11585
|
+
--text-size-small: calc(var(--text-size--base) * 1.4);
|
11586
|
+
--text-size-medium: calc(var(--text-size--base) * 1.6);
|
11587
|
+
--text-size-large: calc(var(--text-size--base) * 2);
|
11581
11588
|
--sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
11582
11589
|
--sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
11583
11590
|
--sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
@@ -11585,7 +11592,10 @@
|
|
11585
11592
|
--sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
|
11586
11593
|
--sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
11587
11594
|
--sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
11588
|
-
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
11595
|
+
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
11596
|
+
--form-element-height-small: var(--space--3);
|
11597
|
+
--form-element-height-medium: var(--space--4);
|
11598
|
+
--form-element-height-large: var(--space--5); }
|
11589
11599
|
|
11590
11600
|
:root,
|
11591
11601
|
[data-theme="light-ui"] {
|
@@ -18611,7 +18621,8 @@ h6 {
|
|
18611
18621
|
border-inline-width: 0 1px; }
|
18612
18622
|
|
18613
18623
|
.button-group--right, .button-group--end {
|
18614
|
-
margin-inline-start: auto;
|
18624
|
+
margin-inline-start: auto;
|
18625
|
+
justify-content: flex-end; }
|
18615
18626
|
|
18616
18627
|
.button-group--center {
|
18617
18628
|
margin-inline-start: auto;
|
@@ -18765,6 +18776,43 @@ h6 {
|
|
18765
18776
|
.button-group .tag-label, .button-group .p-multiselect-token {
|
18766
18777
|
margin: 0 !important; }
|
18767
18778
|
|
18779
|
+
.illustration-button {
|
18780
|
+
display: flex;
|
18781
|
+
flex-direction: column;
|
18782
|
+
align-items: center;
|
18783
|
+
gap: var(--space--1);
|
18784
|
+
border-radius: var(--b-radius--large);
|
18785
|
+
border: 1px solid var(--sd-colour-line--light);
|
18786
|
+
padding-inline: var(--space--2);
|
18787
|
+
padding-block-start: var(--space--2);
|
18788
|
+
padding-block-end: var(--space--1-5);
|
18789
|
+
box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.16) 0px 6px 12px -6px, rgba(0, 0, 0, 0.4) 0px 2px 8px -8px;
|
18790
|
+
transition: all 0.2s ease; }
|
18791
|
+
.illustration-button:hover {
|
18792
|
+
border: 1px solid var(--sd-colour-line--strong);
|
18793
|
+
box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.24) 0px 6px 12px -6px, rgba(0, 0, 0, 0.6) 0px 2px 8px -8px; }
|
18794
|
+
.illustration-button:active {
|
18795
|
+
border: 1px solid var(--sd-colour-interactive);
|
18796
|
+
box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 4px; }
|
18797
|
+
.illustration-button:focus-visible {
|
18798
|
+
outline: 2px solid var(--sd-colour-interactive--alpha-60);
|
18799
|
+
outline-offset: 1px; }
|
18800
|
+
.illustration-button:disabled, .illustration-button.illustration-button--disabled {
|
18801
|
+
box-shadow: none;
|
18802
|
+
border: 1px solid var(--sd-colour-line--light);
|
18803
|
+
pointer-events: none;
|
18804
|
+
opacity: 0.6; }
|
18805
|
+
|
18806
|
+
.illustration-button__illustration,
|
18807
|
+
.svg-icon-illustration {
|
18808
|
+
display: inline-block; }
|
18809
|
+
|
18810
|
+
.illustration-button__text-label {
|
18811
|
+
font-size: var(--text-size-small);
|
18812
|
+
font-weight: 500;
|
18813
|
+
line-height: 1.2;
|
18814
|
+
text-align: center; }
|
18815
|
+
|
18768
18816
|
.label {
|
18769
18817
|
display: inline-flex;
|
18770
18818
|
align-items: center;
|
@@ -35246,11 +35294,19 @@ a.label {
|
|
35246
35294
|
display: flex;
|
35247
35295
|
flex-direction: row;
|
35248
35296
|
align-items: center;
|
35249
|
-
gap:
|
35297
|
+
gap: var(--space--1);
|
35250
35298
|
color: var(--color-text); }
|
35251
35299
|
.simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
|
35252
35300
|
flex-grow: 0;
|
35253
35301
|
flex-shrink: 0; }
|
35302
|
+
.simple-list .simple-list__item.simple-list__item--gap-none {
|
35303
|
+
gap: 0; }
|
35304
|
+
.simple-list .simple-list__item.simple-list__item--gap-small {
|
35305
|
+
gap: var(--space-0-5); }
|
35306
|
+
.simple-list .simple-list__item.simple-list__item--gap-medium {
|
35307
|
+
gap: var(--space-1); }
|
35308
|
+
.simple-list .simple-list__item.simple-list__item--gap-large {
|
35309
|
+
gap: var(--space-1-5); }
|
35254
35310
|
.simple-list .simple-list__item--stacked {
|
35255
35311
|
display: flex;
|
35256
35312
|
flex-direction: column;
|
@@ -42122,6 +42178,8 @@ a.text-link {
|
|
42122
42178
|
margin: 0.2rem 0 0.8rem; }
|
42123
42179
|
.sd-list-item__row:only-child {
|
42124
42180
|
margin: 0.2rem 0; }
|
42181
|
+
.sd-list-item__row.sd-list-item__row--overflow-visible {
|
42182
|
+
overflow: visible !important; }
|
42125
42183
|
|
42126
42184
|
.sd-list-item__row--only-child {
|
42127
42185
|
margin: 0.2rem 0 !important; }
|
@@ -43301,6 +43359,9 @@ a.text-link {
|
|
43301
43359
|
grid-gap: 2.4rem;
|
43302
43360
|
margin: 2.4rem; }
|
43303
43361
|
|
43362
|
+
.sd-grid-list--xx-small {
|
43363
|
+
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
|
43364
|
+
|
43304
43365
|
.sd-grid-list--x-small {
|
43305
43366
|
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
|
43306
43367
|
|
@@ -49649,7 +49710,7 @@ textarea.sd-media-carousel__media-title {
|
|
49649
49710
|
position: relative;
|
49650
49711
|
display: block;
|
49651
49712
|
position: relative;
|
49652
|
-
padding-inline-end:
|
49713
|
+
padding-inline-end: var(--space--3);
|
49653
49714
|
min-width: 5rem;
|
49654
49715
|
cursor: pointer; }
|
49655
49716
|
.sd-input__select::placeholder {
|
@@ -49722,25 +49783,60 @@ textarea.sd-media-carousel__media-title {
|
|
49722
49783
|
grid-column: 2/4; }
|
49723
49784
|
.sd-input.sd-input--is-select::after {
|
49724
49785
|
position: relative;
|
49725
|
-
|
49786
|
+
font-family: 'sd_icons';
|
49787
|
+
content: "\e64b";
|
49726
49788
|
grid-row: 2/3;
|
49727
49789
|
grid-column: 2/4;
|
49790
|
+
--icon-base-size: 14px !important;
|
49791
|
+
width: var(--icon-base-size);
|
49792
|
+
height: var(--icon-base-size);
|
49793
|
+
line-height: var(--icon-base-size);
|
49794
|
+
font-size: var(--icon-base-size);
|
49795
|
+
speak: none;
|
49796
|
+
font-style: normal;
|
49797
|
+
font-weight: normal;
|
49798
|
+
font-variant: normal;
|
49799
|
+
text-transform: none;
|
49800
|
+
color: var(--color-icon-default);
|
49801
|
+
-webkit-font-smoothing: antialiased;
|
49728
49802
|
align-self: center;
|
49729
49803
|
justify-self: flex-end;
|
49730
49804
|
display: inline-block;
|
49731
|
-
|
49732
|
-
height: 0;
|
49733
|
-
margin-inline-end: 1rem;
|
49734
|
-
vertical-align: middle;
|
49735
|
-
border-inline-start: 0.4rem solid transparent;
|
49736
|
-
border-inline-end: 0.4rem solid transparent;
|
49737
|
-
border-block-start: 0.4rem solid var(--color-text);
|
49805
|
+
margin-inline-end: var(--space--1);
|
49738
49806
|
pointer-events: none;
|
49739
49807
|
opacity: 0.4;
|
49740
|
-
|
49741
|
-
|
49808
|
+
z-index: 0;
|
49809
|
+
transition: opacity 0.2s ease; }
|
49742
49810
|
.sd-input.sd-input--is-select:hover::after {
|
49743
49811
|
opacity: 0.6; }
|
49812
|
+
.sd-input .sd-input__select-caret-wrapper {
|
49813
|
+
position: relative;
|
49814
|
+
display: block; }
|
49815
|
+
.sd-input .sd-input__select-caret-wrapper::after {
|
49816
|
+
--icon-base-size: 14px !important;
|
49817
|
+
font-family: 'sd_icons';
|
49818
|
+
content: "\e64b";
|
49819
|
+
position: absolute;
|
49820
|
+
inset-block-start: 10px;
|
49821
|
+
inset-inline-end: 0;
|
49822
|
+
width: var(--icon-base-size);
|
49823
|
+
height: var(--icon-base-size);
|
49824
|
+
line-height: var(--icon-base-size);
|
49825
|
+
font-size: var(--icon-base-size);
|
49826
|
+
speak: none;
|
49827
|
+
font-style: normal;
|
49828
|
+
font-weight: normal;
|
49829
|
+
font-variant: normal;
|
49830
|
+
text-transform: none;
|
49831
|
+
color: var(--color-text);
|
49832
|
+
-webkit-font-smoothing: antialiased;
|
49833
|
+
margin-inline-end: var(--space--1);
|
49834
|
+
pointer-events: none;
|
49835
|
+
opacity: 0.6;
|
49836
|
+
z-index: 0;
|
49837
|
+
transition: opacity 0.2s ease; }
|
49838
|
+
.sd-input .sd-input__select-caret-wrapper:hover::after {
|
49839
|
+
opacity: 1; }
|
49744
49840
|
.sd-input .sd-input__message-box {
|
49745
49841
|
grid-row: 3/4;
|
49746
49842
|
grid-column: 2/3; }
|