@itwin/itwinui-css 0.47.0 → 0.48.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 +305 -299
  2. package/css/color-picker.css +18 -16
  3. package/css/inputs.css +285 -282
  4. package/css/tree.css +2 -1
  5. package/package.json +1 -1
  6. package/scss/color-picker/color-picker.scss +47 -49
  7. package/scss/inputs/checkbox-radio.scss +17 -136
  8. package/scss/inputs/checkbox.scss +77 -43
  9. package/scss/inputs/labeled-inputs.scss +2 -2
  10. package/scss/inputs/radio.scss +9 -3
  11. package/scss/skip-to-content/skip-to-content.scss +2 -1
  12. package/scss/tree/tree.scss +1 -0
package/css/inputs.css CHANGED
@@ -45,8 +45,8 @@
45
45
  cursor:not-allowed; }
46
46
  .iui-input-container.iui-disabled label{
47
47
  cursor:not-allowed; }
48
- .iui-input-container .iui-checkbox,
49
- .iui-input-container .iui-radio{
48
+ .iui-input-container .iui-checkbox-wrapper,
49
+ .iui-input-container .iui-radio-wrapper{
50
50
  min-height:22px; }
51
51
  .iui-input-container.iui-inline-label{
52
52
  -ms-grid-rows: auto;
@@ -665,308 +665,311 @@
665
665
  fill:var(--iui-icons-color-actionable-disabled); }
666
666
 
667
667
  .iui-checkbox{
668
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
669
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
670
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
671
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
672
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
673
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
674
+ --_iui-checkbox-mask-image:initial;
675
+ -webkit-appearance:none;
676
+ -moz-appearance:none;
677
+ appearance:none;
668
678
  margin:0;
669
- padding:0;
670
- border:none;
671
- vertical-align:baseline;
672
- display:flex;
673
- align-items:center;
674
- font-size:14px;
675
- width:-webkit-fit-content;
676
- width:-moz-fit-content;
677
- width:fit-content;
678
- -webkit-user-select:none;
679
- -moz-user-select:none;
680
- -ms-user-select:none;
681
- user-select:none;
679
+ width:16px;
680
+ height:16px;
682
681
  position:relative;
683
- cursor:pointer;
684
- color:rgba(0, 0, 0, 0.8);
685
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
686
- .iui-checkbox > input{
687
- width:0;
688
- height:0;
689
- -webkit-appearance:none;
690
- -moz-appearance:none;
691
- appearance:none;
692
- opacity:0;
693
- position:absolute; }
694
- .iui-checkbox.iui-disabled{
695
- cursor:not-allowed; }
696
- .iui-checkbox .iui-checkbox-checkmark,
697
- .iui-checkbox .iui-radio-dot{
698
- width:16px;
699
- height:16px;
682
+ border-radius:3px;
683
+ background-color:var(--_iui-checkbox-background-color);
684
+ cursor:pointer; }
685
+ .iui-checkbox-wrapper{
700
686
  margin:0;
687
+ padding:0;
688
+ border:none;
689
+ vertical-align:baseline;
701
690
  display:flex;
702
- flex-shrink:0;
703
- justify-content:center;
704
691
  align-items:center;
692
+ font-size:14px;
693
+ width:-webkit-fit-content;
694
+ width:-moz-fit-content;
695
+ width:fit-content;
696
+ -webkit-user-select:none;
697
+ -moz-user-select:none;
698
+ -ms-user-select:none;
699
+ user-select:none;
705
700
  position:relative;
706
- isolation:isolate;
707
- border-color:rgba(0, 0, 0, 0.4);
708
- background-color:#FFF;
709
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
710
- background-color:var(--iui-color-background-1); }
711
- .iui-checkbox .iui-checkbox-checkmark::after,
712
- .iui-checkbox .iui-radio-dot::after{
713
- content:'';
714
- position:absolute;
715
- inset:0;
716
- z-index:-1;
717
- transition:border-color 0.2s ease-out;
718
- border-radius:inherit;
719
- border-style:solid;
720
- border-width:1px;
721
- border-color:inherit; }
722
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial),
723
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
724
- width:100%;
725
- height:100%;
726
- fill:#008BE1;
727
- fill:var(--iui-icons-color-primary); }
728
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
729
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
730
- opacity:0; }
731
- @media (prefers-reduced-motion: no-preference){
732
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
733
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
734
- transition:opacity 0.2s ease; } }
735
- .iui-checkbox > .iui-label{
736
- margin-right:8px;
737
- display:flex;
738
- align-items:center; }
739
- .iui-checkbox > .iui-label svg{
740
- width:16px;
741
- height:16px;
742
- vertical-align:middle;
743
- fill:rgba(0, 0, 0, 0.8);
744
- fill:var(--iui-icons-color-actionable); }
745
- .iui-checkbox .iui-checkbox-checkmark ~ .iui-label,
746
- .iui-checkbox .iui-radio-dot ~ .iui-label{
747
- margin-left:8px;
748
- margin-right:0; }
749
- .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
750
- .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
751
- border-color:rgba(0, 0, 0, 0.8);
752
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
753
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
754
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
755
- .iui-checkbox input:checked ~ .iui-radio-dot{
756
- border-color:rgba(0, 0, 0, 0.6);
757
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
758
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
759
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
760
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
761
- opacity:1; }
762
- @media (prefers-reduced-motion: no-preference){
763
- .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
764
- .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
765
- .iui-checkbox input:checked ~ .iui-radio-dot circle{
766
- transition:opacity 0.2s ease; } }
767
- .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
768
- .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
769
- outline:2px solid #008BE1;
701
+ cursor:pointer;
702
+ color:rgba(0, 0, 0, 0.8);
703
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
704
+ gap:8px; }
705
+ .iui-checkbox-wrapper > * + *{
706
+ margin-left:8px; }
707
+ @supports (gap: 8px){
708
+ .iui-checkbox-wrapper > * + *{
709
+ margin-left:0; } }
710
+ .iui-checkbox-wrapper.iui-loading{
711
+ cursor:wait;
712
+ color:var(--iui-text-color-muted); }
713
+ .iui-checkbox-wrapper > .iui-checkbox-label,
714
+ .iui-checkbox-wrapper > .iui-radio-label{
715
+ display:flex;
716
+ align-items:center; }
717
+ .iui-checkbox-wrapper > .iui-checkbox-label svg,
718
+ .iui-checkbox-wrapper > .iui-radio-label svg{
719
+ width:16px;
720
+ height:16px;
721
+ vertical-align:middle;
722
+ fill:currentColor; }
723
+ .iui-checkbox-wrapper.iui-disabled{
724
+ cursor:not-allowed;
725
+ color:var(--iui-text-color-muted); }
726
+ .iui-checkbox-wrapper.iui-disabled svg{
727
+ fill:var(--iui-icons-color-actionable-disabled); }
728
+ .iui-checkbox-wrapper.iui-positive{
729
+ color:#53A21A;
730
+ color:var(--iui-color-foreground-positive); }
731
+ .iui-checkbox-wrapper.iui-warning{
732
+ color:#F18B12;
733
+ color:var(--iui-color-foreground-warning); }
734
+ .iui-checkbox-wrapper.iui-negative{
735
+ color:#D30A0A;
736
+ color:var(--iui-color-foreground-negative); }
737
+ .iui-checkbox::before{
738
+ content:'';
739
+ position:absolute;
740
+ inset:0;
741
+ transition:border-color 0.2s ease-out;
742
+ border-radius:inherit;
743
+ border-style:solid;
744
+ border-width:1px;
745
+ border-color:var(--_iui-checkbox-border-color); }
746
+ .iui-checkbox::after{
747
+ content:'';
748
+ position:absolute;
749
+ inset:0;
750
+ background-color:var(--_iui-checkbox-svg-color);
751
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
752
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
753
+ .iui-checkbox:not(:checked){
754
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
755
+ .iui-checkbox:checked{
756
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
757
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
758
+ .iui-checkbox:indeterminate{
759
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
760
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
761
+ .iui-checkbox:hover{
762
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
763
+ .iui-checkbox:focus-visible{
770
764
  outline:2px solid var(--iui-color-foreground-primary);
771
765
  outline-offset:-1px; }
772
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
773
- .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
774
- outline:none; }
775
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark,
776
- .iui-checkbox input:disabled ~ .iui-radio-dot{
777
- cursor:not-allowed;
778
- background-color:#EEF0F3;
779
- border-color:#EEF0F3;
780
- background-color:var(--iui-color-background-disabled);
781
- border-color:var(--iui-color-background-disabled); }
782
- .iui-checkbox input:disabled ~ .iui-checkbox-checkmark svg,
783
- .iui-checkbox input:disabled ~ .iui-radio-dot svg{
784
- fill:rgba(0, 0, 0, 0.2);
785
- fill:var(--iui-icons-color-actionable-disabled); }
786
- .iui-checkbox input:disabled ~ .iui-label{
787
- cursor:not-allowed;
788
- color:rgba(0, 0, 0, 0.4);
789
- color:var(--iui-text-color-muted); }
790
- .iui-checkbox input:disabled ~ .iui-label svg{
791
- fill:rgba(0, 0, 0, 0.2);
792
- fill:var(--iui-icons-color-actionable-disabled); }
793
- .iui-checkbox.iui-positive{
794
- color:#53A21A;
795
- color:var(--iui-color-foreground-positive); }
796
- .iui-checkbox.iui-warning{
797
- color:#F18B12;
798
- color:var(--iui-color-foreground-warning); }
799
- .iui-checkbox.iui-negative{
800
- color:#D30A0A;
801
- color:var(--iui-color-foreground-negative); }
802
- .iui-checkbox .iui-checkbox-checkmark{
803
- border-radius:3px; }
766
+ @supports not selector(*:focus-visible){
767
+ .iui-checkbox:focus{
768
+ outline:2px solid var(--iui-color-foreground-primary);
769
+ outline-offset:-1px; } }
770
+ .iui-checkbox.iui-checkbox-visibility{
771
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
772
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
773
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
774
+ --_iui-checkbox-border-color:transparent;
775
+ --_iui-checkbox-background-color:transparent; }
776
+ .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
777
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
778
+ .iui-checkbox.iui-checkbox-visibility:where(:hover){
779
+ --_iui-checkbox-border-color:transparent;
780
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
781
+ .iui-checkbox:disabled{
782
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
783
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
784
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
785
+ cursor:not-allowed; }
804
786
  .iui-checkbox.iui-loading{
787
+ --_iui-checkbox-border-color:transparent;
788
+ --_iui-checkbox-background-color:transparent;
789
+ opacity:0;
790
+ position:absolute;
805
791
  cursor:wait; }
806
- .iui-checkbox.iui-loading input ~ .iui-checkbox-checkmark{
807
- border-color:transparent;
808
- background-color:transparent; }
809
- .iui-checkbox.iui-loading input:disabled ~ .iui-checkbox-checkmark{
810
- cursor:wait; }
811
- .iui-checkbox.iui-loading input:disabled ~ .iui-label{
812
- cursor:wait; }
813
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
814
- background-color:rgba(0, 0, 0, 0.1);
815
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
816
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark::after,
817
- .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark::after{
818
- border:none; }
819
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
820
- background-color:transparent; }
821
- .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
822
- .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
823
- opacity:0; }
824
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
825
- opacity:1;
826
- transition:opacity 0.2s ease;
827
- fill:rgba(0, 0, 0, 0.8);
828
- fill:var(--iui-icons-color-actionable); }
829
- .iui-checkbox-visibility input:disabled ~ .iui-checkbox-checkmark .iui-uncheck{
830
- fill:rgba(0, 0, 0, 0.2);
831
- fill:var(--iui-icons-color-actionable-disabled); }
832
792
 
833
793
  .iui-radio{
794
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
795
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
796
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
797
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
798
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
799
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
800
+ --_iui-checkbox-mask-image:initial;
801
+ -webkit-appearance:none;
802
+ -moz-appearance:none;
803
+ appearance:none;
834
804
  margin:0;
835
- padding:0;
836
- border:none;
837
- vertical-align:baseline;
838
- display:flex;
839
- align-items:center;
840
- font-size:14px;
841
- width:-webkit-fit-content;
842
- width:-moz-fit-content;
843
- width:fit-content;
844
- -webkit-user-select:none;
845
- -moz-user-select:none;
846
- -ms-user-select:none;
847
- user-select:none;
805
+ width:16px;
806
+ height:16px;
848
807
  position:relative;
808
+ border-radius:3px;
809
+ background-color:var(--_iui-checkbox-background-color);
849
810
  cursor:pointer;
850
- color:rgba(0, 0, 0, 0.8);
851
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
852
- .iui-radio > input{
853
- width:0;
854
- height:0;
855
- -webkit-appearance:none;
856
- -moz-appearance:none;
857
- appearance:none;
858
- opacity:0;
859
- position:absolute; }
860
- .iui-radio.iui-disabled{
861
- cursor:not-allowed; }
862
- .iui-radio .iui-checkbox-checkmark,
863
- .iui-radio .iui-radio-dot{
864
- width:16px;
865
- height:16px;
811
+ border-radius:50%; }
812
+ .iui-radio-wrapper{
866
813
  margin:0;
814
+ padding:0;
815
+ border:none;
816
+ vertical-align:baseline;
867
817
  display:flex;
868
- flex-shrink:0;
869
- justify-content:center;
870
818
  align-items:center;
819
+ font-size:14px;
820
+ width:-webkit-fit-content;
821
+ width:-moz-fit-content;
822
+ width:fit-content;
823
+ -webkit-user-select:none;
824
+ -moz-user-select:none;
825
+ -ms-user-select:none;
826
+ user-select:none;
871
827
  position:relative;
872
- isolation:isolate;
873
- border-color:rgba(0, 0, 0, 0.4);
874
- background-color:#FFF;
875
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
876
- background-color:var(--iui-color-background-1); }
877
- .iui-radio .iui-checkbox-checkmark::after,
878
- .iui-radio .iui-radio-dot::after{
879
- content:'';
880
- position:absolute;
881
- inset:0;
882
- z-index:-1;
883
- transition:border-color 0.2s ease-out;
884
- border-radius:inherit;
885
- border-style:solid;
886
- border-width:1px;
887
- border-color:inherit; }
888
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial),
889
- .iui-radio .iui-radio-dot svg:not(.iui-radial){
890
- width:100%;
891
- height:100%;
892
- fill:#008BE1;
893
- fill:var(--iui-icons-color-primary); }
894
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
895
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
896
- opacity:0; }
897
- @media (prefers-reduced-motion: no-preference){
898
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
899
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
900
- transition:opacity 0.2s ease; } }
901
- .iui-radio > .iui-label{
902
- margin-right:8px;
828
+ cursor:pointer;
829
+ color:rgba(0, 0, 0, 0.8);
830
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
831
+ gap:8px; }
832
+ .iui-radio-wrapper > * + *{
833
+ margin-left:8px; }
834
+ @supports (gap: 8px){
835
+ .iui-radio-wrapper > * + *{
836
+ margin-left:0; } }
837
+ .iui-radio-wrapper.iui-loading{
838
+ cursor:wait;
839
+ color:var(--iui-text-color-muted); }
840
+ .iui-radio-wrapper > .iui-checkbox-label,
841
+ .iui-radio-wrapper > .iui-radio-label{
842
+ display:flex;
843
+ align-items:center; }
844
+ .iui-radio-wrapper > .iui-checkbox-label svg,
845
+ .iui-radio-wrapper > .iui-radio-label svg{
846
+ width:16px;
847
+ height:16px;
848
+ vertical-align:middle;
849
+ fill:currentColor; }
850
+ .iui-radio-wrapper.iui-disabled{
851
+ cursor:not-allowed;
852
+ color:var(--iui-text-color-muted); }
853
+ .iui-radio-wrapper.iui-disabled svg{
854
+ fill:var(--iui-icons-color-actionable-disabled); }
855
+ .iui-radio-wrapper.iui-positive{
856
+ color:#53A21A;
857
+ color:var(--iui-color-foreground-positive); }
858
+ .iui-radio-wrapper.iui-warning{
859
+ color:#F18B12;
860
+ color:var(--iui-color-foreground-warning); }
861
+ .iui-radio-wrapper.iui-negative{
862
+ color:#D30A0A;
863
+ color:var(--iui-color-foreground-negative); }
864
+ .iui-radio-wrapper{
865
+ margin:0;
866
+ padding:0;
867
+ border:none;
868
+ vertical-align:baseline;
903
869
  display:flex;
904
- align-items:center; }
905
- .iui-radio > .iui-label svg{
906
- width:16px;
907
- height:16px;
908
- vertical-align:middle;
909
- fill:rgba(0, 0, 0, 0.8);
910
- fill:var(--iui-icons-color-actionable); }
911
- .iui-radio .iui-checkbox-checkmark ~ .iui-label,
912
- .iui-radio .iui-radio-dot ~ .iui-label{
913
- margin-left:8px;
914
- margin-right:0; }
915
- .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
916
- .iui-radio:hover > input:enabled ~ .iui-radio-dot{
917
- border-color:rgba(0, 0, 0, 0.8);
918
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
919
- .iui-radio input:checked ~ .iui-checkbox-checkmark,
920
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
921
- .iui-radio input:checked ~ .iui-radio-dot{
922
- border-color:rgba(0, 0, 0, 0.6);
923
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
924
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
925
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
926
- .iui-radio input:checked ~ .iui-radio-dot circle{
927
- opacity:1; }
928
- @media (prefers-reduced-motion: no-preference){
929
- .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
930
- .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
931
- .iui-radio input:checked ~ .iui-radio-dot circle{
932
- transition:opacity 0.2s ease; } }
933
- .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
934
- .iui-radio input:enabled:focus ~ .iui-radio-dot{
935
- outline:2px solid #008BE1;
870
+ align-items:center;
871
+ font-size:14px;
872
+ width:-webkit-fit-content;
873
+ width:-moz-fit-content;
874
+ width:fit-content;
875
+ -webkit-user-select:none;
876
+ -moz-user-select:none;
877
+ -ms-user-select:none;
878
+ user-select:none;
879
+ position:relative;
880
+ cursor:pointer;
881
+ color:rgba(0, 0, 0, 0.8);
882
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
883
+ gap:8px; }
884
+ .iui-radio-wrapper > * + *{
885
+ margin-left:8px; }
886
+ @supports (gap: 8px){
887
+ .iui-radio-wrapper > * + *{
888
+ margin-left:0; } }
889
+ .iui-radio-wrapper.iui-loading{
890
+ cursor:wait;
891
+ color:var(--iui-text-color-muted); }
892
+ .iui-radio-wrapper > .iui-checkbox-label,
893
+ .iui-radio-wrapper > .iui-radio-label{
894
+ display:flex;
895
+ align-items:center; }
896
+ .iui-radio-wrapper > .iui-checkbox-label svg,
897
+ .iui-radio-wrapper > .iui-radio-label svg{
898
+ width:16px;
899
+ height:16px;
900
+ vertical-align:middle;
901
+ fill:currentColor; }
902
+ .iui-radio-wrapper.iui-disabled{
903
+ cursor:not-allowed;
904
+ color:var(--iui-text-color-muted); }
905
+ .iui-radio-wrapper.iui-disabled svg{
906
+ fill:var(--iui-icons-color-actionable-disabled); }
907
+ .iui-radio-wrapper.iui-positive{
908
+ color:#53A21A;
909
+ color:var(--iui-color-foreground-positive); }
910
+ .iui-radio-wrapper.iui-warning{
911
+ color:#F18B12;
912
+ color:var(--iui-color-foreground-warning); }
913
+ .iui-radio-wrapper.iui-negative{
914
+ color:#D30A0A;
915
+ color:var(--iui-color-foreground-negative); }
916
+ .iui-radio::before{
917
+ content:'';
918
+ position:absolute;
919
+ inset:0;
920
+ transition:border-color 0.2s ease-out;
921
+ border-radius:inherit;
922
+ border-style:solid;
923
+ border-width:1px;
924
+ border-color:var(--_iui-checkbox-border-color); }
925
+ .iui-radio::after{
926
+ content:'';
927
+ position:absolute;
928
+ inset:0;
929
+ background-color:var(--_iui-checkbox-svg-color);
930
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
931
+ mask:var(--_iui-checkbox-mask-image) no-repeat center; }
932
+ .iui-radio:not(:checked){
933
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg); }
934
+ .iui-radio:checked{
935
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
936
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg); }
937
+ .iui-radio:indeterminate{
938
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
939
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg); }
940
+ .iui-radio:hover{
941
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
942
+ .iui-radio:focus-visible{
936
943
  outline:2px solid var(--iui-color-foreground-primary);
937
944
  outline-offset:-1px; }
938
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
939
- .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
940
- outline:none; }
941
- .iui-radio input:disabled ~ .iui-checkbox-checkmark,
942
- .iui-radio input:disabled ~ .iui-radio-dot{
943
- cursor:not-allowed;
944
- background-color:#EEF0F3;
945
- border-color:#EEF0F3;
946
- background-color:var(--iui-color-background-disabled);
947
- border-color:var(--iui-color-background-disabled); }
948
- .iui-radio input:disabled ~ .iui-checkbox-checkmark svg,
949
- .iui-radio input:disabled ~ .iui-radio-dot svg{
950
- fill:rgba(0, 0, 0, 0.2);
951
- fill:var(--iui-icons-color-actionable-disabled); }
952
- .iui-radio input:disabled ~ .iui-label{
953
- cursor:not-allowed;
954
- color:rgba(0, 0, 0, 0.4);
955
- color:var(--iui-text-color-muted); }
956
- .iui-radio input:disabled ~ .iui-label svg{
957
- fill:rgba(0, 0, 0, 0.2);
958
- fill:var(--iui-icons-color-actionable-disabled); }
959
- .iui-radio.iui-positive{
960
- color:#53A21A;
961
- color:var(--iui-color-foreground-positive); }
962
- .iui-radio.iui-warning{
963
- color:#F18B12;
964
- color:var(--iui-color-foreground-warning); }
965
- .iui-radio.iui-negative{
966
- color:#D30A0A;
967
- color:var(--iui-color-foreground-negative); }
968
- .iui-radio .iui-radio-dot{
969
- border-radius:50%; }
945
+ @supports not selector(*:focus-visible){
946
+ .iui-radio:focus{
947
+ outline:2px solid var(--iui-color-foreground-primary);
948
+ outline-offset:-1px; } }
949
+ .iui-radio.iui-checkbox-visibility{
950
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
951
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
952
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
953
+ --_iui-checkbox-border-color:transparent;
954
+ --_iui-checkbox-background-color:transparent; }
955
+ .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
956
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable); }
957
+ .iui-radio.iui-checkbox-visibility:where(:hover){
958
+ --_iui-checkbox-border-color:transparent;
959
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
960
+ .iui-radio:disabled{
961
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
962
+ --_iui-checkbox-border-color:var(--iui-color-background-disabled);
963
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
964
+ cursor:not-allowed; }
965
+ .iui-radio.iui-loading{
966
+ --_iui-checkbox-border-color:transparent;
967
+ --_iui-checkbox-background-color:transparent;
968
+ opacity:0;
969
+ position:absolute;
970
+ cursor:wait; }
971
+ .iui-radio:checked{
972
+ --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>'); }
970
973
 
971
974
  .iui-radio-tile-container{
972
975
  display:inline-flex;
package/css/tree.css CHANGED
@@ -38,7 +38,8 @@
38
38
  .iui-tree-node{
39
39
  display:flex;
40
40
  cursor:pointer;
41
- padding:0 8px; }
41
+ padding:0 8px;
42
+ align-items:center; }
42
43
  .iui-tree-node-checkbox{
43
44
  margin-right:8px; }
44
45
  .iui-tree-node-content{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.47.0",
3
+ "version": "0.48.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",