@itwin/itwinui-css 0.45.0 → 0.46.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 (12) hide show
  1. package/css/all.css +211 -225
  2. package/css/button.css +0 -1
  3. package/css/inputs.css +211 -223
  4. package/css/table.css +0 -1
  5. package/package.json +1 -1
  6. package/scss/button/button.scss +0 -1
  7. package/scss/inputs/classes.scss +15 -9
  8. package/scss/inputs/index.scss +1 -0
  9. package/scss/inputs/input-with-icon.scss +36 -0
  10. package/scss/inputs/input.scss +1 -0
  11. package/scss/inputs/labeled-inputs.scss +45 -12
  12. package/scss/inputs/select.scss +44 -93
package/css/all.css CHANGED
@@ -656,7 +656,6 @@ html.iui-theme-dark{
656
656
  box-sizing:border-box;
657
657
  border-radius:3px;
658
658
  line-height:22px;
659
- outline:none;
660
659
  box-shadow:none;
661
660
  font-size:14px;
662
661
  font-weight:400;
@@ -2566,9 +2565,9 @@ html.iui-theme-dark{
2566
2565
  .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
2567
2566
  margin-top:3px; }
2568
2567
  .iui-input-container .iui-input,
2568
+ .iui-input-container .iui-input-with-icon,
2569
2569
  .iui-input-container .iui-textarea,
2570
- .iui-input-container .iui-input-group,
2571
- .iui-input-container .iui-select{
2570
+ .iui-input-container .iui-input-group{
2572
2571
  -ms-grid-row:2;
2573
2572
  -ms-grid-column:1;
2574
2573
  -ms-grid-column-span:2;
@@ -2592,9 +2591,9 @@ html.iui-theme-dark{
2592
2591
  div.iui-input-container.iui-inline-label{
2593
2592
  -ms-grid-columns:auto min-content auto; }
2594
2593
  .iui-input-container.iui-inline-label .iui-input,
2594
+ .iui-input-container.iui-inline-label .iui-input-with-icon,
2595
2595
  .iui-input-container.iui-inline-label .iui-textarea,
2596
- .iui-input-container.iui-inline-label .iui-input-group,
2597
- .iui-input-container.iui-inline-label .iui-select{
2596
+ .iui-input-container.iui-inline-label .iui-input-group{
2598
2597
  -ms-grid-row:1;
2599
2598
  -ms-grid-column:2; }
2600
2599
  .iui-input-container.iui-inline-label .iui-input-icon{
@@ -2638,7 +2637,7 @@ html.iui-theme-dark{
2638
2637
  margin-left:4px;
2639
2638
  color:#D30A0A;
2640
2639
  color:var(--iui-color-foreground-negative); }
2641
- .iui-input-container > .iui-input-icon{
2640
+ .iui-input-container .iui-input-icon{
2642
2641
  -ms-grid-row:3;
2643
2642
  -ms-grid-column:1;
2644
2643
  display:flex;
@@ -2649,7 +2648,7 @@ html.iui-theme-dark{
2649
2648
  align-self:center;
2650
2649
  fill:rgba(0, 0, 0, 0.4);
2651
2650
  fill:var(--iui-icons-color); }
2652
- .iui-input-container > .iui-input-icon:not(:last-child){
2651
+ .iui-input-container .iui-input-icon:not(:last-child){
2653
2652
  margin-right:4px; }
2654
2653
  .iui-input-container .iui-message{
2655
2654
  -ms-grid-row:3;
@@ -2664,19 +2663,17 @@ html.iui-theme-dark{
2664
2663
  -moz-user-select:none;
2665
2664
  -ms-user-select:none;
2666
2665
  user-select:none; }
2667
- .iui-input-container.iui-inline-label > .iui-label{
2668
- margin:0 16px 0 0;
2669
- -ms-grid-column-span:1; }
2670
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
2671
- margin-right:6px; }
2672
2666
  .iui-input-container.iui-inline-icon > .iui-input-icon{
2673
2667
  -ms-grid-row:1;
2674
2668
  -ms-grid-column:3;
2675
2669
  grid-area:inputs;
2676
2670
  -ms-grid-column-align:end;
2677
2671
  justify-self:end;
2678
- margin:0 12px 0 0;
2672
+ margin:0 14px 0 0;
2679
2673
  position:relative; }
2674
+ .iui-input-container.iui-inline-icon > .iui-input-icon svg{
2675
+ width:16px;
2676
+ height:16px; }
2680
2677
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
2681
2678
  height:100%;
2682
2679
  width:-webkit-fit-content;
@@ -2688,7 +2685,7 @@ html.iui-theme-dark{
2688
2685
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
2689
2686
  align-items:center;
2690
2687
  height:90%;
2691
- margin-right:1px;
2688
+ margin-right:2px;
2692
2689
  padding:0 12px;
2693
2690
  cursor:pointer;
2694
2691
  background-position:center;
@@ -2700,13 +2697,21 @@ html.iui-theme-dark{
2700
2697
  background-size:100%;
2701
2698
  transition:background 0s; }
2702
2699
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
2703
- width:16px;
2704
- height:16px;
2705
2700
  fill:rgba(0, 0, 0, 0.4);
2706
2701
  fill:var(--iui-icons-color);
2707
2702
  transition:transform 0.2s ease-out; }
2708
2703
  .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
2709
2704
  transform:rotate(180deg); }
2705
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
2706
+ cursor:not-allowed; }
2707
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
2708
+ fill:rgba(0, 0, 0, 0.2);
2709
+ fill:var(--iui-icons-color-actionable-disabled); }
2710
+ .iui-input-container.iui-inline-label > .iui-label{
2711
+ margin:0 16px 0 0;
2712
+ -ms-grid-column-span:1; }
2713
+ .iui-input-container.iui-inline-label > .iui-label.iui-required{
2714
+ margin-right:6px; }
2710
2715
  .iui-input-container.iui-positive *::-moz-selection{
2711
2716
  background-color:rgba(83, 162, 26, 0.4);
2712
2717
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -2727,29 +2732,39 @@ html.iui-theme-dark{
2727
2732
  text-decoration:none;
2728
2733
  color:#3c7613;
2729
2734
  color:var(--iui-color-foreground-positive-overlay); }
2730
- .iui-input-container.iui-positive > .iui-input,
2731
- .iui-input-container.iui-positive > .iui-textarea,
2732
- .iui-input-container.iui-positive > .iui-select > .iui-select-button{
2735
+ .iui-input-container.iui-positive .iui-input,
2736
+ .iui-input-container.iui-positive .iui-textarea{
2733
2737
  padding-bottom:6px;
2734
2738
  border-bottom:2px solid #53A21A;
2735
2739
  border-bottom:2px solid var(--iui-color-foreground-positive); }
2736
- .iui-input-container.iui-positive > .iui-input.iui-small,
2737
- .iui-input-container.iui-positive > .iui-textarea.iui-small,
2738
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
2740
+ .iui-input-container.iui-positive .iui-input.iui-small,
2741
+ .iui-input-container.iui-positive .iui-textarea.iui-small{
2739
2742
  padding-bottom:0.5px; }
2740
- .iui-input-container.iui-positive > .iui-input.iui-large,
2741
- .iui-input-container.iui-positive > .iui-textarea.iui-large,
2742
- .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
2743
+ .iui-input-container.iui-positive .iui-input.iui-large,
2744
+ .iui-input-container.iui-positive .iui-textarea.iui-large{
2743
2745
  padding-bottom:11.5px; }
2744
- .iui-input-container.iui-positive > .iui-input:focus,
2745
- .iui-input-container.iui-positive > .iui-textarea:focus,
2746
- .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
2746
+ .iui-input-container.iui-positive .iui-input:focus,
2747
+ .iui-input-container.iui-positive .iui-textarea:focus{
2747
2748
  border-bottom:2px solid #53A21A;
2748
2749
  outline:2px solid #53A21A;
2749
2750
  outline-offset:-2px;
2750
2751
  border-bottom:2px solid var(--iui-color-foreground-positive);
2751
2752
  outline:2px solid var(--iui-color-foreground-positive);
2752
2753
  outline-offset:-2px; }
2754
+ .iui-input-container.iui-positive .iui-input-with-icon{
2755
+ --_hover-color:var(--iui-color-foreground-positive);
2756
+ --_focus-color:var(--iui-color-foreground-positive); }
2757
+ .iui-input-container.iui-positive .iui-select-button{
2758
+ border-bottom:transparent; }
2759
+ .iui-input-container.iui-positive .iui-select-button::after{
2760
+ content:'';
2761
+ width:100%;
2762
+ position:absolute;
2763
+ bottom:0;
2764
+ left:0;
2765
+ height:2px;
2766
+ background-color:#53A21A;
2767
+ background-color:var(--iui-color-foreground-positive); }
2753
2768
  .iui-input-container.iui-negative *::-moz-selection{
2754
2769
  background-color:rgba(211, 10, 10, 0.4);
2755
2770
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
@@ -2770,29 +2785,39 @@ html.iui-theme-dark{
2770
2785
  text-decoration:none;
2771
2786
  color:#a20808;
2772
2787
  color:var(--iui-color-foreground-negative-overlay); }
2773
- .iui-input-container.iui-negative > .iui-input,
2774
- .iui-input-container.iui-negative > .iui-textarea,
2775
- .iui-input-container.iui-negative > .iui-select > .iui-select-button{
2788
+ .iui-input-container.iui-negative .iui-input,
2789
+ .iui-input-container.iui-negative .iui-textarea{
2776
2790
  padding-bottom:6px;
2777
2791
  border-bottom:2px solid #D30A0A;
2778
2792
  border-bottom:2px solid var(--iui-color-foreground-negative); }
2779
- .iui-input-container.iui-negative > .iui-input.iui-small,
2780
- .iui-input-container.iui-negative > .iui-textarea.iui-small,
2781
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
2793
+ .iui-input-container.iui-negative .iui-input.iui-small,
2794
+ .iui-input-container.iui-negative .iui-textarea.iui-small{
2782
2795
  padding-bottom:0.5px; }
2783
- .iui-input-container.iui-negative > .iui-input.iui-large,
2784
- .iui-input-container.iui-negative > .iui-textarea.iui-large,
2785
- .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
2796
+ .iui-input-container.iui-negative .iui-input.iui-large,
2797
+ .iui-input-container.iui-negative .iui-textarea.iui-large{
2786
2798
  padding-bottom:11.5px; }
2787
- .iui-input-container.iui-negative > .iui-input:focus,
2788
- .iui-input-container.iui-negative > .iui-textarea:focus,
2789
- .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
2799
+ .iui-input-container.iui-negative .iui-input:focus,
2800
+ .iui-input-container.iui-negative .iui-textarea:focus{
2790
2801
  border-bottom:2px solid #D30A0A;
2791
2802
  outline:2px solid #D30A0A;
2792
2803
  outline-offset:-2px;
2793
2804
  border-bottom:2px solid var(--iui-color-foreground-negative);
2794
2805
  outline:2px solid var(--iui-color-foreground-negative);
2795
2806
  outline-offset:-2px; }
2807
+ .iui-input-container.iui-negative .iui-input-with-icon{
2808
+ --_hover-color:var(--iui-color-foreground-negative);
2809
+ --_focus-color:var(--iui-color-foreground-negative); }
2810
+ .iui-input-container.iui-negative .iui-select-button{
2811
+ border-bottom:transparent; }
2812
+ .iui-input-container.iui-negative .iui-select-button::after{
2813
+ content:'';
2814
+ width:100%;
2815
+ position:absolute;
2816
+ bottom:0;
2817
+ left:0;
2818
+ height:2px;
2819
+ background-color:#D30A0A;
2820
+ background-color:var(--iui-color-foreground-negative); }
2796
2821
  .iui-input-container.iui-warning *::-moz-selection{
2797
2822
  background-color:rgba(241, 139, 18, 0.4);
2798
2823
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
@@ -2813,29 +2838,39 @@ html.iui-theme-dark{
2813
2838
  text-decoration:none;
2814
2839
  color:#c4700c;
2815
2840
  color:var(--iui-color-foreground-warning-overlay); }
2816
- .iui-input-container.iui-warning > .iui-input,
2817
- .iui-input-container.iui-warning > .iui-textarea,
2818
- .iui-input-container.iui-warning > .iui-select > .iui-select-button{
2841
+ .iui-input-container.iui-warning .iui-input,
2842
+ .iui-input-container.iui-warning .iui-textarea{
2819
2843
  padding-bottom:6px;
2820
2844
  border-bottom:2px solid #F18B12;
2821
2845
  border-bottom:2px solid var(--iui-color-foreground-warning); }
2822
- .iui-input-container.iui-warning > .iui-input.iui-small,
2823
- .iui-input-container.iui-warning > .iui-textarea.iui-small,
2824
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
2846
+ .iui-input-container.iui-warning .iui-input.iui-small,
2847
+ .iui-input-container.iui-warning .iui-textarea.iui-small{
2825
2848
  padding-bottom:0.5px; }
2826
- .iui-input-container.iui-warning > .iui-input.iui-large,
2827
- .iui-input-container.iui-warning > .iui-textarea.iui-large,
2828
- .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
2849
+ .iui-input-container.iui-warning .iui-input.iui-large,
2850
+ .iui-input-container.iui-warning .iui-textarea.iui-large{
2829
2851
  padding-bottom:11.5px; }
2830
- .iui-input-container.iui-warning > .iui-input:focus,
2831
- .iui-input-container.iui-warning > .iui-textarea:focus,
2832
- .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
2852
+ .iui-input-container.iui-warning .iui-input:focus,
2853
+ .iui-input-container.iui-warning .iui-textarea:focus{
2833
2854
  border-bottom:2px solid #F18B12;
2834
2855
  outline:2px solid #F18B12;
2835
2856
  outline-offset:-2px;
2836
2857
  border-bottom:2px solid var(--iui-color-foreground-warning);
2837
2858
  outline:2px solid var(--iui-color-foreground-warning);
2838
2859
  outline-offset:-2px; }
2860
+ .iui-input-container.iui-warning .iui-input-with-icon{
2861
+ --_hover-color:var(--iui-color-foreground-warning);
2862
+ --_focus-color:var(--iui-color-foreground-warning); }
2863
+ .iui-input-container.iui-warning .iui-select-button{
2864
+ border-bottom:transparent; }
2865
+ .iui-input-container.iui-warning .iui-select-button::after{
2866
+ content:'';
2867
+ width:100%;
2868
+ position:absolute;
2869
+ bottom:0;
2870
+ left:0;
2871
+ height:2px;
2872
+ background-color:#F18B12;
2873
+ background-color:var(--iui-color-foreground-warning); }
2839
2874
 
2840
2875
  .iui-input-label{
2841
2876
  font-weight:600;
@@ -2943,7 +2978,70 @@ html.iui-theme-dark{
2943
2978
  border-color:#EEF0F3;
2944
2979
  background-color:var(--iui-color-background-disabled);
2945
2980
  border-color:var(--iui-color-background-disabled);
2981
+ cursor:not-allowed;
2982
+ --_hover-color:var(--iui-color-background-disabled); }
2983
+
2984
+ .iui-select-button{
2985
+ width:100%;
2986
+ margin:0;
2987
+ border-radius:3px;
2988
+ box-sizing:border-box;
2989
+ padding:7px 12px;
2990
+ min-height:38px;
2991
+ transition:border-color 0.2s ease-out;
2992
+ display:flex;
2993
+ align-items:center;
2994
+ -webkit-user-select:none;
2995
+ -moz-user-select:none;
2996
+ -ms-user-select:none;
2997
+ user-select:none;
2998
+ position:relative;
2999
+ overflow:hidden;
3000
+ color:rgba(0, 0, 0, 0.8);
3001
+ background-color:#FFF;
3002
+ border:1px solid rgba(0, 0, 0, 0.4);
3003
+ color:var(--iui-text-color);
3004
+ background-color:var(--iui-color-background-1);
3005
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
3006
+ .iui-select-button:focus-visible{
3007
+ outline:2px solid var(--iui-color-foreground-primary);
3008
+ outline-offset:-2px; }
3009
+ @supports not selector(*:focus-visible){
3010
+ .iui-select-button:focus{
3011
+ outline:2px solid var(--iui-color-foreground-primary);
3012
+ outline-offset:-2px; } }
3013
+ .iui-select-button.iui-small{
3014
+ padding-top:1.5px;
3015
+ padding-bottom:1.5px;
3016
+ min-height:27px; }
3017
+ .iui-select-button.iui-large{
3018
+ padding-top:12.5px;
3019
+ padding-bottom:12.5px;
3020
+ min-height:49px;
3021
+ font-size:16px; }
3022
+ .iui-select-button.iui-disabled{
3023
+ background-color:#EEF0F3;
3024
+ border-color:#EEF0F3;
3025
+ background-color:var(--iui-color-background-disabled);
3026
+ border-color:var(--iui-color-background-disabled);
3027
+ --_hover-color:var(--iui-color-background-disabled);
2946
3028
  cursor:not-allowed; }
3029
+ .iui-select-button .iui-icon{
3030
+ width:16px;
3031
+ height:16px;
3032
+ flex:0 0 auto;
3033
+ fill:rgba(0, 0, 0, 0.8);
3034
+ fill:var(--iui-icons-color-actionable);
3035
+ fill:currentColor; }
3036
+ .iui-select-button .iui-icon + .iui-content{
3037
+ margin-left:8px; }
3038
+ .iui-select-button .iui-content{
3039
+ overflow:hidden;
3040
+ white-space:nowrap;
3041
+ text-overflow:ellipsis; }
3042
+ .iui-select-button.iui-placeholder{
3043
+ color:rgba(0, 0, 0, 0.2);
3044
+ color:var(--iui-text-color-placeholder); }
2947
3045
 
2948
3046
  .iui-textarea{
2949
3047
  margin:0;
@@ -3031,183 +3129,72 @@ html.iui-theme-dark{
3031
3129
  border-color:#EEF0F3;
3032
3130
  background-color:var(--iui-color-background-disabled);
3033
3131
  border-color:var(--iui-color-background-disabled);
3034
- cursor:not-allowed; }
3132
+ cursor:not-allowed;
3133
+ --_hover-color:var(--iui-color-background-disabled); }
3035
3134
  .iui-textarea[disabled], .iui-textarea[readonly]{
3036
3135
  resize:none; }
3037
3136
 
3038
- .iui-select{
3039
- margin:0;
3040
- padding:0;
3041
- border:none;
3042
- vertical-align:baseline;
3043
- display:flex;
3044
- flex-direction:column;
3137
+ .iui-input-with-icon{
3138
+ display:-ms-grid;
3139
+ display:grid;
3140
+ align-items:center;
3141
+ cursor:pointer; }
3142
+ .iui-input-with-icon > :first-child{
3143
+ -ms-grid-row:1;
3144
+ grid-area:1 / -1;
3145
+ padding-right:40px; }
3146
+ .iui-input-with-icon:focus-within > :first-child{
3147
+ outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
3148
+ outline-offset:-2px; }
3149
+ .iui-input-with-icon:hover > :first-child{
3150
+ border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
3151
+
3152
+ .iui-end-icon{
3153
+ -ms-grid-row:1;
3154
+ -ms-grid-column:3;
3155
+ grid-area:inputs;
3156
+ -ms-grid-column-align:end;
3157
+ justify-self:end;
3158
+ margin:0 14px 0 0;
3045
3159
  position:relative;
3046
- width:100%;
3047
- min-width:0; }
3048
- .iui-select > .iui-select-button{
3049
- margin:0;
3050
- padding:0;
3051
- border:none;
3052
- vertical-align:baseline;
3053
- width:100%;
3054
- font-family:inherit;
3055
- font-size:14px;
3056
- font-weight:400;
3057
- line-height:22px;
3058
- border-radius:3px;
3059
- -webkit-appearance:none;
3060
- -moz-appearance:none;
3061
- appearance:none;
3062
- box-sizing:border-box;
3063
- padding:7px 12px;
3064
- min-height:38px;
3065
- color:rgba(0, 0, 0, 0.8);
3066
- background-color:#FFF;
3067
- border:1px solid rgba(0, 0, 0, 0.4);
3068
- color:var(--iui-text-color);
3069
- background-color:var(--iui-color-background-1);
3070
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
3071
- display:flex;
3160
+ display:flex;
3161
+ grid-area:1 / -1; }
3162
+ .iui-end-icon svg{
3163
+ width:16px;
3164
+ height:16px; }
3165
+ .iui-end-icon.iui-button{
3166
+ height:100%;
3167
+ width:-webkit-fit-content;
3168
+ width:-moz-fit-content;
3169
+ width:fit-content;
3170
+ margin-right:0;
3171
+ border-top-left-radius:0;
3172
+ border-bottom-left-radius:0; }
3173
+ .iui-end-icon.iui-actionable{
3072
3174
  align-items:center;
3073
- min-height:38px;
3074
- padding-right:32px;
3075
- -webkit-user-select:none;
3076
- -moz-user-select:none;
3077
- -ms-user-select:none;
3078
- user-select:none;
3079
- position:relative; }
3080
- .iui-select > .iui-select-button:focus-visible{
3081
- outline:2px solid var(--iui-color-foreground-primary);
3082
- outline-offset:-2px; }
3083
- @supports not selector(*:focus-visible){
3084
- .iui-select > .iui-select-button:focus{
3085
- outline:2px solid var(--iui-color-foreground-primary);
3086
- outline-offset:-2px; } }
3087
- @media (prefers-reduced-motion: no-preference){
3088
- .iui-select > .iui-select-button{
3089
- transition:border-color 0.2s ease-out; } }
3090
- .iui-select > .iui-select-button.iui-small{
3091
- padding-top:1.5px;
3092
- padding-bottom:1.5px;
3093
- min-height:27px; }
3094
- .iui-select > .iui-select-button.iui-large{
3095
- padding-top:12.5px;
3096
- padding-bottom:12.5px;
3097
- min-height:49px;
3098
- font-size:16px; }
3099
- .iui-select > .iui-select-button::-moz-placeholder{
3100
- -moz-user-select:none;
3101
- user-select:none;
3102
- color:rgba(0, 0, 0, 0.2);
3103
- color:var(--iui-text-color-placeholder); }
3104
- .iui-select > .iui-select-button:-ms-input-placeholder{
3105
- -ms-user-select:none;
3106
- user-select:none;
3107
- color:rgba(0, 0, 0, 0.2);
3108
- color:var(--iui-text-color-placeholder); }
3109
- .iui-select > .iui-select-button::placeholder{
3110
- -webkit-user-select:none;
3111
- -moz-user-select:none;
3112
- -ms-user-select:none;
3113
- user-select:none;
3114
- color:rgba(0, 0, 0, 0.2);
3115
- color:var(--iui-text-color-placeholder); }
3116
- .iui-select > .iui-select-button:-webkit-autofill{
3117
- border-color:#008be1;
3118
- color:#008be1;
3119
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
3120
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3121
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3122
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
3123
- .iui-select > .iui-select-button:autofill{
3124
- border-color:#008be1;
3125
- color:#008be1;
3126
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
3127
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3128
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
3129
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
3130
- .iui-select > .iui-select-button:hover{
3131
- border-color:rgba(0, 0, 0, 0.8);
3132
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3133
- @media (prefers-reduced-motion: no-preference){
3134
- .iui-select > .iui-select-button:hover{
3135
- transition:border-color 0.2s ease-out; } }
3136
- .iui-select > .iui-select-button[disabled]{
3137
- background-color:#EEF0F3;
3138
- border-color:#EEF0F3;
3139
- background-color:var(--iui-color-background-disabled);
3140
- border-color:var(--iui-color-background-disabled);
3141
- cursor:not-allowed; }
3142
- .iui-select > .iui-select-button:focus-visible{
3143
- outline:2px solid var(--iui-color-foreground-primary);
3144
- outline-offset:-2px; }
3145
- @supports not selector(*:focus-visible){
3146
- .iui-select > .iui-select-button:focus{
3147
- outline:2px solid var(--iui-color-foreground-primary);
3148
- outline-offset:-2px; } }
3149
- @media (prefers-reduced-motion: no-preference){
3150
- .iui-select > .iui-select-button{
3151
- transition:border-color 0.2s ease-out; } }
3152
- .iui-select > .iui-select-button > .iui-icon{
3153
- width:16px;
3154
- height:16px;
3155
- flex:0 0 auto;
3156
- fill:rgba(0, 0, 0, 0.8);
3157
- fill:var(--iui-icons-color-actionable); }
3158
- .iui-select > .iui-select-button > .iui-icon + .iui-content{
3159
- margin-left:8px; }
3160
- .iui-select > .iui-select-button > .iui-content{
3161
- overflow:hidden;
3162
- white-space:nowrap;
3163
- text-overflow:ellipsis; }
3164
- .iui-select > .iui-select-button.iui-placeholder{
3165
- color:rgba(0, 0, 0, 0.2);
3166
- color:var(--iui-text-color-placeholder); }
3167
- .iui-select > .iui-select-button::after{
3168
- content:'';
3169
- position:absolute;
3170
- top:50%;
3171
- right:16px;
3172
- transform:translateY(-50%);
3173
- width:0;
3174
- height:0;
3175
- border-left:5px solid transparent;
3176
- border-right:5px solid transparent;
3177
- border-top:5px solid rgba(0, 0, 0, 0.8);
3178
- border-top:5px solid var(--iui-icons-color-actionable); }
3179
- .iui-select > .iui-select-button:hover{
3180
- border-color:rgba(0, 0, 0, 0.8);
3181
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
3182
- .iui-select > .iui-select-button:hover::after{
3183
- border-bottom:none;
3184
- border-top:5px solid black;
3185
- border-top:5px solid var(--iui-icons-color-actionable-hover); }
3186
- .iui-select > .iui-select-button.iui-active::after{
3187
- border-top:none;
3188
- border-bottom:5px solid rgba(0, 0, 0, 0.8);
3189
- border-bottom:5px solid var(--iui-icons-color-actionable); }
3190
- .iui-select > .iui-select-button.iui-active:hover::after{
3191
- border-bottom:5px solid black;
3192
- border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
3193
- .iui-select > .iui-select-button.iui-disabled{
3194
- cursor:not-allowed;
3195
- background-color:#EEF0F3;
3196
- border-color:#EEF0F3;
3197
- background-color:var(--iui-color-background-disabled);
3198
- border-color:var(--iui-color-background-disabled); }
3199
- .iui-select > .iui-select-button.iui-disabled::after{
3200
- border-top:5px solid rgba(0, 0, 0, 0.2);
3201
- border-top:5px solid var(--iui-icons-color-actionable-disabled); }
3202
- .iui-select.iui-small .iui-select-button{
3203
- padding-top:1.5px;
3204
- padding-bottom:1.5px;
3205
- min-height:27px; }
3206
- .iui-select.iui-large .iui-select-button{
3207
- padding-top:12.5px;
3208
- padding-bottom:12.5px;
3209
- min-height:49px;
3210
- font-size:16px; }
3175
+ height:90%;
3176
+ margin-right:2px;
3177
+ padding:0 12px;
3178
+ cursor:pointer;
3179
+ background-position:center;
3180
+ transition:background 0.4s ease-out; }
3181
+ .iui-end-icon.iui-actionable:hover{
3182
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
3183
+ .iui-end-icon.iui-actionable:active{
3184
+ background-color:var(--iui-color-background-2);
3185
+ background-size:100%;
3186
+ transition:background 0s; }
3187
+ .iui-end-icon.iui-actionable svg{
3188
+ fill:rgba(0, 0, 0, 0.4);
3189
+ fill:var(--iui-icons-color);
3190
+ transition:transform 0.2s ease-out; }
3191
+ .iui-end-icon.iui-actionable.iui-open svg{
3192
+ transform:rotate(180deg); }
3193
+ .iui-end-icon.iui-disabled{
3194
+ cursor:not-allowed; }
3195
+ .iui-end-icon.iui-disabled svg{
3196
+ fill:rgba(0, 0, 0, 0.2);
3197
+ fill:var(--iui-icons-color-actionable-disabled); }
3211
3198
 
3212
3199
  .iui-checkbox{
3213
3200
  margin:0;
@@ -5302,7 +5289,6 @@ html.iui-theme-dark{
5302
5289
  box-sizing:border-box;
5303
5290
  border-radius:3px;
5304
5291
  line-height:22px;
5305
- outline:none;
5306
5292
  box-shadow:none;
5307
5293
  font-size:14px;
5308
5294
  font-weight:400;
package/css/button.css CHANGED
@@ -16,7 +16,6 @@
16
16
  box-sizing:border-box;
17
17
  border-radius:3px;
18
18
  line-height:22px;
19
- outline:none;
20
19
  box-shadow:none;
21
20
  font-size:14px;
22
21
  font-weight:400;