superdesk-ui-framework 3.0.1-beta.22 → 3.0.1-beta.24

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.
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
  import { PropsList, Prop } from '../../../app-typescript';
4
- import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
4
+ import { MultiSelect } from '../../../app-typescript';
5
5
 
6
6
  interface IColor {
7
7
  name: string;
@@ -56,7 +56,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
56
56
  />
57
57
  `}
58
58
  </Markup.ReactMarkupCodePreview>
59
-
59
+
60
60
  <Markup.ReactMarkup>
61
61
  <Markup.ReactMarkupPreview>
62
62
  <div className='docs-page__content-row docs-page__content-row--no-margin'>
@@ -110,7 +110,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
110
110
  showSelectAll
111
111
  optionLabel='name'
112
112
  itemTemplate={(option) => {
113
- if (option) {
113
+ if (option) {
114
114
  return (
115
115
  <div style={{display: 'flex', alignItems: 'center'}}>
116
116
  <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -147,7 +147,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
147
147
  showSelectAll
148
148
  optionLabel='name'
149
149
  itemTemplate={(option) => {
150
- if (option) {
150
+ if (option) {
151
151
  return (
152
152
  <div style={{display: 'flex', alignItems: 'center'}}>
153
153
  <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -194,7 +194,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
194
194
  <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
195
195
  <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
196
196
  </PropsList>
197
-
197
+
198
198
  </section>
199
199
  )
200
200
  }
@@ -41932,7 +41932,7 @@ a.text-link {
41932
41932
  width: 32rem;
41933
41933
  max-height: 100%; }
41934
41934
  .editor-popup__main.editor-popup__main--floating {
41935
- background-color: #fff;
41935
+ background-color: var(--color-dropdown-menu-Bg);
41936
41936
  z-index: 2;
41937
41937
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1); }
41938
41938
 
@@ -41987,16 +41987,16 @@ a.text-link {
41987
41987
  padding-top: 0; }
41988
41988
 
41989
41989
  .editor-popup__secondary-content {
41990
- background-color: rgba(123, 123, 123, 0.1);
41991
- border-top: 1px solid rgba(123, 123, 123, 0.2); }
41990
+ background-color: rgba(106, 120, 138, 0.05);
41991
+ border-top: 1px solid var(--sd-colour-line--light); }
41992
41992
 
41993
41993
  .comment-box__reply-item {
41994
- border-bottom: 1px solid rgba(123, 123, 123, 0.2); }
41994
+ border-bottom: 1px solid var(--sd-colour-line--light); }
41995
41995
 
41996
41996
  .comment-box__input {
41997
41997
  padding: 0.4rem;
41998
- border-radius: var(--b-radius--x-small);
41999
- border: 1px solid rgba(123, 123, 123, 0.4);
41998
+ border-radius: var(--b-radius--small);
41999
+ border: 1px solid var(--sd-colour-line--light);
42000
42000
  height: 2.8rem;
42001
42001
  resize: none; }
42002
42002
 
@@ -42004,14 +42004,18 @@ a.text-link {
42004
42004
  display: none;
42005
42005
  padding-top: 1rem; }
42006
42006
  .comment-box__reply-toolbar--active {
42007
- display: block; }
42007
+ display: flex;
42008
+ justify-content: flex-end;
42009
+ align-items: center;
42010
+ gap: var(--gap--small); }
42008
42011
 
42009
42012
  .comment-box__button-toolbar {
42010
42013
  margin-top: 1.2rem;
42011
42014
  display: flex;
42012
42015
  flex-direction: row;
42013
42016
  align-items: center;
42014
- justify-content: flex-start; }
42017
+ justify-content: flex-start;
42018
+ gap: var(--gap--small); }
42015
42019
  .comment-box__button-toolbar--right {
42016
42020
  justify-content: flex-end; }
42017
42021
  .comment-box__button-toolbar--small {