superdesk-ui-framework 3.0.42 → 3.0.43

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.
Files changed (104) hide show
  1. package/app/styles/_accessibility.scss +349 -310
  2. package/app/styles/_alerts.scss +102 -71
  3. package/app/styles/_animations.scss +29 -16
  4. package/app/styles/_avatar.scss +159 -140
  5. package/app/styles/_badge.scss +11 -5
  6. package/app/styles/_big-icon-font.scss +21 -9
  7. package/app/styles/_boxed-list.scss +72 -47
  8. package/app/styles/_buttons.scss +266 -177
  9. package/app/styles/_carousel.scss +58 -45
  10. package/app/styles/_content-divider.scss +28 -2
  11. package/app/styles/_drag-drop.scss +3 -0
  12. package/app/styles/_empty-states.scss +21 -13
  13. package/app/styles/_hamburger.scss +142 -144
  14. package/app/styles/_helpers.scss +297 -93
  15. package/app/styles/_icon-font.scss +75 -43
  16. package/app/styles/_icon-labels.scss +11 -1
  17. package/app/styles/_labels.scss +27 -14
  18. package/app/styles/_loaders.scss +2 -1
  19. package/app/styles/_master-desk.scss +67 -31
  20. package/app/styles/_mixins.scss +40 -20
  21. package/app/styles/_modals.scss +112 -56
  22. package/app/styles/_panel-info.scss +38 -34
  23. package/app/styles/_popover.scss +0 -1
  24. package/app/styles/_publisher-styles.scss +132 -122
  25. package/app/styles/_sd-tag-input.scss +104 -24
  26. package/app/styles/_simple-list.scss +89 -66
  27. package/app/styles/_spinner.scss +24 -17
  28. package/app/styles/_table-list.scss +114 -80
  29. package/app/styles/_tables.scss +14 -2
  30. package/app/styles/_tabs-vertical.scss +46 -43
  31. package/app/styles/_tabs.scss +97 -87
  32. package/app/styles/_tag-labels.scss +26 -11
  33. package/app/styles/_thumb-carousel.scss +37 -11
  34. package/app/styles/_toggle-box.scss +27 -7
  35. package/app/styles/_toggle-button.scss +5 -1
  36. package/app/styles/_tooltips.scss +284 -272
  37. package/app/styles/components/_card-item.scss +268 -192
  38. package/app/styles/components/_list-item.scss +261 -175
  39. package/app/styles/components/_sd-circular-progress.scss +109 -79
  40. package/app/styles/components/_sd-collapse-box.scss +45 -33
  41. package/app/styles/components/_sd-comment-box.scss +17 -12
  42. package/app/styles/components/_sd-dropzone.scss +32 -15
  43. package/app/styles/components/_sd-editor-popup.scss +29 -15
  44. package/app/styles/components/_sd-grid-item.scss +349 -237
  45. package/app/styles/components/_sd-loader.scss +1 -2
  46. package/app/styles/components/_sd-media-carousel.scss +119 -78
  47. package/app/styles/components/_sd-notification-panel.scss +2 -1
  48. package/app/styles/components/_sd-pagination.scss +27 -19
  49. package/app/styles/components/_sd-photo-preview.scss +82 -41
  50. package/app/styles/components/_sd-searchbar.scss +79 -51
  51. package/app/styles/components/_sd-toaster.scss +52 -30
  52. package/app/styles/components/_subnav.scss +230 -135
  53. package/app/styles/components/_theme-selector.scss +78 -53
  54. package/app/styles/components/sd-slider.scss +11 -7
  55. package/app/styles/design-tokens/_design-tokens-general.scss +31 -27
  56. package/app/styles/design-tokens/_new-colors.scss +3 -1
  57. package/app/styles/dropdowns/_basic-dropdown.scss +164 -86
  58. package/app/styles/dropdowns/_input-dropdown.scss +5 -2
  59. package/app/styles/dropdowns/_navigation_dropdown.scss +18 -4
  60. package/app/styles/dropdowns/_nested-dropdown.scss +11 -2
  61. package/app/styles/dropdowns/_other_dropdown.scss +9 -3
  62. package/app/styles/editor/_editor-buttons.scss +10 -6
  63. package/app/styles/editor/_editor-themes.scss +401 -350
  64. package/app/styles/form-elements/_autocomplete.scss +7 -1
  65. package/app/styles/form-elements/_checkbox.scss +230 -159
  66. package/app/styles/form-elements/_forms-general.scss +345 -285
  67. package/app/styles/form-elements/_input-preview.scss +15 -9
  68. package/app/styles/form-elements/_input-wrap.scss +77 -71
  69. package/app/styles/form-elements/_inputs.scss +668 -489
  70. package/app/styles/form-elements/_radio.scss +10 -5
  71. package/app/styles/form-elements/_switch.scss +27 -16
  72. package/app/styles/grids/_basic-grid.scss +83 -64
  73. package/app/styles/grids/_grid-layout.scss +301 -165
  74. package/app/styles/grids/_layout-grid.scss +85 -59
  75. package/app/styles/grids/_sd-kanban-list.scss +14 -4
  76. package/app/styles/interface-elements/_side-panel.scss +279 -200
  77. package/app/styles/layout/_basic-layout.scss +36 -34
  78. package/app/styles/layout/_container.scss +38 -31
  79. package/app/styles/layout/_editor.scss +57 -17
  80. package/app/styles/layout/_general.scss +81 -67
  81. package/app/styles/menus/_sd-bottom-tabs.scss +21 -12
  82. package/app/styles/menus/_sd-content-navigation.scss +20 -16
  83. package/app/styles/menus/_sd-left-navigation.scss +62 -49
  84. package/app/styles/menus/_sd-sidebar-menu.scss +365 -323
  85. package/app/styles/menus/_sd-top-menu.scss +16 -7
  86. package/app/styles/primereact/_pr-autocomplete.scss +2 -0
  87. package/app/styles/primereact/_pr-datepicker.scss +13 -2
  88. package/app/styles/primereact/_pr-dialog.scss +55 -47
  89. package/app/styles/primereact/_pr-dropdown.scss +27 -22
  90. package/app/styles/primereact/_pr-general.scss +3 -0
  91. package/app/styles/primereact/_pr-menu.scss +2 -1
  92. package/app/styles/primereact/_pr-skeleton.scss +1 -0
  93. package/app/styles/primereact/_pr-tag-input.scss +1 -0
  94. package/app/styles/variables/_colors.scss +168 -170
  95. package/app/styles/variables/_typography.scss +1 -2
  96. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  97. package/app-typescript/components/Menu.tsx +1 -1
  98. package/dist/examples.bundle.css +18 -16
  99. package/dist/examples.bundle.js +5 -7
  100. package/dist/superdesk-ui.bundle.css +4265 -3552
  101. package/dist/superdesk-ui.bundle.js +4 -6
  102. package/package.json +2 -2
  103. package/react/components/Form/InputWrapper.d.ts +1 -1
  104. package/react/components/Menu.js +1 -1
package/app/styles/_hamburger.scss CHANGED
@@ -1,160 +1,158 @@
1
1
  // Settings
2
- // ==================================================
3
- $hamburger-layer-width : 18px !default;
4
- $hamburger-layer-height : 3px !default;
5
- $hamburger-layer-spacing : 3px !default;
6
- $hamburger-layer-color : #fff !default;
2
+ $hamburger-layer-width : 18px !default;
3
+ $hamburger-layer-height : 3px !default;
4
+ $hamburger-layer-spacing : 3px !default;
5
+ $hamburger-layer-color : #fff !default;
7
6
  $hamburger-layer-border-radius : 1px !default;
8
- $hamburger-hover-opacity : 0.7 !default;
9
- $hamburger-active-layer-color : $hamburger-layer-color !default;
7
+ $hamburger-hover-opacity : 0.7 !default;
8
+ $hamburger-active-layer-color : $hamburger-layer-color !default;
10
9
  $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
11
10
 
12
11
  // Hamburger
13
- // ==================================================
14
12
  .hamburger {
15
- cursor: pointer;
16
- transition-property: opacity;
17
- transition-duration: 0.15s;
18
- transition-timing-function: linear;
19
-
20
- &:hover {
21
- opacity: $hamburger-hover-opacity;
22
- }
23
-
24
- &.is-active {
25
- opacity: 0.5;
26
- &:hover {
27
- opacity: $hamburger-active-hover-opacity;
28
- }
29
-
30
- .hamburger__inner,
31
- .hamburger__inner::before,
32
- .hamburger__inner::after {
33
- background-color: $hamburger-active-layer-color;
34
- }
35
- }
36
- }
37
-
38
- .hamburger__box {
39
- width: $hamburger-layer-width;
40
- height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
41
- display: inline-block;
42
- position: relative;
43
- }
44
-
45
- .hamburger__inner {
46
- display: block;
47
- top: 50%;
48
- margin-top: $hamburger-layer-height / -2;
49
-
50
- &,
51
- &::before,
52
- &::after {
53
- width: $hamburger-layer-width;
54
- height: $hamburger-layer-height;
55
- background-color: $hamburger-layer-color;
56
- border-radius: $hamburger-layer-border-radius;
57
- position: absolute;
58
- transition-property: transform;
59
- transition-duration: 0.15s;
60
- transition-timing-function: ease;
61
- }
62
-
63
- &::before,
64
- &::after {
65
- content: "";
66
- display: block;
67
- }
68
-
69
- &::before {
70
- top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
71
- }
72
-
73
- &::after {
74
- bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
75
- }
76
- }
77
-
13
+ cursor: pointer;
14
+ transition-property: opacity;
15
+ transition-duration: 0.15s;
16
+ transition-timing-function: linear;
17
+
18
+ &:hover {
19
+ opacity: $hamburger-hover-opacity;
20
+ }
21
+
22
+ &.is-active {
23
+ opacity: 0.5;
24
+
25
+ &:hover {
26
+ opacity: $hamburger-active-hover-opacity;
27
+ }
28
+
29
+ .hamburger__inner,
30
+ .hamburger__inner::before,
31
+ .hamburger__inner::after {
32
+ background-color: $hamburger-active-layer-color;
33
+ }
34
+ }
35
+ }
36
+
37
+ .hamburger__box {
38
+ width: $hamburger-layer-width;
39
+ height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
40
+ display: inline-block;
41
+ position: relative;
42
+ }
43
+
44
+ .hamburger__inner {
45
+ display: block;
46
+ top: 50%;
47
+ margin-top: $hamburger-layer-height / -2;
48
+
49
+ &,
50
+ &::before,
51
+ &::after {
52
+ width: $hamburger-layer-width;
53
+ height: $hamburger-layer-height;
54
+ background-color: $hamburger-layer-color;
55
+ border-radius: $hamburger-layer-border-radius;
56
+ position: absolute;
57
+ transition-property: transform;
58
+ transition-duration: 0.15s;
59
+ transition-timing-function: ease;
60
+ }
61
+
62
+ &::before,
63
+ &::after {
64
+ content: "";
65
+ display: block;
66
+ }
67
+
68
+ &::before {
69
+ top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
70
+ }
71
+
72
+ &::after {
73
+ bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
74
+ }
75
+ }
76
+
78
77
 
79
78
  // Hamburger animation
80
- // ==================================================
81
79
 
82
80
  /* Spin */
83
81
  .hamburger--spin {
84
- .hamburger__inner {
85
- transition-duration: 0.22s;
86
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
87
-
88
- &::before {
89
- transition: top 0.1s 0.25s ease-in,
90
- opacity 0.1s ease-in;
91
- }
92
-
93
- &::after {
94
- transition: bottom 0.1s 0.25s ease-in,
95
- transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
96
- }
97
- }
98
-
99
- &.is-active {
100
- .hamburger__inner {
101
- transform: rotate(225deg);
102
- transition-delay: 0.12s;
103
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
104
-
105
- &::before {
106
- top: 0;
107
- opacity: 0;
108
- transition: top 0.1s ease-out,
109
- opacity 0.1s 0.12s ease-out;
110
- }
111
-
112
- &::after {
113
- bottom: 0;
114
- transform: rotate(-90deg);
115
- transition: bottom 0.1s ease-out,
116
- transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
117
- }
118
- }
119
- }
82
+ .hamburger__inner {
83
+ transition-duration: 0.22s;
84
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
85
+
86
+ &::before {
87
+ transition: top 0.1s 0.25s ease-in,
88
+ opacity 0.1s ease-in;
89
+ }
90
+
91
+ &::after {
92
+ transition: bottom 0.1s 0.25s ease-in,
93
+ transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
94
+ }
95
+ }
96
+
97
+ &.is-active {
98
+ .hamburger__inner {
99
+ transform: rotate(225deg);
100
+ transition-delay: 0.12s;
101
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
102
+
103
+ &::before {
104
+ top: 0;
105
+ opacity: 0;
106
+ transition: top 0.1s ease-out,
107
+ opacity 0.1s 0.12s ease-out;
108
+ }
109
+
110
+ &::after {
111
+ bottom: 0;
112
+ transform: rotate(-90deg);
113
+ transition: bottom 0.1s ease-out,
114
+ transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
115
+ }
116
+ }
117
+ }
120
118
  }
121
119
 
122
120
  /* Squeeze */
123
121
  .hamburger--squeeze {
124
- .hamburger__inner {
125
- transition-duration: 0.075s;
126
- transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
127
-
128
- &::before {
129
- transition: top 0.075s 0.12s ease,
130
- opacity 0.075s ease;
131
- }
132
-
133
- &::after {
134
- transition: bottom 0.075s 0.12s ease,
135
- transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
136
- }
137
- }
138
-
139
- &.is-active {
140
- .hamburger__inner {
141
- transform: rotate(45deg);
142
- transition-delay: 0.12s;
143
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
144
-
145
- &::before {
146
- top: 0;
147
- opacity: 0;
148
- transition: top 0.075s ease,
149
- opacity 0.075s 0.12s ease;
150
- }
151
-
152
- &::after {
153
- bottom: 0;
154
- transform: rotate(-90deg);
155
- transition: bottom 0.075s ease,
156
- transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
157
- }
158
- }
159
- }
122
+ .hamburger__inner {
123
+ transition-duration: 0.075s;
124
+ transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
125
+
126
+ &::before {
127
+ transition: top 0.075s 0.12s ease,
128
+ opacity 0.075s ease;
129
+ }
130
+
131
+ &::after {
132
+ transition: bottom 0.075s 0.12s ease,
133
+ transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
134
+ }
135
+ }
136
+
137
+ &.is-active {
138
+ .hamburger__inner {
139
+ transform: rotate(45deg);
140
+ transition-delay: 0.12s;
141
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
142
+
143
+ &::before {
144
+ top: 0;
145
+ opacity: 0;
146
+ transition: top 0.075s ease,
147
+ opacity 0.075s 0.12s ease;
148
+ }
149
+
150
+ &::after {
151
+ bottom: 0;
152
+ transform: rotate(-90deg);
153
+ transition: bottom 0.075s ease,
154
+ transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
155
+ }
156
+ }
157
+ }
160
158
  }