@useblu/ocean-core 1.30.2 → 1.30.3

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 (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/ocean.css +62 -69
  3. package/ocean.css.map +1 -1
  4. package/ocean.min.css +1 -1
  5. package/ocean.min.css.map +1 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.30.3](https://github.com/ocean-ds/ocean-web/compare/v1.30.2...v1.30.3) (2022-03-16)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **tooltip:** add usage in storybook ([#947](https://github.com/ocean-ds/ocean-web/issues/947)) ([fa587d9](https://github.com/ocean-ds/ocean-web/commit/fa587d95816d27879b73a31d5137bfc87a921d72))
11
+
6
12
  ## [1.30.2](https://github.com/ocean-ds/ocean-web/compare/v1.30.1...v1.30.2) (2022-03-16)
7
13
 
8
14
  ### Bug Fixes
package/ocean.css CHANGED
@@ -2632,13 +2632,6 @@
2632
2632
  color: white;
2633
2633
  }
2634
2634
 
2635
- :root {
2636
- --balloon-color: #393b47;
2637
- --balloon-text-color: white;
2638
- --balloon-font-size: 12px;
2639
- --balloon-move: 4px;
2640
- }
2641
-
2642
2635
  .ods-tooltip {
2643
2636
  cursor: pointer;
2644
2637
  position: relative;
@@ -2649,15 +2642,15 @@
2649
2642
  pointer-events: none;
2650
2643
  transition: opacity 0.18s ease-out 0.18s, transform 0.18s ease-out 0.18s;
2651
2644
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
2652
- font-size: var(--balloon-font-size);
2645
+ font-size: 12px;
2653
2646
  font-style: normal;
2654
2647
  font-weight: normal;
2655
2648
  text-indent: 0;
2656
2649
  text-shadow: none;
2657
- background: var(--balloon-color);
2650
+ background: #393b47;
2658
2651
  border-radius: 2px;
2659
2652
  border-radius: 8px;
2660
- color: var(--balloon-text-color);
2653
+ color: white;
2661
2654
  content: attr(aria-label);
2662
2655
  padding: 12px 16px;
2663
2656
  position: absolute;
@@ -2669,7 +2662,7 @@
2669
2662
  border: 5px solid transparent;
2670
2663
  height: 0;
2671
2664
  width: 0;
2672
- border-top-color: var(--balloon-color);
2665
+ border-top-color: #393b47;
2673
2666
  opacity: 0;
2674
2667
  pointer-events: none;
2675
2668
  transition: opacity 0.18s ease-out 0.18s, transform 0.18s ease-out 0.18s;
@@ -2679,10 +2672,10 @@
2679
2672
  }
2680
2673
 
2681
2674
  .ods-tooltip:hover::before, .ods-tooltip:hover::after,
2682
- .ods-tooltip[data-balloon-visible]::before,
2683
- .ods-tooltip[data-balloon-visible]::after,
2684
- .ods-tooltip:not([data-balloon-nofocus]):focus::before,
2685
- .ods-tooltip:not([data-balloon-nofocus]):focus::after {
2675
+ .ods-tooltip[data-tooltip-visible]::before,
2676
+ .ods-tooltip[data-tooltip-visible]::after,
2677
+ .ods-tooltip:not([data-tooltip-nofocus]):focus::before,
2678
+ .ods-tooltip:not([data-tooltip-nofocus]):focus::after {
2686
2679
  opacity: 1;
2687
2680
  pointer-events: none;
2688
2681
  }
@@ -2691,154 +2684,154 @@
2691
2684
  font-family: FontAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
2692
2685
  }
2693
2686
 
2694
- .ods-tooltip[data-balloon-break]::after {
2687
+ .ods-tooltip[data-tooltip-break]::after {
2695
2688
  white-space: pre;
2696
2689
  }
2697
- .ods-tooltip[data-balloon-break][data-balloon-length]::after {
2690
+ .ods-tooltip[data-tooltip-break][data-tooltip-length]::after {
2698
2691
  white-space: pre-line;
2699
2692
  word-break: break-word;
2700
2693
  }
2701
2694
 
2702
- .ods-tooltip[data-balloon-blunt]::before, .ods-tooltip[data-balloon-blunt]::after {
2695
+ .ods-tooltip[data-tooltip-blunt]::before, .ods-tooltip[data-tooltip-blunt]::after {
2703
2696
  transition: none;
2704
2697
  }
2705
2698
 
2706
- .ods-tooltip[data-balloon-pos=up]:hover::after, .ods-tooltip[data-balloon-pos=up][data-balloon-visible]::after,
2707
- .ods-tooltip[data-balloon-pos=down]:hover::after,
2708
- .ods-tooltip[data-balloon-pos=down][data-balloon-visible]::after {
2699
+ .ods-tooltip[data-tooltip-pos=up]:hover::after, .ods-tooltip[data-tooltip-pos=up][data-tooltip-visible]::after,
2700
+ .ods-tooltip[data-tooltip-pos=down]:hover::after,
2701
+ .ods-tooltip[data-tooltip-pos=down][data-tooltip-visible]::after {
2709
2702
  transform: translate(-50%, 0);
2710
2703
  }
2711
- .ods-tooltip[data-balloon-pos=up]:hover::before, .ods-tooltip[data-balloon-pos=up][data-balloon-visible]::before,
2712
- .ods-tooltip[data-balloon-pos=down]:hover::before,
2713
- .ods-tooltip[data-balloon-pos=down][data-balloon-visible]::before {
2704
+ .ods-tooltip[data-tooltip-pos=up]:hover::before, .ods-tooltip[data-tooltip-pos=up][data-tooltip-visible]::before,
2705
+ .ods-tooltip[data-tooltip-pos=down]:hover::before,
2706
+ .ods-tooltip[data-tooltip-pos=down][data-tooltip-visible]::before {
2714
2707
  transform: translate(-50%, 0);
2715
2708
  }
2716
2709
 
2717
- .ods-tooltip[data-balloon-pos*=-left]::after {
2710
+ .ods-tooltip[data-tooltip-pos*=-left]::after {
2718
2711
  left: 0;
2719
2712
  }
2720
- .ods-tooltip[data-balloon-pos*=-left]::before {
2713
+ .ods-tooltip[data-tooltip-pos*=-left]::before {
2721
2714
  left: 5px;
2722
2715
  }
2723
2716
 
2724
- .ods-tooltip[data-balloon-pos*=-right]::after {
2717
+ .ods-tooltip[data-tooltip-pos*=-right]::after {
2725
2718
  right: 0;
2726
2719
  }
2727
- .ods-tooltip[data-balloon-pos*=-right]::before {
2720
+ .ods-tooltip[data-tooltip-pos*=-right]::before {
2728
2721
  right: 5px;
2729
2722
  }
2730
2723
 
2731
- .ods-tooltip[data-balloon-pos*=-left]:hover::after, .ods-tooltip[data-balloon-pos*=-left][data-balloon-visible]::after,
2732
- .ods-tooltip[data-balloon-pos*=-right]:hover::after,
2733
- .ods-tooltip[data-balloon-pos*=-right][data-balloon-visible]::after {
2724
+ .ods-tooltip[data-tooltip-pos*=-left]:hover::after, .ods-tooltip[data-tooltip-pos*=-left][data-tooltip-visible]::after,
2725
+ .ods-tooltip[data-tooltip-pos*=-right]:hover::after,
2726
+ .ods-tooltip[data-tooltip-pos*=-right][data-tooltip-visible]::after {
2734
2727
  transform: translate(0, 0);
2735
2728
  }
2736
- .ods-tooltip[data-balloon-pos*=-left]:hover::before, .ods-tooltip[data-balloon-pos*=-left][data-balloon-visible]::before,
2737
- .ods-tooltip[data-balloon-pos*=-right]:hover::before,
2738
- .ods-tooltip[data-balloon-pos*=-right][data-balloon-visible]::before {
2729
+ .ods-tooltip[data-tooltip-pos*=-left]:hover::before, .ods-tooltip[data-tooltip-pos*=-left][data-tooltip-visible]::before,
2730
+ .ods-tooltip[data-tooltip-pos*=-right]:hover::before,
2731
+ .ods-tooltip[data-tooltip-pos*=-right][data-tooltip-visible]::before {
2739
2732
  transform: translate(0, 0);
2740
2733
  }
2741
2734
 
2742
- .ods-tooltip[data-balloon-pos^=up]::before, .ods-tooltip[data-balloon-pos^=up]::after {
2735
+ .ods-tooltip[data-tooltip-pos^=up]::before, .ods-tooltip[data-tooltip-pos^=up]::after {
2743
2736
  bottom: 100%;
2744
- transform: translate(0, var(--balloon-move));
2737
+ transform: translate(0, 4px);
2745
2738
  transform-origin: top;
2746
2739
  }
2747
- .ods-tooltip[data-balloon-pos^=up]::after {
2740
+ .ods-tooltip[data-tooltip-pos^=up]::after {
2748
2741
  margin-bottom: 10px;
2749
2742
  }
2750
2743
 
2751
- .ods-tooltip[data-balloon-pos=up]::before, .ods-tooltip[data-balloon-pos=up]::after {
2744
+ .ods-tooltip[data-tooltip-pos=up]::before, .ods-tooltip[data-tooltip-pos=up]::after {
2752
2745
  left: 50%;
2753
- transform: translate(-50%, var(--balloon-move));
2746
+ transform: translate(-50%, 4px);
2754
2747
  }
2755
2748
 
2756
- .ods-tooltip[data-balloon-pos^=down]::before, .ods-tooltip[data-balloon-pos^=down]::after {
2749
+ .ods-tooltip[data-tooltip-pos^=down]::before, .ods-tooltip[data-tooltip-pos^=down]::after {
2757
2750
  top: 100%;
2758
- transform: translate(0, calc(var(--balloon-move) * -1));
2751
+ transform: translate(0, -4px);
2759
2752
  }
2760
- .ods-tooltip[data-balloon-pos^=down]::after {
2753
+ .ods-tooltip[data-tooltip-pos^=down]::after {
2761
2754
  margin-top: 10px;
2762
2755
  }
2763
- .ods-tooltip[data-balloon-pos^=down]::before {
2756
+ .ods-tooltip[data-tooltip-pos^=down]::before {
2764
2757
  border: 5px solid transparent;
2765
2758
  height: 0;
2766
2759
  width: 0;
2767
- border-bottom-color: var(--balloon-color);
2760
+ border-bottom-color: #393b47;
2768
2761
  }
2769
2762
 
2770
- .ods-tooltip[data-balloon-pos=down]::after, .ods-tooltip[data-balloon-pos=down]::before {
2763
+ .ods-tooltip[data-tooltip-pos=down]::after, .ods-tooltip[data-tooltip-pos=down]::before {
2771
2764
  left: 50%;
2772
- transform: translate(-50%, calc(var(--balloon-move) * -1));
2765
+ transform: translate(-50%, -4px);
2773
2766
  }
2774
2767
 
2775
- .ods-tooltip[data-balloon-pos=left]:hover::after, .ods-tooltip[data-balloon-pos=left][data-balloon-visible]::after,
2776
- .ods-tooltip[data-balloon-pos=right]:hover::after,
2777
- .ods-tooltip[data-balloon-pos=right][data-balloon-visible]::after {
2768
+ .ods-tooltip[data-tooltip-pos=left]:hover::after, .ods-tooltip[data-tooltip-pos=left][data-tooltip-visible]::after,
2769
+ .ods-tooltip[data-tooltip-pos=right]:hover::after,
2770
+ .ods-tooltip[data-tooltip-pos=right][data-tooltip-visible]::after {
2778
2771
  transform: translate(0, -50%);
2779
2772
  }
2780
- .ods-tooltip[data-balloon-pos=left]:hover::before, .ods-tooltip[data-balloon-pos=left][data-balloon-visible]::before,
2781
- .ods-tooltip[data-balloon-pos=right]:hover::before,
2782
- .ods-tooltip[data-balloon-pos=right][data-balloon-visible]::before {
2773
+ .ods-tooltip[data-tooltip-pos=left]:hover::before, .ods-tooltip[data-tooltip-pos=left][data-tooltip-visible]::before,
2774
+ .ods-tooltip[data-tooltip-pos=right]:hover::before,
2775
+ .ods-tooltip[data-tooltip-pos=right][data-tooltip-visible]::before {
2783
2776
  transform: translate(0, -50%);
2784
2777
  }
2785
2778
 
2786
- .ods-tooltip[data-balloon-pos=left]::after, .ods-tooltip[data-balloon-pos=left]::before {
2779
+ .ods-tooltip[data-tooltip-pos=left]::after, .ods-tooltip[data-tooltip-pos=left]::before {
2787
2780
  right: 100%;
2788
2781
  top: 50%;
2789
- transform: translate(var(--balloon-move), -50%);
2782
+ transform: translate(4px, -50%);
2790
2783
  }
2791
- .ods-tooltip[data-balloon-pos=left]::after {
2784
+ .ods-tooltip[data-tooltip-pos=left]::after {
2792
2785
  margin-right: 10px;
2793
2786
  }
2794
- .ods-tooltip[data-balloon-pos=left]::before {
2787
+ .ods-tooltip[data-tooltip-pos=left]::before {
2795
2788
  border: 5px solid transparent;
2796
2789
  height: 0;
2797
2790
  width: 0;
2798
- border-left-color: var(--balloon-color);
2791
+ border-left-color: #393b47;
2799
2792
  }
2800
2793
 
2801
- .ods-tooltip[data-balloon-pos=right]::after, .ods-tooltip[data-balloon-pos=right]::before {
2794
+ .ods-tooltip[data-tooltip-pos=right]::after, .ods-tooltip[data-tooltip-pos=right]::before {
2802
2795
  left: 100%;
2803
2796
  top: 50%;
2804
- transform: translate(calc(var(--balloon-move) * -1), -50%);
2797
+ transform: translate(-4px, -50%);
2805
2798
  }
2806
- .ods-tooltip[data-balloon-pos=right]::after {
2799
+ .ods-tooltip[data-tooltip-pos=right]::after {
2807
2800
  margin-left: 10px;
2808
2801
  }
2809
- .ods-tooltip[data-balloon-pos=right]::before {
2802
+ .ods-tooltip[data-tooltip-pos=right]::before {
2810
2803
  border: 5px solid transparent;
2811
2804
  height: 0;
2812
2805
  width: 0;
2813
- border-right-color: var(--balloon-color);
2806
+ border-right-color: #393b47;
2814
2807
  }
2815
2808
 
2816
- .ods-tooltip[data-balloon-length]::after {
2809
+ .ods-tooltip[data-tooltip-length]::after {
2817
2810
  white-space: normal;
2818
2811
  }
2819
2812
 
2820
- .ods-tooltip[data-balloon-length=small]::after {
2813
+ .ods-tooltip[data-tooltip-length=small]::after {
2821
2814
  width: 80px;
2822
2815
  }
2823
2816
 
2824
- .ods-tooltip[data-balloon-length=medium]::after {
2817
+ .ods-tooltip[data-tooltip-length=medium]::after {
2825
2818
  width: 150px;
2826
2819
  }
2827
2820
 
2828
- .ods-tooltip[data-balloon-length=large]::after {
2821
+ .ods-tooltip[data-tooltip-length=large]::after {
2829
2822
  width: 260px;
2830
2823
  }
2831
2824
 
2832
- .ods-tooltip[data-balloon-length=xlarge]::after {
2825
+ .ods-tooltip[data-tooltip-length=xlarge]::after {
2833
2826
  width: 380px;
2834
2827
  }
2835
2828
  @media screen and (max-width: 768px) {
2836
- .ods-tooltip[data-balloon-length=xlarge]::after {
2829
+ .ods-tooltip[data-tooltip-length=xlarge]::after {
2837
2830
  width: 90vw;
2838
2831
  }
2839
2832
  }
2840
2833
 
2841
- .ods-tooltip[data-balloon-length=fit]::after {
2834
+ .ods-tooltip[data-tooltip-length=fit]::after {
2842
2835
  width: 100%;
2843
2836
  }
2844
2837