@gooddata/sdk-ui-ext 10.19.0-alpha.8 → 10.19.0-beta.0

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 (42) hide show
  1. package/esm/index.d.ts +0 -2
  2. package/esm/index.d.ts.map +1 -1
  3. package/esm/index.js +0 -1
  4. package/esm/index.js.map +1 -1
  5. package/esm/internal/translations/de-DE.json +4 -1
  6. package/esm/internal/translations/en-AU.json +4 -1
  7. package/esm/internal/translations/en-GB.json +4 -1
  8. package/esm/internal/translations/en-US.json +15 -0
  9. package/esm/internal/translations/es-419.json +4 -1
  10. package/esm/internal/translations/es-ES.json +4 -1
  11. package/esm/internal/translations/fi-FI.json +4 -1
  12. package/esm/internal/translations/fr-CA.json +4 -1
  13. package/esm/internal/translations/fr-FR.json +4 -1
  14. package/esm/internal/translations/it-IT.json +4 -1
  15. package/esm/internal/translations/ja-JP.json +4 -1
  16. package/esm/internal/translations/nl-NL.json +4 -1
  17. package/esm/internal/translations/pt-BR.json +4 -1
  18. package/esm/internal/translations/pt-PT.json +4 -1
  19. package/esm/internal/translations/zh-HK.json +4 -1
  20. package/esm/internal/translations/zh-Hans.json +4 -1
  21. package/esm/internal/translations/zh-Hant.json +4 -1
  22. package/esm/notificationsPanel/Notification/AlertNotification.d.ts.map +1 -1
  23. package/esm/notificationsPanel/Notification/AlertNotification.js +26 -3
  24. package/esm/notificationsPanel/Notification/AlertNotification.js.map +1 -1
  25. package/esm/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelButton.js +1 -1
  26. package/esm/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelButton.js.map +1 -1
  27. package/esm/notificationsPanel/NotificationsPanel/NotificationsPanel.js +3 -1
  28. package/esm/notificationsPanel/NotificationsPanel/NotificationsPanel.js.map +1 -1
  29. package/esm/notificationsPanel/components/Popup.d.ts +9 -0
  30. package/esm/notificationsPanel/components/Popup.d.ts.map +1 -0
  31. package/esm/notificationsPanel/components/Popup.js +15 -0
  32. package/esm/notificationsPanel/components/Popup.js.map +1 -0
  33. package/esm/notificationsPanel/data/useNotifications.d.ts +2 -2
  34. package/esm/notificationsPanel/data/useNotifications.js +1 -1
  35. package/esm/sdk-ui-ext.d.ts +0 -48
  36. package/package.json +17 -17
  37. package/src/notificationsPanel/Notification/DefaultNotification.scss +31 -4
  38. package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanel.scss +1 -0
  39. package/src/notificationsPanel/NotificationsPanel/DefaultNotificationsPanelButton.scss +1 -0
  40. package/src/notificationsPanel/notificationPanel.scss +1 -0
  41. package/styles/css/main.css +523 -2
  42. package/styles/css/main.css.map +1 -1
@@ -1,4 +1,4 @@
1
- // (C) 2024 GoodData Corporation
1
+ // (C) 2024-2025 GoodData Corporation
2
2
 
3
3
  .gd-ui-ext-notification {
4
4
  $root: &;
@@ -36,6 +36,10 @@
36
36
  display: none;
37
37
  }
38
38
  }
39
+
40
+ #{$root}__unread-status {
41
+ border: 1.4px solid var(--gd-palette-complementary-2);
42
+ }
39
43
  }
40
44
 
41
45
  &__unsupported {
@@ -79,13 +83,12 @@
79
83
  &__details {
80
84
  display: flex;
81
85
  flex-direction: column;
82
- justify-content: space-between;
86
+ justify-content: center;
83
87
  flex-shrink: 1;
84
88
 
85
89
  width: 100%;
86
90
  height: 100%;
87
-
88
- overflow: hidden;
91
+ min-width: 0;
89
92
  }
90
93
 
91
94
  &__title {
@@ -130,5 +133,29 @@
130
133
  display: flex;
131
134
  flex-direction: row;
132
135
  align-items: center;
136
+ height: 16px;
137
+ }
138
+
139
+ &__error {
140
+ display: flex;
141
+ flex-direction: row;
142
+ align-items: center;
143
+ gap: 5px;
144
+ height: 16px;
145
+ font-size: 12px;
146
+ font-weight: 400;
147
+ color: var(--gd-palette-error-base);
148
+ white-space: nowrap;
149
+ position: relative;
150
+ }
151
+
152
+ &__error-icon {
153
+ width: 12px;
154
+ height: 12px;
155
+ }
156
+
157
+ &__error-popup {
158
+ font-size: 12px;
159
+ line-height: 18px;
133
160
  }
134
161
  }
@@ -8,6 +8,7 @@
8
8
  background-color: var(--gd-palette-complementary-0);
9
9
 
10
10
  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
11
+ border-radius: var(--gd-modal-borderRadius, 3px);
11
12
 
12
13
  display: flex;
13
14
  flex-direction: column;
@@ -13,6 +13,7 @@
13
13
  }
14
14
 
15
15
  &__icon {
16
+ --gd-icon-fill-color: #fff;
16
17
  opacity: 0.8;
17
18
  display: flex;
18
19
  align-items: center;
@@ -1,4 +1,5 @@
1
1
  // (C) 2024-2025 GoodData Corporation
2
+ @use "@gooddata/sdk-ui-kit/styles/scss/bubble.scss";
2
3
  @use "@gooddata/sdk-ui-kit/styles/scss/overlay.scss";
3
4
  @use "@gooddata/sdk-ui-kit/styles/scss/tabs.scss";
4
5
  @use "@gooddata/sdk-ui-kit/src/@ui/UiIcon/UiIcon.scss";
@@ -733,6 +733,501 @@
733
733
 
734
734
  /* allow vendor prefixes and disable max length */
735
735
  /* allow vendor prefixes and disable max length */
736
+ /* ==========================================================================
737
+ Variables, mixins, silent classes etc.
738
+ ========================================================================== */
739
+ /* ==========================================================================
740
+ Bubble
741
+ ========================================================================== */
742
+ .bubbleArrowShift {
743
+ width: 7px;
744
+ height: 12px;
745
+ }
746
+
747
+ .inlineBubbleHelp {
748
+ display: inline-block;
749
+ font: 14px/1 "Indigo", sans-serif;
750
+ vertical-align: middle;
751
+ color: var(--gd-palette-complementary-6-from-theme, #bbb);
752
+ }
753
+ .inlineBubbleHelp::before {
754
+ content: "\e60b";
755
+ }
756
+ .inlineBubbleHelp, .inlineBubbleHelp:hover, .inlineBubbleHelp:focus, .inlineBubbleHelp:active {
757
+ text-decoration: none;
758
+ }
759
+ .inlineBubbleHelp:hover, .inlineBubbleHelp:focus, .inlineBubbleHelp:active {
760
+ color: #999;
761
+ cursor: help;
762
+ }
763
+
764
+ .bubble {
765
+ position: absolute;
766
+ max-width: 300px;
767
+ -moz-transition-property: opacity;
768
+ -webkit-transition-property: opacity;
769
+ transition-property: opacity;
770
+ -moz-transition-duration: 0.2s;
771
+ -webkit-transition-duration: 0.2s;
772
+ transition-duration: 0.2s;
773
+ -moz-transition-timing-function: ease-in-out;
774
+ -webkit-transition-timing-function: ease-in-out;
775
+ transition-timing-function: ease-in-out;
776
+ }
777
+ .bubble.bubble-small {
778
+ max-width: 200px;
779
+ }
780
+ .bubble.gd-bubble {
781
+ position: relative;
782
+ }
783
+ .bubble.isActive {
784
+ opacity: 1;
785
+ }
786
+ .bubble .helper {
787
+ position: absolute;
788
+ background: white;
789
+ opacity: 0.01;
790
+ }
791
+ .bubble .bubble-content {
792
+ position: relative;
793
+ overflow: visible;
794
+ padding: 7px 10px;
795
+ border-radius: 3px;
796
+ pointer-events: none;
797
+ }
798
+ .bubble .bubble-content .content {
799
+ display: block;
800
+ overflow: hidden;
801
+ max-width: 100%;
802
+ word-wrap: break-word;
803
+ word-break: break-word;
804
+ pointer-events: auto;
805
+ }
806
+ .bubble .bubble-content .content a {
807
+ color: var(--gd-palette-complementary-0, #fff);
808
+ opacity: 0.8;
809
+ text-decoration: underline;
810
+ -moz-transition-property: all;
811
+ -webkit-transition-property: all;
812
+ transition-property: all;
813
+ -moz-transition-duration: 0.25s;
814
+ -webkit-transition-duration: 0.25s;
815
+ transition-duration: 0.25s;
816
+ -moz-transition-timing-function: ease-in-out;
817
+ -webkit-transition-timing-function: ease-in-out;
818
+ transition-timing-function: ease-in-out;
819
+ }
820
+ .bubble .bubble-content .content a:hover {
821
+ opacity: 1;
822
+ }
823
+ .bubble .bubble-content .content,
824
+ .bubble .bubble-content .content p,
825
+ .bubble .bubble-content .content a {
826
+ font: 400 12px/18px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
827
+ }
828
+ .bubble .bubble-content .content p {
829
+ margin: 0;
830
+ }
831
+ .bubble .bubble-content .content p + p {
832
+ margin-top: 0.5em;
833
+ }
834
+ .bubble.bubble-primary {
835
+ padding: 0;
836
+ border-radius: 3px;
837
+ border-style: solid;
838
+ border-width: 0;
839
+ border-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
840
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
841
+ }
842
+ .bubble.bubble-primary .arrow-border {
843
+ display: none;
844
+ }
845
+ .bubble.bubble-primary {
846
+ color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
847
+ background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
848
+ }
849
+ .bubble.bubble-primary .arrow-border,
850
+ .bubble.bubble-primary .arrow {
851
+ border-color: transparent;
852
+ }
853
+ .bubble.bubble-primary.arrow-bottom-direction .arrow-border {
854
+ border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
855
+ }
856
+ .bubble.bubble-primary.arrow-bottom-direction .arrow {
857
+ border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
858
+ }
859
+ .bubble.bubble-primary.arrow-top-direction .arrow-border {
860
+ border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
861
+ }
862
+ .bubble.bubble-primary.arrow-top-direction .arrow {
863
+ border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
864
+ }
865
+ .bubble.bubble-primary.arrow-left-direction .arrow-border {
866
+ border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
867
+ }
868
+ .bubble.bubble-primary.arrow-left-direction .arrow {
869
+ border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
870
+ }
871
+ .bubble.bubble-primary.arrow-right-direction .arrow-border {
872
+ border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
873
+ }
874
+ .bubble.bubble-primary.arrow-right-direction .arrow {
875
+ border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
876
+ }
877
+ .bubble.bubble-secondary {
878
+ padding: 0;
879
+ border-radius: 3px;
880
+ border-style: solid;
881
+ border-width: 0;
882
+ border-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
883
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
884
+ }
885
+ .bubble.bubble-secondary .arrow-border {
886
+ display: none;
887
+ }
888
+ .bubble.bubble-secondary {
889
+ color: var(--gd-palette-complementary-0, #fff);
890
+ background: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
891
+ }
892
+ .bubble.bubble-secondary .arrow-border,
893
+ .bubble.bubble-secondary .arrow {
894
+ border-color: transparent;
895
+ }
896
+ .bubble.bubble-secondary.arrow-bottom-direction .arrow-border {
897
+ border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
898
+ }
899
+ .bubble.bubble-secondary.arrow-bottom-direction .arrow {
900
+ border-top-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
901
+ }
902
+ .bubble.bubble-secondary.arrow-top-direction .arrow-border {
903
+ border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
904
+ }
905
+ .bubble.bubble-secondary.arrow-top-direction .arrow {
906
+ border-bottom-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
907
+ }
908
+ .bubble.bubble-secondary.arrow-left-direction .arrow-border {
909
+ border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
910
+ }
911
+ .bubble.bubble-secondary.arrow-left-direction .arrow {
912
+ border-right-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
913
+ }
914
+ .bubble.bubble-secondary.arrow-right-direction .arrow-border {
915
+ border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
916
+ }
917
+ .bubble.bubble-secondary.arrow-right-direction .arrow {
918
+ border-left-color: var(--gd-palette-primary-base-t10, rgba(20, 178, 226, 0.9));
919
+ }
920
+ .bubble.bubble-dark {
921
+ padding: 0;
922
+ border-radius: 3px;
923
+ border-style: solid;
924
+ border-width: 0;
925
+ border-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
926
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
927
+ }
928
+ .bubble.bubble-dark .arrow-border {
929
+ display: none;
930
+ }
931
+ .bubble.bubble-dark {
932
+ color: var(--gd-tooltip-color, var(--gd-palette-complementary-0, #fff));
933
+ background: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
934
+ }
935
+ .bubble.bubble-dark .arrow-border,
936
+ .bubble.bubble-dark .arrow {
937
+ border-color: transparent;
938
+ }
939
+ .bubble.bubble-dark.arrow-bottom-direction .arrow-border {
940
+ border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
941
+ }
942
+ .bubble.bubble-dark.arrow-bottom-direction .arrow {
943
+ border-top-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
944
+ }
945
+ .bubble.bubble-dark.arrow-top-direction .arrow-border {
946
+ border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
947
+ }
948
+ .bubble.bubble-dark.arrow-top-direction .arrow {
949
+ border-bottom-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
950
+ }
951
+ .bubble.bubble-dark.arrow-left-direction .arrow-border {
952
+ border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
953
+ }
954
+ .bubble.bubble-dark.arrow-left-direction .arrow {
955
+ border-right-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
956
+ }
957
+ .bubble.bubble-dark.arrow-right-direction .arrow-border {
958
+ border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
959
+ }
960
+ .bubble.bubble-dark.arrow-right-direction .arrow {
961
+ border-left-color: var(--gd-tooltip-backgroundColor, var(--gd-palette-complementary-8-from-theme, rgba(70, 78, 86, 0.95)));
962
+ }
963
+ .bubble.bubble-light {
964
+ padding: 0;
965
+ border-radius: 3px;
966
+ border-style: solid;
967
+ border-width: 1px;
968
+ border-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
969
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
970
+ }
971
+ .bubble.bubble-light {
972
+ color: #000;
973
+ background: rgba(255, 255, 255, 0.95);
974
+ }
975
+ .bubble.bubble-light .arrow-border,
976
+ .bubble.bubble-light .arrow {
977
+ border-color: transparent;
978
+ }
979
+ .bubble.bubble-light.arrow-bottom-direction .arrow-border {
980
+ border-top-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
981
+ }
982
+ .bubble.bubble-light.arrow-bottom-direction .arrow {
983
+ border-top-color: rgba(255, 255, 255, 0.95);
984
+ }
985
+ .bubble.bubble-light.arrow-top-direction .arrow-border {
986
+ border-bottom-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
987
+ }
988
+ .bubble.bubble-light.arrow-top-direction .arrow {
989
+ border-bottom-color: rgba(255, 255, 255, 0.95);
990
+ }
991
+ .bubble.bubble-light.arrow-left-direction .arrow-border {
992
+ border-right-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
993
+ }
994
+ .bubble.bubble-light.arrow-left-direction .arrow {
995
+ border-right-color: rgba(255, 255, 255, 0.95);
996
+ }
997
+ .bubble.bubble-light.arrow-right-direction .arrow-border {
998
+ border-left-color: var(--gd-palette-complementary-3-from-theme, #c9d5e0);
999
+ }
1000
+ .bubble.bubble-light.arrow-right-direction .arrow {
1001
+ border-left-color: rgba(255, 255, 255, 0.95);
1002
+ }
1003
+ .bubble.bubble-warning {
1004
+ padding: 0;
1005
+ border-radius: 3px;
1006
+ border-style: solid;
1007
+ border-width: 0;
1008
+ border-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1009
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
1010
+ }
1011
+ .bubble.bubble-warning .arrow-border {
1012
+ display: none;
1013
+ }
1014
+ .bubble.bubble-warning {
1015
+ color: var(--gd-palette-complementary-0, #fff);
1016
+ background: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1017
+ }
1018
+ .bubble.bubble-warning .arrow-border,
1019
+ .bubble.bubble-warning .arrow {
1020
+ border-color: transparent;
1021
+ }
1022
+ .bubble.bubble-warning.arrow-bottom-direction .arrow-border {
1023
+ border-top-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1024
+ }
1025
+ .bubble.bubble-warning.arrow-bottom-direction .arrow {
1026
+ border-top-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1027
+ }
1028
+ .bubble.bubble-warning.arrow-top-direction .arrow-border {
1029
+ border-bottom-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1030
+ }
1031
+ .bubble.bubble-warning.arrow-top-direction .arrow {
1032
+ border-bottom-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1033
+ }
1034
+ .bubble.bubble-warning.arrow-left-direction .arrow-border {
1035
+ border-right-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1036
+ }
1037
+ .bubble.bubble-warning.arrow-left-direction .arrow {
1038
+ border-right-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1039
+ }
1040
+ .bubble.bubble-warning.arrow-right-direction .arrow-border {
1041
+ border-left-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1042
+ }
1043
+ .bubble.bubble-warning.arrow-right-direction .arrow {
1044
+ border-left-color: var(--gd-palette-primary-base-t10-from-theme, rgba(241, 134, 0, 0.9));
1045
+ }
1046
+ .bubble.bubble-negative {
1047
+ padding: 0;
1048
+ border-radius: 3px;
1049
+ border-style: solid;
1050
+ border-width: 0;
1051
+ border-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1052
+ box-shadow: 0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)), 0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
1053
+ }
1054
+ .bubble.bubble-negative .arrow-border {
1055
+ display: none;
1056
+ }
1057
+ .bubble.bubble-negative {
1058
+ color: var(--gd-palette-complementary-0, #fff);
1059
+ background: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1060
+ }
1061
+ .bubble.bubble-negative .arrow-border,
1062
+ .bubble.bubble-negative .arrow {
1063
+ border-color: transparent;
1064
+ }
1065
+ .bubble.bubble-negative.arrow-bottom-direction .arrow-border {
1066
+ border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1067
+ }
1068
+ .bubble.bubble-negative.arrow-bottom-direction .arrow {
1069
+ border-top-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1070
+ }
1071
+ .bubble.bubble-negative.arrow-top-direction .arrow-border {
1072
+ border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1073
+ }
1074
+ .bubble.bubble-negative.arrow-top-direction .arrow {
1075
+ border-bottom-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1076
+ }
1077
+ .bubble.bubble-negative.arrow-left-direction .arrow-border {
1078
+ border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1079
+ }
1080
+ .bubble.bubble-negative.arrow-left-direction .arrow {
1081
+ border-right-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1082
+ }
1083
+ .bubble.bubble-negative.arrow-right-direction .arrow-border {
1084
+ border-left-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1085
+ }
1086
+ .bubble.bubble-negative.arrow-right-direction .arrow {
1087
+ border-left-color: var(--gd-palette-error-base-t10, rgba(229, 77, 66, 0.9));
1088
+ }
1089
+ .bubble .arrow-position,
1090
+ .bubble .arrow-border,
1091
+ .bubble .arrow {
1092
+ position: absolute;
1093
+ z-index: 2;
1094
+ width: 0;
1095
+ height: 0;
1096
+ border-style: solid;
1097
+ border-width: 7px;
1098
+ }
1099
+ .bubble .arrow-position {
1100
+ border-width: 0;
1101
+ }
1102
+ .bubble .arrow {
1103
+ z-index: 4;
1104
+ border-width: 6px;
1105
+ }
1106
+ .bubble.arrow-top-direction .arrow-position, .bubble.arrow-bottom-direction .arrow-position {
1107
+ margin: 0 12px;
1108
+ }
1109
+ .bubble.arrow-top-direction .arrow, .bubble.arrow-bottom-direction .arrow {
1110
+ left: -6px;
1111
+ }
1112
+ .bubble.arrow-top-direction .arrow-border, .bubble.arrow-bottom-direction .arrow-border {
1113
+ top: 1px;
1114
+ left: -7px;
1115
+ }
1116
+ .bubble.arrow-top-direction .helper, .bubble.arrow-bottom-direction .helper {
1117
+ right: 0;
1118
+ left: 0;
1119
+ height: 8px;
1120
+ }
1121
+ .bubble.arrow-top-direction.arrow-tl .arrow-position, .bubble.arrow-top-direction.arrow-bl .arrow-position, .bubble.arrow-bottom-direction.arrow-tl .arrow-position, .bubble.arrow-bottom-direction.arrow-bl .arrow-position {
1122
+ left: 0;
1123
+ }
1124
+ .bubble.arrow-top-direction.arrow-tr .arrow-position, .bubble.arrow-top-direction.arrow-br .arrow-position, .bubble.arrow-bottom-direction.arrow-tr .arrow-position, .bubble.arrow-bottom-direction.arrow-br .arrow-position {
1125
+ right: 0;
1126
+ }
1127
+ .bubble.arrow-top-direction.arrow-tc .arrow-position, .bubble.arrow-top-direction.arrow-bc .arrow-position, .bubble.arrow-bottom-direction.arrow-tc .arrow-position, .bubble.arrow-bottom-direction.arrow-bc .arrow-position {
1128
+ right: 0;
1129
+ left: 0;
1130
+ margin: 0 auto;
1131
+ }
1132
+ .bubble.arrow-top-direction .arrow-position {
1133
+ top: -15px;
1134
+ }
1135
+ .bubble.arrow-top-direction .arrow {
1136
+ top: 3px;
1137
+ }
1138
+ .bubble.arrow-top-direction .helper {
1139
+ top: -8px;
1140
+ }
1141
+ .bubble.arrow-bottom-direction .arrow-position {
1142
+ bottom: 0;
1143
+ }
1144
+ .bubble.arrow-bottom-direction .arrow-border {
1145
+ top: 0;
1146
+ }
1147
+ .bubble.arrow-bottom-direction .helper {
1148
+ bottom: -8px;
1149
+ }
1150
+ .bubble.arrow-left-direction .arrow-position, .bubble.arrow-right-direction .arrow-position {
1151
+ margin: 10px 0;
1152
+ }
1153
+ .bubble.arrow-left-direction .arrow, .bubble.arrow-right-direction .arrow {
1154
+ top: -5px;
1155
+ }
1156
+ .bubble.arrow-left-direction .arrow-border, .bubble.arrow-right-direction .arrow-border {
1157
+ top: -6px;
1158
+ left: 2px;
1159
+ }
1160
+ .bubble.arrow-left-direction .helper, .bubble.arrow-right-direction .helper {
1161
+ top: 0;
1162
+ bottom: 0;
1163
+ width: 8px;
1164
+ }
1165
+ .bubble.arrow-left-direction.arrow-tl .arrow-position, .bubble.arrow-left-direction.arrow-tr .arrow-position, .bubble.arrow-right-direction.arrow-tl .arrow-position, .bubble.arrow-right-direction.arrow-tr .arrow-position {
1166
+ top: 0;
1167
+ }
1168
+ .bubble.arrow-left-direction.arrow-bl .arrow-position, .bubble.arrow-left-direction.arrow-br .arrow-position, .bubble.arrow-right-direction.arrow-bl .arrow-position, .bubble.arrow-right-direction.arrow-br .arrow-position {
1169
+ bottom: 3px;
1170
+ }
1171
+ .bubble.arrow-left-direction.arrow-cl .arrow-position, .bubble.arrow-left-direction.arrow-cr .arrow-position, .bubble.arrow-right-direction.arrow-cl .arrow-position, .bubble.arrow-right-direction.arrow-cr .arrow-position {
1172
+ top: 0;
1173
+ bottom: 0;
1174
+ margin: auto 0;
1175
+ }
1176
+ .bubble.arrow-left-direction .arrow-position {
1177
+ left: -16px;
1178
+ }
1179
+ .bubble.arrow-left-direction .arrow {
1180
+ left: 4px;
1181
+ }
1182
+ .bubble.arrow-left-direction .helper {
1183
+ left: -8px;
1184
+ }
1185
+ .bubble.arrow-right-direction .arrow-position {
1186
+ right: 0;
1187
+ }
1188
+ .bubble.arrow-right-direction .arrow-border {
1189
+ left: 0;
1190
+ }
1191
+ .bubble.arrow-right-direction .helper {
1192
+ right: -8px;
1193
+ }
1194
+ .bubble.arrow-none .arrow-position {
1195
+ display: none;
1196
+ }
1197
+
1198
+ .gecko .bubble-chart,
1199
+ .chrome .bubble-chart,
1200
+ .safari .bubble-chart {
1201
+ opacity: 0;
1202
+ }
1203
+
1204
+ .gecko .bubble-anim,
1205
+ .chrome .bubble-anim,
1206
+ .safari .bubble-anim {
1207
+ opacity: 1;
1208
+ -moz-transition-property: opacity, transform;
1209
+ -webkit-transition-property: opacity, transform;
1210
+ transition-property: opacity, transform;
1211
+ -moz-transition-duration: 0.2s;
1212
+ -webkit-transition-duration: 0.2s;
1213
+ transition-duration: 0.2s;
1214
+ -moz-transition-timing-function: ease-in-out;
1215
+ -webkit-transition-timing-function: ease-in-out;
1216
+ transition-timing-function: ease-in-out;
1217
+ }
1218
+
1219
+ .gecko .bubble-anim.yui3-overlay-hidden,
1220
+ .chrome .bubble-anim.yui3-overlay-hidden,
1221
+ .safari .bubble-anim.yui3-overlay-hidden {
1222
+ visibility: visible !important;
1223
+ -moz-transition-duration: 0s;
1224
+ opacity: 0;
1225
+ }
1226
+
1227
+ .bubble-none {
1228
+ display: none;
1229
+ }
1230
+
736
1231
  .gd-dropdown.overlay {
737
1232
  padding: 0;
738
1233
  }
@@ -1273,6 +1768,7 @@
1273
1768
  line-height: 14px;
1274
1769
  background-color: var(--gd-palette-complementary-0);
1275
1770
  box-shadow: 0 2px 10px 0 var(--gd-shadow-color);
1771
+ border-radius: var(--gd-modal-borderRadius, 3px);
1276
1772
  display: flex;
1277
1773
  flex-direction: column;
1278
1774
  padding-top: 10px;
@@ -1320,6 +1816,7 @@
1320
1816
  background: rgba(255, 255, 255, 0.3);
1321
1817
  }
1322
1818
  .gd-ui-ext-notifications-panel-button__icon {
1819
+ --gd-icon-fill-color: #fff;
1323
1820
  opacity: 0.8;
1324
1821
  display: flex;
1325
1822
  align-items: center;
@@ -1405,6 +1902,9 @@
1405
1902
  .gd-ui-ext-notification:hover:not(.gd-ui-ext-notification--isRead) .gd-ui-ext-notification__time {
1406
1903
  display: none;
1407
1904
  }
1905
+ .gd-ui-ext-notification:hover .gd-ui-ext-notification__unread-status {
1906
+ border: 1.4px solid var(--gd-palette-complementary-2);
1907
+ }
1408
1908
  .gd-ui-ext-notification__unsupported {
1409
1909
  display: flex;
1410
1910
  align-items: center;
@@ -1439,11 +1939,11 @@
1439
1939
  .gd-ui-ext-notification__details {
1440
1940
  display: flex;
1441
1941
  flex-direction: column;
1442
- justify-content: space-between;
1942
+ justify-content: center;
1443
1943
  flex-shrink: 1;
1444
1944
  width: 100%;
1445
1945
  height: 100%;
1446
- overflow: hidden;
1946
+ min-width: 0;
1447
1947
  }
1448
1948
  .gd-ui-ext-notification__title {
1449
1949
  font-weight: 600;
@@ -1479,6 +1979,27 @@
1479
1979
  display: flex;
1480
1980
  flex-direction: row;
1481
1981
  align-items: center;
1982
+ height: 16px;
1983
+ }
1984
+ .gd-ui-ext-notification__error {
1985
+ display: flex;
1986
+ flex-direction: row;
1987
+ align-items: center;
1988
+ gap: 5px;
1989
+ height: 16px;
1990
+ font-size: 12px;
1991
+ font-weight: 400;
1992
+ color: var(--gd-palette-error-base);
1993
+ white-space: nowrap;
1994
+ position: relative;
1995
+ }
1996
+ .gd-ui-ext-notification__error-icon {
1997
+ width: 12px;
1998
+ height: 12px;
1999
+ }
2000
+ .gd-ui-ext-notification__error-popup {
2001
+ font-size: 12px;
2002
+ line-height: 18px;
1482
2003
  }
1483
2004
 
1484
2005
  .gd-ui-ext-notification-filters-detail-dialog {